/* responzivita – přepisy k style.css, breakpointy od největšího po nejmenší */

/* tlačítko burger menu je na širokých obrazovkách schované */
.burger{display: none;}

/* menší notebook: hlavní pruh .o místo pevných 1300px na 94vw */
@media (max-width: 1340px) {
  .o{width: 94vw;}

  /* lišta: menší mezery v menu a u telefonu, aby se vešla až do 1100px */
  .menu a{margin-right: 12px;}
  a.phone{padding-left: 15px; padding-right: 15px;}

  /* sekce: levý okraj a šířky sloupců odvozené od 94vw místo 1300px */
  .sekce-left .odsazeni-sekce{margin-left: 3vw; width: calc(47vw - 70px);}
  .sekce-right .odsazeni-sekce{width: calc(47vw - 70px);}
  .sekce.kontakty .sekce-right .odsazeni-sekce{width: 47vw;}
}

/* přidaný breakpoint: menu se do lišty nevejde, schová se do burger menu */
@media (max-width: 1100px) {
  /* tlačítko se třemi čárkami vpravo vedle telefonu */
  .burger{display: inline-block; vertical-align: top; width: 74px; height: 90px; padding: 0 22px; margin-right: -3vw; background: none; border: none; cursor: pointer;}
  .burger span{display: block; height: 3px; margin: 6px 0; background-color: #fff; transition: transform 0.3s ease, opacity 0.3s ease;}
  .top-bar.menu-open .burger span:nth-child(1){transform: translateY(9px) rotate(45deg);}
  .top-bar.menu-open .burger span:nth-child(2){opacity: 0;}
  .top-bar.menu-open .burger span:nth-child(3){transform: translateY(-9px) rotate(-45deg);}

  /* menu se rozbalí pod lištou přes celou šířku, odkazy pod sebou */
  .menu{display: none; position: absolute; left: 0; top: 90px; width: 100%; margin-top: 0; padding-bottom: 10px; background-color: #14191f;}
  .top-bar.menu-open .menu{display: block;}
  .menu a{display: block; margin-right: 0; padding: 0 3vw; font-size: 16px; line-height: 48px; border-top: 1px solid #2a3038;}
  .menu a.home-ico{display: none;}
}

/* tablet: dvousloupcové sekce pod sebe */
@media (max-width: 1024px) {
  /* úvod: menší nadpis, aby se do pevné výšky 640 px vešel na dva řádky i těsně nad 640 px */
  .theme-over h1{font-size: 40px;}

  /* sloupce místo tabulky pod sebou; obrázek vždy nad textem */
  .sekce{display: flex; flex-direction: column;}
  .sekce-left, .sekce-right{display: block; width: 100%;}
  .sekce.lokality .sekce-right{order: -1;}

  /* obrázkové sloupce nemají obsah, výšku jim dává šířka obrazovky */
  .sekce.autojerab .sekce-left,
  .sekce.lokality .sekce-right,
  .sekce.cena .sekce-left{height: 50vw;}

  /* text na šířku hlavního pruhu 94vw */
  .sekce-left .odsazeni-sekce,
  .sekce-right .odsazeni-sekce,
  .sekce.kontakty .sekce-right .odsazeni-sekce{margin-left: 3vw; width: 94vw; padding: 50px 0;}
  .sekce.kontakty .sekce-right .odsazeni-sekce{padding-top: 0;}

  /* kontakty: široká fotka (1920 × 606) by se přes celou vysokou sekci obří zvětšila – místo ní jen barva */
  .sekce.kontakty{background-image: none; background-color: #262626;}

  /* galerie: fotky úměrně širší, tak i vyšší */
  .galerie .image{height: 20vw;}
}

/* mobil */
@media (max-width: 640px) {
  /* lišta: menší logo a telefon, aby se vešly vedle burger menu */
  .logo{width: 200px; height: auto; margin-top: 24px;}
  a.phone{font-size: 18px;}
  a.phone span{margin-top: 34px;}

  /* úvod: výška podle obsahu místo pevných 640px, menší nadpisy */
  .theme{height: auto;}
  .theme-over{position: relative; height: auto; padding-bottom: 50px;}
  .theme-over h1{font-size: 28px; margin-top: 50px;}
  .theme-over h2{font-size: 20px; margin-top: 20px; margin-bottom: 30px;}
  .theme-over p{font-size: 16px; line-height: 24px; margin-bottom: 30px;}

  /* tlačítka přes celou šířku pod sebou */
  .tlacitka a,
  .sekce.autojerab .tlacitka a,
  .sekce.cena .tlacitka a{display: block; margin: 0 0 10px; text-align: center;}

  /* boxy služeb pod sebou */
  .boxy{padding-top: 50px; padding-bottom: 30px;}
  .box{display: block; width: 100%; margin-right: 0; margin-bottom: 20px;}
  .box .box-img{height: 45vw;}
  .box .box-txt{font-size: 16px; line-height: 22px;}

  /* sekce: menší nadpis a odsazení */
  .sekce-left .odsazeni-sekce,
  .sekce-right .odsazeni-sekce,
  .sekce.kontakty .sekce-left .odsazeni-sekce{padding-top: 40px; padding-bottom: 40px;}
  .odsazeni-sekce h2{font-size: 24px; margin-bottom: 25px;}
  .dokumenty a{font-size: 16px; padding: 12px 0;}

  /* faq: vyšší řádek otázky, aby se dobře trefil prstem */
  .otazka{padding: 10px 0;}
  .faq{background-position: right top 16px;}
  .faq .odpoved{font-size: 16px; line-height: 24px;}

  /* galerie na dva sloupce */
  .galerie .image{width: calc(50% - 5px); height: 30vw;}
  .galerie .image:nth-child(3n){margin-right: 10px;}
  .galerie .image:nth-child(2n){margin-right: 0;}
  /* lichá poslední fotka by zůstala v řádku sama – schovat */
  .galerie .image:last-child:nth-child(odd){display: none;}
  /* lightbox: fotka přes celou šířku, šipky leží přes její okraje */
  .lb-foto{max-width: 100%; max-height: calc(100% - 160px);}
  .lb-predchozi{left: 5px;}
  .lb-dalsi{right: 5px;}

  /* kontakty a formulář pod sebou */
  .kontakty-odkazy{font-size: 26px;}
  .adresa{font-size: 16px; line-height: 24px;}
  .poptavka{padding: 30px;}
  .poptavka input[type='text'],
  .poptavka textarea{font-size: 16px; width: 100%; box-sizing: border-box;}
  .poptavka button[type="submit"]{float: none; display: block; width: 100%; margin-right: 0; padding: 14px 15px;}
  .form-txt{float: none; width: auto; margin-top: 15px;}

  /* patička pod sebou na střed */
  .foot-left, .foot-right{float: none; text-align: center;}
  .foot-right{margin-top: 15px;}
}

/* přidaný breakpoint: nižší horní lišta (60px místo 90px) */
@media (max-width: 600px) {
  /* výška lišty – mění se naráz lišta, místo pod ní a posun kotev, aby menu skákalo na nadpis sekce */
  .top-bar{height: 60px; box-shadow: 0 1px 0 rgba(255,255,255,0.15);}
  .pod-top{height: 60px;}
  .kotva{margin-top: -60px;}

  /* prvky v liště na novou výšku */
  .logo{margin-top: 9px;}
  a.phone{height: 60px;}
  a.phone span{margin-top: 19px;}
  .burger{height: 60px;}
  .menu{top: 60px;}

  /* úvod: popis a oblast zbytečně zabírají místo – schovat */
  .theme-over p{display: none;}

  /* tlačítka volat a poptat menší (výška zůstává přes 44px kvůli ťuknutí prstem) */
  .tlacitka a,
  .sekce.autojerab .tlacitka a,
  .sekce.cena .tlacitka a{font-size: 15px; padding: 13px 20px;}
}

/* přidaný breakpoint: texty v sekcích na střed */
@media (max-width: 500px) {
  .odsazeni-sekce{text-align: center;}
  .faqs{text-align: left;}

  /* tabulky parametrů a cen: popisek nad hodnotou, aby šly vystředit */
  .odsazeni-sekce .tabulka .radek .sl-1,
  .odsazeni-sekce .tabulka .radek .sl-2{display: block; width: 100%;}
  .odsazeni-sekce .tabulka .radek .sl-1{margin-bottom: 4px; font-weight: 600;}
}

/* přidaný breakpoint: telefon se ani zmenšený nevejde vedle loga a burger menu – jen ikona sluchátka */
@media (max-width: 480px) {
  a.phone{width: 60px; padding: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 28px;}
  /* číslo zůstane pro čtečky obrazovky, jen není vidět */
  a.phone span{position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);}
}

/* přidaný breakpoint: hlavní pruh .o z 94vw na 92vw (okraj 4vw po stranách) */
@media (max-width: 440px) {
  .o{width: 92vw;}

  /* vše, co počítá s okrajem 3vw / šířkou 94vw */
  .burger{margin-right: -4vw;}
  .menu a{padding: 0 4vw;}
  .sekce-left .odsazeni-sekce,
  .sekce-right .odsazeni-sekce,
  .sekce.kontakty .sekce-right .odsazeni-sekce{margin-left: 4vw; width: 92vw;}
}

/* malý mobil */
@media (max-width: 400px) {
  .logo{width: 170px; margin-top: 12px;}
  .theme-over h1{font-size: 24px;}
  .odsazeni-sekce h2{font-size: 20px;}

  .kontakty-odkazy{font-size: 22px;}
  .poptavka{padding: 20px;}
}