/* ============================================================
   DAF — RED BULL BATALLA (case-specific layer)
   Inherits tokens + chrome from styles.css / layout.css / case.css
   ============================================================ */

/* section number + label (mirrors mc-mark) */
.rb-mark {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: clamp(30px, 3.4vw, 52px);
}
.rb-mark .n {
  font-family: var(--mono); font-weight: 400; font-size: 12px;
  color: var(--blue); letter-spacing: 0.08em;
}
.rb-mark .t {
  font-family: var(--grotesk); font-weight: 600; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink);
}

.rb-h {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px, 3.4vw, 52px); line-height: 1.02; letter-spacing: -0.018em;
  font-optical-sizing: auto; text-wrap: pretty;
}
.rb-h em { font-style: italic; color: var(--blue); }
.rb-body {
  font-family: var(--grotesk); font-weight: 400; font-size: 13.5px; line-height: 1.62;
  color: var(--muted); max-width: 40ch; text-wrap: pretty;
}

/* reveal */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ---------------- HERO — full-bleed photo, copy on the cream left ---------------- */
.case-rb .cs-hero {
  position: relative;
  background-color: #F1EDE2;
  background-image: url('uploads/RedBull_NEW_Hero_Images.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  min-height: 41.67vw; /* = width / 2.4 master ratio — full image, no crop */
  display: flex; align-items: center;
}
.case-rb .cs-hero .cs-hero-grid { display: block; position: relative; width: 100%; }
.case-rb .cs-hero .cs-hero-copy {
  position: relative; z-index: 2;
  border-right: 0;
  max-width: min(580px, 44%);
  justify-content: center;
}
/* ---- HERO VIEWPORT RULES ----
   ≥1920px   : composition as designed (type clamps hit their caps)
   1000–1919 : proportional band — copy width + type scale in lockstep with the
               photo (all values = their 1920px size ÷ 19.2, so the handoff at
               1920 is seamless and the text never drifts over the players)
   <1000px   : stacked — full collage image on top, copy below on cream */
@media (max-width: 1919px) and (min-width: 1000px) {
  .case-rb .cs-hero .cs-hero-copy {
    max-width: calc(var(--pad) + 27.3vw);
    padding-top: 4.06vw;
    padding-right: 3.13vw;
    padding-bottom: 2.81vw;
  }
  .case-rb .cs-hero .cs-hero-copy .eyebrow { font-size: max(9px, 0.58vw); margin-bottom: 1.15vw; }
  .case-rb .rb-hero .cs-hero-h1 { font-size: 4.375vw; margin-top: 0.94vw; margin-bottom: 1.57vw; }
  .case-rb .cs-hero .cs-hero-copy .dek { font-size: max(10.5px, 0.78vw); }
  .case-rb .rb-tags { font-size: max(8.5px, 0.52vw); margin-top: 1.57vw; }
}
@media (max-width: 999px) {
  .case-rb .cs-hero { display: block; min-height: 0; background: #F1EDE2; }
  .case-rb .cs-hero::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 2880 / 1200;
    background: url('uploads/RedBull_NEW_Hero_Images.png') center / cover no-repeat;
    border-bottom: 1px solid var(--line);
  }
  .case-rb .cs-hero .cs-hero-copy { max-width: 100%; min-height: 0; }
}

.rb-hero .cs-hero-h1 { margin-top: 18px; }
.rb-vlabel {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
}
.rb-tags {
  font-family: var(--grotesk); font-weight: 600; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  margin-top: clamp(20px, 2vw, 30px);
}
.rb-hero-actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }

/* ---------------- 01 CHALLENGE ---------------- */
.rb-challenge {
  display: grid; grid-template-columns: 1fr 1.55fr;
  gap: clamp(30px, 3.6vw, 64px); align-items: center;
}
.rb-chcols { display: grid; grid-template-columns: repeat(3, 1fr); border-left: 1px solid var(--line-soft); }
.rb-chcol { padding: 4px clamp(14px, 1.6vw, 24px); border-right: 1px solid var(--line-soft); }
.rb-chcol .ic { height: 40px; color: var(--ink); display: flex; align-items: flex-end; margin-bottom: 18px; }
.rb-chcol .ic svg { height: 30px; width: auto; }
.rb-chcol .t {
  font-family: var(--grotesk); font-weight: 700; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink); line-height: 1.5;
}
.rb-chcol .d {
  font-family: var(--grotesk); font-weight: 400; font-size: 11.5px; line-height: 1.55;
  color: var(--muted); margin-top: 10px; text-wrap: pretty;
}

