/* =====================================================================
   VORÉ CLOTHING - HOMEPAGE SHOWCASES (all widths; index.html only)
   Two signature-collection sections replace the old Trending rail:
     · SPECIAL EDITION (ink) — the men's waffle-knit full-sleeve pieces,
       one of the brand's main USPs;
     · BABY TEES (paper) — the strongest pieces of the women's edit.
   Plus the small Instagram row under the Rolling Loud poster on phones.
   Mobile-approved scope (owner, 2026-11): ONLY these new sections + the
   Instagram row touch the phone layout; every other mobile rule stays in
   store.css untouched. Images are existing catalogue photography; names and
   prices are filled from the live catalogue (js/home-showcase.js), never
   hard-coded.
   ===================================================================== */

/* ---------- Rolling Loud poster: Instagram row (phones / tablets) ---------- */
.promo-banner__ig{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px var(--pad) 16px;background:#070707;color:#F6F4F0;line-height:1.3;
  border-bottom:1px solid rgba(246,244,240,.08)}
.promo-banner__ig-note{font-size:.62rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(246,244,240,.6)}
.promo-banner__ig-link{display:inline-flex;align-items:center;gap:.5em;flex:none;
  font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#F6F4F0;
  padding:.7em 1.1em;border:1px solid rgba(246,244,240,.28);border-radius:0}
.promo-banner__ig-link svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.promo-banner__ig-link:active{opacity:.8}

/* ---------- Signature showcases — phones & tablets first ----------
   One compact composition: kicker · title · two-line lede, then a single
   swipeable scroll-snap rail of the products' own photos (consistent 4:5
   shots, caption under every shot), a scroll-position bar, and the CTA. */
.sc{position:relative;overflow:hidden;padding:44px var(--pad) 48px}
.sc--ink{background:#070707;color:#F6F4F0}
.sc--paper{
  --black:#FFFFFF;--black-2:#F1EFEB;--black-3:#EAE7E1;--white:#0B0B0B;
  --mute:rgba(11,11,11,.62);--faint:rgba(11,11,11,.44);--ghost:rgba(11,11,11,.18);
  --orange:#0B0B0B;--orange-soft:rgba(11,11,11,.78);--line:rgba(11,11,11,.14);--line-2:rgba(11,11,11,.08);
  background:#FFFFFF;color:#0B0B0B}
.sc__inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column}

/* Copy */
.sc__kicker{display:flex;align-items:center;flex-wrap:wrap;gap:0;margin:0;
  font-size:.6rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--faint)}
.sc__kicker b{font-weight:600;color:var(--white);margin-right:12px}
.sc__kicker span+span::before{content:"";display:inline-block;width:16px;height:1px;margin:0 12px;
  vertical-align:middle;background:currentColor;opacity:.7}
.sc__title{margin:14px 0 12px;font-size:clamp(1.85rem,7.4vw,2.4rem);font-weight:500;line-height:1.06;
  letter-spacing:-.02em;color:var(--white);text-wrap:balance}
.sc__title br{display:none}
.sc__body{margin:0;max-width:46ch;font-size:.92rem;font-weight:300;line-height:1.7;color:var(--mute)}

/* Desktop cards are not used below 1001px */
.sc__cards{display:none}

/* Rail */
.sc__rail{margin:26px calc(-1 * var(--pad)) 0}
.sc__track{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;padding:0 0 0 var(--pad);
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x pan-y}
.sc__track::-webkit-scrollbar{display:none}
.sc__track::after{content:"";flex:0 0 calc(var(--pad) - 10px)}   /* trailing gutter (Safari ignores end padding) */
.sc__slide{flex:0 0 min(64vw,300px);min-width:0;scroll-snap-align:start;display:block;color:inherit;
  -webkit-user-drag:none;user-select:none}
.sc__shot{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--black-2)}
.sc__shot img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.sc__count{position:absolute;right:10px;bottom:10px;padding:.5em .65em;font-size:.54rem;font-weight:600;
  letter-spacing:.16em;line-height:1;color:#F6F4F0;background:rgba(7,7,7,.6)}
.sc__cap{display:flex;flex-direction:column;gap:4px;margin-top:11px;min-width:0}
.sc__name{min-width:0;font-size:.68rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--white)}
.sc__price{font-size:.78rem;font-weight:700;line-height:1.3;white-space:nowrap;color:var(--white)}
.sc__price s{font-weight:400;color:var(--faint);margin-right:.45em;font-size:.9em}
.sc__progress{position:relative;height:2px;margin:20px var(--pad) 0;background:var(--line);overflow:hidden}
.sc__progress i{position:absolute;top:0;left:0;height:100%;width:34%;background:var(--white);will-change:transform}
.sc__cta{margin:24px 0 0}
.sc__cta .btn{padding:1.05em 2.2em}

