/* ==========================================================================
   Augusta Pediatric Associates — the tilt slider, skinned

   tiltslider.css is the library's, untouched. The reference is white type on a
   dark stage; these pages are white, so the card's own ink is re-pointed at the
   brand's navy and the photograph is given the theme's rounded corner. The
   geometry — 280 × 460 cards, 16px gap, 1400px perspective, the 18° cap — is
   the measured part and is left alone.
   ========================================================================== */

#apa-service-tilt {
  --tl-ink:      #224d7b;              /* the reference's near-white */
  --tl-ink-dim:  rgba(69, 83, 109, .85);
  --tl-shot-radius: 14px;              /* the theme rounds its cards */

  padding: 6px 0 10px;
}

/* the whole card is a target, so the cursor should say so */
#apa-service-tilt .tilt__card { position: relative; }

.apa-tilt-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 14px;
}

/* the photograph carries a shadow on white the way it did not need to on the
   reference's dark stage */
#apa-service-tilt .tilt__shot {
  box-shadow: 0 14px 30px rgba(9, 24, 41, .16);
  transition: box-shadow .4s cubic-bezier(.16, 1, .3, 1);
}

#apa-service-tilt .tilt__card:hover .tilt__shot {
  box-shadow: 0 20px 40px rgba(9, 24, 41, .24);
}

#apa-service-tilt .tilt__role {
  color: var(--apa-sp-red, #d5344b);
  font-weight: 700;
}

#apa-service-tilt .tilt__name { color: #224d7b; }

#apa-service-tilt .tilt__more i { background: #d5344b; }

/* the heading the row already had */
.apa-tilt-head {
  max-width: 1460px;
  margin: 0 auto;
  padding: 64px 30px 6px;
  text-align: center;
}

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

@media screen and (max-width: 48em) {
  #apa-service-tilt {
    --tl-card-w: 232px;
    --tl-card-h: 400px;
    --tl-shot-h: 174px;
  }
}