/* =====================================================
   REBEL FEST — MOBILE v3
   
   <link rel="stylesheet" href="mobile.css" media="screen and (max-width:768px)">
===================================================== */

@media screen and (max-width:768px) and (hover:none) and (pointer:coarse){

  :root{
    --mobile-pad: 1rem;
    --mobile-nav-h: 76px;
  }

  html{
    scroll-behavior:smooth;
  }

  body{
    background:#050505;
    overflow-x:hidden;
    padding-bottom:var(--mobile-nav-h);
  }

  body::after{
    opacity:.18;
  }

  /* =========================
     BOTTOM NAV 
  ========================= */

  nav{
    top:auto !important;
    bottom:0 !important;
    left:0 !important;
    right:0 !important;

    height:var(--mobile-nav-h);
    padding:.45rem .35rem !important;

    border-bottom:none !important;
    border-top:1px solid rgba(255,23,68,.55) !important;

    background:rgba(5,5,5,.92) !important;
    backdrop-filter:blur(18px);

    z-index:950 !important;
  }

  .nav-logo,
  .nav-cta{
    display:none !important;
  }

  nav ul{
    width:100%;
    display:grid !important;
    grid-template-columns:repeat(4,1fr);
    gap:0 !important;
  }

  nav ul li{
    display:flex;
    justify-content:center;
  }

  nav ul a{
    width:100%;
    min-height:58px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    color:rgba(255,255,255,.78) !important;
    font-family:'Space Mono', monospace !important;
    font-size:.58rem !important;
    letter-spacing:.13em !important;
    text-transform:uppercase;

    text-decoration:none;
  }

  nav ul a::before{
    content:"";
    display:block;

    width:20px;
    height:2px;

    margin-bottom:.55rem;

    border-radius:999px;

    background:var(--red);
    box-shadow:0 0 12px rgba(255,23,68,.45);
  }

  nav ul a:hover,
  nav ul a:active{
    color:white !important;
  }

  /* =========================
     LOADER
  ========================= */

  .netflix-loader{
    padding:0 1.4rem;
  }

  .loader-logo-wrap{
    width:min(420px,86vw) !important;
  }

  .loader-powered{
    font-size:.65rem !important;
    letter-spacing:.16em !important;
    text-align:center;
  }

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

  .hero-fullscreen{
    min-height:100svh !important;
    padding:0 var(--mobile-pad) !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .hero-bg{
    background-position:center top !important;
    transform:scale(1.02);
  }

  .hero-fullscreen::after{
    background:
      radial-gradient(circle at center, transparent 0%, rgba(0,0,0,.58) 72%),
      linear-gradient(to top, rgba(0,0,0,.96), transparent 58%) !important;
  }

  .hero-content-new{
    width:100%;
    padding:0 1rem !important;
    transform:translateY(-3vh) !important;
  }

  .hero-kicker{
    font-size:.82rem !important;
    line-height:1.65 !important;
    letter-spacing:.16em !important;
    margin-bottom:1.15rem !important;
  }

  .hero-logo{
    width:74vw !important;
    max-width:340px !important;
    max-height:22vh !important;
    margin:1rem auto 1.2rem !important;
    display:block;
    object-fit:contain;
  }

  .hero-subtitle{
    font-size:.78rem !important;
    line-height:1.4 !important;
    letter-spacing:.16em !important;
    margin:.8rem 0 1rem !important;
  }

  .hero-bottom{
    left:1rem !important;
    right:1rem !important;
    bottom:calc(var(--mobile-nav-h) + 1rem) !important;
    display:block !important;
    text-align:center;
  }

  .hero-bottom > div:first-child{
    display:none !important;
  }

  .hero-countdown{
    width:min(340px,92vw);
    margin:0 auto;

    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:.42rem !important;

    padding:1rem 1.2rem !important;

    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;

    background:rgba(0,0,0,.44);
    backdrop-filter:blur(14px);

    transform:scale(.92);
    transform-origin:center;
  }

  .cd-num{
    font-size:2rem !important;
  }

  .cd-label{
    font-size:.44rem !important;
  }

  .cd-sep{
    font-size:1.35rem !important;
  }

  /* =========================
     TICKER
  ========================= */

  .ticker{
    padding:.45rem 0 !important;
  }

  .ticker-inner{
    font-size:.82rem !important;
    animation-duration:18s !important;
  }

  /* =========================
     WRAPPED FULLSCREEN SECTIONS
  ========================= */

  .wrapped-lineup{
    padding:0 !important;
    margin:0 !important;
  }

  .wrapped-artist{
    height:100svh !important;
    width:100vw !important;
    margin-left:calc(50% - 50vw) !important;

    padding:1.2rem !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

  font-size:clamp(3rem,15vw,6rem) !important;
  line-height:.92 !important;
  letter-spacing:.01em !important;
  padding:1.4rem !important;
  word-break:normal !important;
  overflow-wrap:break-word !important;
  }

  /* =========================
     LINEUP — prawdziwy swipe
  ========================= */

  .lineup{
    padding:5.5rem 0 4.5rem !important;
    overflow:hidden !important;
  }

  .lineup .section-label,
  .lineup h2{
    padding:0 1rem;
  }

  .lineup h2{
    font-size:clamp(4.4rem,22vw,7rem) !important;
    line-height:.85 !important;
    margin-bottom:1.35rem !important;
  }

  .lineup-filters{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;

    gap:.75rem !important;

    padding:0 1rem 1rem !important;
    margin-bottom:1.2rem !important;

    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }

  .filter-btn{
    flex:0 0 auto !important;

    padding:.9rem 1.25rem !important;

    border-radius:999px !important;

    font-size:.72rem !important;
    letter-spacing:.12em !important;

    background:rgba(255,255,255,.045) !important;
    border:1px solid rgba(255,255,255,.14) !important;

    scroll-snap-align:start;
  }

  .filter-btn.active{
    background:var(--red) !important;
    border-color:var(--red) !important;
    color:white !important;
  }

  .artist-grid{
    display:flex !important;
    flex-wrap:nowrap !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    gap:18px !important;
    padding:0 18px 32px !important;

    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;

    touch-action:pan-x;
  }

  .artist-grid::-webkit-scrollbar,
  .lineup-filters::-webkit-scrollbar,
  .info-grid::-webkit-scrollbar,
  .ticket-cards::-webkit-scrollbar{
    display:none;
  }

  .artist-card{
    flex:0 0 90vw !important;
    max-width:90vw !important;

    height:78svh !important;
    min-height:520px !important;

    aspect-ratio:auto !important;

    border-radius:26px !important;
    overflow:hidden !important;

    opacity:1 !important;
    transform:none !important;

    scroll-snap-align:center;

    box-shadow:
      0 0 0 1px rgba(255,255,255,.08),
      0 22px 70px rgba(0,0,0,.42);
  }

  .artist-card.hidden{
    display:none !important;
  }

  .artist-card:hover,
  .artist-card:active{
    transform:none !important;
  }

  .artist-card:active{
    box-shadow:
      0 0 0 1px rgba(255,23,68,.75),
      0 0 45px rgba(255,23,68,.25);
  }

  .artist-photo,
  .lineup-img{
    width:100% !important;
    height:100% !important;
  }

  .lineup-img{
    object-fit:cover !important;
    object-position:center top !important;
  }

  .artist-bar{
    padding:1.4rem 1.25rem 1.25rem !important;
    background:linear-gradient(to top, rgba(0,0,0,.98) 0%, rgba(0,0,0,.65) 48%, transparent 100%) !important;
  }

  .artist-bar-name{
    font-size:3rem !important;
    line-height:.88 !important;
  }

  .artist-bar-day{
    font-size:.72rem !important;
    margin-top:.55rem !important;
  }

  .hl-badge{
    top:1rem !important;
    left:1rem !important;

    font-size:.68rem !important;

    padding:.45rem .75rem !important;
    border-radius:999px;
  }

  /* Na mobile nie używam hover overlay, bo otwarcie info jest po tapnięciu */
  .artist-overlay{
    display:none !important;
  }

  /* =========================
     PROGRAM POSTER
  ========================= */

  .schedule-poster{
    padding:5.5rem 1rem !important;
  }

  .schedule-poster .section-label{
    margin-bottom:2rem !important;
  }

  .poster-program{
    display:block !important;
  }

  .poster-date{
    border-right:none !important;
    border-bottom:1px solid rgba(255,255,255,.28) !important;
    padding:0 0 2rem !important;
    margin-bottom:2rem !important;
    align-items:flex-start !important;
  }

  .poster-date::before{
    display:none !important;
  }

  .poster-star{
    left:64% !important;
    top:54% !important;
    font-size:clamp(11rem,45vw,18rem) !important;
  }

  .poster-top{
    font-size:clamp(3.4rem,18vw,6rem) !important;
    transform:none !important;
    margin-bottom:-.55rem !important;
  }

  .poster-number{
    font-size:clamp(10rem,48vw,17rem) !important;
    line-height:.72 !important;
  }

  .poster-bottom{
    font-size:clamp(3.4rem,18vw,6rem) !important;
    margin-top:-.65rem !important;
  }

  .poster-list{
    display:block !important;
  }

  .poster-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:.6rem !important;

    padding:1.35rem 0 !important;

    border-bottom:1px solid rgba(255,255,255,.25) !important;
  }

  .poster-row:hover{
    padding-left:0 !important;
    background:transparent !important;
  }

  .poster-row span{
    font-size:.9rem !important;
    opacity:.82;
  }

  .poster-row strong{
    font-size:clamp(2.35rem,13vw,4.1rem) !important;
    line-height:.9 !important;
  }

  .poster-row em{
    justify-self:start !important;

    font-size:.66rem !important;
    padding:.5rem .75rem !important;
  }

  /* =========================
     INFO — swipe story cards
  ========================= */

  .info-sec{
    padding:5.5rem 0 4.5rem !important;
    overflow:hidden !important;
  }

  .info-sec .section-label,
  .info-sec .single-line-heading{
    padding:0 1rem;
  }

  .info-sec .single-line-heading{
    white-space:normal !important;
    font-size:clamp(3.3rem,16vw,5.5rem) !important;
    line-height:.9 !important;
    margin-bottom:1.7rem !important;
  }

  .info-grid{
    display:flex !important;
    grid-template-columns:none !important;
    grid-auto-rows:auto !important;

    overflow-x:auto !important;
    overflow-y:visible !important;

    gap:1rem !important;
    padding:0 1rem 1rem !important;

    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }

  .info-card{
    flex:0 0 88vw !important;

    min-height:64svh !important;

    grid-column:auto !important;
    grid-row:auto !important;

    scroll-snap-align:center;

    padding:4.4rem 2.3rem 2.4rem !important;

    border-radius:28px !important;

    transform:none !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    align-items:flex-start !important;

    position:relative;
    overflow:hidden;

    background:
        radial-gradient(circle at top right, rgba(255,23,68,.22), transparent 38%),
        linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.015)),
        #15151f !important;

    border:1px solid rgba(255,255,255,.1) !important;

    box-shadow:
        0 25px 80px rgba(0,0,0,.35),
        inset 0 0 0 1px rgba(255,255,255,.03);
}

