/* ===========================================================================
   hero-unified.css — ONE hero look for every page of the MADDS site.

   Reference: the home page hero (partials/hero_lens.html + css/hero-lens.css).
   Every page hero is tagged with the `hu-*` hooks and inherits from here:

     section.hu-hero  > .hu-inner      88% site grid (same column as the header)
                       .hu-crumb      breadcrumb line
                       .hu-eyebrow    small label above the headline
                       .hu-title      h1 — Afacad 700, clamp(38px, 6vw, 86px)/1
                       .hu-lead       paragraph — clamp(17px, 1.7vw, 23px)/1.3
                       .hu-actions    button row (flex, 14px gap)
                       .hu-btn        pill button (99px radius, 18px, 600)
                         --primary    purple -> magenta gradient + glow
                         --secondary  transparent + 2px white outline

   Rule of thumb taken from the home hero:
     · height is the home hero's height on every page (see "height" below)
     · font is Afacad everywhere, at the home hero's sizes
     · no italics anywhere inside a hero (em/i stay upright)
     · buttons look identical on every page
   Class selectors are doubled (`.hu-hero.hu-hero`) so this sheet beats the
   per-page hero sheets without needing !important.
   =========================================================================== */

.hu-hero {
  --hu-font: "Afacad", system-ui, sans-serif;
  --hu-navy: #0a0b2e;
  --hu-purple: #7b2ff7;
  --hu-magenta: #b51bb5;
  --hu-cyan: #43d2e0;
  --hu-gold: #f0a400;
  /* SITE GRID: same 88% column the header and the home hero use */
  --hu-edge: calc((100% - var(--site-width, 88%)) / 2);
  font-family: var(--hu-font);
}

/* ---------- height: the home hero's box on EVERY page ----------
   Reference: the home hero (.hl in css/hero-lens.css) is one full viewport
   tall — height: 100vh / 100svh with a 560px floor — and its padding counts
   INSIDE that height (box-sizing: border-box).
   Page heroes used to disagree (380px banners, 88vh, 92vh, 94vh, 96svh,
   content-sized …), so the first screen looked different on every page.
   One rule, one box: the same expression the home hero uses, so every hero
   is exactly as tall as the home hero on the same screen.
   min-height, never a fixed height: on small screens, where a hero's stacked
   content is genuinely taller than one viewport, the hero grows instead of
   clipping anything. Doubled selector wins over the per-page hero sheets. */
.hu-hero.hu-hero {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: max(100svh, 560px);
}

/* banner heroes (.other-slider: image + centred title) keep a definite height
   so their height:100% image always fills the box, and the title is centred in
   the whole hero again — header-glass.css used to push it down by half the bar
   height when these banners were only 380px tall and the bar overlapped them.
   Extra classes = specificity to beat header-glass.css's
   `header.main-header ~ .other-slider …` selectors. */
.hu-hero.hu-hero--banner.hu-hero--banner {
  height: 100vh;
  height: max(100svh, 560px);
  overflow: hidden;
}
.hu-hero.hu-hero--banner.hu-hero--banner .about-hd {
  top: 50%;
}

/* ---------- layout: the 88% content column ---------- */
.hu-hero.hu-hero .hu-inner {
  width: var(--site-width, 88%);
  max-width: var(--site-width, 88%);
  margin-inline: auto;
}
.hu-hero.hu-hero .hu-copy { min-width: 0; }

