/* =================================================================== ZIGZAG section css =================================================================== */
/* Alternating image / text rows, one per item. Even rows put the image right. */
.zigzag {
    & .zigzag__list {
        display: grid;
        gap: var(--sp100);
    }

    & .zigzag__item {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: var(--sp80);

        &:nth-child(even) .zigzag__media { order: 2; }
    }

    & .zigzag__media {
        position: relative;
        border-radius: var(--r-xl);
        overflow: hidden;
    }

    & .zigzag__img {
        width: 100%;
        aspect-ratio: 16 / 11;
        object-fit: cover;
        transition: var(--transition);
    }

    & .zigzag__item:hover .zigzag__img { transform: scale(1.04); }

    & .zigzag__num {
        --notch-r: var(--r-xl);

        & .notch-badge { width: 70px; height: 70px; font-size: var(--f20); }
    }

    & .zigzag__body {
        display: flex; flex-direction: column; align-items: flex-start;
        gap: var(--sp15);
    }

    & .zigzag__title { font-size: var(--f40); }

    & .zigzag__text {
        max-width: 520px;
        font-size: var(--f18);
    }

    & .zigzag__tags-label {
        margin-top: var(--sp10);
        font-size: var(--f12);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--primary);
    }

    & .zigzag__tags {
        display: flex; flex-wrap: wrap;
        gap: var(--sp8);
    }

    & .zigzag__tag {
        padding: var(--sp8) var(--sp15);
        background: var(--white);
        border-radius: var(--r-full);
        box-shadow: var(--shadow-sm);
        font-family: var(--font-mona);
        font-size: var(--f14);
        font-weight: 500;
        color: var(--ink);
    }
}

/* =================================================================== ZIGZAG responsive =================================================================== */
@media (max-width: 1199.98px) {
    .zigzag {
        & .zigzag__item { gap: var(--sp50); }
    }
}

@media (max-width: 991.98px) {
    .zigzag {
        & .zigzag__list { gap: var(--sp70); }
        & .zigzag__item { grid-template-columns: 1fr; gap: var(--sp30); }
        & .zigzag__item:nth-child(even) .zigzag__media { order: 0; }
    }
}

@media (max-width: 575.98px) {
    .zigzag {
        & .zigzag__media { border-radius: var(--r-lg); }
        & .zigzag__num { --notch-r: var(--r-lg); }
        & .zigzag__num .notch-badge { width: 55px; height: 55px; }
    }
}