/*
  Hero — media stage with a carved headline panel, plus a card rail.

  The signature move from the approved reference: the headline does not sit
  ON the photograph in a box, it sits IN it. The panel is painted in the
  page background and its corners are inverted, so the photograph appears to
  have a bite taken out of its lower-left. Getting this right is what stops
  the hero reading as a stock "text over image" banner.
*/

.m-hero{
  position:relative;
  padding-top:clamp(var(--s-6), 5vw, var(--s-8));
  padding-bottom:var(--section-y);
  overflow:hidden;
}

.m-hero-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(240px, 23vw, 320px);
  gap:clamp(var(--s-4), 1.6vw, var(--s-5));
  align-items:stretch;
}

/* ---------- Stage ---------- */
.m-hero-stage{position:relative;display:flex;flex-direction:column;}

.m-hero-stage-media{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  /* Tall enough to carry the carve without cropping the subject out, but
     capped against the viewport so the headline is always in the first
     screen. The image is object-fit:cover, so the cap crops rather than
     distorts. */
  aspect-ratio:16/11;
  max-height:min(58vh, 580px);
}
/* ---------- Carousel slides ----------
   base.css already gives .slide its absolute fill, its 1.1s opacity
   cross-fade and the slow scale that runs while a slide is active, and
   main.js already rotates them. What it does NOT anticipate is slides
   holding an <img> rather than a background-image, or sitting inside a
   rounded frame — that is all this block adds. */
.m-hero-stage-media .slide{
  position:absolute;inset:0;
  background:none;
}
.m-hero-stage-media .slide > img{
  width:100%;height:100%;object-fit:cover;
  /* Real event photography: faces sit in the upper third with headroom
     above, so a centred crop lands on torsos. */
  object-position:center 24%;
}
/* base.css darkens every slide with --hero-scrim for text reversed out of
   the photo. This hero puts its headline in the carved panel BELOW the
   image instead, so the scrim would only mute the photography. */
.m-hero-stage-media .slide::after{display:none;}

/* Dots ride the frame's lower-right — the opposite corner from the carve,
   which occupies the lower-left. */
.m-hero-stage-media .slide-dots{
  position:absolute;z-index:4;
  right:var(--s-5);bottom:var(--s-5);
  display:flex;gap:var(--s-2);
}
.m-hero-stage-media .slide-dots button{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.5);
  transition:background var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.m-hero-stage-media .slide-dots button:hover{background:rgba(255,255,255,.8);}
.m-hero-stage-media .slide-dots button.active{
  background:var(--accent-2);transform:scale(1.3);
}

/* Credential chip, top-right of the photograph. Solid ink panel, never a
   frosted one — the no-glassmorphism constraint. */
.m-hero-chip{
  position:absolute;top:var(--s-5);right:var(--s-5);z-index:2;
  display:flex;flex-direction:column;gap:2px;
  background:var(--accent-dark);color:var(--panel-dark-text);
  padding:var(--s-3) var(--s-5);border-radius:var(--radius-md);
}
.m-hero-chip b{font-family:var(--font-display);font-size:1rem;font-weight:600;line-height:1.1;}
.m-hero-chip span{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-2);
}

/* ---------- The carved panel ----------
   Overlaps the media's lower-left. Painted --bg so it reads as the page
   showing through the photograph rather than as a card on top of it. */
.m-hero-panel{
  --overlap:150px;
  position:relative;z-index:3;
  /* Rides up over the photograph's lower-left, so the page background eats
     into the image instead of the headline sitting on top of it. */
  margin-top:calc(var(--overlap) * -1);
  margin-right:clamp(var(--s-8), 18%, 220px);
  background:var(--bg);
  /* The single large convex corner IS the carve — the photograph wraps
     around it. Nothing is cut out of the panel; the shape reads because
     the panel is painted in the page's own background colour. */
  border-top-right-radius:44px;
  padding:var(--s-7) var(--s-8) 0 0;
  display:flex;flex-direction:column;gap:var(--s-5);
  align-items:flex-start;
}

