/**
 * layout.css — Site-wide layout primitives — .kwl-container, the 12-column grid utility, generic .kwl-section wrapper, shared section headers.
 *
 * Part of the KWL360 split stylesheet. Load order lives in
 * functions.php; responsive.css loads next-to-last so its rules
 * reliably win the cascade against every file before it.
 * @package KWL360
 */

.kwl-container{ max-width: var(--kwl-container); margin: 0 auto; padding: 0 var(--kwl-gutter); }

/* Heading scale variants set via body class from customizer (progressive enhancement) */
.kwl-section-title{ font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); }

#stories .kwl-section-kicker{ background: var(--kwl-ch-stories); }

#ai .kwl-section-kicker{ background: var(--kwl-ch-ai); }

#teacher .kwl-section-kicker{ background: var(--kwl-ch-teacher); }/* -----------------------------------------------------------------------
   0b. 12-Column Grid System (exact spec: 12 cols, 24px gutter)
   -------------------------------------------------------------------- */
.kwl-grid12{ display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--kwl-gutter); }
.kwl-col-1{ grid-column: span 1; } .kwl-col-2{ grid-column: span 2; }
.kwl-col-3{ grid-column: span 3; } .kwl-col-4{ grid-column: span 4; }
.kwl-col-5{ grid-column: span 5; } .kwl-col-6{ grid-column: span 6; }
.kwl-col-7{ grid-column: span 7; } .kwl-col-8{ grid-column: span 8; }
.kwl-col-9{ grid-column: span 9; } .kwl-col-10{ grid-column: span 10; }
.kwl-col-11{ grid-column: span 11; } .kwl-col-12{ grid-column: span 12; }/* -----------------------------------------------------------------------
   7. Section header (shared)
   -------------------------------------------------------------------- */
.kwl-section{ padding: 36px 0; }
.kwl-section-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.kwl-section-kicker{ display: block; width: 34px; height: 4px; border-radius: 2px; background: var(--kwl-accent, #FFBB00); margin-bottom: 10px; }
.kwl-section-title{ margin: 0; font-weight: 900; letter-spacing: -.01em; color: var(--kwl-ink); }
.kwl-section-subtitle{ margin: 4px 0 0; color: var(--kwl-ink-soft); font-size: .95rem; }
.kwl-section-link{ flex-shrink: 0; font-weight: 700; color: var(--kwl-primary); display: flex; align-items: center; gap: 6px; }
.kwl-section-link:hover{ color: var(--kwl-accent-dark); }
.kwl-empty-state{ text-align: center; padding: 40px 0; color: var(--kwl-ink-soft); }
.kwl-islamic-trio .kwl-col-5,
.kwl-islamic-trio .kwl-col-4,
.kwl-islamic-trio .kwl-col-3{ display: flex; flex-direction: column; height: 260px; }

/* Strong (priority) homepage sections get a touch more visual weight */
.kwl-section-strong .kwl-section-title{ font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem); }
.kwl-teacher-redesign .kwl-col-3,
.kwl-teacher-redesign .kwl-col-6{ display: flex; flex-direction: column; gap: 14px; height: 400px; }