/* ═══════════════════════════════════════════════════════════════
   LAYOUT — Grid, Container, Sections
   ═══════════════════════════════════════════════════════════════ */

/* ── Container ───────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-pad-x);
}

.container--wide  { max-width: var(--container-wide); }
.container--text  { max-width: var(--container-text); margin-inline: auto; }
.container--narrow{ max-width: var(--container-narrow); margin-inline: auto; }
.container--full  { max-width: 100%; padding-inline: 0; }

/* ── Section ─────────────────────────────────────────────────── */

.section {
  padding-block: var(--section-pad-y);
}

.section--sm  { padding-block: clamp(3rem, 5vw, 5rem); }
.section--lg  { padding-block: clamp(6rem, 12vw, 12rem); }
.section--xl  { padding-block: clamp(8rem, 16vw, 16rem); }

.section--cream    { background-color: var(--cream); }
.section--cream-dk { background-color: var(--cream-dark); }
.section--blue     { background-color: var(--blue); color: var(--text-on-dark); }
.section--blue-dk  { background-color: var(--blue-dark); color: var(--text-on-dark); }
.section--blue-dp  { background-color: var(--blue-deeper); color: var(--text-on-dark); }
.section--black    { background-color: var(--black); color: var(--text-on-dark); }

/* ── Grid Systems ────────────────────────────────────────────── */

.grid {
  display: grid;
  gap: var(--space-6);
}

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

.grid--auto-sm  { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grid--auto-md  { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.grid--auto-lg  { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }

.grid--split    { grid-template-columns: 1fr 1fr; align-items: center; }
.grid--split-lg { grid-template-columns: 1fr 1.4fr; align-items: center; }
.grid--split-xl { grid-template-columns: 1fr 2fr; align-items: center; }

.grid--gap-sm  { gap: var(--space-4); }
.grid--gap-lg  { gap: var(--space-10); }
.grid--gap-xl  { gap: var(--space-16); }

/* ── Flex 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; }
.flex-col     { display: flex; flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.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); }

/* ── Aspect Ratios ───────────────────────────────────────────── */

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

/* ── Visibility ──────────────────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Overflow / Clip ─────────────────────────────────────────── */

.overflow-hidden { overflow: hidden; }
.overflow-clip   { overflow: clip; }

/* ── Responsive Grid Breakdowns ──────────────────────────────── */

@media (max-width: 1024px) {
  .grid--4      { grid-template-columns: repeat(2, 1fr); }
  .grid--3      { grid-template-columns: repeat(2, 1fr); }
  .grid--split-xl { grid-template-columns: 1fr 1.5fr; }
}

/* 2-col grid that collapses to 1 col on mobile */
.grid--2-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

/* CTA row — same row on desktop, stacked on mobile */
.cta-row {
  display: flex;
  gap: var(--space-4);
}

@media (max-width: 480px) {
  .cta-row { flex-direction: column; align-items: flex-start; }
}

/* Flex wrap — useful for tag clouds / pill lists */
.flex-wrap-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Sticky sidebar — disabled on mobile */
.sticky-sidebar {
  position: sticky;
  top: 6rem;
}

@media (max-width: 768px) {
  .sticky-sidebar { position: relative; top: 0; }
}

@media (max-width: 768px) {
  .grid--4,
  .grid--3,
  .grid--2,
  .grid--split,
  .grid--split-lg,
  .grid--split-xl,
  .grid--2-col { grid-template-columns: 1fr; }

  .grid--gap-xl { gap: var(--space-8); }
}