/* Entrance: a soft rise (core.js marks .is-in; js/home-showcase.js is the fail-safe). */
@media (prefers-reduced-motion:no-preference){
  .sc .reveal{opacity:0;transform:translateY(20px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
  .sc .reveal.is-in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.sc .reveal{opacity:1;transform:none}}

/* ---------- Desktop (≥1001px): near-viewport editorial composition ----------
   Copy column (4/12) vertically centred against two EQUAL 4:5 frames (8/12).
   The frames' width is derived from the viewport height so a whole section
   — frames, captions and copy — fits one screen without dead space. Each
   frame crossfades through the product's photos on hover (thin bars show
   position); Baby Tees mirrors the composition. */
@media (min-width:1001px){
  .promo-banner__ig{display:none}             /* the editorial column carries the Instagram link */
  .sc{--sc-py:clamp(48px,7vh,88px);--sc-cap:56px;--sc-gap:clamp(16px,1.6vw,28px);
    padding:var(--sc-py) var(--dk-pad,clamp(40px,5vw,96px));
    min-height:min(calc(100svh - var(--top-off)),1000px);display:flex;align-items:center}
  .sc__inner{width:100%;max-width:var(--dk-maxw,1480px);display:grid;
    grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(48px,6vw,120px);
    grid-template-rows:1fr auto auto 1fr;
    grid-template-areas:". cards" "copy cards" "cta cards" ". cards"}
  .sc--paper .sc__inner{grid-template-columns:minmax(0,8fr) minmax(0,4fr);
    grid-template-areas:"cards ." "cards copy" "cards cta" "cards ."}
  .sc__rail{display:none}

  /* Copy */
  .sc__copy{grid-area:copy;max-width:420px}
  .sc__kicker{font-size:.62rem;letter-spacing:.32em}
  .sc__title{margin:26px 0 22px;font-size:clamp(2.6rem,3.5vw,3.9rem);line-height:1.02;letter-spacing:-.025em}
  .sc__title br{display:inline}
  .sc__body{font-size:1.02rem;line-height:1.8;max-width:34ch}
  .sc__cta{grid-area:cta;margin-top:36px}

  /* Two equal frames */
  .sc__cards{grid-area:cards;align-self:center;justify-self:end;display:grid;grid-template-columns:1fr 1fr;gap:var(--sc-gap);
    width:min(100%,calc((100svh - var(--top-off) - 2 * var(--sc-py) - var(--sc-cap)) * 1.6 + var(--sc-gap)))}
  .sc--paper .sc__cards{justify-self:start}
  .sc__card{display:block;min-width:0;color:inherit}
  .sc__frame{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--black-2)}
  .sc__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transform:scale(1.025);
    transition:opacity .9s cubic-bezier(.22,1,.36,1),transform 1.8s cubic-bezier(.22,1,.36,1)}
  .sc__img.is-active{opacity:1;transform:scale(1);z-index:1}
  .sc__card:hover .sc__img.is-active,.sc__card:focus-visible .sc__img.is-active{transform:scale(1.035)}
  .sc__bars{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;display:flex;gap:6px;opacity:.55;transition:opacity .4s}
  .sc__card:hover .sc__bars,.sc__card:focus-visible .sc__bars{opacity:1}
  .sc__bars i{flex:1;height:2px;background:rgba(7,7,7,.18);transition:background .5s}
  .sc__bars i.is-active{background:rgba(7,7,7,.82)}
  .sc__cap{flex-direction:row;align-items:baseline;justify-content:space-between;gap:16px;margin-top:16px;min-height:22px}
  .sc__name{position:relative;font-size:.76rem;letter-spacing:.1em}
  .sc__name::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:currentColor;
    transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.22,1,.36,1)}
  .sc__card:hover .sc__name::after,.sc__card:focus-visible .sc__name::after{transform:scaleX(1);transform-origin:left}
  .sc__price{font-size:.8rem}
  .sc__card:focus-visible{outline:none}
  .sc__card:focus-visible .sc__frame{outline:2px solid var(--white);outline-offset:4px}

  /* Very wide screens: the frames would otherwise be capped by column width
     long before height; give the cards a larger share so they grow into the
     available viewport height instead of leaving air above and below. */
  @media (min-width:1600px){
    .sc__inner{max-width:1640px;grid-template-columns:minmax(0,3.5fr) minmax(0,8.5fr)}
    .sc--paper .sc__inner{grid-template-columns:minmax(0,8.5fr) minmax(0,3.5fr)}
  }

  @media (prefers-reduced-motion:no-preference){
    .sc__card.reveal.is-in{transition-delay:.08s}
    .sc__card.reveal.is-in+.sc__card.reveal.is-in{transition-delay:.2s}
  }
  @media (prefers-reduced-motion:reduce){.sc__img{transition:none}}
}