/* ================================================================
   PATCH 20 — CARROSSEL DE EVENTOS NO MOBILE
   Carrossel manual por toque/arraste, sem rotação automática.
   ================================================================ */

@media (max-width: 820px) {
    /*
     * A grade de eventos vira uma faixa horizontal somente em telas
     * menores. O scroll é interno ao bloco e não cria rolagem na página.
     */
    .home-events-section .event-grid {
        display: flex !important;
        align-items: stretch;
        gap: 14px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0 -4px;
        padding: 4px 4px 22px;
        overflow-x: auto;
        overflow-y: visible;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 4px;
        touch-action: pan-x;
        scrollbar-width: none;
    }

    .home-events-section .event-grid::-webkit-scrollbar {
        display: none;
    }

    .home-events-section .event-grid > .event-card {
        display: flex;
        flex: 0 0 min(84vw, 360px);
        flex-direction: column;
        max-width: min(84vw, 360px);
        min-width: 0;
        margin: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .home-events-section .event-card-body {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        padding: 18px;
    }

    .home-events-section .event-card-body .button {
        width: fit-content;
        margin-top: auto;
    }

    .home-events-section .event-card-image-link,
    .home-events-section .event-image {
        border-radius: 0;
    }
}

@media (max-width: 420px) {
    .home-events-section .event-grid {
        gap: 12px;
        padding-bottom: 18px;
    }

    .home-events-section .event-grid > .event-card {
        flex-basis: min(86vw, 340px);
        max-width: min(86vw, 340px);
    }

    .home-events-section .event-card-body {
        padding: 17px;
    }
}