/**
 * responsive.css — Media Queries
 * ────────────────────────────────
 * All breakpoint overrides are centralised here so you have one
 * place to audit and adjust the responsive behaviour of the site.
 *
 * Breakpoints used:
 *   ≤ 1100px  — Tablet landscape
 *   ≤  768px  — Mobile portrait
 *   ≤  480px  — Small phones
 *
 * Depends on: variables.css, layout.css, components.css
 */


/* ════════════════════════════════════════
   TABLET — ≤ 1100px
   ════════════════════════════════════════ */
@media (max-width: 1100px) {

    /* Hide hero stats panel (not enough horizontal space) */
    .hero-stats { display: none; }

    /* Stack about section vertically */
    .about-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    /* Founder portrait styling when stacked */
    .founder-image-wrapper {
        margin: 0 auto;
        max-width: 420px;
    }

    /* Simplify portfolio to a 6-column, 2-row grid */
    .portfolio-grid {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: 220px 220px;
        gap: 8px;
    }

    /* Re-assign portfolio tile positions for the simplified grid */
    .p1 { grid-column: 1/4; grid-row: 1; }
    .p2 { grid-column: 4/7; grid-row: 1; }
    .p3 { grid-column: 1/3; grid-row: 2; }
    .p4 { grid-column: 3/5; grid-row: 2; }
    .p5 { grid-column: 5/7; grid-row: 2; }
    .p6, .p7, .p8 { display: none; } /* Only 5 tiles on tablet */

    /* Stack FAQ sidebar + list vertically */
    .faq-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    /* Footer collapses to 2-column grid */
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 38px;
    }
}




/* ════════════════════════════════════════
   MOBILE — ≤ 768px
   ════════════════════════════════════════ */
@media (max-width: 768px) {

    :root {
        --pad: 22px; /* Tighter padding on small screens */
    }

    /* Restore default cursor on mobile (custom cursor hidden) */
    body { cursor: auto; }

    /* Compact nav for mobile */
    nav         { padding: 18px var(--pad); }
    nav.scrolled { padding: 13px var(--pad); }

    /* Hide desktop nav links — replaced by hamburger menu */
    .nav-links { display: none; }

    /* Show hamburger button */
    .hamburger { display: flex; }

    /* Hero content fills full width on mobile */
    .hero-content { max-width: 100%; }

    /* Hide scroll indicator — not needed on mobile */
    .hero-scroll { display: none; }

    /* Reset "Our Story" section on mobile: unstick, ensure height: auto, and prevent overflow clipping */
    .about,
    #about {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        box-shadow: none !important;
    }

    .about-inner,
    .about-text,
    .founder-image-wrapper {
        position: relative !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Stack about pillars vertically */
    .about-pillars { grid-template-columns: 1fr; }

    /* Stack services header vertically */
    .services-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    /* Services: single column on mobile */
    .services-grid { grid-template-columns: 1fr; gap: 3px; }

    /* Services: widescreen aspect ratio for single column */
    .service-card { aspect-ratio: 16/9; }

    /* Always show service descriptions on mobile (no hover) */
    .sc-desc { opacity: 1; transform: none; }
    .sc-tag  { opacity: 1; transform: none; }

    /* Portfolio: 2-column, 3-row grid for mobile */
    .portfolio-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(3, 170px);
        gap: 6px;
    }

    /* Portfolio tile positions for 2-col mobile grid */
    .p1 { grid-column: 1/2; grid-row: 1; }
    .p2 { grid-column: 2/3; grid-row: 1; }
    .p3 { grid-column: 1/2; grid-row: 2; }
    .p4 { grid-column: 2/3; grid-row: 2; }
    .p5 { grid-column: 1/2; grid-row: 3; }
    .p6 { grid-column: 2/3; grid-row: 3; display: block !important; } /* p6 is visible again on mobile */
    .p7, .p8 { display: none; }

    /* Process: 2-column layout, hide connecting line */
    .process-steps      { grid-template-columns: 1fr 1fr; gap: 36px 16px; }
    .proc-connector     { display: none; }

    /* Packages: single column */
    .packages-grid      { grid-template-columns: 1fr; }

    /* Featured card appears first in mobile layout */
    .pkg-card.featured  { order: -1; }

    /* Stack contact info + form vertically */
    .contact-inner      { grid-template-columns: 1fr; gap: 48px; }

    /* Stack form row fields vertically */
    .form-row           { grid-template-columns: 1fr; }

    /* Footer: single column */
    .footer-top         { grid-template-columns: 1fr; }

    /* Footer bottom: stacked and centred */
    .footer-bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}




/* ════════════════════════════════════════
   SMALL PHONES — ≤ 480px
   ════════════════════════════════════════ */
@media (max-width: 480px) {

    /* Slightly smaller hero title on very small screens */
    .hero-title { font-size: 2.4rem; }

    /* Process steps: single column on small phones */
    .process-steps { grid-template-columns: 1fr; }
}