/* abc-site-kit — canonical HERO layout (SINGLE SOURCE).
 *
 * The Africa-mark hero section used on every abc-cluster landing page.
 * Covers the layout skeleton, Africa mark sizing/decoration, the rotating
 * acronym headline, and the shared button component.
 *
 * Token-driven only: every colour is a short-form var(--*) alias from
 * abc-site-kit/brand/tokens.css — hero.css ships NO palette of its own.
 * Load order: tokens.css → hero.css → chrome.css → page style.css
 *
 * Canonical HTML structure:
 *
 *   <section class="hero">
 *     <div class="hero-inner page">
 *
 *       <div class="hero-mark" aria-label="abc-cluster mark">
 *         <svg viewBox="0 0 200 200" aria-hidden="true">
 *           <!-- Africa silhouette + dot field + A/B/C nodes (inline) -->
 *           <!-- Use short-form vars: var(--ink), var(--ink-dim), var(--bg), var(--accent), var(--text-dim) -->
 *           <!-- Dot field: <g fill="var(--ink)" opacity="0.7">…circles…</g> -->
 *         </svg>
 *       </div>
 *
 *       <div class="hero-content">
 *         <!-- eyebrow: surface-specific markup goes here -->
 *         <div class="eyebrow">…</div>
 *
 *         <!-- acronym headline -->
 *         <h1 class="acronym-h1" aria-label="…">
 *           <span class="acronym-line">
 *             <span class="ac ac-a">
 *               <span class="ac-letter">A</span>
 *               <span class="ac-rotator" id="ac-rotator">
 *                 <span class="ac-track" id="ac-track">
 *                   <span>frican</span>
 *                   <span>wesome</span>
 *                   …
 *                 </span>
 *               </span>
 *             </span>
 *             <span class="ac"><span class="ac-letter">B</span><span class="ac-rest">ioinformatics</span></span>
 *             <span class="ac"><span class="ac-letter">C</span><span class="ac-rest">omputing</span></span>
 *             <span class="ac-rest">Cluster</span>
 *           </span>
 *           <span class="acronym-sub">a.k.a. <i>Abhi&rsquo;s Baby Cluster</i></span>
 *         </h1>
 *
 *         <!-- surface-specific content (CTAs, lede, retention notice, etc.) -->
 *       </div>
 *
 *     </div>
 *   </section>
 *
 * Per-surface variation:
 *   - .eyebrow content and markup (pill + pulse for seedling, plain text for apex)
 *   - Everything inside .hero-content after the h1
 *   - Body font family (style.css owns base typography)
 *   - Section padding override if needed
 *
 * The .page utility class (max-width: 1180px + side padding) is defined in
 * each page's style.css — hero.css does not own it.
 *
 * Consumed by static pages (apex, seedling landing) via vendored dist/hero.css.
 * Docusaurus sites import the acronym rules via custom.css adaptations.
 */

/* ─── Hero section wrapper ──────────────────────────────────────────── */
.hero {
  padding: 64px 0 72px;
}

/* Two-column split: fixed-width Africa mark | flex content column. */
.hero-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

/* ─── Africa mark ───────────────────────────────────────────────────── */
/* Use the canonical dot-field SVG with short-form tokens:
 *   Africa outline:  stroke="var(--ink-dim)"  opacity="0.5"
 *   Dot field:       <g fill="var(--ink)" opacity="0.7">
 *   A/B/C circles:   fill="var(--bg)"  stroke="var(--accent)"
 *   Wordmark text:   fill="var(--ink)" / fill="var(--text-dim)"  */
.hero-mark {
  position: relative;
  aspect-ratio: 1 / 1;
  width: clamp(180px, 22vw, 260px);
  flex-shrink: 0;
}
.hero-mark svg { width: 100%; height: 100%; display: block; }

