/* 

// Created :: 2025-02-23
// Updated :: 2026-01-31

// Responzivní styly pro InternetDreams.cz
// Breakpointy: 1200px, 960px, 768px, 576px, 480px

*/

/* ============================================
   BREAKPOINT: 1200px - Velké tablety / Malé desktopy
   ============================================ */

@media (max-width: 1200px) {

  /* HP :: HEADER */
  #header.header_hp { padding: 120px 60px 130px 60px; }
  #header.header_hp span { font-size: 80px; }

  /* HP :: SERVICES_MAIN */
  #services_main { padding: 0px 60px; gap: 25px; }

  /* HP :: ABOUT US */
  #aboutus_hp { padding: 0px 60px 80px 60px; }
  #aboutus_hp .aboutus_wrap { gap: 60px; }
  #aboutus_hp .aboutus_right { padding-top: 150px; }
  #aboutus_hp .aboutus_right h2 { font-size: 34px; }
  #aboutus_hp .aboutus_stats { gap: 50px; }
  #aboutus_hp .stat_number { font-size: 50px; }

  /* HTML :: ABOUT US */
  #aboutus { padding: 0px 60px; }
  #aboutus .aboutus_wrap { gap: 60px; }
  #aboutus .aboutus_right { padding-top: 150px; }
  #aboutus .aboutus_right h2 { font-size: 34px; }
  #aboutus .aboutus_stats { gap: 50px; }
  #aboutus .stat_number { font-size: 50px; }

  /* FAV SERVICES */
  #fav_services { padding: 80px 60px; }
  #fav_services h2 { font-size: 34px; }

  /* BLOG */
  .next_articles.blog { padding: 80px 60px 0px 60px; }
  .next_articles.blog_hp h2 { font-size: 34px; }

  /* PATICKA */
  #paticka .paticka_left { padding: 80px 60px; }
  #paticka .paticka_left h2 { font-size: 55px; }
  #paticka .paticka_right { padding: 150px 40px 30px 80px; }

  /* HTML KONTAKTY */
  #html_kontakty { padding: 80px 60px; }
  #html_kontakty h2 { font-size: 34px; }

  /* HTML KONTAKTY ZAJEM */
  #html_kontakty_zajem { padding: 80px 60px; gap: 40px; }
  #html_kontakty_zajem h3 { font-size: 34px; }

  /* CENIK */
  #cenik_hlavni { padding: 80px 60px; }
  #cenik_hlavni h2 { font-size: 34px; }

  /* SLUZBY */
  #sluzby { padding: 80px 60px; }
  #sluzby h2 { font-size: 34px; }

  /* OBSAH */
  .obsah.obsah_zahlavi { padding: 80px 40px; }
  .obsah.obsah_uvod { padding: 80px 20px 100px 20px; }

  /* TINYMCE */
  .tinymce.text p { padding-left: 30px; padding-right: 30px; }
  .tinymce.text h2 { padding: 20px 30px 30px 30px; }
  .tinymce.text ul { margin-left: 46px; }

  /* NADPISY */
  h1 { font-size: 55px; }

}

/* ============================================
   BREAKPOINT: 960px - Tablety (aktivace burger menu)
   ============================================ */

