/*
 * Page-level templates: 404, single akce, single novinka, single fotogalerie, plain.
 * Card/listing/section styles live in blocks.css (shared with the editor).
 */

/* ── 404 (tpl 3133) ─────────────────────────────────────────────────────── */
.d-404 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	min-height: 540px; /* was 60svh: fixed so the content does not move with the window height */
	margin-top: 100px;
	padding-bottom: 20px; /* the Elementor build had an empty (script) widget as a 4th flex item */
	text-align: center;
}
.d-404 > * { width: 100%; max-width: 1140px; margin-inline: auto; }
.d-404 h1, .d-404 h2 { margin-block: 0; line-height: 1; }
.d-404__code { color: var(--c-cream); font: 600 101px/1 var(--f-display); }
.d-404__title { color: var(--c-cream); font: 600 30px/1 var(--f-display); letter-spacing: 1.6px; }
.d-404__note { color: var(--c-gold); font: 400 20px/1 var(--f-body); }

/* ── Plain fallback (index.php) ─────────────────────────────────────────── */
.d-plain { padding: 150px var(--gutter) var(--rhythm); color: var(--c-cream); font-family: var(--f-body); }
.d-plain__title { font: 400 var(--fs-title)/1.04 var(--f-display); text-transform: uppercase; }

/* ── Page frame (tpl 47: container min-height var(--screen-h)) ───────────────────── */
.d-page-body { position: relative; z-index: 1; min-height: var(--screen-h); }

