/* ==========================================================================
   LAYOUT LIB — "magazine"
   --------------------------------------------------------------------------
   An asymmetric, featured-first editorial grid. The first card spans wide as
   a lead story; the rest flow into a responsive multi-column grid beneath it.
   Confident, art-directed spread — but built from the same flat markup.

   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 {
  border-block-end: calc(var(--border-width) * 3) solid var(--color-accent, 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: 800;
  font-size: var(--text-xl);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-size: var(--text-sm);
  font-weight: 600;
}
.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);
  background: var(--color-surface, transparent);
}
.hero .container { max-width: var(--container); }
.hero__title {
  font-family: var(--font-sans);
  font-weight: 800;
  max-width: 16ch;
  line-height: var(--leading-tight);
}
.hero__lead {
  margin-block-start: var(--space-md);
  max-width: var(--measure);
  font-size: var(--text-xl);
  font-family: var(--font-serif, var(--font-sans));
}
@media (min-width: 768px) {
  .hero { padding-inline: var(--space-xl); }
}

/* --- Featured-first article grid -------------------------------------- */
.section-title,
.page-title {
  font-family: var(--font-sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.page-hero { padding-block: var(--space-2xl) var(--space-lg); }

.articles-grid {
  display: grid;
  gap: var(--space-lg);
  margin-block-start: var(--space-xl);
  grid-template-columns: 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-md);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 9rem;
  transition: transform 0.25s ease;
}
.article-card:hover { transform: translateY(-3px); }

/* Lead story: first card spans full width and reads larger. */
.article-card:first-child {
  background: var(--color-accent, currentColor);
  color: var(--color-bg, var(--color-surface));
  border-color: var(--color-accent, currentColor);
  min-height: 14rem;
}
.article-card:first-child .article-card__title { font-size: var(--text-3xl); }
.article-card:first-child .article-card__link:hover { color: inherit; }

.article-card__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}
.article-card__link { text-decoration: none; }
.article-card__link:hover { color: var(--color-accent, currentColor); }

@media (min-width: 768px) {
  .articles-grid { grid-template-columns: repeat(2, 1fr); }
  .article-card:first-child { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .articles-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- 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: 1fr;
}
.article-list__item {
  border-inline-start: calc(var(--border-width) * 3) solid var(--color-accent, currentColor);
  padding-inline-start: var(--space-md);
  padding-block: var(--space-xs);
}
.article-list__link {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-lg);
  text-decoration: none;
}
.article-list__link:hover { color: var(--color-accent, currentColor); }
@media (min-width: 768px) {
  .article-list { grid-template-columns: repeat(2, 1fr); }
}

/* --- Article body ------------------------------------------------------ */
.prose { margin-block: var(--space-2xl); }
.prose h1 {
  font-family: var(--font-sans);
  font-weight: 800;
  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: calc(var(--border-width) * 3) solid var(--color-accent, currentColor);
}
.footer-copy {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}