/* ==========================================================================
   Fashion — Page-Specific Styles
   Shared components (page-hero, buttons, sections, etc.)
   are defined in css/style.css. This file only contains additions
   unique to the fashion page.
   ========================================================================== */

/* ----------------------------------------
   HERO — Cinematic full-bleed catwalk video
   Override the default side-image page-hero for fashion only.
   ---------------------------------------- */
.page-hero--video {
  min-height: 85vh;
  padding: calc(var(--nav-h) + clamp(24px,4vw,64px)) 0 clamp(40px,6vw,96px);
  background: #000;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
}
.page-hero--video .page-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  z-index: 0;
}
.page-hero--video .page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0.15) 45%,
    rgba(0, 0, 0, 0.55) 100%
  );
  z-index: 1;
}
.page-hero--video .page-hero-content {
  position: relative;
  z-index: 2;
  color: #fff;
}
.page-hero--video .page-hero-label {
  display: inline-block;
  width: auto;
  align-self: flex-start;
  color: #fff;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18);
  padding: 0.45rem 1.25rem;
  border-radius: 50px;
  font-size: .7rem;
  letter-spacing: .25em;
  text-transform: uppercase;
}
.page-hero--video .page-hero-title,
.page-hero--video .page-hero-desc {
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,.55), 0 4px 40px rgba(0,0,0,.35);
}
@media (max-width: 768px) {
  .page-hero--video { min-height: 78vh; }
}

/* ----------------------------------------
   CATWALK REELS STRIP — vertical phone-style clips
   3-col desktop, 2-col tablet, horizontal scroll-snap on mobile
   ---------------------------------------- */
.fashion-reels-section {
  padding-bottom: clamp(60px, 8vw, 120px);
}
.fashion-reels-intro {
  max-width: 58ch;
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.5;
  color: var(--text-dark);
  margin-top: clamp(1rem, 1.5vw, 1.5rem);
  opacity: .9;
}
.fashion-reels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 32px);
  margin-top: clamp(2rem, 3vw, 3rem);
}
.fashion-reel {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.fashion-reel-media {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #0E0E10;
  border-radius: 0;
}
.fashion-reel-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}
.fashion-reel:hover .fashion-reel-media video {
  transform: scale(1.02);
}
.fashion-reel-caption {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding-top: .25rem;
}
.fashion-reel-designer {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  color: var(--text-on-light);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.fashion-reel-meta {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--coral-strong);
  opacity: .85;
}
@media (max-width: 900px) {
  .fashion-reels {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}
@media (max-width: 560px) {
  /* Horizontal scroll-snap strip, like Instagram reels */
  .fashion-reels {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: clamp(20px, 4vw, 48px);
    margin-left: calc(-1 * clamp(20px, 4vw, 48px));
    margin-right: calc(-1 * clamp(20px, 4vw, 48px));
    padding: 0 clamp(20px, 4vw, 48px);
    gap: .9rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .fashion-reels::-webkit-scrollbar { display: none; }
  .fashion-reel {
    flex: 0 0 78vw;
    scroll-snap-align: start;
  }
}

/* ----------------------------------------
   FEATURE SECTION — Toribio & Donato full catwalk
   Horizontal 16:9 video, breaks the container for full-bleed impact.
   ---------------------------------------- */
.fashion-feature-section {
  padding-top: clamp(40px, 6vw, 96px);
  padding-bottom: clamp(60px, 8vw, 120px);
}
.fashion-feature-media {
  position: relative;
  margin-top: clamp(2rem, 3vw, 3rem);
  width: 100%;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 clamp(20px, 4vw, 48px);
  aspect-ratio: 16 / 9;
}
.fashion-feature-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0E0E10;
}
/* Sound toggle — editorial chip, lower-right */
.fashion-feature-sound-toggle {
  position: absolute;
  bottom: clamp(14px, 2vw, 22px);
  right: calc(clamp(20px, 4vw, 48px) + clamp(14px, 2vw, 22px));
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem 1rem .55rem .85rem;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(14, 14, 16, .45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.fashion-feature-sound-toggle:hover {
  background: var(--coral);
  border-color: var(--coral);
  transform: translateY(-1px);
}
.fashion-feature-sound-toggle .icon-muted,
.fashion-feature-sound-toggle .icon-unmuted {
  width: 18px; height: 18px;
  flex-shrink: 0;
}
.fashion-feature-sound-toggle.unmuted .icon-muted { display: none; }
.fashion-feature-sound-toggle.unmuted .icon-unmuted { display: inline-block !important; }
/* Feature-video mobile overrides (consolidated into the mobile polish block below) */

/* ----------------------------------------
   BACKSTAGE · ATELIER — editorial photography grid
   Asymmetric layout, varied aspect ratios.
   ---------------------------------------- */
.fashion-backstage-section {
  padding-bottom: clamp(60px, 8vw, 120px);
}
/* High-end magazine grid — uniform row heights via grid-auto-rows so every
   photo aligns perfectly, regardless of span class. No aspect-ratio on items
   (that caused millimeter height drift with gap calculations). */
.fashion-backstage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(200px, 20vw, 320px);
  grid-auto-flow: row;
  gap: clamp(10px, 1.2vw, 20px);
  margin-top: clamp(2rem, 3vw, 3rem);
}
.fashion-backstage-item {
  position: relative;
  overflow: hidden;
  margin: 0;
  min-width: 0;
  min-height: 0;
  background: #0E0E10;
}
.fashion-backstage-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s var(--ease);
}
.fashion-backstage-item:hover img {
  transform: scale(1.03);
}
.fashion-backstage-item--wide {
  grid-column: span 2;
}
.fashion-backstage-item--hero {
  grid-column: span 2;
  grid-row: span 2;
}
.fashion-backstage-item--tall {
  grid-row: span 2;
}
/* Bone section: hero + wide use cover (no letterbox) — let photos bleed edge-to-edge.
   Per art direction — on bone, any letterbox reads as amateur framing. */
.section-bone .fashion-backstage-item--hero img,
.section-bone .fashion-backstage-item--wide img {
  object-fit: cover;
  background: transparent;
}
.section-bone .fashion-backstage-item {
  background: #F6F4EF;
}

/* On fashion bone sections: drop gold on Fraunces italic accents (it goes mustard
   on ivory per designer's direction). Keep gold exclusively on dark sections. */
body[data-page="fashion"] .section-bone .section-title em.serif,
body[data-page="fashion"] .section-bone .editorial-title em.serif,
body[data-page="fashion"] .section-bone h2 em.serif {
  color: #1A1A1C;
}
body[data-page="fashion"] .section-bone .section-label,
body[data-page="fashion"] .section-bone .label {
  color: #1A1A1C;
  opacity: .8;
}
body[data-page="fashion"] .section-bone .fashion-reels-intro {
  color: #3A3A3C;
}
@media (max-width: 900px) {
  .fashion-backstage-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(220px, 40vw, 320px);
  }
  .fashion-backstage-item--wide,
  .fashion-backstage-item--hero {
    grid-column: span 2;
    grid-row: span 1;
  }
  .fashion-backstage-item--tall {
    grid-row: span 2;
  }
}

