/**
 * MODULE: conversion
 * PURPOSE: CTA section with headline, button, reassurance points, and image collage
 * COMPLEXITY: LOW
 *
 * TECHNICAL DEBT (Phase 1.5):
 * The following hardcoded values are accepted technical debt
 * and will be migrated to design tokens in Phase 2:
 *
 * | Value                      | Usage                  | Future Token              |
 * |----------------------------|------------------------|---------------------------|
 * | 2.5rem                     | Title desktop          | --text-3xl                |
 * | 2rem                       | Title mobile           | --text-2xl                |
 * | 550px                      | Content max-width      | --content-width-md        |
 * | 480px                      | Collage max-width lg   | --collage-width-lg        |
 * | 380px                      | Collage max-width md   | --collage-width-md        |
 * | 320px                      | Collage max-width sm   | --collage-width-sm        |
 * | 420px                      | Collage height desktop | --collage-height-lg       |
 * | 350px                      | Collage height tablet  | --collage-height-md       |
 * | 300px                      | Collage height mobile  | --collage-height-sm       |
 * | 200px/220px                | Collage item widths    | --collage-item-*          |
 * | 180px/200px                | Collage item heights   | --collage-item-height-*   |
 * | black                      | CTA background         | --color-text-primary      |
 * | white                      | CTA text color         | --color-white             |
 * | #1a1a1a                    | CTA hover bg           | --color-gray-900          |
 * | #16a34a                    | Checkmark color        | --color-success           |
 * | rgba(0,0,0,0.06)           | Card shadow            | --shadow-sm               |
 * | rgba(0,0,0,0.12)           | Collage shadow         | --shadow-md               |
 * | rgba(0,0,0,0.15)           | CTA hover shadow       | --shadow-lg               |
 * | External URL               | Background image       | Project-specific asset    |
 */

.conversion-section {
    background-color: var(--color-frost);
    background-image: url('https://img-strapi.vistarooms.com/strapi/Desk_8a143ac32d.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: var(--space-16) 0;
}

.conversion-container {
    max-width: var(--container-2xl);
    margin: 0 auto;
    padding: 0 var(--space-8);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
}

.conversion-content {
    max-width: 550px;
}

.conversion-title {
    font-size: 2.5rem;
    font-weight: 400;
    color: black;
    margin-bottom: var(--space-4);
    line-height: 1.2;
}

.conversion-intro {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-8);
    line-height: 1.7;
}

.conversion-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.conversion-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4) var(--space-6);
    background: black;
    color: white;
    font-size: var(--text-base);
    font-weight: 600;
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all var(--transition-normal);
    margin-bottom: var(--space-4);
}

.conversion-cta:hover {
    background: #1a1a1a;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.conversion-cta svg {
    transition: transform var(--transition-fast);
}

.conversion-cta:hover svg {
    transform: translateX(4px);
}

.conversion-reassurance {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.conversion-reassurance li {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.conversion-reassurance li svg {
    color: #16a34a;
    flex-shrink: 0;
}

.conversion-reassurance li span {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    font-weight: 500;
}

/* Image Collage */
.conversion-images {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-collage {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 420px;
}

.collage-img {
    position: absolute;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.collage-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.collage-img-1 {
    top: 0;
    right: 0;
    width: 200px;
    height: 180px;
    z-index: 3;
}

.collage-img-2 {
    top: 80px;
    left: 0;
    width: 220px;
    height: 200px;
    z-index: 2;
}

.collage-img-3 {
    bottom: 0;
    right: 40px;
    width: 200px;
    height: 180px;
    z-index: 1;
}

/* Tablet */
@media (max-width: 1024px) {
    .conversion-container {
        gap: var(--space-8);
    }

    .image-collage {
        max-width: 380px;
        height: 350px;
    }

    .collage-img-1 {
        width: 160px;
        height: 150px;
    }

    .collage-img-2 {
        width: 180px;
        height: 170px;
        top: 60px;
    }

    .collage-img-3 {
        width: 160px;
        height: 150px;
        right: 20px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .conversion-section {
        padding: var(--space-12) 0;
    }

    .conversion-container {
        grid-template-columns: 1fr;
        padding: 0 var(--space-4);
        gap: var(--space-10);
    }

    .conversion-content {
        max-width: none;
        text-align: center;
    }

    .conversion-title {
        font-size: 2rem;
    }

    .conversion-intro {
        font-size: var(--text-base);
        margin-bottom: var(--space-6);
    }

    .conversion-card {
        padding: var(--space-5);
    }

    .conversion-cta {
        padding: var(--space-3) var(--space-5);
    }

    .conversion-reassurance {
        gap: var(--space-3);
    }

    .conversion-images {
        order: -1;
    }

    .image-collage {
        max-width: 320px;
        height: 300px;
        margin: 0 auto;
    }

    .collage-img-1 {
        width: 140px;
        height: 130px;
    }

    .collage-img-2 {
        width: 160px;
        height: 150px;
        top: 50px;
    }

    .collage-img-3 {
        width: 140px;
        height: 130px;
        right: 10px;
    }
}