/* ==========================================================================
   /es/ — the Spanish client site.

   home.css already carries the whole system: sections, cells, stats, the
   accordion, the snapshot panel. This sheet adds only what the client pages
   need and the English portfolio never did: a two-column cell grid, the
   numbered method list, the article list and the language switch. Every value
   comes from tokens.css; nothing here declares a raw colour or size.
   ========================================================================== */

/* Two columns, and exactly two: these cells carry a heading and a full paragraph, and auto-fit
   turned them into four 300px columns on a wide screen, which set the copy at four words a line. */
.cells.c2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) }

@media (min-width: 900px) {
  .cells.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-columns) }
}

.cell-t { margin: 10px 0 8px; font-size: var(--text-lede); color: var(--ink) }
.cell-t a { color: inherit }

.list { margin: 14px 0 0; padding-left: 1.1em; color: var(--ink-3) }
.list li { margin-top: 8px; font-size: var(--text-dense); line-height: 1.6 }

/* Section-level note: the nested .node .note in home.css only styles the one
   inside a timeline node. */
.wrap > .note {
  margin-top: var(--gap-block);
  max-width: 62ch;
  font-size: var(--text-dense);
  line-height: 1.6;
  color: var(--ink-4);
}

/* The method: four steps, numbered by the markup rather than by a counter so
   the order survives being read aloud. */
.steps { margin: var(--gap-block) 0 0; padding: 0; list-style: none }

.steps li {
  padding: 20px 24px 24px 0;
  border-bottom: var(--rule-w) solid var(--rule);
}

.steps p { margin: 0; max-width: 68ch; font-size: var(--text-dense); line-height: 1.6; color: var(--ink-3) }

@media (min-width: 900px) {
  .steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-columns) }
}

.posts { margin: var(--gap-block) 0 0; padding: 0; list-style: none }

.posts li {
  padding: 20px 0 24px;
  border-bottom: var(--rule-w) solid var(--rule);
}

.posts p { margin: 0; max-width: 68ch; font-size: var(--text-dense); line-height: 1.6; color: var(--ink-3) }

/* Article body: one measure, generous leading, nothing decorative. */
.prose { max-width: 68ch }
.prose p { margin-top: 16px; font-size: var(--text-dense); line-height: 1.7; color: var(--ink-2) }
.prose .cell-t { margin-top: 32px }

}

/* home.css hides every nav link but the CTA under 760px. The language switch has to survive that:
   it is the only way to reach the other language, and half of it (the slash and the current code)
   was rendering with its links hidden. */
@media (max-width: 760px) {
  .navlinks .lang a { display: inline }
}