/*
 * Global page width policy.
 * Desktop/tablet content should use most of the viewport; mobile keeps
 * full width with small safe gutters.
 */
:root {
    --page-content-width: 90vw;
    --page-mobile-gutter: 1rem;
}

.container,
.header-content,
.blog-shell,
.article-shell,
.vacancies-container,
.vacancies-main-content,
.lazy-block[class*="max-w-"],
section[class*="max-w-"],
.container[class*="max-w-"] {
    width: var(--page-content-width) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

.article-shell {
    max-width: none !important;
}

@media (max-width: 768px) {
    .container,
    .header-content,
    .blog-shell,
    .article-shell,
        .vacancies-container,
        .vacancies-main-content,
        .lazy-block[class*="max-w-"],
        section[class*="max-w-"],
        .container[class*="max-w-"] {
        width: 100% !important;
        max-width: none !important;
        padding-left: var(--page-mobile-gutter) !important;
        padding-right: var(--page-mobile-gutter) !important;
    }
}