/* ==========================================================================
   Responsive overrides for Status Praesents
   Bezpečné dolaďovací vrstvy nad style.css / grid_12.css / slider.css.
   Načítá se v _header.php JAKO POSLEDNÍ, aby přepsalo pevné px-rozměry.

   Breakpointy:
     desktop:     >= 1260 px  (původní 1260px layout zachován 1:1)
     "úzký desktop" / tablet: 768 - 1259 px
     mobil:       <= 767 px
     malý mobil:  <= 480 px

   Pozn.: Původní layout používal pevnou šířku 1260 px (body min-width,
   header div, slider). Cokoli pod 1260 px nezvládl bez horizontálního
   scrollu, proto je hranice "non-desktop" nastavena na 1259 px.
   ========================================================================== */

/* ---------- Global: žádný horizontální scroll, lepší box-model ------------ */
*, *::before, *::after { box-sizing: border-box; }

html, body { overflow-x: hidden; max-width: 100%; }

/* Žádný pevný spodní limit šířky – povolí stránce zužování */
body { min-width: 0; }

/* Globálně responzivní obsahové obrázky.
   Slider je řešen samostatně níže (kvůli inline stylům z TMS pluginu). */
img, video, iframe, embed, object { max-width: 100%; height: auto; }

/* Dlouhé URL a slova ve všech textových blocích nesmí přetékat. */
p, h1, h2, h3, h4, li, a, td, .popis, .koncert, .podpis {
	overflow-wrap: anywhere;
	word-break: break-word;
}


/* ==========================================================================
   ÚZKÝ DESKTOP + TABLET + MOBIL (do 1259 px)
   Cokoli pod 1260 px nezvládne původní pevný layout → fluid pravidla.
   ========================================================================== */
