/* =============================================================================
   ROLAND LAYOUT SYSTEM
   Central page skeleton, container and spacing rules.
   ============================================================================= */

:root {
    --layout-max: 1200px;
    --layout-narrow-max: 760px;
    --layout-gutter: 8px;
    --layout-gutter-lg: 40px;
    --layout-gap: 40px;
    --layout-section-space: 40px;
    --layout-sidebar: 265px;
    --layout-content: minmax(0, 1fr);
}

[hidden] {
    display: none !important;
}

.site-content {
    width: 100%;
    overflow-x: clip;
}

/* GP Premium Layout Elements can inject `#content { max-width: ... }`.
   Roland layouts own this shell, so #content must stay unconstrained. */
#content.roland-layout {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
}

@supports not (overflow: clip) {
    .site-content {
        overflow-x: hidden;
    }
}

.site-content__inner {
    width: 100%;
    max-width: calc(var(--layout-max) + (var(--layout-gutter) * 2));
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--layout-gutter);
    padding-left: var(--layout-gutter);
    box-sizing: border-box;
}

.site-content__inner--edge {
    max-width: none;
    padding-right: 0;
    padding-left: 0;
}

.site-content__inner--narrow {
    max-width: calc(var(--layout-narrow-max) + (var(--layout-gutter) * 2));
}

.roland-container {
    width: 100%;
    max-width: var(--layout-max);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--layout-gutter);
    padding-left: var(--layout-gutter);
    box-sizing: border-box;
}

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

.roland-section {
    padding-top: var(--layout-section-space);
    padding-bottom: var(--layout-section-space);
}

.site-content__inner .alignfull,
.site-content__inner .hero-section,
.site-content__inner .popularni-section,
.roland-full-bleed {
    width: 100vw;
    max-width: 100vw;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
}

.roland-layout-grid {
    display: grid;
    gap: var(--layout-gap);
    width: 100%;
}

.roland-layout-grid--sidebar {
    grid-template-columns: 1fr;
}

.roland-layout-grid__sidebar:empty {
    display: none;
}

/* GeneratePress baseline normalization for the custom child-theme shell. */
.entry-title {
    display: none;
}

.inside-article {
    padding-top: 0 !important;
}

.separate-containers .site-main {
    margin-top: -30px !important;
}

@media (min-width: 768px) {
    .site-content__inner {
        max-width: calc(var(--layout-max) + (var(--layout-gutter-lg) * 2));
        padding-right: var(--layout-gutter-lg);
        padding-left: var(--layout-gutter-lg);
    }

    .site-content__inner--edge {
        max-width: none;
        padding-right: 0;
        padding-left: 0;
    }

    .site-content__inner--narrow {
        max-width: calc(var(--layout-narrow-max) + (var(--layout-gutter-lg) * 2));
    }

    .roland-container {
        padding-right: var(--layout-gutter-lg);
        padding-left: var(--layout-gutter-lg);
    }

    .roland-layout-grid--sidebar {
        grid-template-rows: auto auto;
        grid-template-columns: var(--layout-sidebar) var(--layout-content);
    }

    .roland-layout-grid--sidebar > .roland-category-layout__breadcrumb,
    .roland-layout-grid--sidebar > .roland-layout-grid__breadcrumb {
        grid-column: 2;
        grid-row: 1;
    }

    .roland-layout-grid--sidebar > .roland-layout-grid__sidebar {
        grid-column: 1;
        grid-row: 2;
    }

    .roland-layout-grid--sidebar > .roland-layout-grid__main {
        min-width: 0;
        grid-column: 2;
        grid-row: 2;
    }
}