/* =========================================================================
   PRESTIGE — Layout primitives
   A small, purposeful replacement for Bootstrap's grid: a container,
   a CSS Grid–based column system, and section rhythm helpers.
   ========================================================================= */

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

.container--narrow { max-width: var(--container-max); }

main { display: block; overflow-x: clip; }

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

.section--tight { padding-block: var(--section-pad-y-tight); }
.section--alt { background: var(--surface-1); }
.section--first { padding-top: calc(var(--header-h) + var(--sp-9)); }

.section__head {
  max-width: 44rem;
  margin-bottom: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
}
.section__head h2 { margin-top: 0.7rem; }
.section__head .lede { margin-top: 1rem; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .eyebrow { margin-inline: auto; }

.section__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  margin-bottom: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
}
.section__row .section__head { margin-bottom: 0; }

/* ---- Grid system: 12-column, gap-based, responsive via data-cols ------- */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap, clamp(1.25rem, 1rem + 1.2vw, 2rem));
}

.grid--gap-sm { --grid-gap: 1rem; }
.grid--gap-lg { --grid-gap: clamp(1.5rem, 1rem + 2vw, 3rem); }

/* span helpers, mobile-first: default full width, then override */
[class*="col-"] { grid-column: span 12; }

.col-6, .col-4, .col-3, .col-8 { grid-column: span 12; }

@media (min-width: 640px) {
  .sm\:col-6,
  .col-6,
  .col-4,
  .col-3 { grid-column: span 6; }
}

@media (min-width: 860px) {
  .col-4 { grid-column: span 4; }
  .col-8 { grid-column: span 8; }
}

@media (min-width: 1080px) {
  .col-3 { grid-column: span 3; }
}

/* ---- Flex helpers -------------------------------------------------------- */
.flex { display: flex; }
.flex--center { align-items: center; }
.flex--between { justify-content: space-between; }
.flex--wrap { flex-wrap: wrap; }
.flex--column { flex-direction: column; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); }
.gap-6 { gap: var(--sp-6); }

/* ---- Split layout (image + content), the workhorse of most sections --- */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}

@media (min-width: 960px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse .split__media { order: 2; }
  .split--reverse .split__content { order: 1; }
  .split--wide-media { grid-template-columns: 1.15fr 1fr; }
}

.split__media { position: relative; }

/* ---- Divider ------------------------------------------------------------- */
.divider {
  height: 1px;
  width: 100%;
  background: var(--surface-border-strong);
  border: none;
}
.divider--gold { background: var(--grad-gold-line); height: 1px; }

/* ---- Responsive visibility helpers --------------------------------------- */
@media (max-width: 859.98px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 860px) {
  .hide-desktop { display: none !important; }
}