@layer reset, base, layout, addon;

/* To learn more about the following features:
   - Scroll Buttons
   - Scroll Markers
   - Scroll-State Queries
   - Scroll Initial Target
   - Anchor Positioning
   check out these excellent resources by Adam Argyle:
   - https://chrome.dev/carousel/
   - https://developer.chrome.com/blog/carousels-with-css/
*/

@layer addon {
    @supports (scroll-marker-group: after) and (inset-block-end: anchor(end)) {
        .section-wrapper {
            anchor-name: --carousel;

            /* Adjust the position of the carousel controls (buttons + markers) on small screens */
            --controls-margin-block: 64px; /* Vertical spacing from the scroller */
            --controls-margin-inline: 12px; /* Horizontal base spacing */

            --scroll-btn-gap: 12px;
            --scroll-btn-extra-offset: 0px;
            --scroll-btn-margin-inline: calc(var(--controls-margin-inline) + var(--scroll-btn-extra-offset));
            --scroll-btn-size: 40px;

            /* md-n-above */
            @media (width >= 768px) {
                /* Adjust the position of the carousel controls (buttons + markers) On medium and larger screens */
                --controls-margin-block: 84px; /* Vertical spacing from the scroller */
                --controls-margin-inline: 32px; /* Horizontal base spacing */
                --scroll-btn-gap: 78px;
                --scroll-btn-extra-offset: 53px;
            }
        }

        .cards {
            padding-block: 16px;
            scroll-marker-group: after;
            scrollbar-width: none;
            direction: ltr;

            &::before,
            &::after {
                content: '';
                display: block;
                inline-size: 50cqi;
                width: 100%;
            }

            /*&::scroll-marker-group {*/
            /* display: grid;*/
            /* grid-auto-flow: column;*/
            /* block-size: fit-content;*/
            /* inline-size: 60cqi;*/
            /* background-color: oklch(from var(--cc-secondary) calc(l / 1.6) c calc(h - 2));*/
            /* justify-items: end;*/
            /* position-anchor: --carousel;*/
            /* position: absolute;*/
            /* inset-block-end: calc(anchor(end) + var(--controls-margin-block) + 16px);*/
            /* inset-inline-start: calc(anchor(start) + var(--controls-margin-inline));*/
            /* border-radius: 100px;*/
            /*}*/

            &::scroll-button(*) {
                block-size: var(--scroll-btn-size);
                border-radius: 100px;
                border-width: 0;
                cursor: pointer;
                display: inline grid;
                inline-size: var(--scroll-btn-size);
                inset-block-end: calc(anchor(end) + var(--controls-margin-block));
                line-height: 0;
                outline-color: var(--surface);
                outline-offset: 2px;
                place-items: center;
                position-anchor: --carousel;
                position: absolute;
                z-index: 10;
                user-select: none;
                -webkit-tap-highlight-color: transparent;
                -webkit-touch-callout: none;
                background-color: var(--surface);
            }

            /*
             The buttons are intentionally styled without hover effects.
            This aligns with the original design choice to reduce visual noise
            and avoid drawing unnecessary attention away from card interactions.

            If you'd like to add a hover effect, uncomment the code below.
            It uses relative color and transitions for a subtle lift on hover.
           */

            /* &::scroll-button(*) {
              background-color: oklch(from var(--surface) calc(l * 1.5) c h);
              transition-property: background-color, box-shadow;
              transition-duration: var(--duration);
              transition-timing-function: ease;
            }

            &::scroll-button(*):is(:not(:hover, :active)) {
              background-color: var(--surface);
              box-shadow: var(--elevation-shadow-02);
            } */

            /*&::scroll-button(*):disabled {*/
            /* cursor: not-allowed;*/
            /* background-color: color-mix(in srgb, var(--cc-secondary) 80%, var(--surface) 20%);*/
            /*}*/

            /*&::scroll-button(inline-start) {*/
            /* content: var(--arrow-icon) / 'Scroll back';*/
            /* inset-inline-end: calc(*/
            /* anchor(end) + var(--scroll-btn-margin-inline) + var(--scroll-btn-size) + var(--scroll-btn-gap)*/
            /* );*/
            /* transform: scaleX(-1);*/
            /*}*/
            /*&::scroll-button(inline-end) {*/
            /* content: var(--arrow-icon) / 'Scroll forward';*/
            /* inset-inline-end: calc(anchor(end) + var(--scroll-btn-margin-inline));*/
            /*}*/
        }

        /*.btn-shape-deco {*/
        /* display: grid;*/
        /* position-anchor: --carousel;*/
        /* position: absolute;*/
        /* block-size: var(--scroll-btn-size);*/
        /* place-items: center;*/
        /* inline-size: calc(var(--scroll-btn-size) * 2 + var(--scroll-btn-gap));*/
        /* inset-block-end: calc(anchor(end) + var(--controls-margin-block));*/
        /* inset-inline-end: calc(anchor(end) + var(--scroll-btn-margin-inline));*/
        /* color: var(--surface);*/
        /* opacity: 0.8;*/
        /* !* md-n-below *!*/
        /* @media (width < 768px) {*/
        /* display: none;*/
        /* }*/
        /*}*/

        .css-carousel-card {
            /*container-type: scroll-state;*/
            scroll-snap-align: center;
            scroll-snap-stop: always;

            &::scroll-marker {
                content: '';
                aspect-ratio: 1;
                cursor: pointer;
                text-decoration: none;
                width: 8px;
                height: 8px;
                border-radius: 100px;
                background-color: var(--primary);
            }

            &::scroll-marker:target-current {
                /*
          Assigns anchor-name: --current to the currently active scroll marker.
          The .marker-bar uses position-anchor: --current to align relative to the active marker.
          As you scroll, the marker-bar transitions its inset-inline-start (left) to follow the active marker.
        */
                anchor-name: --current;
            }
        }

        .img-2 {
            /* Clear fallback transform */
            transform: unset;
            transition: transform var(--duration) ease-in;
            transition-delay: var(--img-translate-delay);
            @container scroll-state(snapped: inline) {
                transform: translateX(55px) translateY(10px) rotate(8deg);
            }
        }

        .marker-bar {
            /* Prevents expensive paint and layout invalidations outside the element */
            contain: layout paint;
            will-change: inset-inline-start;

            inline-size: calc(6cqi + 8px);
            block-size: 8px;
            display: block;
            background-color: var(--primary);
            position-anchor: --current;
            position: absolute;
            inset-block-end: anchor(end);
            inset-inline-start: calc(anchor(start) - 6cqi);
            border-radius: 100px;
            pointer-events: none;
            transition: inset-inline-start var(--duration);
        }

        .scroll-start {
            scroll-initial-target: nearest;
        }
    }
}