/* ---------------- FULL-BLEED IMAGE ---------------- */
.rb-fullbleed { width: 100%; margin: 0; padding: 0; line-height: 0; background: var(--ink); border-bottom: 1px solid var(--line); }
.rb-fullbleed img { display: block; width: 100%; height: auto; }

/* ---------------- 02 ECOSYSTEM FLOW ---------------- */
.rb-eco { display: grid; grid-template-columns: 0.74fr 2.2fr; gap: clamp(30px, 3.6vw, 64px); align-items: center; }
.rb-flow { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; }
.rb-node { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 0 1 auto; max-width: 116px; }
.rb-node .cap {
  font-family: var(--grotesk); font-weight: 700; font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink); line-height: 14px; height: 14px;
}
.rb-node .sub {
  font-family: var(--grotesk); font-weight: 400; font-size: 10px; color: var(--muted);
  margin-top: 4px; line-height: 14px; min-height: 28px;
}
.rb-node .ring {
  width: clamp(52px, 4.6vw, 64px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--line); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  margin-top: 14px;
}
.rb-node .ring svg { width: 46%; height: 46%; }
/* text block above is a fixed 60px (14 + 4 + 28 + 14 ring margin), so the ring
   center sits at 60px + half the ring; park the arrow center on that line */
.rb-flow-arrow {
  flex: 0 0 auto; width: 22px; color: var(--ink); opacity: .5; align-self: flex-start;
  margin-top: calc(56px + clamp(26px, 2.3vw, 32px));
}
.rb-engine {
  margin-top: clamp(26px, 2.6vw, 38px);
  border: 1px dashed var(--line); border-top: 0;
  padding: 16px 18px 0; position: relative; height: 34px;
}
.rb-engine .lbl {
  position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  background: var(--paper); padding: 0 16px; white-space: nowrap;
  font-family: var(--grotesk); font-weight: 600; font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue);
}