@media (max-width: 960px) {

  /* MENU */
  #menu { display: none; } 
  .nav_toggle { display: inline-flex; align-items: center; justify-content: center; }

  /* HP :: HEADER */
  #header.header_hp { padding: 100px 40px 110px 40px; }
  #header.header_hp span { font-size: 60px; }

  /* HP :: SERVICES_MAIN */
  #services_main { padding: 0px 40px; gap: 20px; flex-wrap: wrap; }
  #services_main .service_box { flex: 1 1 calc(50% - 10px); min-width: 250px; }

  /* HP :: ABOUT US */
  #aboutus_hp { padding: 0px 40px 60px 40px; }
  #aboutus_hp .aboutus_wrap { flex-direction: column; gap: 40px; }
  #aboutus_hp .aboutus_left { width: 100%; }
  #aboutus_hp .aboutus_left img { width: 100%; max-width: 600px; margin: 0 auto; }
  #aboutus_hp .aboutus_right { padding-top: 0px; }
  #aboutus_hp .aboutus_right h2 { font-size: 30px; }
  #aboutus_hp .aboutus_right p { margin-bottom: 60px; }
  #aboutus_hp .aboutus_stats { gap: 40px; flex-wrap: wrap; }
  #aboutus_hp .stat_number { font-size: 45px; }

  /* HTML :: ABOUT US */
  #aboutus { padding: 0px 40px; }
  #aboutus .aboutus_wrap { flex-direction: column; gap: 40px; }
  #aboutus .aboutus_left { width: 100%; }
  #aboutus .aboutus_left img { width: 100%; max-width: 600px; margin: 0 auto; }
  #aboutus .aboutus_right { padding-top: 0px; }
  #aboutus .aboutus_right h2 { font-size: 30px; }
  #aboutus .aboutus_right p { margin-bottom: 60px; }
  #aboutus .aboutus_stats { gap: 40px; flex-wrap: wrap; }
  #aboutus .stat_number { font-size: 45px; }

  /* FAV SERVICES */
  #fav_services { padding: 60px 40px; }
  #fav_services h2 { font-size: 30px; }
  #fav_services p { margin-bottom: 60px; }
  #fav_services .services_box { flex: 1 1 100%; }

  /* BLOG */
  .next_articles.blog { padding: 60px 40px 0px 40px; }
  .next_articles:not(.blog_hp) { padding-bottom: 60px; }
  .next_articles.blog_hp h2 { font-size: 30px; }
  .next_articles.blog_hp p { margin-bottom: 60px; }
  .next_articles.blog .vypis_box.blogmag { flex: 0 1 calc(50% - 10px); max-width: calc(50% - 10px); }

  /* PATICKA */
  #paticka { padding: 60px 0px 0px 0px; }
  #paticka .paticka_wrap { flex-direction: column; }
  #paticka .paticka_left, #paticka .paticka_right { flex: 1 1 100%; }
  #paticka .paticka_left { padding: 60px 40px; border-radius: 0; text-align: center; }
  #paticka .paticka_left h2 { font-size: 45px; padding-bottom: 40px; }
  #paticka .paticka_left a { margin: 0 auto; }
  #paticka .paticka_right { padding: 60px 40px 30px 40px; }
  #paticka .columns { gap: 40px; }
  #paticka .column ul { margin-bottom: 40px; }
  #paticka .column h4 { padding-bottom: 30px; }

  /* HTML KONTAKTY */
  #html_kontakty { padding: 60px 40px; }
  #html_kontakty h2 { font-size: 30px; }
  #html_kontakty p { margin-bottom: 60px; }
  #html_kontakty .kontakt_box { flex: 1 1 100%; }

  /* HTML KONTAKTY ZAJEM */
  #html_kontakty_zajem { padding: 60px 40px; flex-direction: column; gap: 40px; }
  #html_kontakty_zajem .container_obsah { flex: 1 1 100%; }
  #html_kontakty_zajem .container_obrazek { flex: 1 1 100%; }
  #html_kontakty_zajem h3 { font-size: 30px; }

  /* CENIK */
  #cenik_hlavni { padding: 60px 40px; }
  #cenik_hlavni h2 { font-size: 30px; }
  #cenik_hlavni p { margin-bottom: 60px; }
  #cenik_hlavni .cenik_box { flex: 1 1 calc(50% - 15px); }

  /* SLUZBY */
  #sluzby { padding: 60px 40px; }
  #sluzby h2 { font-size: 30px; margin-bottom: 40px; }
  #sluzby .sluzby_box { flex: 1 1 calc(50% - 15px); }

  /* OBSAH */
  .obsah.obsah_zahlavi { padding: 60px 30px; }
  .obsah.obsah_uvod { padding: 60px 20px 80px 20px; }

  /* BLOGMAG PEREX */
  .obsah.obsah_uvod.blogmag .tinymce.perex { flex-direction: column; gap: 40px; }
  .obsah.obsah_uvod.blogmag .tinymce.perex img.uvod { max-width: 100%; }

  /* TINYMCE */
  .tinymce.text p { padding-left: 20px; padding-right: 20px; }
  .tinymce.text h2 { padding: 20px 20px 25px 20px; }
  .tinymce.text ul { margin-left: 36px; }
  .tinymce blockquote { padding: 25px 25px 25px 70px; font-size: 24px; }
  .tinymce blockquote * { font-size: 24px; }
  .tinymce blockquote::before { top: 30px; left: 20px; font-size: 50px; }

  /* NADPISY */
  h1 { font-size: 45px; }

}

