/* =============================================================
   Spartan Agency — Hero
   Full-bleed photo hero with dark overlay + centered white H1 +
   H3-scale subtitle. Renders on every page EXCEPT /contact (which
   drops directly to `.tx-h1--gold` on white; see contact-info.css).
   ============================================================= */

.tx-hero {
  position: relative;
  min-height: clamp(280px, 34vw, 380px);
  padding: var(--s-9) var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-on-dark);
  background: var(--surface-dark);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  isolation: isolate;
}

/* Dark overlay: subtle scrim so H1 stays legible over whatever photo
   the page picks. Kept at 40% so property photos still read as
   photography rather than a flat charcoal wash. */
.tx-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.45) 100%);
  z-index: 0;
}

.tx-hero > * { position: relative; z-index: 1; }

.tx-hero__h1 {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--on-plum);
  text-align: center;
  max-width: 20ch;
}

.tx-hero__sub {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--on-plum);
  text-align: center;
  margin-top: var(--s-3);
  max-width: 46ch;
}

/* Inline CTA overlaid on hero (used on /current-tenant for "Pay Online"). */
.tx-hero__cta {
  margin-top: var(--s-5);
}

/* Contact page variant: no photo, gold H1 on white, no overlay. */
.tx-hero--gold {
  background-color: var(--surface-content);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.78) 100%),
    var(--office-hero);
  background-size: cover;
  background-position: center 32%;
  background-repeat: no-repeat;
  color: var(--text);
  min-height: 0;
  padding-block: var(--s-8);
  align-items: flex-start;
}

.tx-hero--gold::before { content: none; }

/* Gold-on-white display heading. `--gold-2` (#A88320) is the darkest
   gold that still reads as gold and clears 3:1 on white for large
   text (WCAG 1.4.3); base `--gold` is ~2.1:1 and must never be used
   as text on light surfaces. */
.tx-hero--gold .tx-hero__h1 {
  color: var(--gold-2);
  text-align: left;
  max-width: none;
}

/* ---------- 2026 refresh: modern display variant ----------
   Opt-in modifier that promotes the hero H1 to the new
   --fs-display token (up to 54px @ 1440w) and adds a small
   uppercase eyebrow above the title. The default `.tx-hero`
   remains at --fs-hero (40px) so pages using the Hibu-clone
   composition don't shift. Contrast unchanged: white on the
   dark-scrim background hits >=8:1. */
.tx-hero--display {
  min-height: clamp(360px, 42vw, 520px);
}

.tx-hero--display .tx-hero__h1 {
  font-size: var(--fs-display);
  max-width: 22ch;
}

.tx-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);           /* gold on dark scrim: 5.28:1+ */
  margin-bottom: var(--s-3);
}