/* =================================================
   MOBILE OVERRIDES – DragonbornWoW
   cíleno na max-width: 768px
   ================================================= */

@media (max-width: 768px) {

  /* --- ZÁKLAD --- */
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  /* --- CINEMATIC SCROLL VYPNOUT NA MOBILU --- */
  .stack {
    height: auto;
  }

  .panel {
    position: relative;
    height: auto;
    min-height: 100vh;
    padding: 60px 16px;
  }

  /* --- FIX BACKGROUND BUGŮ NA MOBILU --- */
  .p-4,
  .p-2,
  body.register-page,
  body.ucp-page {
    background-attachment: scroll;
  }

  /* --- LOGO (ABY NEPŘEKRÝVALO TEXT) --- */
  .homepage-logo {
    position: fixed;
    top: 12px;
    left: 12px;
    transform: none;
    z-index: 50;
    pointer-events: none;
  }

  .homepage-logo img {
    width: 88px;
    height: auto;
  }

  /* prostor pro logo */
  .hero,
  .panel {
    padding-top: 120px;
  }

  /* --- TEXTY: ZMENŠENÍ --- */
  .hero-inner h1,
  body.home-page .p-hero .hero-inner h1,
  .project-title,
  .whyus-title,
  .p-2 .news-title,
  .home-copy h2 {
    font-size: 2rem;
    line-height: 1.2;
  }

  .hero-inner .subtitle,
  body.home-page .p-hero .hero-inner .subtitle,
  .project-text,
  .whyus-text,
  .p-2 .news-text,
  .home-copy p {
    font-size: 1.05rem;
    line-height: 1.6;
  }

  /* --- CTA TLAČÍTKA (HLAVNÍ PROBLÉM) --- */
  .p-4 .cta {
    flex-wrap: wrap !important;
    gap: 12px;
  }

  .cta .btn,
  .cta form .btn,
  form[action="https://www.paypal.com/donate"] .btn {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }

  /* --- FOOTER NESMÍ PŘEKRÝVAT OBSAH --- */
  .site-footer {
    position: static;
    transform: none;
    margin: 24px 12px 16px;
    text-align: center;
    font-size: 0.9rem;
  }

  /* --- BACK BUTTON --- */
  .back-button {
    position: static;
    display: inline-block;
    margin: 12px;
    padding: 12px 14px;
  }

  /* --- UCP TABULKY: SCROLL MÍSTO MAČKÁNÍ --- */
  body.ucp-page table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.ucp-page td {
    padding: 10px 12px;
  }
}
/* =========================
   MOBILE HOTFIX (override)
   dej ÚPLNĚ NA KONEC mobile.css
   ========================= */
@media (max-width: 768px) {

  /* 1) LOGO – zmenšit a nenechat ho překrývat text */
  .homepage-logo,
  .topbar,
  .brand {
    pointer-events: none;
  }

  /* pokud používáš .homepage-logo */
  .homepage-logo {
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    transform: none !important;
    z-index: 999 !important;
  }

  .homepage-logo img {
    width: 84px !important;
    height: auto !important;
  }

  /* pokud se ti logo renderuje jako .brand img (topbar) */
  .brand img {
    height: 34px !important;
    width: auto !important;
  }

  /* 2) ONLINE COUNT – z absolutní pozice na normální tok */
  .online-count {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 10px auto 0 !important;
    text-align: center !important;
    z-index: 2 !important;
    font-size: 1rem !important;
  }

  /* 3) CTA tlačítka – na 100% šířku + sloupec (žádné vedle sebe) */
  .cta {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 0 14px !important;
  }

  .cta .btn,
  .cta form,
  .cta form .btn,
  form[action="https://www.paypal.com/donate"] .btn {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    min-width: 0 !important;
  }

  /* 4) FOOTER – na mobilu nesmí být fixed (přebít natvrdo) */
  .site-footer {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 22px 12px 18px !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 0.95rem !important;
    z-index: auto !important;
  }

  /* 5) Trochu prostoru nahoře, aby se text nepotkával s logem */
  .hero,
  .panel {
    padding-top: 120px !important;
  }
}
@media (max-width: 768px) {

  /* 1) PANEL NESMÍ ŘEZAT OBSAH */
  .panel {
    overflow: visible !important;
    min-height: auto !important;
    padding-bottom: 140px !important; /* místo pro CTA */
  }

  /* 2) CTA MUSÍ BÝT NAD DALŠÍM PANELEM */
  .cta {
    position: relative !important;
    z-index: 10 !important;
    margin-bottom: 40px !important;
  }

  /* 3) TLAČÍTKA MUSÍ MÍT PROSTOR */
  .cta .btn,
  .cta form,
  .cta form .btn {
    display: block !important;
    width: 100% !important;
  }
}