/**
 * @file node-content-pages.css
 * Spacing for simple content pages built from stacked image+text sections
 * (Küla lugu, the Matkarada landing + subpages, and any future Basic Page
 * using the same chessboard pattern). Scoped to .node--type-page rather
 * than individual node IDs, since this is a reusable pattern across many
 * pages, not a one-off treatment.
 */

/*
 * Gap between Layout Builder SECTIONS (not blocks within one section -
 * this is one level higher). Generic [class*="layout--"] rather than just
 * .layout--twocol-section, so it covers every layout variant (onecol
 * included) uniformly - found 2026-09-23 missing entirely for onecol
 * sections specifically (two stacked accordion blocks, each its own
 * onecol section, had zero gap between them; twocol sections already had
 * their own margin-bottom below, but nothing generic covered onecol).
 */
.node--type-page [class*="layout--"] {
  margin-bottom: 3rem;
}

.node--type-page [class*="layout--"]:last-child {
  margin-bottom: 0;
}

/*
 * Explicitly control the two-column layout ourselves (display: flex +
 * a single breakpoint) rather than relying on core's own responsive
 * behavior for this layout - core stacks columns earlier than we want,
 * and our own padding/gap was pushing it under that threshold even at
 * desktop widths.
 */
.node--type-page .layout--twocol-section {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 2rem;
}

.node--type-page .layout__region--first,
.node--type-page .layout__region--second {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 640px) {
  .node--type-page .layout--twocol-section {
    flex-wrap: wrap;
  }

  .node--type-page .layout__region--first,
  .node--type-page .layout__region--second {
    flex-basis: 100%;
  }
}

.node--type-page .layout__region--first img,
.node--type-page .layout__region--second img {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg, var(--radius));
}