/***********************************************************
 * responsive.css
 *
 * Responzivní vrstva pro recenze-kuchyne.cz.
 *
 * Načítá se AŽ ZA style.css a obsahuje výhradně pravidla uvnitř
 * @media (max-width: ...). Nad 1200 px se tedy neuplatní vůbec nic
 * a desktopová podoba webu zůstává beze změny.
 ***********************************************************/


/***********************************************************
 * Obecné - platí všude, kde je okno užší než 1200 px
 ***********************************************************/
@media (max-width: 1199px) {

	/* Kontejner má ve style.css natvrdo width: 1155px !important */
	.container {
		width: auto !important;
		max-width: 1155px;
		padding-left: 15px;
		padding-right: 15px;
	}

	/* Nic nesmí přetéct přes okraj obrazovky */
	img,
	video,
	iframe,
	embed,
	object {
		max-width: 100%;
		height: auto;
	}

	/* Dlouhé URL v recenzích nerozbijí layout */
	body {
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	/* .search má odsazení 45 px zleva; u sloupce se šířkou 100 %
	   to pod 1155 px vytlačilo obsah mimo obrazovku. */
	.search {
		margin-left: 0;
	}
}


/***********************************************************
 * Tablet - do 991 px
 ***********************************************************/
@media (max-width: 991px) {

	.logo {
		margin: 15px 0 30px 0;
	}

	/* Vyhledávání: pevné šířky buněk 300/530 px */
	.search {
		margin-bottom: 30px;
	}

	/* Popisek je dlouhý, takže by při automatické šířce zbylo
	   na vyhledávací pole jen ~130 px. Skládáme pod sebe. */
	.search table,
	.search tbody,
	.search tr,
	.search th,
	.search td {
		display: block;
		width: 100%;
	}

	.search th {
		text-align: left;
		padding: 0 0 6px 0;
	}

	.search td {
		padding: 0 0 10px 0;
	}

	/* Dlaždice firem měly pevných 900 px */
	ul.companies {
		width: 100%;
		text-align: center;
	}

	ul.companies li {
		margin-right: 15px;
		margin-bottom: 20px;
	}

	/* Formulář recenze - pevné šířky buněk 510/270 px */
	.review-form-container th,
	.review-form-container td,
	.review-form-container .displayname th,
	.review-form-container .displayname td {
		width: auto;
	}

	.review-form-container input,
	.review-form-container textarea,
	.review-form-container select {
		max-width: 100%;
	}

	/* Odsazení podpisu u recenze */
	.sign {
		padding-left: 15px;
	}

	/* Karty provozoven jsou ve dvou sloupcích uvnitř už tak úzkého
	   pravého sloupce - od tabletu níž dostanou celou šířku. */
	#double > li {
		width: 100%;
		height: auto;
		float: none;
	}
}


/***********************************************************
 * Telefon - do 767 px
 ***********************************************************/