.m-hero-panel h1{
  /* Capped below the global --t-h1 (5.3rem): the carve already pushes the
     panel down the viewport, and at full display size the headline ran to
     four lines and pushed the lead and CTAs off the first screen. Three
     lines at a wider measure reads stronger and still fits. */
  font-size:clamp(1.9rem, 1.2rem + 2.9vw, 4rem);
  line-height:1.02;letter-spacing:-.032em;
  max-width:20ch;margin:0;
}
@media (max-width:820px){
  /* 20ch inside an already-narrow column was the direct cause of the
     five-line fold — it capped the headline well short of the space
     actually available. */
  .m-hero-panel h1{max-width:none;line-height:1.08;letter-spacing:-.028em;}
}
.m-hero-panel .m-lead{max-width:52ch;}

.m-hero-actions{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:var(--s-5);width:100%;
}
.m-hero-ctas{display:flex;flex-wrap:wrap;gap:var(--s-3);}

/* Circular scroll affordance, as in the reference. */
.m-hero-scroll{
  width:52px;height:52px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--accent-line);color:var(--accent);
  text-decoration:none;
  transition:background var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.m-hero-scroll svg{width:18px;height:18px;}
.m-hero-scroll:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(3px);}
@keyframes m-nudge{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}}
.m-hero-scroll svg{animation:m-nudge 2.4s var(--ease-in-out) 1.6s infinite;}

/* ---------- Right rail ---------- */
.m-hero-rail{
  display:flex;flex-direction:column;
  gap:clamp(var(--s-4), 1.6vw, var(--s-5));
  align-self:start;
}

/* Circular statistic badge. */
.m-hero-stat{
  aspect-ratio:1;border-radius:50%;
  background:var(--accent-2-light);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:var(--s-5);
}
.m-hero-stat .ti-num{
  display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(2rem, 3.4vw, 3.1rem);line-height:1;
  letter-spacing:-.04em;color:var(--accent-dark);
  font-variant-numeric:tabular-nums;
}
.m-hero-stat .ti-num small{
  display:block;font-family:var(--font-mono);font-size:.62rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  color:var(--accent-2-deep);margin-top:var(--s-3);line-height:1.4;
}

/* Action cards — the arrow sits bottom-right, as in the reference. */
.m-hero-card{
  position:relative;min-height:clamp(140px, 13vw, 168px);
  display:flex;flex-direction:column;gap:var(--s-2);
  padding:var(--s-5);border-radius:var(--radius-lg);
  text-decoration:none;overflow:hidden;
  transition:transform var(--dur-mid) var(--ease-out),
             box-shadow var(--dur-mid) var(--ease-out);
}
.m-hero-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.m-hero-card-label{
  font-family:var(--font-mono);font-size:var(--t-mono);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;opacity:.75;
}
.m-hero-card strong{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.05rem, 1.4vw, 1.3rem);line-height:1.18;
  letter-spacing:-.018em;max-width:14ch;
}
.m-hero-card .m-arrow{
  position:absolute;right:var(--s-4);bottom:var(--s-4);
  --arrow-size:40px;
}
.m-hero-card:hover .m-arrow svg{transform:translateX(2px);}

