/* =============================================================================
   Krakti — Layout / Structure
   assets/css/layout.css  —  enqueued as 'krakti-layout' (deps: krakti-base)
   Containers, grids, masthead/footer scaffolding, spacing rhythm. Layout and
   positioning only — minimal cosmetics (those live in components.css).
   Mobile-first; breakpoints at 640px and 1024px (min-width).
   ============================================================================= */

/* -----------------------------------------------------------------------------
   CONTAINERS — centered max-width wrappers with fluid gutter.
   ----------------------------------------------------------------------------- */
.k-container,
.k-container--wide,
.k-container--prose {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--k-gutter);
}

.k-container {
  max-width: var(--k-container);
}

.k-container--wide {
  max-width: var(--k-container-wide);
}

.k-container--prose {
  max-width: var(--k-measure);
}

/* Full-bleed escape hatch within a constrained container. */
.k-u-container-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* -----------------------------------------------------------------------------
   SECTION RHYTHM — vertical spacer between homepage surfaces.
   ----------------------------------------------------------------------------- */
.k-section-gap {
  margin-top: var(--k-space-section);
}

.k-section-gap:first-child {
  margin-top: 0;
}

/* -----------------------------------------------------------------------------
   CONTENT GRID — main + sidebar. Single column on mobile, two-col >= 1024.
   ----------------------------------------------------------------------------- */
.k-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--k-space-section-sm);
  width: 100%;
  max-width: var(--k-container);
  margin-inline: auto;
  padding-inline: var(--k-gutter);
}

.k-main {
  min-width: 0; /* allow grid children to shrink, prevent overflow */
}

/* Sidebar hidden on mobile; shown as a column on desktop. */
.k-sidebar {
  display: none;
  min-width: 0;
}

/* -----------------------------------------------------------------------------
   MASTHEAD SCAFFOLDING — sticky band + inner flex row.
   ----------------------------------------------------------------------------- */
.k-masthead {
  position: sticky;
  top: 0;
  z-index: var(--k-z-sticky);
  width: 100%;
}

.k-masthead__bar {
  width: 100%;
  max-width: var(--k-container-wide);
  margin-inline: auto;
  padding-inline: var(--k-gutter);
}

.k-masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-space-sm);
  min-height: calc(var(--k-tap) + var(--k-space-md));
}

.k-masthead__actions {
  display: flex;
  align-items: center;
  gap: var(--k-space-3xs);
  margin-left: auto;
}

/* -----------------------------------------------------------------------------
   SEARCH PANEL — collapsible region under the masthead.
   ----------------------------------------------------------------------------- */
.k-search {
  width: 100%;
}

/* Covers both the contract class and the actual .k-searchform that
   get_search_form() renders inside the panel. */
.k-search__form,
.k-search .k-searchform {
  display: flex;
  align-items: stretch;
  gap: var(--k-space-2xs);
  width: 100%;
  max-width: var(--k-container-wide);
  margin-inline: auto;
  padding-inline: var(--k-gutter);
}

.k-search__input {
  flex: 1 1 auto;
  min-width: 0;
}

/* -----------------------------------------------------------------------------
   PRIMARY NAV — horizontal list on desktop (drawer handles mobile).
   ----------------------------------------------------------------------------- */
.k-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(var(--k-space-sm), 1.4vw, var(--k-space-lg));
}

/* -----------------------------------------------------------------------------
   MOBILE DRAWER — off-canvas panel scaffold (positioning here, skin in comp).
   ----------------------------------------------------------------------------- */
.k-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--k-z-drawer);
  display: grid;
  pointer-events: none;
}

.k-drawer__backdrop {
  position: absolute;
  inset: 0;
  z-index: var(--k-z-backdrop);
}

.k-drawer__panel {
  position: relative;
  z-index: var(--k-z-drawer);
  display: flex;
  flex-direction: column;
  width: min(86vw, 22rem);
  height: 100%;
  margin-left: auto; /* slide in from the right */
  overflow-y: auto;
  overscroll-behavior: contain;
}

.k-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-space-sm);
}

/* -----------------------------------------------------------------------------
   BREAKING BAR SCAFFOLD — full-width band, inner aligned row.
   ----------------------------------------------------------------------------- */