/* ── Single akce (tpl 135) ──────────────────────────────────────────────── */
.d-ak { position: relative; }
.d-ak__bg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	min-height: 900px; /* was 100svh: in tall windows the fade to black didn't reach the hero's bottom (hard edge) */
	background-position: center center;
	background-size: cover;
}
.d-ak__bg::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(180deg, rgb(0 0 0 / .68) 0%, #000 100%); }
.d-ak__main { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 20px; padding-top: 150px; }
.d-ak__main::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(0deg, #000 0%, rgb(0 0 0 / 0) 15%); pointer-events: none; }
.d-ak__main > * { position: relative; }
/* The two-column hero fills at least the screen, so the gallery and videos always start below the
 * fold (design decision; exception to the gravity rule). Short content: the content box bottom-aligns
 * with the card (space opens under the title); long content: the left side sets the height and the
 * sticky card ends bottom-aligned with it. */
.d-ak__hero { display: flex; flex-direction: column; min-height: calc(var(--screen-h) - 150px); padding: 0 var(--gutter) var(--gap); } /* 150px = .d-ak__main top padding; 20px under the columns = the column gap */
@media (min-width: 1025px) { /* desktop hero is shorter than the cover: end the cover in black where the hero ends */
	.d-ak__hero { background-image: linear-gradient(180deg, rgb(0 0 0 / 0) 45%, #000 100%); }
}
.d-ak__row { display: flex; flex: 1 0 auto; flex-direction: row; align-items: stretch; gap: 20px; width: 100%; max-width: var(--shell); margin-inline: auto; }
.d-ak__left { display: flex; flex-direction: column; justify-content: flex-start; gap: 20px; width: 66%; min-width: 0; }
.d-ak__eyebrow, .d-ak__card-label, .d-ak__panel-label, .d-ak__cell-label, .d-ak__media-label {
	margin: 0;
	font: 400 12px/1 var(--f-body);
	/* The template's letter-spacing/uppercase settings were never compiled by Elementor. */
}
.d-ak__eyebrow, .d-ak__card-label, .d-ak__media-label { color: var(--c-gold); }
.d-ak__panel-label, .d-ak__cell-label { color: var(--c-taupe); }
.d-ak__stack { display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; gap: 20px; flex: 1 0 auto; align-self: stretch; }
.d-ak__title {
	margin: 0;
	color: var(--c-cream);
	font: 400 clamp(48px, 8vw, 154px)/.86 var(--f-display);
	letter-spacing: .02em;
}
.d-ak__panel {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 20px;
	align-self: stretch;
	padding: 20px 24px;
	background: var(--c-black-08);
	border: 1px solid var(--c-gold-28);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}
.d-ak__lineup { margin: 0; color: var(--c-cream); font: 500 19px/1.55 var(--f-body); }
.d-ak__content { color: var(--c-paper); font: 400 18px/1.8 var(--f-body); }
.d-prose a, .d-prose a:hover, .d-prose a:visited { color: var(--c-gold); }
.d-prose h2, .d-prose h3 { color: inherit; line-height: 1.2; margin: .5rem 0 1rem; }
.d-prose img { height: auto; }
.d-ak__card {
	position: sticky;
	top: 150px;
	align-self: flex-start;
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 34%; /* height by content; sticky, it stops on the row's bottom line while scrolling */
	min-width: 0;
	padding: 30px;
	background: var(--c-black-08);
	border: 1px solid var(--c-gold-28);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}
.d-ak__date {
	margin: 0;
	color: var(--c-cream);
	font: 400 clamp(48px, 7vw, 118px)/1.02 var(--f-display);
	letter-spacing: .02em;
}
.d-ak__genre { margin: 0; color: var(--c-gold); font: 400 12px/1.4 var(--f-body); letter-spacing: .9px; text-transform: uppercase; }
.d-ak__cells { display: flex; flex-direction: column; gap: 20px; }
.d-ak__cell {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	padding: 18px;
	background: var(--c-cream-04);
	border: 1px solid var(--c-cream-16);
}
.d-ak__cell-value { margin: 0; color: var(--c-cream); font: 600 30px/1.02 var(--f-body); }
.d-ak__tickets { width: 100%; margin-top: 18px; gap: 9px; }
.d-ak__tickets .d-icon { width: 12px; height: 12px; }
.d-ak__media, .d-ak__videos { padding: 0 var(--gutter) 20px; background: #000; box-shadow: 0 -20px 0 #000; } /* covers the gap above: no cover band */
.d-ak__main > :is(.d-ak__media, .d-ak__videos):last-child { padding-bottom: var(--rhythm); } /* page end */
.d-ak__media-inner { display: flex; flex-direction: column; gap: 20px; max-width: var(--shell); margin-inline: auto; padding: 24px 0; background: #000; }
.d-ak__media-label { font-size: 11px; }
.d-ak__gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.d-ak__gimg img { display: block; width: 100%; height: auto; border: 1px solid transparent; transition: transform 1s; }
.d-ak__gimg:hover img { transform: scale(1.1); }
.d-ak__vgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.d-ak__vcell { display: flex; flex-direction: column; gap: 20px; padding: 18px; border: 1px solid var(--c-cream-16); }
.d-video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.d-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Click-to-play facade: nothing from the video service is loaded before play (except the YouTube thumbnail). */
.d-video__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .2s; }
.d-video__play { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--c-gold); cursor: pointer; }
.d-video__play svg { width: 64px; height: 64px; padding: 16px; box-sizing: border-box; border: 1px solid var(--c-gold); background: var(--c-black-25); backdrop-filter: blur(3.5px); fill: currentColor; transition: background-color .2s, transform .2s; }
.d-video__play:hover svg, .d-video__play:focus-visible svg { background: var(--c-bronze-21); transform: scale(1.06); }
.d-video__play:focus-visible { outline: 2px solid var(--c-gold); outline-offset: -2px; }
.d-video--facade:hover .d-video__thumb { opacity: 1; }
.wp-has-aspect-ratio .wp-block-embed__wrapper > .d-video { position: absolute; inset: 0; aspect-ratio: auto; }
.d-video__note { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: var(--gap-s); font-size: 12px; line-height: 1.4; color: rgb(255 255 255 / .78); background: linear-gradient(transparent, rgb(0 0 0 / .72)); pointer-events: none; }
@media (max-width: 1024px) {
	.d-ak__bg { min-height: max(760px, var(--screen-h)); }
	.d-ak__main { padding-top: 0; }
	.d-ak__hero { min-height: max(760px, var(--screen-h)); padding: 112px var(--gutter) var(--gap); }
	/* Stacked flow: title → info card → line-up + description (the card comes first, not after a long text). */
	.d-ak__left, .d-ak__stack { display: contents; }
	.d-ak__eyebrow { order: 0; }
	.d-ak__title { order: 1; margin-bottom: auto; } /* space opens under the title; card + panel sit on the bottom edge */
	.d-ak__card { order: 2; }
	.d-ak__panel { order: 3; }
	.d-ak__row { flex-direction: column; }
	.d-ak__left, .d-ak__card { width: 100%; }
	.d-ak__card { position: relative; top: auto; }
	.d-ak__title { font-size: 96px; }
	.d-ak__lineup { font-size: 17px; }
	.d-ak__content { font-size: 17px; }
	.d-ak__date { font-size: 82px; }
	.d-ak__cell-value { font-size: 26px; }
	.d-ak__media, .d-ak__videos { padding: 22px var(--gutter) 20px; }
	.d-ak__vgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
	.d-ak__bg, .d-ak__hero { min-height: var(--screen-h); }
	.d-ak__hero { padding: 106px var(--gutter) var(--gap); }
	.d-ak__eyebrow { font-size: 11px; }
	.d-ak__title { font-size: 58px; }
	.d-ak__panel { padding: 15px; }
	.d-ak__lineup { font-size: 15px; }
	.d-ak__content { font-size: 16px; }
	.d-ak__card { padding: 18px; }
	.d-ak__card-label { font-size: 10px; }
	.d-ak__date { font-size: 52px; }
	.d-ak__cell { padding: 14px; }
	.d-ak__cell-label { font-size: 10px; }
	.d-ak__cell-value { font-size: 22px; }
	.d-ak__media, .d-ak__videos { padding: 12px var(--gutter) 20px; }
	.d-ak__media-inner { padding: 14px 0; }
	.d-ak__vcell { padding: 14px; }
}

/* ── Single novinka (tpl 1494) ──────────────────────────────────────────── */
.d-nw { position: relative; }
.d-nw__backdrop-wrap { position: fixed; top: 0; left: 0; z-index: 0; width: 100%; min-height: calc(var(--screen-h) * .60); pointer-events: none; }
/* Photo gallery: the blurred cover belongs to the hero only and scrolls away with it (fixed, it stayed
   behind the photos while scrolling — visible bands). Identical at the top of the page. */
.d-fg__backdrop-wrap { position: absolute; overflow: hidden; }
.d-nw__backdrop {
	position: absolute;
	top: 0;
	width: 95%;
	height: 70%;
	min-height: 60%;
	overflow: hidden;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	filter: blur(16px) saturate(.9) contrast(1.08);
	transform: scale(1.1);
	opacity: .79;
}
.d-nw__backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(270deg, #000 0%, rgb(0 0 0 / .1) 24%, rgb(0 0 0 / .42) 58%, rgb(0 0 0 / .08) 100%),
		linear-gradient(180deg, rgb(0 0 0 / .1) 0%, rgb(0 0 0 / .1) 58%, #000 100%);
}
.d-nw__backdrop-wrap { height: calc(var(--screen-h) * .60); }
.d-nw__root { position: relative; z-index: 1; display: flex; flex-direction: column; }
.d-nw__root::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #000 0%, rgb(0 0 0 / 0) 5%); pointer-events: none; }
.d-nw__root > * { position: relative; }
.d-nw__hero { display: flex; flex-direction: column; justify-content: flex-end; padding: 132px var(--gutter) 20px; overflow: hidden; isolation: isolate; }
.d-nw__col { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: var(--shell-narrow); margin-inline: auto; padding: 10px 0; } /* sides = the page gutter (hero + body align) */
.d-nw__eyebrow { margin: 0; color: var(--c-gold); font: 700 12px/1.2 var(--f-body); letter-spacing: 3.6px; text-transform: uppercase; }
.d-nw__title { margin: 10px 0 0; color: var(--c-cream); font: 400 118px/.96 var(--f-display); letter-spacing: .02em; }
.d-nw__date { margin: 0; line-height: 24px; }
.d-nw__date span { color: var(--c-gold); font: 700 15px/1 var(--f-body); letter-spacing: 3px; text-transform: uppercase; }
.d-nw__excerpt { margin: 0; color: var(--c-cream); font: 400 24px/1.36 var(--f-body); }
.d-nw__body { display: flex; flex-direction: column; align-items: center; padding: 0 var(--gutter) var(--rhythm); }
.d-nw__col--body { max-width: var(--shell-narrow); padding: 20px 0 0; }
.d-nw__image { position: relative; margin: 0; }
.d-nw__image img { display: block; width: 100%; height: auto !important; max-width: 100%; object-fit: contain; filter: saturate(.92) contrast(1.08); }
.d-nw__image::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgb(0 0 0 / .3) 0%, rgb(0 0 0 / 0) 50%, rgb(0 0 0 / .3) 100%); }
.d-nw__content { padding: 38px 0 10px; color: var(--c-paper); font: 400 18px/1.8 var(--f-body); }
.d-nw__side { display: flex; flex-direction: row; gap: 20px; }
.d-nw__meta {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 22px;
	background: var(--c-cream-04);
	border: 1px solid var(--c-gold-24);
}
.d-nw__meta-label { margin: 0; color: var(--c-gold); font: 700 12px/1.2 var(--f-body); letter-spacing: 3.6px; text-transform: uppercase; }
.d-nw__meta-date { margin: 0; color: var(--c-cream); font: 400 48px/1.02 var(--f-display); letter-spacing: .02em; }
.d-nw__buttons { display: flex; flex-flow: row wrap; justify-content: flex-start; gap: 20px; }
.d-nw__buttons .d-btn { flex: none; }
.d-btn--cream-border { border-color: var(--c-cream-55); }
.d-btn--lh16 { line-height: 16px; }
.d-btn--gold-hover:hover, .d-btn--gold-hover:focus-visible { background: var(--c-gold); border-color: var(--c-gold); color: #000; }
@media (max-width: 1024px) {
	.d-nw__backdrop { width: 78%; height: 62%; min-height: 62%; opacity: .44; }
	.d-nw__hero { padding: 112px var(--gutter) 0; }
	.d-nw__title { font-size: 82px; }
	.d-nw__excerpt { font-size: 21px; }
	.d-nw__col--body { padding-top: 15px; }
	.d-nw__content { padding: 30px 0 8px; font-size: 17px; }
	.d-nw__side { flex-direction: column; }
}
@media (max-width: 767px) {
	.d-nw__backdrop { right: 0; width: 100%; height: 58%; min-height: 58%; opacity: .3; filter: blur(18px) saturate(.85); }
	.d-nw__backdrop::after { background: linear-gradient(135deg, rgb(0 0 0 / .72) 0%, rgb(0 0 0 / .38) 48%, #000 100%); }
	.d-nw__hero { padding: 86px var(--gutter) 0; }
	.d-nw__eyebrow { font-size: 11px; }
	.d-nw__title { font-size: 52px; }
	.d-nw__date span { font-size: 14px; }
	.d-nw__excerpt { font-size: 17px; }
	.d-nw__col--body { padding-top: 20px; }
	.d-nw__content { padding: 24px 0 4px; font-size: 16px; }
	.d-nw__meta { padding: 16px; }
	.d-nw__meta-label { font-size: 11px; }
	.d-nw__meta-date { font-size: 34px; }
}

/* ── Single fotogalerie (tpl 320) ───────────────────────────────────────── */
.d-fg { position: relative; }
.d-fg__backdrop { height: 90%; min-height: 90%; }
.d-fg__backdrop::after {
	background:
		linear-gradient(270deg, #000 0%, rgb(0 0 0 / .1) 24%, rgb(0 0 0 / .42) 58%, rgb(0 0 0 / .08) 100%),
		linear-gradient(180deg, rgb(0 0 0 / .1) 0%, rgb(0 0 0 / .1) 69%, #000 100%);
}
.d-fg__root { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 20px; }
.d-fg__root::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #000 0%, rgb(0 0 0 / 0) 15%); pointer-events: none; }
.d-fg__root > * { position: relative; }
.d-fg__hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 360px; overflow: hidden; } /* was 40svh: fixed, content gravitates up */
.d-fg__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(circle at 72% 28%, var(--c-gold-18), transparent 26%),
		repeating-linear-gradient(0deg, rgb(var(--rgb-white) / .035) 0, rgb(var(--rgb-white) / .035) 1px, transparent 1px, transparent 7px);
	mix-blend-mode: screen;
	opacity: .45;
}
.d-fg__hero-inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 360px; /* was 40svh */
	padding: 150px var(--gutter) 76px;
	background-image: linear-gradient(180deg, rgb(0 0 0 / .68) 83%, #000 100%);
}
.d-fg__shell { display: flex; flex-direction: column; gap: 22px; width: 100%; max-width: var(--shell); margin-inline: auto; padding: 10px 0; }
.d-fg__title { line-height: .86; }
.d-fg__meta { display: flex; flex-flow: row nowrap; justify-content: flex-start; gap: 0; }
.d-fg__meta-item { margin: 0; color: var(--c-cream-82); font: 400 24px/1.36 var(--f-body); }
.d-fg__meta-item--gap { margin-right: 40px; }
.d-fg__gallery-sec { padding: 0 var(--gutter) var(--rhythm); background: #000; box-shadow: 0 -20px 0 #000; } /* continues the hero's black fade, covering the root gap: no backdrop bands */
.d-fg__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; max-width: var(--shell); margin-inline: auto; }
.d-fg__item { display: block; overflow: hidden; }
.d-fg__thumb { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.d-fg__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s; }
.d-fg__item:hover .d-fg__thumb img { transform: scale(1.1); }
@media (max-width: 1024px) {
	.d-fg__hero-inner { padding: 150px var(--gutter) 36px; }
}
@media (max-width: 767px) {
	.d-fg__root { gap: 0; }
	.d-fg__hero, .d-fg__hero-inner { min-height: 396px; } /* was 44svh */
	.d-fg__hero-inner { padding: 120px var(--gutter) 16px; }
	.d-fg__meta { flex-wrap: wrap; gap: 5px 0; }
	.d-fg__meta-item { font-size: 17px; }
}
/* The live gallery (e-gallery) used exclusive breakpoints: 4 cols ≥1024, 3 cols 767–1023, 2 cols <767. */
@media (max-width: 1023px) { .d-fg__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 766px) { .d-fg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }