/* ==========================================================================
   layout.css — EditingTools.pro
   Containers, the section rhythm, and the reusable grids. Mobile-first.
   Breakpoints: 480 / 768 / 1024 / 1440.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: 1440px; }

/* Page skeleton ---------------------------------------------------------- */
.page { display: flex; flex-direction: column; min-height: 100svh; }
main  { flex: 1 0 auto; }

/* Section rhythm --------------------------------------------------------- */
.section { padding-block: var(--s-7); }
@media (min-width: 768px)  { .section { padding-block: var(--s-8); } }
@media (min-width: 1024px) { .section { padding-block: var(--s-9); } }

.section--sunken { background: var(--bg-sunken); }
.section--ruled  { border-top: 1px solid var(--hairline); }

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-6);
  max-width: 62ch;
}
.section__head--split {
  max-width: none;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.section__lead { color: var(--text-muted); font-size: var(--fs-sm); }

/* The eyebrow: small uppercase mono label. Used above sections, on the
   readout panel, and on promo cards. One of the direction's signatures. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.eyebrow--accent { color: var(--primary-text); }
.eyebrow::before {
  content: "";
  inline-size: 18px;
  block-size: 1px;
  background: currentColor;
  opacity: 0.6;
}
.eyebrow--bare::before { content: none; }

/* Grids ------------------------------------------------------------------ */
.grid { display: grid; gap: var(--s-4); }

.grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

/* 1 col -> 2 at 480 -> 4 at 1024. The category and tool card grids. */
.grid--1-2-4 { grid-template-columns: 1fr; }
@media (min-width: 480px)  { .grid--1-2-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid--1-2-4 { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); } }

.grid--1-2-3 { grid-template-columns: 1fr; }
@media (min-width: 480px)  { .grid--1-2-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid--1-2-3 { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }

/* Tool page: inputs beside a sticky readout on desktop. Used from Phase 4,
   defined here so the template inherits it.

   align-items: start matters more than it looks. Without it the grid stretches
   both columns to the height of the taller one, the sidebar's own grid then
   stretches ITS rows to fill, and the chart ends up floating hundreds of
   pixels below the readout with nothing in between. */
   And the tracks are minmax(0, ...) rather than plain fr. A grid item's
   automatic minimum size is min-content, so on a 360px phone the payment
   schedule's five numeric columns were sizing the whole column to 420px and
   pushing the page sideways — even though the table sits in its own
   overflow-x container. The scroll container only helps once the track is
   allowed to be narrower than its contents. */
.grid--tool { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.grid--tool > * { min-inline-size: 0; }
.grid--tool .stack > * { min-inline-size: 0; }
@media (min-width: 1024px) {
  .grid--tool { grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.6fr); gap: var(--s-6); }
  .grid--tool > .is-sticky { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
}

/* Prose ------------------------------------------------------------------ */
.prose { max-width: 68ch; color: var(--text-muted); }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { color: var(--text-strong); margin-top: var(--s-6); font-size: var(--fs-lg); }
.prose h3 { color: var(--text-strong); margin-top: var(--s-5); font-size: var(--fs-md); }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--primary-text); font-weight: 500; }
.prose ul { list-style: none; display: grid; gap: var(--s-2); }
.prose ul li { padding-left: var(--s-5); position: relative; }
.prose ul li::before {
  content: "";
  position: absolute; left: 0; top: 0.7em;
  inline-size: 10px; block-size: 1px;
  background: var(--primary);
}

/* Utility ---------------------------------------------------------------- */
.stack       { display: grid; gap: var(--s-4); }
.stack--sm   { display: grid; gap: var(--s-2); }
.stack--lg   { display: grid; gap: var(--s-6); }
.row         { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.row--tight  { gap: var(--s-2); }
.push        { margin-left: auto; }
.center      { text-align: center; }
.hide        { display: none !important; }

@media (max-width: 1023px) { .desk-only { display: none !important; } }
@media (min-width: 1024px) { .mob-only  { display: none !important; } }

/* Page intro block above a tool or studio, and a spaced notice. */
.page-intro { margin-bottom: var(--s-5); }
.page-note  { margin-top: var(--s-5); }