/* ============================================
   BREAKPOINT: 768px - Menší tablety
   ============================================ */

@media (max-width: 768px) {

  /* HP :: HEADER */
  #header.header_hp { padding: 80px 25px 90px 25px; }
  #header.header_hp span { font-size: 48px; }

  /* HP :: SERVICES_MAIN */
  #services_main { padding: 0px 25px; }
  #services_main .service_box { flex: 1 1 100%; min-width: 100%; }
  #services_main .service_box h3 { font-size: 22px; }
  #services_main .service_box p { font-size: 16px; }

  /* HP :: ABOUT US */
  #aboutus_hp { padding: 0px 25px 50px 25px; }
  #aboutus_hp .aboutus_right h2 { font-size: 26px; margin-bottom: 20px; }
  #aboutus_hp .aboutus_right p { font-size: 16px; margin-bottom: 50px; }
  #aboutus_hp .aboutus_stats { gap: 30px; }
  #aboutus_hp .stat_number { font-size: 40px; }
  #aboutus_hp .stat_label { padding-top: 20px; }

  /* HTML :: ABOUT US */
  #aboutus { padding: 0px 25px; }
  #aboutus .aboutus_right h2 { font-size: 26px; margin-bottom: 20px; }
  #aboutus .aboutus_right p { font-size: 16px; margin-bottom: 50px; }
  #aboutus .aboutus_stats { gap: 30px; }
  #aboutus .stat_number { font-size: 40px; }
  #aboutus .stat_label { padding-top: 20px; }

  /* FAV SERVICES */
  #fav_services { padding: 50px 25px; }
  #fav_services h2 { font-size: 26px; }
  #fav_services p { font-size: 16px; margin-bottom: 50px; }
  #fav_services .services_box { padding: 40px 25px; gap: 20px; }
  #fav_services .services_box .text h3 { font-size: 20px; margin-bottom: 15px; }

  /* BLOG */
  .next_articles.blog { padding: 50px 25px 0px 25px; }
  .next_articles:not(.blog_hp) { padding-bottom: 50px; }
  .next_articles.blog_hp h2 { font-size: 26px; }
  .next_articles.blog_hp p { font-size: 16px; margin-bottom: 50px; }
  .next_articles.blog .vypis_box.blogmag { flex: 0 1 100%; max-width: 100%; }
  .next_articles.blog .blog_img { aspect-ratio: 4 / 3; }
  .next_articles.blog .blog_img h3 { font-size: 20px; }

  /* PATICKA */
  #paticka { padding: 50px 0px 0px 0px; }
  #paticka .paticka_left { padding: 50px 25px; }
  #paticka .paticka_left h2 { font-size: 38px; }
  #paticka .paticka_left a { padding: 18px 26px; font-size: 14px; }
  #paticka .paticka_right { padding: 50px 25px 25px 25px; }
  #paticka .columns { flex-direction: column; gap: 30px; }
  #paticka .column { flex: 1 1 100%; }
  #paticka .column h4 { padding-bottom: 20px; font-size: 18px; }
  #paticka .column ul { margin-bottom: 0; }
  #paticka .column ul li { padding-bottom: 15px; }
  #paticka .copyright { font-size: 11px; text-align: center; }

  /* HTML KONTAKTY */
  #html_kontakty { padding: 50px 25px; }
  #html_kontakty h2 { font-size: 26px; }
  #html_kontakty p { font-size: 16px; margin-bottom: 50px; }
  #html_kontakty .kontakt_box { padding: 40px 25px; gap: 20px; }
  #html_kontakty .kontakt_box .text h3 { font-size: 20px; margin-bottom: 20px; }

  /* HTML KONTAKTY ZAJEM */
  #html_kontakty_zajem { padding: 50px 25px; }
  #html_kontakty_zajem h3 { font-size: 26px; }
  #html_kontakty_zajem p { font-size: 16px; }

  /* CENIK */
  #cenik_hlavni { padding: 50px 25px; }
  #cenik_hlavni h2 { font-size: 26px; }
  #cenik_hlavni p { font-size: 16px; margin-bottom: 50px; }
  #cenik_hlavni .cenik_box { flex: 1 1 100%; padding: 50px 25px; }
  #cenik_hlavni .cenik_cena { font-size: 32px; margin-bottom: 40px; }

  /* SLUZBY */
  #sluzby { padding: 50px 25px; }
  #sluzby h2 { font-size: 26px; margin-bottom: 30px; }
  #sluzby .sluzby_box { flex: 1 1 100%; padding: 50px 30px; }
  #sluzby .sluzby_box h3 { font-size: 20px; }
  #sluzby .sluzby_box p { font-size: 16px; }

  /* OBSAH */
  .obsah.obsah_zahlavi { padding: 50px 20px; }
  .obsah.obsah_uvod { padding: 50px 15px 60px 15px; }
  .obsah.obsah_detail.blogmag { padding: 60px 15px; }

  /* TINYMCE */
  .tinymce { font-size: 16px; }
  .tinymce * { font-size: 16px; }
  .tinymce p { padding-bottom: 25px; }
  .tinymce.text p { padding-left: 15px; padding-right: 15px; font-size: 15px; }
  .tinymce.text * { font-size: 15px; }
  .tinymce.text h2 { padding: 15px 15px 20px 15px; font-size: 18px; }
  .tinymce.text ul { margin-left: 30px; }
  .tinymce blockquote { padding: 20px 20px 20px 55px; font-size: 20px; }
  .tinymce blockquote * { font-size: 20px; }
  .tinymce blockquote::before { top: 25px; left: 15px; font-size: 40px; width: 30px; height: 30px; line-height: 30px; }
  .tinymce div.obrazek_wide { margin-bottom: 25px; }

  /* BREADCRUMB */
  .breadcrumb li { font-size: 13px; }
  .breadcrumb li:not(:last-child)::after { padding: 0px 8px; }

  /* NADPISY */
  h1 { font-size: 36px; }

  /* ZAHLAVI */
  #zahlavi .in { max-width: 100%; }
  #zahlavi .logo img { 
    max-width: 80%;
    max-height: none;  /* vypni max-height */
    margin: 0px auto;
    height: auto;
  }

}