.k-breaking__inner {
  display: flex;
  align-items: center;
  gap: var(--k-space-sm);
  width: 100%;
  max-width: var(--k-container-wide);
  margin-inline: auto;
  padding-inline: var(--k-gutter);
  min-height: var(--k-tap);
}

.k-breaking__headline {
  flex: 1 1 auto;
  min-width: 0; /* enables truncation of the headline link */
}

/* -----------------------------------------------------------------------------
   HERO MAGAZINE GRID — stacked on mobile; asymmetric lead + 2 secondary >=1024.
   ----------------------------------------------------------------------------- */
.k-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--k-gap-grid);
}

.k-hero__lead {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.k-hero__secondary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--k-gap-grid);
}

.k-hero__secondary-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* -----------------------------------------------------------------------------
   RIVER ("Laatste nieuws") — vertical stack of media-left rows.
   ----------------------------------------------------------------------------- */
.k-river__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--k-space-sm);
  flex-wrap: wrap;
}

.k-river__list {
  display: flex;
  flex-direction: column;
}

.k-river__item {
  min-width: 0;
}

/* -----------------------------------------------------------------------------
   SECTION BLOCK — header row + responsive BENTO grid.

   Composition (design findings 1, 4): each per-category block is no longer a
   flat river of equal cards. The first story is the LEAD (.k-section__lead);
   the rest sit in .k-section__support. Mobile-first this is a single column
   (lead on top, supporting cards beneath); at >=64rem it becomes an asymmetric
   editorial L — a tall lead beside a 2x2 of supporting cards — whose direction
   alternates per block (.k-section--lead-left / --lead-right) so the page
   zig-zags down the scroll instead of repeating one shape.

   Spacing rhythm is deliberate, not uniform: generous air under the section
   header (--k-rhythm-header) and a clear gap between the lead and the supporting
   stack (--k-rhythm-lead), with the supporting cards themselves on the tighter
   grid gap. This is the "breathe around structure, compress inside" contract.
   ----------------------------------------------------------------------------- */
.k-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--k-space-sm);
  flex-wrap: wrap;
}

.k-section__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--k-gap-grid);
}

/* Bento header → grid uses the named rhythm token (a touch more air than the
   default section header gap) so the header rule clearly precedes its block. */
.k-section--bento .k-section__header {
  margin-bottom: var(--k-rhythm-header);
}

/* --- Bento: mobile-first single column (lead, then supporting stack) -------- */
.k-section--bento .k-section__grid {
  /* The lead and the supporting wrapper stack; the looser lead->support gap
     gives the lead room to read as the anchor of the block. */
  gap: var(--k-rhythm-lead);
}

/* In a bento block the lead is a grid item; the grid `gap` (--k-rhythm-lead)
   owns the space below it, so neutralise the legacy .k-section__lead margin
   (components.css) here to avoid a doubled gap. */
.k-section--bento .k-section__lead {
  min-width: 0;
  margin-bottom: 0;
}

/* Supporting cards: their own grid so the lead can span independently on
   desktop. One column on phones, two from the small tier up. */
.k-section__support {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--k-gap-grid);
  min-width: 0;
}

/* -----------------------------------------------------------------------------
   RELATED GRID — 1 -> 2 -> 3 columns.
   ----------------------------------------------------------------------------- */
.k-related__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--k-gap-grid);
}

/* -----------------------------------------------------------------------------
   NEWSLETTER BAND — centered inner column.
   ----------------------------------------------------------------------------- */
.k-newsletter__inner {
  width: 100%;
  max-width: var(--k-container-narrow);
  margin-inline: auto;
  padding-inline: var(--k-gutter);
}

/* -----------------------------------------------------------------------------
   ARTICLE SHELL — header / prose measure / footer flow.
   ----------------------------------------------------------------------------- */
.k-article {
  width: 100%;
}

.k-article__header {
  width: 100%;
}

/* -----------------------------------------------------------------------------
   ARCHIVE / SEARCH / 404 — page roots flow within container.
   ----------------------------------------------------------------------------- */
.k-archive,
.k-search-results,
.k-404 {
  width: 100%;
}

/* -----------------------------------------------------------------------------
   FOOTER SCAFFOLDING — brand + nav columns + bottom bar.
   ----------------------------------------------------------------------------- */
.k-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--k-space-xl);
  width: 100%;
  max-width: var(--k-container-wide);
  margin-inline: auto;
  padding-inline: var(--k-gutter);
}