@media (max-width: 767px) {

	body {
		font-size: 13px;
		/* Pozadí zůstává "cover" i na telefonu. Musí k němu zůstat
		   background-attachment: fixed - se "scroll" by se fotka
		   roztáhla přes celou výšku dokumentu (klidně 5 000 px)
		   a zbyla by z ní rozmazaná plocha. */
	}

	/**** HLAVIČKA ****/
	.logo {
		margin: 10px 0 20px 0;
		max-width: 70%;
	}

	/**** MENU ****/
	/* 4 položky se vejdou vedle sebe i na úzký displej */
	.nav {
		max-width: 100%;
		top: 0;
		padding-left: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	/* Rovnoměrné rozdělení bez ohledu na počet položek - na
	   stránkách s podmenu jich je pět, ne čtyři. */
	.nav li {
		float: none;
		flex: 1 1 0;
		min-width: 0;
		padding: 1px;
	}

	.nav li .nav-item,
	.nav li .nav-item a {
		height: 100%;
	}

	.nav a {
		width: 100%;
		height: auto;
		min-height: 82px;
		padding: 0 3px 10px 3px;
		font-size: 11px;
		line-height: 1.25;
	}

	.nav .menu-icon {
		font-size: 20px;
		padding: 14px 0 8px 0;
	}

	/**** OBSAH ****/
	/* Sloupce Bootstrapu jsou v šablonách jen jako col-xs-*,
	   takže by na mobilu zůstaly vedle sebe. Skládáme je pod sebe. */
	.container-main [class*="col-xs-"] {
		width: 100%;
		float: none;
	}

	/* Hodnocení u detailu recenze - dvojice popisek/známka
	   je čitelnější vedle sebe než pod sebou */
	.container-main .rating [class*="col-xs-"] {
		width: 50%;
		float: left;
	}

	.col-my-left,
	.col-my-right {
		width: 100%;
		float: none;
		padding-left: 0;
		padding-right: 0;
		min-height: 0;
	}

	.col-my-right {
		padding-top: 6px;
	}

	.content {
		margin-top: 20px;
		margin-bottom: 40px;
	}

	.breadcrumb .wrapper {
		font-size: 11px;
	}

	/* Zelený pruh s nadpisem má ve style.css pevných 35 px,
	   takže se druhý řádek textu ořízl. */
	.title {
		height: auto;
		min-height: 35px;
		padding-right: 15px;
		line-height: 1.3;
	}

	.title h1 {
		height: auto;
		padding-top: 8px;
		padding-bottom: 7px;
		line-height: 1.3;
	}

	/* Ikonu kreslíme jako pozadí celého pruhu, aby se odsazení
	   uplatnilo i na druhém řádku zalomeného nadpisu. */
	.title {
		padding-left: 42px;
		background-image: url('../img/icon-title.png');
		background-repeat: no-repeat;
		background-position: 15px 10px;
	}

	.title-icon {
		padding: 0;
		background-image: none;
	}

	/* Nadpis a odkaz zpět se na mobilu vedle sebe nevejdou,
	   proto je skládáme pod sebe - odkaz nad nadpis, aby zelená
	   záložka zůstala přisazená ke spodnímu borderu. */
	.breadcrumb .wrapper {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.breadcrumb .wrapper .title {
		display: block;
		width: 100%;
		margin-left: 0;
		height: auto;
		min-height: 32px;
	}

	.breadcrumb .wrapper .backlink {
		display: block;
		width: 100%;
		margin: 0 0 10px 0;
		top: 0;
		border-radius: 0;
		order: -1;   /* nad nadpis, aby zelená záložka dosedla na border */
	}

	.breadcrumb .wrapper .backlink a {
		display: inline-flex;
		padding: 0;
	}

	/* Řádek s filtry má ve style.css pevných 50 px; po zalomení
	   rozbalovacích seznamů pod sebe je potřeba víc. */
	.filters {
		height: auto;
	}

	/* Výpis provozoven: #double > li má pevných 50 % šířky a 140 px
	   výšky, takže se delší adresy překrývaly. */
	#double > li {
		width: 100%;
		height: auto;
		float: none;
		margin-bottom: 14px;
	}

	.studios ul li {
		line-height: 1.6em;
	}

	.filters .selectbox {
		margin-right: 0;
	}

	.right {
		border-left: none;
		border-top: 1px dotted #878787;
		padding-top: 15px;
		margin-top: 15px;
	}

	/**** TABULKY ****/
	.container-main table {
		max-width: 100%;
	}

	/* Formuláře jsou postavené na tabulce th=popisek / td=pole.
	   Na mobilu je čitelnější popisek nad polem než vedle něj. */
	.search table, .search tbody, .search tr, .search th, .search td,
	.review-form-container table, .review-form-container tbody,
	.review-form-container tr, .review-form-container th, .review-form-container td,
	.verification-form table, .verification-form tbody,
	.verification-form tr, .verification-form th, .verification-form td,
	.form-contact table, .form-contact tbody,
	.form-contact tr, .form-contact th, .form-contact td,
	.code-form table, .code-form tbody,
	.code-form tr, .code-form th, .code-form td {
		display: block;
		width: 100%;
	}

	.search th,
	.review-form-container th,
	.verification-form th,
	.form-contact th,
	.code-form th {
		text-align: left;
		padding: 10px 0 4px 0;
	}

	.search td,
	.review-form-container td,
	.verification-form td,
	.form-contact td,
	.code-form td {
		padding: 0 0 10px 0;
	}

	/* Odesílací tlačítka mají pevných 180 px, na což se delší
	   popisek nevešel. */
	.review-form-container input[type=submit],
	.verification-form input[type=submit],
	.form-contact input[type=submit],
	.code-form input[type=submit] {
		width: 100%;
		height: auto;
		min-height: 42px;
		padding: 10px 14px;
		white-space: normal;
		float: none;   /* jinak tlačítko vypadne z orámovaného boxu */
		margin-top: 10px;
	}

	/* Skutečné tabulky s daty se posouvají vodorovně */
	.eval-detail-window table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/**** FORMULÁŘE ****/
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="number"],
	input[type="search"],
	select,
	textarea,
	.chosen-container {
		max-width: 100% !important;
	}

	/* Cíle pro prst - iOS nezoomuje při fontu >= 16 px */
	input,
	select,
	textarea {
		font-size: 16px;
	}

	input[type="submit"],
	button,
	.btn {
		max-width: 100%;
	}

	.radiobuttons label {
		margin-right: 12px;
		display: inline-block;
	}

	/**** PATIČKA ****/
	/* Patička je mimo .container-main, sloupce se musí skládat zvlášť */
	.container-footer [class*="col-xs-"] {
		width: 100%;
		float: none;
	}

	.footer .footer-nav,
	.footer .copyright {
		text-align: center;
	}

	.footer p {
		margin: 8px 0;
	}

	/**** DLAŽDICE FIREM ****/
	/* .eval je uvnitř dlaždice pozicovaný absolutně u spodní hrany.
	   Když se název zalomí na dva řádky, texty se překryjí - proto
	   dlaždici přepínáme na flex a dole rezervujeme místo pro hodnocení. */
	ul.companies {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
		padding: 0;
	}

	ul.companies li {
		margin: 0;
		flex: 0 0 calc(50% - 5px);
		max-width: calc(50% - 5px);
	}

	ul.companies li a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: auto;
		min-height: 150px;
		padding: 16px 8px 54px 8px;
		font-size: 14px;
		line-height: 1.25;
	}

	.eval {
		bottom: 12px;
		padding: 0 6px;
		line-height: 1.3;
	}
}


/***********************************************************
 * Malý telefon - do 480 px
 ***********************************************************/
@media (max-width: 480px) {

	.logo {
		max-width: 85%;
	}

	.nav a {
		min-height: 74px;
		font-size: 10px;
		padding: 0 2px 8px 2px;
	}

	.nav .menu-icon {
		font-size: 17px;
		padding: 11px 0 6px 0;
	}

	/* Na nejužších displejích i hodnocení pod sebe */
	.container-main .rating [class*="col-xs-"] {
		width: 100%;
		float: none;
	}

	ul.companies li a {
		min-height: 140px;
		font-size: 13px;
		padding: 14px 6px 52px 6px;
	}

	.paginator {
		margin-right: 0;
	}
}