/* ============================================================
   LAYOUT — containers, sections, header offset
   ============================================================ */

.container {
    width: var(--pe-container);
    max-width: var(--pe-container-max);
    margin-inline: auto;
}

.container-narrow {
    width: var(--pe-container);
    max-width: 760px;
    margin-inline: auto;
}

main.site-main {
    display: block;
    padding-top: var(--pe-header-h);
    min-height: 60vh;
}

section {
    padding-block: var(--pe-sp-9);
    position: relative;
}

section > .container { width: var(--pe-container); }

@media (min-width: 768px) {
    section { padding-block: calc(var(--pe-sp-9) + 1rem); }
}

@media (min-width: 1024px) {
    main.site-main { padding-top: var(--pe-header-h-wide); }
    section { padding-block: var(--pe-sp-10); }
}

/* Responsive grid helpers used by page templates --------------- */

.pe-grid {
    display: grid;
    gap: var(--pe-sp-5);
}

.pe-grid--2,
.pe-grid--3,
.pe-grid--4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
    .pe-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (min-width: 900px) {
    .pe-grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .pe-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (min-width: 1024px) {
    .pe-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .pe-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
}