/* =========================================================
   GUERRERA+ MOBILE UX PREMIUM
   Mobile-first improvements for iPhone/Android:
   - compact hideable header
   - shorter hero
   - compressed event cards
   - sticky mobile navigation
   - less vertical scrolling
   ========================================================= */

:root{
    --gx-red:#ff1530;
    --gx-black:#000;
    --gx-panel:#09090b;
}

/* Floating mobile toggle */
.gx-mobile-header-toggle{
    display:none;
}

@media(max-width:860px){

    html,body{
        max-width:100%;
        overflow-x:hidden;
        -webkit-text-size-adjust:100%;
        background:#000;
    }

    body{
        padding-top:0 !important;
    }

    /* Compact global header regardless of existing class names */
    header,
    .site-header,
    .main-header,
    .gx-header,
    .topbar,
    .navbar,
    .nav,
    .app-header{
        min-height:58px !important;
        max-height:58px !important;
        height:58px !important;
        padding:0 12px !important;
        overflow:hidden !important;
        transition:transform .28s ease, opacity .28s ease, visibility .28s ease !important;
        z-index:9990 !important;
    }

    header img,
    .site-header img,
    .main-header img,
    .gx-header img,
    .topbar img,
    .navbar img,
    .logo img,
    .header-logo img{
        max-height:30px !important;
        width:auto !important;
        object-fit:contain !important;
    }

    header nav,
    .site-header nav,
    .main-header nav,
    .gx-header nav,
    .navbar nav,
    .nav-menu,
    .menu{
        gap:10px !important;
        font-size:11px !important;
        white-space:nowrap !important;
        overflow-x:auto !important;
        scrollbar-width:none !important;
        -webkit-overflow-scrolling:touch !important;
    }

    header nav::-webkit-scrollbar,
    .site-header nav::-webkit-scrollbar,
    .main-header nav::-webkit-scrollbar,
    .gx-header nav::-webkit-scrollbar,
    .navbar nav::-webkit-scrollbar,
    .nav-menu::-webkit-scrollbar,
    .menu::-webkit-scrollbar{
        display:none !important;
    }

    /* Hide header when body has class toggled by JS */
    body.gx-mobile-header-hidden header,
    body.gx-mobile-header-hidden .site-header,
    body.gx-mobile-header-hidden .main-header,
    body.gx-mobile-header-hidden .gx-header,
    body.gx-mobile-header-hidden .topbar,
    body.gx-mobile-header-hidden .navbar,
    body.gx-mobile-header-hidden .nav,
    body.gx-mobile-header-hidden .app-header{
        transform:translateY(-110%) !important;
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
    }

    .gx-mobile-header-toggle{
        display:flex;
        position:fixed;
        right:12px;
        top:calc(10px + env(safe-area-inset-top));
        z-index:10050;
        width:42px;
        height:42px;
        align-items:center;
        justify-content:center;
        border-radius:14px;
        border:1px solid rgba(255,255,255,.14);
        background:rgba(0,0,0,.76);
        color:#fff;
        font-size:18px;
        font-weight:900;
        box-shadow:0 14px 34px rgba(0,0,0,.45);
        -webkit-backdrop-filter:blur(14px);
        backdrop-filter:blur(14px);
    }

    body.gx-mobile-header-hidden .gx-mobile-header-toggle{
        background:rgba(255,21,48,.92);
        border-color:rgba(255,21,48,.72);
    }

    /* Compact hero/home */
    .hero,
    .home-hero,
    .gx-hero,
    .premium-hero,
    .immersive-hero{
        min-height:calc(72vh - 58px) !important;
        padding:76px 16px 34px !important;
        display:flex !important;
        align-items:flex-end !important;
    }

    .hero h1,
    .home-hero h1,
    .gx-hero h1,
    .premium-hero h1,
    .immersive-hero h1{
        font-size:clamp(42px,13vw,74px) !important;
        line-height:.88 !important;
        letter-spacing:-.04em !important;
        margin-bottom:12px !important;
    }

    .hero p,
    .home-hero p,
    .gx-hero p,
    .premium-hero p,
    .immersive-hero p{
        font-size:15px !important;
        line-height:1.35 !important;
        max-width:92vw !important;
        margin-bottom:16px !important;
    }

    .hero .btn,
    .home-hero .btn,
    .gx-hero .btn,
    .premium-hero .btn,
    .immersive-hero .btn,
    .btn{
        min-height:46px !important;
        padding:0 16px !important;
        border-radius:12px !important;
        font-size:13px !important;
    }

    /* Reduce section spacing */
    section,
    .section,
    .container,
    .wrap,
    main{
        padding-left:14px !important;
        padding-right:14px !important;
    }

    .section,
    section{
        margin-top:22px !important;
        margin-bottom:22px !important;
    }

    h1{font-size:clamp(34px,10vw,56px) !important;line-height:.95 !important;}
    h2{font-size:clamp(26px,7vw,38px) !important;line-height:1 !important;}
    h3{font-size:clamp(20px,5.5vw,28px) !important;line-height:1.05 !important;}

    /* Event grid becomes compact horizontal cards */
    .events-grid,
    .event-grid,
    .cards-grid,
    .featured-events,
    .events-list{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:12px !important;
    }

    .event-card,
    .card-event,
    .event,
    .premium-card{
        display:grid !important;
        grid-template-columns:118px 1fr !important;
        min-height:118px !important;
        border-radius:16px !important;
        overflow:hidden !important;
        margin:0 !important;
    }

    .event-card img,
    .card-event img,
    .event img,
    .premium-card img,
    .event-card .thumb,
    .card-event .thumb,
    .event-thumb{
        width:118px !important;
        height:118px !important;
        min-height:118px !important;
        object-fit:cover !important;
    }

    .event-card .content,
    .card-event .content,
    .event .content,
    .premium-card .content,
    .event-body,
    .card-body{
        padding:12px !important;
        min-width:0 !important;
    }

    .event-card h3,
    .card-event h3,
    .event h3,
    .premium-card h3{
        font-size:17px !important;
        line-height:1.05 !important;
        margin:0 0 7px !important;
        display:-webkit-box !important;
        -webkit-line-clamp:2 !important;
        -webkit-box-orient:vertical !important;
        overflow:hidden !important;
    }

    .event-meta,
    .meta,
    .event-date,
    .event-location{
        font-size:12px !important;
        line-height:1.2 !important;
        margin:4px 0 !important;
    }

    .event-card .btn,
    .card-event .btn,
    .event .btn,
    .premium-card .btn{
        min-height:36px !important;
        padding:0 12px !important;
        font-size:11px !important;
        margin-top:8px !important;
    }

    .badge,
    .tag,
    .status,
    .live-badge{
        font-size:10px !important;
        padding:5px 8px !important;
        border-radius:999px !important;
    }

    /* Detail event pages */
    .event-detail,
    .event-page,
    .checkout-page,
    .purchase-page{
        padding-top:10px !important;
    }

    .event-cover,
    .event-hero,
    .event-banner{
        min-height:260px !important;
        border-radius:18px !important;
    }

    /* Sticky buy bar for event/payment screens */
    .mobile-sticky-cta{
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:9996;
        padding:10px 14px calc(10px + env(safe-area-inset-bottom));
        background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.95) 26%,#000 100%);
        display:flex;
        gap:10px;
        align-items:center;
        justify-content:space-between;
    }

    .mobile-sticky-cta .btn,
    .mobile-sticky-cta button{
        flex:1;
        height:48px !important;
        border-radius:14px !important;
    }

    body.has-mobile-sticky-cta{
        padding-bottom:78px !important;
    }

    /* Viewer: hide normal site header when watching */
    body.gx-viewer-page header,
    body.gx-viewer-page .site-header,
    body.gx-viewer-page .main-header,
    body.gx-viewer-page .gx-header,
    body.gx-viewer-page .topbar,
    body.gx-viewer-page .navbar{
        display:none !important;
    }

    /* Admin/promoter tables */
    table{
        font-size:12px !important;
    }

    .table-wrap,
    .admin-table,
    .panel-table{
        overflow-x:auto !important;
        -webkit-overflow-scrolling:touch !important;
    }

    input,
    select,
    textarea{
        font-size:16px !important; /* avoids iOS zoom */
    }
}


