/* ==========================================================================
   layout.css — Section layout, grid utilities, and responsive breakpoints
   Futuristic CNC Solutions
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 1.5rem;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Section base
   -------------------------------------------------------------------------- */

section {
  padding-block: var(--section-padding) 0;
  position: relative;
  overflow: hidden;
}

/* Full-height section utility */
.full-height {
  min-height: 100vh;
}

/* --------------------------------------------------------------------------
   Flexbox utilities
   -------------------------------------------------------------------------- */

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   Responsive grid utilities
   Desktop default: 4-col, 3-col, 2-col grids
   -------------------------------------------------------------------------- */

.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: var(--gap-card);
}

/* Desktop (≥1200px) — default */
.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* --------------------------------------------------------------------------
   Two-column layout utility (about / contact sections)
   -------------------------------------------------------------------------- */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-card);
  align-items: start;
}

/* --------------------------------------------------------------------------
   Services grid — explicit responsive overrides
   Desktop: 4-col | Tablet: 2-col | Mobile: 1-col
   -------------------------------------------------------------------------- */

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-card);
}

/* --------------------------------------------------------------------------
   Tablet breakpoint: 768px – 1199px
   -------------------------------------------------------------------------- */

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

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .two-col {
    grid-template-columns: 1fr 1fr;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Mobile breakpoint: <768px
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .container {
    padding-inline: 1rem;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .two-col {
    grid-template-columns: 1fr;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Desktop breakpoint: ≥1200px (explicit, matches default above)
   -------------------------------------------------------------------------- */

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

  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .services-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------------------
   ScrollSmoother wrapper
   -------------------------------------------------------------------------- */

#smooth-wrapper {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

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

/* --------------------------------------------------------------------------
   ScrollSmoother Fallback
   -------------------------------------------------------------------------- */

body.no-smoother #smooth-wrapper {
  position: static;
  height: auto;
  overflow: visible;
}

body.no-smoother #smooth-content {
  position: static;
}

/* On mobile/touch, ScrollSmoother is skipped — use normal document flow */
@media (max-width: 767px) {
  #smooth-wrapper {
    position: static;
    height: auto;
    overflow: visible;
  }
  #smooth-content {
    position: static;
  }
}