/* ==========================================================================
   Augusta Pediatric Associates — the individual service pages

   Each of the seven was a single full-height row: the photograph, a colour
   wash over the whole of it, and the title, the subtitle, the description and
   the call to action all written on top.

   Now it reads like the rest of the site. The photograph is a hero of its own
   with nothing over it but a scrim at the bottom where the title sits — the
   same band, to the same numbers, as About, Physicians, Patient Resources and
   Services. Everything that explains the service moves off the picture and
   onto a card below it, where it can be read.
   ========================================================================== */

:root {
  /* how far the card rides up over the photograph. The hero's own bottom
     padding is derived from it, so the title always clears the card instead
     of being covered by it. */
  --apa-sp-overlap: 70px;
  --apa-sp-navy: #224d7b;
  --apa-sp-red:  #d5344b;
  --apa-sp-body: #45536d;
}

/* --------------------------------------------------------------------------
   1 · The hero
   -------------------------------------------------------------------------- */

.apa-svcpage-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;
}

.apa-svcpage-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-svcpage-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1460px;
  margin: 0 auto;
  padding: 0 30px calc(var(--apa-sp-overlap) + 40px);
}

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

/* the theme's slide-type wrapper hides itself until its animation runs; these
   pages keep it, so the reveal matches the other headings on the site */
.apa-svcpage-hero .thb-slidetype { visibility: visible; }

/* --------------------------------------------------------------------------
   2 · The card
   --------------------------------------------------------------------------
   Everything that used to be written across the photograph: what the service
   is, and what to do next. It lifts toward the cursor like the cards on
   Patient Resources and Services, through the shared card-depth.js.
   -------------------------------------------------------------------------- */

.apa-svcpage-card-wrap {
  max-width: 1180px;
  margin-top: calc(var(--apa-sp-overlap) * -1);   /* the card overlaps the
                                     photograph, so the two read as one object
                                     rather than two stacked bands */
  margin-left: auto;
  margin-right: auto;
  /* the card is the last thing on most of these pages, and the footer's own
     band starts immediately after it */
  padding: 0 26px 76px;
  position: relative;
  z-index: 2;
}

.apa-svcpage-card {
  position: relative;
  padding: 44px 48px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(9, 24, 41, .13);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1),
              box-shadow .5s cubic-bezier(.16, 1, .3, 1);
}

.apa-svcpage-card:hover {
  transform: perspective(1100px)
             rotateX(var(--apa-rx, 0deg))
             rotateY(var(--apa-ry, 0deg))
             translateY(-3px);
  box-shadow: 0 26px 54px rgba(9, 24, 41, .18),
              0 2px 6px rgba(9, 24, 41, .06);
}

/* `::before`, so the highlight sits under the type rather than washing it out */
.apa-svcpage-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(380px circle at var(--apa-mx, 50%) var(--apa-my, 50%),
              rgba(73, 135, 198, .10),
              rgba(73, 135, 198, 0) 62%);
  opacity: 0;
  transition: opacity .45s ease;
}

.apa-svcpage-card:hover::before { opacity: 1; }

.apa-svcpage-card > * { position: relative; z-index: 1; }

/* The copy arrives from the hero, where it was white on a photograph. The
   inline colours are stripped in the markup rather than fought here, so these
   are plain rules and not an `!important` argument. */
.apa-svcpage-card p,
.apa-svcpage-card li {
  font-size: 17px;
  line-height: 1.78;
  color: var(--apa-sp-body);
}

.apa-svcpage-card p { margin: 0 0 18px; }

/* the first line is the service's own subtitle — "Child Well Checks, Augusta,
   GA" — which is a standfirst, not body copy */
.apa-svcpage-card > .wpb_text_column:first-of-type p {
  margin-bottom: 22px;
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.45;
  font-weight: 600;
  color: var(--apa-sp-navy);
}

.apa-svcpage-card ul,
.apa-svcpage-card ol { margin: 0 0 18px 1.1em; }

.apa-svcpage-card li { margin-bottom: 6px; }

.apa-svcpage-card h2,
.apa-svcpage-card h3,
.apa-svcpage-card h4 {
  margin: 28px 0 12px;
  color: var(--apa-sp-navy);
}

.apa-svcpage-card a:not(.btn) { color: var(--apa-sp-red); }

/* the theme's own pill button, which came down from the hero with everything
   else — it needs the gap under it that the row used to provide */
.apa-svcpage-card .btn { margin-top: 6px; }

.apa-svcpage-card > .vc_empty_space:last-child { display: none; }

@media screen and (min-width: 62em) {
  :root { --apa-sp-overlap: 90px; }
  .apa-svcpage-card-wrap { padding-left: 34px; padding-right: 34px; }
}

/* --------------------------------------------------------------------------
   3 · Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .apa-svcpage-card,
  .apa-svcpage-card::before { transition: none; }

  .apa-svcpage-card:hover { transform: none; }
  .apa-svcpage-card:hover::before { opacity: 0; }
}