/* Four L-shaped corner crops — typographic frame around the mark. */
.hero-mark::after {
  content: '';
  position: absolute;
  inset: -10px;
  background:
    linear-gradient(var(--ink-dim), var(--ink-dim)) top left    / 14px 1px  no-repeat,
    linear-gradient(var(--ink-dim), var(--ink-dim)) top left    / 1px  14px no-repeat,
    linear-gradient(var(--ink-dim), var(--ink-dim)) top right   / 14px 1px  no-repeat,
    linear-gradient(var(--ink-dim), var(--ink-dim)) top right   / 1px  14px no-repeat,
    linear-gradient(var(--ink-dim), var(--ink-dim)) bottom left / 14px 1px  no-repeat,
    linear-gradient(var(--ink-dim), var(--ink-dim)) bottom left / 1px  14px no-repeat,
    linear-gradient(var(--ink-dim), var(--ink-dim)) bottom right/ 14px 1px  no-repeat,
    linear-gradient(var(--ink-dim), var(--ink-dim)) bottom right/ 1px  14px no-repeat;
  pointer-events: none;
  opacity: 0.55;
}

/* ─── Hero content column ───────────────────────────────────────────── */
.hero-content { min-width: 0; }

/* ─── Eyebrow ───────────────────────────────────────────────────────── */
/* Base eyebrow — plain monospace label above the headline.
 * The seedling pill/pulse variant is layered on top in style.css. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 18px;
}
.eyebrow .dot { color: var(--accent); }

/* ─── Acronym headline ──────────────────────────────────────────────── */
.acronym-h1 {
  font-size: clamp(28px, 5.2vw, 58px);
  line-height: 1.05;
  margin: 0 0 10px;
}

.acronym-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  color: var(--text);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}

/* The rotating "A…" word takes the full first line. */
.acronym-line .ac.ac-a { flex-basis: 100%; margin-right: 0; }

/* B…, C…, and "Cluster" sit at ~46% of the headline size. */
.acronym-line .ac:not(.ac-a),
.acronym-line > .ac-rest {
  font-size: 0.46em;
  letter-spacing: 0.01em;
}

.ac { display: inline-flex; align-items: baseline; }
.ac-letter {
  color: var(--ink);
  font-weight: 700;
  font-size: 1.05em;
  letter-spacing: -0.02em;
}
.ac-rest  { color: var(--text); font-weight: 500; }

/* Sliding word rotator — JS sets --w and translateY on .ac-track. */
.ac-rotator {
  display: inline-block;
  height: 1.18em;
  overflow: hidden;
  vertical-align: bottom;
  position: relative;
  width: var(--w, 12ch);
  transition: width 380ms cubic-bezier(.4, 0, .2, 1);
}
.ac-track {
  display: flex;
  flex-direction: column;
  line-height: 1.18em;
  transform: translateY(0);
  transition: transform 380ms cubic-bezier(.4, 0, .2, 1);
}
.ac-track > span {
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
}
.ac-track > span.live { color: var(--accent); }

.acronym-sub {
  display: block;
  margin-top: 14px;
  color: var(--text-mute);
  font-size: 13px;
  letter-spacing: 0.02em;
}
.acronym-sub i {
  color: var(--text-dim);
  font-style: normal;
  border-bottom: 1px dotted var(--rule);
  padding-bottom: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .ac-rotator, .ac-track { transition: none !important; }
}

/* ─── Button ────────────────────────────────────────────────────────── */
/* Scoped to .hero so page-level .btn rules (forms, etc.) are not clobbered.
 * Modifiers: .btn-primary (apex), .btn.primary (seedling). */
.hero .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.hero .btn:hover { background: var(--bg-1); border-color: var(--ink-dim); }

/* Primary: ink fill — both .btn-primary (apex) and .btn.primary (seedling) */
.hero .btn-primary,
.hero .btn.primary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.hero .btn-primary:hover,
.hero .btn.primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.hero .btn .arrow { font-family: inherit; transition: transform .12s; }
.hero .btn:hover .arrow { transform: translateX(3px); }

/* ─── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 800px) {
  .hero { padding: 40px 0 48px; }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: left;
  }
  .hero-mark {
    width: clamp(140px, 50vw, 180px);
    margin: 0 auto;
  }
  .hero .btn { font-size: 12px; padding: 11px 18px; }
}