/* ==========================================================================
   PROJECT 2: RESPONSIVE ADAPTATIONS (ROYAL PURPLE AESTHETIC)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MEDIUM MOBILE & PHABLETS (>= 480px)
   -------------------------------------------------------------------------- */
@media (min-width: 480px) {
    .venue-actions {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .venue-actions .btn-shimmer {
        width: auto;
        max-width: none;
    }
}

/* --------------------------------------------------------------------------
   2. TABLETS & LARGER (>= 768px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    :root {
        --section-space: 170px;
    }

    .nav-links {
        display: flex;
    }

    .hero-names {
        flex-direction: row;
        align-items: baseline;
        justify-content: center;
        flex-wrap: wrap;
        gap: 24px;
    }

    .names-separator {
        margin: 0;
    }

    .hero-parents-block {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        gap: 40px;
    }

    .parent-spacer {
        width: 1px;
        height: 60px;
    }

    .events-list {
        flex-direction: row;
        justify-content: center;
        gap: 60px;
    }

    .event-item {
        flex: 1;
        max-width: 360px;
    }

    .arch-wireframe-wrap {
        max-width: 580px;
        height: 720px;
    }
}

/* --------------------------------------------------------------------------
   3. DESKTOPS (>= 1024px)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    :root {
        --section-space: 200px;
    }

    .hero-screen {
        padding: 140px 20px 80px;
    }

    .events-list {
        gap: 90px;
    }
}