/* ==========================================================================
   Rexona Rivals case study. Loaded only on the Rexona Rivals page.
   Every rule is scoped to .rv / rv-*. Colours come from the site theme
   variables (--bg, --fg, --fg-2, --fg-3, --line), so light and dark both work;
   only video controls, which sit over footage, are fixed light-on-dark.
   ========================================================================== */
.rv {
  --rv-cols: repeat(12, minmax(0, 1fr));
  --rv-gap: clamp(1.25rem, 3vw, 3rem);
}
.rv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rv svg { display: block; }
.rv img { display: block; width: 100%; height: auto; }

/* Reveal */
.js .rv [data-rv-in] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); }
.js .rv [data-rv-in].is-in { opacity: 1; transform: none; }

/* ---------- Opening: type on the page canvas, the key visual untouched below ---------- */
.rv-open { padding-top: clamp(1rem, 2vw, 1.75rem); }
.rv-open__top { margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3.5rem); }
.rv-open__meta { padding-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }

/* Hero: the panoramic key visual edge to edge at its own proportions; the title sits
   over the dark space on the left, on the content grid, as real text. The title scales
   with the viewport up to 1440px (the approved size, 92px) and stays at that size on
   every wider screen; it never shrinks as the image grows. */
.rv-hero { position: relative; margin: 0; background: #000; }
.rv-hero__img, .rv-hero__img img { display: block; width: 100%; height: auto; }
.rv-hero__type { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; padding-bottom: 1.5%; pointer-events: none; }
/* Same left edge as the content grid (50vw - 41rem past 1440px), except on ultrawide
   screens (~2600px+), where the grid would carry the title into the first athlete;
   there it stops at 38.5vw - 22rem so the fixed-size title stays in the dark space. */
.rv-hero__type.wrap { max-width: none; padding-left: max(var(--gutter), min(50vw - 41rem, 38.5vw - 22rem)); }
.rv-title { margin: 0; font: 700 clamp(2.5rem, 6.4vw, 5.76rem)/.92 var(--font-head); letter-spacing: .005em; color: #F4F3EF; }
.rv-line { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); font: 400 clamp(1.25rem, 1rem + .9vw, 1.875rem)/1.3 var(--font-head); letter-spacing: 0; color: var(--fg-2); }
.rv-line { max-width: calc(var(--max) + 2 * var(--gutter)); }


/* ---------- Overview ---------- */
.rv-intro { display: grid; grid-template-columns: var(--rv-cols); column-gap: var(--rv-gap); row-gap: 2rem; padding-top: clamp(4rem, 2.5rem + 5vw, 9rem); }
.rv-lede { grid-column: 1 / span 7; font: 400 clamp(1.5rem, 1.1rem + 1.25vw, 2.25rem)/1.25 var(--font-head); letter-spacing: 0; text-wrap: pretty; }
.rv-intro__body { grid-column: 8 / span 5; align-self: start; padding-top: .3em; font-size: clamp(1.0625rem, .92rem + .4vw, 1.25rem); line-height: 1.55; color: var(--fg-2); text-wrap: pretty; }
.rv-intro__body p + p { margin-top: 1em; }
.rv-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.5rem var(--rv-gap); margin: clamp(1rem, .5rem + 2vw, 3rem) 0 0; padding-top: 1.25rem; border-top: 1px solid var(--line); }
[data-theme="dark"] .rv-facts, :root:not([data-theme]) .rv-facts { border-top-color: #2a2a2a; }
.rv-facts dt { font: 500 .75rem/1.4 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.rv-facts dd { margin: .45rem 0 0; font-size: .9375rem; line-height: 1.5; color: var(--fg); }

/* ---------- Sections ---------- */
.rv-sec { padding-top: clamp(5rem, 3rem + 7vw, 11rem); }
.rv-head { display: grid; grid-template-columns: var(--rv-cols); column-gap: var(--rv-gap); row-gap: 1rem; align-items: end; margin-bottom: clamp(2rem, 1.5rem + 2.5vw, 4rem); }
.rv-h2 { grid-column: 1 / span 7; font: 700 clamp(2.25rem, 1.3rem + 3.8vw, 5.25rem)/1 var(--font-head); letter-spacing: .005em; text-wrap: balance; }
.rv-sub { grid-column: 9 / span 4; font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem); line-height: 1.55; color: var(--fg-2); text-wrap: pretty; }

.rv-fig { margin: 0; min-width: 0; }
.rv-cap { display: flex; flex-wrap: wrap; gap: .15rem .5rem; margin-top: .75rem; font-size: .8125rem; line-height: 1.45; letter-spacing: .01em; color: var(--fg-3); }
.rv-cap span { color: var(--fg-2); font-weight: 500; }

/* Rows of mixed shapes at one shared height: each figure grows by its aspect ratio. */
.rv-row { display: flex; align-items: flex-start; gap: clamp(1rem, 2vw, 2rem); }
.rv-row > .rv-fig { flex: var(--ar, 1) 1 0; }
.rv-row--wide { display: block; margin-top: clamp(3rem, 2rem + 4vw, 7rem); }

/* ---------- Television ---------- */
.rv-player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border-radius: 2px; }
.rv-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.rv-player:fullscreen { aspect-ratio: auto; width: 100vw; height: 100vh; border-radius: 0; }
.rv-player__big { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 1rem; padding: clamp(1rem, 3vw, 2.5rem); border: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 55%); color: #F4F3EF; text-align: left; cursor: pointer; }
.rv-player__ring { display: grid; place-items: center; flex: none; width: clamp(3.5rem, 2.75rem + 2.5vw, 5.5rem); aspect-ratio: 1; border: 1.5px solid rgba(244, 243, 239, .85); border-radius: 999px; background: rgba(0, 0, 0, .25); transition: background-color .2s ease, border-color .2s ease, transform .3s var(--ease-out); }
.rv-player__ring svg { width: 34%; height: 34%; margin-left: 6%; }
.rv-player__big:hover .rv-player__ring, .rv-player__big:focus-visible .rv-player__ring { background: var(--orange); border-color: var(--orange); transform: scale(1.04); }
.rv-player__big:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.rv-player__now { padding-bottom: .35rem; font: 700 clamp(1.125rem, .95rem + .8vw, 1.75rem)/1.1 var(--font-head); letter-spacing: .005em; }
.rv-player[data-state="playing"] .rv-player__big, .rv-player[data-state="paused"] .rv-player__big { display: none; }
.rv-player__bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: .5rem; padding: 2.5rem clamp(.5rem, 1.5vw, 1.25rem) clamp(.4rem, 1vw, .9rem); background: linear-gradient(0deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
.rv-player[data-state="paused"] .rv-player__bar, .rv-player.is-awake .rv-player__bar, .rv-player:focus-within:not([data-state="idle"]) .rv-player__bar { opacity: 1; visibility: visible; transition: opacity .2s ease; }
.rv-player[data-state="idle"] .rv-player__bar { display: none; }
.rv-ctl { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: none; color: #F4F3EF; cursor: pointer; transition: color .15s ease; }
.rv-ctl svg { width: 20px; height: 20px; }
.rv-ctl:hover { color: var(--orange); }
.rv-ctl:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.rv-ctl .i-pause, .rv-ctl .i-mute { display: none; }
.rv-player[data-state="playing"] [data-toggle] .i-play { display: none; }
.rv-player[data-state="playing"] [data-toggle] .i-pause { display: block; }
.rv-player.is-muted [data-mute] .i-vol { display: none; }
.rv-player.is-muted [data-mute] .i-mute { display: block; }
.rv-player__time { flex: none; min-width: 2.6em; font: 500 .8125rem/1 var(--font-body); font-variant-numeric: tabular-nums; color: rgba(244, 243, 239, .85); text-align: center; }
.rv-player__seek { --p: 0%; flex: 1; min-width: 3rem; height: 44px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.rv-player__seek::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--orange) var(--p), rgba(244, 243, 239, .3) var(--p)); }
.rv-player__seek::-moz-range-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--orange) var(--p), rgba(244, 243, 239, .3) var(--p)); }
.rv-player__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; margin-top: -5px; border: 0; border-radius: 999px; background: #F4F3EF; }
.rv-player__seek::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 999px; background: #F4F3EF; }
.rv-player__seek:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }



