/* =========================================================
   MIND POWER ARTISTS
   EVENTS PAGE (MPA-120)
   ---------------------------------------------------------
   Builds on home.css (hero, sections, buttons, tokens) and
   event-cards.css (cards + dialog).
========================================================= */


/* ===== PAGE HERO ===== */

.page-hero {
    min-height: 460px;

    text-align: center;
}

.page-hero-inner {
    position: relative;
    z-index: 2;

    max-width: 860px;
}

.page-hero .hero-text {
    max-width: 660px;

    margin-inline: auto;
}


/* ===== SECTIONS ===== */

.events-section .section-heading,
.events-past-section .section-heading {
    margin-bottom: 48px;
}

.events-section[hidden],
.events-past-section[hidden] {
    display: none;
}


/* ===== LOADING / EMPTY / ERROR ===== */

.events-state {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 16px;

    max-width: 640px;

    margin: 0 auto;

    padding: 48px 24px;

    border:
        1px dashed rgba(244,123,32,0.35);

    border-radius:
        var(--radius-lg);

    background:
        rgba(244,123,32,0.04);

    text-align: center;
}

.events-state[hidden],
.events-state .btn[hidden] {
    display: none;
}

.events-state p {
    margin: 0;

    color:
        var(--mpa-text);

    font-size: 16px;

    line-height: 1.7;
}

.events-state-loader {
    width: 34px;
    height: 34px;

    border: 3px solid rgba(255,255,255,0.12);
    border-top-color:
        var(--mpa-orange);

    border-radius: 50%;

    animation: events-spin 0.9s linear infinite;
}

.events-state.is-done .events-state-loader {
    display: none;
}

@keyframes events-spin {
    to {
        transform: rotate(360deg);
    }
}


/* ===== RESPONSIVE ===== */

@media (max-width: 950px) {

    .page-hero {
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .events-state-loader {
        animation-duration: 2.4s;
    }
}


/* ===== FOCUS STATES (MPA-065) ===== */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--mpa-orange-light, #ff9b4a);

    outline-offset: 4px;
}