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

   The group portrait, which used to sit in the middle of the page as a small
   shadowed inset, is now the hero: full width, given room, with the heading
   written across the bottom of it.

   Then one section heading, then the nine doctors. Each card ends with its own
   invitation — "Meet Dr. Hanna" rather than a generic "read more" — and lifts
   very slightly when you point at it.

   Measures are in `rem`, never `em`: the small type on this page is set below
   16px, and an `em` measure there resolves against that rather than the root.
   ========================================================================== */

:root {
  --apa-phys-red:   #d5344b;
  --apa-phys-navy:  #224d7b;
  --apa-phys-sky:   #4987c6;
}

/* --------------------------------------------------------------------------
   1 · The hero
   --------------------------------------------------------------------------
   The photograph is on the section itself and the heading sits at the bottom
   of it, so the scrim only has to darken the bottom third rather than wash the
   whole picture. `background-position` is written in the markup, next to the
   photograph it belongs to.
   -------------------------------------------------------------------------- */

.apa-phys-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(340px, 54vw, 700px);
  background-color: #16283f;      /* what shows while the photograph loads */
  background-image: var(--apa-hero-img);
  background-size: cover;
  background-position: var(--apa-hero-pos, center);
  overflow: hidden;
}

/* Bottom-weighted, and it reaches 55% up the frame. The heading is large and
   white, so the gradient only has to carry the lower third — the faces above
   it stay as photographed. */
.apa-phys-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(9, 24, 41, .86) 0%,
              rgba(9, 24, 41, .70) 18%,
              rgba(9, 24, 41, .34) 38%,
              rgba(9, 24, 41, .06) 55%,
              rgba(9, 24, 41, 0)   70%);
}

/* z-index, not source order: `::after` paints after the element's in-flow
   children, so without this the scrim would sit on top of the heading. */
.apa-phys-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1460px;
  margin: 0 auto;
  padding: 0 30px 44px;
}

.apa-phys-hero h1 {
  margin: 0;
  max-width: 20ch;
  color: #fff;
  font-size: clamp(30px, 5.2vw, 68px);
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: .005em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .5), 0 0 26px rgba(0, 0, 0, .32);
}

/* --------------------------------------------------------------------------
   2 · The section heading
   -------------------------------------------------------------------------- */

.apa-phys-head {
  max-width: 1460px;
  margin: 0 auto;
  padding: 74px 30px 10px;
  text-align: center;
}

.apa-phys-head h2 {
  margin: 0;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--apa-phys-navy);
}

.apa-phys-head h2::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin: 22px auto 0;
  background: var(--apa-phys-red);
}

/* --------------------------------------------------------------------------
   3 · The cards
   --------------------------------------------------------------------------
   The theme's markup is left exactly as captured; everything here is added on
   top of it. The card is `.thb-team-member`, the portrait is `.team-container`,
   and the whole portrait is already a link — the invitation at the bottom is a
   second one to the same place, for people who are looking for a word rather
   than a picture to click.
   -------------------------------------------------------------------------- */

.thb-team-row .thb-team-member {
  padding-bottom: 6px;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}

/* `!important`, and it is unavoidable. The theme's scroll-reveal writes an
   inline `transform` onto `.thb-team-member` when the card comes into view,
   and an inline style beats any stylesheet rule that is not important. The
   rule is scoped to :hover so the reveal still owns the card at rest. */
.thb-team-row .thb-team-member:hover,
.thb-team-row .thb-team-member:focus-within {
  transform: scale(1.022) !important;
}

/* the portrait's own radius is the theme's (25px); the shadow is ours, and it
   only appears on the lift so the grid stays flat and quiet at rest */
.thb-team-row .thb-team-member .team-container {
  border-radius: 25px;
  transition: box-shadow .55s cubic-bezier(.16, 1, .3, 1);
}

.thb-team-row .thb-team-member:hover .team-container,
.thb-team-row .thb-team-member:focus-within .team-container {
  box-shadow: 0 18px 40px rgba(9, 24, 41, .22);
}

/* Inside the portrait, not under it. `.team-container` is already
   `position: relative; overflow: hidden` in the theme, so the label is clipped
   to the picture's rounded corners with nothing added.

   z-index 25: the theme lays `.team-link` over the whole portrait at z-index
   20, so anything below that is unclickable. The label points at the same bio
   the portrait does, so a click that lands on either is the same click — but
   it has to sit on top to answer a hover of its own. */
