/* Skyphaze mobile v2 – safe overrides
   -----------------------------------
   - ONLY affects screens <= 767px
   - Desktop layout remains unchanged
   - Loaded AFTER style-mobile.css so it can fix/override rules
*/

@media (max-width: 767px){
    /* Širší burger menu na mobilu */
  .mobile-menu-content{
    width:min(92vw, 420px) !important; /* můžeš si čísla doladit (třeba 85vw) */
  }
      /* URL Scan – responsivní okno s výsledky analýzy */
  .free-analysis-root {
    padding: 8px 0;
  }

  /* Hlavní okno 1000×500 – na mobilu přes celou šířku a do sloupce */
  /* Hlavní okno 1000×500 – na mobilu přes celou šířku, panely pod sebou */
.free-analysis-root .w-\[1000px\] {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 16px 12px !important;
  box-sizing: border-box;
  display: block !important;   /* místo flex -> blok, děti jdou pod sebe */
}

/* Levý a pravý panel (děti uvnitř okna) */
.free-analysis-root .w-\[1000px\] > div {
  width: 100% !important;
  margin-bottom: 16px;
}

.free-analysis-root .w-\[1000px\] > div:last-child {
  margin-bottom: 0;
}
  .free-analysis-root .h-\[500px\] {
    height: auto !important;
    min-height: 0 !important;
  }
  /* Risk breakdown – jeden řádek = vše pod sebou */
  .free-analysis-root .grid.grid-cols-12 {
    display: block !important;
  }

  .free-analysis-root .grid.grid-cols-12 > div {
    width: 100% !important;
    margin-bottom: 4px;
  }

  .free-analysis-root .grid.grid-cols-12 > div:last-child {
    margin-bottom: 0;
  }
  /* Hlavní wrapper s dvěma panely – na mobilu z nich uděláme sloupec */
  .free-analysis-root .flex.gap-6 {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .free-analysis-root .flex.gap-6 > div {
    width: 100% !important;
    margin-bottom: 16px;
  }

  .free-analysis-root .flex.gap-6 > div:last-child {
    margin-bottom: 0;
  }
  /* Pravý panel v okně analýzy – na mobilu nesmí zabírat flex-1 h-full,
     jinak mezi ním a dalšími boxy vzniká obrovská mezera */
  .free-analysis-root .flex-1.h-full.rounded-2xl {
    flex: none !important;
    height: auto !important;
  }

  /* Scroll oblast s risk breakdownem – výšku necháme podle obsahu */
  .free-analysis-root .flex-1.overflow-y-scroll {
    max-height: none !important;
  }

  /* 0) Core page behavior – unlock body scroll on mobile */
  html,
  body{
    margin:0;
    padding:0;
    width:100%;
    max-width:100%;
    min-width:0 !important;
    overflow-x:hidden;
    overflow-y:auto !important;
    position:static !important;
    height:auto !important;
  }
  body{ display:block; }

  /* 1) Header / brand bar layout */

  :root{ --padX:16px; }

  .brand-bar{
    padding:12px var(--padX);
    display:flex;
    align-items:center;
    gap:10px;
  }

  .brand-mark{
    height:26px;
    flex-shrink:0;
  }

  .brand{
    font-size:20px;
    margin-left:4px;
    text-align:left;
    letter-spacing:0.16em;
  }

  .nav-right,
  .nav-center{
    display:none !important;
  }

  .lang-mobile{
    margin-left:auto;
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-weight:700;
    line-height:1;
    margin-top:15px;
  }

  .burger{
    margin-left:8px;
    display:inline-flex;
    width:36px;
    height:36px;
    align-items:center;
    justify-content:center;
  }

  /* 2) Hero spacing */

  .hero-wrap{
    padding:18px 16px 12px;
  }

  .hero-inner{
    display:flex;
    flex-direction:column-reverse;
    gap:16px;
  }

  /* Social Scan pages: keep the title above the upload card on mobile */
  #social-section .hero-inner,
  #social-youtube-section .hero-inner,
  #social-instagram-section .hero-inner,
  #social-tiktok-section .hero-inner{
    flex-direction:column;
  }

  .hero-title{
    font-size:24px;
    line-height:1.18;
  }

  .hero-sub{
    font-size:15px;
    line-height:1.45;
    opacity:.9;
  }

  .chatbar-wrap,
  .chatbar{
    width:100%;
  }

  /* Social Performance Scan – mobile layout fixes */
  #social-results-section{ padding-left:14px; padding-right:14px; }
  #social-results-section .row{ flex-wrap:wrap; }
  #social-results-section .col{ min-width:0; }

  #social-results-section.is-video-scan .video-grid{ gap:16px; }
  #social-results-section.is-video-scan .video-phone-head{
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:4px;
  }
  #social-results-section.is-video-scan .video-phone-sub{ white-space:normal; }

  /* 3) Pricing layout – cards centered and stacked */

  #pricing-section{
    padding:24px 0 40px;
    max-width:520px;
    margin:0 auto;
  }

  #pricing-section .headline,
  #pricing-section .sub{
    padding:0 16px;
    text-align:left;
  }

  .pricing-grid{
    margin:20px auto 0;
    width:100%;
    max-width:420px;
    padding:0 8px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    gap:16px;
  }

  .pricing-grid .card{
    width:100%;
    max-width:100%;
    margin:0 auto !important;
  }

  /* 4) Footer – hide copyright entirely on mobile */
  .site-footer{
    display:none !important;
  }

  /* 5) Blog modal tweaks – keep inside viewport */
  .blog-modal{
    width:100%;
    max-width:100%;
    margin:0 4px;
    border-radius:18px;
  }

}

