/**
 * Layout Spine - Penresa Prototype
 * Widths, grids, and rhythm (global layout contract)
 */

:root {
  --layout-gutter: var(--container-padding);
  --layout-grid-gap: calc(var(--spacing-xxl) * 1.25);
}

/* Page wrapper */
.l-page {
  width: 100%;
}

/* Widths */
.l-width--reading,
.l-width--standard,
.l-width--wide {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.l-width--reading {
  max-width: var(--layout-width-reading);
}

.l-width--standard {
  max-width: var(--layout-width-standard);
}

.l-width--wide {
  max-width: var(--layout-width-wide);
}

/* Legacy container aliases (deprecated) */
.container {
  width: 100%;
  max-width: var(--layout-width-standard);
  margin: 0 auto;
  padding: 0 var(--layout-gutter);
}

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

/* Rhythm */
.l-section {
  padding-block: var(--layout-rhythm-default);
}

.l-section--tight {
  padding-block: var(--layout-rhythm-tight);
}

.l-section--default {
  padding-block: var(--layout-rhythm-default);
}

.l-section--loose {
  padding-block: var(--layout-rhythm-loose);
}

/* Grids */
.l-grid--single {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--layout-grid-gap);
}

.l-grid--split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--layout-grid-gap);
}

/* Editorial asym split with divider (C3) */
.l-grid--asym {
  display: grid;
  grid-template-columns: minmax(0, 0.66fr) minmax(0, 1px) minmax(0, 1fr);
  gap: var(--layout-grid-gap);
  align-items: start;
}

/* Rail / offset split (C4) */
.l-grid--rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--layout-grid-gap);
  align-items: start;
}

/* Divider */
.l-divider {
  width: var(--pipe-width);
  height: auto;
  background: var(--pipe-color);
  align-self: stretch;
}

/* Responsive grid collapse */
@media (max-width: 768px) {
  :root {
    --layout-rhythm-tight: calc(var(--section-pad-y) * 0.5);
    --layout-rhythm-default: calc(var(--section-pad-y) * 0.8);
    --layout-rhythm-loose: calc(var(--section-pad-y-lg) * 1.25);
  }

  .l-grid--split,
  .l-grid--asym,
  .l-grid--rail {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .l-divider {
    display: none;
  }
}
.l-pad-x {
  padding-left: var(--layout-gutter);
  padding-right: var(--layout-gutter);
}