/* ============================================================
   cmp-container — reusable centered inner wrapper
   Owned by _partials/cmp-container.php. Self-contained replica of
   layout.css (.uk-container max-width + .uk-inner-container
   centering / padding ladder) so any component using it stays
   centered even if the global classes are missing or mistyped.
   ============================================================ */

.cmp-container {
    box-sizing: content-box;
    display: flow-root;
    max-width: 1221px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 640px) {
    .cmp-container {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (min-width: 960px) {
    .cmp-container {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (min-width: 1330px) {
    .cmp-container {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Doubled class (specificity 0,0,2,0) protects ONLY box-sizing so it
   wins over a component's `.c3-section *` / `.page-hero *` border-box
   rule regardless of stylesheet link order. Kept separate from the
   layout props above so the single-class padding ladder still applies. */
.cmp-container.cmp-container {
    box-sizing: content-box;
}