/* Muted loops */
.rv-loop { position: relative; overflow: hidden; background: #0b0b0b; }
.rv-loop video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rv-loop__btn { position: absolute; right: .75rem; bottom: .75rem; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(244, 243, 239, .45); border-radius: 999px; background: rgba(0, 0, 0, .45); color: #F4F3EF; cursor: pointer; opacity: 0; transition: opacity .2s ease; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rv-loop__btn svg { width: 15px; height: 15px; }
.rv-loop__btn .i-play, .rv-loop__btn[aria-pressed="true"] .i-pause { display: none; }
.rv-loop__btn[aria-pressed="true"] .i-play { display: block; }
.rv-loop:hover .rv-loop__btn, .rv-loop__btn:focus-visible, .rv-loop__btn[aria-pressed="true"] { opacity: 1; }
.rv-loop__btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
@media (hover: none) { .rv-loop__btn { opacity: .8; } }

/* ---------- Outdoor ---------- */
.rv-bleed .rv-cap { max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Legal note ---------- */
.rv-legal { margin-top: clamp(3rem, 2rem + 3vw, 5rem); padding-top: 1rem; max-width: 46rem; border-top: 1px solid var(--line); font-size: .75rem; line-height: 1.55; letter-spacing: .01em; color: var(--fg-3); }
[data-theme="dark"] .rv-legal, :root:not([data-theme]) .rv-legal { border-top-color: #2a2a2a; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .rv-lede { grid-column: 1 / -1; }
  .rv-h2 { grid-column: 1 / -1; }
  .rv-sub { grid-column: 1 / span 9; }
  .rv-intro__body { grid-column: 1 / span 9; }
}

/* ---------- Phone: art-directed, not a shrunk desktop ---------- */
@media (max-width: 760px) {
  .rv-open__top { margin-bottom: 2rem; }
  /* Title and subtitle above the image; the image is an art-directed crop on the athletes. */
  .rv-open { display: flex; flex-direction: column; }
  .rv-hero { display: contents; }
  .rv-hero__type { position: static; order: 1; display: block; padding-bottom: 0; }
  .rv-title { margin-top: .9rem; font-size: clamp(3rem, 16vw, 5rem); color: var(--fg); }
  .rv-line { order: 2; margin-top: 1rem; font-size: 1.25rem; }
  .rv-hero__img { order: 3; margin-top: 2.25rem; background: #000; }

  .rv-intro { padding-top: 3.5rem; row-gap: 1.5rem; }
  .rv-lede { font-size: 1.375rem; line-height: 1.3; }
  .rv-intro__body { font-size: 1.0625rem; padding-top: 0; }
  .rv-intro__body { grid-column: 1 / -1; }
  .rv-facts { margin-top: 1rem; }

  .rv-sec { padding-top: 4.5rem; }
  .rv-head { grid-template-columns: minmax(0, 1fr); margin-bottom: 1.5rem; row-gap: .6rem; }
  .rv-h2, .rv-sub { grid-column: 1; }
  .rv-h2 { font-size: clamp(2rem, 9vw, 2.75rem); }

  /* Television: the player runs edge to edge. */
  .rv-player { border-radius: 0; }
  .rv-player__time[data-dur] { display: none; }

  /* Mixed shapes share one height. */
  .rv-row { gap: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .js .rv [data-rv-in] { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Rexona Rivals layout (overrides and additions to the shared Primo pattern)
   ========================================================================== */
.rv-facts { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.rv-facts > div { grid-column: span 3; }
.rv-facts > .rv-facts__wide { grid-column: span 6; }
.rv-facts dd { max-width: 40rem; }

/* Outdoor: full-bleed key visual, then a pair at one height, then the women's banner */
.rv-row--ooh, .rv-womens, .rv-row--motion { margin-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.rv-row--ooh { margin-top: clamp(3rem, 2rem + 4vw, 6rem); }
.rv-womens { margin-top: clamp(3rem, 2rem + 4vw, 6rem); }
.rv-womens .rv-fig { width: min(100%, 64rem); margin-left: auto; }

/* Pub and venue: one large booth, two smaller pieces at different scales, then the runner */
.rv-venue { display: grid; grid-template-columns: var(--rv-cols); column-gap: var(--rv-gap); row-gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: start; }
.rv-venue__booth { grid-column: 1 / span 7; grid-row: 1 / span 2; }
.rv-venue__coaster { grid-column: 8 / span 5; }
.rv-venue__chip { grid-column: 9 / span 3; }
.rv-runner { margin-top: clamp(3rem, 2rem + 4vw, 7rem); }

/* Television: one film, full width; motion pieces below at a shared height */
.rv-player { max-width: 100%; }
.rv-row--motion { margin-top: clamp(3rem, 2rem + 4vw, 6rem); }
.rv-row--motion.wrap { max-width: calc(66rem + 2 * var(--gutter)); margin-right: max(0px, (100% - var(--max) - 2 * var(--gutter)) / 2); }

.rv-end { padding-bottom: clamp(4rem, 3rem + 4vw, 8rem); }
.rv-end .rv-legal { margin-top: 0; }

@media (max-width: 1100px) {
  .rv-facts > div { grid-column: span 6; }
  .rv-facts > .rv-facts__wide { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .rv-hero img { max-height: none; }
  .rv-facts { grid-template-columns: 1fr; }
  .rv-facts > div, .rv-facts > .rv-facts__wide { grid-column: 1; }
  .rv-row--ooh { flex-direction: column; gap: 2rem; }
  .rv-row--ooh > .rv-fig { flex: none; width: 100%; }
  .rv-womens { padding-inline: 0; }
  .rv-womens .rv-cap { padding-inline: var(--gutter); }
  .rv-venue { grid-template-columns: 1fr 1fr; gap: 1.25rem .75rem; }
  .rv-runner { margin-top: 1.25rem; padding-inline: var(--gutter); }
  .rv-runner .rv-cap { padding-inline: 0; }
  .rv-venue__booth { grid-column: 1 / -1; grid-row: auto; }
  .rv-venue__coaster, .rv-venue__chip { grid-column: auto; }
  .rv-player { border-radius: 0; }
  .rv-tv > .wrap:has(.rv-player) { padding-inline: 0; }
  .rv-row--motion { flex-direction: column; align-items: center; gap: 2rem; margin-top: 2.5rem; }
  .rv-row--motion > .rv-fig { flex: none; width: 100%; }
  .rv-row--motion > .rv-fig:last-child { width: 60%; }
}