.apa-doc-cta {
  position: absolute;
  z-index: 25;
  left: 0;
  right: 0;
  bottom: 0;
  /* A fixed height with the content bottom-aligned, rather than letting the
     padding size it. The name and role are hidden until the card is pointed
     at, and if the box grew when they appeared the gradient would grow with
     it — the scrim has to stay exactly where it is while the type moves. */
  height: 176px;
  display: flex;
  align-items: flex-end;
  padding: 0 22px 20px;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  /* The gradient belongs to the label rather than to a separate overlay, and
     it has to start well above the type so the ramp is invisible — which is
     most of what the 176px of height is doing. It has to carry three lines in
     the open state, so it runs deeper and darker than it did when the label
     was one line on its own. */
  background: linear-gradient(to top,
              rgba(9, 24, 41, .90) 0%,
              rgba(9, 24, 41, .82) 26%,
              rgba(9, 24, 41, .58) 52%,
              rgba(9, 24, 41, .22) 78%,
              rgba(9, 24, 41, 0)   100%);
}

/* The cluster floats, not the gradient. If the whole label moved, the scrim
   would lift off the bottom edge of the portrait and leave a bright band under
   it — so the anchor stays put and only the type inside it travels.

   At rest the cluster is pushed DOWN by `--apa-doc-meta`, which drops the
   invitation onto the bottom line where it sat before the name and role
   existed, and carries most of those two lines past the portrait's edge, where
   `.team-container`'s own `overflow: hidden` cuts them off. Pointing at the
   card brings the cluster back: the invitation rises and the two lines climb
   in behind it.

   The clip does NOT do all the hiding, and it cannot. The meta block measures
   ~35px, so parking it entirely below the edge would drag the invitation to
   within 9px of the bottom — too tight to read as a card. The last ~13px of it
   stays inside the frame and `.apa-doc-meta`'s own opacity finishes the job;
   the two together are what make it a reveal rather than a fade. */
.apa-doc-lines {
  --apa-doc-meta: 42px;
  display: block;
  width: 100%;
  transform: translateY(var(--apa-doc-meta));
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}

.thb-team-row .thb-team-member:hover .apa-doc-lines,
.thb-team-row .thb-team-member:focus-within .apa-doc-lines {
  transform: translateY(-9px);
}

/* The fade is there so the lines arrive rather than slide up as two solid
   bars — the clip alone reads as mechanical. It is deliberately quicker than
   the travel and starts a beat late, so they are already moving before they
   are visible. */
.apa-doc-meta {
  display: block;
  opacity: 0;
  transition: opacity .3s ease;
}

.thb-team-row .thb-team-member:hover .apa-doc-meta,
.thb-team-row .thb-team-member:focus-within .apa-doc-meta {
  opacity: 1;
  transition: opacity .4s ease .12s;
}

.apa-doc-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .3s ease;
}

.apa-doc-chev {
  font-size: 19px;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

/* the chevron steps forward when the CARD is pointed at, not just the link —
   the whole card is the target, so the whole card should answer */
.thb-team-row .thb-team-member:hover .apa-doc-chev,
.thb-team-row .thb-team-member:focus-within .apa-doc-chev {
  transform: translate(5px, -1px);
}

/* the doctor's own name and role, which used to sit on the white below the
   card — smaller than the invitation above them, because the invitation is
   what you are being asked to do and this is who it is */
.apa-doc-name {
  display: block;
  margin-top: 9px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .95);
}

.apa-doc-role {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .74);
}

.apa-doc-cta:hover .apa-doc-label,
.apa-doc-cta:focus .apa-doc-label { color: #ffd7dd; }

/* --------------------------------------------------------------------------
   4 · Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .thb-team-row .thb-team-member,
  .thb-team-row .thb-team-member .team-container,
  .apa-doc-cta,
  .apa-doc-lines,
  .apa-doc-meta,
  .apa-doc-label,
  .apa-doc-chev { transition: none; }

  .thb-team-row .thb-team-member:hover,
  .thb-team-row .thb-team-member:focus-within { transform: none !important; }

  .thb-team-row .thb-team-member:hover .apa-doc-chev,
  .thb-team-row .thb-team-member:focus-within .apa-doc-chev {
    transform: translateY(-1px);
  }

  /* with motion off the lines are simply there, rather than waiting for a
     pointer that may never arrive */
  .apa-doc-lines { transform: translateY(-9px); }
  .apa-doc-meta  { opacity: 1; }
}