/* css/hero.css — Hero Sections */

/* Hero section — full-viewport-width navy background */
.hero-split {
  background: var(--color-navy);
  width: 100%;
  overflow: hidden; /* clips overlap beyond section edges */
}

/* Inner grid — constrained to nav width, centered */
.hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 55% 45%;
  min-height: clamp(520px, 82vh, 720px); /* per AGENTS.md standard split hero rule */
  position: relative;
}

.hero-text-side {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 3rem 3rem 2rem;
  background: var(--color-navy);
  z-index: 2;
}

.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center top; z-index: 0; }
.hero-image-side {
  position: relative;
  overflow: hidden;
  background: var(--color-navy);
  display: flex;
  align-items: stretch; /* image fills full column height */
  z-index: 1;
}
.hero-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 5%; /* top-biased: shows head + generous shoulder area */
  display: block;
}

.hero-h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.2vw, 2.5rem);
  font-weight: 500;
  color: var(--color-gold);

  line-height: 1.15;
  margin-bottom: 1rem;
}

.hero-lead {
  color: var(--color-text-light);
  font-size: clamp(0.8rem, 1.1vw, 0.95rem);
  line-height: 1.7;
  margin-bottom: 0.6rem;
  /* no max-width — text fills the available column width naturally */
}

.hero-cta { margin-top: 1.5rem; }
.hero-cta a {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  color: var(--color-gold);

  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: gap var(--transition-fast);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.hero-cta a:hover { gap: 0.75rem; }
.hero-cta a::before { content: '»\00a0'; }

/* Compact hero for service pages */
.hero-compact { min-height: clamp(280px, 45vh, 460px); background-size: cover; background-position: center; position: relative; display: flex; align-items: center; }
.hero-compact::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,46,84,0.88) 0%, rgba(0,46,84,0.65) 60%, rgba(0,46,84,0.2) 100%); }
.hero-compact-content { position: relative; z-index: 2; padding: 3rem 2rem; max-width: var(--max-width); margin: 0 auto; width: 100%; }
.hero-compact-content h1 { color: var(--color-gold); font-size: var(--text-3xl); font-weight: 500; margin-bottom: 1rem; }
.hero-compact-content .lead { color: var(--color-text-light); max-width: 520px; margin-bottom: 1.5rem; }

@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: auto;
  }
  .hero-split { min-height: auto; aspect-ratio: unset; }
  .hero-text-side { padding: 2.5rem 1.5rem; }
  .hero-image-side { height: 55vw; max-height: 300px; }
  .hero-portrait { object-position: 50% 5%; }
}
@media (max-width: 600px) {
  .hero-text-side { padding: 2rem 1rem; }
  .hero-h1 { font-size: 1.8rem; }
}