/* ---------------- 03 PLATFORM — phone screens ---------------- */
.rb-screens {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
  margin-top: clamp(30px, 3vw, 46px);
}
.rb-screen { display: flex; flex-direction: column; min-width: 0; }
.rb-screen .slbl {
  font-family: var(--grotesk); font-weight: 600; font-size: 9.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 12px; text-align: center;
}
.phone {
  background: #0B0B10; color: #F4F2EC; border-radius: 14px;
  border: 1px solid rgba(10,10,10,.3);
  box-shadow: 0 24px 48px -30px rgba(10,10,10,.55);
  aspect-ratio: 9 / 17.5; overflow: hidden; position: relative;
  font-family: var(--grotesk); display: flex; flex-direction: column;
  padding: 12px 11px; font-size: 8.5px;
}
/* real screen captures */
.phone.phone--img { padding: 0; aspect-ratio: 882 / 1568; background: #05060A; }
.phone.phone--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.phone .ph-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.phone .ph-eyebrow { font-family: var(--mono); font-size: 6.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244,242,236,.55); }
.phone .ph-ic { display: flex; gap: 6px; color: rgba(244,242,236,.6); }
.phone .ph-ic svg { width: 9px; height: 9px; }
.phone .badge {
  display: inline-block; align-self: flex-start;
  font-weight: 700; font-size: 7px; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--blue); color: #fff; padding: 3px 7px; border-radius: 3px;
}
.phone .display {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 16.5px; line-height: 1.02; letter-spacing: -0.01em; text-transform: uppercase;
}
.phone .ph-h { font-weight: 700; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.1; }
.phone .ph-sub { color: rgba(244,242,236,.55); font-size: 7.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.phone .thumb { position: relative; border-radius: 5px; overflow: hidden; background: #16161e; }
.phone .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phone .thumb .tcap {
  position: absolute; left: 6px; bottom: 5px; z-index: 2;
  font-weight: 600; font-size: 6.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.7);
}
.phone .thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55)); }
.phone .row { display: flex; align-items: center; gap: 7px; }
.phone .pill {
  border: 1px solid rgba(244,242,236,.22); border-radius: 999px;
  padding: 3px 8px; font-weight: 600; font-size: 6.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(244,242,236,.75);
}
.phone .pill.on { background: #F4F2EC; color: #0B0B10; border-color: #F4F2EC; }
.phone .btn-blue {
  background: var(--blue); color: #fff; border-radius: 5px; text-align: center;
  font-weight: 700; font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 7px 0;
}
.phone .hr { height: 1px; background: rgba(244,242,236,.12); }

/* bracket screen */
.phone .bk-row { display: flex; align-items: center; gap: 6px; }
.phone .bk-cell {
  flex: 1; background: #15151d; border-radius: 4px; padding: 4.5px 7px;
  font-weight: 600; font-size: 7px; letter-spacing: 0.08em; color: rgba(244,242,236,.85);
  display: flex; justify-content: space-between; align-items: center;
}
.phone .bk-cell .pt { color: rgba(244,242,236,.45); font-family: var(--mono); font-size: 6.5px; }
.phone .bk-cell.win { background: var(--blue); color: #fff; }
.phone .bk-line { width: 10px; height: 1px; background: rgba(244,242,236,.25); flex: 0 0 auto; }

/* profile screen */
.phone .av { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; position: relative; background: #16161e; flex: 0 0 auto; }
.phone .av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phone .stats3 { display: grid; grid-template-columns: repeat(3, 1fr); text-align: left; }
.phone .stats3 .n { font-weight: 700; font-size: 11px; letter-spacing: -0.01em; }
.phone .stats3 .l { color: rgba(244,242,236,.5); font-size: 6px; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2px; }

/* ranking screen */
.phone .rk { display: flex; align-items: center; gap: 7px; padding: 4.5px 0; }
.phone .rk .pos { font-family: var(--mono); font-size: 7px; color: rgba(244,242,236,.5); width: 8px; }
.phone .rk .nm { font-weight: 600; font-size: 8.5px; letter-spacing: 0.04em; flex: 1; }
.phone .rk .pts { font-family: var(--mono); font-size: 7px; color: var(--blue-soft); }
.phone .rk .bar { height: 2px; border-radius: 2px; background: rgba(244,242,236,.14); flex: 1; position: relative; overflow: hidden; }
.phone .rk .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--blue); display: block; }

/* community screen */
.phone .cm { display: flex; gap: 6px; align-items: flex-start; }
.phone .cm .who { font-weight: 700; font-size: 7.5px; color: var(--blue-soft); }
.phone .cm .txt { font-size: 7.5px; line-height: 1.45; color: rgba(244,242,236,.82); }

/* ---------------- 04 LIVE EVENTS ---------------- */
.rb-live { display: grid; grid-template-columns: 0.78fr 2.1fr; gap: clamp(30px, 3.6vw, 60px); align-items: center; }
.rb-live-strip { display: grid; grid-template-columns: 1.05fr 1.9fr 0.85fr; gap: 2px; }
.rb-live-strip .li { position: relative; aspect-ratio: auto; overflow: hidden; background: var(--ink); min-height: 100%; }
.rb-live-strip { aspect-ratio: 16 / 5.4; }
.rb-live-strip .li image-slot { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }

/* ---------------- FULL-BLEED VIDEO (YouTube) ---------------- */
.rb-video {
  width: 100%; margin: 0; padding: 0; line-height: 0;
  background: var(--ink); border-bottom: 1px solid var(--line);
}
.rb-video iframe {
  display: block; width: 100%; aspect-ratio: 16 / 9; border: 0;
}

/* ---------------- 05 RESULTS ---------------- */
.rb-results { display: grid; grid-template-columns: repeat(5, 1fr); border-left: 1px solid var(--line-soft); }
.rb-res { padding: 4px clamp(14px, 1.6vw, 24px); border-right: 1px solid var(--line-soft); min-height: 150px; }
.rb-res .ic { height: 36px; color: var(--ink); display: flex; align-items: flex-end; margin-bottom: 16px; }
.rb-res .ic svg { height: 26px; width: auto; }
.rb-res .t {
  font-family: var(--grotesk); font-weight: 700; font-size: 11.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--blue); line-height: 1.5;
}
.rb-res .d {
  font-family: var(--grotesk); font-weight: 400; font-size: 11px; line-height: 1.55;
  color: var(--muted); margin-top: 10px; text-wrap: pretty;
}

