/**
 * Mobile-first layout system for The Dental Hut.
 * Loaded after styles.css so small-screen rules win, then min-width enhances.
 */

:root {
  --container-pad: 16px;
  --section-y: clamp(40px, 7vw, 88px);
  --header-h: 72px;
  --sticky-cta: 72px;
  --max: 1200px;
}

html {
  overflow-x: clip;
}
body {
  overflow-x: clip;
  font-size: 16px;
  line-height: 1.7;
}
img, video, svg, iframe {
  max-width: 100%;
}
iframe { width: 100%; }
.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  box-sizing: border-box;
}
.section { padding-block: var(--section-y); }
h1 { font-size: clamp(1.75rem, 7vw, 3.1rem); overflow-wrap: anywhere; }
h2 { font-size: clamp(1.35rem, 5.5vw, 2rem); overflow-wrap: anywhere; }
h3 { font-size: clamp(1.05rem, 3.4vw, 1.35rem); }
.btn {
  min-height: 44px;
  white-space: normal;
  text-align: center;
}
.btn-row {
  width: 100%;
  flex-direction: column;
  align-items: stretch;
}
.btn-row > .btn,
.hero-copy .btn,
.cta-band .btn,
.doc-hero-copy .btn,
.tp-hero .btn-row > .btn,
.ct-hero .btn-row > .btn,
.te-hero .btn-row > .btn,
.cs-hero .btn-row > .btn,
.ab-hero .btn-row > .btn,
.form-card .btn[type="submit"] {
  width: 100%;
}

.site-header { height: var(--header-h); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 100%;
}
.logo { min-width: 0; height: auto; }
.logo img { height: 40px; max-width: min(140px, 42vw); width: auto; }
.nav { display: none; }
.header-actions { gap: 8px; }
.header-actions .call-drop { display: none; }
.header-actions .btn-book {
  display: inline-flex;
  width: auto;
  max-width: none;
  min-height: 40px;
  height: 40px;
  padding: 0 12px;
  font-size: 0.78rem;
  white-space: nowrap;
  flex: 0 0 auto;
}
.nav-toggle {
  display: flex;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
}

.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(14, 47, 84, 0.4);
  z-index: 85;
  pointer-events: auto;
}
.nav-backdrop.is-open { display: block; }
.mobile-nav {
  inset: var(--header-h) 0 var(--sticky-cta) 0;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  z-index: 95;
}
.mobile-nav .btn,
.mobile-nav a.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 12px 0 6px;
  background: var(--primary);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
}

.hero-banner {
  display: grid;
  height: auto;
  min-height: 0;
  max-height: none;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(180px, 42vw);
}
.hero-copy {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  padding: 20px 0 16px;
  background: linear-gradient(180deg, var(--primary-dark), #123a66);
  align-items: flex-start;
}
.hero-slides {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  min-height: 180px;
  width: 100%;
  height: 100%;
}
.hero-orbs { display: none; }
.hero-copy-grid { grid-template-columns: 1fr; gap: 16px; }
.hero-copy h1 { max-width: none; }
.hero-progress {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  align-self: end;
}
.hero-slide, .hero-slide img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
}

