/* ==========================================================================
   PC BYTES - Layout System
   Page structure, grids, flex utilities, sections
   ========================================================================== */

/* -----------------------------------------------------------------------
   Page Visibility
   ----------------------------------------------------------------------- */
.page {
  display: none;
  min-height: calc(100vh - var(--navbar-height));
  padding-top: var(--navbar-height);
}

.page.active {
  display: block;
}

/* -----------------------------------------------------------------------
   No-Scroll Utility (for open modals)
   ----------------------------------------------------------------------- */
body.no-scroll {
  overflow: hidden;
}

/* -----------------------------------------------------------------------
   Sections
   ----------------------------------------------------------------------- */
.section {
  padding: var(--space-4xl) 0;
}

.section--dark {
  background: var(--bg-dark);
}

.section--surface {
  background: var(--bg-surface);
}

/* -----------------------------------------------------------------------
   Grid System
   ----------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-lg);
}

.grid--products {
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: var(--space-lg);
}

.grid--categories {
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md);
}

.grid--services {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-lg);
}

.grid--reviews {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-lg);
}

/* -----------------------------------------------------------------------
   Flexbox Utilities
   ----------------------------------------------------------------------- */
.flex {
  display: flex;
}

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

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

.flex--wrap {
  flex-wrap: wrap;
}

/* -----------------------------------------------------------------------
   Form Layout
   ----------------------------------------------------------------------- */
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}