/* ----------------------------------------
   CTA section centering
   ---------------------------------------- */
.cta-section {
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem 0;
}
.cta-section .section-title {
  text-align: center;
}
.cta-section .section-text {
  text-align: center;
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   MOBILE POLISH — ≤ 640px
   Editorial mobile pass: backstage rhythm, typography scale, feature videos,
   reel scroll-snap cadence, reveal-animation perf, touch-safe hover.
   Reviewed with graphic-design consult — Gentlewoman / System Magazine register.
   ========================================================================== */
@media (max-width: 640px) {

  /* ---- Backstage grid — magazine rhythm on phone ----
     2-col with dense flow so orphan half-cells disappear.
     - --hero stays 2×2 (full-width square editorial shot) — preserves the
       face on rehersal-11 and gives the section a true focal point.
     - --wide stays full-width landscape.
     - --tall KEEPS 2-row span — vertical accent; the two --tall items pair
       naturally thanks to dense packing.                                    */
  .fashion-backstage-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(160px, 44vw, 220px);
    grid-auto-flow: row dense;
    gap: 6px;
  }
  .fashion-backstage-item--hero {
    grid-column: span 2;
    grid-row: span 2;
  }
  .fashion-backstage-item--wide {
    grid-column: span 2;
    grid-row: span 1;
  }
  .fashion-backstage-item--tall {
    grid-column: span 1;
    grid-row: span 2;
  }
  /* ---- Face-safety per-image object-position overrides on mobile ----
     Aspect ratios shift between desktop cells and mobile cells; a few
     photos need the crop nudged so faces/eyes stay in frame.                */
  .fashion-backstage-item--hero img[src$="rehersal-11.jpg"] {
    object-position: center 15% !important;
  }
  /* Warmer fallback — if an image fails to load, the tile still reads as
     intentional against the bone section background.                       */
  .section-bone .fashion-backstage-item {
    background: #E8E2D8;
  }

  /* ---- Hero — tame the vh stretch on tall phones ---- */
  .page-hero--video {
    min-height: min(72vh, 580px);
  }

  /* ---- Section titles — tighten the wide airport-signage letter-spacing
     and cap the clamp growth at mobile sizes.                              */
  .section-title {
    letter-spacing: .04em;
  }

  /* ---- Reels intro (italic serif) — bump size + leading so the Fraunces
     italic body stays readable at phone size. Keep italic — brand voice.  */
  .fashion-reels-intro {
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: none;
  }

  /* ---- Catwalk reel strip — scroll-snap cadence ----
     85vw tile + full horizontal padding gives a clean, consistent peek of
     the next reel; 78vw was creating a half-reveal-then-jump on 375px.    */
  .fashion-reels {
    scroll-padding-left: clamp(20px, 4vw, 48px);
    gap: .75rem;
  }
  .fashion-reel {
    flex: 0 0 85vw;
  }

  /* ---- Feature video container — full-bleed on phone ---- */
  .fashion-feature-media {
    padding: 0;
  }

  /* ---- Sound toggle — darker backdrop + larger tap target on phone ---- */
  .fashion-feature-sound-toggle {
    right: 14px;
    bottom: 14px;
    padding: .5rem .85rem .5rem .7rem;
    font-size: .68rem;
    background: rgba(14, 14, 16, .7);
    border-color: rgba(255, 255, 255, .35);
  }

  /* ---- Reveal animation perf ----
     Word-by-word stagger stutters when 6+ videos autoplay + lenis is active.
     Flatten to a single reveal on mobile — still animates, just not per-word. */
  [data-animation="words"] .word {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Kill the btn-pill hover transform on touch devices so tapping the CTA
   doesn't produce a ghost-scale flash on release. */
@media (hover: none) {
  .btn-pill:hover {
    transform: none;
  }
}