/* ==========================================
   RESPONSIVO — TABLET E MOBILE
========================================== */

/* Tablets */

@media (max-width: 980px) {

    .headerContainer {
        grid-template-columns: 190px 1fr auto;
        gap: 20px;
    }

    .headerLogo img {
        width: 150px;
    }

    .desktopNav {
        gap: 14px;
    }

    .eventHeroContainer {
        grid-template-columns: 46% 54%;
    }

    .eventHeroInfo {
        padding: 42px 30px;
    }

    .galleryTrack {
        grid-auto-columns: 220px;
    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 760px) {

    body {
        background: #ffffff;
    }

    .pageContainer {
        width: min(100% - 28px, 100%);
    }

    .contentSection {
        padding: 28px 0;
    }

    .sectionTitle {
        margin-bottom: 16px;
        font-size: 21px;
    }

    /* HEADER */

    .siteHeader {
        padding: 0 14px 14px;
    }

    .headerContainer {
        width: 100%;
        min-height: 58px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .headerLogo {
        margin-right: auto;
    }

    .headerLogo img {
        width: 138px;
        max-height: 42px;
    }

    .headerSearch,
    .desktopNav {
        display: none;
    }

    .mobileHeaderActions {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .mobileHelp {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        color: #111111;
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
    }

    .menuToggle {
        width: 38px;
        height: 38px;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border: 0;
        background: transparent;
    }

    .menuToggle span {
        width: 23px;
        height: 2px;
        border-radius: 99px;
        background: #222222;
        transition:
            transform .25s ease,
            opacity .25s ease;
    }

    .menuToggle.active span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .menuToggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menuToggle.active span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .mobileSearch {
        width: 100%;
        display: block;
    }

    .mobileSearch input {
        height: 46px;
        padding-left: 44px;
        font-size: 13px;
    }

    .mobileSearch .searchIcon {
        left: 15px;
    }

    .mobileMenu {
        position: absolute;
        top: 58px;
        right: 14px;
        z-index: 1100;
        width: 190px;
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        border-radius: 10px;
        background: #ffffff;
        border: 1px solid #e7e7e7;
        box-shadow: 0 18px 45px rgba(0, 0, 0, .16);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition:
            opacity .2s ease,
            transform .2s ease,
            visibility .2s ease;
    }

    .mobileMenu.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .mobileMenu a {
        padding: 12px 13px;
        border-radius: 7px;
        color: #111111;
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
    }

    .mobileMenu a:hover {
        background: #f3f3f3;
    }

    /* HERO */

    .eventHero {
        margin-top: 0;
    }

    .eventHeroContainer {
        width: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .eventHeroInfo {
        width: 100%;
        padding: 20px 16px 18px;
        order: 1;
    }

    .eventDate {
        margin-bottom: 9px;
        font-size: 12px;
    }

    .eventHeroInfo h1 {
        max-width: 100%;
        margin-bottom: 18px;
        font-size: 20px;
        line-height: 1.2;
    }

    .eventHeroInfo .primaryButton {
        width: 100%;
        min-height: 42px;
    }

    .eventHeroBanner {
        width: 100%;
        order: 2;
    }

    .eventHeroBanner img {
        width: 100%;
        min-height: 0;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    /* BARRA FIXA */

    .stickyEventBar {
        padding: 10px 14px;
    }

    .stickyEventContainer {
        width: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .stickyEventInfo {
        gap: 5px;
    }

    .stickyEventDate {
        font-size: 11px;
    }

    .stickyEventInfo strong {
        white-space: normal;
        font-size: 14px;
        line-height: 1.3;
    }

    .stickyBuyButton {
        width: 100%;
        min-height: 40px;
        font-size: 13px;
    }

    /* SOBRE */

    .eventDescription {
        font-size: 13px;
        line-height: 1.6;
    }

    .importantNotice {
        margin-top: 18px;
    }

    /* GALERIA */

    .galleryTrack {
        grid-auto-columns: 72%;
        gap: 8px;
        padding-right: 14px;
    }

    .galleryItem {
        height: 150px;
    }

    /* LINE-UP */

    .lineupSection {
        padding-top: 10px;
    }

    .sectionHeader {
        align-items: flex-start;
    }

    .lineupArrows {
        gap: 3px;
    }

    .lineupArrows button {
        width: 30px;
        height: 30px;
        font-size: 28px;
    }

    .lineupTabs {
        gap: 14px;
        padding-bottom: 14px;
    }

    .lineupTab {
        min-height: 40px;
        padding: 0 16px;
        font-size: 12px;
    }

    .lineupShow {
        min-height: 42px;
        padding: 11px 0;
        font-size: 12px;
    }

    /* LOCAL */

    .locationAddress {
        font-size: 12px;
    }

    .mapContainer {
        height: 280px;
    }

    /* ACORDEÕES */

    .moreInfoSection {
        padding-top: 36px;
        padding-bottom: 42px;
    }

    .accordionButton {
        min-height: 54px;
        padding: 15px 0;
        font-size: 11px;
    }

    .accordionContent p {
        font-size: 12px;
    }

    /* COMPRA */

    .purchaseSection {
        padding: 36px 0;
    }

    .purchaseCard {
        padding: 24px 20px;
        flex-direction: column;
        align-items: stretch;
    }

    .purchaseCard h2 {
        font-size: 21px;
    }

    .purchaseCard .primaryButton {
        width: 100%;
    }

    /* FOOTER */

    .siteFooter {
        padding: 42px 0 26px;
    }

    .footerContainer {
        width: min(100% - 28px, 100%);
    }

    .footerLogo {
        width: 145px;
    }

    .footerLinks {
        flex-direction: column;
        gap: 10px;
    }

}


/* ==========================================
   CELULARES PEQUENOS
========================================== */

@media (max-width: 420px) {

    .siteHeader {
        padding-right: 10px;
        padding-left: 10px;
    }

    .headerLogo img {
        width: 128px;
    }

    .mobileHelp {
        font-size: 12px;
    }

    .galleryTrack {
        grid-auto-columns: 80%;
    }

    .eventHeroInfo h1 {
        font-size: 18px;
    }

    .stickyEventInfo strong {
        font-size: 13px;
    }

}