/* ==========================================================================
   Augusta Pediatric Associates — Sick Child Care

   Inpatient Care and Behavioral Health were a two-column row each: an icon box
   of type on one side, a photograph on the other, with a heart glyph over the
   first and a star over the second.

   The glyphs are gone and the type now sits on a rounded card laid over its
   own photograph, so each section reads as one object instead of two things
   side by side. The card keeps to the side the copy was already on, so the two
   alternate down the page exactly as they did.
   ========================================================================== */

.apa-ob {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 26px;
}

.apa-ob-photo {
  height: clamp(300px, 40vw, 520px);
  border-radius: 20px;
  background-image: var(--apa-ob-img);
  background-size: cover;
  background-position: center;
  background-color: #dfe6ee;      /* what shows while the photograph loads */
}

.apa-ob-card {
  position: relative;
  margin: -70px 0 0;              /* the overlap is the whole point: the card
                                     is ON the photograph, not under it */
  padding: 30px 32px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(9, 24, 41, .16);
}

.apa-ob-card h3 {
  margin: 0 0 12px;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.2;
  color: #224d7b;
}

.apa-ob-card p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.75;
  color: #45536d;
}

/* --------------------------------------------------------------------------
   Wide: the card sits inside the photograph rather than under its lower edge
   --------------------------------------------------------------------------
   `position: absolute` only once there is room for it — below the breakpoint
   the card would cover the picture almost entirely, so it stays a panel that
   overlaps the bottom edge instead.
   -------------------------------------------------------------------------- */

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

  .apa-ob-card {
    position: absolute;
    top: 50%;
    width: min(46%, 560px);
    margin: 0;
    padding: 38px 42px;
    transform: translateY(-50%);
  }

  .apa-ob--left  .apa-ob-card { left: 64px; }
  .apa-ob--right .apa-ob-card { right: 64px; }

  /* the photograph is framed away from the card so the subject is not sitting
     behind the type */
  .apa-ob--left  .apa-ob-photo { background-position: 75% center; }
  .apa-ob--right .apa-ob-photo { background-position: 25% center; }
}