/* =========================================================================
   Aster — Dentist and clinic
   The section's own bottom padding is zero: the tinted photograph strip
   closes it, and the Visit section that follows opens straight onto its
   full-bleed photograph.
   ========================================================================= */

.aster-clinic { padding-bottom: 0; }


/* -------------------------------------------------------------------------
   The dentist
   ------------------------------------------------------------------------- */
.aster-dentist {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--wp--custom--grid-gap) clamp(var(--wp--preset--spacing--60), 5vw, var(--wp--preset--spacing--90));
  align-items: center;
}

.aster-dentist__portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--wp--custom--ratio-tall);
  object-fit: cover;
  object-position: center 22%;
  background: var(--wp--custom--image-fill);
}

.aster-dentist__text { padding-block: var(--wp--preset--spacing--60); }

.aster-dentist__lede {
  margin: 0 0 var(--wp--preset--spacing--50);
  font-size: var(--wp--preset--font-size--md);
  line-height: var(--wp--custom--leading-relaxed);
  color: var(--wp--preset--color--ink-secondary);
}

.aster-dentist__closing {
  margin: 0 0 var(--wp--preset--spacing--50);
  line-height: var(--wp--custom--leading-relaxed);
  color: var(--wp--preset--color--ink-secondary);
}
.aster-dentist__closing:last-child { margin-bottom: 0; }

/* The one emphasised phrase in the closing paragraph — italic here rather
   than accent-coloured, because it is a turn of speech, not a label. */
.aster-dentist__closing em {
  font-style: italic;
  color: var(--wp--preset--color--contrast);
}


/* -------------------------------------------------------------------------
   Photograph strip
   The block is alignfull already, so the tint reaches the page edges without
   the 100vw trick the design needed inside a container.
   ------------------------------------------------------------------------- */
.aster-clinic-strip {
  width: 100%;
  margin-top: var(--wp--custom--section-space);
  padding-block: var(--wp--custom--section-space);
  background: var(--wp--preset--color--paper-tint);
}

.aster-clinic-strip__title {
  max-width: 24ch;
  margin: 0 0 var(--wp--preset--spacing--80);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--weight-medium);
  line-height: var(--wp--custom--leading-snug);
  letter-spacing: var(--wp--custom--tracking-display);
  color: var(--wp--preset--color--contrast);
}

.aster-clinic-strip__track {
  display: flex;
  gap: var(--wp--custom--grid-gap);
  max-width: var(--wp--custom--container);
  margin-inline: auto;
  padding-inline: var(--wp--custom--gutter);
  padding-bottom: var(--wp--preset--spacing--40);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--wp--custom--gutter);
  scrollbar-width: none;
}
.aster-clinic-strip__track::-webkit-scrollbar { display: none; }

.aster-clinic-shot {
  flex: 0 0 min(26rem, 76vw);
  scroll-snap-align: start;
}
.aster-clinic-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--wp--custom--ratio-landscape);
  object-fit: cover;
  background: var(--wp--custom--image-fill);
}
/* The first shot is the tall one, so the row opens on a change of shape. */
.aster-clinic-shot:first-child img { aspect-ratio: var(--wp--custom--ratio-portrait); }


/* -------------------------------------------------------------------------
   Tablet — the portrait moves above the text
   ------------------------------------------------------------------------- */
@media (max-width: 62rem) {
  .aster-dentist { grid-template-columns: minmax(0, 1fr); }
  .aster-dentist__portrait { width: min(100%, 26rem); }
}