@media (max-width: 1259px) {

	/* Hlavní kontejnery: 100 % šířky s rozumným paddingem */
	.main { width: 100%; }

	header > div {
		width: 100%;
		max-width: 1260px;
		padding: 0 16px;
	}

	#content,
	.container_12 {
		width: 100%;
		max-width: 1000px;
		padding: 0 16px;
	}

	/* Background image (bgr.jpg) – ponecháme PŮVODNÍ velikost (auto),
	   aby textura nebyla rozmazaná zvětšením přes cover. Měníme jen
	   `attachment` na `scroll`, protože `fixed` má na iOS Safari známé
	   problémy s výkonem a rendrováním. */
	body { background-attachment: scroll; }

	/* ---------- SLIDER ---------- */
	/* TMS plugin nastavuje slideru inline rozměry podle přirozené velikosti
	   obrázků (1260 × 597), uvnitř absolutně pozicované vrstvy. Na úzkém
	   viewportu by se obraz buď ořízl (#slide má overflow: hidden), nebo
	   roztáhl skrz layout. Slider je čistě dekorativní hero, proto ho pod
	   1260 px skrýváme – atmosféra webu je zachována pozadím (bgr.jpg) a
	   logem, layout zůstává čistý a bez horizontálního scrollu. */
	#slide { display: none !important; }

	/* ---------- HEADER LOGO + NAV ---------- */
	/* Logo a navigace byly v originálu absolutně pozicované nad sliderem.
	   Bez slideru je vyložíme staticky pod sebe. */
	header h1 {
		position: static;
		left: auto;
		top: auto;
		display: block;
		text-align: center;
		padding: 16px 0 8px;
		margin: 0;
	}
	header h1 img {
		display: inline-block;
		max-width: 100%;
		max-height: 160px;
		height: auto;
		width: auto;
	}

	header nav {
		position: static;
		left: auto;
		bottom: auto;
		display: block;
		background: rgba(0, 0, 0, 0.6);
		margin: 0 auto;
	}

	/* Menu – flex-wrap, větší klikací plocha */
	ul.menu {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	ul.menu li {
		float: none;
		line-height: normal;
		margin: 0;
	}
	ul.menu li a {
		display: block;
		padding: 14px 22px;
		font-size: 19px;
		line-height: 22px;
		min-height: 48px;
	}

	/* ---------- GRID 12 → 1 sloupec ---------- */
	.container_12 .grid_8,
	.container_12 .grid_4 {
		float: none;
		display: block;
		width: 100%;
		margin: 0 0 24px 0;
		left: auto;
	}

	/* ---------- DISCOGRAPHY ---------- */
	/* Lists-1 (obal+popis) a lists-2 (tracklist) stack do jednoho sloupce,
	   ale obrázek alba má jiné chování na tabletu vs. mobilu (viz níže). */
	.lists-1,
	.lists-2 {
		float: none;
		width: 100%;
		margin: 0 0 12px 0;
	}
	.lists-2 ul {
		float: none;
		margin-right: 0;
	}
	ul.list li { width: auto; }

	/* Tablet (768–1259 px): obal alba obtéká text vlevo, max ~260 px.
	   Specifický selektor `.lists-1 .img-indent` cíleně netrefuje news. */
	.lists-1 .img-indent,
	.lists-1 .img-indent-2 {
		float: left;
		width: auto;
		max-width: 40%;
		height: auto;
		margin: 4px 20px 16px 0;
		image-rendering: -webkit-optimize-contrast;
	}

	/* ---------- TOURDATES ---------- */
	.datum,
	.akce {
		float: none;
		width: 100%;
	}
	.koncert,
	.popis {
		padding-left: 0;
	}

	/* ---------- E-SHOP ---------- */
	/* Tablet / úzký desktop: ponecháváme 3 sloupce (jako originál),
	   aby skupiny po 3 produktech (`<div>+<div>+<div class="last">`)
	   vždy vyplnily celý řádek a nezbýval prázdný slot vpravo. */
	.block-1 {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		align-items: flex-start;
	}
	.block-1 > div {
		float: none;
		width: calc(33.333% - 14px);
		margin: 0;
	}
	.block-1 > div img,
	.block-1 > div a > img {
		display: block;
		width: 100%;
		height: auto;
		image-rendering: -webkit-optimize-contrast;
	}

	/* ---------- NEWS – malý obrázek odsazený od textu ---------- */
	.img-indent,
	.img-indent-2 {
		max-width: 40%;
		margin-right: 16px;
		margin-bottom: 12px;
		height: auto;
	}

	/* ---------- FOOTER PARTNEŘI + PROFILY ---------- */
	footer {
		padding: 20px 16px 0;
	}
	footer a {
		display: inline-block;
		padding: 8px;
	}
	footer img {
		vertical-align: middle;
		max-width: 100%;
		height: auto;
	}

	.left-1 a img {
		padding: 6px 8px;
		max-width: 100%;
		height: auto;
	}

	/* ---------- DOWNLOAD FORM ---------- */
	.form-1 input,
	.form-1 > a.button {
		float: none;
		width: 100%;
		max-width: 320px;
		display: block;
	}
}


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

	body { font-size: 15px; line-height: 22px; }

	header > div { padding: 0 12px; }
	#content,
	.container_12 { padding: 0 12px; }

	/* Menu jako svislé tlačítkové */
	header nav { width: 100%; background: rgba(0, 0, 0, 0.55); }
	ul.menu {
		flex-direction: column;
		align-items: stretch;
	}
	ul.menu li {
		width: 100%;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}
	ul.menu li:last-child { border-bottom: 0; }
	ul.menu li a {
		text-align: center;
		padding: 16px 18px;
		font-size: 18px;
		line-height: 22px;
		min-height: 48px;
	}

	header h1 img { max-width: 80%; }

	/* Typografie */
	h2 { font-size: 22px; line-height: 30px; letter-spacing: 0; }
	h3 { font-size: 16px; line-height: 22px; }
	.news,
	.datum {
		font-size: 20px;
		line-height: 30px;
		letter-spacing: 0;
	}

	/* News – obrázek na samostatný řádek, ale NEROZTAHOVAT za přirozenou
	   velikost (náhledy news/th/* jsou typicky ~200–300 px – stretchnutím
	   by se rozmazaly). Pokud uživatel chce HD, klikne pro lightbox. */
	.img-indent,
	.img-indent-2 {
		float: none;
		display: block;
		max-width: 100%;
		width: auto;
		height: auto;
		margin: 0 0 12px 0;
		image-rendering: -webkit-optimize-contrast;
	}

	/* Discography – VARIANTA C (mobil): obal alba 80 % šířky, vycentrovaný,
	   popis a tracklist pod ním. Přepisuje tabletové float-left chování. */
	.lists-1 a {
		display: block;
		text-align: center;
	}
	.lists-1 .img-indent,
	.lists-1 .img-indent-2 {
		float: none;
		display: block;
		width: 80%;
		max-width: 100%;
		height: auto;
		margin: 0 auto 16px;
	}

	/* E-shop produkty na mobilu: 1 sloupec přes celou šířku. */
	.block-1 { gap: 18px; }
	.block-1 > div { width: 100%; }

	/* Zmírnit velké top-marginy z helperů */
	.top-1 { margin-top: 24px; }
	.top-2 { margin-top: 20px; }
	.top-3 { margin-top: 18px; }
	.top-4 { margin-top: 14px; }

	/* Pravý sloupec (kontakty, akce) bez vnitřního paddingu */
	.left-1 { padding-left: 0; padding-right: 0; }

	/* Footer + profily */
	footer { padding: 16px 12px 0; margin-top: 20px; }
	footer a { padding: 6px; }
	footer img { max-height: 56px; width: auto; }

	/* ---------- ACTION DOWNLOAD (Ready to fly) ---------- */
	/* Obal alba na celou šířku červeného panelu, vycentrovaný.
	   Selektor s `.action_download` má vyšší specificitu než obecné
	   `.img-indent` pravidlo výše. */
	.action_download {
		padding: 14px;
		box-sizing: border-box;
	}
	.action_download .img-indent,
	.action_download img {
		float: none;
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
		margin: 0 auto 12px auto;
	}

	/* ---------- OTHER PROFILES ---------- */
	/* Každé logo na vlastním řádku, vycentrované, výrazně větší klikací plocha. */
	.left-1 > a {
		display: block;
		width: 100%;
		text-align: center;
		padding: 10px 8px;
		margin: 0 0 6px 0;
		box-sizing: border-box;
	}
	.left-1 > a > img,
	.left-1 a img.p4 {
		display: inline-block;
		width: auto;
		height: auto;
		max-width: 80%;
		max-height: 70px;
		padding: 0;
	}

	.podpis {
		font-size: 12px;
		line-height: 18px;
		padding: 10px 12px;
		margin-top: 24px;
	}
}


