/* ==========================================================================
   Augusta Pediatric Associates — the About page

   Three numbered sections, each one printed on a card with a photograph
   behind it: the nine physicians, the building on Augusta West Parkway, and
   the front desk.

   Each card is inset from the edge of the page with white around it and soft
   rounded corners, so the photograph reads as a plate the section is printed
   on rather than as a background the page happens to have.

   The type sits on the LEFT of the card and the scrim is weighted the same
   way, which is what keeps this simple. There is no even dim fighting the
   whole picture: the left third is dark enough to write on, the right is
   nearly the photograph as shot, and the subject is framed to sit in it.

   No JavaScript, no hover, nothing hidden. Every word is readable the moment
   it is on screen.

   Measures are in `rem` throughout, never `em`. The caption and the small type
   are set at 13px, so an `em` measure there resolves against that rather than
   the root and lands ~130px short of the column it is supposed to line up
   with.
   ========================================================================== */

:root {
  --apa-about-red:   #d5344b;
  --apa-about-navy:  #224d7b;
  --apa-about-body:  #45536d;
}

.apa-about {
  background: #fff;
  padding: 8px 0 24px;
}

/* --------------------------------------------------------------------------
   1 · A section
   --------------------------------------------------------------------------
   The outer element is only the white space: the page gutter, the width the
   cards are allowed to reach, and the air between one section and the next.
   -------------------------------------------------------------------------- */

.apa-sec {
  max-width: 1460px;
  margin: 0 auto;
  padding: 34px 22px;
}

.apa-sec-num {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--apa-about-red);
  line-height: 1;
}

.apa-sec-num::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 14px;
  background: currentColor;
}

.apa-sec-body { max-width: 42rem; }

.apa-sec h2 {
  margin: 0 0 26px;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .005em;
  color: var(--apa-about-navy);
}

.apa-sec p {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.78;
  color: var(--apa-about-body);
}

.apa-sec p:last-child { margin-bottom: 0; }

.apa-sec p strong {
  font-weight: 600;
  color: var(--apa-about-navy);
}

/* the anchors sit under a fixed header */
.apa-sec[id] { scroll-margin-top: 100px; }

/* --------------------------------------------------------------------------
   2 · The card
   --------------------------------------------------------------------------
   The photograph is set on the card itself rather than on a child, so there
   is one box to round and one box to clip. `--apa-card-img` and
   `--apa-card-pos` are written per section in the markup, because which part
   of a photograph to keep is a decision about that photograph and belongs
   next to it.
   -------------------------------------------------------------------------- */

.apa-card {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background-color: #16283f;      /* what shows while the photograph loads */
  background-image: var(--apa-card-img);
  background-size: cover;
  background-position: var(--apa-card-pos, center);
  box-shadow: 0 22px 54px rgba(9, 24, 41, .20);
}

/* 2a · the scrim, weighted to the type
   Left-weighted rather than even: an even dim has to be heavy enough for the
   worst pixel under the text, which means flattening the whole photograph to
   protect a third of it. This way the picture keeps its light. */
.apa-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
              rgba(9, 24, 41, .88) 0%,
              rgba(9, 24, 41, .80) 32%,
              rgba(9, 24, 41, .52) 58%,
              rgba(9, 24, 41, .26) 82%,
              rgba(9, 24, 41, .20) 100%);
}

/* z-index, not source order: `::after` is painted after the element's in-flow
   children, so without this the scrim would sit on top of the type rather than
   under it. */
.apa-card-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 54px 30px;
}

/* the type on a card is white, and carries a shadow so it holds over the
   lighter end of the gradient if a photograph is ever swapped for a brighter
   one */
.apa-card h2,
.apa-card p {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 0 18px rgba(0, 0, 0, .34);
}

.apa-card p strong { color: #fff; }

.apa-card .apa-sec-num { color: #fff; }

/* --------------------------------------------------------------------------
   3 · Wide
   --------------------------------------------------------------------------
   One breakpoint. The number moves out of the flow into its own column, and
   the cards take a height of their own so the photographs have room to be
   photographs.
   -------------------------------------------------------------------------- */

@media screen and (min-width: 62em) {
  .apa-sec {
    padding: 38px 34px;
  }

  .apa-card-inner {
    grid-template-columns: 4.5rem minmax(0, 42rem);
    gap: 0 3.5rem;
  }

  .apa-sec-num {
    padding-top: 10px;              /* optically level with the cap height */
    text-align: right;
  }

  .apa-sec-num::after { margin-left: auto; }

  /* Content to the left, picture to the right. The column pair is left
     aligned inside the card rather than centred, so the type stays in the
     dark end of the gradient at every width — no measuring, no media query
     per photograph. */
  .apa-card-inner {
    justify-content: start;
    align-content: center;
    min-height: clamp(440px, 42vw, 600px);
    padding: 76px 72px;
  }
}

/* --------------------------------------------------------------------------
   4 · Motion preferences — nothing to disable, but the shadow is a lot of
   paint on a low-powered machine, so it goes with reduced motion off.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .apa-card { box-shadow: 0 10px 26px rgba(9, 24, 41, .18); }
}