.k-footer__nav {
  min-width: 0;
}

.k-footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--k-space-2xs);
}

.k-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-space-2xs);
}

.k-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-space-sm);
  width: 100%;
  max-width: var(--k-container-wide);
  margin-inline: auto;
  padding-inline: var(--k-gutter);
}

/* -----------------------------------------------------------------------------
   PAGINATION — centered list row.
   ----------------------------------------------------------------------------- */
.k-pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--k-space-3xs);
}

/* =============================================================================
   BREAKPOINT — >= 640px  (small tablets / large phones landscape)
   ============================================================================= */
@media (min-width: 40rem) {
  /* Hero: lead spans full width; secondary becomes a 2-up row beneath. */
  .k-hero__secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Section grid: 2 columns for plain (legacy) section grids. Bento blocks
     drive their columns through the lead/support wrappers instead and override
     this via higher-specificity rules below, so this rule is a safe default. */
  .k-section__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Bento keeps a single-column outer grid (lead banner, then support stack);
     re-assert it so the legacy 2-col rule above can't split the wrappers. */
  .k-section--bento .k-section__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Bento at the small tier: lead is a wide river-style banner across the top,
     supporting cards pair up 2-up beneath it. */
  .k-section--bento .k-section__support {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Related: 3-up already comfortable at this width. */
  .k-related__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Footer: brand + columns flow into multi-column. */
  .k-footer__inner {
    grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr));
    gap: var(--k-space-2xl);
  }
}

/* =============================================================================
   BREAKPOINT — >= 1024px  (desktop: sidebar + asymmetric hero)
   ============================================================================= */
@media (min-width: 64rem) {
  /* Content + sidebar two-column shell. */
  .k-content-grid {
    grid-template-columns: minmax(0, 1fr) var(--k-sidebar);
    gap: var(--k-space-xl);
    align-items: start;
  }

  /* Sidebar visible and sticky within the scroll. */
  .k-sidebar {
    display: block;
    position: sticky;
    top: calc(var(--k-tap) + var(--k-space-xl));
  }

  /* Hero: asymmetric — large lead beside a stacked pair of secondary. */
  .k-hero__grid {
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(var(--k-space-lg), 2.4vw, var(--k-space-2xl));
  }

  .k-hero__secondary {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--k-space-lg);
  }

  /* Section grid: 4 across for plain (legacy) per-category rows. */
  .k-section__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* --- Bento desktop: asymmetric editorial L ------------------------------- */
  /* A tall lead beside a 2x2 of supporting cards. The outer grid is a single
     row of three tracks: the lead claims one wide track, the supporting wrapper
     claims the remaining two and runs its OWN 2-up grid inside. Direction
     alternates per block so the page reads as an editorial zig-zag, not one
     repeated shape. */
  .k-section--bento .k-section__grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    /* Looser horizontal gap between the lead and its supporting cluster than
       between the supporting cards themselves — a deliberate rhythm beat. */
    column-gap: clamp(var(--k-space-lg), 2.4vw, var(--k-space-2xl));
    row-gap: var(--k-gap-grid);
  }

  /* Lead-left (default / even blocks): lead in column 1, support in cols 2-3. */
  .k-section--lead-left .k-section__lead {
    grid-column: 1;
  }

  .k-section--lead-left .k-section__support {
    grid-column: 2 / -1;
  }

  /* Lead-right (odd blocks): mirror — support in cols 1-2, lead in the last. */
  .k-section--lead-right .k-section__lead {
    grid-column: 3;
  }

  .k-section--lead-right .k-section__support {
    grid-column: 1 / 3;
  }

  /* The supporting cluster stays a 2x2 at the desktop tier. */
  .k-section--bento .k-section__support {
    align-content: start;
    gap: var(--k-gap-grid);
  }

  /* Footer: brand + three nav columns. */
  .k-footer__inner {
    grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
  }
}

/* =============================================================================
   PRINT — collapse chrome, let article flow.
   ============================================================================= */
@media print {
  .k-masthead,
  .k-breaking,
  .k-nav,
  .k-drawer,
  .k-sidebar,
  .k-newsletter,
  .k-footer,
  .k-share,
  .k-pagination {
    display: none !important;
  }

  .k-content-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}