/*
 * Structurele/functionele CSS voor de klachtenpagina-blokken.
 * Bewust geen kleuren, fonts of merk-styling — dat hoort in jullie
 * Elementor/thema-CSS. Hier alleen wat nodig is om de blokken te laten
 * werken (flex/grid-gedrag, FAQ open/close, mobiele CTA-balk positie).
 */

.andrik-complaint-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    align-items: center;
}

/* Herkenningsblok: werkt bij 3 t/m 8+ items */
.andrik-complaint-recognition__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1em;
    list-style: none;
    margin: 0;
    padding: 0;
}

.andrik-complaint-recognition__item {
    display: flex;
    align-items: flex-start;
    gap: 0.6em;
}

/* Tekst + afbeelding, links/rechts wisselbaar */
.andrik-complaint-text-image {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2em;
}

.andrik-complaint-text-image__text,
.andrik-complaint-text-image__media {
    flex: 1 1 320px;
    min-width: 0;
}

.andrik-complaint-text-image--image-left .andrik-complaint-text-image__media {
    order: -1;
}

.andrik-complaint-text-image__media img {
    width: 100%;
    height: auto;
}

/* Aanpak/behandeling */
.andrik-complaint-approach__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5em;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Stappenplan: naast elkaar op desktop, onder elkaar op mobiel */
.andrik-complaint-steps__list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}

.andrik-complaint-steps__item {
    flex: 1 1 200px;
}

@media (max-width: 767px) {
    .andrik-complaint-steps__list {
        flex-direction: column;
    }
}

/* CTA-blok */
.andrik-complaint-cta-block {
    background-size: cover;
    background-position: center;
}

.andrik-complaint-cta-block__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
}

/* Waarom Andrik Fysio */
.andrik-complaint-why-us__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75em;
}

/* Behandelaars */
.andrik-complaint-therapists__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5em;
    list-style: none;
    margin: 0;
    padding: 0;
}

.andrik-complaint-therapists__item a {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
}

.andrik-complaint-therapists__item img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* FAQ: toegankelijk zonder JS via <details>/<summary> */
.andrik-complaint-faq__item {
    border-bottom: 1px solid currentColor;
}

.andrik-complaint-faq__question {
    cursor: pointer;
    list-style: none;
    padding: 0.75em 0;
}

.andrik-complaint-faq__question::-webkit-details-marker {
    display: none;
}

.andrik-complaint-faq__answer {
    padding: 0 0 1em;
}

/* Gerelateerde pagina's */
.andrik-complaint-related__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5em;
    list-style: none;
    margin: 0;
    padding: 0;
}

.andrik-complaint-related__item a {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
}

.andrik-complaint-related__item img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Vaste mobiele CTA-balk: alleen zichtbaar op mobiel */
.andrik-complaint-mobile-cta {
    display: none;
}

@media (max-width: 767px) {
    .andrik-complaint-mobile-cta {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
    }

    .andrik-complaint-mobile-cta a {
        flex: 1 1 50%;
        text-align: center;
        padding: 0.9em 0;
    }
}