/* ─── CONTAINERS ─── */
.container {
    width: 100%;
    max-width: var(--pb-container-base);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--pb-space-6);
    padding-right: var(--pb-space-6);
}

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

/* ─── SECTIONS ─── */
.section {
    padding-top: var(--pb-space-24);
    padding-bottom: var(--pb-space-24);
}

.section--sm {
    padding-top: var(--pb-space-16);
    padding-bottom: var(--pb-space-16);
}

.section--lg {
    padding-top: var(--pb-space-32);
    padding-bottom: var(--pb-space-32);
}

.section--dark  { background-color: var(--pb-navy);  color: var(--pb-white); }
.section--blue  { background-color: var(--pb-blue);  color: var(--pb-white); }
.section--gray  { background-color: var(--pb-gray-100); }
.section--white { background-color: var(--pb-white); }

/* ─── GRID ─── */
.grid     { display: grid; gap: var(--pb-space-8); }
.grid-2   { grid-template-columns: repeat(2, 1fr); }
.grid-3   { grid-template-columns: repeat(3, 1fr); }
.grid-4   { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .grid-2,
    .grid-3,
    .grid-4 { grid-template-columns: 1fr; }
}

/* ─── FLEX UTILITIES ─── */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.gap-4  { gap: var(--pb-space-4); }
.gap-6  { gap: var(--pb-space-6); }
.gap-8  { gap: var(--pb-space-8); }
.gap-12 { gap: var(--pb-space-12); }

/* ─── SPACING UTILITIES ─── */
.mt-4  { margin-top: var(--pb-space-4); }
.mt-8  { margin-top: var(--pb-space-8); }
.mt-12 { margin-top: var(--pb-space-12); }
.mb-4  { margin-bottom: var(--pb-space-4); }
.mb-8  { margin-bottom: var(--pb-space-8); }

/* ─── SECTION HEADER ─── */
.section-header {
    margin-bottom: var(--pb-space-12);
}

.section-header--center {
    text-align: center;
}

.section-header--center .section-subtitle {
    margin-left: auto;
    margin-right: auto;
}

/* ─── SECTORS BENTO GRID (§21.10 #6 — 1 large + 2 stacked, not 3 equal) ─── */
.sectors-bento {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-rows: repeat(2, 1fr);
    gap: var(--pb-space-4);
    min-height: 600px;
}

.sectors-bento__main {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.sectors-bento__secondary {
    grid-column: 2;
}

@media (max-width: 768px) {
    .sectors-bento {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        min-height: auto;
    }
    .sectors-bento__main { grid-row: auto; }
    .sectors-bento__secondary { grid-column: 1; }
}

/* ─── IMAGE SKELETON (prevents CLS while photos load) ─── */
.img-skeleton {
    background: linear-gradient(
        90deg,
        var(--pb-gray-100) 25%,
        var(--pb-gray-200) 50%,
        var(--pb-gray-100) 75%
    );
    background-size: 400% 100%;
}

@media (prefers-reduced-motion: no-preference) {
    .img-skeleton { animation: pb-shimmer 1.4s ease infinite; }
}

@keyframes pb-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}