/* ---------------------------------------------------------------------------
   KWAVE — layout: obal, hlavička, mobilní menu, mřížky, patička
   Mobil je základ, desktop se přidává v media query (ne naopak).
   --------------------------------------------------------------------------- */

.kw-wrap {
	width: 100%;
	max-width: var(--kw-max);
	margin: 0 auto;
	padding-inline: var(--kw-gutter);
}

@media (min-width: 768px)  { .kw-wrap { padding-inline: var(--kw-space-24); } }
@media (min-width: 1024px) { .kw-wrap { padding-inline: var(--kw-space-32); } }

.kw-section { margin-block: var(--kw-space-40); }
.kw-section:first-of-type { margin-top: var(--kw-space-32); }
@media (min-width: 1024px) { .kw-section { margin-block: var(--kw-space-48); } }

/* Hlavička homepage: název magazínu vlevo, vydání dne vpravo. Drobný pás,
   který stránce dává datum a zároveň nese povinné H1. */
.kw-home-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--kw-space-16);
	flex-wrap: wrap;
	margin: var(--kw-space-24) 0 var(--kw-space-16);
	padding-bottom: var(--kw-space-3);
	border-bottom: 1px solid var(--kw-line);
}

.kw-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--kw-space-16);
	margin-bottom: var(--kw-space-20);
}

/* Nadpis sekce je v předloze velký a těžký, bez linky pod sebou. */
.kw-section-head h2 {
	margin: 0;
	font-size: var(--kw-section);
	font-weight: 800;
	letter-spacing: -0.025em;
}

.kw-section-head .kw-more {
	display: inline-flex;
	align-items: center;
	gap: var(--kw-space-3);
	font-size: var(--kw-text-sm);
	font-weight: 600;
	white-space: nowrap;
	color: var(--kw-accent);
	text-decoration: none;
}
.kw-section-head .kw-more:hover { text-decoration: underline; }

/* Hlavička ----------------------------------------------------------------
   Dvě řady podle předlohy: nahoře značka, hledání, sítě a CTA; pod tím pás rubrik. */

.kw-header {
	border-bottom: 1px solid var(--kw-line);
	background: var(--kw-bg);
}

.kw-header__top {
	display: flex;
	align-items: center;
	gap: var(--kw-space-16);
	min-height: 72px;
	padding-block: var(--kw-space-4);
}

.kw-logo {
	display: grid;
	justify-items: start;
	gap: 2px;
	text-decoration: none;
	color: var(--kw-text);
	flex: 0 0 auto;
}
.kw-logo__mark { font-size: 1.5rem; }
@media (min-width: 768px) { .kw-logo__mark { font-size: 1.875rem; } }

.kw-logo__claim {
	font-size: 0.5625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kw-text-faint);
	white-space: nowrap;
}
@media (min-width: 768px) { .kw-logo__claim { font-size: 0.625rem; } }

/* Hledání je uprostřed a roztahuje se; sítě a CTA drží u pravého okraje. */
.kw-header__search { flex: 1 1 auto; min-width: 0; max-width: 420px; margin-inline: auto; }
@media (max-width: 899px) { .kw-header__search { max-width: none; } }

.kw-social {
	display: none;
	align-items: center;
	gap: var(--kw-space-4);
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
}
@media (min-width: 1100px) { .kw-social { display: flex; } }
.kw-social a { display: grid; place-items: center; width: 32px; height: 32px; color: var(--kw-text); }
.kw-social a:hover { color: var(--kw-accent); }
.kw-social .kw-icon { width: 20px; height: 20px; }

.kw-header__cta { flex: 0 0 auto; display: none; }
@media (min-width: 1024px) { .kw-header__cta { display: inline-flex; } }

/* Vyhledávání: prostý GET formulář, funguje bez jediného řádku JS */
.kw-search {
	display: flex;
	align-items: center;
	gap: var(--kw-space-3);
	border: 1px solid transparent;
	border-radius: var(--kw-radius-pill);
	padding: var(--kw-space-2) var(--kw-space-16);
	background: #f2f2f5;
	transition: border-color var(--kw-transition), background var(--kw-transition);
}
.kw-search:focus-within { border-color: var(--kw-accent); background: var(--kw-bg); }
.kw-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: var(--kw-text-sm);
	padding: var(--kw-space-3) 0;
	color: var(--kw-text);
}
.kw-search input[type="search"]:focus { outline: none; }
.kw-search input[type="search"]::placeholder { color: var(--kw-text-faint); }

