/* css/layout.css */
@layer layout {
  .container,
  .region-breadcrumb,
  main {
    max-width: 75rem;
    margin-inline: auto;
    padding-inline: var(--space-m);
  }

  /* ---------- Sidebars ----------
     Classes posées sur <body> par mundi_preprocess_html().
     Mobile : une colonne, dans l'ordre du HTML (contenu puis sidebars),
     pour garder un ordre de tabulation cohérent. */
  .one-sidebar .layout-main,
  .two-sidebars .layout-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "content"
      "first"
      "second";
    gap: var(--space-xl);
  }

  .layout-content {
    grid-area: content;
  }

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

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

  /* md : une sidebar à côté du contenu. */
  @media (min-width: 768px) {
    .has-sidebar-first.one-sidebar .layout-main {
      grid-template-columns: 16rem minmax(0, 1fr);
      grid-template-areas: "first content";
    }

    .has-sidebar-second.one-sidebar .layout-main {
      grid-template-columns: minmax(0, 1fr) 16rem;
      grid-template-areas: "content second";
    }

    /* Deux sidebars : la seconde passe sous le contenu. */
    .two-sidebars .layout-main {
      grid-template-columns: 16rem minmax(0, 1fr);
      grid-template-areas:
        "first content"
        "first second";
    }
  }

  /* lg : trois colonnes. */
  @media (min-width: 1024px) {
    .two-sidebars .layout-main {
      grid-template-columns: 14rem minmax(0, 1fr) 14rem;
      grid-template-areas: "first content second";
    }
  }

  :is(.auto-grid, .view--auto-grid > .view-content) {
    display: grid;
    grid-template-columns: repeat(
      auto-fill,
      minmax(min(var(--grid-min, 250px), 100%), 1fr)
    );
    gap: var(--grid-gap, var(--space-l));
  }
}