/**
 * Project Zero Trader - Universal Pages Responsive Styles
 * Fixes Mobile & Tablet Layouts for About, Contact, Resources, Roadmap, etc.
 */

/* ==========================================================================
   TABLET RESPONSIVE (max-width: 992px)
   ========================================================================== */
@media (max-width: 992px) {
    /* About & Resources Header Grids */
    .pzt-about-layout section,
    .pzt-resources-layout header,
    .pzt-roadmap-layout header {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* Main Content + Sidebar Grids */
    .pzt-contact-layout > div,
    .pzt-resources-layout > div,
    .pzt-about-layout > section {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    /* Resources 3-Col Cards Grid */
    .pzt-resources-layout div[style*="repeat(3, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    /* Core Values 5-Col Grid */
    .pzt-about-layout div[style*="repeat(5, 1fr)"],
    .pzt-roadmap-layout section[style*="repeat(5, 1fr)"] {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 14px !important;
    }

    /* Roadmap 4-Phase Grid */
    .pzt-roadmap-layout section div[style*="repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .pzt-roadmap-layout section div[style*="position: absolute"] {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        margin: 0 auto 30px !important;
    }
}

/* ==========================================================================
   MOBILE RESPONSIVE (max-width: 640px)
   ========================================================================== */
@media (max-width: 640px) {
    /* General Container Padding & Titles */
    .pzt-about-layout,
    .pzt-contact-layout,
    .pzt-resources-layout,
    .pzt-roadmap-layout {
        padding: 20px 14px 50px !important;
    }

    h1 {
        font-size: 1.8rem !important;
    }

    h2 {
        font-size: 1.4rem !important;
    }

    /* Form Inner 2-Col Fields to 1-Col */
    .pzt-contact-layout form div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* Form Cards Padding */
    .pzt-contact-layout div[style*="padding: 32px"] {
        padding: 20px 16px !important;
    }

    /* Stat Strips & Highlights */
    .pzt-about-layout section[style*="repeat(4, 1fr)"],
    .pzt-about-layout div[style*="repeat(5, 1fr)"],
    .pzt-resources-layout div[style*="repeat(3, 1fr)"],
    .pzt-roadmap-layout section[style*="repeat(5, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Bottom CTA Banners Flex to Column */
    .pzt-about-layout section[style*="justify-content: space-between"],
    .pzt-resources-layout section[style*="justify-content: space-between"],
    .pzt-roadmap-layout section[style*="justify-content: space-between"] {
        flex-direction: column !important;
        text-align: center !important;
        padding: 24px 20px !important;
    }

    .pzt-about-layout section a,
    .pzt-resources-layout section form,
    .pzt-roadmap-layout section a {
        width: 100% !important;
        min-width: 100% !important;
    }

    .pzt-resources-layout section form {
        flex-direction: column !important;
    }

    /* Roadmap Phase Cards Inner Stack */
    .pzt-roadmap-layout div[style*="display: flex; gap: 20px"] {
        flex-direction: column !important;
        text-align: center !important;
    }
}