/* ============================================================
   responsive.css — breakpoints: <640, 640–767, 768–1023, >=1024
   Mobile first adjustments.
   ============================================================ */

@media (max-width: 1023px) {
    .tech-grid { grid-template-columns: 1fr 1fr; }
    .hero-inner { gap: 36px; }
    .about-grid, .project-grid, .contact-grid { gap: 44px; }
}

@media (max-width: 767px) {
    /* Mobile nav: compact dropdown panel under the header (no fullscreen) */
    .nav-toggle { display: inline-flex; }

    .site-nav {
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: rgba(13, 19, 27, 0.98);
        border-bottom: 1px solid var(--border);
        padding: 8px 20px 16px;
        display: none;
    }
    .site-nav a {
        padding: 12px 4px;
        min-height: 44px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid var(--border);
    }
    .nav-lang { padding-top: 12px; }
    .lang-switch { border-left: none; padding-left: 0; margin-left: 0; }

    .nav-toggle-input:checked ~ .site-nav { display: flex; }
    .nav-toggle-input:checked ~ .nav-toggle .nav-toggle-open { display: none; }
    .nav-toggle-input:checked ~ .nav-toggle .nav-toggle-close { display: inline-flex; }

    /* Single column layouts */
    .hero { min-height: 0; max-height: none; padding: 48px 0 56px; }
    .hero-inner { grid-template-columns: 1fr; }
    .hero-text { order: 0; }
    .hero-photo { order: 1; }
    .hero-photo img {
        aspect-ratio: 4 / 3;
        object-position: center 15%;
    }
    .hero-photo::after {
        background:
            linear-gradient(180deg, var(--background) 0%, transparent 25%),
            linear-gradient(0deg, rgba(9, 13, 18, 0.3) 0%, transparent 35%);
    }
    .hero-actions .btn { flex: 1 1 auto; justify-content: center; }

    .about-grid { grid-template-columns: 1fr; }
    .stats { grid-template-columns: 1fr 1fr; }
    .expertise-grid { grid-template-columns: 1fr; }
    .tech-grid { grid-template-columns: 1fr; }
    .project-grid { grid-template-columns: 1fr; }
    .work-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 639px) {
    .container { padding-left: 20px; padding-right: 20px; }
    .section { padding: 80px 0; }
    .section-head { margin-bottom: 40px; }
    .stats { grid-template-columns: 1fr; gap: 18px; }
    .btn { min-height: 48px; }
}

@media (min-width: 640px) and (max-width: 767px) {
    .container { padding-left: 24px; padding-right: 24px; }
    .section { padding: 88px 0; }
    .expertise-grid { grid-template-columns: 1fr; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .expertise-grid { grid-template-columns: 1fr 1fr; }
    .hero-inner { grid-template-columns: 1fr 1fr; }
    .about-grid { grid-template-columns: 1fr; }
    .project-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
}