/* =========================================================================
   ZŠ a MŠ – Aktuality (slider + karty)
   Barva karty se nastavuje inline přes proměnnou --zsms-akt-color
   (z barvy kategorie). Ostatní řídí Elementor style controls.
   ========================================================================= */

.zsms-aktuality {
	--zsms-akt-on: #ffffff;
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.zsms-aktuality * {
	box-sizing: border-box;
}

/* ---------- Slider mechanika ---------- */
.zsms-aktuality__viewport {
	overflow: hidden;
}

.zsms-aktuality__track {
	display: flex;
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

.zsms-aktuality__page {
	flex: 0 0 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* ---------- Šipka (sdílené SVG) ---------- */
.zsms-akt-chevron {
	display: inline-block;
	width: auto;
	height: 1em;
	vertical-align: middle;
	flex: 0 0 auto;
}

.zsms-akt-chevron--flip {
	transform: scaleX(-1);
}

/* =========================================================================
   Karta
   Barevný „pruh" je zaoblený obdélník nahoře (zaoblené oba konce). Rámuje
   horní část obrázku (nahoře + vlevo) a spojuje ho se jmenovkou kategorie.
   Obrázek přes pruh přesahuje dolů – níže vlevo je už bílá (barva NENÍ až dolů).
   ========================================================================= */

.zsms-akt-card {
	--zsms-akt-media-w: 300px;
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	overflow: hidden;
	background-color: #ffffff;
	border-radius: 30px;
	min-height: 236px;
	text-decoration: none;
	box-shadow: 0 12px 32px rgba(60, 77, 92, 0.12);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.zsms-akt-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(60, 77, 92, 0.18);
}

/* Barevný pruh nahoře = vektorový tvar „stuhy" (SVG). Barvu řídí currentColor
   (= barva kategorie). Leží pod obsahem (obrázek + jmenovka). */
.zsms-akt-card__band {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 82%;
	height: 104px;
	color: var(--zsms-akt-color, #e89a3c);
	pointer-events: none;
}

.zsms-akt-card__band svg {
	display: block;
	width: 100%;
	height: 100%;
}

.zsms-akt-card__band path {
	fill: currentColor;
}

/* ---------- Obrázek: přesahuje pruh směrem dolů ---------- */
.zsms-akt-card__media {
	position: relative;
	z-index: 2;
	align-self: stretch;
	margin: 20px 0 20px 42px;
}

.zsms-akt-card__media img,
.zsms-akt-card__media-empty {
	display: block;
	width: var(--zsms-akt-media-w, 300px);
	height: 100% !important;
	object-fit: cover;
	border-radius: 25px !important;
}

.zsms-akt-card__media-empty {
	min-height: 170px;
	background-image: linear-gradient(135deg, #efe8dc 25%, #e7ded0 25%, #e7ded0 50%, #efe8dc 50%, #efe8dc 75%, #e7ded0 75%, #e7ded0 100%);
	background-size: 22px 22px;
	opacity: 0.7;
}

/* ---------- Pravá část (jmenovka + nadpis + šipka) ---------- */
.zsms-akt-card__main {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	padding: 0 0 74px 24px;
}

/* Jmenovka kategorie – leží na barevném pruhu (bez vlastního pozadí) */
.zsms-akt-card__tab {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 104px;
	padding-right: 24px;
	color: var(--zsms-akt-on, #fff);
	font-weight: 700;
}

.zsms-akt-card__tab-icon {
	display: inline-flex;
	flex: 0 0 auto;
	opacity: 0.95;
}

.zsms-akt-card__cat {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.zsms-akt-card__tab .zsms-akt-chevron {
	height: 13px;
}

/* ---------- Nadpis + datum ---------- */
.zsms-akt-card__title {
	margin: 0;
	padding: 18px 96px 8px 0;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0 6px;
	color: var(--zsms-akt-color, #3f4d5c);
	font-size: 1.45rem;
	font-weight: 700;
	line-height: 1.25;
}

.zsms-akt-card__date {
	color: inherit;
	font-weight: 700;
	white-space: nowrap;
}

/* ---------- Kolečko se šipkou (vpravo dole) ---------- */
.zsms-akt-card__go {
	position: absolute;
	right: 26px;
	bottom: 24px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--zsms-akt-color, #e89a3c);
	color: var(--zsms-akt-on, #fff);
	transition: transform 0.18s ease;
}

.zsms-akt-card__go .zsms-akt-chevron {
	height: 18px;
}

.zsms-akt-card:hover .zsms-akt-card__go {
	transform: translateX(3px);
}

/* =========================================================================
   Ovládání (Starší aktuality + šipky)
   ========================================================================= */

.zsms-aktuality__nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 20px;
	margin-top: 26px;
}

.zsms-aktuality__older {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #e89a3c;
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 600;
}

.zsms-aktuality__older .zsms-akt-chevron {
	height: 12px;
}

.zsms-aktuality__arrows {
	display: flex;
	gap: 12px;
}

.zsms-aktuality__arrow {
	width: 56px;
	height: 56px;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.15s ease, opacity 0.15s ease;
}

.zsms-aktuality__arrow .zsms-akt-chevron {
	height: 16px;
}

.zsms-aktuality__arrow--prev {
	background-color: #ffffff;
	color: #3f4d5c;
	box-shadow: 0 4px 16px rgba(60, 77, 92, 0.12);
}

.zsms-aktuality__arrow--next {
	background-color: #e89a3c;
	color: #ffffff;
}

.zsms-aktuality__arrow:hover:not(:disabled) {
	transform: scale(1.06);
}

.zsms-aktuality__arrow:disabled {
	opacity: 0.4;
	cursor: default;
}

.zsms-aktuality__empty {
	margin: 0;
	color: #6b7785;
}

/* =========================================================================
   Responzivita
   ========================================================================= */

@media (max-width: 680px) {
	.zsms-akt-card {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.zsms-akt-card__band {
		display: none;
	}

	.zsms-akt-card__media {
		margin: 16px 16px 0;
	}

	.zsms-akt-card__media img,
	.zsms-akt-card__media-empty {
		width: 100%;
		height: auto !important;
		aspect-ratio: 16 / 10;
	}

	.zsms-akt-card__main {
		padding: 0 18px 20px;
	}

	.zsms-akt-card__tab {
		height: auto;
		margin: 14px -18px 0;
		padding: 12px 18px;
		background-color: var(--zsms-akt-color, #e89a3c);
	}

	.zsms-akt-card__title {
		padding: 16px 60px 0 0;
		font-size: 1.2rem;
	}

	.zsms-akt-card__go {
		position: static;
		margin-top: 14px;
	}

	.zsms-aktuality__nav {
		justify-content: space-between;
	}
}