/* ============================================================
   RESPONSIVE.CSS — BAB Dynamics
   Load order: LAST — overrides all other stylesheets.
   Breakpoints:
     1100px — large tablet / small laptop
      900px — tablet
      768px — large phone / small tablet
      480px — phone
      360px — small phone
   Plus: landscape phones, touch devices, print.
   Note: nav.css owns its own 860px mobile-menu breakpoint;
         founder.css owns founder-page breakpoints.
   ============================================================ */

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

    /* Footer: 4 columns → 2x2 */
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .footer-brand { grid-column: 1 / -1; }

    /* Connect: form + info panel stack */
    .connect-layout {
        grid-template-columns: 1fr;
        gap: 24px;
        max-width: 640px;
        margin: 0 auto;
    }

    /* Contact info becomes horizontal strip row */
    .contact-info {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .contact-info-item {
        flex: 1 1 calc(33.33% - 11px);
        min-width: 170px;
    }

}

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

    :root {
        --space-xl: 84px;
    }

    /* Custom cursor off — touch devices have no hover cursor */
    #cursor-dot,
    #cursor-ring {
        display: none !important;
    }

    body { cursor: auto; }

    /* Ecosystem: 4 cards → 2x2 */
    .ecosystem-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Globe smaller */
    .globe-anchor {
        width: min(240px, 56vw);
        height: min(240px, 56vw);
        margin-bottom: 60px;
    }

    /* Hologram: 4 → 2x2 */
    .hologram-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Tech cubes: tighter grid */
    .tech-cubes-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px 20px;
    }

    /* Future room: 3 → 1 column, centered */
    .future-grid {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin: 0 auto;
    }

    /* Gate doors shorter */
    .gate-doors { height: 180px; }

}

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

    :root {
        --space-xl: 68px;
    }

    body { font-size: 16px; }

    /* Section headers tighter */
    .section-header { margin-bottom: 44px; }

    .section-title { letter-spacing: 4px; }

    .section-lead {
        letter-spacing: 2px;
        margin-top: 14px;
    }

    /* Ecosystem: 2x2 → single column */
    .ecosystem-grid {
        grid-template-columns: 1fr;
        max-width: 440px;
        margin: 0 auto;
    }

    /* Hologram: 2x2 → single column */
    .hologram-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .holo-inner { padding: 40px 22px 36px; }

    /* Tech cubes: 3 → 2 per row */
    .tech-cubes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 44px 16px;
    }

    .tech-cube {
        width: 104px;
        height: 104px;
    }

    /* Vision headline */
    .vision-section { min-height: 70vh; }

    .vision-headline { letter-spacing: 1.5px; }

    /* Founder preview */
    .founder-preview-wrap { text-align: left; }

    .fp-text { font-size: 16px; }

    /* Gate */
    .gate-section { min-height: 66vh; }

    .gate-doors { height: 150px; }

    .gate-seal {
        width: 50px;
        height: 50px;
    }

    /* Modal */
    .modal-box { padding: 40px 26px 34px; }

    /* Footer: 2x2 → single column */
    .footer-top {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 54px 24px 40px;
    }

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

    /* Contact info items stack again */
    .contact-info { flex-direction: column; }

    .contact-info-item { flex: 1 1 auto; }

}

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

    :root {
        --space-xl: 56px;
    }

    /* Zone tags smaller */
    .section-tag {
        font-size: 9px;
        letter-spacing: 3px;
    }

    .section-title { letter-spacing: 3px; }

    /* Eco cards tighter padding */
    .eco-card-inner { padding: 30px 22px 24px; }

    .card-badge {
        right: 14px;
        padding: 4px 11px;
        font-size: 8px;
    }

    /* Cubes: keep 2 per row but smaller */
    .tech-cube {
        width: 92px;
        height: 92px;
    }

    .cube-face span { font-size: 21px; }

    .cube-label {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    /* Globe rings smaller */
    .globe-anchor {
        width: min(190px, 64vw);
        height: min(190px, 64vw);
    }

    /* Gate brand reveal smaller */
    .gate-doors { height: 124px; }

    /* Founder preview */
    .founder-preview-wrap { padding: 30px 22px; }

    .btn-founder-cta {
        width: 100%;
        justify-content: center;
    }

    /* Form */
    .contact-box { padding: 26px 20px; }

    .contact-box input,
    .contact-box textarea {
        padding: 14px 15px;
        font-size: 15px;
    }

    /* Modal close button bigger touch target */
    .modal-close {
        width: 42px;
        height: 42px;
    }

}

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

    .title-bab { letter-spacing: 4px; }

    .title-dynamics {
        letter-spacing: 5px;
        padding-left: 5px;
    }

    .tech-cubes-grid { gap: 38px 10px; }

    .tech-cube {
        width: 84px;
        height: 84px;
    }

    .eco-card-icon { font-size: 28px; }

    .holo-icon { font-size: 34px; }

}

/* ════════════════════════════════════════════════════════════
   LANDSCAPE PHONES (height-constrained)
   Hero must not overflow on short screens.
   ════════════════════════════════════════════════════════════ */
@media (max-height: 540px) and (orientation: landscape) {

    .hero-section {
        min-height: auto;
        padding: 110px 24px 70px;
    }

    .scroll-indicator { display: none; }

    .gate-section,
    .vision-section {
        min-height: auto;
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .founder-hero-section {
        min-height: auto;
        padding: 110px 24px 60px;
    }

}

/* ════════════════════════════════════════════════════════════
   TOUCH DEVICES — hover effects need a tap equivalent.
   :active states mirror key hover effects so cards
   respond to touch. Tilt/glare handled by tilt.js
   (disabled on touch via JS).
   ════════════════════════════════════════════════════════════ */
@media (hover: none) {

    /* Cards respond to tap */
    .eco-card:active .eco-card-inner {
        border-color: var(--border);
        background: rgba(0, 210, 255, 0.045);
    }

    .tech-cube:active .cube-face.front { transform: rotateY(180deg); }
    .tech-cube:active .cube-face.back  { transform: rotateY(360deg); }

    .holo-card:active .holo-inner {
        border-color: var(--primary);
        transform: translateY(-3px);
    }

    .future-card:active {
        border-color: rgba(245, 166, 35, 0.4);
    }

    /* Permanent subtle glow on touch — no hover discovery needed */
    .eco-card-glow,
    .holo-glow {
        opacity: 0.35;
    }

    /* Corner brackets always faintly visible */
    .eco-card-corner { opacity: 0.3; }

}

/* ════════════════════════════════════════════════════════════
   LARGE SCREENS ≥ 1700px — cap content width, scale up type
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1700px) {

    .ecosystem-section,
    .innovation-section,
    .future-section {
        max-width: 1380px;
    }

    body { font-size: 19px; }

}

/* ════════════════════════════════════════════════════════════
   PRINT — clean document output
   ════════════════════════════════════════════════════════════ */
@media print {

    #three-canvas,
    #cursor-dot,
    #cursor-ring,
    #scroll-progress-bar,
    #preloader,
    .zone-side-nav,
    #main-nav,
    .scroll-indicator,
    .hero-node,
    .gate-doors,
    .globe-anchor,
    .modal-overlay,
    #main-footer .footer-links-col {
        display: none !important;
    }

    body {
        background: #ffffff;
        color: #000000;
    }

    h1, h2, h3, p, blockquote {
        color: #000000 !important;
        text-shadow: none !important;
    }

    .eco-card-inner,
    .future-card,
    .founder-preview-wrap,
    .biography-wrap {
        background: none;
        border: 1px solid #cccccc;
        backdrop-filter: none;
    }

}