/* ── ARC speaker concept case study ── */

/* Wider canvas — larger visuals, matching the other cases */
.case-content { max-width: 1320px; }

.case-hero { max-width: none; }

/* ─────────────────────────────────────────────
   Case meta — 3-column override
───────────────────────────────────────────── */
.case-meta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 80px;
  align-items: start;
}

/* ─────────────────────────────────────────────
   Section blocks
───────────────────────────────────────────── */
.arc-block {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.arc-text-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 780px;
}

/* ─────────────────────────────────────────────
   Typography
───────────────────────────────────────────── */
.arc-label {
  font-size: 13px;
  font-weight: 700;
  color: #8a8a8a;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.arc-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  color: #000;
}

/* ─────────────────────────────────────────────
   Media
───────────────────────────────────────────── */

/* Portrait clip — constrained and centred on the render's own dark
   backdrop, so the baked-in background reads as an intentional field
   rather than letterboxing. */
.arc-media-portrait {
  display: flex;
  justify-content: center;
  background: #1c2331;
  border-radius: 16px;
  overflow: hidden;
}

.arc-media-portrait video {
  width: 100%;
  max-width: 560px;
  height: auto;
  display: block;
}

/* Hero animation — full-bleed 16:9, on the render's own light backdrop */
.arc-media-hero {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #e9eaec;
}

.arc-media-hero video {
  width: 100%;
  height: auto;
  display: block;
}

.arc-media-full {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #e9eaec;
}

.arc-media-full img,
.arc-media-full video {
  width: 100%;
  height: auto;
  display: block;
}

/* Portrait clip beside a landscape still — align on a shared row */
.arc-media-split {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 16px;
  align-items: stretch;
}

.arc-media-cell {
  border-radius: 12px;
  overflow: hidden;
  background: #e9eaec;
}

.arc-media-cell img,
.arc-media-cell video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.arc-caption {
  margin-top: 14px;
  font-size: 13px;
  color: #8a8a8a;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ─────────────────────────────────────────────
   Scroll reveals
   The .fade-in base lives in the page's <style>; these extend it so
   media settles in with a slight scale rather than only a fade.
───────────────────────────────────────────── */
.arc-media-full.fade-in,
.arc-media-portrait.fade-in,
.arc-media-split.fade-in {
  transform: translateY(24px) scale(0.985);
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.arc-media-full.fade-in.is-visible,
.arc-media-portrait.fade-in.is-visible,
.arc-media-split.fade-in.is-visible {
  transform: translateY(0) scale(1);
}

/* Split cells arrive one after the other rather than as a block */
.arc-media-split .arc-media-cell {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.arc-media-split.is-visible .arc-media-cell {
  opacity: 1;
  transform: none;
}

.arc-media-split.is-visible .arc-media-cell:nth-child(2) {
  transition-delay: 140ms;
}

/* ─────────────────────────────────────────────
   Parallax
   Media is drawn slightly larger than its frame (see the SCALE constant
   in the page script) so it can drift without exposing the container
   edge. The transform itself is written by that script.
───────────────────────────────────────────── */
.arc-parallax {
  backface-visibility: hidden;
}

/* ─────────────────────────────────────────────
   Responsive
───────────────────────────────────────────── */
@media (max-width: 767px) {
  .case-meta        { grid-template-columns: 1fr; gap: 40px; }
  .arc-block        { gap: 28px; }
  .arc-title        { font-size: 28px; }
  .arc-media-split  { grid-template-columns: 1fr; }
  .arc-media-cell img,
  .arc-media-cell video { height: auto; object-fit: contain; }

  /* Stacked layout — the second cell is no longer beside the first */
  .arc-media-split.is-visible .arc-media-cell:nth-child(2) { transition-delay: 0ms; }
}

/* ─────────────────────────────────────────────
   Reduced motion — keep the content, drop the movement
───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .arc-media-full.fade-in,
  .arc-media-portrait.fade-in,
  .arc-media-split.fade-in {
    transform: none;
    transition: opacity 0.3s linear;
  }

  .arc-media-split .arc-media-cell {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .arc-parallax { transform: none !important; }
}