/*
 * Mobile accordion for the model-detail tab groups (S06 / S07 / S08 / S09).
 * Behaviour lives in ../js/model_accordion.js. Everything here applies at <= 768px only and is
 * scoped to classes that script adds, so desktop is untouched.
 *
 * Colour-neutral on purpose (currentColor + translucent greys): the same groups sit on dark
 * (#2f3437) and light sections. Logical properties (inline-start/end) make RTL flip naturally.
 */

/* Before the script runs (or if it never does): still a vertical list, never a clipped strip. */
@media (max-width: 768px) {
    .s06FeatureTabs, .s06TechTabs,
    .s07FeatureTabs, #s07TechTabs,
    #s08FeatureTabs, #s08FeatureTabs2, .s08TabNavRow,
    #s09FeatureTabs, #s09ComfortTabs, #s09TechTabs {
        flex-direction: column;
        overflow-x: visible;
        gap: 0;
    }

    .s06FeatureTabs > *, .s06TechTabs > *,
    .s07FeatureTabs > *, #s07TechTabs > *,
    #s09FeatureTabs > *, #s09ComfortTabs > *, #s09TechTabs > * {
        white-space: normal;
    }
}

@media (max-width: 768px) {
    .sou-acc {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        overflow: visible;
        gap: 0;
    }

    /* One row per category */
    .sou-acc > .sou-acc-item {
        position: relative;
        box-sizing: border-box;
        flex: 0 0 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 52px;
        margin: 0 !important;
        padding: 14px 46px 14px 16px !important;
        padding-inline: 16px 46px !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(128, 128, 128, 0.35) !important;
        border-inline-start: 3px solid transparent !important;
        background: none !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        line-height: 1.4;
        white-space: normal !important;
        overflow-wrap: anywhere;
        text-align: start !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        display: flex;
        align-items: center;
    }

    /* Chevron: points down when closed, up when open */
    .sou-acc > .sou-acc-item::before {
        content: "";
        position: absolute;
        inset-inline-end: 18px;
        top: 50%;
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-70%) rotate(45deg);
        transition: transform 0.2s ease;
        opacity: 0.8;
    }

    .sou-acc > .sou-acc-item.sou-acc-open::before {
        transform: translateY(-30%) rotate(-135deg);
    }

    /* The desktop tab underline has no place in a vertical list */
    .sou-acc > .sou-acc-item::after {
        display: none !important;
    }

    /* Expanded indicator: brand accent on the start edge + stronger text */
    .sou-acc > .sou-acc-item.sou-acc-open {
        border-inline-start-color: #ff6a00 !important;
        font-weight: 600 !important;
    }

    .sou-acc > .sou-acc-item:focus-visible {
        outline: 2px solid #ff6a00;
        outline-offset: -2px;
    }

    /* The existing image block and description, now directly under the open row */
    .sou-acc > .sou-acc-media {
        box-sizing: border-box;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 8px;
        overflow: hidden;
    }

    .sou-acc > .sou-acc-media img {
        display: block;
        width: 100%;
        height: auto;
    }

    .sou-acc > .sou-acc-desc {
        box-sizing: border-box;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 14px 4px 18px !important;
        font-size: 14px;
        line-height: 1.6;
        text-align: start !important;
        overflow-wrap: anywhere;
    }

    .sou-acc > .sou-acc-collapsed {
        display: none !important;
    }
}