/* ---------- 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: 10px;
  margin-top: 24px;
}

.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);
}

/* Scheduling shares the pill's size and edges so the stack reads as one
   set; 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);
}

/* 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%;
}

/* ---------- 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));
  }

  /* 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;
  }
}