/* ============================================
   Zebra Hero — block-specific styles
   Loaded only on pages that contain a zebra/hero block.
   ============================================ */
.hero{
  background:var(--c-dark-bg);color:var(--c-white);
  position:relative;overflow:hidden;
  padding:var(--xxl) 0 var(--xxl);
  padding-top:var(--xxl);
  min-height:calc(100vh - 84px);
  display:flex;align-items:center;
}
.hero .container{position:relative;z-index:2}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--xxl);
  align-items:center;
}
/* When the mascot sits on the LEFT, flip the column ratio so the
   text column stays the wider one. */
.hero--mascot-left .hero-grid{
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
}
.hero .eyebrow{color:var(--c-primary);margin-bottom:var(--md)}
.hero .display-xxl{margin-bottom:var(--md);line-height:1.08;font-size:clamp(32px,5.6vw,86px)}
.hero .display-xxl .stroke{
  -webkit-text-stroke:1.5px var(--c-white);
  color:transparent;
}
/* h1/h2 tag selectors as fallback for render.php output */
.hero h1,.hero h2{
  font-weight:400;
  margin-bottom:var(--md);line-height:1.08;font-size:clamp(32px,5.6vw,86px)
}
.hero h1 .stroke,.hero h2 .stroke{
  -webkit-text-stroke:1.5px var(--c-white);
  color:transparent;
}
.hero .h3{margin-bottom:var(--lg)}
.hero p{color:#cfcfcf;max-width:52ch;font-size:var(--fs-body-lg)}
.hero-meta{
  margin-top:var(--xl);display:flex;gap:var(--lg);flex-wrap:wrap;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#888
}
.hero-meta .num{color:var(--c-primary);font-weight:600;margin-right:8px}

.hero-quote{
  margin-top:var(--lg);padding:var(--md) 0 var(--md) var(--md);
  border-left:3px solid var(--c-primary);
  font-style:italic;font-size:var(--fs-body-lg);color:#fff;max-width:48ch;
}

/* Ghost CTA Button */
.hero-cta { margin-top: var(--lg); }
.hero .btn-ghost {
  display: inline-block;
  padding: .65em 1.6em;
  border: 2px solid var(--c-primary);
  color: var(--c-white);
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-body-lg);
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.hero .btn-ghost:hover {
  background: var(--c-primary);
  color: #000;
}

/* Hero mascot container + circular yellow disk behind the image */
.hero-mascot{
  position:relative;width:100%;aspect-ratio:1/1;
  display:grid;place-items:center;overflow:hidden;
}
.hero-mascot:before{
  content:"";position:absolute;width:84%;aspect-ratio:1/1;border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.06),
             0 40px 100px rgba(0,0,0,.45);
}
.hero-mascot--yellow:before{background:var(--c-primary)}
.hero-mascot img{position:relative;z-index:2;width:74%;height:auto;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.18))}

/* Responsive — hero-specific media queries */
@media (max-width: 980px){
  .hero-grid{
    grid-template-columns: 1fr !important;
    gap: var(--lg);
  }
  .hero{ min-height: auto; padding-top: calc(var(--md) + 84px); padding-bottom: var(--xl); }
  /* Mascot oben, Text darunter */
  .hero-mascot{
    display: grid;
    place-items: center;
    max-width: 180px;
    margin: 0 auto;
    order: -1;
  }
  .hero-mascot:before{ box-shadow: none; }
  .hero-meta{ font-size:10px; gap:var(--md); }
  .hero .eyebrow{ display: none; }
}

/* ============================================================
   Background colour variants — text colour auto-switches.
   These rules come AFTER the base rules so they win on
   specificity ties (same selector weight, later in file).
   ============================================================ */

/* --- BLACK (default) — already handled by base rules above --- */

/* --- LIGHT backgrounds (white / yellow / gray) --- */
.hero--fg-dark { color: #000; }
.hero--fg-dark .eyebrow { color: #000; }
.hero--fg-dark .display-xxl,
.hero--fg-dark h1,
.hero--fg-dark h2 { color: #000; }
.hero--fg-dark .display-xxl .stroke,
.hero--fg-dark h1 .stroke,
.hero--fg-dark h2 .stroke {
  -webkit-text-stroke-color: #000;
  color: transparent;
}
.hero--fg-dark .h3 { color: #000; }
.hero--fg-dark p { color: #333; }
.hero--fg-dark .hero-quote { color: #000; border-left-color: #000; }

/* Mascot circle on light backgrounds */
.hero--fg-dark .hero-mascot:before { background: rgba(0,0,0,.06); box-shadow:none; }
.hero--fg-dark .hero-mascot--yellow:before { background: var(--c-primary); }

/* Scroll cue on light backgrounds */
.hero--fg-dark .scroll-cue { color: #000; }

/* Ghost button on light backgrounds */
.hero--fg-dark .btn-ghost {
  border-color: #000;
  color: #000;
}
.hero--fg-dark .btn-ghost:hover {
  background: #000;
  color: #fff;
}