/* =========================================
   ADAPTACCESSOIRES — CRAFT SECTION
   ========================================= */

.aa-craft {
    position: relative;

    background: var(--aa-white);

    overflow: hidden;
}


/* =========================================
   INTRO
   ========================================= */

.aa-craft__intro {
    position: relative;

    padding: var(--aa-space-13) 0 var(--aa-space-11);

    text-align: center;
}


/* =========================================
   DECORATIVE BACKGROUND
   ========================================= */

.aa-craft__intro::before {
    content: "";

    position: absolute;

    top: -180px;
    left: 50%;

    width: 520px;
    height: 520px;

    transform: translateX(-50%);

    border: 1px solid rgba(90, 31, 74, 0.10);

    border-radius: 50%;

    pointer-events: none;
}


.aa-craft__intro::after {
    content: "";

    position: absolute;

    top: 50px;
    left: 50%;

    width: 260px;
    height: 260px;

    transform: translateX(-50%);

    border: 1px solid rgba(255, 105, 0, 0.10);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================
   CONTENT
   ========================================= */

.aa-craft__intro-content {
    position: relative;

    z-index: 2;

    max-width: 850px;

    margin-inline: auto;
}


/* =========================================
   EYEBROW
   ========================================= */

.aa-craft .aa-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: var(--aa-space-5);

    color: var(--aa-secondary);

    font-size: var(--aa-text-sm);

    font-weight: 700;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


.aa-craft .aa-eyebrow::before,
.aa-craft .aa-eyebrow::after {
    content: "";

    width: 28px;
    height: 1px;

    background: var(--aa-primary);
}


/* =========================================
   TITLE
   ========================================= */

.aa-craft__title {
    margin: 0 0 var(--aa-space-5);

    color: var(--aa-primary);

    font-family: var(--aa-font-heading);

    font-size: clamp(
        38px,
        5vw,
        62px
    );

    font-weight: 700;

    line-height: 1.08;

    letter-spacing: -0.025em;
}


.aa-craft__title span {
    display: block;

    color: var(--aa-dark);
}


/* =========================================
   DIVIDER
   ========================================= */

.aa-craft .aa-divider {
    width: 64px;
    height: 3px;

    margin: 0 auto var(--aa-space-7);

    border-radius: var(--aa-radius-pill);

    background:
        linear-gradient(
            90deg,
            var(--aa-primary),
            var(--aa-secondary)
        );
}


/* =========================================
   DESCRIPTION
   ========================================= */

.aa-craft__description {
    max-width: 760px;

    margin: 0 auto var(--aa-space-4);

    color: var(--aa-text-light);

    font-size: 17px;

    line-height: 1.8;
}


.aa-craft__description:last-child {
    margin-bottom: 0;
}


/* =========================================
   VIDEO
   ========================================= */

.aa-craft__video {
    width: 100%;

    padding: 0 20px var(--aa-space-11);
}


.aa-craft__video-wrapper {
    position: relative;

    width: 100%;

    max-width: 1500px;

    margin-inline: auto;

    overflow: hidden;

    aspect-ratio: 16 / 9;

    border-radius: var(--aa-radius-xl);

    background: var(--aa-dark);

    box-shadow: var(--aa-shadow-lg);
}


/* =========================================
   VIDEO FRAME
   ========================================= */

.aa-craft__video-wrapper::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: inherit;

    pointer-events: none;
}


.aa-craft__video-wrapper iframe {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 1024px) {

    .aa-craft__intro {
        padding: var(--aa-space-11) 0 var(--aa-space-10);
    }


    .aa-craft__video {
        padding-bottom: 60px;
    }


    .aa-craft__intro::before {
        width: 420px;
        height: 420px;
    }


    .aa-craft__intro::after {
        width: 220px;
        height: 220px;
    }

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

    .aa-craft__intro {
        padding: var(--aa-space-10) 0 var(--aa-space-9);
    }


    .aa-craft__intro-content {
        width: calc(100% - 30px);
    }


    .aa-craft__title {
        font-size: 36px;

        line-height: 1.1;
    }


    .aa-craft .aa-eyebrow {
        font-size: 11px;

        letter-spacing: 0.14em;
    }


    .aa-craft .aa-eyebrow::before,
    .aa-craft .aa-eyebrow::after {
        width: 18px;
    }


    .aa-craft .aa-divider {
        width: 52px;

        margin-bottom: var(--aa-space-6);
    }


    .aa-craft__description {
        font-size: 15px;

        line-height: 1.7;
    }


    .aa-craft__video {
        padding: 0 12px 50px;
    }


    .aa-craft__video-wrapper {
        border-radius: var(--aa-radius-md);
    }


    .aa-craft__intro::before {
        width: 300px;
        height: 300px;
    }


    .aa-craft__intro::after {
        width: 170px;
        height: 170px;

        top: 80px;
    }

}


/* =========================================
   REDUCED MOTION
   ========================================= */

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

    .aa-craft * ,
    .aa-craft::before,
    .aa-craft::after {
        transition: none;
        animation: none;
    }

}