/* ============================================
   BREAKPOINT: 576px - Mobily
   ============================================ */

@media (max-width: 576px) {

  /* HP :: HEADER */
  #header.header_hp { padding: 60px 20px 70px 20px; }
  #header.header_hp span { font-size: 38px; }

  /* HP :: SERVICES_MAIN */
  #services_main { padding: 0px 20px; gap: 15px; }
  #services_main .service_box .icon { padding-bottom: 20px; }
  #services_main .service_box .icon img { max-width: 50px; }
  #services_main .service_box h3 { font-size: 20px; padding-bottom: 10px; }
  #services_main .service_box p { font-size: 15px; }

  /* HP :: ABOUT US */
  #aboutus_hp { padding: 0px 20px 40px 20px; }
  #aboutus_hp .aboutus_wrap { gap: 30px; }
  #aboutus_hp .aboutus_right label { margin-bottom: 15px; font-size: 13px; }
  #aboutus_hp .aboutus_right h2 { font-size: 24px; margin-bottom: 15px; }
  #aboutus_hp .aboutus_right p { font-size: 15px; margin-bottom: 40px; }
  #aboutus_hp .aboutus_stats { gap: 20px; justify-content: space-between; }
  #aboutus_hp .stat_box { flex: 1 1 auto; min-width: 80px; }
  #aboutus_hp .stat_number { font-size: 32px; padding-top: 20px; }
  #aboutus_hp .stat_label { font-size: 12px; padding-top: 15px; }

  /* HTML :: ABOUT US */
  #aboutus { padding: 0px 20px; }
  #aboutus .aboutus_wrap { gap: 30px; }
  #aboutus .aboutus_right label { margin-bottom: 15px; font-size: 13px; }
  #aboutus .aboutus_right h2 { font-size: 24px; margin-bottom: 15px; }
  #aboutus .aboutus_right p { font-size: 15px; margin-bottom: 40px; }
  #aboutus .aboutus_stats { gap: 20px; justify-content: space-between; }
  #aboutus .stat_box { flex: 1 1 auto; min-width: 80px; }
  #aboutus .stat_number { font-size: 32px; padding-top: 20px; }
  #aboutus .stat_label { font-size: 12px; padding-top: 15px; }

  /* FAV SERVICES */
  #fav_services { padding: 40px 20px; }
  #fav_services label { font-size: 13px; margin-bottom: 15px; }
  #fav_services h2 { font-size: 24px; }
  #fav_services p { font-size: 15px; margin-bottom: 40px; }
  #fav_services .services_boxy { gap: 20px; }
  #fav_services .services_box { padding: 30px 20px; gap: 15px; flex-direction: column; align-items: flex-start; }
  #fav_services .services_box .ikonka { width: 35px; height: 35px; }
  #fav_services .services_box .text h3 { font-size: 18px; margin-bottom: 10px; }
  #fav_services .services_box .text ul li { font-size: 14px; }

  /* BLOG */
  .next_articles.blog { padding: 40px 20px 0px 20px; }
  .next_articles:not(.blog_hp) { padding-bottom: 40px; }
  .next_articles.blog_hp label { font-size: 13px; margin-bottom: 15px; }
  .next_articles.blog_hp h2 { font-size: 24px; }
  .next_articles.blog_hp p { font-size: 15px; margin-bottom: 40px; }
  .next_articles.blog .container { gap: 15px; }
  .next_articles.blog .blog_img .overlay { padding: 15px; }
  .next_articles.blog .blog_img h3 { font-size: 18px; }

  /* PATICKA */
  #paticka { padding: 40px 0px 0px 0px; }
  #paticka .paticka_left { padding: 40px 20px; }
  #paticka .paticka_left label { font-size: 14px; padding-bottom: 15px; }
  #paticka .paticka_left h2 { font-size: 32px; padding-bottom: 30px; }
  #paticka .paticka_left a { padding: 16px 22px; font-size: 13px; letter-spacing: 1px; }
  #paticka .paticka_right { padding: 40px 20px 20px 20px; }
  #paticka .column h4 { font-size: 16px; }
  #paticka .column ul li { padding-bottom: 12px; }
  #paticka .column ul li a { font-size: 14px; }
  #paticka .copyright { font-size: 10px; flex-wrap: wrap; justify-content: center; }

  /* HTML KONTAKTY */
  #html_kontakty { padding: 40px 20px; }
  #html_kontakty label { font-size: 13px; margin-bottom: 15px; }
  #html_kontakty h2 { font-size: 24px; }
  #html_kontakty p { font-size: 15px; margin-bottom: 40px; }
  #html_kontakty .kontakt_boxy { gap: 20px; }
  #html_kontakty .kontakt_box { padding: 30px 20px; gap: 15px; flex-direction: column; align-items: flex-start; }
  #html_kontakty .kontakt_box .ikonka { width: 35px; height: 35px; }
  #html_kontakty .kontakt_box .text h3 { font-size: 18px; margin-bottom: 15px; }

  /* HTML KONTAKTY ZAJEM */
  #html_kontakty_zajem { padding: 40px 20px; gap: 30px; }
  #html_kontakty_zajem h3 { font-size: 24px; padding-bottom: 20px; }
  #html_kontakty_zajem p { font-size: 15px; padding-bottom: 20px; }
  #html_kontakty_zajem p:nth-child(3) { padding-bottom: 30px; }

  /* CENIK */
  #cenik_hlavni { padding: 40px 20px; }
  #cenik_hlavni label { font-size: 13px; margin-bottom: 15px; }
  #cenik_hlavni h2 { font-size: 24px; }
  #cenik_hlavni p { font-size: 15px; margin-bottom: 40px; }
  #cenik_hlavni .cenik_boxy { gap: 20px; }
  #cenik_hlavni .cenik_box { padding: 40px 20px; }
  #cenik_hlavni .cenik_box h3 { font-size: 16px; margin-bottom: 20px; }
  #cenik_hlavni .cenik_cena { font-size: 28px; margin-bottom: 30px; }
  #cenik_hlavni .cenik_box ul li { font-size: 14px; }

  /* SLUZBY */
  #sluzby { padding: 40px 20px; }
  #sluzby label { font-size: 13px; margin-bottom: 15px; }
  #sluzby h2 { font-size: 24px; margin-bottom: 25px; }
  #sluzby .container { gap: 20px; }
  #sluzby .sluzby_box { padding: 40px 25px; }
  #sluzby .sluzby_box .icon { padding-bottom: 25px; }
  #sluzby .sluzby_box .icon svg { width: 40px; height: 40px; }
  #sluzby .sluzby_box h3 { font-size: 18px; padding-bottom: 15px; }
  #sluzby .sluzby_box p { font-size: 15px; }

  /* OBSAH */
  .obsah.obsah_zahlavi { padding: 40px 15px; }
  .obsah.obsah_uvod { padding: 40px 15px 50px 15px; }
  .obsah.obsah_detail.blogmag { padding: 50px 10px; }

  /* TINYMCE */
  .tinymce { font-size: 15px; }
  .tinymce * { font-size: 15px; line-height: 1.6; }
  .tinymce p { padding-bottom: 20px; line-height: 1.8; }
  .tinymce.text p { padding-left: 10px; padding-right: 10px; font-size: 14px; }
  .tinymce.text * { font-size: 14px; }
  .tinymce.text h2 { padding: 10px 10px 15px 10px; font-size: 17px; }
  .tinymce.text ul { margin-left: 24px; margin-bottom: 15px; }
  .tinymce.text ul li { padding-left: 8px; }
  .tinymce blockquote { padding: 15px 15px 15px 45px; font-size: 17px; margin-bottom: 20px; }
  .tinymce blockquote * { font-size: 17px; }
  .tinymce blockquote::before { top: 18px; left: 12px; font-size: 35px; width: 25px; height: 25px; line-height: 25px; }
  .tinymce div.obrazek_wide { margin-bottom: 20px; padding-top: 5px; }

  /* BREADCRUMB */
  .breadcrumb li { font-size: 12px; }
  .breadcrumb li:not(:last-child)::after { padding: 0px 6px; }

  /* NADPISY */
  h1 { font-size: 30px; line-height: 125%; }

  /* ZAHLAVI */
  #zahlavi { padding: 20px 0px; }
  #zahlavi .menu_wrap { gap: 15px; }
  #_zahlavi .logo img { max-height: 40px; }

  /* FORM */
  fieldset#zajem .form_line { margin-bottom: 20px; }
  fieldset#zajem input[type="text"], 
  fieldset#zajem input[type="email"], 
  fieldset#zajem input[type="tel"] { padding: 12px 15px; font-size: 15px; }
  button.btn { padding: 18px 26px; font-size: 14px; letter-spacing: 1px; }

  /* BURGER DRAWER */
  .nav_drawer_inner { width: min(90vw, 320px); padding: 15px 18px 30px; }
  .menu_all { margin: 50px 0 0; }
  .menu_all li a { padding: 12px 5px; font-size: 15px; }
  .nav_close { font-size: 30px; right: 10px; top: 6px; }

}

