/* ==========================================================================
   RAVINDRAN INDUSTRIES - Responsive Stylesheet
   Ensures seamless experience across Desktop, Tablet, & Mobile
   Fixes vertical and horizontal scroll behavior
   ========================================================================== */

/* ── Global Viewport & Touch Protection ──────────────────────────────────── */
html, body {
    width: 100%;
    max-width: 100vw;
    /* Do not set overflow: hidden or 100% fixed height on body/html */
    overflow-x: clip;
    -webkit-overflow-scrolling: touch;
}

/* ── Large Tablet & Small Laptop (max-width: 1024px) ─────────────────────── */
@media (max-width: 1024px) {
    :root {
        --pad: clamp(16px, 4vw, 40px);
    }

    .hero-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .hero-artwork-grid {
        height: 420px;
        max-width: 560px;
        margin: 0 auto;
    }

    .blueprint-grid-layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .enquiry-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .quotes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }

    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 200px;
    }

    .masonry-grid {
        column-count: 3;
    }

    .modal-window {
        max-height: 85vh;
    }
}

/* ── Tablet & Mobile (max-width: 900px) ──────────────────────────────────── */
@media (max-width: 900px) {
    /* Show Mobile Hamburger, hide Desktop Links & CTA */
    .nav-links,
    .nav-cta {
        display: none !important;
    }

    .nav-hamburger {
        display: flex;
    }

    .hero-section {
        padding-top: 105px;
        padding-bottom: 60px;
        min-height: auto;
    }

    .page-hero {
        padding-top: 115px;
        padding-bottom: 60px;
        min-height: auto;
    }

    .page-hero-corner {
        display: none;
    }

    .hero-scroll-cue {
        display: none;
    }

    .process-steps-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        padding-bottom: 16px;
        margin-left: calc(-1 * var(--pad));
        margin-right: calc(-1 * var(--pad));
        padding-left: var(--pad);
        padding-right: var(--pad);
    }

    .process-step-card {
        flex: 0 0 80vw;
        max-width: 320px;
        scroll-snap-align: center;
        background: var(--paper);
        border: 1px solid var(--line);
        padding: 24px;
    }

    .process-track-bar {
        display: none;
    }

    .process-mobile-ctrls {
        display: flex;
    }

    .modal-window {
        flex-direction: column;
        max-height: 90vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-image-col {
        min-height: 280px;
        flex: none;
    }

    .modal-image-col img {
        max-height: 45vh;
    }

    .modal-info-col {
        width: 100%;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 24px;
    }

    .modal-nav-btn {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .modal-nav-btn.prev {
        left: 12px;
    }

    .modal-nav-btn.next {
        right: 12px;
    }
}

/* ── Mobile Phone (max-width: 768px) ─────────────────────────────────────── */
@media (max-width: 768px) {
    .section-py {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .section-py-sm {
        padding-top: 45px;
        padding-bottom: 45px;
    }

    .hero-artwork-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        height: auto;
        gap: 12px;
    }

    .hero-art-card.card-0,
    .hero-art-card.card-1,
    .hero-art-card.card-2 {
        grid-column: 1;
        grid-row: auto;
        height: 220px;
    }

    .hero-specs-strip {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .hero-spec-item:not(:first-child) {
        border-left: none;
        border-top: 1px solid rgba(27, 27, 24, 0.1);
        padding-left: 0;
        padding-top: 10px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-primary,
    .btn-secondary {
        justify-content: center;
        width: 100%;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .masonry-grid {
        column-count: 2;
    }

    .quotes-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .back-to-top-btn {
        bottom: 20px;
        right: 20px;
        padding: 10px 14px;
        font-size: 10px;
    }

    /* Form Fields Stack */
    .form-row-2 {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* ── Small Mobile (max-width: 480px) ─────────────────────────────────────── */
@media (max-width: 480px) {
    .bento-grid {
        grid-template-columns: 1fr !important;
        grid-auto-rows: 220px !important;
    }

    .masonry-grid {
        column-count: 1 !important;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .hero-title {
        font-size: 34px;
    }

    .section-title {
        font-size: 26px;
    }

    .modal-close-btn span {
        display: none;
    }

    .modal-close-btn {
        padding: 8px 12px;
    }
}