/* Restoration page styles — extends base.css */

/* Hero */
.hero.hero--restoration {
  position: relative;
  padding: clamp(var(--space-48), 8vw, var(--space-96)) 0;
  background-image: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.6)), url('/assets/images/diagnostics-hero.webp');
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--color-border);
  box-shadow: inset 0 1px 0 var(--color-edge-highlight);
}
.hero__inner { max-width: 920px; }
.hero__title { margin-bottom: var(--space-8); }
.hero__subtitle { color: var(--gray-200); margin-top: var(--space-8); }
.hero__cta { margin-top: var(--space-16); display: flex; gap: var(--space-12); flex-wrap: wrap; }

/* Section base */
.section { padding: var(--space-64) 0; }
.section__header { margin-bottom: var(--space-24); }
.section__cta { margin-top: var(--space-24); display: flex; gap: var(--space-12); flex-wrap: wrap; }

/* Local section nav */
.section-nav { position: sticky; top: 0; z-index: 20; background: color-mix(in oklab, var(--color-bg) 86%, black 14%); border-bottom: 1px solid var(--color-border); backdrop-filter: blur(6px); }
.section-nav__list { display: flex; gap: var(--space-16); overflow-x: auto; padding: var(--space-12) 0; }
.section-nav__list a { white-space: nowrap; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid transparent; }
.section-nav__list a:focus-visible { border-color: var(--color-focus); outline: none; }

/* Process list */
.process-list { counter-reset: step; display: grid; grid-template-columns: 1fr; gap: var(--space-16); list-style: none; padding: 0; }
.process-list > li { background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-16); box-shadow: var(--shadow-sm); }
.process-list h3 { font-size: var(--fs-500); }

/* Before/After component */
.ba { margin-top: var(--space-16); }
.ba__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--color-border); }
.ba__media img { display: block; width: 100%; height: auto; }
.ba__after { position: absolute; inset: 0; width: var(--clip, 50%); overflow: hidden; border-right: 1px solid var(--color-border-strong); }
.ba__divider { position: absolute; top: 0; bottom: 0; left: calc(var(--clip, 50%) - 1px); width: 2px; background: linear-gradient(180deg, var(--color-primary), #ffd166); opacity: 0.85; pointer-events: none; }
.ba__range { width: 100%; margin-top: var(--space-12); appearance: none; background: transparent; }
.ba__range::-webkit-slider-runnable-track { height: 4px; background: var(--gray-500); border-radius: var(--radius-pill); }
.ba__range::-moz-range-track { height: 4px; background: var(--gray-500); border-radius: var(--radius-pill); }
.ba__range::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--color-primary); border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-sm); margin-top: -7px; }
.ba__range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--color-primary); border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-sm); }

/* Tables responsiveness */
.table-responsive { overflow-x: auto; }

/* Cards/layout tweaks */
.card figcaption { color: var(--gray-200); margin-top: var(--space-8); font-size: var(--fs-200); }

@media (min-width: 900px) {
  .process-list { grid-template-columns: 1fr 1fr; }
}