/* 

// Created :: 2025-02-23
// Updated :: 2026-02-21

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

*/

/* ============================================
   BURGER MENU - Desktop (nad 1200px)
   ============================================ */

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

/* ============================================
   BREAKPOINT: 1200px - Velké tablety / Malé desktopy
   + Aktivace burger menu + vertikální layout záhlaví
   ============================================ */

@media (max-width: 1200px) {

	/* BURGER MENU - aktivace */
	.nav_toggle { display: block; }
	#menu { display: none; }

	/* ZÁHLAVÍ - vertikální layout */
	#zahlavi .menu_wrap { flex-direction: column; align-items: center; justify-content: center; gap: 25px; }
	#zahlavi .logo { padding: 0; text-align: center; }
	#zahlavi nav { justify-content: center; flex: 0 0 auto; }
	.nav_toggle { background: transparent; }
	.nav_toggle_bar { background: rgba(255, 255, 255, 0.9); }

	/* HP :: HEADER */
	#header.header_hp { padding: 100px 50px 110px 50px;  }
	#_header.header_hp_xx span { font-size: 80px; }

	/* HP :: SERVICES_MAIN */
	#_services_main_ori_ { gap: 50px; padding: 0px 100px 100px 100px; display: flex; box-sizing: border-box; }
	#services_main { padding: 0px 50px 100px 50px; }

	/* HP :: ABOUT US */
	#aboutus_hp_ori { padding: 0px 100px 100px 100px; box-sizing: border-box; }
	#aboutus_hp { padding: 0px 50px 100px 50px; }
	#aboutus_hp .aboutus_left  { flex: 0 0 40%; }
	#aboutus_hp .aboutus_right { flex: 0 0 60%; }
	#aboutus_hp .aboutus_wrap { gap: 50px; }
	#aboutus_hp .aboutus_stats { gap: 50px; }

	/* HTML :: ABOUT US */
	#aboutus { padding: 0px 50px 100px 50px; }
	#aboutus .aboutus_left  { flex: 0 0 40%; }
	#aboutus .aboutus_right { flex: 0 0 60%; }
	#aboutus .aboutus_wrap { gap: 50px; }
	#aboutus .aboutus_stats { gap: 50px; }

	/* FAV SERVICES */
	.fav_services { padding-left: 50px; padding-right: 50px; }

	/* BLOG */
	.next_articles.blog { padding-left: 50px; padding-right: 50px; }

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

	/* HTML KONTAKTY */
	#html_kontakty { padding-left: 50px; padding-right: 50px; }

	/* HTML KONTAKTY ZAJEM */
	#html_kontakty_zajem { padding-left: 50px; padding-right: 50px; }
	#_html_kontakty_zajem_ h3 { font-size: 34px; }

	/* CENIK */
	#cenik_hlavni { padding-left: 50px; padding-right: 50px; }

	/* SLUZBY */
	.sluzby { padding-left: 50px; padding-right: 50px; }

	/* OBSAH */
	.obsah.obsah_zahlavi { padding-left: 50px; padding-right: 50px; }
	.obsah.obsah_uvod { padding-left: 50px; padding-right: 50px; }

	/* 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 */
	h1x { font-size: 55px; }

}


/* ============================================
   BREAKPOINT: 960px - Tablety
   ============================================ */

@media (max-width: 960px) {

	#aboutus_hp .aboutus_wrap { flex-direction: column; gap: 50px; }
	#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: 25px; }

	#aboutus { margin-bottom: 0px; }
	#aboutus .aboutus_wrap { flex-direction: column; gap: 50px; }
	#aboutus .aboutus_left { width: 100%; }
	#aboutus .aboutus_left img { width: 100%; max-width: 600px; margin: 0 auto; }
	#aboutus .aboutus_right { padding-top: 25px; }

	/* CENIK */
	#cenik_hlavni .cenik_box { flex: 1 1 calc(50% - 15px); }

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

	.obsah.obsah_detail.blogmag { padding-left: 50px; padding-right: 50px; }
	.obsah.obsah_detail.blogmag .tinymce { }
	.tinymce.text { }

	#paticka { padding: 0px 0px 0px 0px; }
	#paticka .paticka_wrap { flex-direction: column; }
	#paticka .paticka_left, #paticka .paticka_right { flex: 1 1 100%; }
	#paticka .paticka_left { padding: 100px 50px; 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: 100px 50px 50px 50px; }
	#paticka .columns { gap: 40px; }
	#paticka .column ul { margin-bottom: 40px; }
	#paticka .column h4 { padding-bottom: 30px; }
	#paticka .copyright { margin-top: 30px; }
}


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