@layer reset {
    *,
    ::before,
    ::after {
        box-sizing: border-box;
    }

    :where(:not(dialog)) {
        margin: 0;
    }

    :where(html) {
        -webkit-text-size-adjust: none;

        @media (prefers-reduced-motion: no-preference) {
            scroll-behavior: smooth;
        }
    }

    :where(body) {
        min-block-size: 100svb;
        -webkit-font-smoothing: antialiased;
    }
}

@layer base {
    html {
        --arrow-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%234428c2"><path d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z"/></svg>');
        --caption: 400 0.688rem/1rem system-ui, sans-serif;
        --headline: 600 2.812rem/3.25rem system-ui, sans-serif;
        --headline-small: 600 2rem / 2.5rem system-ui, sans-serif;
        --label: 600 1rem / 1.375rem system-ui, sans-serif;
        --title: 600 1.75rem/2.25rem system-ui, sans-serif;
        --title-small: 600 1.5rem/2rem system-ui, sans-serif;

        --surface: oklch(96% 0 236);
        --on-surface: oklch(0% 0 0);

        --primary: oklch(91% 0.18 99);
        --on-primary: oklch(0% 0 0);

        --cc-secondary: oklch(0.577 0.195 20.133);
        --cc-on-secondary: oklch(100% 0 0);

        --surface-container: oklch(91% 0.03 64);
        --on-surface-container: oklch(0% 0 0);

        --shadow-02: 0px 1px 2px rgba(0, 0, 0, 0.14), 0px 0px 2px rgba(0, 0, 0, 0.12);
        --shadow-04: 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 0px 2px rgba(0, 0, 0, 0.12);
    }
}

