/* ═══════════════════════════════════════════════════════════════════
   MOBILE PORTRAIT MODE FIXES — Intellecta Solutions
   Only affects portrait orientation on mobile devices.
   Does NOT touch landscape or desktop layouts.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1) Header: "Intellecta Solutions" title centering & visibility ─── */
@media (orientation: portrait) and (max-width: 600px) {
    .brand-bar {
        height: 70px !important;
        padding: 0 10px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .brand-title-logo-group {
        width: 100% !important;
        justify-content: center !important;
        gap: 8px !important;
        padding-left: 40px !important; /* offset for hamburger */
        padding-right: 10px !important;
    }

    .header-logo-wrapper {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        flex-shrink: 0 !important;
    }

    .brand-title {
        font-size: 1.15rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .brand-underline {
        width: 80px !important;
        height: 2px !important;
    }

    .hamburger-menu {
        top: 14px !important;
        left: 10px !important;
        width: 36px !important;
        height: 36px !important;
    }
}

/* ─── 2) Language selector & Trinity Live banner visibility ─── */
@media (orientation: portrait) and (max-width: 600px) {
    .language-selector {
        top: 75px !important;
        right: 10px !important;
        left: auto !important;
        padding: 4px 6px !important;
        gap: 3px !important;
        z-index: 10010 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .lang-btn {
        min-width: 34px !important;
        padding: 4px 8px !important;
        font-size: 11px !important;
        min-height: auto !important;
    }

    .fab-live-banner {
        top: 75px !important;
        left: 10px !important;
        right: auto !important;
        max-width: 180px !important;
        padding: 6px 12px !important;
        font-size: 0.7rem !important;
        z-index: 1000 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .fab-live-text {
        font-size: 0.7rem !important;
    }

    .fab-description {
        font-size: 0.55rem !important;
    }
}

/* ─── 3) Modular AI Ecosystem / Tetris Board: center & fit ─── */
@media (orientation: portrait) and (max-width: 550px) {
    #tetrisEcosystem,
    .tetris-board-container {
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 20px 5px !important;
    }

    .tetris-board {
        transform: scale(0.42) !important;
        transform-origin: top center !important;
        height: 260px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        left: 50% !important;
        position: relative !important;
        margin-left: -429px !important; /* half of 858px board width */
    }

    .tetris-board-container h2 {
        font-size: 1.2rem !important;
        text-align: center !important;
    }

    .tetris-board-container p {
        font-size: 0.72rem !important;
        text-align: center !important;
        padding: 0 10px !important;
    }

    /* Hide bottom info bars on portrait mobile */
    .tetris-board-container > div:last-of-type:not(.tetris-board) {
        display: none !important;
    }
}

@media (orientation: portrait) and (max-width: 400px) {
    .tetris-board {
        transform: scale(0.34) !important;
        height: 210px !important;
        margin-left: -429px !important;
    }

    .tetris-board-container h2 {
        font-size: 1.05rem !important;
    }
}

/* ─── 4) Athena Widget & Meet Widget: move Athena right, prevent overlap ─── */
@media (orientation: portrait) and (max-width: 768px) {
    /* Athena launcher — move to right side in portrait */
    .athena-launcher {
        left: auto !important;
        right: 16px !important;
        bottom: 20px !important;
    }

    /* Athena chat window — open from right */
    .athena-window {
        left: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-height: 88vh !important;
        border-radius: 20px 20px 0 0 !important;
        transform-origin: bottom right !important;
    }

    /* Meet widget — keep left, adjust spacing */
    #intellecta-meet-widget {
        left: 12px !important;
        right: auto !important;
        bottom: 16px !important;
        z-index: 9998 !important;
    }

    /* B2B drawer — move up to avoid overlap */
    .b2b-pricing-drawer {
        bottom: 80px !important;
        left: 12px !important;
        z-index: 9997 !important;
    }

    .b2b-drawer-toggle {
        padding: 8px 12px !important;
        font-size: 0.75rem !important;
        min-height: auto !important;
        min-width: auto !important;
    }

    .b2b-drawer-icon {
        width: 24px !important;
        height: 24px !important;
    }

    .b2b-drawer-text {
        font-size: 0.72rem !important;
    }
}

/* ─── 5) Architecture Cards: 2-col on portrait mobile ─── */
@media (orientation: portrait) and (max-width: 768px) {
    .workflow-diagram {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .workflow-stage {
        padding: 18px 12px !important;
    }

    .workflow-stage .icon {
        width: 45px !important;
        height: 45px !important;
        font-size: 18px !important;
    }

    .workflow-stage h3 {
        font-size: 0.82rem !important;
        line-height: 1.3 !important;
    }

    .workflow-stage p {
        font-size: 0.72rem !important;
        line-height: 1.4 !important;
    }

    .section-title {
        font-size: 1.4rem !important;
        padding: 0 10px !important;
    }

    .section-subtitle {
        font-size: 0.9rem !important;
        padding: 0 10px !important;
    }
}

@media (orientation: portrait) and (max-width: 400px) {
    .workflow-stage {
        padding: 14px 10px !important;
    }

    .workflow-stage .icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 16px !important;
    }

    .workflow-stage h3 {
        font-size: 0.75rem !important;
    }

    .workflow-stage p {
        font-size: 0.68rem !important;
    }
}

/* ─── 6) Infinity Symbol (DevOps): enlarge & add spacing ─── */
@media (orientation: portrait) and (max-width: 768px) {
    .infinity-section {
        padding: 60px 10px 30px !important;
    }

    /* Space above infinity from the "Learn About AI Infrastructure" button */
    .infinity-section > div[style*="text-align: center"] {
        margin-bottom: 40px !important;
    }

    .infinity-container {
        margin: 10px auto -20px !important;
    }

    .infinity-subtitle {
        margin-bottom: -60px !important;
    }

    .infinity-symbol {
        width: 95vw !important;
        max-width: 480px !important;
        height: 300px !important;
        margin: 50px auto 30px !important;
    }

    .infinity-svg {
        width: 100% !important;
        height: 100% !important;
    }

    .infinity-title {
        font-size: 1.6rem !important;
    }

    /* Agentic SDLC section spacing */
    .agentic-sdlc-container {
        padding: 20px 12px !important;
    }

    .agentic-main-title {
        font-size: 1.5rem !important;
    }

    .agentic-intro-text {
        font-size: 0.88rem !important;
        line-height: 1.6 !important;
    }

    .agentic-feature-item {
        padding: 12px !important;
    }

    /* AI Infrastructure link */
    .infinity-section > div[style*="text-align: center"] a {
        padding: 10px 20px !important;
        font-size: 0.85rem !important;
    }
}

@media (orientation: portrait) and (max-width: 480px) {
    .infinity-symbol {
        max-width: 380px !important;
        height: 240px !important;
        margin: 40px auto 20px !important;
    }

    .infinity-title {
        font-size: 1.4rem !important;
    }

    .infinity-subtitle {
        font-size: 0.85rem !important;
    }
}

/* ─── General portrait overflow fix ─── */
@media (orientation: portrait) and (max-width: 768px) {
    body, html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Don't override ALL buttons' min-height (avoid breaking FAB, puzzle, etc.) */
    /* Only apply touch-target minimum to nav and CTA buttons */
    .cta-button, .nav-sub-item, .filter-btn {
        min-height: 44px;
    }

    /* Hero section adjustments */
    .hero h1 {
        font-size: 1.8rem !important;
        line-height: 1.25 !important;
        padding: 0 8px !important;
    }

    .hero-subtitle {
        font-size: 0.95rem !important;
        padding: 0 12px !important;
    }

    /* FAB container positioning */
    .fab-container {
        bottom: 85px !important;
        right: 12px !important;
    }

    .fab-main {
        width: 46px !important;
        height: 46px !important;
        min-height: auto !important;
        min-width: auto !important;
    }

    .fab-option {
        min-height: auto !important;
        min-width: auto !important;
    }
}