/* ============================================================
   responsive.css — mobilní vrstva
   Načítá se AŽ ZA styles.css a pouze přepisuje pevné šířky.
   Původní styles.css / base.css zůstávají nedotčené.
   Původní web měl viewport meta, ale nulové @media dotazy
   a layout na pevných 960 px → na mobilu se rozpadal.
   ============================================================ */

/* ---------- Globální pojistka proti vodorovnému posuvu ---------- */
@media (max-width: 1000px) {
  html, body { overflow-x: hidden; }
  img { max-width: 100%; height: auto; }

  /* hlavní kontejner 960px -> fluidní */
  .inner-container {
    width: 100%;
    max-width: 960px;
    padding: 0 16px;
  }

  /* nadpis přes hlavičku: 960px + 5em je na mobilu mimo obraz */
  .header .header-img .tagline {
    width: 100%;
    font-size: 3em;
    bottom: 40px;
    height: auto;
    line-height: 1.2;
    padding: 0 12px;
  }

  /* boxy s masážemi: float -> flex se zalomením a centrováním.
     Šířka boxu zůstává 260px, takže se sami přeskládají 3 -> 2 -> 1 */
  .content-container .content .products-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-left: 0;
    margin-right: 0;
  }
  .content-container .content .product-box,
  .content-container .content .product-box.middle,
  .content-container .content .product-box.big,
  .content-container .content .product-box.big.fleft,
  .content-container .content .product-box.big.fright {
    float: none;
    margin: 0;
  }

  /* zvýrazněná nabídka měla margin 0 130px */
  .content-container .content .intro-deal {
    margin: 0 12px;
    font-size: 1.2em;
  }

  /* galerie: vycentrovat dlaždice */
  .gallery-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
  }
  .gallery-container .gallery-box {
    float: none;
    margin: 0;
  }

  /* kontakt: 820px wrapper + dva floaty vedle sebe -> pod sebe */
  .contact-container {
    width: auto;
    margin: 60px 0 0;
  }
  .contact-container .contact-left,
  .contact-container .contact-right {
    float: none;
    width: 100%;
    max-width: 480px;
    margin: 0 auto 20px;
  }
  .contact-container .contact-left {
    background-size: cover;
    background-position: center;
  }
  /* dekorativní ozdoba nad kontaktem je fixních 480px -> na mobilu pryč */
  .contact-container .contact-right:before { display: none; }
  .contact-container .contact-right {
    height: auto;
    min-height: 267px;
    padding-bottom: 20px;
  }
  .contact-container .contact-right div p { padding: 24px 18px 0; }
  .contact-container .contact-right div table tr td { padding: 1px 18px; }
}

/* ---------- Menu: 4 odkazy à 110px + marginy se nevejdou ---------- */
@media (max-width: 760px) {
  .navbar { height: auto; }
  .navbar .inner-container {
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2px;
    padding: 8px;
  }
  .navbar .inner-container a {
    float: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 8px 12px;
    font-size: 1.15em;
    line-height: 1.3;
  }
  .navbar-placeholder { height: auto; }

  .header .header-img .tagline {
    font-size: 2.1em;
    bottom: 20px;
  }
  .title h2 { font-size: 2.2em; }
  .content-container .content .intro-text { font-size: 1.5em; }
}

/* ---------- Nejmenší telefony ---------- */
@media (max-width: 420px) {
  .header .header-img .tagline {
    font-size: 1.5em;
    bottom: 10px;
  }
  .title h2 { font-size: 1.8em; }
  .navbar .inner-container a { font-size: 1em; padding: 7px 9px; }

  /* box 260px + odsazení kontejneru už je těsné -> dopřát mu celou šířku */
  .content-container .content .product-box {
    width: 100%;
    max-width: 300px;
  }
}