/* =============================================================================
   PEARL VEIL — LAYOUT SYSTEM
   ─────────────────────────────────────────────────────────────────────────────
   Container, grid, section, and spacing utilities.
   All layout building blocks used across every page.
   ============================================================================= */

/* ─── CONTAINER ───────────────────────────────────────────────────────────────
   .container        — standard centered content wrapper
   .container-narrow — for text-heavy pages (about, policies)
   .container-wide   — for full-width grids
----------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container-narrow {
  width: 100%;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container-wide {
  width: 100%;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* ─── SECTIONS ────────────────────────────────────────────────────────────────  */

.section {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
}

.section-sm {
  padding-top: calc(var(--section-gap) * 0.6);
  padding-bottom: calc(var(--section-gap) * 0.6);
}

.section-lg {
  padding-top: calc(var(--section-gap) * 1.4);
  padding-bottom: calc(var(--section-gap) * 1.4);
}

/* Alternate background sections */
.section-ivory {
  background-color: var(--color-bg);
}

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

.section-dark {
  background-color: var(--color-heading);
  color: var(--color-ivory);
}

/* ─── GRID SYSTEM ─────────────────────────────────────────────────────────────  */

/* Base grid — uses CSS custom properties for column count */
.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-6));
}

/* Auto-responsive grids — columns collapse gracefully */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr));
  gap: var(--space-8);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--space-6);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: var(--space-6);
}

/* Product grids — specific column behavior */
.product-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

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

@media (max-width: 1100px) {
  .product-grid-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 860px) {
  .product-grid-4,
  .product-grid-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
}

@media (max-width: 480px) {
  .product-grid-4,
  .product-grid-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
}

/* ─── FLEXBOX UTILITIES ───────────────────────────────────────────────────────  */

.flex       { display: flex; }
.flex-col   { display: flex; flex-direction: column; }
.flex-wrap  { flex-wrap: wrap; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start { display: flex; align-items: flex-start; }
.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); }

/* ─── SPACING UTILITIES ───────────────────────────────────────────────────────  */

.mt-auto { margin-top: auto; }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }

/* ─── DISPLAY UTILITIES ───────────────────────────────────────────────────────  */

.hidden   { display: none !important; }
.block    { display: block; }
.relative { position: relative; }
.absolute { position: absolute; }
.overflow-hidden { overflow: hidden; }

/* Responsive visibility */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}

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

/* ─── ASPECT RATIOS ───────────────────────────────────────────────────────────  */

.aspect-square   { aspect-ratio: 1 / 1; }
.aspect-portrait { aspect-ratio: 3 / 4; }
.aspect-landscape{ aspect-ratio: 4 / 3; }
.aspect-video    { aspect-ratio: 16 / 9; }
.aspect-hero     { aspect-ratio: 16 / 7; }

/* ─── FULL-BLEED SECTIONS ─────────────────────────────────────────────────────  */

.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* ─── STICKY POSITIONING ──────────────────────────────────────────────────────  */

.sticky-top {
  position: sticky;
  top: var(--space-8);
}

/* ─── TEXT ALIGNMENT ──────────────────────────────────────────────────────────  */

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* ─── MAIN CONTENT OFFSET ─────────────────────────────────────────────────────
   Pushes page content below the fixed navigation bar
----------------------------------------------------------------------------- */

.main-content {
  padding-top: calc(var(--announcement-height) + var(--nav-height));
}

/* When announcement bar is hidden */
.main-content.no-announcement {
  padding-top: var(--nav-height);
}