/*
 * Shared responsive safeguards for non-city service pages.
 * Keeps the existing page designs intact while preventing horizontal overflow.
 */
.hero-split,
.hero-left,
.hero-right,
.footer-top,
.footer-top > *,
.footer-newsletter,
.newsletter-form,
.newsletter-form input {
    min-width: 0;
}

.newsletter-form {
    max-width: 100%;
}

.newsletter-form input {
    width: 100%;
    max-width: 100%;
}

.vergunning-grid,
.vc-col,
.vc-col-header,
.vc-rule,
.vc-rule-body,
.usp-banner,
.usp-banner-inner,
.usp-banner-item,
.usp-banner-text,
.roi-inner,
.roi-content,
.roi-vergelijking,
.roi-blok,
.roi-highlight,
.logo-ticker-wrapper {
    min-width: 0;
    max-width: 100%;
}

.logo-ticker-wrapper {
    overflow: hidden;
}

@media (min-width: 1025px) and (max-width: 1200px) {
    .hero-split {
        grid-template-columns: minmax(0, 1fr);
        min-height: auto;
    }

    .hero-left {
        padding: 8rem 4vw 4rem;
    }

    .hero-right {
        display: block;
        min-height: 50vh;
    }

    .footer-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3rem;
    }
}

@media (max-width: 768px) {
    .vc-col-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .vc-col-header h3 {
        flex: 1 1 150px;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .vc-col-header .vc-tag {
        flex: 0 1 auto;
        max-width: 100%;
        margin-left: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .vc-rule-body,
    .vc-rule-body strong,
    .vc-rule-body p {
        overflow-wrap: anywhere;
    }

    .usp-banner {
        padding: 2rem 1.5rem !important;
        overflow: hidden;
    }

    .usp-banner-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
        width: 100%;
    }

    .usp-banner-item {
        justify-content: flex-start;
        padding: 0.75rem 0;
        text-align: left;
    }

    .usp-banner-text {
        overflow-wrap: anywhere;
    }

    .roi-vergelijking {
        grid-template-columns: minmax(0, 1fr);
    }

    .roi-highlight {
        display: flex;
        width: 100%;
        padding: 1rem 1.25rem;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .newsletter-form {
        flex-wrap: wrap;
    }

    .newsletter-form button {
        flex: 0 0 auto;
    }
}

/* Contextual service link used inside the constructie sections of service pages. */
.constructie-service-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1.1rem;
    color: var(--accent, #9a7330);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    line-height: 1.5;
    text-decoration: none;
    text-transform: uppercase;
}

.constructie-service-link::after {
    content: "\2192";
    transition: transform 180ms ease;
}

.constructie-service-link:hover::after,
.constructie-service-link:focus-visible::after {
    transform: translateX(0.25rem);
}

.constructie-service-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 0.3rem;
}