/* ---------- type ---------- */
.hu-hero.hu-hero .hu-title {
  font-family: var(--hu-font);
  font-weight: 700;
  font-size: clamp(38px, 6vw, 86px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  font-style: normal;
}
.hu-hero.hu-hero .hu-lead {
  font-family: var(--hu-font);
  font-weight: 400;
  font-size: clamp(17px, 1.7vw, 23px);
  line-height: 1.3;
  max-width: 32ch;
  margin: 0 0 28px;
  font-style: normal;
}
.hu-hero.hu-hero .hu-eyebrow {
  font-family: var(--hu-font);
  font-weight: 600;
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.2;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #43d2e0; /* reference hero: cyan context line "DIGITAL MARKETING · SOCIAL MEDIA" */
  margin: 0 0 14px;
  font-style: normal;
}

/* ---------- breadcrumb: ONE design for every page (reference hero spec) -----
   HOME / SPECIALISATION / … / CURRENT — uppercase, muted ancestors,
   cyan current item. This is the single source of truth; page sheets that
   style their own crumb class lose to these doubled-class selectors.
   -------------------------------------------------------------------------- */
.hu-hero.hu-hero .hu-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--hu-font);
  font-weight: 500;
  font-size: 0.86rem;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.46);
  margin: 0 0 12px;
  font-style: normal;
}
.hu-hero.hu-hero .hu-crumb a {
  color: inherit;
  text-decoration: none;
  font-style: normal;
}
.hu-hero.hu-hero .hu-crumb a:hover,
.hu-hero.hu-hero .hu-crumb a:focus-visible {
  color: #43d2e0;
}
.hu-hero.hu-hero .hu-crumb i,
.hu-hero.hu-hero .hu-crumb span[aria-hidden="true"] {
  font-style: normal;
  color: rgba(255, 255, 255, 0.3);
}
.hu-hero.hu-hero .hu-crumb span {
  color: inherit;
  font-style: normal;
}
.hu-hero.hu-hero .hu-crumb b,
.hu-hero.hu-hero .hu-crumb [aria-current="page"] {
  color: #43d2e0;
  font-weight: 600;
}

/* the home hero never sets italic inside the hero — neither do we */
.hu-hero.hu-hero em,
.hu-hero.hu-hero i,
.hu-hero.hu-hero cite,
.hu-hero.hu-hero var {
  font-style: normal;
}

/* ---------- buttons: exactly the home hero's pair ---------- */
.hu-hero.hu-hero .hu-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.hu-hero.hu-hero .hu-btn {
  display: inline-block;
  box-sizing: border-box;
  padding: 14px 28px;
  border-radius: 99px;
  font-family: var(--hu-font);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  font-style: normal;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease, background-color 0.2s ease;
}
/* primary: linear-gradient(90deg, #7b2ff7, #b51bb5) + soft magenta glow */
.hu-hero.hu-hero .hu-btn.hu-btn--primary,
.hu-hero.hu-hero a.hu-btn:first-of-type {
  color: #fff;
  background: linear-gradient(90deg, var(--hu-purple), var(--hu-magenta));
  border: 0;
  box-shadow: 0 10px 30px -10px var(--hu-magenta);
}
/* secondary: transparent with a 2px white outline */
.hu-hero.hu-hero .hu-btn.hu-btn--secondary,
.hu-hero.hu-hero a.hu-btn:nth-of-type(2) {
  color: #fff;
  background: transparent;
  border: 2px solid #fff;
  box-shadow: none;
}
.hu-hero.hu-hero .hu-btn:hover,
.hu-hero.hu-hero .hu-btn:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.hu-hero.hu-hero .hu-btn:active { transform: translateY(0); }

/* ---------- small screens: same values the home hero uses ---------- */
@media (max-width: 900px) {
  .hu-hero.hu-hero .hu-inner {
    width: calc(100% - 2 * var(--gutter, 1rem));
    max-width: none;
  }
}
@media (max-width: 820px) {
  /* one column on phones; minmax(0,1fr) so long words can never push the
     grid wider than the 88% column (fixes the /webapp/ hero on small screens).
     Inert on containers that are not display:grid. */
  .hu-hero.hu-hero .hu-inner { grid-template-columns: minmax(0, 1fr); }
  .hu-hero.hu-hero .hu-title { font-size: clamp(30px, 8.5vw, 46px); margin-bottom: 12px; }
  .hu-hero.hu-hero .hu-eyebrow { letter-spacing: 0.18em; }
  .hu-hero.hu-hero .hu-crumb { letter-spacing: 0.1em; font-size: 0.78rem; }
  .hu-hero.hu-hero .hu-lead { font-size: 16px; max-width: 36ch; margin-bottom: 18px; }
  .hu-hero.hu-hero .hu-btn { padding: 12px 22px; font-size: 16px; }
  .hu-hero.hu-hero .hu-actions { gap: 12px; }
}