/* =================================================================== ACCORDION section css =================================================================== */
/* Title + sticky image on the left, native <details> rows on the right.
   Used for two-column tables (requirement → solution). No JS needed. */
.accordion {
    & .accordion__grid {
        display: grid;
        grid-template-columns: 5fr 7fr;
        align-items: start;
        gap: var(--sp70);
    }

    & .accordion__aside {
        position: sticky; top: 120px;
    }

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

    & .accordion__img {
        width: 100%;
        aspect-ratio: 5 / 4;
        object-fit: cover;
    }

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

        & .notch-badge { width: 70px; height: 70px; background: var(--primary); color: var(--white); }
    }

    & .accordion__list {
        display: grid;
        gap: var(--sp15);
    }

    & .accordion__item {
        background: var(--white);
        border-radius: var(--r-lg);
        transition: var(--transition);

        &[open] { box-shadow: var(--shadow-lg); }
        &[open] .accordion__icon { background: var(--primary); color: var(--white); transform: rotate(45deg); }
    }

    & .accordion__summary {
        display: flex; align-items: center; justify-content: space-between;
        gap: var(--sp20);
        padding: var(--sp25) var(--sp30);
        font-family: var(--font-mona);
        font-size: var(--f20);
        font-weight: 500;
        color: var(--ink);
        list-style: none;
        cursor: pointer;

        &::-webkit-details-marker { display: none; }
        &:hover .accordion__icon { background: var(--primary); color: var(--white); }
    }

    & .accordion__icon {
        display: flex; flex: 0 0 auto; align-items: center; justify-content: center;
        width: 40px; height: 40px;
        background: var(--surface-light);
        border-radius: var(--r-full);
        color: var(--ink);
        transition: var(--transition);
    }

    & .accordion__body {
        margin-inline: var(--sp30);
        padding-block: var(--sp20) var(--sp25);
        border-top: 1px solid var(--line);
    }
}

/* =================================================================== ACCORDION responsive =================================================================== */
@media (max-width: 1199.98px) {
    .accordion {
        & .accordion__grid { gap: var(--sp50); }
    }
}

@media (max-width: 991.98px) {
    .accordion {
        & .accordion__grid { grid-template-columns: 1fr; }
        & .accordion__aside { position: static; }
        & .accordion__media { display: none; }
    }
}

@media (max-width: 575.98px) {
    .accordion {
        & .accordion__summary { padding: var(--sp20); }
        & .accordion__body { margin-inline: var(--sp20); }
    }
}