/* PRODUCT FEATURE — BLOCK SPECIFIC */

.productFeature-section {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
        background-color: var(--color-primary-light);
    border-radius: 32px;
    margin-top: 24px;
}


/* -----------------------------------------
   MEDIA + CAROUSEL
   ----------------------------------------- */

.productFeature-media {
    position: relative;
}

.productFeature-carousel {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 24px;
    overflow: hidden;
    background-color: var(--color-surface);
}

.productFeature-slides {
    position: absolute;
    inset: 0;
}

.productFeature-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 800ms ease, visibility 0s linear 800ms;
}

.productFeature-slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 800ms ease;
}

.productFeature-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {

    .productFeature-slide,
    .productFeature-slide.is-active {
        transition: none;
    }

}


/* -----------------------------------------
   BADGES (overlay on top of the image)
   ----------------------------------------- */

.productFeature-badges {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.productFeature-badge {
    --badge-color: var(--color-accent);

    position: absolute;
    width: 96px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    box-sizing: border-box;
    text-align: center;
    color: #FFFFFF;
    font-size: var(--text-dkt-small);
    font-weight: var(--weight-bold);
    line-height: 1.1;
    text-transform: uppercase;
}

/* the starburst shape sits behind the text */
.productFeature-badge::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--badge-color);
    clip-path: polygon(
        50.0% 0.0%,
        62.7% 11.0%,
        79.4% 9.5%,
        83.2% 25.9%,
        97.6% 34.5%,
        91.0% 50.0%,
        97.6% 65.5%,
        83.2% 74.1%,
        79.4% 90.5%,
        62.7% 89.0%,
        50.0% 100.0%,
        37.3% 89.0%,
        20.6% 90.5%,
        16.8% 74.1%,
        2.4% 65.5%,
        9.0% 50.0%,
        2.4% 34.5%,
        16.8% 25.9%,
        20.6% 9.5%,
        37.3% 11.0%
    );
}

.productFeature-badge--accent  { --badge-color: var(--color-accent); }
.productFeature-badge--primary { --badge-color: var(--color-primary); }
.productFeature-badge--warning { --badge-color: var(--color-warning); }
.productFeature-badge--error   { --badge-color: var(--color-error); }

/* positions follow the order the badges are added */
.productFeature-badge:nth-child(1) { top: -28px;  left: -28px; }
.productFeature-badge:nth-child(2) { top: 0;      right: -36px; }
.productFeature-badge:nth-child(3) { top: 40%;    right: -36px; }
.productFeature-badge:nth-child(4) { bottom: -24px; left: 24px; }

.productFeature-badge:nth-child(1)::before { transform: rotate(-8deg); }
.productFeature-badge:nth-child(2)::before { transform: rotate(10deg); }
.productFeature-badge:nth-child(3)::before { transform: rotate(-4deg); }
.productFeature-badge:nth-child(4)::before { transform: rotate(6deg); }


/* -----------------------------------------
   VARIATION: INFO LEFT / IMAGE RIGHT
   ----------------------------------------- */

.productFeature-section--text-image {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}

.productFeature-section--text-image .productFeature-media {
    order: 2;
}

.productFeature-section--text-image .productFeature-info {
    order: 1;
}

/* mirror the badges so they hang into the gap between image and text */
.productFeature-section--text-image .productFeature-badge:nth-child(1) { left: auto; right: -28px; }
.productFeature-section--text-image .productFeature-badge:nth-child(2) { right: auto; left: -36px; }
.productFeature-section--text-image .productFeature-badge:nth-child(3) { right: auto; left: -36px; }
.productFeature-section--text-image .productFeature-badge:nth-child(4) { left: auto; right: 24px; }


/* -----------------------------------------
   INFO
   ----------------------------------------- */

.productFeature-info {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.productFeature-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.productFeature-logos {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.productFeature-logo {
    height: 56px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
}


/* AUDIO */

.productFeature-audio {
    display: flex;
    align-items: center;
    gap: 16px;
}

.productFeature-audio-cover {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
}

.productFeature-audio-player {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.productFeature-audio-title {
    color: var(--color-primary);
    font-size: var(--text-dkt-body);
}

.productFeature-audio audio {
    display: block;
    width: 100%;
    height: 40px;
    accent-color: var(--color-accent);
}


/* ISBN + BUTTON */

.productFeature-isbn {
    color: var(--color-text-secondary);
    font-size: var(--text-dkt-caption);
    text-align: right;
}

.productFeature-button-wrapper {
    display: flex;
    justify-content: center;
}


/* -----------------------------------------
   TABLET
   ----------------------------------------- */

@media (max-width: 1199px) {

    .productFeature-section {
        gap: 40px;
    }

    .productFeature-badge {
        width: 84px;
        padding: 12px;
        font-size: var(--text-tbl-caption);
    }

    .productFeature-logo {
        height: 48px;
    }

}


/* -----------------------------------------
   MOBILE
   ----------------------------------------- */

@media (max-width: 767px) {

    .productFeature-section {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .productFeature-info {
        gap: 20px;
    }

    .productFeature-header {
        flex-direction: column;
    }

    .productFeature-section--text-image {
        grid-template-columns: 1fr;
    }

    .productFeature-section--text-image .productFeature-media,
    .productFeature-section--text-image .productFeature-info {
        order: 0;
    }

    /* badges stay inside the image so nothing overflows the screen */
    .productFeature-badge {
        width: 72px;
        padding: 10px;
        font-size: 12px;
    }

    .productFeature-section .productFeature-badge:nth-child(1) { top: 8px;  left: 8px;  right: auto; bottom: auto; }
    .productFeature-section .productFeature-badge:nth-child(2) { top: 8px;  right: 8px; left: auto;  bottom: auto; }
    .productFeature-section .productFeature-badge:nth-child(3) { top: auto; right: 8px; left: auto;  bottom: 8px; }
    .productFeature-section .productFeature-badge:nth-child(4) { top: auto; left: 8px;  right: auto; bottom: 8px; }


    .productFeature-audio-cover {
        width: 56px;
        height: 56px;
    }

}