/* ---------- Home page: hero and practice ---------- */

/* Split out of components.css to keep it under the file-size bar. Loads
   after it (the :app bundle is alphabetical) but overrides nothing there. */

/* overflow-x: clip because 100vw (inside --bleed) counts the scrollbar, so
   the bled photo overshoots under it and would otherwise add a horizontal
   scroll. clip, unlike hidden, doesn't make .hero a scroll container. */
.hero {
  border-bottom: 1px solid var(--linen);
  overflow-x: clip;
}

/* Held to the same measure as .wrap so the hero copy sits on the same left
   edge as the header lockup and the footer. A full-bleed hero would put the
   headline 50px to the left of the logo above it. Only the photo bleeds. */
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: var(--maxw);
  margin: 0 auto;
}

/* On mobile the copy and photo share one grid cell. The square photo (100vw
   tall) opens the hero with her face clear, and the copy starts 68vw down,
   over the bottom of the photo. The fade turns solid paper where the photo
   ends, so the photo melts into the page instead of stopping at a hard edge. */
.hero__content {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  padding: 68vw 20px 48px;
  background: linear-gradient(
    to bottom,
    transparent 54vw,
    color-mix(in srgb, var(--paper) 80%, transparent) 72vw,
    var(--paper) 100vw
  );
}

.hero .display {
  margin-bottom: 16px;
}

.hero .body-l {
  max-width: 30em;
}

/* The three "find care" choices. Full-width pills rather than chips: the
   labels run up to six words, and a stack gives each one a large, equal
   tap target. Paper fill keeps them legible over the mobile photo fade. */
.hero__choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
}

/* The call request joins the care-path stack at the same 8px rhythm. */
.hero__connect {
  margin-top: 8px;
}

.hero__choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  background-color: var(--paper);
  border: 1px solid var(--sand);
  border-radius: var(--r-pill);
  color: var(--cb-700);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  text-decoration: none;
}

/* Decorative, so screen readers don't announce "right arrow" per link. */
.hero__choice::after {
  content: "\2192" / "";
  flex: none;
  color: var(--cb-400);
}

.hero__choice:hover {
  background-color: var(--cb-100);
  border-color: var(--cb-400);
}

/* The call request shares the pill's size and edges; the brand fill keeps
   it the primary action, as .btn was. */
.hero__choice--primary,
.hero__choice--primary::after {
  color: var(--cream);
}

.hero__choice--primary {
  background-color: var(--cb-600);
  border-color: var(--cb-600);
}

.hero__choice--primary:hover {
  background-color: var(--cb-700);
  border-color: var(--cb-700);
}

/* Under its own centered heading the CTA reads as a button, not a fourth row
   of the care-path list, so it centers and drops the list's arrow. */
.hero__choice--primary {
  justify-content: center;
}

.hero__choice--primary::after {
  content: none;
}

/* Lets the img inside be the grid item, so the picture wrapper doesn't
   change the layout. */
.hero__picture {
  display: contents;
}

/* Square at the top of the cell. Stretching it to the full hero height
   would zoom in until the skyline sat behind the text. */
.hero__image {
  grid-area: 1 / 1;
  align-self: start;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 0%;
}

/* On mobile the hero copy already overlays the photo's bottom through its
   paper fade, so neither the logo nor the tagline can show there. Desktop
   only. */
.hero__lockup,
.hero__caption {
  display: none;
}

/* ---------- Practice (home) ---------- */

/* The map bleeds to the left edge of the viewport while the copy keeps the
   .wrap gutters. Map first in the DOM so it sits left when side by side. */
.practice__grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: var(--maxw);
  margin: 0 auto;
}

/* On mobile the map and copy share one grid cell, like the hero: the map
   opens the section and the heading sits over its empty western terrain,
   so the map costs no scroll height beyond its own. */
.practice__map {
  grid-area: 1 / 1;
  margin: 0;
}

/* The source is centered on Pittsburgh with the offices in its middle third
   and filler terrain on every side. Every layout crops it with centered
   cover, so narrower boxes lose terrain, never offices. */
.practice__map img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 50%;
  /* Fades the bottom edge into the page, below the McMurray star. */
  mask-image: linear-gradient(to bottom, #000 88%, transparent);
}

