/* ============================================================
   Hero banner — German Power Solutions
   Flat, high-contrast. Ground colour and text colour are driven
   by [data-ground] using only the deck's approved pairings.
   ============================================================ */

.hero{
  position:relative;
  overflow:hidden;
  background:var(--gps-black);
  /* Clearance for the bottom furniture (pause button + progress bar),
     measured at runtime by hero.js and published as --hero-ui-h so a
     call to action can never end up underneath it. */
  --hero-ui-h:4.5rem;
}

/* ---------- Track & slides ---------- */
.hero__track{position:relative;display:grid;isolation:isolate}
.hero__slide{
  grid-area:1/1;                       /* all slides stack in one cell */
  position:relative;
  display:flex;
  align-items:center;
  min-height:var(--hero-min-h);
  padding-block:clamp(var(--sp-6),5.5vh,var(--sp-8))
               calc(var(--hero-ui-h) + var(--sp-5));
  /* Height is content-led. A hard aspect-ratio clipped the headline,
     because real HTML text needs more room than baked-in banner text. */
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--dur-slow) var(--ease),
             visibility 0s linear var(--dur-slow);
}
.hero__slide.is-active{
  opacity:1;visibility:visible;pointer-events:auto;z-index:1;
  transition:opacity var(--dur-slow) var(--ease),visibility 0s;
}
/* Desktop height. Was clamp(34rem,40vw,44rem) -- 576px at 1440, which
   left almost nothing of the next section above the fold. The reference
   band is 401px at that width; 32vw lands at 461px, which is close to it
   while still fitting a headline, a lede and two buttons without crowding. */
@media (width >= 64rem){
  .hero__slide{min-height:clamp(26rem,32vw,34rem)}
}

/* ---------- Ground colours (approved pairings only) ---------- */
.hero__slide[data-ground="red"]   {background:var(--gps-red);   color:var(--gps-white)}
.hero__slide[data-ground="black"] {background:var(--gps-black); color:var(--gps-white)}
.hero__slide[data-ground="yellow"]{background:var(--gps-yellow);color:var(--gps-black)}
.hero__slide[data-ground="red"]    .hero__title,
.hero__slide[data-ground="black"]  .hero__title{color:var(--gps-white)}
.hero__slide[data-ground="yellow"] .hero__title{color:var(--gps-black)}

/* ---------- Artwork ---------- */
.hero__art{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:72% 50%;   /* keep the machine in frame */
  z-index:0;
}

/* Scrim: strengthens text contrast over the artwork on the text side only.
   Sized to the same 46% safe zone the illustrations reserve. */
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero__slide[data-ground="red"] .hero__scrim{
  background:linear-gradient(90deg,rgba(17,17,17,.55) 0%,rgba(17,17,17,.30) 34%,transparent 62%)}
.hero__slide[data-ground="black"] .hero__scrim{
  background:linear-gradient(90deg,rgba(17,17,17,.70) 0%,rgba(17,17,17,.35) 34%,transparent 62%)}
.hero__slide[data-ground="yellow"] .hero__scrim{
  background:linear-gradient(90deg,rgba(255,206,0,.72) 0%,rgba(255,206,0,.38) 34%,transparent 62%)}

/* ---------- Copy ---------- */
.hero__inner{position:relative;z-index:2;width:100%;max-width:var(--container)}
.hero__eyebrow,.hero__title,.hero__lede,.hero__actions{max-width:min(44rem,92%)}

.hero__eyebrow{
  display:inline-block;margin:0 0 var(--sp-4);
  padding:var(--sp-2) var(--sp-4);
  background:var(--gps-yellow);color:var(--gps-black);
  font-family:var(--font-head);font-size:var(--fs-xs);font-weight:var(--fw-black);
  letter-spacing:var(--tr-caps);text-transform:uppercase;line-height:1;
}
.hero__slide[data-ground="yellow"] .hero__eyebrow{
  background:var(--gps-black);color:var(--gps-yellow)}

.hero__title{
  margin:0 0 var(--sp-4);
  font-size:clamp(1.875rem,4.2vw,3.5rem);
  font-weight:var(--fw-black);letter-spacing:var(--tr-tight);line-height:.98;
  text-transform:uppercase;text-wrap:balance;
}
.hero__lede{
  margin:0 0 var(--sp-6);
  font-size:clamp(var(--fs-base),1.55vw,var(--fs-lg));
  font-weight:var(--fw-reg);line-height:1.55;max-width:34rem;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin:0}

