/* Hero brand visual + responsive refinements. */

/* Replace the CSS placeholder stage with the actual brand visual.
   The dark overlay keeps the left-side copy readable while preserving
   the two performers and dummy-head microphone on the right. */
.hero {
  background:
    linear-gradient(90deg,
      rgba(9,8,13,.97) 0%,
      rgba(9,8,13,.91) 24%,
      rgba(9,8,13,.72) 48%,
      rgba(9,8,13,.34) 72%,
      rgba(9,8,13,.22) 100%),
    linear-gradient(180deg,
      rgba(9,8,13,.12) 0%,
      rgba(9,8,13,.08) 62%,
      rgba(9,8,13,.46) 100%),
    url("/assets/images/hero/hero-brand-visual.png") center center / cover no-repeat;
}

/* The generated image now supplies the performers and microphone. */
.hero-glow,
.hero-stage {
  display: none;
}

.hero-content {
  max-width: 820px;
}

@media (max-width: 980px) and (min-width: 681px) {
  /* Keep the three experience steps vertically aligned even when
     individual headings wrap to a different number of lines. */
  .flow-step h3 {
    min-height: 3.05em;
    display: flex;
    align-items: flex-start;
  }

  /* There is enough horizontal room in landscape orientation to show
     all three archive cards. Do not intentionally hide the third one. */
  .archive-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .archive-card:last-child {
    display: block;
  }

  .archive-card h3 {
    font-size: 1.08rem;
    line-height: 1.4;
  }

  .archive-card p {
    font-size: .72rem;
  }
}

@media (max-width: 980px) and (min-width: 681px) and (orientation: landscape) {
  /* Landscape phones keep using the wide hero visual. */
  .hero {
    background-position: 57% center;
  }

  .hero-content {
    max-width: 700px;
  }
}

@media (max-width: 680px) and (orientation: portrait) {
  /* Portrait phones use a dedicated vertical composition so both
     performers and the binaural microphone can remain visible. */
  .hero {
    background:
      linear-gradient(180deg,
        rgba(9,8,13,.34) 0%,
        rgba(9,8,13,.28) 34%,
        rgba(9,8,13,.48) 62%,
        rgba(9,8,13,.94) 100%),
      url("/assets/images/hero/hero-brand-visual-vertical.png") 64% center / cover no-repeat;
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(90deg,
      rgba(9,8,13,.58) 0%,
      rgba(9,8,13,.28) 72%,
      rgba(9,8,13,.16) 100%);
  }

  .hero-content,
  .scroll-cue {
    position: relative;
    z-index: 3;
  }

  .desktop-break {
    display: none;
  }
}

@media (max-width: 680px) and (orientation: landscape) {
  /* Very narrow landscape phones continue to use the wide visual. */
  .hero {
    background-position: 57% center;
  }

  .desktop-break {
    display: none;
  }
}