/* ==========================================================================
   Responsive — All media queries consolidated in one place
   ========================================================================== */


/* ==========================================================================
   LARGE TABLET (≤ 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
    .hero-dark h1 {
        font-size: var(--text-3xl);
    }

    .hero-dark {
        padding: var(--space-4xl) var(--space-xl) var(--space-2xl);
    }

    .hero-visual {
        max-width: 95%;
    }

    .hero-visual-split {
        grid-template-columns: 1fr 24px 1.2fr 24px 1.5fr;
    }

    .hero-visual-code .code-editor pre {
        font-size: 0.7rem;
        padding: 10px 12px;
    }

    .instruction-panel-body {
        font-size: 0.8rem;
        padding: 12px 14px;
    }
}


/* ==========================================================================
   TABLET & BELOW (≤ 900px)
   ========================================================================== */

@media (max-width: 900px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

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


/* ==========================================================================
   MOBILE LANDSCAPE & BELOW (≤ 768px)
   ========================================================================== */

@media (max-width: 768px) {

    /* ---- Navigation ---- */
    .menu-toggle {
        display: flex;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        max-width: 280px;
        height: 100vh;
        background: var(--bg-white);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--space-lg);
        padding: var(--space-xl);
        transition: right var(--transition-base);
        border-left: 1px solid var(--border);
        z-index: 1000;
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links a {
        font-size: var(--text-lg);
    }

    /* Mobile dropdown */
    .nav-dropdown {
        text-align: center;
        width: 100%;
    }

    .nav-dropdown-trigger {
        font-size: var(--text-lg);
        justify-content: center;
        width: 100%;
    }

    .nav-dropdown-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        border: none;
        padding: 0;
        margin-top: var(--space-sm);
        background: transparent;
        text-align: center;
        min-width: 0;
    }

    .nav-dropdown-menu a {
        padding: 0.4rem 0.6rem;
    }

    .lang-switcher {
        margin-left: 0;
        margin-top: var(--space-md);
    }

    .nav-inner {
        padding: 0 var(--space-md);
    }

    /* ---- Hero ---- */
    .hero {
        padding: var(--space-2xl) var(--space-lg) var(--space-xl);
    }

    .hero h1 {
        font-size: var(--text-2xl);
    }

    .hero-dark h1 {
        font-size: var(--text-2xl);
    }

    .hero-dark {
        padding: var(--space-2xl) var(--space-lg) var(--space-xl);
    }

    /* ---- Hero visual ---- */
    .hero-visual-split {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .hero-visual-arrow {
        transform: rotate(90deg);
        font-size: 1.25rem;
        padding: 0;
    }

    /* ---- Sections ---- */
    .section {
        padding: var(--space-2xl) var(--space-lg);
    }

    .container,
    .container-narrow,
    .container-wide {
        padding: 0 var(--space-lg);
    }

    /* ---- Grids ---- */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    /* ---- Split section ---- */
    .split-section,
    .split-section.ratio-40-60 {
        grid-template-columns: 1fr;
    }

    /* ---- Tutorial annotated code ---- */
    .tut {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    .tut-side {
        position: static;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-sm);
    }
    .tut-left, .tut-right {
        text-align: left;
    }
    .tut-note {
        position: static !important;
        transform: none !important;
        width: auto;
        flex: 1 1 140px;
    }
    .tut-code {
        padding: 0;
    }
    /* Hide connector lines & dots on mobile */
    .tut-left .tut-note::after,
    .tut-left .tut-note::before,
    .tut-right .tut-note::before,
    .tut-right .tut-note::after {
        display: none;
    }
    /* Reorder: left annotations first, then code, then right annotations */
    .tut-left  { order: 1; }
    .tut-code  { order: 2; }
    .tut-right { order: 3; }
    /* Left-side notes keep left border on mobile */
    .tut-right .tut-note { border-left-width: 3px; border-right: 1px solid var(--border); }
    .tut-right .tut-note--scope { border-left-color: var(--accent); }
    .tut-right .tut-note--flow  { border-left-color: var(--accent-purple); }

    /* ---- Timeline ---- */
    .timeline {
        flex-direction: column;
        align-items: flex-start;
        padding-left: var(--space-xl);
    }

    .timeline-step {
        text-align: left;
        display: flex;
        gap: var(--space-md);
        align-items: flex-start;
        padding: 0 0 var(--space-lg) 0;
    }

    .timeline-step-num {
        margin: 0;
        flex-shrink: 0;
    }

    .timeline-step::before {
        top: 40px;
        bottom: 0;
        left: 20px;
        width: 2px;
        height: auto;
        right: auto;
    }

    .timeline-step:first-child::before {
        left: 20px;
    }

    .timeline-step:last-child::before {
        display: none;
    }

    /* ---- Page header ---- */
    .page-header {
        padding: var(--space-xl) var(--space-lg);
    }

    .page-header h1 {
        font-size: var(--text-2xl);
    }

    /* ---- Typography ---- */
    h1 { font-size: var(--text-2xl); }
    h2 { font-size: var(--text-xl); }

    /* ---- Code blocks ---- */
    .code-block {
        padding: var(--space-md);
        font-size: var(--text-xs);
    }

    .code-editor pre {
        padding: var(--space-md);
        font-size: var(--text-xs);
    }

    /* ---- Pipeline ---- */
    .pipeline-step-box {
        font-size: var(--text-xs);
        padding: 0.5rem 0.75rem;
    }

    /* ---- Role Tabs ---- */
    .role-tabs {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .role-tab {
        flex-direction: row;
        padding: var(--space-md);
        gap: var(--space-md);
    }

    .role-tab::after {
        bottom: auto;
        left: -1px;
        top: 50%;
        transform: translateY(-50%) scaleY(0);
        width: 3px;
        height: 24px;
        border-radius: 0 3px 3px 0;
    }

    .role-tab--active::after {
        transform: translateY(-50%) scaleY(1);
    }

    .role-tab-icon {
        width: 36px;
        height: 36px;
    }

    .role-tab-icon svg {
        width: 18px;
        height: 18px;
    }

    .role-tab-name {
        text-align: left;
    }

    .role-tab-hint {
        text-align: left;
    }

    .role-products {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .role-product {
        max-width: 100%;
        width: 100%;
    }

    .role-product--featured {
        max-width: 100%;
    }

    .role-product:hover {
        transform: none;
    }

    .role-product-arrow {
        transform: rotate(90deg);
        padding: var(--space-xs) 0;
    }

    /* ---- Solution grid (section 3 original) ---- */
    .solution-grid {
        grid-template-columns: 1fr !important;
    }

    /* ---- Evidence strip ---- */
    .evidence-strip {
        gap: var(--space-sm);
    }

    .evidence-badge {
        font-size: var(--text-xs);
        padding: 0.3rem 0.65rem;
    }
}


/* ==========================================================================
   SMALL MOBILE (≤ 480px)
   ========================================================================== */

@media (max-width: 480px) {

    .hero {
        padding: var(--space-xl) var(--space-md) var(--space-lg);
    }

    .hero h1 {
        font-size: var(--text-xl);
    }

    .hero-dark h1 {
        font-size: var(--text-xl);
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
    }

    .hero-actions .btn {
        justify-content: center;
    }

    .section {
        padding: var(--space-xl) var(--space-md);
    }

    .container,
    .container-narrow,
    .container-wide {
        padding: 0 var(--space-md);
    }

    .section-header p {
        font-size: var(--text-base);
    }

    .timeline {
        padding-left: var(--space-md);
    }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}