/**
 * JP Consortium — Layout CSS
 * Grid system, containers, responsive breakpoints, page structure.
 */

/* ── Breakpoints (for reference — used via media queries below)
 *   sm:   ≥ 480px
 *   md:   ≥ 768px
 *   lg:   ≥ 1024px
 *   xl:   ≥ 1280px
 *   2xl:  ≥ 1440px
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── Container ───────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--space-8);
  }
}

@media (min-width: 1280px) {
  .container {
    padding-inline: var(--space-12);
  }
}

/* ── Page wrapper ────────────────────────────────────────────────────────── */
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-main {
  flex: 1;
  padding-top: var(--nav-height);   /* offset for sticky nav */
}

/* ── Section ─────────────────────────────────────────────────────────────── */
.section {
  padding-block: var(--section-pad-y);
}

.section--sm {
  padding-block: clamp(var(--space-8), 5vw, var(--space-16));
}

.section--lg {
  padding-block: clamp(var(--space-16), 10vw, var(--space-32));
}

/* ── Two-column editorial layout ─────────────────────────────────────────── */
.grid-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: start;
}

@media (min-width: 768px) {
  .grid-2col {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
}

.grid-2col--wide {
  /* Left column wider: 5/8 + 3/8 */
}
@media (min-width: 768px) {
  .grid-2col--wide {
    grid-template-columns: 5fr 3fr;
  }
}

.grid-2col--narrow-left {
}
@media (min-width: 768px) {
  .grid-2col--narrow-left {
    grid-template-columns: 3fr 5fr;
  }
}

/* ── Three-column grid ────────────────────────────────────────────────────── */
.grid-3col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .grid-3col {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* ── Four-column grid ────────────────────────────────────────────────────── */
.grid-4col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

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

/* ── Stats strip layout ──────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-1) 0;
}

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

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

/* ── Client logo strip ───────────────────────────────────────────────────── */
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-10);
  align-items: center;
  justify-content: flex-start;
}

@media (min-width: 768px) {
  .logo-strip {
    gap: var(--space-8) var(--space-12);
  }
}

/* ── Flex utilities ──────────────────────────────────────────────────────── */
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.items-center{ align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-2       { gap: var(--space-2); }
.gap-4       { gap: var(--space-4); }
.gap-6       { gap: var(--space-6); }
.gap-8       { gap: var(--space-8); }

/* ── Spacing utilities ───────────────────────────────────────────────────── */
.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }

/* ── Inner page hero banner ──────────────────────────────────────────────── */
.page-banner {
  background-color: var(--color-navy);
  padding-block: clamp(var(--space-12), 6vw, var(--space-20));
  border-bottom: 3px solid var(--color-amber);
}

.page-banner__label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semi);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-amber);
  margin-bottom: var(--space-3);
}

.page-banner__title {
  font-size: var(--text-5xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-white);
}

.page-banner__subtitle {
  margin-top: var(--space-4);
  font-size: var(--text-lg);
  color: rgba(255,255,255,.70);
  max-width: 60ch;
  line-height: var(--leading-relaxed);
}

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(255,255,255,.55);
  margin-bottom: var(--space-4);
}

.breadcrumb__sep {
  color: rgba(255,255,255,.30);
}

.breadcrumb a:hover {
  color: var(--color-white);
}

/* ── Coming soon / placeholder pages ────────────────────────────────────── */
.placeholder-page {
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-4);
}

.placeholder-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: var(--color-amber);
  color: var(--color-navy);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}