/**
 * Page layouts: container widths, vertical padding, block breakouts.
 *
 * Layout on <body> (inc/page-layout.php):
 *
 *   hcdsb-layout-full           edge to edge, no side padding
 *   hcdsb-layout-wide           up to --hcdsb-wide (1600px)
 *   hcdsb-layout-normal         Bootstrap's .container (up to 1320px)
 *   hcdsb-layout-narrow         up to --hcdsb-narrow (820px), for reading
 *   hcdsb-layout-left-sidebar   .container, sidebar 3/12 on the left
 *   hcdsb-layout-right-sidebar  .container, sidebar 3/12 on the right
 *
 * @package HCDSB
 * @subpackage Child
 */

:root {
    --hcdsb-wide: 1600px;
    --hcdsb-normal: 1320px;
    --hcdsb-narrow: 820px;
}

/* -------------------------------------------------------------------------
 * Widths
 * ---------------------------------------------------------------------- */

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

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

.hcdsb-container-full {
    padding-left: 0;
    padding-right: 0;
}

.hcdsb-container-full > .row {
    --bs-gutter-x: 0;
    margin-left: 0;
    margin-right: 0;
}

.hcdsb-layout-left-sidebar .sidebar,
.hcdsb-layout-right-sidebar .sidebar {
    margin-top: 2rem;
}

@media (min-width: 992px) {
    .hcdsb-layout-left-sidebar .sidebar,
    .hcdsb-layout-right-sidebar .sidebar {
        margin-top: 0;
    }
}

/* -------------------------------------------------------------------------
 * Vertical padding
 *
 * Utility classes on the content row (hcdsb_padding_class()). The body class
 * is hcdsb-padding-*, never hcdsb-pad-*, so these cannot land on <body>.
 * ---------------------------------------------------------------------- */

.hcdsb-pad-top {
    padding-top: 60px;
}

.hcdsb-pad-bottom {
    padding-bottom: 60px;
}

@media (max-width: 767px) {
    .hcdsb-pad-top {
        padding-top: 30px;
    }

    .hcdsb-pad-bottom {
        padding-bottom: 30px;
    }
}

/* -------------------------------------------------------------------------
 * Title band suppression
 *
 * The band is not rendered when hidden (see page.php); this closes the gap
 * the header spacing would otherwise leave.
 * ---------------------------------------------------------------------- */

.hcdsb-no-page-title .section:first-of-type {
    margin-top: 0;
}

/* -------------------------------------------------------------------------
 * Block breakouts: .alignwide and .alignfull
 *
 * Only top-level blocks (direct children of the <article>) break out, and
 * never on the sidebar layouts, where they would run over the sidebar.
 *
 *   Narrow  alignwide reaches the Normal width; alignfull the viewport
 *   Normal  alignwide reaches the Wide width;   alignfull the viewport
 *   Wide    alignwide stays put;                alignfull the viewport
 *   Full    already edge to edge
 *
 * min(..., 50vw) keeps a breakout inside the viewport on smaller screens.
 * ---------------------------------------------------------------------- */

.hcdsb-layout-narrow .hcdsb-content > article > .alignfull,
.hcdsb-layout-normal .hcdsb-content > article > .alignfull,
.hcdsb-layout-wide .hcdsb-content > article > .alignfull {
    width: auto;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.hcdsb-layout-narrow .hcdsb-content > article > .alignwide {
    width: auto;
    max-width: none;
    margin-left: calc(50% - min(var(--hcdsb-normal) / 2, 50vw));
    margin-right: calc(50% - min(var(--hcdsb-normal) / 2, 50vw));
}

.hcdsb-layout-normal .hcdsb-content > article > .alignwide {
    width: auto;
    max-width: none;
    margin-left: calc(50% - min(var(--hcdsb-wide) / 2, 50vw));
    margin-right: calc(50% - min(var(--hcdsb-wide) / 2, 50vw));
}

/*
 * 50vw includes the scrollbar, so a full breakout is a few pixels wider than
 * the visible viewport. `clip` trims that without making a scroll container,
 * which would break position: sticky inside the page.
 */
.hcdsb-layout-narrow .section,
.hcdsb-layout-normal .section,
.hcdsb-layout-wide .section {
    overflow-x: clip;
}