/* ==========================================
   AI PRODUCTS SECTION
   ==========================================
   Layout stack (z-axis, bottom to top):
     0 — .ai-products__bg-svg   (decorative X/chevron SVG pattern)
     1 — .ai-products__container (dark card + content)
     2 — .ai-products__ai-logo   (AI text SVG, straddles image/content border)
   ========================================== */

.ai-products {
    position: relative;
    background: #E3001D;
    overflow: hidden;
    padding: 0;
    /* no section-level padding — all spacing is on .ai-products__container */
    box-sizing: border-box;
    /*
     * Total section height:
     *   228px  padding-top  (157px SVG offset + 71px inset to card)
     * + 181px  dark card    (.ai-products__card height)
     * + 492px  padding-bottom (gap below card — section ends exactly here)
     * = 901px
     */
}


/* ==========================================
   LAYER 1 — DECORATIVE SVG BACKGROUND
   ========================================== */

.ai-products__bg-svg {
    position: absolute;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 1020px;
    height: 800px;
    overflow: hidden;
    /* definite containing block for the child img */
    z-index: 0;
    pointer-events: none;
    user-select: none;
    line-height: 0;
}

.ai-products__bg-svg img,
.ai-products__bg-svg svg {
    display: block;
    width: 1020px;
    max-width: none;
    /* prevent global img resets from shrinking it */
    height: 1020px;
}


/* ==========================================
   LAYER 2 — CONTENT CONTAINER
   ========================================== */

.ai-products__container {
    position: relative;
    z-index: 1;
    max-width: 954px;
    margin: 0 auto;
    padding-top: 180px;
    padding-bottom: 320px;
}


/* ==========================================
   DARK CARD
   ========================================== */

.ai-products__card {
    display: flex;
    flex-direction: row;
    background: #0F172A;
    position: relative;
    overflow: visible;
}


/* ==========================================
   LEFT HALF — IMAGE HOLDER (232 x 181 px)
   The AI logo sits at left:178px from card's
   left, straddling the image/content border.
   ========================================== */

.ai-products__image-wrap {
    position: relative;
    width: 232px;
    min-width: 232px;
    height: 181px;
    flex-shrink: 0;
    overflow: visible;
}

.ai-products__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}

.ai-products__ai-logo {
    position: absolute;
    left: 178px;
    top: 50%;
    transform: translateY(-50%);
    width: 131px;
    height: 96px;
    pointer-events: none;
    z-index: 2;
}


/* ==========================================
   RIGHT HALF — CONTENT
   padding: 66px top/bottom, 136px left, 44px right
   Text + button in a row with 39px gap
   ========================================== */

.ai-products__content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 39px;
    padding: 66px 44px 66px 136px;
    flex: 1;
    min-width: 0;
}

.ai-products__text {
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0;
    color: #FFFFFF;
    flex: 1;
    min-width: 0;
}

.ai-products__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: #000000;
    background: #FFFFFF;
    border: 3px solid #FFFFFF;
    border-radius: 999px;
    padding: 12px 22px;
    height: 48px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.ai-products__btn:hover {
    background: transparent;
    color: #FFFFFF;
}

/* ==========================================
   RESPONSIVE — TABLET  (768px – 1019px)
   ──────────────────────────────────────────
   SVG scales to 90vw (proportional square).
   Card stays in ROW layout (image | content).

   Image width and AI icon left stay at their
   desktop values (232px / 178px) so the
   text-to-icon gap is always preserved:
     gap = (232 + 136) − (178 + 131) = 59px ✓
   No collision can occur.

   The CONTENT side switches internally from
   row (text | button) → column (text / button)
   so text has full content-width to breathe
   on narrower viewports.
   ========================================== */
@media (max-width: 1019px) {

    .ai-products__bg-svg {
        width: 90vw;
        height: 650px;
        top: 90px;
    }

    .ai-products__bg-svg img,
    .ai-products__bg-svg svg {
        width: 90vw;
        height: 90vw;
        max-width: none;
    }

    .ai-products__container {
        max-width: calc(90vw - 66px);
        padding-top: 150px;
        padding-bottom: 220px;
    }

    .ai-products__content {
        flex-direction: column;
        align-items: flex-start;
        padding: 36px 32px 36px 136px;
        gap: 16px;
    }

    .ai-products__btn {
        align-self: flex-start;
    }
}


/* ==========================================
   RESPONSIVE — MOBILE  (< 768px)
   ========================================== */
@media (max-width: 767px) {

    .ai-products__bg-svg {
        width: 92vw;
        height: 550px;
        top: 60px;
    }

    .ai-products__bg-svg img,
    .ai-products__bg-svg svg {
        width: 92vw;
        height: 92vw;
        max-width: none;
    }

    .ai-products__container {
        max-width: calc(92vw - 40px);
        padding-top: 120px;
        padding-bottom: 120px;
    }

    /* ── Card: column stack ── */
    .ai-products__card {
        flex-direction: column;
    }

    .ai-products__image-wrap {
        width: 100%;
        min-width: unset;
        height: 180px;
    }

    .ai-products__ai-logo {
        left: auto;
        right: 24px;
        top: auto;
        bottom: 0;
        transform: translateY(50%);
        z-index: 3;
    }

    .ai-products__content {
        flex-direction: column;
        align-items: flex-start;
        padding: 64px 20px 40px 20px;
        gap: 20px;
    }

    .ai-products__btn {
        align-self: stretch;
        text-align: center;
        white-space: normal;
    }
}


/* ==========================================
   RESPONSIVE — EXTRA SMALL  (< 420px)
   ========================================== */
@media (max-width: 419px) {

    .ai-products__bg-svg {
        width: 96vw;
        height: 480px;
        top: 50px;
    }

    .ai-products__bg-svg img,
    .ai-products__bg-svg svg {
        width: 96vw;
        height: 96vw;
        max-width: none;
    }

    .ai-products__container {
        max-width: calc(96vw - 32px);
        padding-top: 100px;
        padding-bottom: 90px;
    }
}