/*
 * Základ responzivní verze.
 * Načítá se jen na obrazovkách do 1000 px (viz _top.php, atribut media),
 * takže desktopový vzhled zůstává beze změny.
 * Pořadí na mobilu: hlavička, menu, obsah, patička.
 */

html, body { height: auto; }
body { font-size: 0.95em; }
img { max-width: 100%; height: auto; }

h1 { font-size: 2.2em; }
h2 { font-size: 1.7em; }

/* --- rámec stránky --- */
div.bckPage { background: none; }
div#page {
	width: auto; max-width: 972px; background: none;
	display: flex; flex-direction: column;
}

/* --- hlavička: logo, telefon, fotka --- */
div#top, body#sub div#top {
	order: 1; height: auto; padding: 10px 0 0;
	display: flex; flex-direction: column; align-items: center; text-align: center;
}
div#top a#logo { position: relative; left: auto; top: auto; z-index: 6; order: 1; display: block; max-width: 100%; }
div#top p { display: none; }   /* telefon je v patičce */
div#top div#flimg, body#sub div#top div#flimg {
	position: static; order: 3; width: 100%; max-width: none; height: auto; background: none;
}
/* Fotky střídá skript (js/run.js): pozadí #flash + obrázek, který se skrývá a plynule objevuje.
   Rámeček má pevný poměr stran (přes padding), takže výška při animaci neskáče.
   !important kvůli inline stylu, který skript nastavuje. */
/* fotky začínají pod logem, logo je částečně překrývá */
div#top div#flimg, body#sub div#top div#flimg { position: relative; left: auto; top: auto; margin-top: -80px; }
div#top div#flash, body#sub div#top div#flash {
	position: relative; left: auto; top: auto; width: 100%; height: 0; padding-bottom: 63.17%;   /* 338 / 535 */
	background-size: contain !important; background-repeat: no-repeat !important;
	background-position: center top !important;
}
body#sub div#top div#flash { padding-bottom: 31.84%; }                  /* 199 / 625 */
div#top div#flash > img, body#sub div#top div#flash > img {
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
}
/* Nápis "výroba slaměných kruhů" (img/fake.png) přes spodek fotky */
div#top div#flimg::after {
	content: ""; position: absolute; z-index: 5; left: 15%; bottom: 4%;
	width: 70%; height: 0; padding-bottom: 11.4%;                          /* 73 / 448 * 70 % */
	background: url(../img/fake.png) center / contain no-repeat;
}
div#top div#flash span, body#sub div#top div#flash span { display: none; }

/* --- menu: pruh pod hlavičkou, položky se zalamují --- */
div#menu, body#sub div#menu {
	order: 2; position: static; top: auto; width: auto; height: auto;
	background: #6b3c00;
}
div#h3 { display: none; }
div#menu ul {
	margin: 0; padding: 0; font-size: 15px;
	display: flex; flex-wrap: wrap;
}
div#menu ul li {
	float: none; flex: 1 1 28%; box-sizing: border-box;
	margin: 0; padding: 0; background: none; text-align: center;
	border-bottom: 1px solid #4a2a00;
}
div#menu ul li a { display: block; padding: 12px 6px; }
div#menu ul li.active { background: #faf3e6; }
div#menu ul li.active a { background: none; }

/* Úvod jako ikona domečku (jen na mobilu); první řádek: domeček, Nabídka, Foto, Ceník */
div#menu ul li.first { flex: 0 0 14%; }
div#menu ul li.first a {
	display: block; height: 42px; padding: 0; font-size: 0; line-height: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f3e0be' d='M12 3 1.5 12.5H5V21h5.5v-5.5h3V21H19v-8.5h3.5z'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}
div#menu ul li.first.active a {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23552f00' d='M12 3 1.5 12.5H5V21h5.5v-5.5h3V21H19v-8.5h3.5z'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}

/* --- obsah --- */
div#cnt { order: 3; padding: 15px 10px 0; min-height: 0; background: #faf3e6; }
div#left { float: none; width: auto; background: none; }
div#left div.in { min-height: 0; padding: 0 5px 20px; }

/* --- patička: pozadí img/footer-bck-mobile.png, text posunutý pod okraj papíru --- */
div#footer {
	order: 4; height: auto; box-sizing: border-box;
	padding: calc(8.4vw + 10px) 15px 25px;          /* 8,4 vw = výška obrázku (53/632) při šířce okna */
	background: #6b3c00 url(../img/footer-bck-mobile.png) left top / 100% auto no-repeat;
	text-align: center;
}
div#footer p { padding: 0; margin: 6px 0; }
div#footer p#sympact { float: none; }

/* --- tabulky a formuláře --- */
table { max-width: 100%; }
table th, table td { padding-left: 6px; padding-right: 6px; }
table.cenik, div.row table { width: 100%; }
table.cenik td:first-child strong { white-space: nowrap; }
table td.poptavka { display: none; }   /* boční poznámka o zasílání, na mobilu se nevejde */

div.row { float: none; }
div.row.r2 { margin-left: 0 !important; }
div.row.r2 table td input { width: 100%; max-width: 220px; box-sizing: border-box; }
div.row.r2 table td input.btn { width: auto; max-width: none; }
div.row.r2 table td textarea { width: 100%; box-sizing: border-box; height: 117px; }

/* --- kontakt: mapa pod text --- */
div#mapa { float: none; }
div#sznmapa { width: auto !important; max-width: 350px; }
div#sznmapa iframe { width: 100%; }

/* --- galerie --- */
ul.gallery li { float: none; width: auto; min-height: 0; }
table.gallery { margin: 20px 0; }
div.gallery { margin: 10px 0; }
div.gallery img { width: 45%; max-width: 230px; height: auto; }