/* ============================================================
   VIART Production — Responsive CSS
   ============================================================ */

/* ---- LARGE DESKTOP (1400px+) ---- */
@media (min-width: 1400px) {
    .featured-grid { grid-template-columns: repeat(4, 1fr); }
    .portfolio-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- DESKTOP (1200px - 1399px) ---- */
@media (max-width: 1399px) {
    .hero-headline { font-size: clamp(2.8rem, 6vw, 5rem); }
    .services-grid { grid-template-columns: repeat(3, 1fr); }
    .featured-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- TABLET LANDSCAPE (992px - 1199px) ---- */
@media (max-width: 1199px) {
    .section-pad     { padding: 80px 0; }
    .section-pad-lg  { padding: 100px 0; }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .services-grid .service-cat-card:nth-child(4),
    .services-grid .service-cat-card:nth-child(5) {
        grid-column: auto;
        margin-left: 0;
        width: 100%;
    }
    .services-grid .service-cat-card:nth-child(5) { grid-column: span 2; }

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

    .portfolio-card:nth-child(1) { grid-column: span 2; }
    .portfolio-card:nth-child(5) { grid-column: span 1; }

    .process-timeline { gap: 0; }
    .process-timeline::before { left: 28px; right: 28px; }

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

    .about-stat-badge.pos-1 { left: 10px; }
    .about-stat-badge.pos-2 { right: 0; }
}

/* ---- TABLET PORTRAIT (768px - 991px) ---- */
@media (max-width: 991px) {
    /* Navbar mobile */
    #viart-navbar { padding: 16px 0; }
    #viart-navbar.scrolled { padding: 12px 0; }

    #navbarMain {
        background: rgba(5,5,5,0.98);
        backdrop-filter: blur(20px);
        border-top: 1px solid var(--border-light);
        padding: 16px 0;
        margin-top: 12px;
    }
    .navbar-nav .nav-link { padding: 12px 20px !important; font-size: 0.92rem; }
    .navbar-nav .nav-link::after { display: none; }
    .lang-switcher { padding: 12px 20px; }
    .btn-viart-cta { width: 90%; margin: 8px 20px; }

    .viart-dropdown {
        background: rgba(11,16,32,0.98);
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0 16px;
    }
    .viart-dropdown .dropdown-item { padding: 10px 12px; }

    /* Hero */
    .hero-headline { font-size: clamp(1.8rem, 4vw, 3rem); }
    .hero-content  { padding: 140px 0 80px; }
    .hero-subheadline { font-size: 0.95rem; }
    .hero-cta-group { flex-direction: column; max-width: 300px; }

    /* Services */
    .services-grid { grid-template-columns: 1fr; }
    .services-grid .service-cat-card:nth-child(5) { grid-column: auto; }

    /* Featured */
    .featured-grid { grid-template-columns: repeat(2, 1fr); }

    /* Portfolio */
    .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
    .portfolio-card:nth-child(1) { grid-column: span 2; }
    .portfolio-card:nth-child(5) { grid-column: span 1; }

    /* Projects */
    .projects-grid { grid-template-columns: repeat(2, 1fr); }

    /* Process Timeline — vertical */
    .process-timeline {
        flex-direction: column;
        gap: 24px;
    }
    .process-timeline::before {
        top: 36px;
        bottom: 36px;
        left: 36px;
        right: auto;
        width: 2px;
        height: auto;
    }
    .process-step {
        display: flex;
        align-items: flex-start;
        gap: 20px;
        text-align: left;
        padding: 0;
    }
    .process-step-num { margin: 0; flex-shrink: 0; }

    /* Why choose */
    .why-visual { margin-bottom: 2rem; }
    .why-visual img { height: 350px; }

    /* About stat badges */
    .about-stat-badge.pos-1,
    .about-stat-badge.pos-2 {
        position: static;
        display: inline-block;
        margin: 0.5rem;
    }
    .about-intro-visual img { height: 360px; }

    /* Admin */
    .admin-sidebar { transform: translateX(-100%); }
    .admin-content { margin-left: 0; }

    /* Highlight */
    .highlight-cards-grid { grid-template-columns: repeat(2, 1fr); }
    .highlight-section { padding: 70px 0; }

    /* CTA */
    #cta-section { padding: 80px 0; }
    .cta-buttons { flex-direction: column; align-items: center; }
}

/* ---- TABLET PORTRAIT navbar logo ---- */
@media (max-width: 991px) {
    .navbar-logo-img { height: 36px; }
}

/* ---- MOBILE (max 767px) ---- */
@media (max-width: 767px) {
    :root { font-size: 15px; }

    .section-pad   { padding: 60px 0; }
    .section-pad-lg { padding: 70px 0; }
    .section-pad-sm { padding: 40px 0; }

    /* Hero */
    .hero-headline { font-size: clamp(1.65rem, 7vw, 2.4rem); letter-spacing: 0; }
    .hero-subheadline { font-size: 0.88rem; }
    .hero-content { padding: 120px 0 70px; }

    /* Footer video hero */
    .footer-video-hero { height: 260px; }
    .footer-hero-logo { width: 150px; }
    .footer-hero-tagline { font-size: 0.8rem; }
    .hero-scroll { display: none; }
    .hero-cta-group { flex-direction: column; }
    .btn-viart, .btn-viart-outline { width: 100%; justify-content: center; }

    /* Services */
    .services-grid { grid-template-columns: 1fr; gap: 14px; }
    .service-cat-card { padding: 24px; }

    /* Featured */
    .featured-grid { grid-template-columns: 1fr; gap: 12px; }

    /* Portfolio */
    .portfolio-grid { grid-template-columns: 1fr; gap: 12px; }
    .portfolio-card:nth-child(n) { grid-column: auto; }
    .portfolio-card { aspect-ratio: 4/3; }
    .portfolio-card-overlay { opacity: 1; }

    /* Process */
    .process-timeline::before { display: none; }
    .process-step { flex-direction: column; align-items: center; text-align: center; gap: 12px; }

    /* Projects */
    .projects-grid { grid-template-columns: 1fr; }

    /* Gallery */
    .project-detail-gallery { grid-template-columns: 1fr; }

    /* Highlight */
    .highlight-cards-grid { grid-template-columns: 1fr; gap: 10px; }
    .highlight-section { padding: 50px 0; }

    /* Why */
    .why-visual img { height: 280px; }

    /* About */
    .about-stat-badge { display: none; }
    .about-intro-visual img { height: 280px; }
    .about-feature-block { padding: 24px; }

    /* Stats */
    .stats-row { padding: 40px 0; }

    /* Contact */
    .contact-card { padding: 24px; }

    /* Footer */
    .footer-top { padding: 60px 0 40px; }
    .footer-brand { margin-bottom: 0; }

    /* Page hero */
    .page-hero { padding: 130px 0 60px; }
    .page-hero-title { font-size: 2rem; }

    /* CTA */
    #cta-section { padding: 60px 0; }
    .cta-title { font-size: 2rem; }
    .cta-buttons { flex-direction: column; align-items: stretch; padding: 0 20px; }

    /* Admin */
    .admin-login-card { padding: 32px 24px; margin: 20px; }
    .admin-content { padding: 20px; }

    /* Section tag */
    .section-title { font-size: 1.8rem; }
    .section-subtitle { font-size: 0.92rem; }

    /* Service detail */
    .service-detail-hero { height: 300px; }
}

/* ---- SMALL MOBILE (max 480px) ---- */
@media (max-width: 480px) {
    .hero-headline { font-size: 1.55rem; }
    .hero-badges { gap: 5px; }
    .hero-badge { font-size: 0.65rem; padding: 4px 10px; }

    .brand-v, .brand-iart { font-size: 1.5rem; }

    .portfolio-filters { gap: 6px; }
    .portfolio-filter { padding: 6px 14px; font-size: 0.75rem; }

    .scc-title { font-size: 1.25rem; }

    .footer-copy { font-size: 0.8rem; }

    #back-to-top { bottom: 20px; right: 20px; width: 38px; height: 38px; }
}

/* ---- PRINT ---- */
@media print {
    #viart-navbar,
    #preloader,
    #back-to-top,
    .hero-scroll,
    .btn-viart,
    .btn-viart-outline,
    footer { display: none !important; }
    body { background: white; color: black; }
}