/* ─── Layout — containers, grids, section patterns ──────────────────────── */

/* ── Containers ──────────────────────────────────────────────────────────── */
.container        { max-width: var(--max-w-site);    margin-inline: auto; }
.container--page  { max-width: var(--max-w-page);    margin-inline: auto; }
.container--content { max-width: var(--max-w-content); margin-inline: auto; }
.container--narrow { max-width: var(--max-w-narrow); margin-inline: auto; }
.container--medium { max-width: var(--max-w-medium); margin-inline: auto; }
.container--text   { max-width: var(--max-w-text);   margin-inline: auto; }

/* ── Section padding ─────────────────────────────────────────────────────── */
.section-pad        { padding: var(--sp-20) var(--sp-7); }
.section-pad--sm    { padding: var(--sp-16) var(--sp-7); }
.section-pad--lg    { padding: var(--sp-28) var(--sp-7); }
.section-pad--hero  { padding: var(--sp-30) var(--sp-7) var(--sp-24); }
.section-pad--cta   { padding: var(--sp-20) var(--sp-7); }

/* ── Section backgrounds ─────────────────────────────────────────────────── */
.section-bg         { background: var(--t-bg); }
.section-bg--alt    { background: var(--t-bg-alt); }
.section-bg--card   { background: var(--t-card); }
.section-bg--ink    { background: var(--t-ink); color: var(--t-bg); }

/* ── Section borders ─────────────────────────────────────────────────────── */
.border-top         { border-top: 1px solid var(--t-line); }
.border-top--strong { border-top: 1px solid var(--t-line-strong); }
.border-bottom      { border-bottom: 1px solid var(--t-line); }

/* ── Standard grid layouts ───────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-7); }

/* Gap overrides */
.gap-1  { gap: var(--sp-1); }
.gap-2  { gap: var(--sp-2); }
.gap-4  { gap: var(--sp-4); }
.gap-6  { gap: var(--sp-6); }
.gap-8  { gap: var(--sp-8); }
.gap-10 { gap: var(--sp-10); }
.gap-12 { gap: var(--sp-12); }

/* ── Mosaic grid (1px gap, shared border background trick) ───────────────── */
.mosaic {
  display: grid;
  gap: 1px;
  background: var(--t-line);
  border: 1px solid var(--t-line);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.mosaic--2 { grid-template-columns: 1fr 1fr; }
.mosaic--3 { grid-template-columns: repeat(3, 1fr); }
.mosaic--4 { grid-template-columns: repeat(4, 1fr); }
.mosaic--6 { grid-template-columns: repeat(6, 1fr); }
.mosaic-cell { background: var(--t-card); }

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

/* ── Page wrapper ────────────────────────────────────────────────────────── */
.page-body {
  background: var(--t-bg);
  color: var(--t-ink);
  font-family: var(--font-sans);
  min-height: 100%;
}

.page-body--full {
  background: var(--t-bg);
  color: var(--t-ink);
  font-family: var(--font-sans);
  min-height: 100vh;
}

/* ── Dividers ────────────────────────────────────────────────────────────── */
.divider { height: 1px; background: var(--t-line); }
.divider--strong { height: 1px; background: var(--t-line-strong); }