/* ==========================================================================
   MALÝ MOBIL (do 480 px)
   ========================================================================== */
@media (max-width: 480px) {

	body { font-size: 14px; line-height: 21px; }

	header > div { padding: 0 8px; }
	#content,
	.container_12 { padding: 0 8px; }

	ul.menu li a {
		padding: 14px 12px;
		font-size: 17px;
	}

	header h1 img { max-width: 90%; }

	h2 { font-size: 20px; line-height: 28px; }
	.news,
	.datum {
		font-size: 18px;
		line-height: 26px;
	}

	footer img { max-height: 44px; }
	.left-1 > a > img,
	.left-1 a img.p4 { max-height: 56px; }

	.podpis { font-size: 11px; line-height: 17px; }
}


/* ==========================================================================
   Drobné pojistky platné na všech šířkách
   ========================================================================== */

/* Pojistka pro absolutně pozicované šipky slideru, kdyby slider zůstal
   omylem viditelný – nesmí přesahovat. */
.prev, .next, .prev2, .next2 {
	max-width: 100%;
}

/* Pojistka pro veškeré obrázky uvnitř obsahu (news/discography/eshop). */
.wrap img,
.line-1 img,
.block-1 img {
	max-width: 100%;
	height: auto;
}

/* Patička (.podpis) – sjednocení vertikálního zarovnání odkazů.
   reset.css globálně nastavuje `<a> { vertical-align: top }`, což v patičce
   způsobuje pixelový offset linků `bybady` a `Nauti.X` proti okolnímu textu.
   Vrátíme jim baseline a zároveň schováme prázdné honeypot anchory
   s HTML komentáři uvnitř (zůstanou v DOM, jen se nerenderují). */
.podpis a {
	vertical-align: baseline;
}
.podpis a:empty {
	display: none;
}

/* ColorBox lightbox – nesmí přesahovat viewport (záchranná síť k JS optionům). */
#colorbox,
#cboxWrapper {
	max-width: 100vw !important;
	max-height: 100vh !important;
}
.cboxPhoto {
	max-width: 100% !important;
	height: auto !important;
}