/* Phase 5C-01 — Hero and headline surface cohesion
   Purpose: make non-home heroes, archive heroes and article heroes read as one Telstar system. */
:root {
  --td-hero-background: radial-gradient(circle at 84% 18%, rgba(44, 166, 164, 0.18), transparent 32rem), linear-gradient(135deg, #071a32 0%, #0B2545 58%, #12355d 100%);
  --td-hero-panel: rgba(255, 255, 255, 0.072);
  --td-hero-panel-border: rgba(255, 255, 255, 0.145);
  --td-hero-panel-shadow: 0 24px 70px rgba(0, 16, 38, 0.18);
  --td-soft-grid: radial-gradient(circle, rgba(244, 246, 248, 0.34) 1px, transparent 1.25px);
}

.hero:not(.hero--home),
.article-hero,
.article-hero--editorial,
.archive-hero,
.archive-hero--editorial {
  position: relative;
  background: var(--td-hero-background) !important;
  color: #FFFFFF;
  overflow: hidden;
}

.hero:not(.hero--home)::before,
.article-hero::before,
.article-hero--editorial::before,
.archive-hero::before,
.archive-hero--editorial::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--td-soft-grid);
  background-size: 42px 42px;
  opacity: 0.115;
}

.hero:not(.hero--home) .hero__grid {
  opacity: 0.075;
  background-size: 42px 42px;
}

.hero--inner,
.article-hero,
.archive-hero--editorial {
  padding-top: clamp(4.25rem, 7.5vw, 6.75rem);
  padding-bottom: clamp(3.6rem, 6.8vw, 5.75rem);
}

.hero--inner .hero__inner,
.archive-hero__inner--editorial {
  gap: clamp(1.6rem, 4.2vw, 4rem);
  align-items: center;
}

.hero--inner .hero__copy,
.article-hero__inner,
.archive-hero__copy {
  max-width: 860px;
}

.hero--inner .title-block__eyebrow,
.article-hero__meta,
.archive-hero__aside span,
.archive-hero__lead + span {
  color: var(--telstar-teal-soft);
}

.hero--inner .title-block__title,
.article-hero h1,
.archive-hero--editorial h1 {
  max-width: 880px;
  color: #FFFFFF;
  letter-spacing: -0.058em;
}

.hero--inner .title-block__subtitle,
.article-hero__excerpt,
.archive-hero__lead,
.archive-hero__description {
  max-width: 760px;
  color: rgba(244, 246, 248, 0.82);
  line-height: 1.58;
}

.hero--inner .telstar-cta-group {
  margin-top: clamp(1.35rem, 2vw, 1.8rem);
}

.hero-route-panel,
.hero-insights-panel,
.hero-minimal-panel,
.archive-hero__aside,
.hero--inner .hero-cards .telstar-stage-card,
.hero--inner .hero-cards .telstar-route-card,
.hero--inner .telstar-card--dark {
  border: 1px solid var(--td-hero-panel-border);
  border-radius: var(--telstar-radius-lg);
  background: var(--td-hero-panel);
  box-shadow: var(--td-hero-panel-shadow);
  backdrop-filter: blur(14px);
}

.hero-route-card,
.hero-insights-card {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.048);
  border-radius: var(--telstar-radius-sm);
}

.hero-route-card__label,
.hero-insights-card__label,
.hero-route-panel__eyebrow,
.hero-insights-panel__eyebrow,
.hero-minimal-panel__label {
  color: var(--telstar-teal-soft);
}

.hero-route-card__title,
.hero-insights-card__title,
.hero-route-panel__title,
.hero-insights-panel__title {
  color: #FFFFFF;
}

@media (max-width: 980px) {
  .hero--inner,
  .article-hero,
  .archive-hero--editorial {
    padding-top: clamp(3.2rem, 9vw, 4.6rem);
    padding-bottom: clamp(2.85rem, 7.5vw, 4rem);
  }

  .hero--inner .hero__inner,
  .archive-hero__inner--editorial {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .hero-route-panel,
  .hero-insights-panel,
  .archive-hero__aside {
    max-width: none;
    margin-left: 0;
  }
}