.m-hero-card-green{background:var(--accent);color:#fff;}
.m-hero-card-green .m-arrow{border-color:rgba(255,255,255,.4);color:#fff;}
.m-hero-card-green:hover .m-arrow{background:#fff;color:var(--accent);}
.m-hero-card-gold{background:var(--accent-2);color:var(--accent-dark);}
.m-hero-card-gold .m-arrow{border-color:rgba(15,35,27,.3);color:var(--accent-dark);}
.m-hero-card-gold:hover .m-arrow{background:var(--accent-dark);color:var(--accent-2);}

/* ---------- Credential row ---------- */
.m-hero-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5);
  margin-top:var(--s-7);padding-top:var(--s-5);
  border-top:1px solid var(--line);
}
.m-hero-meta span{
  font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.06em;
  color:var(--ink-faint);text-transform:uppercase;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.m-hero-meta span + span{padding-left:var(--s-5);border-left:1px solid var(--line);}

/* ---------- Responsive ----------
   1080px: the rail goes horizontal under the stage — still a rail, still
   the same three cards, just running the other way. It is never dropped,
   because those two cards are the hero's primary actions. */
@media (max-width:1080px){
  .m-hero-layout{grid-template-columns:1fr;}
  .m-hero-rail{
    flex-direction:row;
    gap:var(--s-4);
  }
  .m-hero-stat{
    aspect-ratio:auto;border-radius:var(--radius-lg);
    flex:0 0 clamp(150px,26%,220px);padding:var(--s-5);
  }
  .m-hero-card{min-height:clamp(130px,16vw,170px);}
}
@media (max-width:860px){
  .m-hero-stage-media{aspect-ratio:4/3;}
  .m-hero-panel{
    /* The carve is the hero's identity, so it is kept on tablets — just
       shallower, and reaching the full width so the headline keeps its
       measure. */
    --overlap:88px;
    margin-right:clamp(var(--s-6), 9%, 110px);
    border-top-right-radius:32px;
    padding-top:var(--s-6);
    padding-right:var(--s-6);
  }
  .m-hero-panel h1{max-width:100%;}
}
@media (max-width:640px){
  .m-hero-rail{flex-direction:column;}
  .m-hero-stat{
    flex:none;flex-direction:row;gap:var(--s-4);
    justify-content:flex-start;text-align:left;padding:var(--s-5) var(--s-6);
  }
  .m-hero-stat .ti-num{display:flex;align-items:baseline;gap:var(--s-4);font-size:2.2rem;}
  .m-hero-stat .ti-num small{margin-top:0;}
  .m-hero-card{min-height:120px;}
  .m-hero-panel{
    --overlap:54px;
    /* Both of these were starving the headline. At 360px the panel kept a
       60px right padding and a 32px right margin, leaving the h1 just
       228px of a 360px screen — which is what forced the five-line fold.
       The carve still reads at 16px/20px; the headline gets the rest. */
    margin-right:var(--s-5);
    padding-right:var(--s-4);
    border-top-right-radius:24px;
  }
  .m-hero-actions{gap:var(--s-4);}
  .m-hero-ctas{flex:1;}
  .m-hero-ctas .btn{flex:1 1 auto;}
  .m-hero-meta span + span{padding-left:0;border-left:0;}
  .m-hero-meta{gap:var(--s-2) var(--s-4);}
}

/* ---------- Entrance ---------- */
@keyframes m-hero-frame{
  from{opacity:0;transform:translateY(20px) scale(.985);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes m-hero-zoom{ from{transform:scale(1.1);} to{transform:scale(1);} }
@keyframes m-hero-pop{ from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:translateY(0);} }

.m-hero-stage-media{animation:m-hero-frame .9s var(--ease-out) .05s both;}
/* Only the first slide gets the entrance zoom; the rotating ones get
   base.css's own scale while they are active, and stacking both on the same
   element would fight over transform. */
.m-hero-stage-media .slide:first-child > img{animation:m-hero-zoom 1.7s var(--ease-out) .05s both;}
.m-hero-chip{animation:m-hero-pop .6s var(--ease-out) .5s both;}
.m-hero-stat{animation:m-hero-pop .7s var(--ease-out) .42s both;}
.m-hero-rail .m-hero-card:nth-of-type(1){animation:m-hero-pop .7s var(--ease-out) .54s both;}
.m-hero-rail .m-hero-card:nth-of-type(2){animation:m-hero-pop .7s var(--ease-out) .66s both;}

@media (prefers-reduced-motion: reduce){
  .m-hero-stage-media,
  .m-hero-stage-media .slide:first-child > img,
  .m-hero-chip,
  .m-hero-stat,
  .m-hero-rail .m-hero-card,
  .m-hero-scroll svg{animation:none;opacity:1;transform:none;}
  .m-hero-card:hover{transform:none;}
}