.info-card:hover{
    transform:none !important;
}

.info-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(135deg, rgba(255,23,68,.14), transparent 55%),
        radial-gradient(circle at bottom left, rgba(42,159,247,.14), transparent 42%);
    opacity:.75;
    z-index:0;
    pointer-events:none;
}

.info-card::after{
    font-size:11rem !important;
    right:.8rem !important;
    bottom:-1.1rem !important;

    opacity:.09 !important;
    z-index:1;
}

.info-card h3{
    position:relative;
    z-index:2;

    font-size:clamp(3rem,14vw,4.4rem) !important;
    line-height:.88 !important;

    margin:0 0 2.2rem 0 !important;
}

.info-card p{
    position:relative;
    z-index:2;

    margin:0 !important;

    font-size:1.05rem !important;
    line-height:1.85 !important;

    max-width:100%;
    color:rgba(255,255,255,.72) !important;
}
  /* =========================
     TICKETS — swipe cards
  ========================= */

  .tickets-sec{
    padding:5.5rem 0 4.5rem !important;
    overflow:hidden !important;
  }

  .tickets-sec .section-label,
  .tickets-sec .single-line-heading{
    padding:0 1rem;
  }

  .tickets-sec .single-line-heading{
    white-space:normal !important;
    font-size:clamp(3.3rem,16vw,5.5rem) !important;
    line-height:.9 !important;
    margin-bottom:1.5rem !important;
  }

  .ticket-cards{
    display:flex !important;
    flex-wrap:nowrap !important;

    overflow-x:auto !important;
    overflow-y:visible !important;

    gap:1rem !important;

    padding:0 1rem 1rem !important;
    margin-top:0 !important;

    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;

    justify-content:flex-start !important;
  }

  .ticket{
    flex:0 0 86vw !important;
    width:auto !important;
    min-height:72svh !important;

    scroll-snap-align:center;

    border-radius:24px;

    padding:2.4rem 2rem !important;

    display:flex;
    flex-direction:column;
  }

  .ticket-type{
    font-size:.78rem !important;
  }

  .ticket-price{
    font-size:clamp(5rem,28vw,8rem) !important;
    margin:.5rem 0;
  }

  .ticket-feats{
    font-size:1rem !important;
    line-height:2.1 !important;
    margin:2rem 0 !important;
  }

  .ticket .btn{
    margin-top:auto;
    width:100%;
    text-align:center;
  }

  /* =========================
     MODAL — fullscreen
  ========================= */

  .modal-backdrop{
    z-index:5000 !important;
    padding:0 !important;

    align-items:stretch !important;

    background:rgba(0,0,0,.92) !important;
  }

  .modal{
    width:100vw !important;
    max-width:none !important;

    height:100svh !important;
    max-height:none !important;

    border-radius:0 !important;

    display:flex !important;
    flex-direction:column !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    background:#0b0b12 !important;
  }

  .modal-album-cover{
    flex:0 0 46svh !important;
    min-height:46svh !important;
    width:100% !important;

    border-radius:0 !important;

    background-position:center top !important;
    background-size:cover !important;
  }

  .modal-album-cover::after{
    border-radius:0 !important;
    background:
      linear-gradient(to top, rgba(11,11,18,1) 0%, rgba(11,11,18,.45) 42%, rgba(0,0,0,.1) 100%) !important;
  }

  .modal-body{
    flex:1 0 auto !important;

    padding:1.4rem 1.2rem calc(var(--mobile-nav-h) + 2.2rem) !important;

    overflow:visible !important;
  }

  .modal-badge{
    font-size:.72rem !important;
    margin-bottom:.45rem !important;
  }

  .modal-name{
    font-size:clamp(3.2rem,15vw,5.2rem) !important;
    line-height:.88 !important;

    max-width:100% !important;

    overflow-wrap:break-word !important;
    word-break:normal !important;
  }

  .modal-genre{
    font-size:.92rem !important;
    margin:.5rem 0 1.1rem !important;
  }

  .modal-meta{
    display:flex !important;
    flex-wrap:wrap !important;

    gap:.7rem !important;

    overflow:visible !important;

    margin:0 0 1.6rem !important;
  }

  .modal-meta-item{
    max-width:100% !important;

    padding:.72rem 1rem !important;

    border-radius:999px !important;
  }

  .modal-meta-item span{
    font-size:.56rem !important;
  }

  .modal-meta-item strong{
    font-size:.9rem !important;
    white-space:normal !important;
  }

  .modal-desc{
    max-width:100% !important;

    font-size:1rem !important;
    line-height:1.75 !important;

    margin-bottom:1.6rem !important;

    color:rgba(255,255,255,.82) !important;
  }

  .modal-actions{
    display:flex !important;
    flex-direction:column !important;
    gap:.8rem !important;
  }

  .modal-actions .btn{
    width:100% !important;
    text-align:center !important;
  }

  .modal-close{
    top:.9rem !important;
    right:.9rem !important;

    width:42px !important;
    height:42px !important;

    z-index:5100 !important;
  }

  /* =========================
     FOOTER
  ========================= */

  footer{
    padding:2.2rem 1rem calc(var(--mobile-nav-h) + 2rem) !important;

    flex-direction:column !important;
    text-align:center;
  }

  footer ul{
    flex-wrap:wrap;
    justify-content:center;
  }

  /* =========================
     SMALL SCREENS
  ========================= */

  @media(max-width:380px){

    .hero-logo{
      width:72vw !important;
      max-width:300px !important;
    }

    .hero-countdown{
      transform:scale(.86);
    }

    .artist-card{
      flex-basis:90vw !important;
      height:72svh !important;
      min-height:500px !important;
    }

    .artist-bar-name{
      font-size:2.55rem !important;
    }

    .poster-number{
      font-size:9.4rem !important;
    }

    .modal-name{
      font-size:clamp(2.8rem,14vw,4.6rem) !important;
    }
  }

}
.wrapped-gambino,
.wrapped-tyler{
  font-size:clamp(2.7rem,13vw,5.2rem) !important;
  line-height:.96 !important;
}

