/* ============================================================================
   dental.css — site-specific layout for Bright Dental (coral / Bricolage / soft)
   Loads AFTER home.css. Adds a photo-forward hero, trust strip, hours table,
   insurance chips, and an offer band. Everything reads tokens, so the page
   still re-skins; these are just compositions home.css does not cover.
   ============================================================================ */

/* ---- photo-forward hero ------------------------------------------------- */
.d-hero { padding-block: clamp(var(--space-10), 6vw, var(--space-20)); }
.d-hero__grid { display: grid; grid-template-columns: 1fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center; }
@media (min-width: 920px) { .d-hero__grid { grid-template-columns: 1.05fr 0.95fr; } }
.d-hero__pill { display: inline-flex; align-items: center; gap: var(--space-2); background: color-mix(in srgb, var(--color-accent) 16%, var(--color-bg)); color: color-mix(in srgb, var(--color-accent) 72%, var(--color-fg)); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); margin-bottom: var(--space-5); }
.d-hero__pill .dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--color-accent); }
.d-hero__title { font-family: var(--font-display); font-size: clamp(var(--text-4xl), 6vw, var(--text-6xl)); line-height: 1.0; letter-spacing: -0.02em; color: var(--color-fg); margin: 0 0 var(--space-5); font-weight: 700; text-wrap: balance; }
[data-type="anton"] .d-hero__title, [data-type="archivo"] .d-hero__title { text-transform: uppercase; font-weight: 400; }
[data-type="dmserif"] .d-hero__title { font-weight: 400; }
.d-hero__lede { font-family: var(--font-body); font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--color-muted); margin: 0 0 var(--space-7); max-width: 44ch; }
.d-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-7); }

/* hero media + floating rating card */
.d-hero__media { position: relative; }
.d-hero__media image-slot, .d-hero__media .slot-fallback { display: block; width: 100%; aspect-ratio: 4 / 5; }
@media (min-width: 920px) { .d-hero__media image-slot, .d-hero__media .slot-fallback { aspect-ratio: 5 / 6; } }
.slot-fallback { border-radius: var(--radius-lg); background: linear-gradient(155deg, color-mix(in srgb, var(--color-accent) 26%, var(--color-surface)), color-mix(in srgb, var(--color-accent) 8%, var(--color-surface))); border: var(--border-thin) solid var(--color-border); display: grid; place-items: center; color: color-mix(in srgb, var(--color-accent) 72%, var(--color-fg)); }
.slot-fallback svg { width: 64px; height: 64px; opacity: .5; }
.d-hero__float { position: absolute; left: calc(-1 * var(--space-5)); bottom: var(--space-6); background: var(--color-surface); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-4) var(--space-5); display: flex; align-items: center; gap: var(--space-4); max-width: 260px; }
@media (max-width: 520px) { .d-hero__float { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); max-width: none; } }
.d-hero__float .stars { display: flex; gap: 1px; color: var(--color-accent); }
.d-hero__float .stars svg { width: 15px; height: 15px; }
.d-hero__float b { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-fg); line-height: 1; }
[data-type="dmserif"] .d-hero__float b { font-weight: 400; }
.d-hero__float span { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-muted); display: block; margin-top: 2px; }

/* ---- trust strip -------------------------------------------------------- */
.d-trust { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; }
.d-trust__item { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
.d-trust__item svg { width: 18px; height: 18px; color: var(--color-accent); flex: none; }
.d-trust__item b { color: var(--color-fg); font-weight: 600; }

/* ---- insurance chips ---------------------------------------------------- */
.ins-strip { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ins-chip { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--color-fg); background: var(--color-surface); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-pill); padding: var(--space-3) var(--space-5); }
[data-shape="brutalist"] .ins-chip { border-width: var(--border-default); }

/* ---- hours table -------------------------------------------------------- */
.hours { list-style: none; margin: 0; padding: 0; }
.hours li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: var(--border-thin) solid var(--color-border); font-family: var(--font-body); font-size: var(--text-base); }
.hours li:last-child { border-bottom: 0; }
.hours dt, .hours .day { color: var(--color-fg); font-weight: 600; }
.hours .time { color: var(--color-muted); font-variant-numeric: tabular-nums; }
.hours li.is-today { color: var(--color-accent); }
.hours li.is-today .day, .hours li.is-today .time { color: var(--color-accent); font-weight: 700; }
.hours .closed { color: var(--color-muted); opacity: .7; }

/* ---- offer band --------------------------------------------------------- */
.d-offer { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center; }
@media (min-width: 760px) { .d-offer { grid-template-columns: 1.4fr 1fr; } }
.d-offer__big { font-family: var(--font-display); font-size: clamp(var(--text-4xl), 5vw, var(--text-5xl)); line-height: 1; color: var(--color-accent); font-weight: 700; }
[data-type="dmserif"] .d-offer__big { font-weight: 400; }
.d-offer__big small { display: block; font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; color: var(--color-muted); margin-top: var(--space-2); letter-spacing: 0; }

/* ---- soft service tiles (icon-led, friendly) ---------------------------- */
.svc-tile { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; }
.svc-tile__icon { width: 52px; height: 52px; border-radius: var(--radius-lg); display: grid; place-items: center; background: color-mix(in srgb, var(--color-accent) 16%, var(--color-bg)); color: var(--color-accent); }
.svc-tile__icon svg { width: 26px; height: 26px; }
.svc-tile__title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-fg); margin: 0; font-weight: 700; line-height: var(--leading-snug); }
[data-type="dmserif"] .svc-tile__title { font-weight: 400; }
.svc-tile__body { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-muted); line-height: var(--leading-normal); margin: 0; }
.svc-tile__price { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--color-accent); margin-top: auto; padding-top: var(--space-2); }