/* ============================================================
   VITRAH 2026 — RESPONSIVE OVERRIDES
   ============================================================ */

@media (max-width: 1024px) {
    .container {
        padding-left: 24px;
        padding-right: 24px;
    }
    
    .about-hero-card {
        padding: 60px 40px;
    }
}

@media (max-width: 768px) {
    /* Global Resets */
    section {
        padding: 60px 0;
    }

    /* Hero Section Tweak */
    .hero-inner {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .hero-left {
        max-width: 100%;
    }

    .hero-ctas {
        justify-content: center;
    }


    .btn-img-overlay {
        width: 70% !important;
        bottom: 3em !important;
        justify-content: center !important;
    }

    /* About Section */
    .about-hero-card {
        flex-direction: column;
        padding: 60px 24px 320px !important;
        text-align: center;
        min-height: 720px !important;
        background-position: center bottom !important;
        background-size: 100% auto !important;
    }

    .about-hero-card::after {
        background: linear-gradient(to bottom, var(--section-bg) 35%, transparent 100%) !important;
    }

    .about-hero-text {
        max-width: 100%;
        margin-top: 0;
    }

    .about-goals-row {
        flex-direction: row;
        gap: 10px;
        grid-template-columns: repeat(2, 1fr);
    }

    .goal-card-new {
        width: 100% !important;
    }

    /* Prize Section */
    .prize-hero-card {
        padding: 40px 24px;
        flex-direction: column;
        text-align: center;
        background-position: center bottom;
        min-height: auto;
    }

    /* Podium Section — Important Fix */
    .podium-section {
        margin-top: 40px !important; /* Remove negative overlap on mobile */
    }

    .podium-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .podium-card {
        width: 100% !important;
        max-width: 340px;
        transform: none !important; /* Remove 3D skew/lifts */
        height: auto !important;
    }

    .podium-gold {
        order: -1; /* Keep Gold at the top on mobile stack */
    }

    /* Ketentuan Section */
    .tech-body {
        flex-direction: column;
        padding: 0 16px 24px;
    }

    .allowed-section, .prohibited-section {
        border-radius: 16px !important;
        margin-bottom: 20px;
    }

    .tech-divider {
        display: none; /* Vertical divider doesn't work in column stack */
    }

    /* Registration Steps */
    .steps-grid {
        display: flex;
        flex-direction: column;
    }

    /* Timeline Section — Chronological Fix (01-07) */
    .timeline-grid-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .timeline-step-card:nth-child(1) { order: 1; }
    .timeline-step-card:nth-child(2) { order: 2; }
    .timeline-step-card:nth-child(3) { order: 3; }
    .timeline-step-card:nth-child(6) { order: 4; } /* Step 04 */
    .timeline-step-card:nth-child(5) { order: 5; } /* Step 05 */
    .timeline-step-card:nth-child(4) { order: 6; } /* Step 06 */
    .timeline-step-card:nth-child(7) { order: 7; } /* Step 07 */

    .timeline-step-card {
        width: 100% !important;
        grid-column: auto !important;
    }

    .timeline-step-card:last-child {
        width: 100%;
        grid-column: auto !important;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 3rem;
    }

    .about-hero-title {
        font-size: 2.2rem;
    }

    .steps-grid {
        grid-template-columns: 1fr !important;
    }

    .final-title {
        font-size: 2rem !important;
    }

    .cta-stats {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px 20px !important;
        padding-top: 30px !important;
    }

    .stat-item {
        width: 100% !important;
        text-align: center !important;
    }

    .stat-item:not(:last-child)::after {
        display: none !important;
    }

    .footer-right {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        width: 100% !important;
    }

    .footer-divider {
        display: none !important;
    }

    .footer-link {
        justify-content: center !important;
    }
}