/* ============================================
   MENU BURGER - Základní breakpoint
   ============================================ */

@media (min-width: 961px) {
  .nav_toggle { display: none; }
  #menu { display: block; }
}

/* ============================================
   ZÁHLAVÍ - Mobilní layout (logo + burger uprostřed)
   ============================================ */

@media (max-width: 960px) {
  
  /* Záhlaví - vertikální layout */
  #zahlavi .menu_wrap { 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    gap: 15px;
  }
  
  /* Logo uprostřed */
  #zahlavi .logo { 
    padding: 0; 
    text-align: center; 
  }
  
  /* Navigace pod logem, uprostřed */
  #zahlavi nav { 
    justify-content: center; 
    flex: 0 0 auto;
  }
  
  /* Burger menu - bílé barvy */
  .nav_toggle { 
    background: transparent; 
  }
  .nav_toggle_bar { 
    background: rgba(255, 255, 255, 0.9); 
  }

  #services_main { gap: 15px; margin-bottom: 70px; }
  #services_main .service_box { margin-bottom: 0;  min-height: auto; }

}

@media (max-width: 576px) {
  #zahlavi .menu_wrap { gap: 12px; }
}

@media (max-width: 480px) {
  #zahlavi .menu_wrap { gap: 10px; }
}

/* ============================================
   PATIČKA - Copyright odsazení
   ============================================ */

