/* ═══════════════════════════════════════════════════════════════════
   NEW HERO — shared styles for the split layout (navy left · photo right).
   Used by index.html and each page hero.
   Pulls colors and fonts from style.css design tokens.
═══════════════════════════════════════════════════════════════════ */

/* ── NEW HERO LAYOUT ──
   Photo is full-bleed across the whole hero. A bottom-to-top navy gradient
   ONLY covers the lower portion of the hero where the text sits, so the
   text stays readable. The upper portion (where the face is) is fully clear. */
.new-hero {
  position: relative;
  width: 100%;
  /* Height scales with viewport WIDTH (not height) so the hero grows
     proportionally on wide screens, keeping the photo aspect ratio closer
     to natural and reducing the vertical crop. */
  min-height: clamp(640px, 62vw, 1200px);
  background: var(--color-ink);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

/* Bottom-to-top gradient overlay — readable text area at the bottom,
   clear photo at the top. Never solid navy across the full hero. */
.new-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 30%,
    rgba(23, 50, 96, 0.12) 42%,
    rgba(23, 50, 96, 0.32) 54%,
    rgba(23, 50, 96, 0.55) 66%,
    rgba(23, 50, 96, 0.76) 78%,
    rgba(23, 50, 96, 0.92) 90%,
    var(--color-ink) 100%
  );
  pointer-events: none;
}

.new-hero__text {
  padding: clamp(60px, 9vh, 100px) clamp(28px, 5vw, 72px) clamp(48px, 8vh, 80px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--color-ivory);
  position: relative;
  z-index: 10;
  background: transparent;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.new-hero__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  margin: 0 0 clamp(20px, 3.2vh, 32px) 0;
}

.new-hero__headline {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.6vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--color-ivory);
  margin: 0 0 clamp(22px, 3.4vh, 36px) 0;
}

.new-hero__rule {
  width: 60px;
  height: 2px;
  background: var(--color-gold-light);
  margin: 0 0 clamp(18px, 2.6vh, 28px) 0;
  border: none;
}

.new-hero__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.6;
  color: #F1ECDC;
  letter-spacing: 0.012em;
  max-width: 480px;
  margin: 0;
}
.new-hero__tagline span { display: block; }

/* ── PHOTO — full-bleed background covering the whole hero ── */
.new-hero__photo-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #1F3A6A;
}

/* No side gradient — the .new-hero::after vertical gradient handles it. */
.new-hero__photo-wrap::before {
  display: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 100%
  );
  z-index: 2;
  pointer-events: none;
  display: block;
}

.new-hero__photo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center 25%;
  display: block !important;
  opacity: 1;
  transition: opacity 0.8s ease;
}
.new-hero__photo.is-loaded { opacity: 1; }

/* ── Per-page photo positioning ── */

/* Rates — face is on the right of the lying-down photo. Shift down to show face. */
.new-hero[aria-label="Envelope page header"] .new-hero__photo {
  object-position: center 40%;
}

/* Travel — subject sits close to the right of the photo. Zoom slightly from
   the left to pull her body away from the right edge of the viewport. */
.new-hero[aria-label="Travel page header"] .new-hero__photo {
  transform: scale(1.12);
  transform-origin: 25% center;
  object-position: center 35%;
}

/* Contact — face is on the upper-left of the photo. Zoom in and anchor on
   her face so it lands centered in the viewport. */
.new-hero[aria-label="Contact page header"] .new-hero__photo {
  transform: scale(1.4);
  transform-origin: 30% 22%;
  object-position: center top;
}

/* Gallery mobile — face is at ~38% horizontal of the photo, near the top.
   No zoom — just shift the crop horizontally so the face stays in frame. */
@media (max-width: 820px) {
  .new-hero[aria-label="Gallery header"] .new-hero__photo {
    transform: none;
    object-position: 38% top;
  }
}

.new-hero__photo-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 100% at 50% 40%, transparent 35%, rgba(15,31,69,0.30) 85%, rgba(15,31,69,0.55) 100%),
    linear-gradient(180deg, rgba(15,31,69,0.18) 0%, rgba(15,31,69,0) 30%, rgba(15,31,69,0) 70%, rgba(15,31,69,0.18) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ── NAV — full-width on large screens, balanced edges ── */
.new-hero ~ .site-nav .nav-inner,
body:has(.new-hero) .nav-inner {
  max-width: none !important;
  width: 100% !important;
  padding-inline: clamp(24px, 3.5vw, 72px) !important;
}
body:has(.new-hero) .site-nav .nav-links {
  gap: clamp(20px, 2.4vw, 44px) !important;
}

/* ── MOBILE — text overlay on bottom of photo, gradient flips to vertical ── */
@media (max-width: 820px) {
  .new-hero {
    min-height: 88vh;
  }
  /* Vertical gradient: photo clear on top, navy under text at bottom */
  .new-hero::after {
    background: linear-gradient(
      180deg,
      transparent 0%,
      transparent 35%,
      rgba(23, 50, 96, 0.40) 55%,
      rgba(23, 50, 96, 0.85) 75%,
      var(--color-ink) 100%
    );
  }
  .new-hero__text {
    width: 100%;
    max-width: none;
    padding: clamp(48px, 7vh, 72px) clamp(24px, 6vw, 36px) clamp(56px, 9vh, 80px);
    justify-content: flex-end;
  }
  .new-hero__headline {
    font-size: clamp(2.05rem, 8vw, 3rem);
  }
  .new-hero__tagline {
    font-size: clamp(1rem, 3.6vw, 1.2rem);
  }

  /* ── Per-page mobile overrides for hero photo framing ──
     The desktop transforms above are too aggressive on a narrow viewport
     and crop the subject's face. Reset transform and anchor the photo
     so the face stays in frame on mobile. */

  /* Contact — face on the upper-left of the photo.
     Gentle zoom anchored on the face so it stays centered in the portrait viewport. */
  .new-hero[aria-label="Contact page header"] .new-hero__photo {
    transform: scale(1.15);
    transform-origin: 30% 25%;
    object-position: center top;
  }

  /* Rates / Envelope — face is at ~75% horizontal and ~40% vertical of the
     lying-down photo. Anchor exactly there so the face stays centered in the
     portrait viewport without any zoom. */
  .new-hero[aria-label="Envelope page header"] .new-hero__photo {
    object-position: 75% 40%;
  }

  /* Travel — keep subject centered, no zoom */
  .new-hero[aria-label="Travel page header"] .new-hero__photo {
    transform: none;
    object-position: center center;
  }
}