/* Lupa je součást pole, ne barevné tlačítko (mockup ji má jako tenkou ikonu vpravo). */
.kw-search button {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	color: var(--kw-text-soft);
	width: 28px; height: 28px;
	display: grid; place-items: center;
	cursor: pointer;
	padding: 0;
}
.kw-search button:hover { color: var(--kw-accent); }
.kw-search .kw-icon { width: 18px; height: 18px; }

/* Hlavní navigace ---------------------------------------------------------
   Na mobilu vodorovný rolovatelný pás, na desktopu řada. Deset položek se na tablet
   nevejde, proto pás zůstává. Bez jediného řádku JavaScriptu. */

.kw-nav {
	border-top: 1px solid var(--kw-line);
	background: var(--kw-bg-nav);
	position: relative;
}

/* Náznak, že se pás dá posouvat do strany. */
.kw-nav::after {
	content: "";
	position: absolute;
	inset: 0 0 0 auto;
	width: 32px;
	pointer-events: none;
	background: linear-gradient(to right, rgb(251 251 253 / 0%), var(--kw-bg-nav) 80%);
}
@media (min-width: 1200px) { .kw-nav::after { display: none; } }

.kw-nav__inner {
	overflow-x: auto;
	overflow-y: visible;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.kw-nav__inner::-webkit-scrollbar { display: none; }

.kw-nav__list {
	display: flex;
	align-items: stretch;
	gap: var(--kw-space-24);
	list-style: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}
@media (min-width: 1200px) { .kw-nav__list { justify-content: space-between; gap: var(--kw-space-16); } }

.kw-nav__list > li { position: relative; margin: 0; }

.kw-nav__list > li > a {
	display: flex;
	align-items: center;
	gap: var(--kw-space-3);
	padding: var(--kw-space-4) 0;
	color: var(--kw-text);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-bottom: 2px solid transparent;
	min-height: 44px; /* dotyková plocha */
}
.kw-nav__list > li > a:hover,
.kw-nav__list > .current-menu-item > a {
	color: var(--kw-accent-dark);
	border-bottom-color: var(--kw-accent);
}

/* Šipka u položky s podrubrikami */
.kw-nav__caret {
	width: 0; height: 0;
	border-inline: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: 0.55;
}

/* Rozbalovací nabídka: jen CSS. Rodičovská položka zůstává odkazem, takže na dotyku
   se nejdřív otevře rubrika — nabídka je zkratka navíc, ne jediná cesta. */
.kw-nav__sub {
	position: absolute;
	top: 100%;
	left: calc(var(--kw-space-16) * -1);
	z-index: 30;
	min-width: 200px;
	margin: 0;
	padding: var(--kw-space-3);
	list-style: none;
	background: var(--kw-bg);
	border: 1px solid var(--kw-line);
	border-radius: var(--kw-radius-sm);
	box-shadow: var(--kw-shadow-card);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--kw-transition), transform var(--kw-transition), visibility var(--kw-transition);
}
.kw-nav__has-sub:hover > .kw-nav__sub,
.kw-nav__has-sub:focus-within > .kw-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.kw-nav__sub li { margin: 0; }
.kw-nav__sub a {
	display: block;
	padding: var(--kw-space-3) var(--kw-space-4);
	border-radius: var(--kw-radius-sm);
	color: var(--kw-text);
	text-decoration: none;
	font-size: var(--kw-text-sm);
	font-weight: 600;
	white-space: nowrap;
}
.kw-nav__sub a:hover { background: var(--kw-bg-soft); color: var(--kw-accent-dark); }

/* Na úzkém pásu se nabídka rozbalit nedá (rolovalo by to) — položka vede na rubriku. */
@media (max-width: 1199px) {
	.kw-nav__sub { display: none; }
}

/* Hero (hlavní zprávy) ----------------------------------------------------
   Poměr podle předlohy: 573 : 391 px při obsahu 979 px, tedy 58,5 % / 40 %
   s mezerou 1,5 %. Fotka 3:2 vlevo vychází výškou zhruba na tři zprávy vpravo. */

.kw-hero { display: grid; gap: var(--kw-space-20); }

@media (min-width: 900px) {
	.kw-hero {
		grid-template-columns: minmax(0, 1.465fr) minmax(0, 1fr);
		align-items: stretch;
	}

	.kw-hero__main { height: 100%; }
	.kw-hero .kw-hero__link,
	.kw-hero .kw-hero__media,
	.kw-hero .kw-hero__media > .kw-figure { height: 100%; }
	.kw-hero .kw-hero__media > .kw-figure { aspect-ratio: auto; min-height: 380px; }
}