@layer layout {
    .section {
        --duration: 0;
        --img-translate-delay: 0;

        /*background-color: var(--surface);*/
        color: var(--on-surface);
        padding-block: 64px;
        font: var(--body);

        /* motionOK */
        @media (prefers-reduced-motion: no-preference) {
            --duration: 200ms;
            --img-translate-delay: 250ms;
        }
    }

    .section-wrapper {
        container-type: inline-size;
        background-color: var(--cc-secondary);
        color: var(--cc-on-secondary);
        display: block;
        /*border-start-end-radius: 128px;*/
        overflow: clip;
        padding-block: 32px;
        /*padding-block-end: 128px;*/

        /*!* md-n-above *!*/
        /*@media (width >= 768px) {*/
        /* padding-block-end: 160px;*/
        /*}*/
    }

    .header {
        padding-block: 32px;
        display: grid;
        place-items: center;
        padding-inline: 16px;
        /* md-n-above */
        @media (width >= 768px) {
            padding-block: 64px;
        }
    }

    .headline {
        text-align: center;
        text-wrap: pretty;
        font: var(--headline-small);

        /* md-n-above */
        @media (width >= 768px) {
            font: var(--headline);
        }
    }

    .cards {
        list-style: none;
        display: grid;
        grid-auto-flow: column;
        place-items: start;
        padding-block: 32px;
        padding-inline: 48px;
        gap: 16px;
        overflow-y: hidden;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* smooth momentum on iOS */
        scroll-padding-inline: 48px;
        scroll-snap-type: x mandatory;
        /* motionOK */
        @media (prefers-reduced-motion: no-preference) {
            scroll-behavior: smooth;
        }

        /* --- iOS Safari Overlap Fix for Scroller Container (Keep) --- */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        z-index: 1;
        /* ----------------------------------------------------------- */
    }

    .css-carousel-card {
        --card-circle-bg: var(--cc-on-secondary);
        background-color: var(--surface-container);
        color: var(--on-surface-container);
        border-radius: 1rem;
        overflow: clip;

        /* --- RESTORED Stacking Context & iOS Fix --- */
        position: relative;
        z-index: 10;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);

        /* --- CRITICAL FIX: Ensure a fixed, non-collapsing width --- */
        min-width: 25svh;
        /* ------------------------------------------- */
    }

    .card-even {
        --card-circle-bg: var(--surface-container);
        background-color: var(--surface);
        color: var(--on-surface);
    }

    .article {
        container-type: size;
        display: grid;
        padding-inline: 5px;
        /* use a custom property with a 32px fallback */
        padding-block-start: var(--article-padding-block-start, 32px);
        gap: 16px;
        inline-size: min(90cqi, 25svh);
        aspect-ratio: 3/4;
        grid-template-rows: 1fr 1fr;
        /* position: relative; was removed to prevent layout conflict */
    }

    /* small-screen override */
    @media (width < 768px) {
        .article {
            --article-padding-block-start: 22px;
        }
    }

    .css-card-header {
        display: grid;
        gap: 12px;
        text-align: center;
        padding: 2svh 0;
    }

    .article .title {
        font-weight: 1000 !important;
    }

    .hgroup {
        display: grid;
        gap: 16px;
    }

    .category {
        font-size: 1.3svh !important;
        font: var(--caption);
        text-transform: uppercase;
        letter-spacing: 2px;
        text-decoration: underline;
    }

    .title {
        font-size: 2svh !important;
        /*!* md-n-above *!*/
        /*@media (width >= 768px) {*/
        /* font: var(--title);*/
        /*}*/
    }

    .link {
        --_x: 0px;
        display: flex;
        inline-size: fit-content;
        block-size: 40px;
        background-color: var(--primary);
        align-items: center;
        gap: 8px;
        padding-inline-start: 16px;
        text-decoration: none;
        color: var(--on-primary);
        font: var(--label);
        border-radius: 100px;
        box-shadow: var(--shadow-02);

        &:hover {
            --_x: 3px;
        }
    }

    .icon {
        --_primary-darker: oklch(from var(--primary) calc(l - 0.08) c h);
        background-color: var(--_primary-darker);
        block-size: 100%;
        display: grid;
        align-items: center;
        aspect-ratio: 1;
        padding: 0.5rem;
        border-radius: 100px;
    }

    .svg {
        translate: var(--_x) 0px;
        transition: translate var(--duration);
    }

    .visual {
        container-type: inline-size;
        block-size: 50cqb;
        display: grid;
        isolation: isolate;
        place-items: center;
        position: absolute;
        bottom: -1svh;
        width: 100%;
        left: 50%;
        transform: translateX(-50%);

        &::before {
            content: '';
            background-color: var(--card-circle-bg);
            display: block;
            inset-block-end: -70%;
            inset-inline: 0;
            position: absolute;
            z-index: -1;

            aspect-ratio: 1;
            inline-size: 100%;
            border-radius: 100%;
        }
    }

    .img {
        background-color: var(--surface-container);
        block-size: auto;
        border-radius: 5px;
        box-shadow: var(--shadow-04);
        display: block;
        grid-area: 1/1;
        inline-size: 50cqi;
        margin-block-end: -50px;
        max-inline-size: 100%;
        object-fit: contain;
    }

    .img-2 {
        background-color: var(--surface);
        transform: translateX(55px) translateY(10px) rotate(8deg);
        z-index: -1;
    }

    .btn-shape-deco {
        display: none;
    }
}