/* ==========================================================================
   Hero Section — acf/tc94-hero
   Paired stylesheet for hero.php. Everything is expressed in theme tokens, so
   a change in theme.json / Global Styles re-skins the hero with it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The section box
   -------------------------------------------------------------------------- */
.tc94-hero {
  position: relative;
  isolation: isolate;
  max-width: none;
  background-color: var(--wp--preset--color--surface-darker);
  color: var(--wp--custom--color--on-dark-muted);
  padding-top: clamp(var(--wp--preset--spacing--100), 8vw, var(--wp--preset--spacing--130));
  padding-bottom: clamp(var(--wp--preset--spacing--110), 12vw, var(--wp--preset--spacing--130));
}

/* Full bleed is NOT set here, deliberately. Core's layout CSS already pulls
   .has-global-padding > .alignfull out by the root padding and hands it
   max-width: none, which is exactly right and — unlike calc(50% - 50vw) —
   scrollbar-safe: 50vw counts the scrollbar gutter, clientWidth does not, so
   the vw form overshot by half a scrollbar on each side (measured: 7.5px at a
   1440px viewport with a 15px scrollbar, left: -7.5 width: 1440 against a
   1425px client width). It was invisible only because body carries
   overflow-x: clip, which quietly cropped it. A hero dropped somewhere with no
   global padding on its parent is already edge to edge, so no rule is needed
   in that case either. */

/* --------------------------------------------------------------------------
   2. Background photograph and scrim
   -------------------------------------------------------------------------- */
.tc94-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.tc94-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Above centre, so Sigiriya's summit survives the crop on short viewports. */
  object-position: 50% 42%;
}

.tc94-hero__scrim {
  --tc94-scrim: var(--wp--preset--color--surface-deepest);
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Flat-alpha fallback first for engines without color-mix(). */
  background-image:
    linear-gradient(100deg, var(--wp--custom--alpha--dark-80), transparent 78%),
    linear-gradient(to top, var(--wp--custom--alpha--dark-55), transparent 45%);
  background-image:
    linear-gradient(100deg,
      color-mix(in srgb, var(--tc94-scrim) 88%, transparent) 0%,
      color-mix(in srgb, var(--tc94-scrim) 72%, transparent) 42%,
      color-mix(in srgb, var(--tc94-scrim) 32%, transparent) 78%,
      color-mix(in srgb, var(--tc94-scrim) 45%, transparent) 100%),
    linear-gradient(to top,
      color-mix(in srgb, var(--tc94-scrim) 65%, transparent),
      transparent 45%);
}

/* --------------------------------------------------------------------------
   3. Copy column
   -------------------------------------------------------------------------- */
.tc94-hero__inner {
  max-width: 44rem;
}

.tc94-hero__eyebrow {
  margin-bottom: var(--wp--preset--spacing--50);
}

/* The level is the owner's choice (h1 on the home page, h2 if the hero is ever
   reused under a real page title), so the size is pinned here rather than left
   to the element styles — both levels have to look identical. */
.tc94-hero .tc94-hero__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--display);
  font-weight: var(--wp--custom--weight--extrabold);
  line-height: var(--wp--custom--leading--tight);
  letter-spacing: var(--wp--custom--tracking--tight);
  color: var(--wp--custom--color--heading-on-dark);
}

/* Two ways to pick out a word in gold: italics, which the owner can type in
   the field as <em>you</em>, or the shared highlight class. */
.tc94-hero .tc94-hero__title em,
.tc94-hero .tc94-hero__title i,
.tc94-hero .tc94-hero__title .tc94-text-highlight {
  color: var(--wp--preset--color--highlight);
  font-style: normal;
}

.tc94-hero .tc94-hero__lede {
  margin-top: var(--wp--preset--spacing--60);
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.tc94-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--30);
  margin-top: var(--wp--preset--spacing--80);
}

/* --------------------------------------------------------------------------
   5. Reassurance row
   -------------------------------------------------------------------------- */
.tc94-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
  margin: var(--wp--preset--spacing--80) 0 0;
  padding: var(--wp--preset--spacing--60) 0 0;
  list-style: none;
  border-top: 1px solid var(--wp--custom--color--border-on-dark);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--custom--color--on-dark-muted);
}

.tc94-hero__meta li {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
}

.tc94-hero__meta .tc94-icon {
  color: var(--wp--preset--color--highlight);
}

/* --------------------------------------------------------------------------
   6. Editor placeholder — a brand-new hero is otherwise a blank dark stripe
   -------------------------------------------------------------------------- */
.tc94-hero--empty {
  padding: var(--wp--preset--spacing--90) var(--wp--custom--gutter);
  border: 1px dashed var(--wp--custom--alpha--white-20);
  border-radius: var(--wp--custom--radius--md);
  text-align: center;
}

.tc94-hero--empty p {
  margin: 0;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--custom--color--on-dark-muted);
}

/* --------------------------------------------------------------------------
   7. Narrow screens
   -------------------------------------------------------------------------- */
@media (max-width: 37.499rem) {
  .tc94-hero__actions > .tc94-btn {
    width: 100%;
  }

  .tc94-hero__meta {
    gap: var(--wp--preset--spacing--30);
  }
}