/* Block: Topics (slug: bullets) */

/* Title padding (block-title.css handles shared styles) */
.block-bullets-title {
    padding: 0 var(--spacing-wrapper);
}

.block-bullets-swiper {
    width: 100%;
    padding: 0 var(--spacing-wrapper);
}

.bullet-icon {
    width: 11%;
    aspect-ratio: 1 / 1;

    & svg {
        width: 100%;
        height: auto;
    }
}

.block-bullets {
    --bullet-media-bleed-x: calc(var(--box-padding-medium) * 0.5);

    /* Remove .block padding — swiper container handles it */
    &.block {
        padding-left: 0;
        padding-right: 0;
    }

    /* When title is present, stack vertically with gap-small */
    &.has-title {
        flex-direction: column;
        gap: clamp(35px, 3.7cqi, 45px);
    }

    /* Equal height slides: stretch all bullet-items to match tallest (Swiper + flex) */
    & .swiper-wrapper {
        align-items: stretch;
    }

    & .swiper-slide {
        height: auto;
        container-type: inline-size;
        display: flex;
    }

    /* ── Bullet item internals (all sizes) ── */

    & .bullet-item {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-gap-xsmall);
        width: 100%;
        min-height: 100cqi;
        background: #F2F2EA;
        border-radius: var(--border-radius-md);
        padding: var(--box-padding-medium);
        transition: background 0.2s ease-out;

        &:hover {
            background: #F6F6EE;

            & .bullet-image-wrapper .bullet-image {
                transform: scale(1.03);
            }
        }

        &:has(.bullet-lists) {
            /* gap: 20px; */

            & .bullet-top {
                flex: unset;
            }

            & .bullet-body {
                flex: 1;
                justify-content: space-between;
            }
        }

        & .bullet-body {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-gap-medium);
        }

        & .bullet-description {
            color: var(--color-subtext);
        }

        & .bullet-image-wrapper {
            overflow: hidden;
            border-radius: var(--border-radius-sm);
            width: calc(100% + (var(--bullet-media-bleed-x) * 2));
            margin-left: calc(var(--bullet-media-bleed-x) * -1);
            margin-top: calc(var(--box-padding-medium) * -0.5);
            align-self: stretch;
        }

        & .bullet-image {
            width: 100%;
            height: auto;
            display: block;
            border-radius: var(--border-radius-sm);
            transition: opacity 0.35s ease-out, transform 0.2s ease-out;
        }

        /* Video surface positioning (absolute video under overlay image,
           opacity fade) lives in video-surface.css. We just own the
           border-radius on the absolutely positioned video and the hover
           scale behavior specific to bullets. */
        & .bullet-image-wrapper.has-video .bullet-video {
            border-radius: var(--border-radius-sm);
        }

        /* Scale feedback is carried by the video in video-enabled bullets */
        &:hover .bullet-image-wrapper.has-video .bullet-image {
            transform: none;
        }

        & .bullet-media-header {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-gap-xsmall);
            width: 100%;
        }

        & .bullet-label-header {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-gap-xsmall);
        }

        & .bullet-label-number {
            display: flex;
            margin-left: -5px;
        }

        & .bullet-label {
            font-size: clamp(11px, 1.2cqi, 13px);
            font-weight: 400;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 0 15px;
            border-radius: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(143, 131, 112, 0.2);
            color: var(--color-dark-sand);
        }

        & .bullet-number {
            width: clamp(30px, 5cqi, 35px);
            height: clamp(30px, 5cqi, 35px);
            background-color: var(--color-orange);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: clamp(12px, 5cqi, 13px);
            font-weight: 400;
            color: var(--color-white);
            flex-shrink: 0;
        }

        & .bullet-top {
            display: flex;
            flex-direction: column;
            gap: 13px;
            flex: 1;

            &.no-description {
                justify-content: space-between;

                & .bullet-heading {
                    margin-top: auto;
                }
            }

            & .bullet-title {
                font-size: 1.9rem;
                font-weight: 300;
                line-height: 1;
                letter-spacing: clamp(-2px, -0.1cqi, -0.5px);
                padding: 0;
                margin: 0;
                text-wrap: balance;

                @container page-content (max-width: 1600px) {
                    font-size: 1.7rem;
                    line-height: 1.14;
                }

                @container page-content (max-width: 768px) {
                    font-size: 1.6rem;
                    line-height: 1.12;
                }
            }
        }

        & .bullet-heading {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        & .bullet-subtitle {
            color: var(--color-subtext);
        }

        @container page-content (max-width: 768px) {
            gap: 15px;
        }
    }

    & .bullet-lists {
        display: flex;
        flex-direction: column;
        gap: 15px;
        /* margin-top: 10px; */
    }

    &.center-content {
        & .bullet-top {
            align-items: center;
            text-align: center;
        }

        /* Keep media bleed behavior even when content is centered */
        & .bullet-media-header > .bullet-image-wrapper {
            align-self: stretch;
            width: calc(100% + (var(--bullet-media-bleed-x) * 2));
            margin-left: calc(var(--bullet-media-bleed-x) * -1);
        }

        & .bullet-label-header {
            align-items: center;
        }

        & .bullet-label-number {
            justify-content: center;
            margin-left: 0;
        }

        & .bullet-heading {
            align-items: center;
        }

        & .bullet-description {
            text-align: center;
        }

        & .bullet-subtopics-title {
            text-align: center;
        }

        /* Lists stay left-aligned even when center-content is enabled */
        & .bullet-lists,
        & .bullet-subtopics,
        & .subtopic-content,
        & .subtopic-title,
        & .bullet-minilist,
        & .minilist-label,
        & .minilist-value {
            text-align: left;
        }
    }

    /* ── Icon Layout: Boxed ── */

    &.icon-layout-boxed {
        & .bullet-item .bullet-media-header {
            width: 100%;
        }

        & .bullet-item .bullet-icon {
            width: calc(100% + (var(--bullet-media-bleed-x) * 2));
            margin-left: calc(var(--bullet-media-bleed-x) * -1);
            margin-top: calc(var(--box-padding-medium) * -0.5);
            aspect-ratio: 16 / 9;
            height: auto;
            background: #DBD7CA;
            border-radius: var(--border-radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            align-self: stretch;

            & svg {
                width: 22%;
                height: auto;
                min-height: 0;
                max-height: none;
            }
        }
    }

    &.center-content.icon-layout-boxed {
        & .bullet-item .bullet-media-header {
            align-items: stretch;
        }
    }

    /* ── Title Size ── */

    &.title-size-large {
        & .bullet-item .bullet-title {
            font-size: clamp(1.8rem, 4cqi, 3.5rem);
            line-height: 1;
            letter-spacing: clamp(-2.5px, -0.15cqi, -0.8px);
        }
    }

    /* ── Description Size ── */

    &.desc-size-medium {
        & .bullet-item .bullet-description {
            font-size: var(--side-text-medium-size);
            line-height: var(--side-text-medium-line-height);
            letter-spacing: -0.3px;
        }
    }

    &.desc-size-large {
        & .bullet-item .bullet-description {
            font-size: var(--side-text-large-size);
            line-height: var(--side-text-large-line-height);
            letter-spacing: -0.6px;
        }
    }

    /* ── Subtopics ── */

    & .bullet-subtopics {
        --padding-x-subtopics: 15px;
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: calc((100% + var(--box-padding-medium) * 2) - (var(--padding-x-subtopics) * 2));
        margin-left: calc((var(--box-padding-medium) * -1) + var(--padding-x-subtopics));
        padding: 0;

        @container page-content (max-width: 768px) {
            --padding-x-subtopics: 5px;
        }
    }

    & .bullet-lists:has(.bullet-subtopics):not(:has(.bullet-minilist)) .bullet-subtopics {
        margin-bottom: calc((var(--box-padding-medium) * -1) + var(--padding-x-subtopics));
    }

    & .bullet-subtopics-title {
        font-size: clamp(17px, 1.4cqi, 20px);
        font-weight: 400;
        margin: 0;
        line-height: 1;
        padding: 0 calc(var(--box-padding-medium) - var(--padding-x-subtopics));
        color: var(--color-dark-sand);
    }

    & .bullet-subtopics-list {
        display: flex;
        flex-direction: column;
        gap: 0;
        border-radius: var(--border-radius-sm);
        background-color: #EBEAE0;
        overflow: hidden;

        & .subtopic-item:first-child {
            border-top: none;
        }

        & .subtopic-item:last-child {
            border-bottom: none;
        }
    }

    & .subtopic-item {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        border-top: 1px solid rgba(143, 131, 112, 0.1);
        padding: 18px calc(var(--box-padding-medium) - var(--padding-x-subtopics));
        transition: background 0.1s ease-out;

        &:hover {
            background: #F0EFE4;

            & .icon-dot {
                transform: scale(1.5);
            }

            & .subtopic-title {
                color: var(--color-orange);
            }

            & .subtopic-description {
                opacity: 1;
            }
        }

        & > .icon-wrap {
            width: 22px;
            flex-shrink: 0;
            display: flex;
            aspect-ratio: 1 / 1;
            align-items: center;
            justify-content: center;
            align-self: center;

            & svg {
                width: 100%;
                height: auto;
            }

            @container page-content (max-width: 768px) {
                width: 26px;
            }
        }

        & .icon-dot {
            width: 30%;
            height: auto;
            aspect-ratio: 1/1;
            border-radius: 50%;
            background: var(--color-orange);
            display: block;
            transition: transform 0.15s ease-out;
        }

        @container page-content (max-width: 1600px) {
            padding-top: 15px;
            padding-bottom: 15px;
        }

        @container page-content (max-width: 768px) {
            padding: 10px 15px 13px 15px;
            gap: 13px;
        }
    }

    & .subtopic-content {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 15px;
        min-height: 22px;

        @container page-content (max-width: 768px) {
            flex-direction: column;
            gap: 3px;
            align-items: flex-start;
        }
    }

    & .subtopic-title {
        font-weight: 500;
        line-height: 1.1;
        margin: 0;
        padding: 0;
        text-wrap: balance;
        color: rgba(0, 0, 0, 0.7);
        transition: color 0.15s ease-out;
    }

    & .subtopic-description {
        color: var(--color-subtext);
        text-align: right;
        font-size: clamp(15px, 1.1cqi, 16px);
        font-weight: 400;
        text-wrap: balance;
        letter-spacing: 0.01em;
        line-height: 1.1;
        opacity: 0.8;
        transition: opacity 0.15s ease-out;

        @container page-content (max-width: 768px) {
            text-align: left;
        }
    }

    /* ── Minilist ── */

    & .bullet-minilist {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    & .bullet-minilist-items {
        display: flex;
        flex-direction: column;

        & .minilist-row:first-child {
            border-top: none;
            padding-top: 0;
        }

        & .minilist-row:last-child {
            padding-bottom: 0;
        }
    }

    & .minilist-row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 10px;
        padding: 8px 0;
        border-top: 1px solid rgba(143, 131, 112, 0.1);
    }

    & .minilist-label {
        font-size: clamp(12px, 1.1cqi, 13px);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--color-dark-sand);
        flex-shrink: 0;
    }

    & .minilist-value {
        color: var(--color-subtext);
        text-align: right;
        font-size: clamp(13px, 1.1cqi, 15px);
        font-weight: 400;
        letter-spacing: 0.01em;
        line-height: 1.1;
        padding-top: 4px;
        text-wrap: balance;
    }

    /* ── items-2 desktop (>= 1400px): reset Swiper, flex+gap ── */

    &.items-2 {
        @container page-content (min-width: 1400px) {
            & .block-bullets-swiper {
                overflow: visible;
            }

            & .swiper-wrapper {
                display: flex;
                gap: 30px;
                justify-content: center;
                width: 100%;
            }

            & .swiper-slide {
                flex: 1 1 calc((100% - 30px) / 2);
                max-width: none;
                height: auto;
            }
        }
    }

    /* ── items-3 desktop (>= 1400px): reset Swiper, flex+gap ── */

    &.items-3 {
        @container page-content (min-width: 1400px) {
            & .block-bullets-swiper {
                overflow: visible;
            }

            & .swiper-wrapper {
                display: flex;
                gap: 30px;
                justify-content: center;
                width: 100%;
            }

            & .swiper-slide {
                flex-shrink: 1;
                width: 24%;
                height: auto;
            }
        }

        @container page-content (min-width: 1400px) and (max-width: 1600px) {
            & .swiper-slide {
                width: 33%;
            }
        }
    }

    /* ── items-4 desktop (>= 1400px): reset Swiper, flex+gap ── */

    &.items-4 {
        @container page-content (min-width: 1400px) {
            & .block-bullets-swiper {
                overflow: visible;
            }

            & .swiper-wrapper {
                display: flex;
                gap: 30px;
                width: 100%;
            }

            & .swiper-slide {
                flex-shrink: 1;
                width: 24%;
                height: auto;
            }
        }
    }

    /* ── Display Grid: desktop (>= 1400px) ── */

    &.display-grid {
        @container page-content (min-width: 1400px) {
            & .block-bullets-swiper {
                overflow: visible;
            }

            & .swiper-wrapper {
                display: grid;
                gap: 30px;
            }

            & .bullet-item {
                min-height: unset;
            }

            & .swiper-slide {
                width: 100%;
                max-width: none;
                flex: initial;
                height: auto;
            }

            &.grid-cols-3 .swiper-wrapper {
                grid-template-columns: repeat(3, 1fr);
            }

            &.grid-cols-2 .swiper-wrapper {
                grid-template-columns: repeat(2, 1fr);
            }

            &.grid-cols-4 .swiper-wrapper {
                grid-template-columns: repeat(4, 1fr);
            }

            &.grid-cols-5 .swiper-wrapper {
                grid-template-columns: repeat(5, 1fr);
            }

            &.grid-cols-6 .swiper-wrapper {
                grid-template-columns: repeat(6, 1fr);
            }
        }

        /* Display Grid + not-slide: grid at all sizes, no Swiper */

        &.not-slide {
            & .block-bullets-swiper {
                overflow: visible;
            }

            & .bullet-item {
                min-height: 60cqi;
            }

            & .swiper-wrapper {
                display: grid;
                gap: 15px;
            }

            & .swiper-slide {
                width: 100%;
                max-width: none;
                flex: initial;
                height: auto;
            }

            @container page-content (min-width: 769px) and (max-width: 1399px) {
                & .swiper-wrapper {
                    gap: 20px;
                }

                &.grid-cols-2 .swiper-wrapper {
                    grid-template-columns: repeat(2, 1fr);
                }

                &.grid-cols-3 .swiper-wrapper {
                    grid-template-columns: repeat(3, 1fr);
                }

                &.grid-cols-4 .swiper-wrapper {
                    grid-template-columns: repeat(4, 1fr);
                }

                &.grid-cols-5 .swiper-wrapper {
                    grid-template-columns: repeat(5, 1fr);
                }

                &.grid-cols-6 .swiper-wrapper {
                    grid-template-columns: repeat(6, 1fr);
                }
            }

            @container page-content (min-width: 1400px) {
                & .swiper-wrapper {
                    gap: 30px;
                }
            }

            @container page-content (max-width: 768px) {
                & .swiper-wrapper {
                    grid-template-columns: repeat(2, 1fr);
                }

                & .bullet-item {
                    min-height: unset;
                }
            }
        }

        &.mobile-full {
            @container page-content (max-width: 768px) {
                & .swiper-wrapper {
                    grid-template-columns: 1fr;
                    gap: 10px;
                }
            }
        }
    }
}