.grid-2, .grid-3, .grid-4, .treat-grid, .gallery-grid, .doc-row,
.trust-trio, .why-grid, .proof, .footer-grid, .quick-grid, .help-grid,
.stats-bar, .timeline, .discover, .form-grid, .doc-facts, .related-treat {
  grid-template-columns: 1fr;
}
.improve-tiles { grid-template-columns: 1fr; }
.cs-grid, .cs-hero-grid, .cs-featured, .cs-tech, .cs-journey { grid-template-columns: 1fr; }
.cs-summary dl { grid-template-columns: 1fr; }
.about-lab, .about-panel, .about-facts { grid-template-columns: 1fr; min-height: 0; }
.ab-hero-grid, .ab-facts { grid-template-columns: 1fr; }
.te-hero-grid, .te-feat-grid, .te-time-wrap, .te-visit, .te-aeo-grid, .te-grid { grid-template-columns: 1fr; }
.te-page .container, .te-page .disclaimer { width: 100%; max-width: var(--max); padding-inline: var(--container-pad); }
.ct-hero-grid, .ct-book, .ct-hours-grid, .ct-map, .ct-actions, .ct-slots, .ct-week { grid-template-columns: 1fr; }
.tp-hero-grid, .tp-split, .tp-weigh, .tp-step-card, .tp-shell, .tp-opts, .tp-docs { grid-template-columns: 1fr; }
.tp-toc { position: static; }
.tp-toc-desk { display: none; }
.tp-toc-mobile { display: block; }
.tp-rels, .tp-blogs {
  display: grid;
  grid-template-columns: 1fr;
  overflow: visible;
  grid-auto-flow: row;
  grid-auto-columns: auto;
}
.tp-hero-fig img, .tp-step-card img, .tp-split img { height: auto; max-height: 240px; width: 100%; object-fit: cover; }
.tp-step-card div { padding: 16px; }

.doc-hero { max-height: none; min-height: 0; display: grid; grid-template-columns: 1fr; }
.doc-hero-media { min-height: 220px; max-height: 280px; }
.doc-hero-copy { padding: 20px 0 28px; }
.care-scene img { height: 200px; width: 100%; object-fit: cover; }
.care-overlay { position: relative; max-width: none; padding: 20px 0 28px; }
.care-reel { display: flex; overflow-x: auto; gap: 8px; max-width: 100%; }
.care-card { flex: 0 0 148px; }
.approach-track { display: flex; overflow-x: auto; max-width: 100%; }
.approach-track button { flex: 0 0 auto; min-height: 44px; }

.mobile-cta {
  display: flex;
  min-height: var(--sticky-cta);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
}
body { padding-bottom: calc(var(--sticky-cta) + env(safe-area-inset-bottom)); }
.float-actions { display: none; }

.form-grid input, .form-grid select, .form-grid textarea {
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  box-sizing: border-box;
}
.form-grid textarea { min-height: 120px; }