/* ============================================================
   Edge arrows — vertically centred, one at each side.
   They live outside .hero__track so they are never inerted with
   an off-screen slide, and they stay above the scrim (z-index 4).
   ============================================================ */
.hero__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  display:inline-flex;align-items:center;justify-content:center;
  width:3rem;height:4rem;                      /* > 44px in both axes */
  background:var(--gps-black);color:var(--gps-white);   /* 18.88:1 */
  border:0;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.hero__arrow svg{width:1.5rem;height:1.5rem}
.hero__arrow--prev{left:clamp(0rem,1.2vw,1.5rem)}
.hero__arrow--next{right:clamp(0rem,1.2vw,1.5rem)}
.hero__arrow:hover{background:var(--gps-yellow);color:var(--gps-black)}   /* 12.66:1 */

/* On the yellow slide a black control still reads, but the hover state
   needs to invert so it does not vanish into the ground. */
.hero.is-light .hero__arrow:hover{background:var(--gps-white);color:var(--gps-black)}

/* ============================================================
   Foot — pause control + autoplay progress
   No slide counter and no dot row: the reference layout has
   neither. The pause button stays because WCAG 2.2.2 (Level A)
   requires a way to stop content that auto-advances.
   ============================================================ */
.hero__foot{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  display:flex;flex-direction:column;align-items:flex-end;
  pointer-events:none;                    /* the bar itself is inert */
}
.hero__play{
  pointer-events:auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;
  margin:0 var(--container-pad) var(--sp-4);
  border:2px solid currentColor;color:var(--gps-white);background:transparent;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.hero__play svg{width:1.125rem;height:1.125rem}
.hero__play:hover{background:var(--gps-yellow);color:var(--gps-black);
  border-color:var(--gps-yellow)}
.hero__play .hero__icon-play{display:none}
.hero.is-paused .hero__play .hero__icon-play{display:block}
.hero.is-paused .hero__play .hero__icon-pause{display:none}

.hero__progress{width:100%;height:4px;background:rgba(255,255,255,.25)}
.hero__progress span{
  display:block;height:100%;width:0;background:var(--gps-yellow)}

/* Dark ink while the light (yellow) slide is showing */
.hero.is-light .hero__play{color:var(--gps-black)}
.hero.is-light .hero__play:hover{background:var(--gps-black);color:var(--gps-yellow);
  border-color:var(--gps-black)}
.hero.is-light .hero__progress{background:rgba(17,17,17,.2)}
.hero.is-light .hero__progress span{background:var(--gps-black)}

/* ============================================================
   Tablet — 768 to 1023

   The slide keeps its cover crop here (see the phones note below for
   why the band treatment does not run this high), but a cover crop of
   a 1920x540 illustration into a 753x464 box shows only 46% of the
   frame at 2.2x the desktop zoom. The machine stops being scenery: at
   768 the crane's boom is drawn straight through the lede.

   Two corrections, no layout change: pull the copy back into a column
   that clears the machine's mass, and carry the scrim far enough right
   that every line of type still lands on a managed ground.
   ============================================================ */
@media (48rem <= width < 64rem){
  /* Percentages, not a fixed cap: the crop tightens as the viewport
     narrows (61% of the frame visible at 1023, 46% at 768), so the copy
     column has to track the viewport rather than sit at one width. A
     hard 30rem here cost 138px of hero height at 1023, where the crop
     is barely tighter than desktop's. */
  .hero__eyebrow,.hero__title,.hero__lede,.hero__actions{max-width:min(44rem,62%)}
  .hero__lede{max-width:min(34rem,58%)}

  /* Mid stops sized so the far edge of the copy column still composites
     to at least 7:1 against the type, taking the worst case as body copy
     crossing a black machine part. The yellow ground needs the deepest
     tint: it is the only slide whose text is dark, so a dark silhouette
     showing through is what destroys it rather than what saves it. */
  .hero__slide[data-ground="red"] .hero__scrim{
    background:linear-gradient(90deg,rgba(17,17,17,.68) 0%,rgba(17,17,17,.54) 55%,transparent 88%)}
  .hero__slide[data-ground="black"] .hero__scrim{
    background:linear-gradient(90deg,rgba(17,17,17,.80) 0%,rgba(17,17,17,.60) 55%,transparent 88%)}
  .hero__slide[data-ground="yellow"] .hero__scrim{
    background:linear-gradient(90deg,rgba(255,206,0,.88) 0%,rgba(255,206,0,.70) 55%,transparent 88%)}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .hero__slide{transition:none}
  .hero__progress{display:none}
}

/* ============================================================
   Phones
   Two things change below 768px:
   1. Cover-cropping a 3.56:1 illustration into a portrait box zooms
      it so far that only a sliver shows, behind the text — so the
      art becomes a contained full-width band under the copy.
      This kicks in at 768, not 1024: a tablet slide is still a
      landscape box (1000x464 is 2.2:1), so cover-cropping it is a
      mild trim rather than a destructive zoom. Running the band
      treatment up to 1024 was adding ~280px of artwork strip to
      every tablet hero and pushing it to 85% of the viewport.
   2. Side arrows would sit on top of that copy once the container
      gutter shrinks, so on phones they move down beside the pause
      button instead.
   These blocks must stay LAST: the .hero__art override has the same
   specificity as the base rule and wins on source order alone.
   ============================================================ */
@media (width < 48rem){
  .hero__slide{
    align-items:flex-start;
    padding-block:clamp(var(--sp-5),4vh,var(--sp-7))
                 calc(var(--hero-ui-h) + 28.125vw + var(--sp-4));
  }
  /* The headline was pinned at its 1.875rem floor for the whole phone
     range, so a 320px screen got the same 30px setting as a 480px one
     and "Built for Performance." broke onto a fourth line. Scaling it
     with the viewport instead keeps the same three-line shape at every
     phone width. 7.2vw: 23px at 320, 27px at 375, back to 30px by 417. */
  .hero__title{font-size:clamp(1.4375rem,7.2vw,1.875rem)}
  /* 92% of a 280px column is 258px — the copy was effectively
     full-bleed on a phone while still paying for a 4% right margin it
     could not use. */
  .hero__eyebrow,.hero__title,.hero__lede,.hero__actions{max-width:100%}
  .hero__art{
    inset:auto 0 var(--hero-ui-h) 0;      /* must beat `inset:0` on the base rule */
    height:auto;object-fit:contain;object-position:center bottom;
  }
  .hero__scrim{display:none}              /* copy now sits on flat colour */
}

@media (width < 48rem){
  .hero__arrow{
    top:auto;bottom:calc(var(--sp-4) + 4px);transform:none;
    width:2.75rem;height:2.75rem}
  .hero__arrow svg{width:1.25rem;height:1.25rem}
  .hero__arrow--prev{left:var(--container-pad)}
  .hero__arrow--next{right:auto;
    left:calc(var(--container-pad) + 2.75rem + var(--sp-2))}
}

/* Smallest phones. The band here is mostly real copy -- at 320px the
   eyebrow, headline, lede and two stacked buttons come to ~405px on
   their own -- so this tightens the setting rather than cutting text.
   The 0.22em eyebrow tracking in particular was pushing a short label
   onto three lines. */
@media (width < 30rem){
  .hero__actions .btn{flex:1 1 100%}
  .hero__eyebrow{letter-spacing:.14em;padding:var(--sp-1) var(--sp-3);
    margin-bottom:var(--sp-3)}
  .hero__title{margin-bottom:var(--sp-3)}
  /* The lede was locked at the 17px body size while the headline above
     it shrank, so at 320 it ran to four lines and read heavier than the
     thing it was supposed to support. 4.4vw: 14px at 320, 16.5px at
     375, and it rejoins the body size at 384. */
  .hero__lede{font-size:clamp(.875rem,4.4vw,var(--fs-base));
    line-height:1.45;margin-bottom:var(--sp-4)}
  .hero__actions{gap:var(--sp-3)}

  /* Reclaiming the last of a 568px screen, where the band was running
     to 102% of the viewport. --hero-min-h is a 384px floor meant for
     landscape phones; here the copy already clears it on a tall screen
     and it only buys dead space on a short one, so the band goes
     content-led. Top padding and the gap above the artwork give back
     8px each, and the carousel furniture gives back another 8 by
     tightening the pause button's margin — the one part of
     --hero-ui-h that is pure air. The button itself stays 44px. */
  .hero__slide{min-height:auto;
    padding-block:clamp(var(--sp-4),4vh,var(--sp-7))
                 calc(var(--hero-ui-h) + 28.125vw + var(--sp-2))}
  .hero__play{margin-bottom:var(--sp-2)}
  .hero__arrow{bottom:calc(var(--sp-2) + 4px)}
}