/* Bez dvou vedlejších zpráv se hero roztáhne přes celou šířku. */
.kw-hero--solo { grid-template-columns: minmax(0, 1fr); }

.kw-hero__side {
	display: grid;
	gap: var(--kw-space-16);
	align-content: space-between;
}

/* Mřížka článků ----------------------------------------------------------- */

.kw-grid {
	display: grid;
	gap: var(--kw-space-20);
	grid-template-columns: 1fr;
}
/* Mobil 1 sloupec, tablet 2, desktop 4 — přesně jak má magazínová mřížka vypadat. */
@media (min-width: 600px)  { .kw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kw-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .kw-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 600px)  { .kw-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Dva sloupce pro kalendáře */
.kw-cols-2 { display: grid; gap: var(--kw-space-20); }
@media (min-width: 900px) { .kw-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Řádek kalendářů a promo (homepage) --------------------------------------
   Podle předlohy tři karty: dva kalendáře a užší promo dlaždice. */

.kw-kalendar-row { display: grid; gap: var(--kw-space-20); }
@media (min-width: 900px) {
	.kw-kalendar-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.07fr) minmax(0, 0.68fr); align-items: stretch; }
	/* Bez promo dlaždice se třetí sloupec nesmí jen tak nechat prázdný —
	   karty by zůstaly zbytečně úzké a vedle nich by zela díra. */
	.kw-kalendar-row--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.07fr); }
}

/* Rozcestníkové dlaždice pod profily skupin */
.kw-tiles { display: grid; gap: var(--kw-space-20); }
@media (min-width: 768px) { .kw-tiles { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }

/* Detail článku: text + sidebar ------------------------------------------- */

.kw-single { display: grid; gap: var(--kw-space-32); }

@media (min-width: 1024px) {
	.kw-single {
		grid-template-columns: minmax(0, 1fr) var(--kw-sidebar);
		gap: var(--kw-space-48);
		align-items: start;
	}
}

.kw-single__main { min-width: 0; max-width: var(--kw-article-max); }
.kw-single__main--wide { max-width: none; }

/* Sidebar je na mobilu až za článkem a nic nepřekrývá — žádné sticky prvky. */
.kw-sidebar { min-width: 0; display: grid; gap: var(--kw-space-32); align-content: start; }

/* Patička -----------------------------------------------------------------
   Podle předlohy jeden řádek: značka, odkazy, sítě a tlačítko nahoru. */

.kw-footer {
	margin-top: var(--kw-space-64);
	border-top: 1px solid var(--kw-line);
	background: var(--kw-bg-muted);
	padding-block: var(--kw-space-32);
	font-size: var(--kw-text-sm);
	color: var(--kw-text-soft);
}

.kw-footer__row {
	display: grid;
	gap: var(--kw-space-24);
	align-items: center;
}
@media (min-width: 900px) {
	.kw-footer__row {
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: var(--kw-space-32);
	}
}

.kw-footer__logo { color: var(--kw-text); }
.kw-footer__logo .kw-logo__mark { font-size: 1.375rem; }

.kw-footer__nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kw-space-4) var(--kw-space-24);
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 900px) { .kw-footer__nav ul { justify-content: center; } }
.kw-footer__nav li { margin: 0; }
.kw-footer__nav a { color: var(--kw-text-soft); text-decoration: none; }
.kw-footer__nav a:hover { color: var(--kw-accent-dark); text-decoration: underline; }

.kw-footer__side { display: flex; align-items: center; gap: var(--kw-space-16); }
.kw-footer .kw-social { display: flex; }

.kw-totop {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border-radius: 50%;
	border: 1px solid var(--kw-line-strong);
	background: var(--kw-bg);
	color: var(--kw-text);
	text-decoration: none;
	flex: 0 0 auto;
	transition: border-color var(--kw-transition), color var(--kw-transition);
}
.kw-totop:hover { border-color: var(--kw-accent); color: var(--kw-accent); }
.kw-totop .kw-icon { width: 18px; height: 18px; }

.kw-footer__bottom {
	margin-top: var(--kw-space-24);
	padding-top: var(--kw-space-16);
	border-top: 1px solid var(--kw-line);
	font-size: var(--kw-text-xs);
	color: var(--kw-text-faint);
	display: flex;
	flex-wrap: wrap;
	gap: var(--kw-space-4) var(--kw-space-16);
	justify-content: space-between;
}