/* Separate people and spaces pages, sharing the site grid and type scale. */
/* A stable horizontal frame matches the homepage and survives photo replacement. */
.about-hero > img {
  width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; object-position: center;
  align-self: start; border-radius: 8px; background: var(--paper);
}
.clinic-overview { padding-top: 48px; padding-bottom: 44px; }
.clinic-overview .section-heading { align-items: start; gap: 64px; margin-bottom: 44px; }
.clinic-overview .section-heading > div { flex: 1; min-width: 0; }
.clinic-overview .section-heading > p { width: 42%; max-width: 470px; margin-top: 38px; padding: 0; }
/* Each row follows the source proportions, so reordering keeps full photos at a common height. */
.clinic-spaces { display: grid; grid-template-columns: var(--clinic-photo-columns,minmax(0,1fr)); align-items: start; gap: clamp(24px,3vw,44px); }
.clinic-spaces + .clinic-spaces { margin-top: 40px; }
.clinic-spaces-single { grid-template-columns: minmax(0,1fr); max-width: min(100%,calc(var(--clinic-single-ratio,1.333333) * 560px)); }
.clinic-space { min-width: 0; margin: 0; }
.clinic-space-photo { display: block; position: relative; width: 100%; padding: 0; border-radius: 8px; overflow: hidden; background: var(--paper); }
.clinic-space-photo img { display: block; width: 100%; height: auto; }
.clinic-photo-zoom { position: absolute; right: 16px; bottom: 16px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--cream); color: var(--green); transition: background-color .2s, color .2s; }
.clinic-photo-zoom svg { width: 20px; height: 20px; }
.clinic-space-photo:focus-visible { outline: 3px solid var(--green); outline-offset: 5px; }
.clinic-space figcaption { padding-top: 22px; }
.clinic-space h2 { margin-bottom: 10px; }
.clinic-space figcaption p { max-width: 44ch; }
.clinic-arrival { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.clinic-arrival > p { margin: 0; min-width: 0; }
.clinic-arrival .text-link { flex-shrink: 0; }
.clinic-visit { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; gap: clamp(40px,7vw,100px); padding-block: 48px 72px; }
.clinic-visit-copy { min-width: 0; }
.clinic-visit h2 { margin-bottom: 24px; }
.clinic-visit-intro { max-width: 48ch; margin-bottom: 24px; }
.clinic-visit-steps { margin: 0; padding: 0; list-style: none; }
.clinic-visit-steps li { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 18px; padding: 20px 0; border-top: 1px solid var(--line); }
.clinic-step-number { padding-top: 2px; color: var(--green); font-family: var(--serif); font-size: 22px; line-height: 1.3; }
.clinic-visit-steps h3 { font-family: var(--sans); font-size: var(--type-lead); font-weight: 500; line-height: 1.5; letter-spacing: 0; margin-bottom: 6px; }
.clinic-arrival svg, .clinic-visit-copy > .text-link svg, .about-approach .text-link svg { width: 20px; height: 20px; }
.about-approach { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: clamp(40px,7vw,100px); padding-block: 56px; }
.about-approach-photo { width: 100%; max-width: 420px; min-width: 0; }
.about-approach-photo img { display: block; width: 100%; height: auto; border-radius: 8px; }
.about-approach-copy { min-width: 0; }
.about-approach-copy h2 { margin-bottom: 28px; }
.about-approach-without-photo { grid-template-columns: minmax(0,1fr); }
.about-approach-without-photo .about-approach-copy { max-width: var(--reading-width); }
.about-approach-copy p { margin-bottom: 22px; font-size: var(--type-body); line-height: var(--leading-body); }
.about-approach-copy .large-copy { font-size: var(--type-lead); }
.about-approach .text-link { margin-top: 4px; }
#la-clinica, #equipo { scroll-margin-top: calc(120px + var(--dv-toolbar-height,0px)); }
@media(hover:hover) and (pointer:fine) { .clinic-space-photo:hover .clinic-photo-zoom { color: var(--cream); background: var(--green); } }
@media(max-width:850px) {
  .clinic-overview .section-heading { display: block; margin-bottom: 32px; }
  .clinic-overview .section-heading > p { width: auto; max-width: 600px; margin-top: 24px; }
  .clinic-visit { grid-template-columns: minmax(0,1fr); gap: 28px; padding-block: 32px 48px; }
  .about-approach { grid-template-columns: minmax(0,1fr); gap: 28px; padding-block: 40px; }
}
@media(max-width:640px) {
  .clinic-overview { padding-top: 32px; padding-bottom: 48px; }
  .clinic-arrival { align-items: start; flex-direction: column; gap: 14px; }
  .clinic-arrival .text-link { flex-shrink: 1; }
  .clinic-spaces { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .clinic-spaces-single { max-width: none; }
  .clinic-spaces + .clinic-spaces { margin-top: 32px; }
  .clinic-space figcaption { padding-top: 16px; }
  .clinic-space h2 { margin-bottom: 8px; }
}
@media(prefers-reduced-motion:reduce) { .clinic-photo-zoom { transition: none; } }

/* A neutral placeholder allows a team member to be added before a headshot exists. */
.team-photo-placeholder {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5;
  margin-bottom: 24px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--paper); color: var(--green);
}
.team-photo-placeholder > svg { width: 96px; height: 96px; fill: none; stroke: currentColor; stroke-width: 1.25; opacity: .65; }
.team-photo-placeholder > .dv-section-control { position: absolute; bottom: 16px; margin: 0; }