/* Industry pages unified styles: clinics, beauty, real-estate, finance, hotels, hr, e-commerce */

/* ========== Base: Solutions Grid & Cards ========== */
.solutions {
    position: relative;
}

.solutions__grid {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    position: relative;
    z-index: 2;
}

.solution {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 2rem;
    align-items: center;
    position: relative;
}

.solution__content { }
.solution__image { }

/* Chat demo container should fill its parent and allow iframe to fit */
.solution__chat-demo {
    width: 100%;
    max-width: 780px;
    height: 720px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    text-align: left;
}

.solution__chat-demo iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ========== Flip Card (mobile-first behavior fix) ========== */
.solution--flip .solution__front,
.solution--flip .solution__back {
    position: relative;
}

/* Ensure front sits above back by default so front CTA is clickable */
.solution--flip .solution__front { z-index: 2; }
.solution--flip .solution__back  { z-index: 1; pointer-events: none; opacity: 0; transform: translateY(20px); }

/* When flipped, back becomes interactable and above front */
.solution--flip.flipped .solution__back  { z-index: 3; pointer-events: auto; opacity: 1; transform: translateY(0); }
.solution--flip.flipped .solution__front { z-index: 1; pointer-events: none; opacity: 0; transform: translateY(-20px); }

/* ========== Responsive ========== */
@media (max-width: 1024px) {
    .solution {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .solutions__grid { gap: 2rem; }

    .solution {
        grid-template-columns: 1fr !important;
        gap: 2rem;
        text-align: left;
    }

    .solution__chat-demo {
        width: 100%;
        max-width: 100%;
        height: 80vh;
        border: 1px solid var(--border-light);
    }
}

@media (max-width: 480px) {
    .solution__chat-demo { height: 100%; }
}