/* ==========================================================================
   Augusta Pediatric Associates — the services arc, skinned

   arccards.css is the library's, untouched. This file only dresses the card:
   the practice's own cards put the service name over the photograph and reveal
   the description on hover behind their orange wash, and that is what people
   coming to this page recognise.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0 · The hero and the section title
   --------------------------------------------------------------------------
   The same band as the Physicians and Patient Resources pages, to the same
   numbers. The captured row was 445px tall under a flat blue wash laid over
   the whole photograph; this is the photograph, with a scrim weighted to the
   bottom third where the heading actually is.
   -------------------------------------------------------------------------- */

.apa-svc-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-svc-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-svc-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1460px;
  margin: 0 auto;
  padding: 0 30px 44px;
}

.apa-svc-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 title above the carousel. It was a 60px theme heading inside a 695px
   column, which broke "Our Pediatric Services" across two lines; at this size
   it sets on one at every width the carousel is shown at. */
.apa-svc-head {
  max-width: 1460px;
  margin: 0 auto;
  padding: 74px 30px 0;
  text-align: center;
}

.apa-svc-head h2 {
  margin: 0;
  font-size: clamp(22px, 3vw, 38px);
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: #224d7b;
  white-space: nowrap;            /* one line, which is the point */
}

/* No rule under this one. The Physicians and Patient Resources titles carry a
   red bar because content follows them straight away; here the carousel is the
   next thing, and a second horizontal line directly above a row of cards read
   as clutter. */

#apa-service-arc {
  --acc-bg: transparent;          /* the section's white, not the card's */
  --acc-radius: 14px;             /* the theme rounds its cards; 4px is the
                                     reference's and looks foreign here */
  --acc-shadow: 0 18px 38px rgba(9, 24, 41, .16);
  --apa-svc-wash: #f5a021;        /* the orange the old service row used */

  /* tight to the title above it — the wheel's own top card already sits 295px
     down inside the frame, so any margin here reads as double the gap it is */
  margin-top: -18px;
  cursor: grab;
}

#apa-service-arc.is-dragging { cursor: grabbing; }

/* The label and the wash both sit inside the shot, which already clips to the
   card's radius — so nothing here needs its own rounding. */
#apa-service-arc .acc__shot { position: relative; }

.apa-svc-label {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 22px 22px 20px;
  color: #fff;
  pointer-events: none;
  background: linear-gradient(to top,
              rgba(9, 24, 41, .82) 0%,
              rgba(9, 24, 41, .58) 42%,
              rgba(9, 24, 41, 0)  100%);
}

.apa-svc-name {
  margin: 0;
  font-size: 19px;
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: .01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.apa-svc-kind {
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}

/* The description is the hover, exactly as it is on the old cards. It is held
   out of the flow by `max-height` rather than `display`, so the label's own
   gradient does not jump the moment the pointer arrives. */
.apa-svc-desc {
  max-height: 0;
  margin: 0;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .94);
  opacity: 0;
  transition: max-height .45s cubic-bezier(.16, 1, .3, 1),
              opacity .3s ease,
              margin-top .45s cubic-bezier(.16, 1, .3, 1);
}

/* the orange wash, which is what the old card did on hover */
#apa-service-arc .acc__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(-135deg,
              rgba(245, 160, 33, .30), var(--apa-svc-wash));
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}

#apa-service-arc .acc__card:hover .acc__shot::after { opacity: .92; }

#apa-service-arc .acc__card:hover .apa-svc-desc {
  max-height: 16em;
  margin-top: 10px;
  opacity: 1;
}

/* over everything, so the whole card is the target */
.apa-svc-link {
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* --------------------------------------------------------------------------
   The practice's opening paragraph, which now sits under the arc
   --------------------------------------------------------------------------
   It read as a preamble above the cards; below them it reads as the answer to
   what you have just scrolled past. Centred on the same measure the heading
   above the carousel uses.
   -------------------------------------------------------------------------- */

.apa-svc-lede {
  max-width: 1180px;
  margin: 26px auto 0;
  padding: 0 26px;
}

.apa-svc-note {
  position: relative;
  padding: 38px 44px;
  text-align: center;
  border-radius: 18px;
  background: #eff4fa;
  box-shadow: 0 1px 2px rgba(9, 24, 41, .05);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1),
              box-shadow .5s cubic-bezier(.16, 1, .3, 1);
}

