/* =====================================================================
   Optional section components (seen in other Metalab cases). Layout values
   come from Metalab's component CSS; motion lives in js/optional.js.
   ===================================================================== */

/* ---------- pinnedGrow (Calvin Klein "customScroller") ----------
   A tall section with a sticky 100vh stage. A full-viewport loop sits behind
   a whitish veil with a phone-shaped hole; scrolling grows the hole until the
   loop is full bleed. */
.pgrow { position: relative; height: var(--pgrow-height, 300vh); }
.pgrow__inner { position: sticky; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; }
.pgrow__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pgrow__svg { position: absolute; top: 0; left: 0; }
.pgrow__fade { fill: var(--pgrow-veil, hsla(0, 0%, 100%, .85)); }
.pgrow__top { position: absolute; top: 0; left: 0; height: auto; }
.pgrow__bottom { position: absolute; bottom: var(--gutter); left: var(--gutter); width: calc(100% - var(--gutter) * 2); z-index: 3; height: auto; display: none; }
@media (min-width: 967px) { .pgrow__bottom { display: block; } }
@media (prefers-reduced-motion: reduce) { .pgrow { height: 100vh; } }

/* ---------- hoverReveal (Ro "hoverRevealImage") ----------
   Desktop: a 300px round lens follows the cursor (lerp .06/frame) and shows
   the background image (e.g. the code) under the foreground (the UI).
   Mobile: a scroll-scrubbed wipe of the background image. */
.hrev { display: grid; gap: var(--gutter); grid-template-columns: repeat(6, 1fr); padding: 0 var(--gutter); }
.hrev__text { grid-column: 1 / 6; align-self: flex-end; order: 2; }
.hrev__images { position: relative; width: 100%; max-height: 100vh; grid-column: 1 / -1; order: 1; height: 60vw; }
.hrev__svg { position: absolute; top: 0; left: 0; width: 0; height: 0; }
.hrev__fg, .hrev__bg { position: absolute; inset: 0; }
.hrev__fg { z-index: 1; }
.hrev__bg { z-index: 2; }
.hrev__fg img, .hrev__bg img, .hrev__fg video, .hrev__bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 966px) {
  .hrev__bg {
    --left-y: 100%; --right-y: 100%; --bottom-left-y: 100%; --bottom-right-y: 100%;
    -webkit-clip-path: polygon(0 var(--left-y), 100% var(--right-y), 100% var(--bottom-right-y), 0 var(--bottom-left-y)) !important;
            clip-path: polygon(0 var(--left-y), 100% var(--right-y), 100% var(--bottom-right-y), 0 var(--bottom-left-y)) !important;
  }
}
@media (min-width: 967px) {
  .hrev__text { grid-column: 1 / 2; order: 1; }
  .hrev__images { grid-column: 2 / -1; order: 2; height: 52vw; }
}

/* ---------- scrubbedQuote (Atoms / Pitch / The Athletic "reviewCardWithBackground") ----------
   Full-bleed portrait; a black mat (border 40 -> 16px) closes from the
   viewport edges to a window on grid columns 4-10 while the quote card rises
   into the bottom of the window. Scroll-scrubbed. */
.squote { position: relative; width: 100%; height: 100vh; min-height: 88rem; overflow: hidden;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 0; padding: 0 var(--gutter); }
.squote__pos { position: relative; z-index: 2; grid-column: 2 / 12; --top-offset: 20rem; top: var(--top-offset); height: calc(100% - var(--top-offset) * 2); }
@media (min-width: 768px) { .squote__pos { grid-column: 4 / 10; --top-offset: 11rem; } }
.squote__image { position: absolute; inset: 0; background: var(--bg-subtle); }
.squote__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.squote__frame { position: absolute; top: 0; left: 0; z-index: 3; display: flex; align-items: flex-end; justify-content: flex-end;
  border: var(--gutter) solid var(--bg); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.squote__card { width: 100%; background: var(--bg); }
.squote__card-inner { padding: 3.2rem 0 1.6rem; margin: 0 auto; position: relative; }
@media (min-width: 967px) { .squote__card-inner { padding: var(--gutter) 3rem; } }
.squote__quote { font-size: 2.4rem; line-height: 120%; letter-spacing: -.03em; margin-bottom: 3.4rem; color: var(--text-bold); position: relative; }
.squote[data-quotes="true"] .squote__quote::before { position: absolute; top: auto; right: 100%; content: "\201C"; }
.squote[data-quotes="true"] .squote__quote::after { content: "\201D"; }
@media (min-width: 967px) { .squote__quote { font-size: 4rem; margin-bottom: 4rem; } }
@media (min-width: 1200px) { .squote__quote { margin-bottom: 8.4rem; } }
.squote__footer { display: flex; align-items: center; justify-content: space-between; }
.squote__author { font-size: 1.4rem; line-height: 140%; letter-spacing: -.01em; color: var(--text-subtle); font-weight: 500; font-style: normal; }
.squote__dash { display: none; color: var(--text-subtle); }
.squote__source { font-size: 1.4rem; line-height: 140%; letter-spacing: -.01em; color: var(--text-subtle); display: block; }
.squote__logo { width: 1.8rem; color: var(--text-subtle); }
@media (min-width: 967px) {
  .squote__author { font-size: 1.6rem; }
  .squote__dash { display: inline-block; }
  .squote__source { font-size: 1.6rem; display: inline-block; }
  .squote__logo { width: 2.4rem; }
}

/* ---------- brandColors (Ro): gradient columns with a staggered shutter ---------- */
.bcolors { display: grid; gap: .8rem; padding: 0 var(--gutter); grid-template-columns: repeat(var(--count), 1fr); }
.bcolors__swatch { position: relative; height: 51vw; min-height: 43.35vw; max-height: calc(100vh - var(--gutter) * 2); }
@media (min-width: 967px) { .bcolors__swatch { height: 54vw; min-height: 45.9vw; } }
.bcolors__label { position: absolute; bottom: var(--gutter); left: var(--gutter); font-size: 1.4rem; line-height: 140%; letter-spacing: -.01em; color: #fff; display: none; }
.bcolors__swatch.is-light .bcolors__label { color: #000; }
@media (min-width: 967px) { .bcolors__label { display: block; font-size: 1.6rem; } }