/* ============================================================
   ELIM LAB — Terminal Theme
   responsive.css: Mobile-first breakpoints
   ============================================================ */

/* ============================================================
   BASE / MOBILE (0 – 479px)
   Default styles are defined in main.css and components.css.
   Only phone-specific overrides live here.
   ============================================================ */

/* Full-width chat on very small phones */
@media (max-width: 479px) {
    .chat__container {
        width:   calc(100vw - 16px);
        right:   8px;
        bottom:  76px;
        height:  calc(100vh - 96px);
        contain: layout style;
    }

    .chat {
        bottom: 10px;
        right:  10px;
    }

    /* Tighter section padding on small phones */
    .section {
        padding: 3rem 0;
    }

    /* Smaller hero headline */
    .hero__title {
        font-size: clamp(1.75rem, 12vw, 3rem);
    }

    /* Reduce modal padding */
    .modal__body {
        padding: 1.25rem;
    }

    .modal__header {
        padding: 1.25rem;
    }
}

/* ============================================================
   SMALL DEVICES (Large Mobile: 480px+)
   ============================================================ */
@media (min-width: 480px) {
    /* Chat returns to component default sizing — no overrides needed */

    .hero__metrics {
        flex-direction: row;
        flex-wrap:      wrap;
        gap:            2rem;
    }
}

/* ============================================================
   MEDIUM DEVICES (Tablet: 768px+)
   ============================================================ */
@media (min-width: 768px) {

    /* Layout */
    .container {
        padding: 0 2rem;
        contain: layout;
    }

    .section {
        padding: 6rem 0;
        contain: layout;
    }

    /* ============================================================
       DESKTOP NAVIGATION
       ============================================================ */

    /* Hide hamburger on desktop */
    .nav__mobile-toggle {
        display: none;
    }

    /* Hide overlay on desktop — not needed */
    .nav__overlay {
        display: none;
    }

    /* Switch nav from slide-panel to horizontal bar */
    .nav__links {
        position:        static;
        transform:       none;
        width:           auto;
        max-width:       none;
        background:      transparent;
        border-left:     none;
        flex-direction:  row;
        justify-content: flex-end;
        align-items:     center;
        gap:             2rem;
        opacity:         1;
        visibility:      visible;
    }

    /* Ensure aria-hidden doesn't hide on desktop
       (JS sets this for mobile accessibility) */
    .nav__links[aria-hidden="true"] {
        transform:   none;
        visibility:  visible;
    }

    .nav__links a {
        font-size: var(--font-size-sm);
    }

    .nav__links > li {
        display:     flex;
        align-items: center;
    }

    /* Desktop contact button — smaller */
    .nav__contact {
        margin-top: 0;
        padding:    0.4rem 1rem;
        font-size:  var(--font-size-xs);
    }

    /* Desktop dropdown — absolute positioned popup */
    .nav__dropdown {
        position: relative;
    }

    .nav__dropdown-toggle {
        font-size: var(--font-size-sm);
    }

    .nav__dropdown-menu {
        position:   absolute;
        top:        calc(100% + 6px);
        left:       50%;
        transform:  translateX(-50%);
        background: var(--bg-2);
        border:     1px solid var(--green-border);
        min-width:  180px;
        margin-top: 0;
        padding:    0.4rem 0;
        box-shadow: var(--shadow-lg);
        max-height: 0;
        overflow:   hidden;
        opacity:    0;
        visibility: hidden;
        transition: max-height 0.25s ease, opacity 0.2s ease, visibility 0.2s ease;
    }

    .nav__dropdown-menu.show {
        max-height: 500px;
        opacity:    1;
        visibility: visible;
    }

    .nav__dropdown-menu a {
        padding:     0.5rem 1.25rem;
        font-size:   var(--font-size-sm);
        border-left: none;
    }
    .nav__dropdown-menu a:hover {
        background:  var(--green-glow);
        border-left: none;
        padding-left: 1.25rem;
    }

    /* Desktop language switcher — border separator */
    .nav__lang-switcher {
        margin-left:  1rem;
        padding-left: 1rem;
        border-left:  1px solid var(--green-border);
    }

    .nav__lang-switcher a {
        font-size: var(--font-size-xs);
    }

    /* Hero metrics row */
    .hero__metrics {
        flex-direction: row;
        gap:            4rem;
    }

    /* Grid — auto multi-column */
    .grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    /* Grid named variants */
    .grid--2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Timeline — two-column (date + content) */
    .timeline__item {
        grid-template-columns: 140px 1fr;
        gap:                   3rem;
        contain:               layout;
    }

    /* Footer — three-column */
    .footer__content {
        grid-template-columns: 2fr 1fr 1fr;
        gap:                   4rem;
    }

    .footer__bottom {
        flex-direction:  row;
        justify-content: space-between;
        text-align:      left;
    }

    /* Modal meta — two columns */
    .modal__meta {
        grid-template-columns: repeat(2, 1fr);
    }

    .modal__body {
        padding: 2.5rem;
        contain: layout style;
    }
}

/* ============================================================
   LARGE DEVICES (Desktop: 1024px+)
   ============================================================ */
@media (min-width: 1024px) {
    /* Nav styles already set at 768px — nothing extra needed */

    /* Three-column grid default on desktop */
    .grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    /* Chat widget — slightly larger */
    .chat__container {
        width:  400px;
        height: 520px;
    }

    /* Wider section label visibility */
    .section__label {
        font-size: var(--font-size-xs);
    }
}

/* ============================================================
   EXTRA LARGE DEVICES (Large Desktop: 1440px+)
   ============================================================ */
@media (min-width: 1441px) {

    /* Vertical sidebar dots navigation */
    .sidebar {
        position:       fixed;
        left:           1.5rem;
        top:            50%;
        transform:      translateY(-50%);
        display:        flex;
        flex-direction: column;
        gap:            0.875rem;
        z-index:        var(--z-sidebar);
    }

    .sidebar a {
        display:    block;
        width:      2px;
        height:     24px;
        background: var(--green-border);
        transition: all var(--transition-slow);
    }

    .sidebar a.active {
        background: var(--green);
        height:     44px;
        box-shadow: 0 0 6px var(--green);
    }

    .sidebar a:hover {
        background: var(--green-dim);
        height:     36px;
    }
}

/* ============================================================
   PRINT — strip CRT effects for print
   ============================================================ */
@media print {
    body::before,
    body::after {
        display: none;
    }

    .nav,
    .chat,
    .progress,
    .sidebar {
        display: none;
    }

    .section {
        padding: 2rem 0;
    }
}