/* ==========================================================================
   MedSpas & Clinics page — patterns that appear only here.
   ========================================================================== */

@layer pages {

  /* ---- Hero: patient directory + numbered overlay -------------------- */

  /* Figma composite is 582×508: the 513×420 directory top-left, the
     279px ember card overlapping its bottom-right corner. */
  .directory {
    max-width: 582px;
    padding-block-end: 88px;
  }

  .directory .media__img { width: 88%; }

  .directory .media__overlay { width: min(310px, 56%); }

  .directory .panel__label { font-size: var(--fs-body-s); }

  @media (max-width: 599.98px) {
    .directory { padding-block-end: 0; }
    .directory .media__img { width: 100%; }
    .directory .media__overlay { width: 100%; }
  }
}