/* ==========================================================================
   AUREVIA DENTAL CLINIC — LAYOUT & RESPONSIVE ARCHITECTURE
   ========================================================================== */

/* Main Page Flow */
main {
  flex: 1 0 auto;
  width: 100%;
  overflow-x: hidden;
}

/* Sections */
section {
  position: relative;
  width: 100%;
}

/* Bounded content container to prevent excessive stretching on ultra-wide screens */
.container, .container-wide, .container-narrow {
  width: 100%;
  box-sizing: border-box;
}

/* Fluid Grids */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }
}

.grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Responsive Overrides for Small Mobile Devices */
@media (max-width: 480px) {

  .about-section,
  .treatments-section,
  .mechanics-section,
  .journey-section,
  .transformations-section,
  .doctors-section,
  .reviews-section,
  .faq-section,
  .location-section,
  .final-cta-section {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }

  .section-header {
    margin-bottom: var(--space-8);
  }

  .static-comparison-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* Bottom padding safety cushion on mobile so content is never covered by the sticky conversion bar */
@media (max-width: 767px) {
  body {
    padding-bottom: 64px;
  }
}