/* The 4:3 map is 75vw tall. Starting the copy 48px short of that lands the
   heading on the map's bottom edge and the list just below it. */
.practice__body {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  padding: calc(75vw - 48px) 20px var(--space-section);
}

/* Nothing sits above this heading, so it steps up a size to carry the section. */
.practice__body h2 {
  font-size: var(--size-h1);
}

/* ---------- Breakpoints (home) ---------- */

/* 768px and up: tablet */
@media (min-width: 768px) {
  .hero__grid {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  /* Side by side from here up, so undo the mobile overlay. */
  /* Bleeds left like the photo bleeds right, so the cell spans the window
     edge to the photo and the copy centers in what reads as the left half. */
  .hero__content {
    grid-area: 1 / 1;
    background: none;
    padding: 56px 32px;
    margin-left: calc(-1 * var(--bleed));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  /* One shared width keeps every child on the same left edge once centered. */
  .hero__content > * {
    width: min(100%, var(--hero-copy-w));
  }

  /* contain: size makes the row ignore the photo's intrinsic height (which
     would stretch the hero to twice the height it should be), so the row is
     sized by the copy or min-height, whichever is taller, and the photo
     stretches to fill it. A fixed height left a gap under the photo once the
     copy outgrew it. */
  /* Runs to the right edge of the viewport, mirroring the map below it. */
  /* Placed explicitly: the picture wrapper is display: contents, so its
     <source> would otherwise take the second column by auto-placement. */
  .hero__image {
    grid-area: 1 / 2;
    align-self: stretch;
    object-position: 50% 50%;
    contain: size;
    height: auto;
    min-height: 420px;
    aspect-ratio: auto;
    width: calc(100% + var(--bleed));
    max-width: none;
    margin-right: calc(-1 * var(--bleed));
  }

  /* The logo and tagline stack as one lockup, pinned to the bottom of the
     photo's grid cell. It mirrors .hero__image's right bleed so the lockup
     centers on the photo's centerline, not the grid cell's, where it would
     read as off-center by half the bleed. */
  .hero__lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-area: 1 / 2;
    align-self: end;
    z-index: 1;
    margin: 0 calc(-1 * var(--bleed)) 0 0;
    width: calc(100% + var(--bleed));
    max-width: none;
    padding: 0 24px 24px;
    text-align: center;
  }

  /* Cream, like the tagline below it, and carrying the same pair of shadows
     so the two read as one lockup over the photo. Circle mark only: at
     footer size the stacked logo's wordmark turns to noise over a photo. */
  .hero__lockup img {
    width: 96px;
    height: auto;
    margin-bottom: 12px;
    filter: drop-shadow(0 1px 3px rgba(33, 27, 26, 0.55))
            drop-shadow(0 2px 16px rgba(33, 27, 26, 0.4));
  }

  .hero__caption {
    display: block;
    margin: 0;
    font-family: var(--serif);
    font-weight: 500;
    font-size: var(--size-h2);
    line-height: 1.2;
    color: var(--cream);
    text-shadow: 0 1px 3px rgba(33, 27, 26, 0.55), 0 2px 16px rgba(33, 27, 26, 0.4);
  }

  /* minmax(0, ...) lets the columns shrink below the image's intrinsic width. */
  .practice__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }

  /* The copy sets the row height and the map fills it, like the hero photo.
     Absolute positioning keeps the image's intrinsic height out of the row
     sizing. The negative margin pulls the map past the centered --maxw
     column to the viewport's left edge. */
  .practice__map {
    grid-area: auto;
    position: relative;
    margin-left: calc(-1 * var(--bleed));
  }

  .practice__map img {
    position: absolute;
    inset: 0;
    height: 100%;
    mask-image: none;
  }

  .practice__body {
    grid-area: auto;
    padding: var(--space-section) 32px var(--space-section) 48px;
  }
}

/* 1280px and up: desktop */
@media (min-width: 1280px) {
  .hero__content {
    padding: 64px 40px;
  }

  .hero__image {
    min-height: 640px;
  }

  .practice__body {
    padding: var(--space-section) 40px var(--space-section) 64px;
  }
}