/*
 * The few things the row builder needs that the Webflow export does not have.
 *
 * Kept apart from hvk-automatisering.css so a fresh export can replace that
 * file without losing these. Everything else a row template uses is a class
 * from the export itself.
 */

/* "Minder ruimte boven en onder": a row that connects to the one above. */
.section.is-compact {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* The column count of the "kolommen" row. The theme's .homepage-portal
   hardcodes two columns; phones always get one. */
.cms-cols.cms-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cms-cols.cms-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cms-cols.cms-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media screen and (max-width: 991px) {
    .cms-cols.cms-cols-3,
    .cms-cols.cms-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 767px) {
    .cms-cols.cms-cols-2,
    .cms-cols.cms-cols-3,
    .cms-cols.cms-cols-4 { grid-template-columns: minmax(0, 1fr); }
}

/* Buttons under a row: next to each other, wrapping on a phone. */
.cms-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-top: 2rem;
}

.container-heading .cms-buttons {
    justify-content: center;
}

/* A text row's photo, floating left like the one on "Over ons". */
.cms-float-image {
    max-width: 40%;
}

@media screen and (max-width: 767px) {
    .cms-float-image {
        float: none !important;
        max-width: 100%;
    }
}