/**
 * @file grid.css
 * Page-level layout using CSS Grid. Bootstrap 5 grid is available
 * for inner components, but page regions use native CSS Grid for
 * full control and zero Bootstrap dependency at the page level.
 */

/* ── Container ────────────────────────────────────────────────────────────── */
.mp-container {
  width: 100%;
  max-width: var(--mp-container-max);
  margin-inline: auto;
  padding-inline: var(--mp-space-4);
}

@media (min-width: 576px)  { .mp-container { padding-inline: var(--mp-space-6); } }
@media (min-width: 992px)  { .mp-container { padding-inline: var(--mp-space-8); } }
@media (min-width: 1400px) { .mp-container { padding-inline: var(--mp-space-10); } }

/* ── Page Layout: Content + Sidebar ──────────────────────────────────────── */
.mp-page-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mp-gap);
  align-items: start;
  padding-block: var(--mp-space-8);
}

/* One sidebar (default) */
@media (min-width: 992px) {
  .mp-page-layout.has-sidebar-first {
    grid-template-columns: var(--mp-sidebar-width) 1fr;
    grid-template-areas: 'sidebar-first content';
  }

  .mp-page-layout.has-sidebar-second {
    grid-template-columns: 1fr var(--mp-sidebar-width);
    grid-template-areas: 'content sidebar-second';
  }

  .mp-page-layout.has-both-sidebars {
    grid-template-columns: var(--mp-sidebar-width) 1fr var(--mp-sidebar-width);
    grid-template-areas: 'sidebar-first content sidebar-second';
  }
}

/* Region assignments */
.mp-main-content   { grid-area: content; min-width: 0; }
.mp-sidebar-first  { grid-area: sidebar-first; min-width: 0; }
.mp-sidebar-second { grid-area: sidebar-second; min-width: 0; }

/* ── Footer Grid ──────────────────────────────────────────────────────────── */
.mp-footer-widgets {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mp-space-8);
}

@media (min-width: 576px) {
  .mp-footer-widgets { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
  .mp-footer-widgets { grid-template-columns: repeat(3, 1fr); }
}