/* The depth answers the cursor. The angles and the highlight's position come
   from card-depth.js as four custom properties; with no script it is simply a
   flat panel that lifts on hover, which is the same design with one layer
   missing rather than a broken one. */
.apa-svc-note:hover {
  transform: perspective(1100px)
             rotateX(var(--apa-rx, 0deg))
             rotateY(var(--apa-ry, 0deg))
             translateY(-3px);
  box-shadow: 0 22px 46px rgba(9, 24, 41, .16),
              0 2px 6px rgba(9, 24, 41, .06);
}

/* `::before`, so it sits under the type — a white radial painted over the
   paragraph would wash it out wherever the pointer went. */
.apa-svc-note::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(360px circle at var(--apa-mx, 50%) var(--apa-my, 50%),
              rgba(255, 255, 255, .92),
              rgba(255, 255, 255, 0) 62%);
  opacity: 0;
  transition: opacity .45s ease;
}

.apa-svc-note:hover::before { opacity: 1; }

.apa-svc-note > * { position: relative; z-index: 1; }

/* the practice's one-line promise, which used to sit under the hero heading */
.apa-svc-claim {
  margin: 0 0 14px;
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.5;
  font-weight: 600;
  color: #224d7b;
}

.apa-svc-note p:not(.apa-svc-claim) {
  margin: 0 auto;              /* centred with the card, not ragged in it */
  max-width: 58rem;
  font-size: 17px;
  line-height: 1.78;
  color: #45536d;
}

/* --------------------------------------------------------------------------
   The index
   --------------------------------------------------------------------------
   The carousel is slow on purpose, which is exactly wrong for someone who
   already knows which service they want. The same eight, numbered, as a plain
   list of links — and the numbering ties it to the About page, where the
   sections are counted the same way.
   -------------------------------------------------------------------------- */

.apa-svc-index {
  max-width: 1180px;
  margin: 34px auto 0;
  padding: 0 26px;
}

.apa-svc-index-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 48px;
  border-top: 1px solid #e4eaf1;
}

.apa-svc-item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 14px;
  margin: 0 -14px;
  border-bottom: 1px solid #e4eaf1;
  text-decoration: none;
  overflow: hidden;
}

/* the same wash, faded the same way, as the rows on Patient Resources */
.apa-svc-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #f8e8ea;
  opacity: 0;
  transition: opacity .35s ease;
}

.apa-svc-item:hover::before,
.apa-svc-item:focus::before { opacity: 1; }

.apa-svc-item > * { position: relative; z-index: 1; }

.apa-svc-item-name {
  flex: 1 1 auto;
  font-size: 17px;
  font-weight: 600;
  color: #224d7b;
}

/* held against the theme's own `a:hover`, which would otherwise repaint the
   name #d24641 — a second signal competing with the wash */
.apa-svc-item:hover .apa-svc-item-name,
.apa-svc-item:focus .apa-svc-item-name { color: #224d7b; }

.apa-svc-item-go {
  flex: 0 0 auto;
  font-size: 19px;
  line-height: 1;
  color: #d5344b;
  transform: translateY(-1px);
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

.apa-svc-item:hover .apa-svc-item-go,
.apa-svc-item:focus .apa-svc-item-go { transform: translate(5px, -1px); }

@media screen and (min-width: 48em) {
  .apa-svc-index-grid { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   Narrow screens
   --------------------------------------------------------------------------
   The arc is 700px tall and 325px a card because that is what was measured.
   Below the breakpoint the frame is simply shorter and the cards smaller — the
   wheel and the fade are untouched, so it is the same component, not a second
   design.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 64em) {
  #apa-service-arc {
    --acc-w: 250px;
    --acc-h: 354px;
    --acc-top: 220px;
    height: 520px;
  }
  .apa-svc-name { font-size: 17px; }
  .apa-svc-desc { font-size: 12.5px; }
}

@media screen and (max-width: 40em) {
  #apa-service-arc {
    --acc-w: 208px;
    --acc-h: 294px;
    --acc-top: 180px;
    height: 430px;
  }
}

/* --------------------------------------------------------------------------
   Motion preferences — the drift is not started at all under reduced motion
   (services-arc.js checks), so only the card's own transitions remain.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .apa-svc-note,
  .apa-svc-note::before,
  .apa-svc-item::before,
  .apa-svc-item-go { transition: none; }

  .apa-svc-note:hover { transform: none; }
  .apa-svc-note:hover::before { opacity: 0; }

  .apa-svc-desc,
  #apa-service-arc .acc__shot::after { transition: none; }
}