/* PoolLock layout — the grid and the section. Spec §4.5.
 *
 * The grid must be felt, not hidden. Column dividers are real 1px hairlines,
 * because hairlines are the only divider this brand has: no card shadows
 * standing in for structure, no gradients, no blur. Depth comes from grid and
 * tone.
 *
 * Breakpoints are min-width only:
 *   48rem  768px   two columns become possible
 *   64rem  1024px  three columns, split modules go side by side
 *   75rem  1200px  the wrap stops growing before the gutter does
 */

.pl-wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Every module is a section: its own surface, its own theme, closed by a
 * hairline. Stacking two sections therefore produces exactly one rule between
 * them, whatever their themes. */
.pl-section {
  padding-block: var(--section-y);
  background: var(--c-surface);
  color: var(--c-text);
  border-bottom: var(--rule) solid var(--c-rule);
}

/* Full-bleed bands (proof bar, safety statement) carry their own padding. */
.pl-section--flush {
  padding-block: 0;
}

/* ------------------------------------------------------------- the grid  */
/* Hairlines on the container's top and left, then on each cell's right and
 * bottom. Every rule is drawn exactly once, and the outer frame closes even
 * when the last row is short. */
.pl-grid {
  display: grid;
  border-top: var(--rule) solid var(--c-rule);
  border-left: var(--rule) solid var(--c-rule);
}

.pl-grid > * {
  border-right: var(--rule) solid var(--c-rule);
  border-bottom: var(--rule) solid var(--c-rule);
  padding: var(--sp-4) var(--sp-3);
}

/* Columns that divide without a frame — the pillar triad. The dividers sit
 * between the columns and nowhere else, so the section reads as three parts of
 * one statement rather than three boxes. */
.pl-columns {
  display: grid;
  gap: 0;
}

.pl-columns > * {
  padding-block: var(--sp-6);
}

@media (min-width: 48rem) {
  .pl-columns {
    grid-template-columns: repeat(var(--pl-columns, 3), 1fr);
  }

  .pl-columns > * {
    padding-inline: var(--sp-4);
    border-right: var(--rule) solid var(--c-rule);
  }

  .pl-columns > *:first-child {
    padding-left: 0;
  }

  .pl-columns > *:last-child {
    padding-right: 0;
    border-right: 0;
  }
}

@media (min-width: 48rem) {
  .pl-grid--2,
  .pl-grid--3,
  .pl-grid--4,
  .pl-grid--5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .pl-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .pl-grid--5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ------------------------------------------------------------ the split  */
/* The workhorse proportion: 7/5, image and text. `flip` reverses the visual
 * order only — the DOM order stays reading order, so the text is never
 * announced before the thing it describes. */
.pl-split {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 64rem) {
  .pl-split {
    grid-template-columns: 7fr 5fr;
    gap: var(--sp-6);
    align-items: center;
  }

  .pl-split--flip > :first-child {
    order: 2;
  }
}

/* ------------------------------------------------------------- measure   */
.pl-measure {
  max-width: var(--measure);
  text-wrap: pretty;
}

/* Stacks. Vertical rhythm inside a module, expressed once.
 *
 * These exist so no template ever carries a style attribute — the spec bans
 * inline styles outright, and a one-off margin is exactly how that ban starts
 * to leak. */
.pl-stack > * + * {
  margin-top: var(--sp-2);
}

.pl-stack--wide > * + * {
  margin-top: var(--sp-4);
}

/* A plain list of links: archives, footers, the 404's escape routes. */
.pl-links {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

/* A search field has no reason to run the full width of the page. */
.pl-form-narrow {
  max-width: 32rem;
}