/**
 * @file
 * Page-level structural rules for the druid theme.
 *
 * This layer holds rules that arrange regions, not rules that style their
 * contents — grids, flex containers, max-widths, page padding, sidebar
 * positioning. If a rule could move from `<header>` to `<aside>` without
 * changing meaning, it belongs here; if it's tied to a specific UI element
 * (a card, a button, a menu item), put it in css/components/.
 *
 * Classes referenced by templates/layout/page.html.twig:
 *   .layout-container        — outermost wrapper around the whole page
 *   .layout-content          — main content column inside <main>
 *   .layout-sidebar-first    — optional aside before content
 *   .layout-sidebar-second   — optional aside after content
 *
 * Container queries (@container) are a natural fit for region-internal
 * responsiveness — see todo.md for the rationale.
 */
@layer layout {

  .content-rail {
    max-width: var(--content-max-width);
    margin-inline: auto;
    padding-inline: var(--size-3);
  }

  main,
  footer {
    padding-block: var(--size-4);
    padding-inline: var(--size-3);
  }

  .region-primary-menu,
  .region-secondary-menu {
    padding-block: var(--size-3);
  }

  .top-nav__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  }

  .top-nav__left,
  .top-nav__right {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  /* ─────────────────────────────────────────────────────────────────────
     Sidebar layout
     ─────────────────────────────────────────────────────────────────────
     Body classes are set in druid_preprocess_html() (druid.theme):
       layout-no-sidebars, layout-one-sidebar, layout-sidebar-first,
       layout-sidebar-second, layout-two-sidebars.

     Source order inside <main> is content → sidebar_first → sidebar_second.
     On mobile, that's also the visual order (content first — best UX).
     At wider viewports, grid-template-areas re-orders sidebars around
     content without touching the DOM.

     No-sidebar pages skip the grid entirely; .layout-content just fills
     its parent rail. */

  body:is(.layout-sidebar-first, .layout-sidebar-second, .layout-two-sidebars) main > .content-rail {
    display: grid;
    gap: var(--size-4);
    grid-template-columns: minmax(0, 1fr);
  }

  body.layout-sidebar-first main > .content-rail {
    grid-template-areas: "content" "first";
  }
  body.layout-sidebar-second main > .content-rail {
    grid-template-areas: "content" "second";
  }
  body.layout-two-sidebars main > .content-rail {
    grid-template-areas: "content" "first" "second";
  }

  .layout-content        { grid-area: content; }
  .layout-sidebar-first  { grid-area: first; }
  .layout-sidebar-second { grid-area: second; }

  /* Tablet+: single-sidebar layouts side-by-side. */
  @media (min-width: 768px) {
    body.layout-sidebar-first main > .content-rail {
      grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
      grid-template-areas: "first content";
    }
    body.layout-sidebar-second main > .content-rail {
      grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
      grid-template-areas: "content second";
    }
  }

  /* Small-desktop+: two-sidebar layout becomes three columns. */
  @media (min-width: 1024px) {
    body.layout-two-sidebars main > .content-rail {
      grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--sidebar-width);
      grid-template-areas: "first content second";
    }
  }

}