.table-wrapper, .tp-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.tp-tabs, .te-pills, .cs-pills, .ct-chips, .tp-sits, .tp-step-nav {
  flex-wrap: nowrap;
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tp-tabs::-webkit-scrollbar, .te-pills::-webkit-scrollbar, .cs-pills::-webkit-scrollbar { display: none; }
.tp-tabs button, .tp-sit, .tp-step, .te-pill, .cs-pill { flex: 0 0 auto; }

.footer-grid { gap: 8px; }
.footer-acc { border-bottom: 1px solid rgba(255,255,255,.12); padding: 4px 0; }
.footer-acc > summary {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  font-weight: 700;
}
.footer-acc > summary::-webkit-details-marker { display: none; }
.footer-acc > summary::after { content: "+"; font-size: 1.1rem; color: #fff; }
.footer-acc[open] > summary::after { content: "–"; }
.footer-acc ul { padding-bottom: 8px; }
.footer-acc h3 { display: none; }

.gallery-lightbox { padding: 16px; }
.gallery-lightbox img { max-width: 100%; max-height: 78vh; }

.search-wrap { max-width: 100%; }
.page-hero { padding: 20px 0 8px; }
.lead { max-width: none; }

@media (hover: none), (pointer: coarse) {
  [data-tilt], .tp-doc-visual, .ct-float-card, .te-panel, .ab-float, .doc-card img {
    transform: none !important;
  }
  .treat-card:hover, .tp-opt:hover, .tp-rel:hover, .tp-blog:hover, .te-card:hover {
    transform: none;
  }
}

@media (min-width: 480px) {
  :root { --container-pad: 20px; }
  .improve-tiles { grid-template-columns: 1fr 1fr; }
  .help-grid, .stats-bar { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  :root { --container-pad: 24px; }
  .btn-row { flex-direction: row; align-items: center; width: auto; }
  .btn-row > .btn,
  .hero-copy .btn,
  .cta-band .btn,
  .doc-hero-copy .btn,
  .tp-hero .btn-row > .btn,
  .ct-hero .btn-row > .btn,
  .te-hero .btn-row > .btn,
  .cs-hero .btn-row > .btn,
  .ab-hero .btn-row > .btn {
    width: auto;
  }
  .grid-2, .doc-row, .quick-grid, .trust-trio, .footer-grid,
  .treat-grid, .grid-3, .gallery-grid, .why-grid, .proof, .cs-grid, .te-grid,
  .tp-opts, .tp-docs, .ct-actions, .ct-slots {
    grid-template-columns: 1fr 1fr;
  }
  .help-grid { grid-template-columns: repeat(4, 1fr); }
  .stats-bar { grid-template-columns: repeat(3, 1fr); }
  .footer-acc { border: 0; padding: 0; }
  .footer-acc > summary { display: none; }
  .footer-acc > *:not(summary) { display: block !important; }
  .footer-acc h3 { display: block; }
  .hero-banner {
    min-height: 420px;
    grid-template-rows: minmax(220px, 36vw) auto;
  }
  .tp-rels, .tp-blogs {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 46%);
    overflow-x: auto;
  }
}

@media (min-width: 1024px) {
  :root { --container-pad: 32px; }
  .treat-grid, .grid-3, .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .tp-hero-grid, .tp-split, .tp-weigh, .tp-step-card,
  .cs-hero-grid, .ab-hero-grid, .te-hero-grid, .ct-hero-grid,
  .discover, .about-lab, .doc-hero {
    grid-template-columns: 1fr 1fr;
  }
  .tp-shell { grid-template-columns: 200px minmax(0, 1fr); }
  .tp-toc-desk { display: flex; }
  .tp-toc-mobile { display: none; }
  .tp-toc { position: sticky; }
  .about-lab { grid-template-columns: minmax(200px, 260px) 1fr; min-height: 420px; }
  .hero-banner {
    display: block;
    position: relative;
    height: calc(100svh - var(--header-h));
    max-height: 640px;
    min-height: 480px;
  }
  .hero-slides, .hero-slide, .hero-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .hero-orbs {
    display: block;
    position: absolute;
    inset: 0;
  }
  .hero-copy {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
    background: linear-gradient(90deg, rgba(14, 47, 84, 0.9) 0%, rgba(26, 79, 139, 0.55) 48%, rgba(14, 47, 84, 0.22) 100%);
  }
  .hero-copy-grid { grid-template-columns: 1.15fr 0.85fr; gap: 40px; }
  .hero-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    grid-row: auto;
    grid-column: auto;
  }
}

@media (min-width: 1280px) {
  :root { --container-pad: 40px; --header-h: 80px; }
  .nav { display: flex; min-width: 0; justify-content: center; }
  .header-inner {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    align-items: center;
    column-gap: 20px;
  }
  .header-actions .header-help { display: flex; align-items: center; }
  .header-help > span:not(.header-help-ico) { display: none; }
  .header-actions .call-drop, .header-actions .btn-book { display: flex; }
  .header-actions .btn-book { display: inline-flex; width: auto; min-height: 44px; height: 44px; padding: 0 18px; }
  .nav-toggle { display: none; }
  .mobile-nav, .nav-backdrop, .mobile-cta { display: none !important; }
  .float-actions { display: flex; }
  body { padding-bottom: 0; }
  .logo img { height: 40px; max-width: none; }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; }
  .tp-opts, .tp-docs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1440px) {
  .nav-link, .mega-trigger { padding: 0 10px; font-size: 0.8125rem; }
  .nav-link::after, .mega-trigger::after { left: 10px; right: 10px; }
  .header-help > span:not(.header-help-ico) { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}