/*
 * Utility: zigzag
 *
 * Classe à poser sur une Section Divi : `rc-zigzag-section`.
 * Chaque ligne = 2 colonnes (média + texte). Une ligne sur deux est
 * inversée → alternance gauche/droite automatique.
 *
 * Répartition 60/40 via ratios `flex` (3 / 2) : gap-safe, sans `calc`,
 * quel que soit le type de colonnes Divi choisi. Empilement vertical
 * sous 980px.
 *
 * Nesting natif uniquement (cf. CLAUDE.md).
 */

.rc-zigzag-section {
    > .et_pb_row {
        gap: clamp(5rem, 10vw, 13rem);

        > .et_pb_column {
            box-sizing: border-box;
            margin: 0;
            max-width: none;
        }

        > .et_pb_column:first-of-type { flex: 3; }
        > .et_pb_column:last-of-type  { flex: 2; }
    }

    > .et_pb_row:nth-child(even) {
        flex-direction: row-reverse;
    }

    .et_pb_image,
    .et_pb_image_wrap {
        margin: 0;
        width: 100%;
    }

    img {
        width: 100%;
        height: 300px;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    @media (max-width: 980px) {
        > .et_pb_row,
        > .et_pb_row:nth-child(even) {
            flex-direction: column;
            gap: var(--s-large);
        }

        > .et_pb_row > .et_pb_column {
            flex: none;
            max-width: 100%;
        }
    }

    @media (max-width: 600px) {
        img {
            height: auto;
            aspect-ratio: 3 / 2;
        }
    }
}