/*
 * sd-clinic.css — clinic page v2 layout (preview flag ?sd_design=v2).
 * Enqueued only on is_singular('clinic') when sd_clinic_v2_requested(); sd-dentist.css is
 * enqueued beside it for the shared container / breadcrumb / chip / input / card primitives.
 * Uses sd-tokens custom properties only. Mobile-first; no horizontal scroll at 375px.
 */

/* Astra reset — §6.7 pattern. */
body.sd-clinic-v2 {
  background: var(--sd-color-bg);
}
body.sd-clinic-v2 #content .ast-container {
  display: block;
  max-width: none;
  padding: 0;
}
html:has(body.sd-clinic-v2) {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html:has(body.sd-clinic-v2) { scroll-behavior: auto; }
}

.sd-clinic-v2 {
  overflow-wrap: anywhere;
}

.sd-clinic-v2 a:focus-visible {
  outline: none;
  border-radius: var(--sd-radius-xs);
  box-shadow: var(--sd-focus-ring);
}

/* Hero */
.sd-clinic-v2__hero {
  padding-block: var(--sd-space-8) var(--sd-space-4);
}
.sd-clinic-v2__subline {
  margin-top: var(--sd-space-3);
  color: var(--sd-color-text-muted);
}
.sd-clinic-v2__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sd-space-3);
  margin-top: var(--sd-space-6);
}
.sd-clinic-v2__actions .btn {
  text-decoration: none;
}
@media (max-width: 479px) {
  .sd-clinic-v2__actions .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* Content grid: one column on mobile, two on desktop. */
.sd-clinic-v2__content {
  padding-block: var(--sd-space-6) var(--sd-space-12);
}
.sd-clinic-v2__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sd-space-6);
  align-items: start;
}
@media (min-width: 1024px) {
  .sd-clinic-v2__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: var(--sd-space-8);
  }
  .sd-clinic-v2__aside {
    position: sticky;
    top: var(--sd-space-6);
  }
}
.sd-clinic-v2__main {
  display: flex;
  flex-direction: column;
  gap: var(--sd-space-6);
  min-width: 0;
}

/* Cards */
.sd-clinic-v2__card {
  background: var(--sd-color-surface);
  border: 1px solid var(--sd-color-border);
  border-radius: var(--sd-radius-md);
  box-shadow: var(--sd-shadow-xs);
  padding: var(--sd-space-5);
}
.sd-clinic-v2__card > .sd-h4 {
  margin-bottom: var(--sd-space-3);
}
.sd-clinic-v2__address {
  font-style: normal;
}
.sd-clinic-v2__enquiry {
  scroll-margin-top: var(--sd-space-6);
}
.sd-clinic-v2__enquiry .dentist-enquiry__form {
  max-width: none;
}

/* Hours table */
.sd-clinic-v2__hours {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sd-fs-sm);
}
.sd-clinic-v2__hours th,
.sd-clinic-v2__hours td {
  padding: var(--sd-space-2) 0;
  border-bottom: 1px solid var(--sd-color-border-subtle);
  text-align: left;
  vertical-align: top;
}
.sd-clinic-v2__hours th {
  font-weight: var(--sd-fw-medium);
  color: var(--sd-color-text-strong);
  width: 40%;
}
.sd-clinic-v2__hours tr:last-child th,
.sd-clinic-v2__hours tr:last-child td {
  border-bottom: 0;
}
.sd-clinic-v2__hours-note {
  margin-top: var(--sd-space-3);
}

/* Dentists at this clinic */
.sd-clinic-v2__dentists > .sd-h3 {
  margin-bottom: var(--sd-space-4);
}
.sd-clinic-v2__dentist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--sd-space-4);
}
/* One card fills the column. */
.sd-clinic-v2__dentist-grid > .dentist-card:only-child {
  grid-column: 1 / -1;
}

/* Card layout here only (card.php markup is shared and untouched). The card is its own
   inline-size container so the layout follows the card's width, not the viewport:
   wide = avatar | name + badge on one line | "Send enquiry" on the right;
   narrow = badge drops below the name and the button takes its own row. */
.sd-clinic-v2__dentist-grid > .dentist-card {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--sd-space-4);
}
.sd-clinic-v2__dentist-grid .dentist-card__header {
  grid-column: 1;
  align-items: center;
  min-width: 0;
}
.sd-clinic-v2__dentist-grid .dentist-card__identity {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--sd-space-3);
  row-gap: var(--sd-space-1);
}
.sd-clinic-v2__dentist-grid .dentist-card__location {
  flex-basis: 100%;
}
/* The badge is never split internally; when it does not fit it moves to the next line whole. */
.sd-clinic-v2__dentist-grid .dentist-card__identity .dentist-badge--verified {
  white-space: nowrap;
  flex: 0 0 auto;
  margin: 0; /* Astra's paragraph margin and the profile's margin-top pushed the pill off the name's centre line */
  line-height: 1.4;
  align-self: center;
}
.sd-clinic-v2__dentist-grid .dentist-card__name {
  margin: 0;
  line-height: 1.4;
}
.sd-clinic-v2__dentist-grid .dentist-card__footer {
  grid-column: 2;
  grid-row: 1;
  border-top: 0;
  padding-top: 0;
}
@container (max-width: 459px) {
  .sd-clinic-v2__dentist-grid .dentist-card__footer {
    grid-column: 1 / -1;
    grid-row: auto;
    margin-top: var(--sd-space-4);
    padding-top: var(--sd-space-3);
    border-top: 1px solid var(--sd-color-border-subtle);
  }
}

/* Claim box */
.sd-clinic-v2__claim {
  background: var(--sd-color-bg-recessed);
  border: 1px solid var(--sd-color-border-subtle);
  border-radius: var(--sd-radius-md);
  padding: var(--sd-space-5);
}
.sd-clinic-v2__claim > .sd-h4 {
  margin-bottom: var(--sd-space-2);
}