/* Staff-configurable hero section.
   Layers on top of landing.css - the .hero, .hero-title and .hero-sub rules
   there still own the base look, so the configurable parts inherit the standard
   site treatment rather than introducing a second visual language. */

/* ── Rotation fade ──────────────────────────────────────────────
   One transition drives every rotating slot. The element is faded out, swapped
   while invisible, then faded back - so a rotation reads as a crossfade rather
   than a cut. The slight lift is what stops it feeling like a flicker.
   Timing is paired with ROTATION_FADE_MS in hero.js; changing one without the
   other makes the swap visible. */
.hero-el,
.hero-banner,
.hero-text,
.quick-link-btn[data-fading] {
  transition: opacity 320ms cubic-bezier(.4, 0, .2, 1),
              transform 320ms cubic-bezier(.4, 0, .2, 1);
}

[data-fading="true"] {
  opacity: 0;
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .hero-el, .hero-banner, .hero-text, .quick-link-btn[data-fading] {
    transition: opacity 120ms linear;
  }
  [data-fading="true"] { transform: none; }
}

/* ── Preview flag ───────────────────────────────────────────────
   Staff-only, and deliberately loud: previewing the draft renders the real
   homepage, so there has to be something that says this is not what the public
   currently sees. */
.hero-preview-flag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px dashed var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ── Tagline text blocks ────────────────────────────────────────
   Sizes stay in the hero-sub idiom (small, wide-tracked, uppercase-adjacent)
   rather than becoming free-form body copy. */
.hero-tagline-wrap { margin-bottom: 32px; }
.hero-text { margin: 0 auto; max-width: 62ch; }
.hero-text-large  { font-size: 15px; letter-spacing: .14em; }
.hero-text-medium { font-size: 12px; letter-spacing: .18em; }
.hero-text-small  { font-size: 11px; letter-spacing: .16em; }
.hero-text-bold   { font-weight: 700; }
.hero-text-normal { font-weight: 500; }

/* ── Primary zone ───────────────────────────────────────────────
   .hero-actions already centres and wraps; this only adds the alignment the
   mixed element types need. */
.hero-zone-primary { align-items: center; row-gap: 12px; }
.hero-el { display: inline-flex; align-items: center; }

/* ── Buttons ────────────────────────────────────────────────────
   Three variants mapping onto the existing landing buttons, so a configured
   button is indistinguishable from a hardcoded one. */
.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 26px;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: color var(--transition), background-color var(--transition),
              border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
}
.hero-btn:hover  { transform: translateY(-1px); }
.hero-btn:active { transform: translateY(1px) scale(.99); }
.hero-btn svg    { width: 16px; height: 16px; flex-shrink: 0; }

.hero-btn-primary {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, white), var(--accent));
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 20%, transparent),
              inset 0 1px 0 rgba(255,255,255,.18);
}
.hero-btn-primary:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 84%, white), var(--accent-2));
  border-color: var(--accent-2);
  color: #fff;
  box-shadow: 0 10px 30px var(--accent-dim);
}

.hero-btn-secondary {
  background: color-mix(in srgb, var(--bg-3) 30%, transparent);
  border-color: var(--border-2);
  color: var(--text-2);
}
.hero-btn-secondary:hover {
  background: var(--bg-hover);
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border-2));
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
}

.hero-btn-ghost {
  background: transparent;
  border-color: color-mix(in srgb, var(--border-2) 70%, transparent);
  color: var(--text-2);
}
.hero-btn-ghost:hover {
  background: color-mix(in srgb, var(--bg-3) 40%, transparent);
  color: var(--text);
  border-color: var(--accent);
}

/* ── Stat & countdown chips ─────────────────────────────────────
   Chips read as information, not as actions - lighter weight and no hover
   affordance, so they are never mistaken for buttons sitting beside them. */
.hero-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-height: 38px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-2);
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
  color: var(--text-2);
  font-size: 12px;
}
.hero-chip-icon {
  display: inline-flex;
  align-self: center;
  color: var(--accent);
}
.hero-chip-icon svg { width: 15px; height: 15px; }
.hero-chip-value {
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.hero-chip-label {
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--text-3);
}
/* Tabular figures stop the countdown jittering as digits change width. */
.hero-chip-countdown .hero-chip-value { font-variant-numeric: tabular-nums; }

/* ── Dividers ───────────────────────────────────────────────────
   A divider separates groups within a zone; the blank variant is pure spacing. */
.hero-divider { display: inline-flex; align-items: center; justify-content: center; }
.hero-divider-line   { border-top: 1px solid var(--border); align-self: center; }
.hero-divider-line.hero-divider-small  { width: 28px; }
.hero-divider-line.hero-divider-medium { width: 56px; }
.hero-divider-line.hero-divider-large  { width: 96px; }
.hero-divider-blank.hero-divider-small  { width: 10px; }
.hero-divider-blank.hero-divider-medium { width: 22px; }
.hero-divider-blank.hero-divider-large  { width: 40px; }
.hero-divider-icon { color: var(--text-3); padding: 0 6px; }
.hero-divider-icon svg { width: 16px; height: 16px; }