#paticka .copyright { 
  margin-top: 30px; 
}

/* ============================================
   HP SERVICES_MAIN - Menší vertikální mezery
   ============================================ */

@media (max-width: 960px) {
  #services_main { gap: 15px; }
  #services_main .service_box { margin-bottom: 0; }
}

@media (max-width: 768px) {
  #services_main { gap: 12px; }
}

@media (max-width: 576px) {
  #services_main { gap: 10px; }
  #services_main .service_box { padding: 20px 0; }
}

@media (max-width: 480px) {
  #services_main { gap: 8px; }
  #services_main .service_box { padding: 15px 0; }
}

/* ============================================
   UTILITY - Landscape orientace na mobilech
   ============================================ */

@media (max-width: 768px) and (orientation: landscape) {
  #header.header_hp { padding: 50px 40px 60px 40px; }
  #header.header_hp span { font-size: 42px; }
  
  .next_articles.blog .vypis_box.blogmag { flex: 0 1 calc(50% - 10px); max-width: calc(50% - 10px); }
  .next_articles.blog .blog_img { aspect-ratio: 16 / 9; }
}

/* ============================================
   HOVER STATES - Disable na touch zařízeních
   ============================================ */

@media (hover: none) {
  #sluzby .sluzby_box:hover { background-color: black; }
  #sluzby .sluzby_box:hover * { color: inherit; }
  #sluzby .sluzby_box:hover .icon svg * { color: var(--blue-light); }
  #sluzby .sluzby_box:hover h3 { color: white; }
  #sluzby .sluzby_box:hover p { color: var(--shadow-light); }
}