:root {
    --ags-container-max: 1420px;
    --ags-site-padding: 40px;
    --ags-grid-columns: 12;
    --ags-grid-gutter: 20px;
    --accent-2: #0b5a6f;
    --loods-grijs-superlicht: #e9efef;
}

/* Container that matches GeneratePress max width and site padding */
.ags-container {
    max-width: var(--ags-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--ags-site-padding);
    padding-right: var(--ags-site-padding);
    box-sizing: border-box;
}

/* Core 12-column grid */
.ags-main-grid,
.ags-related-grid,
.ags-services-list {
    display: grid;
    grid-template-columns: repeat(var(--ags-grid-columns), 1fr);
    column-gap: var(--ags-grid-gutter);
    row-gap: var(--ags-grid-gutter);
}

/* Single: 7 columns content, 1 column gap, 5 columns sidebar */
.ags-content {
    grid-column: 1 / span 7;
}
.ags-sidebar {
    grid-column: 9 / span 5;
}

.ags-content .ags-single-header,
.ags-content .ags-single-intro,
.ags-content .ags-single-body {
    margin-bottom: 1.5rem;
}

/* Cards in related/archive grids: two per row */
.ags-related-grid .ags-service-card,
.ags-services-list .ags-service-card {
    grid-column: span 6;
}

.ags-related-area {
    padding: calc(var(--ags-grid-gutter) * 1.5) 0;
}

.ags-related-area .ags-container {
    padding-top: 0;
    padding-bottom: 0;
}

@media (max-width: 900px) {
    .ags-main-grid,
    .ags-related-grid,
    .ags-services-list {
        grid-template-columns: 1fr;
    }

    .ags-content,
    .ags-sidebar,
    .ags-related-grid .ags-service-card,
    .ags-services-list .ags-service-card {
        grid-column: auto;
    }
}