/* ==========================================================================
   ServiceLine — Layout Foundation
   --------------------------------------------------------------------------
   Structural section/container/grid primitives that the future cinematic
   homepage and service pages will be built from. No page-specific layout
   lives here.
   ========================================================================== */

/* ---- Breakpoints (reference) ----------------------------------------------
   CSS custom properties cannot be used inside @media conditions, so these
   are documented here as the canonical values and used literally in the
   media queries below. If a build step (Sass/PostCSS) is introduced later,
   these become real variables at that point — see project report.

     mobile:   up to 767px
     tablet:   768px – 1199px
     desktop:  1200px and above
   -------------------------------------------------------------------- */

/* ---- Wide container -------------------------------------------------------- */

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

/* ---- Full-viewport section --------------------------------------------------
   For future cinematic full-screen moments (hero, phase transitions).
   Structural only — no background or motion applied here. */

.section-viewport {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

/* ---- Standard section block --------------------------------------------------
   The default vertical rhythm for a content section on any page —
   not full-viewport (.section-viewport), just consistent breathing
   room top/bottom. Used by nearly every section across every page. */

.section-block {
  padding-block: var(--space-10);
}

@media (max-width: 767px) {
  .section-block {
    padding-block: var(--space-8);
  }
}

/* ---- Full-bleed section -----------------------------------------------------
   Lets a section span full width while inner content can still opt back
   into a contained measure via .container / .container-wide. */

.section-bleed {
  width: 100%;
  max-width: none;
}

/* ---- Grid foundation ---------------------------------------------------------- */

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

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

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

/* ---- Responsive visibility helpers ---------------------------------------------- */

.hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .hide-mobile {
    display: initial;
  }
}

.hide-desktop {
  display: initial;
}

@media (min-width: 1200px) {
  .hide-desktop {
    display: none;
  }
}