/* ==========================================================================
   SECTION 01 — HERO (approved)
   Phones (< 600px):   copy first, then the mobile photo crop below it.
   Tablets (600–1023): same stacked order, using the wider desktop photo.
   Desktop (>= 1024):  full-width photo, copy over a warm ivory fade on the left.
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: var(--header-h);     /* space for the fixed header */
  background-color: var(--color-ivory);
  overflow: hidden;
}

/* ---------- Photo ---------- */
.hero__media {
  position: relative;
  order: 2;                          /* photo below the copy on phones/tablets */
  aspect-ratio: 16 / 17;
}

.hero__media picture {
  position: absolute;                /* the box keeps its aspect ratio; the photo fills it */
  inset: 0;
}

.hero__img {
  width: 100%;
  height: 100%;
}

.hero__img {
  object-fit: cover;
  object-position: 50% 52%;          /* frames Dr. Sanmiguel from the hallway lights to his crossed arms */
}

/* Soft blend from the ivory background into the photo */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, var(--color-ivory) 0%, rgba(245, 241, 233, 0) 22%);
}

/* ---------- Copy ---------- */
.hero__inner {
  position: relative;
  z-index: 1;
  order: 1;
  padding-block: 2.25rem 2.5rem;
}

.hero__eyebrow {
  margin-bottom: 1.25rem;
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
}

.hero__title {
  font-size: clamp(2.875rem, 1rem + 3.9vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.012em;
  text-wrap: wrap;                   /* keep the approved line breaks ("Closer Than You / Think.") */
  color: var(--color-charcoal);
}

.hero__title-line { display: block; }

.hero__lead {
  max-width: 34rem;
  margin-top: 1.5rem;
  font-size: clamp(1rem, 0.88rem + 0.38vw, 1.1875rem);
  line-height: 1.65;
  color: var(--color-text-body);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.hero__location {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 1.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.hero__pin {
  flex: none;
  width: 0.8125rem;
  height: auto;
  margin-top: 0.1rem;
  fill: var(--color-bronze);
}

/* Phones: full-width buttons, stacked. Two side-by-side buttons (as drawn in
   the mobile mockup) only fit at ~12px text, which is too small to read and tap
   comfortably on a 360–390px screen. */
@media (max-width: 37.49em) {
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }

  /* Tighter vertical rhythm on phones so Dr. Sanmiguel's portrait
     appears within the first screen (approved refinement, 2026-10-13).
     Type sizes, copy and touch targets (48px buttons) are unchanged. */
  .hero__inner { padding-block: 1.5rem 1.25rem; }

  .hero__eyebrow { margin-bottom: 1rem; }

  .hero__lead {
    margin-top: 1.125rem;
    line-height: 1.55;
  }

  .hero__actions {
    gap: 0.625rem;
    margin-top: 1.5rem;
  }

  .hero__location { margin-top: 1.25rem; }

  /* Shorter ivory blend and a slightly lower crop, so the face sits
     higher in the frame and is never covered by the fade */
  .hero__media::after {
    background: linear-gradient(180deg, var(--color-ivory) 0%, rgba(245, 241, 233, 0) 12%);
  }

  .hero__img { object-position: 50% 57%; }
}

/* ==========================================================================
   TABLET (600–1023px)
   ========================================================================== */
@media (min-width: 37.5em) {
  .hero__media { aspect-ratio: 3 / 2; }

  .hero__img { object-position: 78% 15%; }

  .hero__inner { padding-block: 3.5rem 3rem; }

  .hero__title { font-size: clamp(3.25rem, 1rem + 4.6vw, 4rem); }

  .hero__eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.3em;
  }

  .hero__actions { gap: 1rem; margin-top: 2.25rem; }

  .hero__location { letter-spacing: 0.2em; }
}

/* ==========================================================================
   DESKTOP (>= 1024px)
   ========================================================================== */
@media (min-width: 64em) {
  .hero {
    display: block;
    /* ~1.95:1, matching the approved mockup; never taller than the screen */
    height: clamp(40rem, 51.25vw, min(100svh, 60rem));
    padding-top: 0;
  }

  .hero__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }

  /* Full-width photo anchored to the top; on narrower windows the left
     (empty hallway) side is cropped first so the doctor stays in view. */
  .hero__img { object-position: 72% 0%; }

  /* Warm ivory fade on the left for text legibility + light top fade for the nav */
  .hero__media::after {
    background:
      linear-gradient(180deg, rgba(245, 241, 233, 0.78) 0%, rgba(245, 241, 233, 0.4) 11%, rgba(245, 241, 233, 0) 20%),
      linear-gradient(90deg,
        rgba(245, 241, 233, 0.94) 0%,
        rgba(245, 241, 233, 0.86) 30%,
        rgba(245, 241, 233, 0.5) 45%,
        rgba(245, 241, 233, 0) 59%);
  }

  .hero__inner {
    display: flex;
    align-items: center;
    height: 100%;
    padding-block: var(--header-h) 1.5rem;
  }

  .hero__content { max-width: 44rem; }

  .hero__title { font-size: clamp(3.5rem, 1rem + 3.6vw, 4.25rem); }

  .hero__eyebrow { margin-bottom: 1.75rem; }

  .hero__lead { margin-top: 1.75rem; }

  .hero__actions { margin-top: 2.25rem; }

  .hero__location { margin-top: 2rem; }
}

/* Mid-size desktops / landscape tablets (1024–1199px)
   Here the photo has to be cropped by height, which makes the doctor larger
   and pushes him into the text. Instead: the header gets a solid ivory bar,
   the photo sits below it at its native 16:9 ratio (no crop), and the copy
   is slightly smaller so it stays clear of the portrait. */
@media (min-width: 64em) and (max-width: 74.99em) {
  :root { --header-h: 5rem; }

  .hero { height: calc(var(--header-h) + 56.25vw); }

  .hero__media { inset: var(--header-h) 0 0 0; }

  .hero__media::after {
    background: linear-gradient(90deg,
      rgba(245, 241, 233, 0.95) 0%,
      rgba(245, 241, 233, 0.9) 36%,
      rgba(245, 241, 233, 0.5) 50%,
      rgba(245, 241, 233, 0) 62%);
  }

  .hero__inner { padding-block: calc(var(--header-h) + 1.5rem) 1.5rem; }

  .hero__content { max-width: 30rem; }

  .hero__eyebrow { margin-bottom: 1.25rem; }

  .hero__title { font-size: 3.25rem; }

  .hero__lead {
    max-width: 27rem;
    margin-top: 1.25rem;
    font-size: 1rem;
  }

  .hero__actions { gap: 0.75rem; margin-top: 1.75rem; }

  .hero__actions .btn {
    min-height: 2.75rem;
    gap: 0.85rem;
    padding: 0.6rem 1.15rem;
    font-size: 0.875rem;
  }

  .hero__location { margin-top: 1.5rem; }
}