/* =============================================================================
   VNCPC Responsive — Media Queries
   File: vncpc-responsive.css
   PHẢI LOAD CUỐI — depends: vncpc-layout, vncpc-header, vncpc-footer
   Breakpoints:
     - 1200px: large laptop → medium laptop
     - 1024px: laptop → tablet landscape
     -  768px: tablet portrait
     -  767px: tablet → mobile (Enfold breakpoint)
     -  480px: mobile small
   ============================================================================= */

/* =============================================================================
   1. LARGE (≤ 1200px)
   ============================================================================= */

@media only screen and (max-width: 1200px) {
    /* Services 3 → 2 columns */
    .vncpc-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Publications 4 → 3 columns */
    .vncpc-pub-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Stats 4 → 2x2 */
    .vncpc-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* =============================================================================
   2. TABLET LANDSCAPE (≤ 1024px)
   ============================================================================= */

@media only screen and (max-width: 1024px) {
    :root {
        --vncpc-section-pad: 70px;
        --vncpc-card-pad:    24px;
    }

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

    /* News 3 → 2 columns */
    .vncpc-news-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Publications 4 → 2 columns */
    .vncpc-pub-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Mission/Vision 2 → 2 (keep) */
    .vncpc-mv-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Hero */
    .vncpc-hero {
        padding: 80px 0 60px;
    }

    .vncpc-hero-content h1,
    .vncpc-hero-content .av-special-heading-tag {
        font-size: clamp(28px, 3.5vw, 42px);
    }
}

/* =============================================================================
   3. TABLET PORTRAIT (≤ 768px)
   ============================================================================= */

@media only screen and (max-width: 768px) {
    :root {
        --vncpc-section-pad: 56px;
        --vncpc-gap:         20px;
    }

    /* Services → 1 column */
    .vncpc-services-grid {
        grid-template-columns: 1fr;
    }

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

    /* News → 1 column */
    .vncpc-news-grid {
        grid-template-columns: 1fr;
    }

    /* Stats 4 → 2x2 */
    .vncpc-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Publications → 2 columns */
    .vncpc-pub-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Mission/Vision → stacked */
    .vncpc-mv-grid {
        grid-template-columns: 1fr;
    }

    /* Hero */
    .vncpc-hero {
        padding: 64px 0 48px;
        text-align: center;
    }

    .vncpc-hero-content {
        margin: 0 auto;
    }

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

    /* Contact wrap */
    .vncpc-contact-wrap {
        padding: 28px 24px;
    }

    /* Section title */
    .vncpc-section-title {
        margin-bottom: 36px;
    }

    /* Header logo */
    #top .avia-logo-element-container img,
    #top #header .avia-logo-element-container img {
        max-height: 52px;
    }
}

/* =============================================================================
   4. MOBILE (≤ 767px) — Enfold mobile breakpoint
   ============================================================================= */

@media only screen and (max-width: 767px) {
    :root {
        --vncpc-section-pad: 48px;
        --vncpc-card-pad:    20px;
        --vncpc-gap:         16px;
    }

    /* Stats → 2 columns */
    .vncpc-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Publications → 1 column */
    .vncpc-pub-grid {
        grid-template-columns: 1fr;
    }

    /* Hero headline */
    .vncpc-hero-content h1,
    .vncpc-hero-content .av-special-heading-tag {
        font-size: 26px;
    }

    .vncpc-hero-content p {
        font-size: 15px;
    }

    /* CTA band */
    .vncpc-cta-band {
        padding: 56px 0;
    }

    .vncpc-cta-band h2,
    .vncpc-cta-band .av-special-heading-tag {
        font-size: 24px;
    }

    /* Footer columns stacked */
    #top #footer .flex_column,
    #top #footer .av_one_half,
    #top #footer .av_one_third,
    #top #footer .av_one_fourth {
        width: 100% !important;
        margin-left: 0 !important;
        float: none !important;
    }

    #top #footer .container,
    #top #footer .inner-container {
        padding-top: 48px;
        padding-bottom: 40px;
    }

    /* Nav: use Enfold mobile nav built-in */
    /* vncpc-header mobile overrides được xử lý bởi Enfold js */
    #top #header .av-logo-element-container img {
        max-height: 45px;
    }

    /* Partners */
    .vncpc-partners-grid {
        gap: 20px;
    }

    .vncpc-partners-grid img {
        max-height: 36px;
    }

    /* Section title */
    .vncpc-section-title h2,
    .vncpc-section-title .av-special-heading-tag {
        font-size: 22px;
    }

    /* About */
    .vncpc-about-intro p {
        font-size: 15px;
    }
}

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

@media only screen and (max-width: 480px) {
    :root {
        --vncpc-section-pad: 40px;
    }

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

    .vncpc-stat-card strong {
        font-size: 26px;
    }

    .vncpc-hero-actions {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .vncpc-hero-actions .avia-button,
    .vncpc-hero-actions a {
        width: 100%;
        text-align: center;
    }

    .vncpc-contact-wrap {
        padding: 22px 16px;
    }
}