/* =============================================================
   DENTAL INSIGHT THEME — Layout System
   ============================================================= */

/* ── ScrollSmoother Wrappers ─────────────────────────────── */
#smooth-wrapper {
  overflow: hidden;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

#smooth-content {
  overflow: visible;
  width: 100%;
  will-change: transform;
}

/* Fallback when ScrollSmoother is not active */
body.no-smooth #smooth-wrapper {
  position: static;
  overflow: visible;
}

body.no-smooth #smooth-content {
  will-change: auto;
}

/* ── Container ───────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.container--wide {
  max-width: var(--container-wide);
}

.container--flush {
  padding-inline: 0;
}

/* ── 12-Column Grid ──────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gap);
}

/* Column span helpers */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* Column start helpers */
.col-start-1  { grid-column-start: 1; }
.col-start-2  { grid-column-start: 2; }
.col-start-3  { grid-column-start: 3; }
.col-start-4  { grid-column-start: 4; }
.col-start-5  { grid-column-start: 5; }
.col-start-6  { grid-column-start: 6; }
.col-start-7  { grid-column-start: 7; }

/* ── Flex Utilities ──────────────────────────────────────── */
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-center      { justify-content: center; }
.justify-between     { justify-content: space-between; }
.justify-start       { justify-content: flex-start; }
.justify-end         { justify-content: flex-end; }
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }

/* ── Section Spacing ─────────────────────────────────────── */
.section {
  padding-block: var(--section-gap);
}

.section--sm {
  padding-block: clamp(3rem, 6vw, 6rem);
}

.section--lg {
  padding-block: clamp(8rem, 14vw, 14rem);
}

/* ── Section Header ──────────────────────────────────────── */
.section-header {
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.section-header--center {
  text-align: center;
}

.section-header--center p {
  margin-inline: auto;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.section-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background-color: var(--color-primary);
  flex-shrink: 0;
}

.section-title {
  margin-bottom: var(--space-6);
}

.section-desc {
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  max-width: 60ch;
}

/* ── Divider ─────────────────────────────────────────────── */
.divider {
  width: 100%;
  height: 1px;
  background: var(--color-border);
}

/* ── Responsive Breakpoints ──────────────────────────────── */

/* ≥ 480px — Mobile large */
@media (max-width: 480px) {
  .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    grid-column: span 12;
  }
  .col-1, .col-2, .col-3, .col-4, .col-5 {
    grid-column: span 6;
  }
}

/* ≥ 768px — Tablet */
@media (max-width: 768px) {
  .col-3, .col-4 {
    grid-column: span 6;
  }
  .col-5, .col-6, .col-7, .col-8 {
    grid-column: span 12;
  }
  .col-9, .col-10, .col-11, .col-12 {
    grid-column: span 12;
  }
  .hide-tablet {
    display: none !important;
  }
}

/* ≥ 1024px — Desktop */
@media (max-width: 1024px) {
  .hide-desktop {
    display: none !important;
  }
}

/* ── Main Content Offset (accounts for fixed navbar) ─────── */
.main-content {
  padding-top: var(--navbar-height);
}

/* ── Page Transition Overlay ─────────────────────────────── */
.page-transition-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: var(--z-overlay);
  pointer-events: none;
  transform: translateY(100%);
}