/*
 * Fortico Block — hero.css
 *
 * Scoped to .hero — no styles leak out of this block.
 * All sizing, colour and spacing via tokens.
 * One layout breakpoint only (48rem) for the inner content grid.
 * Everything else is fluid.
 */

/* ── Block shell ─────────────────────────────────────────────────────────────── */
.hero {
  position:        relative;
  padding-block:   var(--space-2xl);
  overflow:        hidden;

  /* Background image — set via inline CSS custom property from PHP */
  background-color:  var(--color-bg);
  background-image:  var(--hero-bg-image, none);
  background-size:   cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ── Height variants ─────────────────────────────────────────────────────────── */
.hero[data-height="viewport"] {
  min-block-size: 100svh;
  display:        flex;
  align-items:    center;
}

.hero[data-height="tall"] {
  min-block-size: 75svh;
  display:        flex;
  align-items:    center;
}

.hero[data-height="auto"] {
  min-block-size: 0;
}

/* ── Overlay (image background only) ─────────────────────────────────────────── */
.hero__overlay {
  position:   absolute;
  inset:      0;
  background: rgb(0 0 0 / var(--hero-overlay-opacity, 0.5));
  z-index:    var(--z-raised);
  pointer-events: none;
}

/* ── Inner container ─────────────────────────────────────────────────────────── */
.hero .container {
  position: relative;
  z-index:  calc(var(--z-raised) + 1);  /* Above overlay */
}

.hero__inner {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-md);
}

/* ── Layout variants ─────────────────────────────────────────────────────────── */
.hero[data-layout="centred"] .hero__inner {
  align-items: center;
  text-align:  center;
  max-width:   52rem;
  margin-inline: auto;
}

.hero[data-layout="centred"] p {
  max-width: 48ch;
  margin-inline: auto;
}

.hero[data-layout="left"] .hero__inner {
  align-items: flex-start;
  text-align:  left;
  max-width:   44rem;
}

/* ── Eyebrow ─────────────────────────────────────────────────────────────────── */
.hero__eyebrow {
  font-family:    var(--font-body);
  font-size:      var(--text-sm);
  font-weight:    var(--font-weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color:          var(--color-accent);
  margin:         0;
  max-width:      none;
}

/* Override for dark surfaces */
[data-surface="dark"] .hero__eyebrow,
[data-bg="image"] .hero__eyebrow {
  color: var(--color-highlight);
}

/* ── Heading ─────────────────────────────────────────────────────────────────── */
.hero__heading {
  font-size:   var(--text-4xl);
  font-weight: var(--font-weight-black);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
  color:       var(--color-heading);
  margin:      0;
  text-wrap:   balance;
}

/* ── Subtext ─────────────────────────────────────────────────────────────────── */
.hero__subtext {
  font-size:   var(--text-lg);
  line-height: var(--leading-relaxed);
  color:       var(--color-text-muted);
  margin:      0;
}

[data-surface="dark"] .hero__subtext,
[data-bg="image"] .hero__subtext {
  color: rgb(255 255 255 / 0.75);
}

/* ── Actions ─────────────────────────────────────────────────────────────────── */
.hero__actions {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-sm);
  margin-block-start: var(--space-xs);
}

.hero[data-layout="centred"] .hero__actions {
  justify-content: center;
}

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
/*
 * .btn is a global pattern. Defined here because it's first used in this block.
 * Will move to base.css or a dedicated buttons.css once second block needs it.
 */
.btn {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-xs);
  padding:         var(--space-xs) var(--space-lg);
  font-family:     var(--font-body);
  font-size:       var(--text-base);
  font-weight:     var(--font-weight-semibold);
  line-height:     1;
  text-decoration: none;
  border-radius:   var(--radius-full);
  transition:      background-color var(--transition-base),
                   color var(--transition-base),
                   transform var(--transition-fast),
                   box-shadow var(--transition-base);
  cursor:          pointer;
  white-space:     nowrap;
}

.btn:focus-visible {
  outline:        2px solid var(--color-primary);
  outline-offset: 3px;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background-color: var(--color-primary);
  color:            var(--color-text-inverse);
}

.btn--primary:hover {
  background-color: var(--color-primary-hover);
  color:            var(--color-text-inverse);
  box-shadow:       var(--shadow-md);
}

.btn--secondary {
  background-color: transparent;
  color:            var(--color-primary);
  box-shadow:       inset 0 0 0 2px currentColor;
}

.btn--secondary:hover {
  background-color: var(--color-primary);
  color:            var(--color-text-inverse);
}

/* Button overrides on dark surfaces */
[data-surface="dark"] .btn--secondary,
[data-bg="image"] .btn--secondary {
  color:     var(--color-text-inverse);
  box-shadow: inset 0 0 0 2px var(--color-text-inverse);
}

[data-surface="dark"] .btn--secondary:hover,
[data-bg="image"] .btn--secondary:hover {
  background-color: var(--color-text-inverse);
  color:            var(--color-primary);
}