/**
 * Paprika Atlas — Layout
 *
 * Sidlayout, grid-system, sektionsstruktur.
 * Fas 3 fyller pa med sidtyps-specifik layout.
 */

/* ═══════════════════════════════════════════
   SITE LAYOUT
   ═══════════════════════════════════════════ */

.site-main {
  min-height: 60vh;
}

/* ═══════════════════════════════════════════
   SECTION SPACING
   ═══════════════════════════════════════════ */

.section {
  padding-top: var(--s7);
  padding-bottom: var(--s7);
}

.section + .section {
  padding-top: 0;
}

/* ═══════════════════════════════════════════
   SECTION LABEL — Mono + horisontell linje
   Spec (steg 4b): "Section labels renderas
   med mono-typografi + efterfoljande linje."
   ═══════════════════════════════════════════ */

.section-label {
  display: flex;
  align-items: center;
  gap: var(--s4);
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--s5);
}

.section-label::after {
  content: '';
  flex: 1;
  height: var(--border-divider);
  background: var(--paper-dark);
}

/* ═══════════════════════════════════════════
   GRID BASES — startsida + artikellista
   Konkret per sidtyp fylls i fas 3.
   ═══════════════════════════════════════════ */

.grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
}

@media (max-width: 900px) {
  .grid-3col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .grid-3col {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════
   ARTICLE CONTENT WIDTH
   Spec: 780px container for enskild artikel.
   ═══════════════════════════════════════════ */

.content-narrow {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

/**
 * container--article: samma 780px bredd men som fullstandig
 * container med padding (for page.php och article-sections).
 */
.container--article {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}