/* Super Stubborn — Hero
   GEGENEREERD uit de mockup (sectie `hero`) door port_to_wp.py.
   Gedeelde componenten en tokens staan in assets/css/superstubborn.css. */

.ssx-hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
}

/* Full-bleed real campaign photo — ~70% of the visual weight */
.ssx-hero__media{
  position:absolute;
  inset:0;
  z-index:0;
}
.ssx-hero__media .ss-photo{
  height:100%;
  border-radius:0;
}

/* Legibility scrim: warm ground fading up from bottom-left, above photo grain/vignette */
.ssx-hero__scrim{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  background:
    linear-gradient(0deg,
      rgba(17,16,15,0.88) 0%,
      rgba(17,16,15,0.56) 24%,
      rgba(17,16,15,0.12) 52%,
      transparent 78%),
    linear-gradient(90deg,
      rgba(17,16,15,0.74) 0%,
      rgba(17,16,15,0.28) 34%,
      transparent 62%);
}

/* Editorial vertical side label */
.ssx-hero__side{
  position:absolute;
  right:clamp(0.75rem, 2vw, 1.75rem);
  top:50%;
  z-index:8;
  writing-mode:vertical-rl;
  transform:translateY(-50%);
  font-family:var(--ss-body);
  font-size:var(--ss-fs-label);
  letter-spacing:0.42em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ss-text-faint);
}

/* Content column — anchored bottom-left */
.ssx-hero__inner{
  position:relative;
  z-index:10;
  width:100%;
  padding-block:var(--ss-sp-9) var(--ss-sp-8);
}
@media (min-width:900px){
  .ssx-hero__inner{ padding-block:0 var(--ss-sp-9); }
}
.ssx-hero__content{
  max-width:min(58rem, 100%);
}

/* Distinctive boxed eyebrow — no dash, no SS26· prefix */
.ssx-hero__content > .ss-eyebrow{
  margin-bottom:var(--ss-sp-5);
}

/* Enormous headline — scaled to breathe inside 100vh, bled toward the left edge */
.ssx-hero__title{
  font-size:clamp(2.5rem, 6vw, 6rem);
  line-height:0.82;
  margin-left:-0.04em;
  color:var(--ss-white);
  max-width:100%;
}
/* Mask reveal wrappers get vertical breathing room so tight line-height
   uppercase glyphs are never clipped by the overflow:hidden mask */
.ssx-hero__title .ss-reveal-mask{
  padding-top:0.16em;
  margin-top:-0.16em;
}

.ssx-hero__tagline{
  margin:var(--ss-sp-5) 0 0;
  font-family:var(--ss-display);
  font-size:var(--ss-fs-h2);
  line-height:1.02;
  letter-spacing:-0.02em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--ss-beige);
}
.ssx-hero__tagline .ss-serif-italic{
  font-size:1.08em;
}

.ssx-hero__sub{
  margin-top:var(--ss-sp-5);
  color:var(--ss-text);
  max-width:42ch;
}

.ssx-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--ss-sp-4);
  margin-top:var(--ss-sp-6);
}

/* Hero load-sequence rise for non-headline lines — fade + lift, no clipping
   of button shadows or italic descenders. Coordinated with [data-hero].is-loaded. */
[data-hero] .ssx-hero__rise{
  opacity:0;
  transform:translateY(26px);
  transition:transform var(--ss-dur-4) var(--ss-ease-out),
             opacity var(--ss-dur-4) var(--ss-ease-out);
  transition-delay:var(--d, 0ms);
  will-change:transform, opacity;
}
[data-hero].is-loaded .ssx-hero__rise{
  opacity:1;
  transform:none;
}

/* Mobile refinements */
@media (max-width:560px){
  .ssx-hero{ align-items:flex-end; }
  .ssx-hero__title{ line-height:0.86; }
  .ssx-hero__actions .ss-btn{ flex:1 1 auto; }
  .ssx-hero__side{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  [data-hero] .ssx-hero__rise{
    opacity:1 !important;
    transform:none !important;
  }
}