@media screen and (max-width:768px) and (hover:none) and (pointer:coarse){

  .artist-grid,
  .info-grid,
  .ticket-cards{
    padding-left:24px !important;
    padding-right:24px !important;
    scroll-padding-left:24px;
    scroll-padding-right:24px;
  }

  .artist-card:first-child,
  .info-card:first-child,
  .ticket:first-child{
    margin-left:0 !important;
  }

  .artist-card:last-child,
  .info-card:last-child,
  .ticket:last-child{
    margin-right:24px !important;
  }

  .ticket{
    flex:0 0 calc(100vw - 48px) !important;
    max-width:calc(100vw - 48px) !important;
  }

  .info-card{
    flex:0 0 calc(100vw - 48px) !important;
    max-width:calc(100vw - 48px) !important;
  }

  .artist-card{
    flex:0 0 calc(100vw - 48px) !important;
    max-width:calc(100vw - 48px) !important;
  }

}


/* =====================================================
   FINAL MOBILE POLISH v4
   Spójne odstępy sekcji + poprawka biletów
===================================================== */

@media screen and (max-width:768px) and (hover:none) and (pointer:coarse){

  /* Jednolity układ nagłówków sekcji */
  .lineup,
  .schedule-poster,
  .info-sec,
  .tickets-sec{
    padding-top:5.8rem !important;
  }

  .lineup .section-label,
  .schedule-poster .section-label,
  .info-sec .section-label,
  .tickets-sec .section-label{
    display:block !important;
    padding-left:24px !important;
    padding-right:24px !important;
    margin-bottom:1.25rem !important;

    font-size:.68rem !important;
    letter-spacing:.24em !important;
    line-height:1.2 !important;

    position:relative !important;
    z-index:30 !important;
  }

  .lineup h2,
  .info-sec .single-line-heading,
  .tickets-sec .single-line-heading{
    padding-left:24px !important;
    padding-right:24px !important;

    position:relative !important;
    z-index:30 !important;

    margin-bottom:2.8rem !important;
  }

  /* Program ma plakat, więc trochę mniejszy odstęp */
  .schedule-poster .section-label{
    margin-bottom:2rem !important;
  }

  /* Najważniejsza poprawka: bilety niżej, żeby karta nie zasłaniała nagłówka */
  .tickets-sec{
    padding-bottom:5rem !important;
    overflow:hidden !important;
  }

  .tickets-sec .single-line-heading{
    font-size:clamp(3.15rem,15vw,5.2rem) !important;
    line-height:.9 !important;
    margin-bottom:3.8rem !important;
  }

  .ticket-cards{
    padding-left:24px !important;
    padding-right:24px !important;
    padding-bottom:2.2rem !important;

    scroll-padding-left:24px !important;
    scroll-padding-right:24px !important;

    overflow-x:auto !important;
    overflow-y:visible !important;

    align-items:stretch !important;

    gap:18px !important;
  }

  .ticket{
    flex:0 0 calc(100vw - 48px) !important;
    max-width:calc(100vw - 48px) !important;

    min-height:68svh !important;

    border-radius:28px !important;
    overflow:hidden !important;

    scroll-snap-align:center !important;

    position:relative !important;
    z-index:1 !important;
  }

  .ticket:first-child{
    margin-left:0 !important;
  }

  .ticket:last-child{
    margin-right:24px !important;
  }

  .ticket:hover,
  .ticket:active{
    transform:none !important;
  }

  .ticket-type{
    margin-bottom:1.4rem !important;
  }

  .ticket-price{
    margin:.35rem 0 1.2rem !important;
    line-height:.85 !important;
  }

  .ticket-feats{
    margin:2rem 0 !important;
  }

  .ticket .btn{
    min-height:52px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  /* Wyrównanie wszystkich poziomych sliderów */
  .artist-grid,
  .info-grid{
    padding-left:24px !important;
    padding-right:24px !important;
    scroll-padding-left:24px !important;
    scroll-padding-right:24px !important;
  }

  .artist-card,
  .info-card{
    flex:0 0 calc(100vw - 48px) !important;
    max-width:calc(100vw - 48px) !important;
  }

  .artist-card:last-child,
  .info-card:last-child{
    margin-right:24px !important;
  }

  /* Dłuższe nazwy w sekcjach pełnoekranowych */
  .wrapped-artist{
    font-size:clamp(2.9rem,14vw,5.8rem) !important;
    line-height:.96 !important;
    letter-spacing:.005em !important;
    text-wrap:balance;
  }

  .wrapped-gambino,
  .wrapped-tyler{
    font-size:clamp(2.55rem,12.4vw,5rem) !important;
    line-height:.98 !important;
  }

  /* Modal: opis ma zawsze miejsce i nie wpada pod menu */
  .modal-body{
    padding-bottom:calc(var(--mobile-nav-h) + 3rem) !important;
  }

  .modal-desc{
    padding-bottom:.5rem !important;
  }
}

@media screen and (max-width:380px){

  .tickets-sec .single-line-heading{
    font-size:clamp(2.75rem,14vw,4.5rem) !important;
    margin-bottom:3.2rem !important;
  }

  .ticket{
    min-height:66svh !important;
  }

  .ticket-price{
    font-size:clamp(4.6rem,25vw,7rem) !important;
  }
}


/* =====================================================
   INFO LIST UPGRADE — MOBILE
   Dłuższe teksty nie rozwalają kart
===================================================== */

@media screen and (max-width:768px) and (hover:none) and (pointer:coarse){

  .info-card{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    align-items:flex-start !important;

    min-height:64svh !important;
    max-height:68svh !important;

    overflow:hidden !important;
  }

  .info-card h3,
  .info-list{
    position:relative !important;
    z-index:2 !important;
  }

  .info-list{
    display:flex !important;
    flex-direction:column !important;
    gap:.95rem !important;

    margin:0 !important;
    padding:0 4px 0 0 !important;
    list-style:none !important;

    width:100% !important;

    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;

    color:rgba(255,255,255,.74) !important;
  }

  .info-list::-webkit-scrollbar{
    width:3px;
  }

  .info-list::-webkit-scrollbar-thumb{
    background:rgba(255,23,68,.65);
    border-radius:999px;
  }

  .info-list li{
    position:relative !important;

    padding-left:1.25rem !important;

    font-size:1rem !important;
    line-height:1.7 !important;
  }

  .info-list li::before{
    content:"—";
    position:absolute;
    left:0;
    top:0;

    color:var(--red);
    font-weight:700;
  }

  .info-card p{
    display:none !important;
  }
}


/* ARTIST MODAL — MOBILE COPY FIX */
@media screen and (max-width:768px) and (hover:none) and (pointer:coarse){
  .modal-desc{
    display:block !important;
  }

  .modal-desc p{
    font-size:1rem !important;
    line-height:1.75 !important;
    color:rgba(255,255,255,.82) !important;
  }

  .modal-slogan{
    font-size:1.08rem !important;
    line-height:1.45 !important;
    color:white !important;
  }

  .modal-highlight-row{
    display:flex !important;
    flex-wrap:wrap !important;
  }
}


/* ARTIST MODAL — CLEANER INFO ORDER MOBILE */
@media screen and (max-width:768px) and (hover:none) and (pointer:coarse){
  .modal-tagline{
    margin-bottom:.65rem !important;
  }

  .modal-highlight-row{
    margin-bottom:1.35rem !important;
  }

  .modal-slogan{
    margin-bottom:1.35rem !important;
  }
}


/* ARTIST MODAL — FINAL CLEAN LAYOUT MOBILE */
@media screen and (max-width:768px) and (hover:none) and (pointer:coarse){

  .modal-body{
    padding-top:1.2rem !important;
  }

  .modal-meta{
    margin-bottom:1.1rem !important;
  }

  .modal-desc{
    margin-top:0 !important;
    margin-bottom:1.4rem !important;
  }

  .modal-tagline,
  .modal-highlight-row{
    display:none !important;
  }

  .modal-slogan{
    margin:0 0 1rem !important;
    font-size:1.18rem !important;
    line-height:1.42 !important;
    font-weight:900 !important;
    color:var(--red) !important;
  }

  .modal.hl-blue .modal-slogan{
    color:var(--blue-light) !important;
  }

  .modal-desc > p{
    margin:0 !important;
    font-size:1rem !important;
    line-height:1.72 !important;
    color:rgba(255,255,255,.82) !important;
  }

  .modal-nav-btn{
    top:auto !important;
    bottom:calc(var(--mobile-nav-h) + .75rem) !important;
    transform:none !important;
    width:46px !important;
    height:46px !important;
    font-size:1.8rem !important;
  }

  .modal-prev{left:1rem !important;}
  .modal-next{right:1rem !important;}

  .modal-nav-btn:hover{
    transform:none !important;
  }
}


/* MODAL FINAL PRO — MOBILE */
@media screen and (max-width:768px) and (hover:none) and (pointer:coarse){
  .modal-name{
    color:var(--artist-accent, var(--red)) !important;
    text-shadow:
      0 0 16px var(--artist-accent-soft, rgba(255,23,68,.45)),
      0 0 42px var(--artist-accent-soft, rgba(255,23,68,.25)) !important;
  }

  .modal.long-name .modal-name{
    font-size:clamp(2.75rem,13vw,4.5rem) !important;
  }

  .modal.extra-long-name .modal-name{
    font-size:clamp(2.35rem,11.5vw,4rem) !important;
  }

  .modal-slogan{
    color:var(--artist-accent, var(--red)) !important;
    text-shadow:0 0 18px var(--artist-accent-soft, rgba(255,23,68,.3)) !important;
  }

  .modal-nav-btn{
    top:auto !important;
    bottom:calc(var(--mobile-nav-h) + .75rem) !important;
    transform:none !important;
    width:46px !important;
    height:46px !important;
    font-size:1.85rem !important;
    line-height:0 !important;
  }

  .modal-prev{left:1rem !important;}
  .modal-next{right:1rem !important;}

  .modal-nav-btn:hover{
    transform:none !important;
  }
}


/* MODAL SLOGAN COLOR FORCE — MOBILE */
@media screen and (max-width:768px) and (hover:none) and (pointer:coarse){
  .modal .modal-desc .modal-slogan,
  .modal .modal-slogan,
  .modal-desc .modal-slogan{
    color:var(--artist-accent, var(--red)) !important;
    text-shadow:
      0 0 16px var(--artist-accent-soft, rgba(255,23,68,.35)),
      0 0 36px var(--artist-accent-soft, rgba(255,23,68,.18)) !important;
  }
}


/* PL / EN nie może nachodzić na dolne menu */
  .lang-switch{
    position:fixed !important;
    top:.8rem !important;
    right:.8rem !important;
    bottom:auto !important;
    z-index:1400 !important;

    display:flex !important;
    align-items:center !important;
    gap:.35rem !important;

    padding:.45rem .62rem !important;
    margin:0 !important;

    border:1px solid rgba(255,255,255,.16) !important;
    border-radius:999px !important;

    background:rgba(5,5,5,.72) !important;
    backdrop-filter:blur(16px) !important;

    font-family:'Space Mono', monospace !important;
    font-size:.62rem !important;
    letter-spacing:.12em !important;
  }

  .lang-btn{
    font-size:.62rem !important;
    padding:.15rem .1rem !important;
  }

  /* dolne menu ma pełną szerokość, bez języka w środku */
  nav{
    z-index:1100 !important;
  }

  nav ul{
    width:100% !important;
  }

  /* strzałki modala: mniejsze, wyżej, nie przykrywają tekstu */
  .modal-nav-btn{
    position:fixed !important;

    top:50% !important;
    bottom:auto !important;

    width:42px !important;
    height:42px !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:50% !important;
    border:1px solid rgba(255,255,255,.22) !important;
    background:rgba(5,5,5,.58) !important;
    backdrop-filter:blur(12px) !important;

    color:#fff !important;
    font-family:Arial, sans-serif !important;
    font-size:1.8rem !important;
    line-height:0 !important;

    transform:translateY(-50%) !important;
    z-index:1350 !important;
  }

  .modal-prev{
    left:.55rem !important;
  }

  .modal-next{
    right:.55rem !important;
  }

  .modal-nav-btn:hover,
  .modal-nav-btn:active{
    transform:translateY(-50%) !important;
    background:rgba(255,23,68,.88) !important;
  }

  /* w modalu zostawiamy więcej oddechu przy meta, bo strzałki są na bokach */
  .modal-meta{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .modal-body{
    padding-bottom:calc(var(--mobile-nav-h) + 1.5rem) !important;
  }


/* bardzo wąskie telefony — strzałki jeszcze odrobinę mniejsze */
@media screen and (max-width:390px){
  .modal-nav-btn{
    width:38px !important;
    height:38px !important;
    font-size:1.65rem !important;
  }

  .modal-prev{
    left:.35rem !important;
  }

  .modal-next{
    right:.35rem !important;
  }
}


/* =====================================================
   MOBILE REAL FIX v2 — PL/EN outside nav + modal arrows under meta
===================================================== */

@media screen and (max-width:768px) and (hover:none) and (pointer:coarse){

  /* PL / EN jako osobny floating control, nie element dolnego menu */
  #language-switch-floating.lang-switch,
  .lang-switch{
    position:fixed !important;
    top:.8rem !important;
    right:.8rem !important;
    left:auto !important;
    bottom:auto !important;

    z-index:5000 !important;

    width:auto !important;
    height:auto !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:.35rem !important;

    padding:.42rem .62rem !important;
    margin:0 !important;

    border:1px solid rgba(255,255,255,.18) !important;
    border-radius:999px !important;

    background:rgba(5,5,5,.76) !important;
    backdrop-filter:blur(16px) !important;

    font-family:'Space Mono', monospace !important;
    font-size:.62rem !important;
    letter-spacing:.12em !important;

    transform:none !important;
  }

  #language-switch-floating .lang-btn,
  .lang-switch .lang-btn{
    display:inline-flex !important;
    width:auto !important;
    min-width:auto !important;
    height:auto !important;
    padding:.12rem .08rem !important;

    background:transparent !important;
    border:0 !important;

    font-family:'Space Mono', monospace !important;
    font-size:.62rem !important;
    line-height:1 !important;
    letter-spacing:.12em !important;

    color:rgba(255,255,255,.55) !important;
  }

  #language-switch-floating .lang-btn.active,
  .lang-switch .lang-btn.active{
    color:var(--red) !important;
  }

  #language-switch-floating span,
  .lang-switch span{
    color:rgba(255,255,255,.42) !important;
    line-height:1 !important;
  }

  /* Dolny nav ma mieć tylko 4 elementy menu */
  nav{
    z-index:3000 !important;
  }

  nav .lang-switch{
    display:none !important;
  }

  /* Modal: robimy miejsce pod metadanymi na strzałki */
  .modal-meta{
    margin-bottom:4.6rem !important;
  }

  /* Strzałki nie stoją już na środku tekstu.
     Są pod kapsułkami Dzień/Godzina/Scena. */
  .modal-nav-btn{
    position:absolute !important;

    top:auto !important;
    bottom:auto !important;

    width:42px !important;
    height:42px !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:50% !important;
    border:1px solid rgba(255,255,255,.22) !important;
    background:rgba(5,5,5,.72) !important;
    backdrop-filter:blur(12px) !important;

    color:#fff !important;
    font-family:Arial, sans-serif !important;
    font-size:1.8rem !important;
    line-height:0 !important;

    transform:none !important;
    z-index:20 !important;
  }

  .modal-prev{
    left:1rem !important;
    top:calc(var(--modal-photo-h, 330px) + 250px) !important;
  }

  .modal-next{
    right:1rem !important;
    top:calc(var(--modal-photo-h, 330px) + 250px) !important;
  }

  .modal-nav-btn:hover,
  .modal-nav-btn:active{
    transform:none !important;
    background:rgba(255,23,68,.88) !important;
  }

  /* Jeżeli modal ma starszy układ z dużym zdjęciem u góry */
  .modal{
    position:relative !important;
  }

  .modal-body{
    padding-bottom:calc(var(--mobile-nav-h) + 1.5rem) !important;
  }
}

/* bardzo małe ekrany */
@media screen and (max-width:390px){
  .modal-meta{
    margin-bottom:4.2rem !important;
  }

  .modal-nav-btn{
    width:38px !important;
    height:38px !important;
    font-size:1.65rem !important;
  }

  .modal-prev{
    left:.75rem !important;
  }

  .modal-next{
    right:.75rem !important;
  }
}


/* =====================================================
   MOBILE MODAL SWIPE — bez strzałek
===================================================== */

@media screen and (max-width:768px) and (hover:none) and (pointer:coarse){

  .modal-prev,
  .modal-next,
  .modal-nav-btn{
    display:none !important;
  }

  .modal-meta{
    margin-bottom:1.15rem !important;
  }

  .modal-desc{
    margin-top:0 !important;
  }

  .modal-slogan{
    margin-top:0 !important;
  }
}


/* =====================================================
   MOBILE MODAL — hide PL/EN while artist modal is open
   Dzięki temu przełącznik nie nachodzi na X zamykania.
===================================================== */

@media screen and (max-width:768px){
  body.modal-open #language-switch-floating.lang-switch,
  body:has(.modal-backdrop.open) #language-switch-floating.lang-switch{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
}


/* =====================================================
   FINAL MOBILE MODAL FIXES
===================================================== */

@media screen and (max-width:768px) and (hover:none) and (pointer:coarse){
  .modal-prev,
  .modal-next,
  .modal-nav-btn{
    display:none !important;
  }

  .modal-meta{
    margin-bottom:1.15rem !important;
  }

  .modal-desc{
    margin-top:0 !important;
  }

  .modal-actions{
    margin-top:1.4rem !important;
    padding-top:0 !important;
    display:flex !important;
    flex-wrap:wrap !important;
  }

  body.modal-open #language-switch-floating.lang-switch,
  body:has(.modal-backdrop.open) #language-switch-floating.lang-switch{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
}


/* =====================================================
   MOBILE MODAL SWIPE HINT
   Delikatna informacja, że można przesuwać artystów palcem.
===================================================== */

@media screen and (max-width:768px) and (hover:none) and (pointer:coarse){

  .modal::after{
    content:"←  SWIPE  →";
    position:absolute;
    left:50%;
    bottom:calc(1rem + env(safe-area-inset-bottom));
    transform:translateX(-50%);

    z-index:35;

    padding:.42rem .72rem;
    border:1px solid rgba(255,255,255,.14);
    border-radius:999px;

    background:rgba(5,5,5,.52);
    backdrop-filter:blur(12px);

    font-family:'Space Mono', monospace;
    font-size:.58rem;
    font-weight:700;
    line-height:1;
    letter-spacing:.16em;
    text-transform:uppercase;

    color:rgba(255,255,255,.68);
    pointer-events:none;

    animation:swipeHintShow 5s ease forwards;
  }

  .modal-actions{
    padding-bottom:2.4rem !important;
  }

  @keyframes swipeHintPulse{
    0%,100%{
      opacity:.42;
      transform:translateX(-50%) translateY(0);
    }
    50%{
      opacity:.9;
      transform:translateX(-50%) translateY(-2px);
    }
  }
}


/* =====================================================
   MOBILE WCAG CONTRAST PASS
===================================================== */

@media screen and (max-width:768px) and (hover:none) and (pointer:coarse){
  .artist-bar-day,
  .info-card p,
  .ticket-feats,
  .cd-label{
    color:rgba(255,255,255,.82) !important;
  }

  nav ul a{
    color:rgba(255,255,255,.9) !important;
  }

  .modal-desc{
    color:rgba(255,255,255,.86) !important;
  }
}


@keyframes swipeHintShow{
  0%{
    opacity:0;
    transform:translateX(-50%) translateY(6px);
  }
  10%{
    opacity:.9;
    transform:translateX(-50%) translateY(0);
  }
  80%{
    opacity:.9;
    transform:translateX(-50%) translateY(0);
  }
  100%{
    opacity:0;
    transform:translateX(-50%) translateY(6px);
    visibility:hidden;
  }
}