/* Hero landing CTA styles */
.hero-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  margin-top:24px;
  flex-wrap:wrap;
}
.hero-btn{
  padding:10px 24px;
  border-radius:999px;
  font-size:15px;
  font-weight:600;
}
.hero-btn-secondary{
  background:#111;
  color:#fff;
}


/* Verified section – mobile layout: card full-width, text centered under it */
@media (max-width: 767px) {
  #verified-root .verified-layout-outer {
    flex-direction: column;
    align-items: stretch;
    padding: 16px 16px 20px;
    gap: 16px;
  }

  #verified-root .verified-card {
    width: 100% !important;
    max-width: none;
    height: auto !important;
  }

  #verified-root .verified-text {
    margin-left: 0;
    margin-top: 20px;
    text-align: center;
    align-items: center;
  }

  #verified-root .verified-text h1,
  #verified-root .verified-text p,
  #verified-root .verified-text ul,
  #verified-root .verified-text li,
  #verified-root .verified-text .verified-cta,
  #verified-root .verified-text .verified-cta p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  #verified-root .verified-text ul {
    padding-left: 0;
    list-style: none;
  }

  #verified-root .verified-text .verified-cta button {
    align-self: center;
  }
}
/* Mobilní velikost štítu na homepage */
@media (max-width: 768px) {
  #landing-hero .hero-shield {
    height: 200px;     /* TADY SI NASTAVÍŠ VÝŠKU – zkus 220, 200, 180 podle oka */
    width: auto;       /* drží poměr stran, nedeformuje se */
    max-width: none;   /* kdyby někde výš bylo max-width:100%, tím to přepíšeš */
  }
}
/* Skrytí štítu na mobilu */
@media (max-width: 768px) {
  #landing-hero .hero-branding {
    display: none;
  }

  /* Ať je text hezky uprostřed */
  #landing-hero .hero-inner {
    justify-content: center;
  }

  #landing-hero .hero-copy {
    align-items: center;
    text-align: center;
  }

  #landing-hero .hero-actions {
    justify-content: center;
  }
}
@media (max-width: 768px) {
  #landing-hero .hero-actions {
    display: flex;
    justify-content: center;  /* TADY je střed */
    align-items: center;
    gap: 12px;
    width: 100%;              /* ať mají prostor se vycentrovat */
  }

  /* pro jistotu, ať to nekazí text-align z rodiče */
  #landing-hero .hero-copy {
    text-align: center;
    align-items: center;
  }
}
/* Manuální posun dvou buttonů na mobilu */
@media (max-width: 768px) {
  #landing-hero .hero-actions {
    display: flex;
    justify-content: flex-start;  /* necháme je vedle sebe odleva */
    gap: 12px;

    /* TADY SI TO BUDEŠ LADIT: */
    margin-left: 40px;   /* zvýš / sniž podle toho, jak moc doprava je chceš */
    /* margin-top: 10px;  případně si můžeš doladit i výšku */
  }
}