/* ============================================================
   sections/residential-quote/mobile.css
   Mobile styles for: 3-column layout → vertical stack,
   image sliders, form inputs, modals
   ============================================================ */

/* ── 1024px: Reduce column widths ── */
@media (max-width: 1024px) {
    .column { flex: 1 1 calc(33.33% - 16px); min-width: 260px; }
    .column:first-child { min-width: 200px; }
}

/* ── 860px: Stack to single column ── */
@media (max-width: 860px) {
    /* Stack the body's flex row into a vertical column */
    body {
        flex-direction: column !important;
        align-items: stretch !important;
        height: auto !important;
        min-height: 100vh;
        overflow-y: auto !important;
    }

    .main-content, .columns-wrapper,
    .content-row, .three-col-layout {
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .column {
        width: 100% !important;
        max-width: 100%;
        min-width: unset;
        flex: none;
        height: auto !important;       /* Don't inherit 100% body height */
        overflow: visible !important;  /* Don't clip carousel */
    }

    /* Image carousel: fixed height so children height:100% resolves */
    .image-container {
        height: 240px !important;
        width: 100% !important;
        border-radius: 14px;
        overflow: hidden;
    }

    .scrollable-images {
        display: flex !important;
        width: 100% !important;
        height: 100% !important;
        transition: transform 0.4s ease !important;
    }

    .scrollable-images img {
        flex: 0 0 100% !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 0;
    }

    .slider-container { width: 100%; border-radius: 14px; }
    .quote-header h1 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
    .quote-header p { font-size: 0.88rem; }
}

/* ── 640px: Compact quote form ── */
@media (max-width: 640px) {
    .quote-section { padding: 28px 0; }
    .quote-container { padding: 0 4%; }
    .column { padding: 16px 14px; border-radius: 14px; }

    .image-container { height: 200px !important; }
    .scrollable-images img { height: 100% !important; }

    .checkbox-container { gap: 8px; }
    .checkbox-container label { font-size: 0.85rem; }
    .button-container { flex-direction: column; gap: 10px; }
    .button-container button { width: 100%; }
}

/* ── 480px: Minimal padding ── */
@media (max-width: 480px) {
    .quote-header h1 { font-size: clamp(1.4rem, 6vw, 1.8rem); }
    .column { padding: 14px 12px; border-radius: 12px; }

    .image-container { height: 180px !important; border-radius: 12px; }
    .scrollable-images img { height: 100% !important; }

    .modal-content { padding: 20px 16px; border-radius: 16px; margin: 10px; }
    .modal-content h3 { font-size: 1.1rem; }
    .social-share { flex-direction: column; gap: 8px; }
    .social-share button { width: 100%; }
    .qc-panel { grid-template-columns: 1fr !important; gap: 16px; }
    .qc-left, .qc-right { width: 100%; }
    .qc-result { font-size: 1.5rem; }
    .qc-range { width: 100%; }
}