/*
 * Doladění vzhledu a jemné animace frontendu ZŠ Kunratice (10/2026).
 * Ručně psané, načítá se za main.css (main.css se generuje ze SCSS, tady se nesahá).
 * Všechny pohyby respektují prefers-reduced-motion (blok na konci souboru).
 */

/* ===== Logo: větrník roztáčí enhance.js (při najetí myší, po odjetí setrvačností dobíhá) ===== */
.navbar-brand .brand-logo {
	display: inline-flex;
	align-items: center;
	height: 2.5rem;
}
.navbar-brand .brand-logo img {
	display: block;
	height: 100%;
	width: auto;
}
.navbar-brand .brand-vetrnik-wrap {
	display: block;
	height: 100%;
}
.navbar-brand .brand-vetrnik {
	/* osa otáčení = náboj větrníku: bod s nejlepší pětičetnou symetrií (otočení o 72° se
	   nejvíc překryje samo se sebou), SVG 74.1 × 71.3 z viewBoxu 152 × 147.093.
	   Střed obrázku leží jinde a lopatky by při točení házely. */
	transform-origin: 48.75% 48.47%;
	will-change: transform;
}
@media (min-width: 768px) {
	.navbar-brand .brand-logo { height: 3.75rem; }
}
@keyframes ws-spin {
	to { transform: rotate(360deg); }
}

/* ===== Barevné dlaždice sekcí: malý větrník se při najetí pootočí, dlaždice se rozjasní ===== */
.navbar-tile-link {
	transition: filter .25s ease, box-shadow .25s ease;
}
.navbar-tile-link:hover,
.navbar-tile-link:focus {
	filter: brightness(1.06) saturate(1.05);
}
.navbar-tile-link .icon-logo-monocolor {
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.navbar-tile-link:hover .icon-logo-monocolor,
.navbar-tile-link:focus .icon-logo-monocolor {
	transform: scale(1.15) rotate(72deg);
}

/* ===== Nepřehlédněte: šipka popojede, jemné podbarvení ===== */
.card-emphasized {
	transition: background-color .2s ease;
}
.card-emphasized:hover,
.card-emphasized:focus {
	background-color: rgba(210, 0, 0, .04);
	text-decoration: none;
}
.card-emphasized .icon-arrow {
	transition: transform .25s ease;
}
.card-emphasized:hover .icon-arrow,
.card-emphasized:focus .icon-arrow {
	transform: translateX(5px);
}

/* ===== Karty aktualit: obrázek se lehce přiblíží, karta dostane stín ===== */
.card-skola,
.card {
	transition: box-shadow .3s ease;
}
.card-skola:hover,
.card-skola:focus {
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .35);
	text-decoration: none;
}
.card-img-container,
.card-img-container-bg {
	overflow: hidden;
}
.card-img-container .card-img {
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.card:hover .card-img-container .card-img,
.card:focus .card-img-container .card-img {
	transform: scale(1.05);
}

/* ===== Video: tlačítko přehrát pulzuje při najetí ===== */
.video-play-icon {
	transition: transform .3s ease;
}
.video-play:hover .video-play-icon,
.video-play:focus .video-play-icon {
	transform: scale(1.1);
}

/* ===== Tlačítka a odkazy: plynulé přechody, viditelný fokus z klávesnice ===== */
a,
.btn {
	transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
a:focus-visible,
.btn:focus-visible,
button:focus-visible {
	outline: 2px solid #d20000;
	outline-offset: 2px;
}
#scroll-to-top {
	transition: transform .25s ease, opacity .25s ease;
}
#scroll-to-top:hover {
	transform: translateY(-3px);
}

/* ===== Postupné objevení bloků při scrollu (třídy přidává enhance.js) ===== */
.ws-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}
.ws-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* ===== Mapa v patičce (OpenStreetMap / OpenFreeMap Positron přes MapLibre) ===== */
.footer-map {
	position: relative;
	min-height: 15rem;
	background: #e9edef;
}
.footer-map .osm-map {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
}
.footer-map .map-google-link {
	position: absolute;
	top: .6rem;
	right: .6rem;
	z-index: 1000;
	padding: .35rem .65rem;
	border-radius: .4rem;
	background: #fff;
	color: #d20000;
	font-size: .8rem;
	font-weight: 600;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
.footer-map .map-google-link:hover {
	background: #d20000;
	color: #fff;
	text-decoration: none;
}
.osm-pin {
	width: 44px;
	height: 44px;
	cursor: pointer;
}
.osm-pin img {
	display: block;
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}
.footer-map .maplibregl-popup-content {
	font-size: .85rem;
	line-height: 1.4;
}

/* ===== Lišta cookies: malá karta vlevo dole s tlačítkem Souhlasím ===== */
.c_cuk.cookie-card {
	left: 1rem;
	right: auto;
	bottom: 1rem;
	width: auto;
	max-width: 22rem;
	display: flex;
	align-items: center;
	gap: .9rem;
	padding: .8rem .9rem .8rem 1.1rem;
	border-radius: .9rem;
	background: #fff;
	color: #333;
	font-size: .82rem;
	line-height: 1.4;
	box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
	animation: ws-cookie-in .45s cubic-bezier(.2, .7, .2, 1);
}
.c_cuk.cookie-card.d-none {
	display: none;
}
.c_cuk.cookie-card .cookie-card-text {
	margin: 0;
}
.c_cuk.cookie-card .cookie-card-text a {
	color: #d20000;
	text-decoration: underline;
}
.c_cuk.cookie-card .cookie-card-btn {
	flex-shrink: 0;
	padding: .45rem .9rem;
	border: 0;
	border-radius: .5rem;
	background: #d20000;
	color: #fff;
	font-size: .82rem;
	font-weight: 700;
}
.c_cuk.cookie-card .cookie-card-btn:hover {
	background: #a80000;
}
@media (max-width: 575.98px) {
	.c_cuk.cookie-card {
		right: 1rem;
		max-width: none;
	}
}
@keyframes ws-cookie-in {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

/* ===== Omezené animace (nastavení systému) ===== */
@media (prefers-reduced-motion: reduce) {
	.navbar-brand .brand-vetrnik,
	.c_cuk.cookie-card {
		animation: none;
	}
	.navbar-tile-link .icon-logo-monocolor,
	.card-img-container .card-img,
	.ws-reveal {
		transition: none;
	}
	.navbar-tile-link:hover .icon-logo-monocolor,
	.card:hover .card-img-container .card-img {
		transform: none;
	}
	.ws-reveal {
		opacity: 1;
		transform: none;
	}
}