/* =========================================================
   GUERRERA+ iOS UX HARDENING - 25/05
   Only visual/mobile behavior. Does not touch payments/streaming logic.
   ========================================================= */

@supports (-webkit-touch-callout: none) {
    html{
        min-height:-webkit-fill-available;
        -webkit-text-size-adjust:100%;
        scroll-behavior:smooth;
    }

    body{
        min-height:-webkit-fill-available;
        padding-left:env(safe-area-inset-left);
        padding-right:env(safe-area-inset-right);
        overscroll-behavior-y:none;
    }

    input,
    select,
    textarea,
    button{
        font-size:16px !important;
        -webkit-appearance:none;
        appearance:none;
    }

    iframe,
    video{
        max-width:100%;
        -webkit-transform:translateZ(0);
        transform:translateZ(0);
    }
}

@media(max-width:860px){
    .gpx-top,
    header.top,
    header,
    .top{
        height:auto !important;
        min-height:56px !important;
        max-height:none !important;
        padding-top:env(safe-area-inset-top) !important;
    }

    .gpx-top-inner,
    .top-inner{
        min-height:56px !important;
        padding:8px 12px !important;
        display:flex !important;
        align-items:center !important;
        gap:10px !important;
    }

    .gpx-brand img,
    .brand-link img,
    img.logo{
        max-width:170px !important;
        max-height:34px !important;
        object-fit:contain !important;
    }

    .gpx-nav,
    nav.nav,
    .nav{
        display:flex !important;
        overflow-x:auto !important;
        -webkit-overflow-scrolling:touch !important;
        white-space:nowrap !important;
        gap:10px !important;
        padding-bottom:3px !important;
    }

    .gpx-nav a,
    nav.nav a,
    .nav a{
        flex:0 0 auto !important;
        font-size:11px !important;
        line-height:1 !important;
        padding:9px 10px !important;
    }

    .gpx-hero{
        min-height:420px !important;
    }

    .gpx-hero-grid{
        padding-top:34px !important;
        padding-bottom:22px !important;
    }

    .gpx-hero h1{
        font-size:clamp(40px,13vw,62px) !important;
        line-height:.88 !important;
    }

    .gpx-trust{
        grid-template-columns:1fr 1fr !important;
        gap:13px !important;
        margin-top:22px !important;
    }

    .gpx-trust article{
        grid-template-columns:28px 1fr !important;
        gap:8px !important;
    }

    .gpx-trust i{
        width:28px !important;
        height:28px !important;
    }

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

    .gpx-card-img{
        height:152px !important;
    }

    .gpx-promoter{
        padding:24px 18px !important;
    }

    .gpx-promoter-main{
        padding-left:0 !important;
    }

    .gpx-promoter-img{
        display:none !important;
    }

    .gpx-promoter-feats{
        grid-template-columns:1fr !important;
        gap:12px !important;
    }

    .gpx-how-grid,
    .gpx-how-grid > div{
        grid-template-columns:1fr !important;
        gap:16px !important;
    }

    .viewer-player,
    .watch-player,
    .video-wrap,
    .player-wrap,
    .stream-player{
        min-height:calc(100svh - 24px) !important;
        border-radius:0 !important;
    }

    body.gx-viewer-page{
        background:#000 !important;
    }

    body.gx-viewer-page header,
    body.gx-viewer-page .top,
    body.gx-viewer-page .gpx-top{
        transform:translateY(-110%) !important;
        opacity:0 !important;
        pointer-events:none !important;
    }
}