/* ---------------- 06 THE DOCUMENTARY ---------------- */
.rb-doc { display: grid; grid-template-columns: 0.78fr 1.55fr; gap: clamp(30px, 3.6vw, 64px); align-items: center; }
.rb-doc-player {
  background: var(--ink); line-height: 0;
  box-shadow: 0 30px 60px -38px rgba(10,10,10,.6);
}
.rb-doc-player iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
@media (max-width: 940px) { .rb-doc { grid-template-columns: 1fr; } }

/* ---------------- 07 GALLERY — 2-up row variant ---------------- */
.gal-grid--duo { grid-template-columns: repeat(2, 1fr); }
.gal-grid--duo .gal-item { aspect-ratio: 16 / 9; }
@media (max-width: 560px) { .gal-grid--duo { grid-template-columns: 1fr; } }

/* ---------------- 07 PERSPECTIVE — dark band ---------------- */
.rb-perspective {
  background: var(--ink); color: var(--paper);
  border-bottom: 1px solid var(--line);
}
.rb-persp-grid {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(56px, 6vw, 96px) var(--pad);
  display: grid; grid-template-columns: 1.5fr 0.8fr 0.55fr;
  gap: clamp(30px, 3.6vw, 60px); align-items: center;
}
.rb-persp-grid blockquote {
  font-family: var(--serif); font-weight: 400; margin: 0;
  font-size: clamp(26px, 2.9vw, 44px); line-height: 1.12; letter-spacing: -0.016em;
  text-wrap: pretty;
}
.rb-persp-grid blockquote em { font-style: italic; color: var(--blue-soft); }
.rb-persp-grid .qmark {
  display: block; font-family: var(--serif); color: var(--blue-soft);
  font-size: clamp(40px, 3.6vw, 58px); line-height: 0.5; margin-bottom: 18px;
}
.rb-persp-side p {
  font-family: var(--grotesk); font-weight: 400; font-size: 12.5px; line-height: 1.6;
  color: var(--muted-dk); text-wrap: pretty;
}
.rb-persp-side .by { margin-top: 22px; }
.rb-persp-side .by .nm {
  font-family: var(--grotesk); font-weight: 700; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper);
}
.rb-persp-side .by .rl {
  font-family: var(--grotesk); font-weight: 400; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-dk); margin-top: 5px;
}
.rb-persp-img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.rb-persp-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }

/* ---------------- 07 WHAT'S NEXT ---------------- */
.rb-next { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px, 4vw, 70px); align-items: center; }
.rb-next .rb-body { margin-top: 0; }
.rb-next-cta { margin-top: 26px; }

/* ---------------- responsive ---------------- */
@media (max-width: 940px) {
  .rb-challenge, .rb-eco, .rb-live, .rb-next { grid-template-columns: 1fr; }
  .rb-screens { grid-template-columns: repeat(3, 1fr); }
  .rb-flow { flex-wrap: wrap; justify-content: flex-start; gap: 14px; }
  .rb-flow-arrow { display: none; }
  .rb-results { grid-template-columns: repeat(2, 1fr); border-left: 0; }
  .rb-persp-grid { grid-template-columns: 1fr; }
  .rb-persp-img { max-width: 320px; }
  .rb-live-strip { aspect-ratio: auto; }
  .rb-live-strip .li { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .rb-screens { grid-template-columns: repeat(2, 1fr); }
  .rb-chcols { grid-template-columns: 1fr; border-left: 0; }
  .rb-chcol { border-right: 0; border-top: 1px solid var(--line-soft); padding: 18px 0; }
  .rb-live-strip { grid-template-columns: 1fr; }
  .rb-results { grid-template-columns: 1fr; }
}