/* styles/hero.css — Hero section.

   Directive §3A: a two-panel hero on a warm light ground. The approved
   photograph occupies roughly 45–50% of the hero on desktop and sits beside the
   copy rather than underneath it, so no dark scrim is needed to keep the words
   readable. On mobile the panels stack and the frame tightens to a portrait crop
   around the chest and shoulders. */

.hero {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
      align-items: center;
      gap: clamp(var(--space-8), 4vw, var(--space-16));
      width: min(var(--content-wide), 100% - var(--space-8));
      margin-inline: auto;
      min-height: min(100svh, 940px);
      padding-block: clamp(var(--space-24), 14vh, var(--space-32)) var(--space-20);
      background: transparent;
      overflow: visible;
    }

/* ─── Photograph ─────────────────────────────────────────── */
    .hero-image-panel {
      position: relative;
      grid-column: 2;
      grid-row: 1;
    }

.hero-image-panel .image-frame {
      position: relative;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: var(--shadow-lg);
    }

/* A single hairline of gold instead of a heavy border. */
    .hero-image-panel .image-frame::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 18px;
      border: 1px solid var(--color-gold-dim);
      pointer-events: none;
    }

.hero-photo {
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 3.05;
      object-fit: cover;
      object-position: 50% 30%;
      display: block;
    }

/* ─── Copy ───────────────────────────────────────────────── */
    .hero-content-panel {
      grid-column: 1;
      grid-row: 1;
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

.hero-eyebrow {
      font-family: var(--font-body);
      font-size: var(--text-xs);
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--color-gold);
      margin-bottom: var(--space-5);
    }

.hero-title {
      font-family: var(--font-display);
      font-size: clamp(2.9rem, 6.2vw, 5.6rem);
      font-weight: 300;
      line-height: 0.98;
      letter-spacing: -0.02em;
      color: var(--color-text);
      margin-bottom: var(--space-5);
    }

.hero-title em { font-style: italic; color: var(--color-gold-light); display: block; }

.hero-role {
      font-family: var(--font-body);
      font-size: var(--text-sm);
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--color-text-muted);
      margin-bottom: var(--space-4);
    }

/* A short gold rule between the role line and the tagline. */
    .hero-role::after {
      content: '';
      display: block;
      width: 72px;
      height: 1px;
      margin-top: var(--space-5);
      background: linear-gradient(to right, var(--color-gold), transparent);
    }

.hero-tagline {
      font-family: var(--font-display);
      font-size: var(--text-lg);
      font-style: italic;
      font-weight: 300;
      letter-spacing: 0.01em;
      color: var(--color-text-muted);
      margin-bottom: var(--space-8);
      max-width: 26ch;
    }

.hero-actions {
      display: flex;
      gap: var(--space-3);
      flex-wrap: wrap;
      align-items: center;
    }

.hero-actions--stack { flex-direction: row; flex-wrap: wrap; gap: var(--space-3); }

.hero-scroll {
      position: absolute;
      bottom: var(--space-4);
      left: 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: var(--space-2);
      color: var(--color-text-faint);
      font-size: 0.6rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      animation: none;
    }

.hero-scroll svg { width: 16px; height: 16px; stroke: var(--color-gold); }

.hero-text-mobile-only { display: none; }

/* ─── Tablet ─────────────────────────────────────────────── */
    @media (max-width: 900px) {
      .hero {
        grid-template-columns: 1fr;
        gap: var(--space-8);
        min-height: 0;
        padding-block: calc(var(--space-20) + 32px) var(--space-16);
        text-align: left;
      }

      .hero-image-panel { grid-column: 1; grid-row: 1; }
      .hero-content-panel { grid-column: 1; grid-row: 2; }

      /* Tighter portrait crop on small screens — chest and shoulders. */
      .hero-photo {
        aspect-ratio: 4 / 3.4;
        object-position: 42% 26%;
      }

      .hero-scroll { display: none; }
    }

@media (max-width: 560px) {
      .hero { padding-block: calc(var(--space-16) + 32px) var(--space-12); }
      .hero-photo { aspect-ratio: 1 / 1; object-position: 42% 24%; }
      .hero-title { font-size: clamp(2.5rem, 12vw, 3.4rem); }
      .hero-tagline { font-size: var(--text-base); max-width: none; }
      .hero-actions > * { flex: 1 1 auto; text-align: center; justify-content: center; }
    }

@media (prefers-reduced-motion: reduce) {
      .hero-scroll { animation: none; }
    }