/* ==========================================================================
   LAYOUT LIB — "bento"
   --------------------------------------------------------------------------
   The familiar bento spread: a tight, even grid of rounded surface cards with
   a soft lift on hover. Modern, dashboard-adjacent, dense. Kept as ONE option
   among the five — no longer the default the renderer falls into by reflex.

   Structure ONLY — no palette HEX, no font families (theme.css owns those).
   Consumes theme color vars with fallbacks:
     --color-bg --color-text --color-accent --color-surface --color-border
   Link order: base.css → theme.css → layout.css (this). Tokens from base.css.
   ========================================================================== */

/* --- Site frame -------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg, var(--color-surface));
  border-block-end: var(--border-width) solid var(--color-border, currentColor);
}
.site-nav {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-md);
  padding-block: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.nav-brand {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-lg);
  text-decoration: none;
}
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-size: var(--text-sm);
}
.nav-links a { text-decoration: none; }
.nav-links a:hover { color: var(--color-accent, currentColor); }
@media (min-width: 768px) {
  .site-nav { padding-inline: var(--space-xl); }
}

/* --- Hero -------------------------------------------------------------- */
.hero {
  padding-block: var(--space-2xl);
  padding-inline: var(--space-md);
}
.hero .container { max-width: var(--container); }
.hero__title {
  font-family: var(--font-sans);
  font-weight: 700;
  max-width: 20ch;
}
.hero__lead {
  margin-block-start: var(--space-md);
  max-width: var(--measure);
  font-size: var(--text-lg);
  color: var(--color-accent, currentColor);
}
@media (min-width: 768px) {
  .hero { padding-inline: var(--space-xl); }
}

/* --- Bento card grid --------------------------------------------------- */
.section-title,
.page-title { font-family: var(--font-sans); font-weight: 700; }
.page-hero { padding-block: var(--space-2xl) var(--space-lg); }

.articles-grid {
  display: grid;
  gap: var(--space-md);
  margin-block-start: var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.article-card {
  padding: var(--space-lg);
  background: var(--color-surface, transparent);
  border: var(--border-width) solid var(--color-border, currentColor);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.article-card:hover { transform: translateY(-4px); }
.article-card__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-lg); /* DS-11: h5-sized on mobile */
  line-height: var(--leading-snug);
}
@media (min-width: 768px) {
  .article-card__title { font-size: var(--text-xl); } /* DS-11: h4-sized on desktop */
}
.article-card__link { text-decoration: none; }
.article-card__link::after { content: " →"; color: var(--color-accent, currentColor); }
.article-card__link:hover { color: var(--color-accent, currentColor); }

/* --- Articles list page ------------------------------------------------ */
.articles-index .container { max-width: var(--container); }
.article-list {
  margin-block-start: var(--space-lg);
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}
.article-list__item {
  padding: var(--space-md);
  background: var(--color-surface, transparent);
  border: var(--border-width) solid var(--color-border, currentColor);
  border-radius: var(--radius-md);
}
.article-list__title { margin: 0; } /* DS-11: <h4> wrapper reset */
.article-list__link {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-lg); /* DS-11: h5-sized on mobile */
  text-decoration: none;
}
@media (min-width: 768px) {
  .article-list__link { font-size: var(--text-xl); } /* DS-11: h4-sized on desktop */
}
.article-list__link:hover { color: var(--color-accent, currentColor); }

/* --- Article body ------------------------------------------------------ */
.prose { margin-block: var(--space-2xl); }
.prose h1 { font-family: var(--font-sans); font-weight: 700; margin-block-end: var(--space-lg); }
.prose :is(h2, h3) { font-family: var(--font-sans); font-weight: 700; }

/* --- Footer ------------------------------------------------------------ */
.site-footer {
  margin-block-start: var(--space-2xl);
  padding-block: var(--space-lg);
  border-block-start: var(--border-width) solid var(--color-border, currentColor);
}
.footer-copy { font-size: var(--text-sm); }