/* ── Banner ─────────────────────────────────────────────────────
   The showpiece: an unfurled scroll rather than a rectangular notice card. The
   parchment tone is warm and fixed rather than accent-tinted - a scroll that
   changed colour daily would read as a UI panel, not an artefact.

   The rolled ends are two pseudo-elements pinned to the left and right edges,
   with the body inset past them so text never runs underneath. */
.hero-banner-slot {
  display: flex;
  justify-content: center;
  margin: 0 auto 30px;
  max-width: 720px;
  padding: 0 8px;
}

.hero-banner {
  position: relative;
  width: 100%;
  padding: 2px 26px;
  animation: hero-banner-unfurl 620ms cubic-bezier(.22, 1, .36, 1) both;
}

/* Unfurls horizontally from the centre, the way a scroll actually opens. */
@keyframes hero-banner-unfurl {
  from { transform: scaleX(.72); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: scaleX(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner { animation: none; }
}

.hero-banner-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 26px;
  color: #2c2418;
  text-align: left;
  background:
    /* Soft aging towards the top and bottom edges. */
    linear-gradient(180deg, rgba(120, 92, 48, .16), transparent 22%,
                            transparent 78%, rgba(120, 92, 48, .18)),
    linear-gradient(92deg, #efe0c0, #f7ecd2 26%, #f9f0dc 50%, #f5e8cd 74%, #eddcb8);
  border-top: 1px solid rgba(255, 250, 235, .7);
  border-bottom: 1px solid rgba(120, 92, 48, .3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -12px 22px -14px rgba(108, 80, 38, .5),
    0 12px 30px rgba(0, 0, 0, .3);
}

/* The two rolled ends. */
.hero-banner::before,
.hero-banner::after {
  content: '';
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 26px;
  border-radius: 5px;
  background: linear-gradient(90deg, #b9945c, #e6d2a8 38%, #f2e4c6 52%, #cfae76 78%, #a8834c);
  box-shadow: inset 0 0 0 1px rgba(94, 68, 30, .35),
              0 6px 14px rgba(0, 0, 0, .32);
}
.hero-banner::before { left: 0; }
.hero-banner::after  { right: 0; }

.hero-banner-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: #7a5a23;
}
.hero-banner-icon svg { width: 22px; height: 22px; }

.hero-banner-copy { flex: 1; min-width: 0; }

.hero-banner-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5c431a;
  margin-bottom: 4px;
}

.hero-banner-body {
  font-size: 13px;
  line-height: 1.6;
  color: #3a2f1e;
}

/* The banner button sits on parchment, not on the site background, so it takes
   an ink-on-scroll treatment instead of the accent gradient. */
.hero-banner-btn {
  flex-shrink: 0;
  min-height: 40px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #5c431a, #45320f);
  border-color: #45320f;
  color: #f7ecd2;
  box-shadow: 0 4px 12px rgba(60, 42, 12, .35);
}
.hero-banner-btn:hover {
  background: linear-gradient(135deg, #6d5124, #533c14);
  border-color: #533c14;
  color: #fff8e6;
  box-shadow: 0 8px 20px rgba(60, 42, 12, .45);
}

/* ── Secondary zone (quick links row) ───────────────────────────
   The row keeps .quick-links-row and .quick-link-btn from landing.css so its
   grid, sizing and breakpoints are untouched. `display:contents` is what makes
   the fallback wrapper vanish from layout - without it the three anchors would
   become one grid cell and the row would collapse to a single column. */
.quick-links-fallback { display: contents; }

/* Variant mapping for configured links, matching the weight of the hardcoded
   brand buttons they replaced. An explicit colour overrides all of this. */
.hero-quick-primary   { background: var(--accent); border-color: var(--accent); color: #fff; }
.hero-quick-primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.hero-quick-secondary { background: var(--bg-3); border-color: var(--border-2); color: var(--text); }
.hero-quick-secondary:hover { filter: brightness(1.15); color: var(--text); }
.hero-quick-ghost {
  background: transparent;
  border-color: var(--border-2);
  color: var(--text-2);
}
.hero-quick-ghost:hover { background: var(--bg-hover); color: var(--text); }
.quick-link-btn svg { width: 16px; height: 16px; flex-shrink: 0; margin-right: 8px; }

/* ── Mobile ─────────────────────────────────────────────────────
   The links row's own breakpoint in landing.css already stacks it; nothing here
   may interfere with that. */
@media (max-width: 600px) {
  .hero-banner { padding: 2px 18px; }
  .hero-banner-inner { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 20px; }
  .hero-banner::before, .hero-banner::after { width: 18px; }
  .hero-banner-btn { width: 100%; }
  .hero-zone-primary { flex-direction: column; }
  .hero-zone-primary .hero-el { width: 100%; }
  .hero-zone-primary .hero-btn { width: 100%; }
  .hero-text { max-width: none; }
}

/* ── Hero context line ──────────────────────────────────────────
   The permanent one-sentence description under the hero. Subtle and muted so it
   stays out of the way of the tools, but real, readable, visible text (never
   hidden - hidden text is a search-spam violation). Normal case, unlike the
   uppercase .hero-sub label above it. */
.hero-context {
  max-width: 560px;
  margin: 12px auto 28px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-3);
  text-align: center;
}
.hero-context strong { color: var(--text-2); font-weight: 600; }
@media (max-width: 600px) {
  .hero-context { font-size: 13px; padding: 0 16px; }
}