@media (max-width: 768px) {



}


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

@media (max-width: 576px) {


	.breadcrumb { display: none }

	/* BURGER MENU - aktivace */
	.nav_toggle { display: block; }
	#menu { display: none; }
	#zahlavi .logo img { max-width: 90%; margin-left: auto; margin-right: auto; }

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

	/* HP :: SERVICES_MAIN */
	#services_main { padding-left: 20px; padding-right: 20px; flex-direction: column; }

	/* HP :: ABOUT US */
	#aboutus_hp { padding-left: 20px; padding-right: 20px; }
	#aboutus_hp .aboutus_wrap { flex-direction: column; gap: 40px; }
	#aboutus_hp .aboutus_right { padding-top: 0; }
	#aboutus_hp .aboutus_left img { width: 100%; }
	#aboutus_hp .aboutus_stats { flex-direction: column; gap: 30px; }

	/* HTML :: ABOUT US */
	#aboutus { padding: 0px 20px 100px 20px; }
	#aboutus .aboutus_left  { flex: 0 0 40%; }
	#aboutus .aboutus_right { flex: 0 0 60%; }
	#aboutus .aboutus_wrap { gap: 50px; }
	#aboutus .aboutus_stats { gap: 50px; }

	/* FAV SERVICES */
	.fav_services { padding-left: 20px; padding-right: 20px; }
	._fav_services .services_box { flex-direction: column; align-items: flex-start; }

	/* BLOG */
	.next_articles.blog { padding-left: 20px; padding-right: 20px; }

	/* BLOG */
	.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 .paticka_left  { flex: 0 0 40%; }
	#_paticka .paticka_right { flex: 0 0 60%; }
	#_paticka .paticka_left { padding: 80px 60px; }
	#_paticka .paticka_left h2 { font-size: 50px; }
	#_paticka .paticka_right { padding: 150px 40px 30px 80px; }
	#paticka .columns { flex-direction: column; gap: 30px; }
  	#paticka .column { flex: 1 1 100%; }

	/* HTML KONTAKTY */
	#html_kontakty { padding-left: 20px; padding-right: 20px; }

	/* HTML KONTAKTY ZAJEM */
	#_html_kontakty_zajem { padding-left: 50px; padding-right: 50px; }
	#__html_kontakty_zajem_ h3 { font-size: 34px; }

	#_html_kontakty_zajem { padding: 60px 40px; flex-direction: column; gap: 40px; }
	#html_kontakty_zajem { flex-direction: column; gap: 40px; padding-left: 20px; padding-right: 20px; }
	#html_kontakty_zajem .container_obsah { flex: 1 1 100%; }
	#html_kontakty_zajem .container_obrazek { flex: 1 1 100%; }

	/* CENIK */
	#cenik_hlavni { padding-left: 20px; padding-right: 20px; }
	#cenik_hlavni .cenik_box { flex: 1 1 100%; }

	/* SLUZBY */
	.sluzby { padding-left: 20px; padding-right: 20px; }
	.sluzby .sluzby_box { flex: 1 1 100%; }

	/* OBSAH */
	.obsah.obsah_zahlavi { padding-left: 20px; padding-right: 20px; }
	.obsah.obsah_uvod { padding-left: 0px; padding-right: 0px; }
    .obsah.obsah_uvod.blogmag .tinymce { max-width: none; padding-left: 20px; padding-right: 20px; }
    .obsah.obsah_detail.blogmag { padding-left: 20px; padding-right: 20px; }

	.tinymce.text h2, .tinymce.text p { padding-left: 0px; padding-right: 00px; }
	.tinymce.text ul { margin-left: 16px; }

	.tinymce table.reference { display: block; }
	.tinymce table.reference tbody { display: block; }
	.tinymce table.reference tr:first-child { display: none; }
	.tinymce table.reference tr { display: block; margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid rgba(255,255,255,0.1); }
	.tinymce table.reference td { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; gap: 20px; }
	.tinymce table.reference td::before { content: attr(data-label); font-weight: 600; flex-shrink: 0; }
	.tinymce table.reference td:last-child { white-space: normal; width: 100%; }

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

	.obsah_uvod #sitemap { padding-left: 20px; padding-right: 20px; }

}



/* ============================================
   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); }
}