/**
 * Event App — public stylesheet.
 *
 * Tries to look intentional out of the box while remaining easy to override from a host theme via predictable class
 * names: .deb-event, .deb-section, .deb-input, .deb-card, .deb-submit, etc.
 */

/*
 * Smooth anchor jumps. MUST live on the actual scrolling container
 * (the document root) — applying scroll-behavior to .deb-event has no
 * effect because that wrapper is not the page's scroll context. With
 * this rule, the browser's native `<a href="#section-id">` navigation
 * animates instead of snapping.
 */
html { scroll-behavior: smooth; }

.deb-event {
	--deb-max-width: 1200px;
	/* Shared horizontal inset + vertical rhythm for every section block
	   (hero frame, section frames, nav). Field-scoped rows keep their own
	   --deb-field-max-width cap — see .deb-form-grid / .deb-resources. */
	--deb-section-padding-x: 28px;
	--deb-section-pad-top: 20px;
	--deb-section-pad-bottom: 20px;
	/* Breathing room inside each section frame (not inter-section gap). */
	--deb-section-inner-y: 12px;
	--deb-text: #ffffff;
	--deb-card-bg: #ffffff;
	--deb-card-text: #1d1d1d;
	--deb-radius: 10px;
	--deb-radius-pill: 999px;
	--deb-nav-min-height: 56px;
	--deb-nav-h: 56px;
	--deb-shadow: 0 4px 14px rgba(0,0,0,.12);
	--deb-input-bg: #ffffff;
	--deb-input-text: #1d1d1d;
	--deb-accent: #b50f1c;
	/* Top-level "None" background means a white surface. Explicit page
	   images/gradients are still painted above this fallback. */
	background-color: #ffffff;
	/* Single source of truth for the typeface used everywhere inside the
	   event block. Themes routinely re-skin inputs/labels with their own
	   webfont, which is why every field-rendering selector below also
	   pins font-family to this variable with !important. */
	--deb-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--deb-text);
	font-family: var(--deb-font-family);
}

.deb-event * { box-sizing: border-box; }

/* ------------------------------------------------------------------ *
 * Page-background OVERLAY layer (added in 1.2.15)
 *
 * Optional second background layer drawn via .deb-event::after.
 * Stacking strategy:
 *   - .deb-event--has-overlay creates an isolated stacking context so
 *     z-index: -1 on the pseudo-element resolves WITHIN .deb-event and
 *     never escapes to paint behind the host page.
 *   - position: fixed pins the overlay to the viewport so a focal-
 *     composition image (e.g. a centred brand mark) stays anchored as
 *     the visitor scrolls — premium "fixed-pattern" effect at zero JS.
 *   - z-index: -1 places it BEHIND every page content (form / cards /
 *     hero) but ABOVE the gradient/image set on .deb-event itself.
 *   - pointer-events: none guarantees it can't intercept clicks on
 *     fields underneath.
 *
 * Per-mode size + repeat live on modifier classes (not custom props)
 * so the keyword stays grammatically valid CSS — `background-size`
 * doesn't accept a var() that resolves to "cover" cleanly across all
 * older WebKits, but the modifier class works everywhere.
 *
 * Custom properties (set inline on .deb-event by PHP):
 *   --deb-overlay-img      : url('…')         the image to paint
 *   --deb-overlay-opacity  : 0.0–1.0          translucency level
 *   --deb-overlay-blend    : mix-blend-mode   normal / screen / …
 *   --deb-overlay-scale    : 50–400 %         zoom factor for cover/tile.
 *                                             For "cover": 100% means the
 *                                             image's width fills the
 *                                             viewport (matches old `cover`
 *                                             on landscape monitors); >100
 *                                             zooms in (useful when the
 *                                             source image has wide blank
 *                                             margins around its focal
 *                                             content); <100 leaves room
 *                                             around the image.
 *                                             For "tile": acts as a multi-
 *                                             plier on the image's natural
 *                                             pixel size — emulated via
 *                                             `auto` at 100% so existing
 *                                             configs render identically.
 * ------------------------------------------------------------------ */
.deb-event--has-overlay { isolation: isolate; }
.deb-event--has-overlay::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: var(--deb-overlay-img);
	background-position: center center;
	opacity: var(--deb-overlay-opacity, 0.3);
	mix-blend-mode: var(--deb-overlay-blend, normal);
}
/* Tile keeps its native size by default (auto / 100% scale); admins can
 * scale up by overriding via --deb-overlay-scale (resolves to a width %
 * of the viewport so e.g. 200% gives ~one tile every two viewport widths). */
.deb-event--overlay-tile::after    { background-size: var(--deb-overlay-scale, auto) auto; background-repeat: repeat; }
/* Cover swaps the CSS `cover` keyword for an explicit width % so the admin
 * can zoom a focal-composition image in/out. At 100 % this matches the
 * legacy `cover` behaviour on landscape viewports (width fills viewport,
 * height scales proportionally — minor vertical crop on widescreen). */
.deb-event--overlay-cover::after   { background-size: var(--deb-overlay-scale, 100%) auto; background-repeat: no-repeat; }
.deb-event--overlay-contain::after { background-size: contain; background-repeat: no-repeat; }

/*
 * Font lockdown. Themes (Layers Pro, eForm, etc.) tend to load Google
 * Fonts (e.g. Roboto with all weights) and assign a custom font to
 * inputs / labels / wrapping <div>s and <span>s — which made form fields
 * visibly use a different typeface than our checkbox sections, even
 * though the named selectors below already had `font-family !important`.
 * The hole was always the wrapping elements (<div class="deb-resource…">,
 * inline <span>s, list items) that the theme touched directly, whose
 * font then INHERITED down past us when our own selector wasn't quite
 * specific enough.
 *
 * Universal-selector lockdown: every descendant of .deb-event is forced
 * onto the plugin's font stack, full stop. This is intentionally a
 * sledgehammer — there is no theme rule that can survive `* + !important`
 * scoped to our own block, and the rule cannot leak outside .deb-event,
 * so the rest of the WP admin/site is untouched. The named selectors
 * below are kept as defence-in-depth (and to document what we expected
 * to need before resorting to *).
 */
.deb-event,
.deb-event * {
	font-family: var(--deb-font-family) !important;
}

.deb-event input,
.deb-event select,
.deb-event textarea,
.deb-event button,
.deb-event label,
.deb-event .deb-resource__label,
.deb-event .deb-resource__help,
.deb-event .deb-resource__counter,
.deb-event .deb-section__title,
.deb-event .deb-section__subtitle,
.deb-event .deb-card__title,
.deb-event .deb-card__text,
.deb-event .deb-pricing-card__title,
.deb-event .deb-pricing-card__subtitle,
.deb-event .deb-pricing-card__core,
.deb-event .deb-pricing-card__text,
.deb-event .deb-pricing-card__btn,
.deb-event .deb-pricing-footnote,
.deb-event .deb-agenda__time,
.deb-event .deb-agenda__title,
.deb-event .deb-agenda__speaker,
.deb-event .deb-faq__question,
.deb-event .deb-faq__answer,
.deb-event .deb-footer__tagline,
.deb-event .deb-footer__entity,
.deb-event .deb-footer__address,
.deb-event .deb-footer__contacts,
.deb-event .deb-footer__copyright,
.deb-event .deb-footer__section-link,
.deb-event .deb-footer__legal-link,
.deb-event .deb-footer__share-item,
.deb-event .deb-gdpr__item,
.deb-event .deb-submit {
	font-family: var(--deb-font-family) !important;
}

/* Typography-controlled headings — override the universal lockdown above so
 * Aa popover font presets apply on the public page. Inline --*-family vars
 * are emitted on each .deb-text element; empty inherit maps to page font. */
.deb-event .deb-hero__title.deb-text {
	font-family: var(--deb-hero-title-family, var(--deb-font-family)) !important;
}
.deb-event .deb-hero__tagline.deb-text {
	font-family: var(--deb-hero-tagline-family, var(--deb-font-family)) !important;
}
.deb-event .deb-section__title.deb-text {
	font-family: var(--deb-section-title-family, var(--deb-font-family)) !important;
}
.deb-event .deb-section__subtitle.deb-text {
	font-family: var(--deb-section-subtitle-family, var(--deb-font-family)) !important;
}

/* Section-level inline Special formatting: [[@sf]]...[[/@sf]].
 * box-decoration-break keeps background padding on every wrapped line. */
.deb-event .deb-special-format {
	font-family: var(--deb-sf-family-d, inherit) !important;
	font-size: var(--deb-sf-size-d, inherit) !important;
	font-weight: var(--deb-sf-weight-d, inherit) !important;
	color: var(--deb-sf-color-d, inherit) !important;
	background-color: var(--deb-sf-bg-d, transparent);
	padding:
		var(--deb-sf-pad-top-d, 0)
		var(--deb-sf-pad-right-d, 0)
		var(--deb-sf-pad-bottom-d, 0)
		var(--deb-sf-pad-left-d, 0);
	border-radius: var(--deb-sf-radius-d, 0);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
@media (min-width: 769px) and (max-width: 1024px) {
	.deb-event .deb-special-format {
		font-family: var(--deb-sf-family-t, inherit) !important;
		font-size: var(--deb-sf-size-t, inherit) !important;
		font-weight: var(--deb-sf-weight-t, inherit) !important;
		color: var(--deb-sf-color-t, inherit) !important;
		background-color: var(--deb-sf-bg-t, transparent);
		padding:
			var(--deb-sf-pad-top-t, 0)
			var(--deb-sf-pad-right-t, 0)
			var(--deb-sf-pad-bottom-t, 0)
			var(--deb-sf-pad-left-t, 0);
		border-radius: var(--deb-sf-radius-t, 0);
	}
}
@media (max-width: 768px) {
	.deb-event .deb-special-format {
		font-family: var(--deb-sf-family-m, inherit) !important;
		font-size: var(--deb-sf-size-m, inherit) !important;
		font-weight: var(--deb-sf-weight-m, inherit) !important;
		color: var(--deb-sf-color-m, inherit) !important;
		background-color: var(--deb-sf-bg-m, transparent);
		padding:
			var(--deb-sf-pad-top-m, 0)
			var(--deb-sf-pad-right-m, 0)
			var(--deb-sf-pad-bottom-m, 0)
			var(--deb-sf-pad-left-m, 0);
		border-radius: var(--deb-sf-radius-m, 0);
	}
}

/* Placeholder pseudo-elements split into their own rule so that a parse
 * failure in any single browser variant doesn't drop the lockdown above.
 * Pseudo-elements are NOT covered by `.deb-event *` so this stays
 * essential. */
.deb-event ::placeholder,
.deb-event .deb-input input::placeholder,
.deb-event .deb-input textarea::placeholder {
	font-family: var(--deb-font-family) !important;
}
.deb-event ::-webkit-input-placeholder,
.deb-event .deb-input input::-webkit-input-placeholder,
.deb-event .deb-input textarea::-webkit-input-placeholder {
	font-family: var(--deb-font-family) !important;
}
.deb-event ::-moz-placeholder,
.deb-event .deb-input input::-moz-placeholder,
.deb-event .deb-input textarea::-moz-placeholder {
	font-family: var(--deb-font-family) !important;
}

/* Unify the visual treatment of resource-card labels (radio + checkbox).
 *
 * Historically `.deb-resources[data-render="radio"] .deb-resource__label`
 * lower in this file overrides `font-size: 13px` and `font-weight: 700`,
 * which made Ubytovanie cards (radio) render visibly smaller than
 * Aktivity cards (checkbox, which kept the default 15px / 600). On
 * `dataset.zone/lenovo-vyrocny-event-2026/` DevTools confirmed
 * radio labels measured 17.6 px tall while checkbox labels were 20 px
 * — that's the 13px vs 15px font-size delta with default 1.35 LH.
 *
 * The two card types are the same component from the user's point of
 * view (a clickable choice with a label) so they must read at one size.
 * Pin font-size, font-weight and line-height with !important so neither
 * the in-file radio override nor any theme rule can break parity. */
.deb-event .deb-resource__label {
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
}

.deb-content {
	max-width: var(--deb-max-width);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 0;
	padding-top: 0;
	padding-bottom: 0;
	overflow: visible;
}
/* Optional footer breathing room when the form block is the last page segment. */
.deb-content--page-end {
	padding-bottom: 0;
}

/* ------------------------------------------------------------------ *
 * Hero
 *
 * Layout (flex-column, NOT absolute positioning — keeps the structure
 * resilient to host-theme overrides):
 *
 *   .deb-hero (flex column, full hero block)
 *     ├── ::before                  thin red frame, drawn as inset border
 *     ├── .__overlay                dark gradient for legibility
 *     ├── .deb-nav--in-hero         flex item #1: nav row at the top
 *     ├── .__inner                  flex item #2: title + tagline (stacked, centred)
 *     │     ├── .__title
 *     │     └── .__tagline
 *     ├── .__bottom                 scroll arrow only (pinned to bottom edge)
 *     ├── .__logo                   absolute: small red badge on the right edge
 *     └── .__sentinel               invisible marker for JS sticky-nav toggle
 *
 * CSS custom properties (set inline by PHP):
 *   --deb-hero-title-size : desktop title font-size in px (admin-tunable, 0–160)
 *   --deb-hero-*-size-m   : optional mobile title/tagline size override (0–160)
 *   --deb-hero-min-height : minimum hero height in px (admin-tunable, 100–1200)
 * ------------------------------------------------------------------ */
.deb-event.has-hero { padding-top: 0; }

.deb-hero {
	--deb-hero-title-size: 72px;
	--deb-hero-min-height: 640px;
	position: relative;
	margin-inline: auto;
	margin-top: var(--deb-section-pad-top, 20px);
	margin-bottom: var(--deb-section-pad-bottom, 20px);
	max-width: var(--deb-max-width);
	min-height: var(--deb-hero-min-height);
	background-color: var(--deb-hero-canvas-d, #111111);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: center;
	overflow: visible;             /* logo extends past the frame */
	isolation: isolate;
}
/* Image + overlay + in-hero logo share one positioning box (desktop: full hero; mobile: image band). */
.deb-hero__stage {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
.deb-hero__stage .deb-hero__logo {
	pointer-events: auto;
}
.deb-hero__device-layer {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.deb-hero__device-layer--t,
.deb-hero__device-layer--m {
	display: none;
}
.deb-hero__gradient {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
/*
 * Hero image element (added in 1.2.11).
 *
 * Desktop: absolutely positioned + object-fit:cover behind every other hero
 * child — visually identical to the previous CSS background-image approach,
 * just delivered via an <img> tag so we have something to retarget on mobile.
 *
 * Mobile (see the @media block at the bottom of this file): position becomes
 * static so the image flows naturally at full-width with object-fit:contain,
 * which means the visitor sees the WHOLE image instead of a heavily cropped
 * center slice. Title / tagline / arrow then stack below it.
 */
.deb-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--deb-hero-image-pos-d, center);
	z-index: 0;
	pointer-events: none;
	user-select: none;
	display: block;
}
.deb-hero__picture { display: block; }
.deb-hero--fit-d-contain .deb-hero__bg { object-fit: contain; }

/* Natural-height Desktop art direction: preserve the complete source image
 * and put text below it instead of forcing incompatible aspect ratios. */
.deb-hero--mode-d-image.deb-hero--fit-d-natural:not(.deb-hero--envelope-bg) {
	min-height: 0;
	padding-bottom: 0;
	background-color: var(--deb-hero-canvas-d, #111111);
}
.deb-hero--mode-d-image.deb-hero--fit-d-natural:not(.deb-hero--envelope-bg) .deb-hero__stage {
	position: relative;
	inset: auto;
	order: 1;
	flex: 0 0 auto;
	width: 100%;
}
.deb-hero--mode-d-image.deb-hero--fit-d-natural:not(.deb-hero--envelope-bg) .deb-hero__device-layer--d {
	position: relative;
	inset: auto;
}
.deb-hero--mode-d-image.deb-hero--fit-d-natural:not(.deb-hero--envelope-bg) .deb-hero__bg {
	position: static;
	width: 100%;
	height: auto;
	object-fit: contain;
}
.deb-hero--mode-d-image.deb-hero--fit-d-natural:not(.deb-hero--envelope-bg) .deb-hero__overlay { display: none; }
.deb-hero--mode-d-image.deb-hero--fit-d-natural:not(.deb-hero--envelope-bg) .deb-hero__inner {
	flex: 0 0 auto;
	order: 2;
	min-height: var(--deb-hero-panel-height-d, auto);
	padding-top: var(--deb-hero-panel-pad-top-d, 18px);
	padding-bottom: var(--deb-hero-panel-pad-bottom-d, 18px);
	justify-content: var(--deb-hero-panel-align-d, center);
}
.deb-hero--mode-d-image.deb-hero--fit-d-natural:not(.deb-hero--envelope-bg) .deb-hero__bottom {
	position: static;
	order: 3;
	padding: 0 var(--deb-hero-edge);
}
/* Hero video background (YouTube / Vimeo embed — muted autoplay). */
.deb-hero__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.deb-hero__video-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}
.deb-hero__video-iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	min-width: 100%;
	min-height: 100%;
	height: 56.25vw;
	transform: translate(-50%, -50%);
	border: 0;
	pointer-events: none;
	z-index: 1;
}
.deb-hero__video--interactive .deb-hero__video-iframe,
.deb-hero__video-iframe--interactive {
	pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
	.deb-hero__video-iframe:not(.deb-hero__video-iframe--interactive) { display: none; }
}
/*
 * No Banner background: top-level surfaces use white for the builder's
 * "None" choice. Nested component backgrounds remain transparent.
 */
.deb-hero.deb-hero--no-image {
	background: #ffffff;
	min-height: auto;
}
.deb-hero.deb-hero--no-image .deb-hero__inner {
	flex: 0 0 auto;
}
/* No bg image: hero height follows title/tagline — scroll cue must flow below, not absolute. */
.deb-hero.deb-hero--no-image .deb-hero__bottom {
	position: static;
	margin-top: 12px;
	padding: 0 clamp(20px, 5vw, 60px) 0;
}
/* Per-section decorative frame — enabled in the builder (frame.enabled).
 *
 * Standard sections: real border on the section box; PHP sets padding so
 * content always sits inside the border (never under an overlay).
 * Hero: keeps an inset ::before overlay (full-bleed image layout). */
.deb-section.deb-section--has-frame {
	position: relative;
	box-sizing: border-box;
	border-width: var(--deb-section-frame-width, 2px);
	border-style: var(--deb-section-frame-style, solid);
	border-color: var(--deb-section-frame-color, var(--deb-accent, #b50f1c));
}
.deb-hero.deb-section--has-frame {
	position: relative;
}
.deb-hero.deb-section--has-frame::before {
	content: "";
	position: absolute;
	inset: var(--deb-section-frame-inset, 6px);
	border: var(--deb-section-frame-width, 2px) var(--deb-section-frame-style, solid) var(--deb-section-frame-color, var(--deb-accent, #b50f1c));
	pointer-events: none;
	z-index: 3;
}
/* Dark gradient overlay so the title is always readable over the image.
 * Hidden when there's no image so the page background shows untouched. */
.deb-hero__overlay {
	position: absolute;
	inset: 0;
	background: var(--deb-hero-overlay-color-d, #000000);
	opacity: var(--deb-hero-overlay-opacity-d, 0);
	z-index: 1;
}
.deb-hero.deb-hero--no-image .deb-hero__overlay { display: none; }
@media (min-width: 1025px) {
	.deb-hero--mode-d-none .deb-hero__overlay { display: none; }
	.deb-hero--overlay-d-on .deb-hero__overlay { display: block !important; }
	.deb-hero--overlay-d-off .deb-hero__overlay { display: none !important; }
}

/*
 * --deb-hero-edge: inset for inner padding and scroll cue from the bottom.
 */
.deb-hero { --deb-hero-edge: clamp(20px, 4vw, 60px); }

/* Inner content block: title + tagline stacked and vertically centred. */
.deb-hero__inner {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: var(--deb-hero-inner-pad-top, var(--deb-hero-edge)) clamp(20px, 5vw, 60px) var(--deb-hero-inner-pad-bottom, var(--deb-hero-edge));
	transform: translateY(var(--deb-hero-text-offset-y-d, 0px));
}
.deb-hero__title {
	margin: 0;
	padding-top: var(--deb-hero-title-pad-top, 0);
	padding-right: var(--deb-hero-title-pad-right, 0);
	padding-bottom: var(--deb-hero-title-pad-bottom, 0);
	padding-left: var(--deb-hero-title-pad-left, 0);
	color: var(--deb-hero-title-color, #fff) !important;        /* defeat themes that color all h1s */
	font-size: var(--deb-hero-title-size, 72px);
	line-height: 1.04;
	font-weight: var(--deb-hero-title-weight, 800);
	font-style: var(--deb-hero-title-style, normal);
	text-decoration: var(--deb-hero-title-decoration, none);
	text-align: var(--deb-hero-title-align, center);
	font-family: var(--deb-hero-title-family, inherit);
	letter-spacing: .01em;
	text-transform: uppercase;
	text-shadow: var(--deb-hero-title-shadow, 0 2px 16px rgba(0, 0, 0, .6));
}

/*
 * Bottom block: scroll-down cue only (tagline lives in .deb-hero__inner).
 */
.deb-hero__bottom {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--deb-hero-edge);
	z-index: 2;
	text-align: center;
	pointer-events: none;
}
.deb-hero__tagline {
	margin: 0;
	padding-top: var(--deb-hero-tagline-pad-top, 0);
	padding-right: var(--deb-hero-tagline-pad-right, 0);
	padding-bottom: var(--deb-hero-tagline-pad-bottom, 0);
	padding-left: var(--deb-hero-tagline-pad-left, 0);
	color: var(--deb-hero-tagline-color, #fff) !important;
	font-size: var(--deb-hero-tagline-size, clamp(15px, 1.4vw, 18px));
	font-weight: var(--deb-hero-tagline-weight, 400);
	font-style: var(--deb-hero-tagline-style, normal);
	text-decoration: var(--deb-hero-tagline-decoration, none);
	text-align: var(--deb-hero-tagline-align, center);
	font-family: var(--deb-hero-tagline-family, inherit);
	opacity: .95;
	text-shadow: var(--deb-hero-tagline-shadow, 0 1px 6px rgba(0, 0, 0, .55));
}

/* Banner-specific tablet design layer. Existing layouts already use
 * 769–1024 px as their tablet interval. */
@media (min-width: 769px) and (max-width: 1024px) {
	.deb-hero__device-layer--d { display: none; }
	.deb-hero__device-layer--t { display: block; }
	.deb-hero--mode-t-none .deb-hero__overlay { display: none; }
	.deb-hero {
		min-height: var(--deb-hero-min-height-t, var(--deb-hero-min-height, 640px));
		background-color: var(--deb-hero-canvas-t, var(--deb-hero-canvas-d, #111111));
	}
	.deb-hero__overlay {
		background: var(--deb-hero-overlay-color-t, var(--deb-hero-overlay-color-d, #000000));
		opacity: var(--deb-hero-overlay-opacity-t, 0);
	}
	.deb-hero--overlay-t-on .deb-hero__overlay { display: block !important; }
	.deb-hero--overlay-t-off .deb-hero__overlay { display: none !important; }
	.deb-hero__bg {
		object-position: var(--deb-hero-image-pos-t, var(--deb-hero-image-pos-d, center));
	}
	.deb-hero--fit-t-cover .deb-hero__bg { object-fit: cover; }
	.deb-hero--fit-t-contain .deb-hero__bg { object-fit: contain; }
	.deb-hero.deb-hero--fit-t-cover,
	.deb-hero.deb-hero--fit-t-contain {
		min-height: var(--deb-hero-min-height-t, var(--deb-hero-min-height, 640px));
		padding-bottom: 0;
	}
	.deb-hero.deb-hero--fit-t-cover .deb-hero__stage,
	.deb-hero.deb-hero--fit-t-contain .deb-hero__stage {
		position: absolute;
		inset: 0;
		order: unset;
		width: auto;
	}
	.deb-hero.deb-hero--fit-t-cover .deb-hero__bg,
	.deb-hero.deb-hero--fit-t-contain .deb-hero__bg {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}
	.deb-hero.deb-hero--fit-t-cover .deb-hero__overlay,
	.deb-hero.deb-hero--fit-t-contain .deb-hero__overlay { display: block; }
	.deb-hero.deb-hero--fit-t-cover .deb-hero__inner,
	.deb-hero.deb-hero--fit-t-contain .deb-hero__inner {
		flex: 1 1 auto;
		order: unset;
	}
	.deb-hero.deb-hero--fit-t-cover .deb-hero__bottom,
	.deb-hero.deb-hero--fit-t-contain .deb-hero__bottom {
		position: absolute;
		order: unset;
		bottom: var(--deb-hero-edge);
	}
	.deb-hero--mode-t-image.deb-hero--fit-t-natural:not(.deb-hero--envelope-bg) {
		min-height: 0;
		padding-bottom: 0;
		background-color: var(--deb-hero-canvas-t, #111111);
	}
	.deb-hero--mode-t-image.deb-hero--fit-t-natural:not(.deb-hero--envelope-bg) .deb-hero__stage {
		position: relative;
		inset: auto;
		order: 1;
		flex: 0 0 auto;
		width: 100%;
	}
	.deb-hero--mode-t-image.deb-hero--fit-t-natural:not(.deb-hero--envelope-bg) .deb-hero__device-layer--t {
		position: relative;
		inset: auto;
	}
	.deb-hero--mode-t-image.deb-hero--fit-t-natural:not(.deb-hero--envelope-bg) .deb-hero__bg {
		position: static;
		width: 100%;
		height: auto;
		object-fit: contain;
	}
	.deb-hero--mode-t-image.deb-hero--fit-t-natural:not(.deb-hero--envelope-bg) .deb-hero__overlay { display: none; }
	.deb-hero--mode-t-image.deb-hero--fit-t-natural:not(.deb-hero--envelope-bg) .deb-hero__inner {
		flex: 0 0 auto;
		order: 2;
		min-height: var(--deb-hero-panel-height-t, auto);
		padding-top: var(--deb-hero-panel-pad-top-t, 18px);
		padding-bottom: var(--deb-hero-panel-pad-bottom-t, 18px);
		justify-content: var(--deb-hero-panel-align-t, center);
	}
	.deb-hero--mode-t-image.deb-hero--fit-t-natural:not(.deb-hero--envelope-bg) .deb-hero__bottom {
		position: static;
		order: 3;
		padding: 0 var(--deb-hero-edge);
	}
	.deb-hero__inner {
		transform: translateY(var(--deb-hero-text-offset-y-t, var(--deb-hero-text-offset-y-d, 0px)));
	}
	.deb-hero__title {
		font-size: var(--deb-hero-title-t-size, var(--deb-hero-title-size, 72px));
		font-weight: var(--deb-hero-title-t-weight, var(--deb-hero-title-weight, 800));
		font-style: var(--deb-hero-title-t-style, var(--deb-hero-title-style, normal));
		text-decoration: var(--deb-hero-title-t-decoration, var(--deb-hero-title-decoration, none));
		text-align: var(--deb-hero-title-t-align, var(--deb-hero-title-align, center));
		font-family: var(--deb-hero-title-t-family, var(--deb-hero-title-family, inherit));
		color: var(--deb-hero-title-t-color, var(--deb-hero-title-color, #fff)) !important;
		text-shadow: var(--deb-hero-title-t-shadow, var(--deb-hero-title-shadow, none));
		padding: var(--deb-hero-title-t-pad-top, var(--deb-hero-title-pad-top, 0))
			var(--deb-hero-title-t-pad-right, var(--deb-hero-title-pad-right, 0))
			var(--deb-hero-title-t-pad-bottom, var(--deb-hero-title-pad-bottom, 0))
			var(--deb-hero-title-t-pad-left, var(--deb-hero-title-pad-left, 0));
	}
	.deb-hero__tagline {
		font-size: var(--deb-hero-tagline-t-size, var(--deb-hero-tagline-size, 18px));
		font-weight: var(--deb-hero-tagline-t-weight, var(--deb-hero-tagline-weight, 400));
		font-style: var(--deb-hero-tagline-t-style, var(--deb-hero-tagline-style, normal));
		text-decoration: var(--deb-hero-tagline-t-decoration, var(--deb-hero-tagline-decoration, none));
		text-align: var(--deb-hero-tagline-t-align, var(--deb-hero-tagline-align, center));
		font-family: var(--deb-hero-tagline-t-family, var(--deb-hero-tagline-family, inherit));
		color: var(--deb-hero-tagline-t-color, var(--deb-hero-tagline-color, #fff)) !important;
		text-shadow: var(--deb-hero-tagline-t-shadow, var(--deb-hero-tagline-shadow, none));
		padding: var(--deb-hero-tagline-t-pad-top, var(--deb-hero-tagline-pad-top, 0))
			var(--deb-hero-tagline-t-pad-right, var(--deb-hero-tagline-pad-right, 0))
			var(--deb-hero-tagline-t-pad-bottom, var(--deb-hero-tagline-pad-bottom, 0))
			var(--deb-hero-tagline-t-pad-left, var(--deb-hero-tagline-pad-left, 0));
	}
}

/* Down-arrow scroll cue — size/color via --deb-scroll-icon-* on the link. */
.deb-section__scroll,
.deb-hero__scroll {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	min-height: 24px;
	color: var(--deb-scroll-icon-color, #fff);
	text-decoration: none !important;
	opacity: .85;
	transition: transform .25s ease, opacity .15s ease;
	pointer-events: auto;          /* re-enable for the actual link */
}
.deb-section__scroll:hover,
.deb-hero__scroll:hover { opacity: 1; transform: translateY(3px); }
.deb-hero__scroll-arrow {
	display: block;
	width: var(--deb-scroll-icon-size, 22px);
	height: var(--deb-scroll-icon-size, 22px);
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg) translate(-3px, -3px);
}
.deb-hero__scroll--chevron-wide .deb-hero__scroll-arrow {
	border-right-width: 2px;
	border-bottom-width: 2px;
}
.deb-hero__scroll--arrow .deb-hero__scroll-arrow {
	border: none;
	width: 2px;
	height: var(--deb-scroll-icon-size, 22px);
	background: currentColor;
	transform: none;
	position: relative;
}
.deb-hero__scroll--arrow .deb-hero__scroll-arrow::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: calc(var(--deb-scroll-icon-size, 22px) * 0.45);
	height: calc(var(--deb-scroll-icon-size, 22px) * 0.45);
	margin-left: calc(var(--deb-scroll-icon-size, 22px) * -0.225);
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	background: transparent;
}
.deb-hero__scroll--double {
	min-height: calc(var(--deb-scroll-icon-size, 22px) * 1.35);
}
.deb-hero__scroll-arrow--double {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(var(--deb-scroll-icon-size, 22px) * 0.14);
	width: var(--deb-scroll-icon-size, 22px);
	height: auto;
	border: none;
	transform: none;
}
.deb-hero__scroll-arrow--double .deb-hero__scroll-chevron {
	display: block;
	flex: 0 0 auto;
	width: calc(var(--deb-scroll-icon-size, 22px) * 0.52);
	height: calc(var(--deb-scroll-icon-size, 22px) * 0.52);
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	box-sizing: border-box;
}
.deb-section__scroll-img,
.deb-hero__scroll-img {
	display: block;
	width: var(--deb-scroll-icon-size, 22px);
	height: var(--deb-scroll-icon-size, 22px);
	object-fit: contain;
}

/* Scroll icon at the bottom of non-hero sections. */
.deb-section__scroll-wrap {
	text-align: center;
	padding: 0;
	margin-top: 12px;
}

/*
 * Hero logo badge — image or text, anchored to a chosen edge.
 * Placement vars (--deb-hero-logo-pos-*, sizes, text colours) are set on
 * .deb-event in PHP so both the in-hero and floating desktop nodes inherit.
 */
.deb-hero__logo {
	position: absolute;
	z-index: 10;
}
.deb-hero__logo--edge-right {
	right: 0;
	left: auto;
	top: var(--deb-hero-logo-pos-d, 50%);
	bottom: auto;
	transform: translateY(-50%);
}
.deb-hero__logo--edge-left {
	left: 0;
	right: auto;
	top: var(--deb-hero-logo-pos-d, 50%);
	bottom: auto;
	transform: translateY(-50%);
}
.deb-hero__logo--edge-top {
	top: 0;
	bottom: auto;
	left: var(--deb-hero-logo-pos-d, 50%);
	right: auto;
	transform: translateX(-50%);
}
.deb-hero__logo--edge-bottom {
	bottom: 0;
	top: auto;
	left: var(--deb-hero-logo-pos-d, 50%);
	right: auto;
	transform: translateX(-50%);
}
.deb-hero__logo--image img {
	display: block;
	max-height: var(--deb-hero-logo-size-d, 80px);
	max-width: calc(var(--deb-hero-logo-size-d, 80px) * 1.5);
	height: auto;
	width: auto;
}
.deb-hero__logo--text .deb-hero__logo-text {
	display: inline-block;
	background: var(--deb-hero-logo-text-bg, #000);
	color: var(--deb-hero-logo-text-color, #fff);
	font-family: var(--deb-hero-logo-font, var(--deb-font-family));
	font-size: var(--deb-hero-logo-text-size-d, 14px);
	font-weight: 600;
	line-height: 1.2;
	padding: 8px 14px;
	border-radius: 6px;
	white-space: nowrap;
}
/* Text on left/right edges — vertical, reads bottom → top. */
.deb-hero__logo--text.deb-hero__logo--edge-right .deb-hero__logo-text {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	transform: rotate(180deg);
	padding: 14px 8px;
}
.deb-hero__logo--text.deb-hero__logo--edge-left .deb-hero__logo-text {
	writing-mode: vertical-lr;
	text-orientation: mixed;
	transform: rotate(180deg);
	padding: 14px 8px;
}

/*
 * Floating logo (desktop only) — fixed to the chosen viewport edge.
 * .is-out is toggled by event.js when the event block scrolls away.
 */
.deb-event__logo--floating {
	display: none;
	pointer-events: none;
}
.deb-event__logo--floating.deb-hero__logo--image img {
	display: block;
	max-height: var(--deb-hero-logo-size-d, 80px);
	max-width: calc(var(--deb-hero-logo-size-d, 80px) * 1.5);
	height: auto;
	width: auto;
}
.deb-event__logo--floating.deb-hero__logo--text .deb-hero__logo-text {
	display: inline-block;
	background: var(--deb-hero-logo-text-bg, #000);
	color: var(--deb-hero-logo-text-color, #fff);
	font-family: var(--deb-hero-logo-font, var(--deb-font-family));
	font-size: var(--deb-hero-logo-text-size-d, 14px);
	font-weight: 600;
	line-height: 1.2;
	padding: 8px 14px;
	border-radius: 6px;
	white-space: nowrap;
}
.deb-event__logo--floating.deb-hero__logo--text.deb-hero__logo--edge-right .deb-hero__logo-text {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	transform: rotate(180deg);
	padding: 14px 8px;
}
.deb-event__logo--floating.deb-hero__logo--text.deb-hero__logo--edge-left .deb-hero__logo-text {
	writing-mode: vertical-lr;
	text-orientation: mixed;
	transform: rotate(180deg);
	padding: 14px 8px;
}
@media (min-width: 769px) {
	.deb-event__logo--floating {
		display: block;
		position: fixed;
		z-index: 30;
		opacity: 1;
		transition: opacity .25s ease;
	}
	.deb-event__logo--floating.deb-hero__logo--edge-right {
		right: 0;
		left: auto;
		top: var(--deb-hero-logo-pos-d, 50%);
		bottom: auto;
		transform: translateY(-50%);
	}
	.deb-event__logo--floating.deb-hero__logo--edge-left {
		left: 0;
		right: auto;
		top: var(--deb-hero-logo-pos-d, 50%);
		bottom: auto;
		transform: translateY(-50%);
	}
	.deb-event__logo--floating.deb-hero__logo--edge-top {
		top: 0;
		bottom: auto;
		left: var(--deb-hero-logo-pos-d, 50%);
		right: auto;
		transform: translateX(-50%);
	}
	.deb-event__logo--floating.deb-hero__logo--edge-bottom {
		bottom: 0;
		top: auto;
		left: var(--deb-hero-logo-pos-d, 50%);
		right: auto;
		transform: translateX(-50%);
	}
	.deb-event__logo--floating.is-out {
		opacity: 0;
	}
	.deb-hero__logo { display: none; }
}
@media (min-width: 769px) and (max-width: 1024px) {
	.deb-event__logo--floating.deb-hero__logo--image img {
		max-height: var(--deb-hero-logo-size-t, var(--deb-hero-logo-size-d, 80px));
		max-width: calc(var(--deb-hero-logo-size-t, var(--deb-hero-logo-size-d, 80px)) * 1.5);
	}
	.deb-event__logo--floating.deb-hero__logo--text .deb-hero__logo-text {
		font-size: var(--deb-hero-logo-text-size-t, var(--deb-hero-logo-text-size-d, 14px));
	}
	.deb-event__logo--floating.deb-hero__logo--edge-right,
	.deb-event__logo--floating.deb-hero__logo--edge-left {
		top: var(--deb-hero-logo-pos-t, var(--deb-hero-logo-pos-d, 50%));
	}
	.deb-event__logo--floating.deb-hero__logo--edge-top,
	.deb-event__logo--floating.deb-hero__logo--edge-bottom {
		left: var(--deb-hero-logo-pos-t, var(--deb-hero-logo-pos-d, 50%));
	}
}

/* ------------------------------------------------------------------ *
 * Page ribbon — full-height gradient band (Design → Page).
 * Independent of the Banner hero logo badge. Content inset is applied
 * on .deb-event when --ribbon placement is screen edge, or on narrow
 * viewports for content edge (ribbon sits in the gutter on desktop).
 * ------------------------------------------------------------------ */
.deb-event__ribbon {
	display: none;
}
.deb-event--ribbon .deb-event__ribbon {
	display: flex;
	position: fixed;
	top: 0;
	height: 100vh;
	height: 100dvh;
	width: var(--deb-ribbon-width-m, 40px);
	z-index: 25;
	pointer-events: none;
	background: var(--deb-ribbon-gradient, linear-gradient(to bottom, #b50f1c, #8a0b15));
	align-items: center;
	justify-content: center;
	opacity: 1;
	transition: opacity .25s ease;
	box-sizing: border-box;
	padding: 12px 6px;
}
.deb-event__ribbon.is-out {
	opacity: 0;
}
.deb-event__ribbon--placement-screen.deb-event__ribbon--edge-left {
	left: 0;
	right: auto;
}
.deb-event__ribbon--placement-screen.deb-event__ribbon--edge-right {
	right: 0;
	left: auto;
}
.deb-event__ribbon--placement-content.deb-event__ribbon--edge-left {
	left: 0;
	right: auto;
}
.deb-event__ribbon--placement-content.deb-event__ribbon--edge-right {
	right: 0;
	left: auto;
}
.deb-event__ribbon-text {
	color: var(--deb-ribbon-text-color, #fff);
	font-family: var(--deb-ribbon-font, var(--deb-font-family));
	font-size: var(--deb-ribbon-text-size-m, 12px);
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}
.deb-event__ribbon--edge-left .deb-event__ribbon-text {
	writing-mode: vertical-lr;
	text-orientation: mixed;
	transform: rotate(180deg);
}
.deb-event__ribbon--edge-right .deb-event__ribbon-text {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	transform: rotate(180deg);
}
/* Screen edge: always inset content by ribbon width. */
.deb-event--ribbon-screen.deb-event--ribbon-left {
	padding-left: var(--deb-ribbon-width-m, 40px);
}
.deb-event--ribbon-screen.deb-event--ribbon-right {
	padding-right: var(--deb-ribbon-width-m, 40px);
}
/* Content edge: inset on narrow viewports; gutter placement on desktop. */
.deb-event--ribbon-content.deb-event--ribbon-left {
	padding-left: var(--deb-ribbon-width-m, 40px);
}
.deb-event--ribbon-content.deb-event--ribbon-right {
	padding-right: var(--deb-ribbon-width-m, 40px);
}
@media (min-width: 769px) {
	.deb-event--ribbon .deb-event__ribbon {
		width: var(--deb-ribbon-width-d, 48px);
	}
	.deb-event__ribbon-text {
		font-size: var(--deb-ribbon-text-size-d, 14px);
	}
	.deb-event--ribbon-screen.deb-event--ribbon-left {
		padding-left: var(--deb-ribbon-width-d, 48px);
	}
	.deb-event--ribbon-screen.deb-event--ribbon-right {
		padding-right: var(--deb-ribbon-width-d, 48px);
	}
	.deb-event--ribbon-content.deb-event--ribbon-left {
		padding-left: 0;
	}
	.deb-event--ribbon-content.deb-event--ribbon-right {
		padding-right: 0;
	}
	.deb-event__ribbon--placement-content.deb-event__ribbon--edge-left {
		left: max(0px, calc((100vw - min(100vw, var(--deb-max-width))) / 2 - var(--deb-ribbon-width-d, 48px)));
	}
	.deb-event__ribbon--placement-content.deb-event__ribbon--edge-right {
		right: max(0px, calc((100vw - min(100vw, var(--deb-max-width))) / 2 - var(--deb-ribbon-width-d, 48px)));
	}
}

.deb-hero__sentinel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * Top nav
 *
 * Two visual modes:
 *  .deb-nav--standalone  → opaque dark bar (used when there's no hero)
 *  .deb-nav--in-hero     → transparent overlay sitting on top of the hero
 *  .deb-nav--in-hero.is-stuck
 *                        → after the user scrolls past the hero, the in-hero
 *                          nav re-attaches as a fixed top bar (only when the
 *                          admin enabled "Sticky top navigation").
 *
 * All selectors below are written with extra specificity + !important on the
 * font properties because host themes routinely add ::marker bullets and
 * underlines to <ul>/<a> globally.
 * ------------------------------------------------------------------ */
.deb-event .deb-nav { position: relative; z-index: 50; }
.deb-event .deb-nav__inner {
	--deb-nav-edge-inset: clamp(14px, 3vw, 28px);
	display: flex;
	align-items: center;
	width: min(
		calc(100% - var(--deb-nav-edge-inset) - var(--deb-nav-edge-inset)),
		var(--deb-max-width)
	);
	max-width: none;
	margin-inline: auto;
	padding-inline: 0;
}
.deb-event .deb-nav__brand {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	flex: 0 0 auto;
	max-width: min(34vw, 320px);
	margin-right: clamp(16px, 3vw, 40px);
	color: var(--deb-nav-brand-color, #fff) !important;
	text-decoration: none !important;
	line-height: 1;
	overflow: hidden;
	transition: opacity .15s ease;
}
.deb-event a.deb-nav__brand:hover,
.deb-event a.deb-nav__brand:focus-visible { opacity: .8; }
.deb-event a.deb-nav__brand:focus-visible {
	outline: 2px solid var(--deb-nav-font-color, #fff);
	outline-offset: 3px;
}
.deb-event .deb-nav__brand--text {
	padding-top: var(--deb-nav-brand-text-pad-top, 0);
	padding-bottom: var(--deb-nav-brand-text-pad-bottom, 0);
}
.deb-event .deb-nav__brand-image {
	display: block;
	width: auto;
	height: var(--deb-nav-brand-size-d, 32px);
	max-width: 100%;
	object-fit: contain;
}
.deb-event .deb-nav__brand-text {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: inherit;
	font-family: var(--deb-nav-font-family, var(--deb-font-family));
	font-size: var(--deb-nav-brand-size-d, 32px);
	font-weight: 700;
	line-height: 1.1;
}
.deb-event .deb-nav__partner-logos {
	display: flex;
	align-items: center;
	flex: 0 1 auto;
	min-width: 0;
	max-width: min(28vw, 320px);
	gap: clamp(6px, 1vw, 12px);
	margin-right: clamp(14px, 2.5vw, 32px);
}
.deb-event .deb-nav--partners-before-brand .deb-nav__partner-logos {
	margin-right: var(--deb-nav-partner-gap-d, 16px);
}
.deb-event .deb-nav--partners-after-brand .deb-nav__brand {
	margin-right: var(--deb-nav-partner-gap-d, 16px);
}
.deb-event .deb-nav--partners-after-menu .deb-nav__partner-logos {
	flex-shrink: 0;
	margin-right: 0;
	margin-left: auto;
	padding-left: var(--deb-nav-partner-gap-d, 16px);
}
.deb-event .deb-nav__partner-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 1 var(--deb-nav-partner-width-d, 80px);
	width: var(--deb-nav-partner-width-d, 80px);
	min-width: 0;
	color: inherit;
	text-decoration: none !important;
	transition: opacity .15s ease;
}
.deb-event a.deb-nav__partner-logo:hover,
.deb-event a.deb-nav__partner-logo:focus-visible { opacity: .8; }
.deb-event a.deb-nav__partner-logo:focus-visible {
	outline: 2px solid var(--deb-nav-font-color, #fff);
	outline-offset: 3px;
}
.deb-event .deb-nav__partner-logo-image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: 54px;
	object-fit: contain;
}

/* Reset list markers / theme bullet overrides */
.deb-event .deb-nav__list,
.deb-event .deb-nav__list > li {
	list-style: none !important;
	background: none !important;
}
.deb-event .deb-nav__list > li::before,
.deb-event .deb-nav__list > li::marker {
	content: "" !important;
	display: none !important;
}

.deb-event .deb-nav__list {
	display: flex;
	margin: 0;
	padding: 0;
	gap: clamp(18px, 3vw, 40px);
	justify-content: var(--deb-nav-justify, center);
	align-items: center;
	min-height: var(--deb-nav-min-height);
	flex-wrap: wrap;
}
.deb-event .deb-nav__item { margin: 0; padding: 0; }

.deb-event .deb-nav__link {
	display: inline-block;
	color: var(--deb-nav-font-color, #fff) !important;
	text-decoration: var(--deb-nav-text-decoration, none) !important;
	text-align: var(--deb-nav-align, center);
	font-family: var(--deb-nav-font-family, var(--deb-font-family)) !important;
	font-size: var(--deb-nav-font-size, 15px);
	font-style: var(--deb-nav-font-style, normal);
	font-weight: var(--deb-nav-font-weight, 500);
	letter-spacing: .03em;
	padding: 8px 4px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	transition: border-color .15s ease, opacity .15s ease;
	opacity: .9;
}
.deb-event .deb-nav__link:hover,
.deb-event .deb-nav__link:focus-visible {
	opacity: 1;
	border-bottom-color: currentColor;
}
.deb-event .deb-nav__link[aria-current="true"] {
	opacity: 1;
	border-bottom-color: var(--deb-accent);
}

/* Standalone bar (always at the top of the page, before every section).
   Background colour + opacity are admin-tunable via --deb-nav-bg (emitted on
   the .deb-event wrapper). Falls back to the legacy dark bar when unset. */
.deb-nav--standalone {
	background: var(--deb-nav-bg, rgba(0,0,0,.85));
	backdrop-filter: blur(8px);
	padding: var(--deb-nav-padding-top, 0) 0 var(--deb-nav-padding-bottom, 0);
}
.deb-nav--standalone.is-sticky { position: sticky; top: 0; }
.deb-nav--standalone .deb-nav__list {
	flex: 1 1 auto;
	min-width: 0;
	margin-inline: 0;
}
/* Keep links legible even when the bar is transparent over a hero image. */
.deb-nav--standalone .deb-nav__link {
	text-shadow: 0 1px 6px rgba(0,0,0,.55);
}

/* In-hero flavor: a flex-item row at the top of the hero (NOT absolute, so
   it can never end up at the wrong vertical position regardless of theme). */
.deb-nav--in-hero {
	position: relative;
	z-index: 5;                            /* above hero overlay & frame */
	flex: 0 0 auto;
	background: transparent;
	backdrop-filter: none;
	padding: clamp(22px, 3vw, 36px) clamp(20px, 5vw, 60px) 0;
}
.deb-nav--in-hero .deb-nav__list {
	max-width: 1100px;
	margin-inline: auto;
	min-height: 0;                         /* let padding control spacing */
}
.deb-nav--in-hero .deb-nav__link {
	text-shadow: 0 1px 6px rgba(0,0,0,.55);
}

/* Sticky-on-scroll: when JS adds .is-stuck the nav becomes a fixed bar */
.deb-nav--in-hero.is-stuck {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,.92);
	backdrop-filter: blur(8px);
	box-shadow: 0 2px 14px rgba(0,0,0,.4);
	animation: deb-nav-drop .2s ease both;
}
@keyframes deb-nav-drop {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

/* Hamburger button — hidden on desktop, shown on mobile.
   Higher z-index than the menu list so the user can always tap it to
   close the menu (otherwise the open <ul> paints on top of the button
   because it comes after the <button> in DOM order). */
.deb-event .deb-nav__toggle {
	display: none;
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border: 0;
	background: transparent;
	cursor: pointer;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	align-items: center;
	padding: 0;
	z-index: 3;
}
.deb-event .deb-nav__toggle:focus-visible { outline: 2px solid var(--deb-nav-font-color, #fff); outline-offset: 2px; }
.deb-event .deb-nav__bar {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--deb-nav-font-color, #fff);
	transition: transform .2s ease, opacity .2s ease;
}
/* Hamburger morphs into an X when the menu is open — clear "tap to close" cue */
.deb-event .deb-nav.is-open .deb-nav__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.deb-event .deb-nav.is-open .deb-nav__bar:nth-child(2) { opacity: 0; }
.deb-event .deb-nav.is-open .deb-nav__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------------ *
 * Sections
 *
 * scroll-margin-top: when the user clicks a nav link, the browser will
 * land the section's TOP this many pixels below the viewport top so the
 * heading is not hidden under the sticky nav bar. Value matches the
 * approximate height of the in-hero nav (~80px) plus a 20px breathing
 * gap. JS uses Element.scrollIntoView() which respects this property
 * automatically — no per-click offset math required.
 * ------------------------------------------------------------------ */
.deb-event .deb-section { scroll-margin-top: calc(var(--deb-nav-h, 0px) + 20px); }
.deb-section {
	margin-top: var(--deb-section-pad-top, 20px);
	margin-bottom: var(--deb-section-pad-bottom, 20px);
	padding-top: var(--deb-section-inner-top, 0);
	padding-bottom: var(--deb-section-inner-bottom, 0);
	padding-left: var(--deb-section-padding-x);
	padding-right: var(--deb-section-padding-x);
	/* A section-level "None" background is an explicit white surface.
	   Backgrounds inside cards, text highlights and other nested controls
	   keep their existing transparent semantics. */
	background-color: #ffffff;
}
/* Section envelope background — full-viewport band on desktop (footer-style breakout).
 * Content stays in .deb-section__viewport-inner at page max-width. */
.deb-section.deb-section--bg-bleed {
	position: relative;
}
@media (min-width: 769px) {
	.deb-section.deb-section--bg-bleed {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		box-sizing: border-box;
		padding-left: 0;
		padding-right: 0;
	}
	.deb-section.deb-section--bg-bleed .deb-section__viewport-inner {
		max-width: var(--deb-max-width);
		margin: 0 auto;
		padding-left: var(--deb-section-padding-x);
		padding-right: var(--deb-section-padding-x);
		box-sizing: border-box;
	}
}
/* Hero envelope background bleed — ::after so frame decor can keep ::before. */
.deb-hero.deb-hero--bg-bleed {
	position: relative;
	overflow: visible;
}
@media (min-width: 769px) {
	.deb-hero.deb-hero--bg-bleed::after {
		content: "";
		position: absolute;
		z-index: 0;
		top: 0;
		bottom: 0;
		left: 50%;
		width: 100vw;
		margin-left: -50vw;
		background-image: var(--deb-section-bg-image, none);
		background-size: var(--deb-section-bg-size, cover);
		background-position: var(--deb-section-bg-position, center);
		background-repeat: var(--deb-section-bg-repeat, no-repeat);
		pointer-events: none;
	}
	.deb-hero.deb-hero--bg-bleed.deb-hero--fit-d-cover::after {
		background-size: cover;
		background-position: var(--deb-hero-image-pos-d, var(--deb-section-bg-position, center));
	}
	.deb-hero.deb-hero--bg-bleed.deb-hero--fit-d-contain::after,
	.deb-hero.deb-hero--bg-bleed.deb-hero--fit-d-natural::after {
		background-size: contain;
		background-position: var(--deb-hero-image-pos-d, var(--deb-section-bg-position, center));
	}
	.deb-hero.deb-hero--bg-bleed {
		background-image: none !important;
		background-size: unset;
		background-position: unset;
		background-repeat: unset;
	}
}
@media (min-width: 769px) and (max-width: 1024px) {
	.deb-hero.deb-hero--bg-bleed.deb-hero--fit-t-cover::after {
		background-size: cover;
		background-position: var(--deb-hero-image-pos-t, var(--deb-section-bg-position, center));
	}
	.deb-hero.deb-hero--bg-bleed.deb-hero--fit-t-contain::after,
	.deb-hero.deb-hero--bg-bleed.deb-hero--fit-t-natural::after {
		background-size: contain;
		background-position: var(--deb-hero-image-pos-t, var(--deb-section-bg-position, center));
	}
}
.deb-section__header { margin: 0 auto 20px; max-width: 640px; }
.deb-section__title {
	margin: 0;
	padding-top: var(--deb-section-title-pad-top, 0);
	padding-right: var(--deb-section-title-pad-right, 0);
	padding-bottom: var(--deb-section-title-pad-bottom, 0);
	padding-left: var(--deb-section-title-pad-left, 0);
	font-size: var(--deb-section-title-size, clamp(22px, 3vw, 36px));
	font-weight: var(--deb-section-title-weight, 700);
	font-style: var(--deb-section-title-style, normal);
	text-decoration: var(--deb-section-title-decoration, none);
	text-align: var(--deb-section-title-align, center);
	font-family: var(--deb-section-title-family, inherit);
	color: var(--deb-section-title-color, var(--deb-text));
}
.deb-section__title-mark {
	background: var(--deb-section-title-bg, transparent);
	color: var(--deb-section-title-color, inherit);
	padding: var(--deb-section-title-mark-pad-y, 0.15em)
		var(--deb-section-title-mark-pad-x, 0.35em);
	border-radius: var(--deb-section-title-mark-radius, 4px);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
.deb-section__subtitle {
	margin: 8px 0 0;
	padding-top: var(--deb-section-subtitle-pad-top, 0);
	padding-right: var(--deb-section-subtitle-pad-right, 0);
	padding-bottom: var(--deb-section-subtitle-pad-bottom, 0);
	padding-left: var(--deb-section-subtitle-pad-left, 0);
	font-size: var(--deb-section-subtitle-size, 15px);
	font-weight: var(--deb-section-subtitle-weight, 400);
	font-style: var(--deb-section-subtitle-style, normal);
	text-decoration: var(--deb-section-subtitle-decoration, none);
	text-align: var(--deb-section-subtitle-align, center);
	font-family: var(--deb-section-subtitle-family, inherit);
	color: var(--deb-section-subtitle-color, var(--deb-text));
	opacity: .85;
}

/* Rich text (1-column prose block) */
.deb-richtext.deb-prose {
	color: var(--deb-richtext-color, var(--deb-text));
	font-size: var(--deb-richtext-font-size, 16px);
	line-height: 1.65;
	max-width: var(--deb-max-width, 1200px);
	margin-inline: auto;
}
.deb-richtext.deb-prose > :first-child {
	margin-top: 0;
}
.deb-richtext.deb-prose > :last-child {
	margin-bottom: 0;
}
.deb-richtext.deb-prose p,
.deb-richtext.deb-prose li,
.deb-richtext.deb-prose ol,
.deb-richtext.deb-prose ul,
.deb-richtext.deb-prose blockquote {
	color: inherit;
}
.deb-richtext.deb-prose a {
	color: var(--deb-richtext-link-color, var(--deb-accent, #b50f1c));
	text-decoration: underline;
}
.deb-richtext.deb-prose a:hover,
.deb-richtext.deb-prose a:focus-visible {
	opacity: 0.85;
}
.deb-richtext.deb-prose h2,
.deb-richtext.deb-prose h3,
.deb-richtext.deb-prose h4 {
	color: inherit;
	margin: 1.2em 0 0.5em;
	line-height: 1.25;
}
.deb-richtext.deb-prose ul,
.deb-richtext.deb-prose ol {
	padding-left: 1.4em;
}
@media (max-width: 768px) {
	.deb-richtext.deb-prose [style*="text-align: justify"],
	.deb-richtext.deb-prose [style*="text-align:justify"],
	.deb-section--blog .deb-card__text.deb-prose [style*="text-align: justify"],
	.deb-section--blog .deb-card__text.deb-prose [style*="text-align:justify"] {
		text-align: left !important;
	}
}

/* ------------------------------------------------------------------ *
 * Form (registration)
 *
 * Visual parity with .deb-resource-row: same border-radius, padding,
 * shadow, white background, and IDENTICAL typography for the inline
 * label-as-placeholder. Selectors are scoped under .deb-event to give
 * them enough specificity to beat themes that target raw `input` /
 * `.theme input` with !important.
 *
 * Width: the grid is capped at --deb-field-max-width (admin-tunable)
 * and centred horizontally so the block sits in the middle of the
 * section, mirroring .deb-resources below.
 * ------------------------------------------------------------------ */
.deb-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 16px;
	width: 100%;
	max-width: var(--deb-field-max-width, 720px);
	margin-left: auto;
	margin-right: auto;
}
.deb-form-cell {
	width: 100%;                    /* fill its column by default */
}
.deb-form-cell--full {
	grid-column: 1 / -1;            /* textareas always span both columns */
}

.deb-event .deb-input { display: block; width: 100%; }
.deb-event .deb-input__label {
	display: block;
	text-align: center;
	font-size: 12px;
	margin: 0 0 6px;
	color: var(--deb-text);
	opacity: .9;
	letter-spacing: .02em;
}

/* Visible field labels (select, date, radio legend) — match input placeholder typography. */
.deb-event .deb-input > .deb-input__label:not(.sr-only),
.deb-event .deb-form-choice > .deb-input__label {
	display: block;
	text-align: left;
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 8px;
	color: var(--deb-text);
	opacity: 1;
	letter-spacing: normal;
}

/* Visually hide the label but keep it available to screen readers. */
.deb-event .deb-input__label.sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	border: 0; white-space: nowrap;
}

/*
 * Placeholder typography matches .deb-resource__label (15px / 600 /
 * full-strength text) so a blank Registrácia field reads exactly like a
 * resource row's label. We add a tiny opacity so the user can still tell
 * "this is a hint, type to replace it".
 */
.deb-event .deb-input input::placeholder,
.deb-event .deb-input textarea::placeholder {
	color: var(--deb-card-text);
	opacity: .85;                   /* defeat Firefox's default 0.54 */
	font-weight: 600;
	font-size: 15px;
	font-family: inherit;
}
.deb-event .deb-input input,
.deb-event .deb-input select,
.deb-event .deb-input textarea {
	width: 100%;
	background: var(--deb-card-bg) !important;          /* same as .deb-resource-row */
	color: var(--deb-card-text) !important;
	border: 0 !important;
	border-radius: var(--deb-radius) !important;        /* same shape as resource row */
	padding: 14px 22px !important;                       /* identical padding to resource row */
	font-size: 15px;                                     /* identical typography to resource label */
	font-weight: 600;
	font-family: inherit;
	line-height: 1.3;
	box-shadow: var(--deb-shadow) !important;            /* same shadow as resource row */
	box-sizing: border-box;
	text-align: left;
	min-height: var(--deb-field-min-height, 52px);       /* lock to global field height */
}
/* Textareas need a taller min-height than the global; we use the larger
   of the two so a small global value never collapses the textarea. */
.deb-event .deb-input textarea {
	min-height: max(88px, var(--deb-field-min-height, 52px));
	resize: vertical;
	font-weight: 500;
}
.deb-event .deb-input input:focus,
.deb-event .deb-input select:focus,
.deb-event .deb-input textarea:focus {
	outline: 2px solid var(--deb-accent);
	outline-offset: 1px;
}

/* Custom chevron — inset from the right edge (native arrow sits too far right). */
.deb-event .deb-input select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 48px !important;
	background: var(--deb-card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231d1d1d' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E") no-repeat right 28px center / 12px 8px !important;
}

/* Registration choice fields (select / radio / checkbox) */
.deb-form-radios {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.deb-form-radios > li {
	list-style: none !important;
	margin: 0;
}

/* Registration radio (single choice) — dim unselected like Resources. */
.deb-form-radios[data-render="radio"] .deb-form-radio-row.is-dimmed-unselected {
	opacity: .45;
}

.deb-form-radio-row.is-selected .deb-form-radio {
	box-shadow: 0 0 0 2px var(--deb-accent), 0 6px 18px rgba(0,0,0,.18);
}

.deb-form-radio,
.deb-form-check {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--deb-input-bg);
	color: var(--deb-input-text);
	border-radius: var(--deb-radius) !important;
	padding: 14px 22px;
	box-shadow: var(--deb-shadow);
	box-sizing: border-box;
	min-height: var(--deb-field-min-height, 52px);
	cursor: pointer;
	margin: 0;
	width: 100%;
	transition: box-shadow .15s ease;
}

.deb-form-radio-row {
	transition: opacity .15s ease;
}

.deb-form-radio input[type="radio"],
.deb-form-check input[type="checkbox"] {
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	margin: 0;
	cursor: pointer;
	accent-color: var(--deb-accent);
}

.deb-form-radio span,
.deb-form-check span {
	flex: 1;
	min-width: 0;
	line-height: 1.35;
	font-weight: 600;
	font-size: 15px;
}

.deb-form-choice {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
	width: 100%;
}

.deb-form-choice .deb-input__label {
	margin-bottom: 10px;
}

.deb-form-choice.has-error .deb-form-radio,
.deb-form-check.has-error {
	box-shadow: 0 0 0 2px #d63638, var(--deb-shadow);
}

/* Honeypot is visually hidden but kept reachable for bots */
.deb-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * Resources (checkboxes / radios)
 *
 * Renders one rectangular row per item in a 2-column grid (single column
 * on mobile). The row highlights when its input is checked — JS toggles
 * `.is-selected` on the row whenever the input change fires (so :has() is
 * not required).
 * ------------------------------------------------------------------ */
.deb-resources {
	list-style: none;
	margin: 0 auto;                                      /* centred horizontally */
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 16px;
	width: 100%;
	max-width: var(--deb-field-max-width, 720px);        /* matches Registrácia field width */
}
/* Radio (single-choice) sections — full-width rows; help text + counter need room. */
.deb-resources[data-render="radio"] {
	grid-template-columns: 1fr;
}

/* Equal row height when some items have a help line and others do not (e.g. "No room needed"). */
.deb-resources[data-render="radio"] .deb-resource-row {
	min-height: 70px;
	align-items: center;
}
.deb-resources[data-render="radio"] .deb-resource {
	align-items: center;
}
.deb-resources[data-render="radio"] .deb-resource__body {
	min-height: calc(15px * 1.3 + 2px + 13px * 1.35);
	justify-content: center;
}
/* Defeat themes that re-add list bullets */
.deb-resources > li { list-style: none !important; min-width: 0; }
.deb-resources > li::before,
.deb-resources > li::marker { content: "" !important; display: none !important; }

.deb-resource-row {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--deb-card-bg);
	color: var(--deb-card-text);
	border-radius: var(--deb-radius) !important;   /* match form inputs — rectangular, defeat theme overrides */
	padding: 14px 22px;
	box-shadow: var(--deb-shadow);
	transition: box-shadow .15s ease, transform .1s ease;
	box-sizing: border-box;
	min-height: var(--deb-field-min-height, 52px); /* same height as registration inputs */
	min-width: 0;
}
.deb-resource-row:hover { box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.deb-resource-row.is-selected {
	box-shadow: 0 0 0 2px var(--deb-accent), 0 6px 18px rgba(0,0,0,.18);
}
.deb-resource-row.is-sold-out,
.deb-resource-row.is-capped {
	opacity: .55;
	cursor: not-allowed;
}
.deb-resource-row.is-capped input { cursor: not-allowed; }

/*
 * Greyed out because an exclusive opt-out item ("Nemám záujem" / "None of
 * the above") is currently selected in the same section. JS toggles this
 * class on every other row whenever the opt-out is checked / unchecked.
 * Checkbox sections only — must uncheck opt-out to pick again.
 */
.deb-resource-row.is-disabled-by-optout {
	opacity: .45;
	cursor: not-allowed;
	pointer-events: none;
}

/* Radio: dim unselected options while one is picked — still clickable. */
.deb-resources[data-render="radio"] .deb-resource-row.is-dimmed-unselected {
	opacity: .45;
}

.deb-resource {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	flex: 1;
	min-width: 0;
	cursor: pointer;
	margin: 0;                       /* defeat theme label margins */
}

.deb-resource__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	gap: 2px;
}

/* Native input, restyled with accent-color so the dot/check matches the theme */
.deb-resources input[type="radio"],
.deb-resources input[type="checkbox"] {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	margin: 0;
	margin-top: 2px;                 /* optically centre with first text line */
	cursor: pointer;
	accent-color: var(--deb-accent);
}

.deb-resource__label {
	font-weight: 600;
	font-size: 15px;
	color: var(--deb-card-text);
	min-width: 0;
	overflow-wrap: break-word;
}
.deb-resource__help {
	display: block;
	margin: 0;
	color: rgba(0,0,0,.55);
	font-weight: 400;
	font-size: 13px;
	line-height: 1.35;
	min-width: 0;
	overflow-wrap: break-word;
}
.deb-resource__counter {
	flex-shrink: 0;
	align-self: center;
	margin-left: auto;
	font-size: 12px;
	color: rgba(0,0,0,.55);
	white-space: nowrap;
}

/* Radio + capacity counter: stack counter as a third line on very narrow viewports
 * (builder preview ~256px). Phones ~390px keep label+help left, counter right. */
@media (max-width: 380px) {
	.deb-resources[data-render="radio"] .deb-resource-row:has(.deb-resource__counter) {
		flex-wrap: wrap;
		row-gap: 4px;
		align-items: flex-start;
	}
	.deb-resources[data-render="radio"] .deb-resource__counter {
		flex: 1 1 100%;
		margin-left: calc(18px + 12px);
		align-self: flex-start;
		text-align: left;
	}
}

/* Desktop 2-column grid (checkbox): centre a lone card on the last row. */
@media (min-width: 769px) {
	.deb-resources:not([data-render="radio"]) > li:only-child {
		grid-column: 1 / -1;
	}
	.deb-resources:not([data-render="radio"]) > li:last-child:nth-child(odd):not(:only-child) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc((100% - 16px) / 2);
		max-width: calc((100% - 16px) / 2);
	}
}

/* ------------------------------------------------------------------ *
 * Image grid (Blog)
 *
 * Width modes (driven by the admin "Bloglist width (px)" setting):
 *
 *   - DEFAULT (admin width = 0): the grid spans the full section canvas
 *     (page max-width minus horizontal section padding — same outer width
 *     as the hero frame).
 *
 *   - EXPLICIT (admin width > 0, .deb-grid--has-width + inline
 *     --deb-blog-width): the grid is capped at the admin pixel value
 *     and centred horizontally inside the section.
 * ------------------------------------------------------------------ */
.deb-section--blog .deb-grid.deb-grid--has-width {
	max-width: var(--deb-blog-width);
	margin-left: auto;
	margin-right: auto;
}
.deb-grid { display: grid; gap: var(--deb-cards-grid-gap, 18px); }
.deb-grid--cols-1 { grid-template-columns: 1fr; }
.deb-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.deb-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.deb-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.deb-grid--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.deb-grid--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.deb-grid--cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.deb-grid--cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.deb-cards--manual-columns {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
}
.deb-cards__column {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: var(--deb-cards-grid-gap, 18px);
}

.deb-card {
	background: var(--deb-card-bg);
	color: var(--deb-card-text);
	border-radius: var(--deb-card-radius, var(--deb-radius));
	overflow: hidden;
	box-shadow: var(--deb-card-shadow, var(--deb-shadow));
	display: flex;
	flex-direction: column;
	text-decoration: none;
	transition: transform .15s ease;
}
a.deb-card:hover { transform: translateY(-2px); }
.deb-card__media {
	background: var(--deb-card-media-bg, #f4f4f4);
	overflow: hidden;
}
.deb-card__media--ratio-16-10 { aspect-ratio: 16 / 10; }
.deb-card__media--ratio-4-3   { aspect-ratio: 4 / 3; }
.deb-card__media--ratio-1-1   { aspect-ratio: 1 / 1; }
.deb-card__media--ratio-3-2   { aspect-ratio: 3 / 2; }
.deb-card__media--fit-width {
	aspect-ratio: unset;
	height: auto;
}
.deb-card__media--fit-height {
	aspect-ratio: unset;
	height: var(--deb-card-media-height, 200px);
}
.deb-card__media img {
	width: 100%;
	height: 100%;
	display: block;
}
.deb-card__media--fit-cover img {
	object-fit: cover;
	object-position: var(--deb-card-image-position, center);
}
.deb-card__media--fit-contain img {
	object-fit: contain;
	object-position: center;
}
.deb-card__media--fit-width img {
	width: 100%;
	height: auto;
}
.deb-card__media--fit-height img {
	object-fit: cover;
	object-position: var(--deb-card-image-position, center);
}
.deb-card__body { padding: 14px var(--deb-card-content-padding-x, 16px) 16px; }

/* Cards block template — flexible stack order (Design tab). */
.deb-card > .deb-card__block:not( .deb-card__block--media ),
.deb-card__body-col > .deb-card__block,
.deb-card__bottom-stack > .deb-card__block {
	padding-left: var(--deb-card-content-padding-x, 16px);
	padding-right: var(--deb-card-content-padding-x, 16px);
}
.deb-card__bottom-stack {
	display: flex;
	min-width: 0;
	flex-direction: column;
	margin-top: auto;
}
.deb-card__bottom-stack .deb-card__block--button {
	margin-top: 0 !important;
}
.deb-section--blog .deb-card__block--title {
	padding-top: var(--deb-card-title-pad-top, 14px);
	padding-bottom: var(--deb-card-title-pad-bottom, 6px);
}
.deb-section--blog .deb-card__block--place {
	padding-top: var(--deb-card-place-pad-top, 0);
	padding-bottom: var(--deb-card-place-pad-bottom, 4px);
}
.deb-section--blog .deb-card__block--date {
	padding-top: var(--deb-card-date-pad-top, 0);
	padding-bottom: var(--deb-card-date-pad-bottom, 4px);
}
.deb-section--blog .deb-card__block--price {
	padding-top: var(--deb-card-price-pad-top, 0);
	padding-bottom: var(--deb-card-price-pad-bottom, 8px);
}
.deb-section--blog .deb-card__block--text {
	padding-top: var(--deb-card-text-pad-top, 0);
	padding-bottom: var(--deb-card-text-pad-bottom, 0);
}
.deb-card__title-mark,
.deb-card__place-mark,
.deb-card__date-mark,
.deb-card__price-mark,
.deb-card__text-mark {
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.deb-card__title-mark {
	padding: var(--deb-card-title-bg-text-padding, 0);
	background: var(--deb-card-title-bg-text, transparent);
}
.deb-card__place-mark {
	padding: var(--deb-card-place-bg-text-padding, 0);
	background: var(--deb-card-place-bg-text, transparent);
}
.deb-card__date-mark {
	padding: var(--deb-card-date-bg-text-padding, 0);
	background: var(--deb-card-date-bg-text, transparent);
}
.deb-card__price-mark {
	padding: var(--deb-card-price-bg-text-padding, 0);
	background: var(--deb-card-price-bg-text, transparent);
}
.deb-card__text-mark {
	padding: var(--deb-card-text-bg-text-padding, 0);
	background: var(--deb-card-text-bg-text, transparent);
}
.deb-card--stacked > .deb-card__block--button,
.deb-card__body-col > .deb-card__block--button {
	margin-top: auto;
}
.deb-section--blog .deb-card__title {
	margin: 0;
	padding: var(--deb-card-title-bg-row-padding, 0);
	font-size: var(--deb-card-title-size, 16px);
	font-weight: var(--deb-card-title-weight, 600);
	font-style: var(--deb-card-title-style, normal);
	text-decoration: var(--deb-card-title-decoration, none);
	text-align: var(--deb-card-title-align, left);
	font-family: var(--deb-card-title-family, inherit);
	color: var(--deb-card-title-color, inherit);
	background: var(--deb-card-title-bg-row, transparent);
}
.deb-section--blog .deb-card__text {
	margin: 0;
	padding: var(--deb-card-text-bg-row-padding, 0);
	font-size: var(--deb-card-text-size, 13px);
	font-weight: var(--deb-card-text-weight, 400);
	font-style: var(--deb-card-text-style, normal);
	text-decoration: var(--deb-card-text-decoration, none);
	text-align: var(--deb-card-text-align, left);
	font-family: var(--deb-card-text-family, inherit);
	line-height: 1.5;
	color: var(--deb-card-text-color, inherit);
	opacity: var(--deb-card-text-opacity, .85);
	background: var(--deb-card-text-bg-row, transparent);
}
.deb-section--blog .deb-card__meta {
	margin: 0;
	line-height: 1.45;
}
.deb-section--blog .deb-card__meta--place {
	padding: var(--deb-card-place-bg-row-padding, 0);
	font-size: var(--deb-card-place-size, 12px);
	font-weight: var(--deb-card-place-weight, 400);
	font-style: var(--deb-card-place-style, normal);
	text-decoration: var(--deb-card-place-decoration, none);
	text-align: var(--deb-card-place-align, left);
	font-family: var(--deb-card-place-family, inherit);
	color: var(--deb-card-place-color, inherit);
	opacity: var(--deb-card-place-opacity, .85);
	background: var(--deb-card-place-bg-row, transparent);
}
.deb-section--blog .deb-card__meta--date {
	padding: var(--deb-card-date-bg-row-padding, 0);
	font-size: var(--deb-card-date-size, 12px);
	font-weight: var(--deb-card-date-weight, 400);
	font-style: var(--deb-card-date-style, normal);
	text-decoration: var(--deb-card-date-decoration, none);
	text-align: var(--deb-card-date-align, left);
	font-family: var(--deb-card-date-family, inherit);
	color: var(--deb-card-date-color, inherit);
	opacity: var(--deb-card-date-opacity, .85);
	background: var(--deb-card-date-bg-row, transparent);
}
.deb-section--blog .deb-card__meta--price {
	padding: var(--deb-card-price-bg-row-padding, 0);
	font-size: var(--deb-card-price-size, 12px);
	font-weight: var(--deb-card-price-weight, 600);
	font-style: var(--deb-card-price-style, normal);
	text-decoration: var(--deb-card-price-decoration, none);
	text-align: var(--deb-card-price-align, left);
	font-family: var(--deb-card-price-family, inherit);
	color: var(--deb-card-price-color, inherit);
	opacity: var(--deb-card-price-opacity, .85);
	background: var(--deb-card-price-bg-row, transparent);
}
@media (max-width: 720px) {
	.deb-section--blog .deb-card__title { padding: var(--deb-card-title-bg-row-padding-m, var(--deb-card-title-bg-row-padding, 0)); }
	.deb-section--blog .deb-card__meta--place { padding: var(--deb-card-place-bg-row-padding-m, var(--deb-card-place-bg-row-padding, 0)); }
	.deb-section--blog .deb-card__meta--date { padding: var(--deb-card-date-bg-row-padding-m, var(--deb-card-date-bg-row-padding, 0)); }
	.deb-section--blog .deb-card__meta--price { padding: var(--deb-card-price-bg-row-padding-m, var(--deb-card-price-bg-row-padding, 0)); }
	.deb-section--blog .deb-card__text { padding: var(--deb-card-text-bg-row-padding-m, var(--deb-card-text-bg-row-padding, 0)); }
	.deb-card__title-mark { padding: var(--deb-card-title-bg-text-padding-m, var(--deb-card-title-bg-text-padding, 0)); }
	.deb-card__place-mark { padding: var(--deb-card-place-bg-text-padding-m, var(--deb-card-place-bg-text-padding, 0)); }
	.deb-card__date-mark { padding: var(--deb-card-date-bg-text-padding-m, var(--deb-card-date-bg-text-padding, 0)); }
	.deb-card__price-mark { padding: var(--deb-card-price-bg-text-padding-m, var(--deb-card-price-bg-text-padding, 0)); }
	.deb-card__text-mark { padding: var(--deb-card-text-bg-text-padding-m, var(--deb-card-text-bg-text-padding, 0)); }
}
.deb-section--blog .deb-card__text.deb-prose > :first-child {
	margin-top: 0;
}
.deb-section--blog .deb-card__text.deb-prose > :last-child {
	margin-bottom: 0;
}
.deb-section--blog .deb-card__text.deb-prose p,
.deb-section--blog .deb-card__text.deb-prose ul,
.deb-section--blog .deb-card__text.deb-prose ol {
	margin: 0 0 0.65em;
}
.deb-section--blog .deb-card__text.deb-prose a {
	color: var(--deb-accent, #b50f1c);
}

/* Catalog layout — single-column project list (typoveprojekty.sk pattern). */
.deb-grid.deb-cards--catalog {
	gap: var(--deb-cards-grid-gap, 28px);
}

/* Horizontal card — image beside text (media left / right). */
.deb-card--media-left,
.deb-card--media-right {
	display: grid;
	grid-template-columns: minmax(0, var(--deb-card-media-width, 40%)) minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}
.deb-card--media-right {
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--deb-card-media-width, 40%));
}
.deb-card--media-right > .deb-card__block--media {
	order: 2;
}
.deb-card--media-left > .deb-card__block--media,
.deb-card--media-right > .deb-card__block--media {
	height: 100%;
}
.deb-card--media-left > .deb-card__body-col,
.deb-card--media-right > .deb-card__body-col {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	align-self: stretch;
}
@media (max-width: 720px) {
	.deb-card--media-left,
	.deb-card--media-right {
		grid-template-columns: 1fr;
	}
	.deb-card--media-right > .deb-card__block--media {
		order: 0;
	}
}

/* Title / image link when card has a URL (card wrapper is never an <a>). */
a.deb-card__media-link {
	display: block;
	text-decoration: none;
	color: inherit;
}
.deb-card__title-link {
	color: inherit;
	text-decoration: inherit;
}
.deb-card__title-link:hover {
	text-decoration: underline;
}

/* Inset frame around card image (padding ring + inner white surface for icons). */
.deb-card__media--inset {
	background: var(--deb-card-media-inset-frame, #fff);
	padding: var(--deb-card-media-inset-padding, 14px);
	box-sizing: border-box;
}
.deb-card__media--inset .deb-card__media-surface {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 100%;
	background: var(--deb-card-media-inset-surface, #fff);
	overflow: hidden;
}
.deb-card__media--inset .deb-card__media-surface img {
	border-radius: 2px;
}

/* Card video (YouTube / Vimeo — muted autoplay, Banner-style). */
.deb-card__media--video {
	position: relative;
}
.deb-card__media--video.deb-card__media--fit-width {
	min-height: var(--deb-card-media-height, 200px);
}
.deb-card__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.deb-card__media--fit-width .deb-card__video {
	position: absolute;
}
.deb-card__media--inset .deb-card__media-surface .deb-card__video {
	position: absolute;
	inset: 0;
}
.deb-card__video-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--deb-card-image-position, center);
	z-index: 0;
	display: block;
}
.deb-card__media--fit-contain .deb-card__video-poster,
.deb-card__media--fit-width .deb-card__video-poster {
	object-fit: contain;
	object-position: center;
}
.deb-card__video-iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	min-width: 100%;
	min-height: 100%;
	height: 100%;
	transform: translate(-50%, -50%);
	border: 0;
	pointer-events: none;
	z-index: 1;
}
.deb-card__video--interactive .deb-card__video-iframe,
.deb-card__video-iframe--interactive {
	pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
	.deb-card__video-iframe:not(.deb-card__video-iframe--interactive) { display: none; }
}

/* Card CTA — reuses .deb-submit / .deb-btn from Button section. */
.deb-card__btn {
	margin-top: 0;
}
.deb-card__btn--static,
.deb-card__btn--static:hover {
	cursor: default;
	transform: none;
}
/* CTA horizontal alignment within the card (section-level button_align). */
.deb-cards--btn-center .deb-card__block--button { text-align: center; }
.deb-cards--btn-right .deb-card__block--button { text-align: right; }

/* ------------------------------------------------------------------ *
 * Gallery (partner logos)
 * ------------------------------------------------------------------ */
.deb-section--gallery .deb-gallery.deb-gallery--has-width {
	max-width: var(--deb-blog-width);
	margin-left: auto;
	margin-right: auto;
}
.deb-gallery {
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.deb-gallery__group {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.deb-gallery__type {
	margin: 0;
	padding-top: var(--deb-gallery-type-pad-top, 0);
	padding-right: var(--deb-gallery-type-pad-right, 0);
	padding-bottom: var(--deb-gallery-type-pad-bottom, 0);
	padding-left: var(--deb-gallery-type-pad-left, 0);
	font-size: var(--deb-gallery-type-size, 17px);
	font-weight: var(--deb-gallery-type-weight, 600);
	font-style: var(--deb-gallery-type-style, normal);
	text-decoration: var(--deb-gallery-type-decoration, none);
	text-align: var(--deb-gallery-type-align, left);
	font-family: var(--deb-gallery-type-family, inherit);
	color: var(--deb-gallery-type-color, inherit);
}
.deb-gallery__type-mark {
	background: var(--deb-gallery-type-bg, transparent);
	color: var(--deb-gallery-type-color, inherit);
	padding: var(--deb-gallery-type-mark-pad-y, 0.15em)
		var(--deb-gallery-type-mark-pad-x, 0.35em);
	border-radius: var(--deb-gallery-type-mark-radius, 4px);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
.deb-gallery__grid {
	display: grid;
	gap: 14px;
}
.deb-gallery__grid--cols-1 { grid-template-columns: 1fr; }
.deb-gallery__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.deb-gallery__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.deb-gallery__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.deb-gallery__grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
.deb-gallery__grid--cols-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 720px) {
	.deb-gallery__grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.deb-gallery__grid--cols-5,
	.deb-gallery__grid--cols-6 { grid-template-columns: repeat(3, 1fr); }
}
.deb-gallery__logo {
	display: block;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--deb-radius, 10px);
	padding: 10px;
	text-decoration: none;
	transition: transform .15s ease, border-color .15s ease;
}
a.deb-gallery__logo:hover {
	transform: translateY(-1px);
	border-color: rgba(255, 255, 255, .28);
}
.deb-gallery__media {
	display: block;
	background: #f4f4f4;
	overflow: hidden;
}
.deb-gallery__media--ratio-16-10 { aspect-ratio: 16 / 10; }
.deb-gallery__media--ratio-4-3   { aspect-ratio: 4 / 3; }
.deb-gallery__media--ratio-1-1   { aspect-ratio: 1 / 1; }
.deb-gallery__media--ratio-3-2   { aspect-ratio: 3 / 2; }
.deb-gallery__media--fit-width {
	aspect-ratio: unset;
	height: auto;
}
.deb-gallery__media--fit-height {
	aspect-ratio: unset;
	height: var(--deb-card-media-height, 200px);
}
.deb-gallery__media img {
	width: 100%;
	height: 100%;
	display: block;
}
.deb-gallery__media--fit-cover img {
	object-fit: cover;
	object-position: var(--deb-card-image-position, center);
}
.deb-gallery__media--fit-contain img {
	object-fit: contain;
	object-position: center;
}
.deb-gallery__media--fit-width img {
	width: 100%;
	height: auto;
}
.deb-gallery__media--fit-height img {
	object-fit: cover;
	object-position: var(--deb-card-image-position, center);
}

/* Gallery image shapes — rounded / circle (team portraits). */
.deb-gallery__media--shape-rounded { border-radius: var(--deb-radius, 10px); }
.deb-gallery__media--shape-circle {
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	width: 100%;
	max-width: var(--deb-gallery-circle-max, 160px);
	margin-left: auto;
	margin-right: auto;
}
.deb-gallery__media--shape-circle img { object-fit: cover; }

/* Captions under gallery items (name + role for team grids). */
.deb-gallery__caption-wrap {
	display: block;
	text-align: center;
	margin-top: 8px;
}
.deb-gallery__caption {
	display: block;
	font-weight: 600;
	line-height: 1.3;
}
.deb-gallery__subcaption {
	display: block;
	opacity: .7;
	font-size: .9em;
	line-height: 1.3;
	margin-top: 2px;
}

/* Team variant — drop the logo frame so circular portraits sit clean. */
.deb-gallery--shape-circle .deb-gallery__logo,
.deb-gallery--shape-rounded .deb-gallery__logo {
	background: transparent;
	border: 0;
	padding: 0;
}

/* ------------------------------------------------------------------ *
 * Countdown
 * ------------------------------------------------------------------ */
.deb-countdown {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: var(--deb-countdown-gap, 24px);
	width: 100%;
	font-family: var(--deb-countdown-font-family, var(--deb-font-family, inherit));
}
.deb-countdown.deb-countdown--has-width {
	max-width: var(--deb-countdown-max-width);
	margin-left: auto;
	margin-right: auto;
}
.deb-countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	min-width: 72px;
	flex: 1 1 72px;
	max-width: 140px;
}
.deb-countdown__box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 88px;
	padding: 16px 12px;
	background: var(--deb-countdown-box-bg, #fff);
	border: 1px solid var(--deb-countdown-box-border, #e5e5e5);
	border-radius: var(--deb-countdown-box-radius, 4px);
	box-sizing: border-box;
}
.deb-countdown__value {
	font-size: var(--deb-countdown-digit-size, 48px);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--deb-countdown-digit-color, inherit);
	font-variant-numeric: tabular-nums;
}
.deb-countdown__label {
	font-size: var(--deb-countdown-label-size, 14px);
	font-weight: 500;
	line-height: 1.2;
	color: var(--deb-countdown-label-color, inherit);
	text-align: center;
}

/* ------------------------------------------------------------------ *
 * Pricing table
 *
 * Scoped under .deb-event with !important on layout-critical props so
 * WP global-styles (still emitted on full-bleed pages) cannot flatten
 * borders, price typography, or pill buttons.
 * ------------------------------------------------------------------ */
.deb-event .deb-pricing-grid {
	display: grid !important;
	gap: 24px !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 auto !important;
}
.deb-event .deb-pricing-grid--cols-1  { grid-template-columns: repeat(1, 1fr) !important; }
.deb-event .deb-pricing-grid--cols-2  { grid-template-columns: repeat(2, 1fr) !important; }
.deb-event .deb-pricing-grid--cols-3  { grid-template-columns: repeat(3, 1fr) !important; }
.deb-event .deb-pricing-grid--cols-4  { grid-template-columns: repeat(4, 1fr) !important; }
.deb-event .deb-pricing-grid--cols-5  { grid-template-columns: repeat(5, 1fr) !important; }
.deb-event .deb-pricing-grid--cols-6  { grid-template-columns: repeat(6, 1fr) !important; }
.deb-event .deb-pricing-grid--cols-7  { grid-template-columns: repeat(7, 1fr) !important; }
.deb-event .deb-pricing-grid--cols-8  { grid-template-columns: repeat(8, 1fr) !important; }
.deb-event .deb-pricing-grid--cols-9  { grid-template-columns: repeat(9, 1fr) !important; }
.deb-event .deb-pricing-grid--cols-10 { grid-template-columns: repeat(10, 1fr) !important; }
.deb-event .deb-pricing-grid--cols-11 { grid-template-columns: repeat(11, 1fr) !important; }
.deb-event .deb-pricing-grid--cols-12 { grid-template-columns: repeat(12, 1fr) !important; }

.deb-event .deb-pricing-card {
	border: 1px solid rgba(255, 255, 255, .2) !important;
	border-radius: 12px !important;
	padding: 28px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	gap: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--deb-pricing-text-color, inherit) !important;
}
.deb-event .deb-pricing-card--highlighted {
	border: 2px solid rgba(255, 255, 255, .55) !important;
}
.deb-event .deb-pricing-card__icon {
	display: flex !important;
	justify-content: center !important;
	width: 100% !important;
	margin-bottom: 12px !important;
}
.deb-event .deb-pricing-card__icon img {
	display: block !important;
	width: 40px !important;
	height: 40px !important;
	object-fit: contain !important;
}
.deb-event .deb-pricing-card__title {
	margin: 0 0 8px !important;
	font-size: 22px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: inherit !important;
}
.deb-event .deb-pricing-card__subtitle {
	margin: 0 0 16px !important;
	font-size: 15px !important;
	line-height: 1.45 !important;
	opacity: .85 !important;
	color: inherit !important;
}
.deb-event .deb-pricing-card__core {
	margin: 0 0 20px !important;
	font-size: 28px !important;
	font-weight: 700 !important;
	line-height: 1.15 !important;
	color: inherit !important;
}
.deb-event .deb-pricing-card__text {
	margin: 0 0 20px !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	opacity: .8 !important;
	flex: 1 !important;
	color: inherit !important;
}
.deb-event a.deb-pricing-card__btn {
	display: inline-flex !important;
	align-self: center !important;
	align-items: center !important;
	justify-content: center !important;
	text-decoration: none !important;
	transition: opacity .15s ease, transform .15s ease, box-shadow .15s ease !important;
	cursor: pointer !important;
}
.deb-event a.deb-pricing-card__btn:hover {
	opacity: .92 !important;
	transform: translateY(-1px) !important;
}
.deb-event a.deb-pricing-card__btn--outline {
	background: transparent !important;
	border: 1px solid currentColor !important;
}
.deb-event .deb-pricing-footnote {
	text-align: var(--deb-pricing-footnote-align, center) !important;
	margin: 0 auto !important;
	padding-top: var(--deb-pricing-footnote-pad-top, 28px) !important;
	padding-right: var(--deb-pricing-footnote-pad-right, 0) !important;
	padding-bottom: var(--deb-pricing-footnote-pad-bottom, 0) !important;
	padding-left: var(--deb-pricing-footnote-pad-left, 0) !important;
	max-width: 100% !important;
	font-family: var(--deb-pricing-footnote-family, inherit) !important;
	font-size: var(--deb-pricing-footnote-size, 14px) !important;
	font-weight: var(--deb-pricing-footnote-weight, 400) !important;
	font-style: var(--deb-pricing-footnote-style, normal) !important;
	text-decoration: var(--deb-pricing-footnote-decoration, none) !important;
	line-height: 1.55 !important;
	opacity: var(--deb-pricing-footnote-opacity, .75) !important;
	color: var(--deb-pricing-footnote-color, var(--deb-pricing-text-color, inherit)) !important;
}

/* ------------------------------------------------------------------ *
 * Agenda
 *
 * 1-col: simple stack of white cards (time | title), red accent edge.
 * 2-col: zigzag timeline — vertical line down the centre, a dot on the
 *        line at each entry, a short horizontal connector from each
 *        card to its dot, cards alternating left / right.
 * ------------------------------------------------------------------ */
.deb-agenda {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
}
.deb-agenda__row {
	display: flex;
	background: var(--deb-card-bg);
	color: var(--deb-card-text);
	border-radius: var(--deb-radius);
	box-shadow: var(--deb-shadow), inset 4px 0 0 var(--deb-agenda-timeline-color, var(--deb-accent));
	border-left: none;
	/*
	 * NOTE: do NOT set overflow:hidden here. The 2-col timeline draws the
	 * marker and connector outside the card — overflow:hidden would clip them.
	 */
}
.deb-agenda__time {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	color: var(--deb-agenda-time-color, var(--deb-accent));
	padding: 14px 18px;
	font-weight: 700;
	font-size: var(--deb-agenda-time-size, 15px);
	min-width: 110px;
	flex-shrink: 0;
	align-self: center;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}
.deb-agenda__time-start,
.deb-agenda__time-end {
	display: inline;
}
/*
 * The body wraps the title and (optional) speaker as two stacked lines so
 * the rounded card can show "Kam smeruje SMB?" / "Peter Oravec" styling.
 * It also keeps the time column locked to its own width while the body
 * absorbs all remaining space.
 */
.deb-agenda__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 12px 16px 12px 0;
	flex: 1;
	gap: 2px;
	line-height: 1.35;
}
.deb-agenda__title {
	font-weight: 600;
	font-size: var(--deb-agenda-title-size, 16px);
	color: var(--deb-agenda-title-color, var(--deb-card-text));
}
.deb-agenda__speaker {
	font-weight: 400;
	font-size: var(--deb-agenda-speaker-size, 13px);
	color: var(--deb-agenda-speaker-color, var(--deb-card-text));
	opacity: var(--deb-agenda-speaker-opacity, .55);
}

/* ----- 2-col timeline layout (3-column grid: card | marker | card) ----- */
.deb-agenda--2col {
	--deb-agenda-timeline-gap: 32px;
	--deb-agenda-marker-size: 20px;
	--deb-agenda-timeline-line-width: 3px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--deb-agenda-marker-size) minmax(0, 1fr);
	column-gap: var(--deb-agenda-timeline-gap);
	row-gap: 12px;
	position: relative;
	padding: 6px 0;
	align-items: center;
}
.deb-agenda__slot {
	display: contents;
}
.deb-agenda__slot--left .deb-agenda__row {
	grid-column: 1;
	grid-row: var(--deb-agenda-slot);
}
.deb-agenda__slot--left .deb-agenda__marker {
	grid-column: 2;
	grid-row: var(--deb-agenda-slot);
}
.deb-agenda__slot--right .deb-agenda__marker {
	grid-column: 2;
	grid-row: var(--deb-agenda-slot);
}
.deb-agenda__slot--right .deb-agenda__row {
	grid-column: 3;
	grid-row: var(--deb-agenda-slot);
}
/* Vertical centre line — through the marker column */
.deb-agenda--2col::before {
	content: "";
	position: absolute;
	top: 6px;
	bottom: 6px;
	left: 50%;
	width: var(--deb-agenda-timeline-line-width, 3px);
	margin-left: calc(var(--deb-agenda-timeline-line-width, 3px) / -2);
	background: var(--deb-agenda-timeline-color, var(--deb-accent));
	opacity: .35;
	z-index: 0;
	pointer-events: none;
}
.deb-agenda--2col .deb-agenda__row {
	position: relative;
	z-index: 1;
	width: auto;
	min-width: 0;
	margin: 0;
	box-shadow: var(--deb-shadow), inset var(--deb-agenda-timeline-line-width, 3px) 0 0 var(--deb-agenda-timeline-color, var(--deb-accent));
}

/* Timeline marker — centred in the middle grid column */
.deb-agenda--2col .deb-agenda__marker {
	width: var(--deb-agenda-marker-size);
	height: var(--deb-agenda-marker-size);
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	justify-self: center;
	align-self: center;
	z-index: 2;
	pointer-events: none;
}

/* Outline circle (default marker) */
.deb-agenda--2col.deb-agenda--marker-circle .deb-agenda__marker {
	border-radius: 50%;
	background: var(--deb-card-bg, #fff);
	border: var(--deb-agenda-timeline-line-width, 3px) solid var(--deb-agenda-timeline-color, var(--deb-accent));
}

/* Glyph markers */
.deb-agenda--2col[class*="deb-agenda--marker-"]:not(.deb-agenda--marker-circle) .deb-agenda__marker {
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 0;
	background: transparent;
	color: var(--deb-agenda-timeline-color, var(--deb-accent));
	font-family: inherit;
	font-size: calc(var(--deb-agenda-marker-size, 20px) * 0.875);
	line-height: 1;
	overflow: visible;
}
.deb-agenda--2col.deb-agenda--marker-dot .deb-agenda__marker::before { content: "\2022"; font-size: calc(var(--deb-agenda-marker-size, 20px) * 1.25); line-height: 1; }
.deb-agenda--2col.deb-agenda--marker-bullseye .deb-agenda__marker::before { content: "\29BE"; font-size: calc(var(--deb-agenda-marker-size, 20px) * 1.125); line-height: 1; }
.deb-agenda--2col.deb-agenda--marker-disc .deb-agenda__marker::before { content: "\29BF"; font-size: calc(var(--deb-agenda-marker-size, 20px) * 1.125); line-height: 1; }
.deb-agenda--2col.deb-agenda--marker-square .deb-agenda__marker::before { content: "\25A0"; font-size: calc(var(--deb-agenda-marker-size, 20px) * 0.875); line-height: 1; }
.deb-agenda--2col.deb-agenda--marker-note .deb-agenda__marker::before { content: "\266B"; font-size: var(--deb-agenda-marker-size, 20px); line-height: 1; }
.deb-agenda--2col.deb-agenda--marker-triangle .deb-agenda__slot--left .deb-agenda__marker::before { content: "\25BA"; line-height: 1; }
.deb-agenda--2col.deb-agenda--marker-triangle .deb-agenda__slot--right .deb-agenda__marker::before { content: "\25C4"; line-height: 1; }

/* Connector from card edge across the column gap to the marker column */
.deb-agenda--2col .deb-agenda__row::after {
	content: "";
	position: absolute;
	top: calc(50% - var(--deb-agenda-timeline-line-width, 3px) / 2);
	height: var(--deb-agenda-timeline-line-width, 3px);
	width: var(--deb-agenda-timeline-gap);
	background: var(--deb-agenda-timeline-color, var(--deb-accent));
	opacity: .35;
}
.deb-agenda--2col .deb-agenda__slot--left .deb-agenda__row::after  { right: calc(var(--deb-agenda-timeline-gap) * -1); }
.deb-agenda--2col .deb-agenda__slot--right .deb-agenda__row::after { left:  calc(var(--deb-agenda-timeline-gap) * -1); }

/* ------------------------------------------------------------------ *
 * Action Plan — name selector + touch-friendly responsive timeline
 * ------------------------------------------------------------------ */
.deb-action-plan {
	--deb-action-name-bg: var(--deb-accent);
	--deb-action-name-color: #fff;
	--deb-action-name-active-bg: #08284a;
	--deb-action-name-active-color: #fff;
	--deb-action-timeline-color: var(--deb-accent);
	--deb-action-item-bg: var(--deb-card-bg);
	width: 100%;
}
.deb-action-plan__names {
	display: grid;
	grid-template-columns: repeat(var(--deb-action-name-columns, 6), minmax(0, 1fr));
	gap: var(--deb-action-name-gap, 12px);
	margin-bottom: 28px;
}
.deb-action-plan__name {
	appearance: none;
	min-width: 0;
	min-height: 44px;
	border: 2px solid transparent;
	border-radius: var(--deb-action-name-radius, 10px);
	padding: var(--deb-action-name-padding, 10px 18px);
	background: var(--deb-action-name-bg);
	color: var(--deb-action-name-color);
	font: inherit;
	font-size: var(--deb-action-name-font-size, 14px);
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.deb-action-plan__name:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, .16);
}
.deb-action-plan__name:focus-visible {
	outline: 3px solid var(--deb-focus, #ffbf47);
	outline-offset: 3px;
}
.deb-action-plan__name.is-active,
.deb-action-plan__name[aria-selected="true"] {
	background: var(--deb-action-name-active-bg);
	color: var(--deb-action-name-active-color);
	box-shadow: 0 8px 22px rgba(0, 0, 0, .2);
}
.deb-action-plan-modal-open {
	overflow: hidden;
}
.deb-action-plan__modal {
	width: min(920px, 90vw);
	max-width: 920px;
	max-height: 78dvh;
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: transparent;
	color: var(--deb-card-text);
	box-shadow: 0 28px 80px rgba(0, 0, 0, .34);
	overflow: hidden;
}
.deb-action-plan__modal::backdrop {
	background: rgba(4, 14, 28, .66);
	backdrop-filter: blur(3px);
}
.deb-action-plan__modal-shell {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	max-height: 78dvh;
	background: var(--deb-surface, #fff);
}
.deb-action-plan__modal-header {
	padding: 22px 28px 18px;
	border-bottom: 1px solid rgba(15, 23, 42, .1);
	text-align: center;
}
.deb-action-plan__modal-title {
	margin: 0;
	color: var(--deb-action-task-color, var(--deb-card-text));
	font-size: clamp(20px, 2.4vw, 30px);
	font-weight: 800;
	line-height: 1.2;
}
.deb-action-plan__modal-body {
	min-height: 0;
	padding: 24px 30px;
	overflow: auto;
	overscroll-behavior: contain;
}
.deb-action-plan__modal-footer {
	display: flex;
	justify-content: center;
	padding: 16px 24px 19px;
	border-top: 1px solid rgba(15, 23, 42, .1);
	background: var(--deb-surface, #fff);
}
.deb-action-plan__close {
	appearance: none;
	padding: 5px 12px;
	border: 0;
	background: transparent;
	color: var(--deb-action-timeline-color);
	font: inherit;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .08em;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-transform: uppercase;
	cursor: pointer;
}
.deb-action-plan__close:hover {
	text-decoration-thickness: 2px;
}
.deb-action-plan__close:focus-visible,
.deb-action-plan__modal:focus-visible {
	outline: 3px solid var(--deb-focus, #ffbf47);
	outline-offset: -4px;
}
.deb-action-plan__panel[hidden] { display: none !important; }
.deb-action-plan__timeline {
	display: grid;
	grid-template-columns: var(--deb-action-marker-size, 20px) minmax(0, 1fr);
	gap: var(--deb-action-item-gap, 12px) 20px;
	position: relative;
	padding: 6px 0;
}
.deb-action-plan__timeline::before {
	content: "";
	position: absolute;
	top: 6px;
	bottom: 6px;
	left: calc(var(--deb-action-marker-size, 20px) / 2);
	width: var(--deb-action-line-width, 3px);
	margin-left: calc(var(--deb-action-line-width, 3px) / -2);
	background: var(--deb-action-timeline-color);
	opacity: .35;
	pointer-events: none;
}
.deb-action-plan__slot {
	display: contents;
}
.deb-action-plan__slot .deb-action-plan__marker {
	grid-column: 1;
	grid-row: var(--deb-action-slot);
}
.deb-action-plan__slot .deb-action-plan__item {
	grid-column: 2;
	grid-row: var(--deb-action-slot);
}
.deb-action-plan__marker {
	width: var(--deb-action-marker-size, 20px);
	height: var(--deb-action-marker-size, 20px);
	box-sizing: border-box;
	justify-self: center;
	align-self: center;
	z-index: 2;
}
.deb-action-plan__item {
	position: relative;
	min-width: 0;
	padding: 18px 20px;
	border-radius: var(--deb-action-item-radius, 10px);
	background: var(--deb-action-item-bg);
	color: var(--deb-card-text);
	box-shadow: var(--deb-action-item-shadow, var(--deb-shadow)), inset var(--deb-action-line-width, 3px) 0 0 var(--deb-action-timeline-color);
	z-index: 1;
}
.deb-action-plan__item::before {
	content: "";
	position: absolute;
	top: calc(50% - var(--deb-action-line-width, 3px) / 2);
	right: 100%;
	width: 20px;
	height: var(--deb-action-line-width, 3px);
	background: var(--deb-action-timeline-color);
	opacity: .35;
}
.deb-action-plan__area {
	margin-bottom: 5px;
	color: var(--deb-action-area-color, var(--deb-action-timeline-color));
	font-size: var(--deb-action-area-size, 14px);
	font-weight: 800;
	letter-spacing: .045em;
	text-transform: uppercase;
}
.deb-action-plan__task {
	color: var(--deb-action-task-color, var(--deb-card-text));
	font-size: var(--deb-action-task-size, 17px);
	font-weight: 650;
	line-height: 1.4;
}
.deb-action-plan__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin-top: 10px;
}
.deb-action-plan__time {
	color: var(--deb-action-time-color, var(--deb-card-text));
	font-size: var(--deb-action-time-size, 13px);
	font-weight: 600;
}
.deb-action-plan__budget {
	color: var(--deb-action-budget-color, var(--deb-action-timeline-color));
	font-size: var(--deb-action-budget-size, 13px);
	font-weight: 750;
}
.deb-action-plan__detail {
	margin-top: 12px;
	color: var(--deb-action-detail-color, var(--deb-card-text));
	font-size: var(--deb-action-detail-size, 13px);
	line-height: 1.55;
	opacity: .82;
}
.deb-action-plan--marker-circle .deb-action-plan__marker {
	border: var(--deb-action-line-width, 3px) solid var(--deb-action-timeline-color);
	border-radius: 50%;
	background: var(--deb-action-item-bg);
}
.deb-action-plan[class*="deb-action-plan--marker-"]:not(.deb-action-plan--marker-circle) .deb-action-plan__marker {
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--deb-action-timeline-color);
	font-size: calc(var(--deb-action-marker-size, 20px) * .9);
	line-height: 1;
}
.deb-action-plan--marker-dot .deb-action-plan__marker::before { content: "\2022"; font-size: calc(var(--deb-action-marker-size, 20px) * 1.25); }
.deb-action-plan--marker-bullseye .deb-action-plan__marker::before { content: "\29BE"; }
.deb-action-plan--marker-disc .deb-action-plan__marker::before { content: "\29BF"; }
.deb-action-plan--marker-square .deb-action-plan__marker::before { content: "\25A0"; }
.deb-action-plan--marker-note .deb-action-plan__marker::before { content: "\266B"; }
.deb-action-plan--marker-triangle .deb-action-plan__marker::before { content: "\25BA"; }

@media (min-width: 769px) {
	.deb-action-plan--2col .deb-action-plan__timeline {
		grid-template-columns: minmax(0, 1fr) var(--deb-action-marker-size, 20px) minmax(0, 1fr);
		column-gap: 32px;
	}
	.deb-action-plan--2col .deb-action-plan__timeline::before {
		left: 50%;
	}
	.deb-action-plan--2col .deb-action-plan__slot--left .deb-action-plan__item { grid-column: 1; }
	.deb-action-plan--2col .deb-action-plan__slot--left .deb-action-plan__marker,
	.deb-action-plan--2col .deb-action-plan__slot--right .deb-action-plan__marker { grid-column: 2; }
	.deb-action-plan--2col .deb-action-plan__slot--right .deb-action-plan__item { grid-column: 3; }
	.deb-action-plan--2col .deb-action-plan__slot--left .deb-action-plan__item::before {
		left: 100%;
		right: auto;
		width: 32px;
	}
	.deb-action-plan--2col .deb-action-plan__slot--right .deb-action-plan__item::before {
		right: 100%;
		width: 32px;
	}
	.deb-action-plan--2col.deb-action-plan--marker-triangle .deb-action-plan__slot--right .deb-action-plan__marker::before { content: "\25C4"; }
}
@media (max-width: 768px) {
	.deb-action-plan__names {
		grid-template-columns: minmax(0, 1fr);
		padding: 2px;
	}
	.deb-action-plan__name {
		width: 100%;
	}
	.deb-action-plan__modal {
		width: calc(100vw - 24px);
		max-width: none;
		height: 80dvh;
		max-height: 80dvh;
		border-radius: 14px;
	}
	.deb-action-plan__modal-shell {
		height: 80dvh;
		max-height: 80dvh;
	}
	.deb-action-plan__modal-header {
		padding: 18px 18px 15px;
	}
	.deb-action-plan__modal-body {
		padding: 18px 16px;
	}
	.deb-action-plan__modal-footer {
		padding: 14px 18px 17px;
	}
	.deb-action-plan__timeline {
		display: block;
		padding: 0;
	}
	.deb-action-plan__timeline::before,
	.deb-action-plan[class*="deb-action-plan--marker-"] .deb-action-plan__marker,
	.deb-action-plan__item::before {
		display: none;
	}
	.deb-action-plan__slot {
		display: block;
	}
	.deb-action-plan__slot + .deb-action-plan__slot {
		margin-top: var(--deb-action-item-gap, 12px);
	}
	.deb-action-plan__item {
		padding: 16px;
		box-shadow: var(--deb-action-item-shadow, var(--deb-shadow));
	}
}

/* ------------------------------------------------------------------ *
 * GDPR
 * ------------------------------------------------------------------ */
.deb-gdpr { list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: var(--deb-field-max-width, 720px); }
.deb-gdpr__item { margin-bottom: 10px; font-size: 15px; }
.deb-gdpr__item label { display: flex; gap: 12px; align-items: center; }
.deb-gdpr__item input[type="checkbox"] {
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	margin: 0;
	cursor: pointer;
	accent-color: var(--deb-accent);
}

/* ------------------------------------------------------------------ *
 * FAQ — native <details> accordion, no JS required
 * ------------------------------------------------------------------ */
.deb-faq {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
}
.deb-faq__item {
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: var(--deb-radius);
	background: rgba(255, 255, 255, .04);
	overflow: hidden;
}
.deb-faq__item[open] {
	border-color: rgba(255, 255, 255, .35);
}
.deb-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	line-height: 1.35;
}
.deb-faq__question::-webkit-details-marker { display: none; }
.deb-faq__question::after {
	content: "+";
	flex-shrink: 0;
	font-size: 20px;
	font-weight: 400;
	opacity: .7;
	line-height: 1;
}
.deb-faq__item[open] .deb-faq__question::after {
	content: "−";
}
.deb-faq__answer {
	padding: 0 20px 16px;
	font-size: 15px;
	line-height: 1.55;
}
.deb-event .deb-faq__answer {
	color: #b8dcff !important;
	opacity: 1;
}

/* ------------------------------------------------------------------ *
 * Footer
 * ------------------------------------------------------------------ */

.deb-section--footer {
	padding-left: 0;
	padding-right: 0;
}
/* Desktop: black footer band spans the viewport, not just .deb-content max-width. */
@media (min-width: 769px) {
	.deb-section--footer {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		box-sizing: border-box;
	}
}
.deb-footer {
	width: 100%;
	background: transparent;
	color: var(--deb-footer-text, #e8e8e8);
	text-align: var(--deb-footer-align, center);
	padding: 32px var(--deb-section-padding-x, 24px);
}
.deb-footer__inner {
	max-width: var(--deb-max-width, 1200px);
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--deb-footer-columns, 1), minmax(0, 1fr));
	gap: 32px 48px;
	align-items: start;
}
.deb-footer__col {
	min-width: 0;
	text-align: var(--deb-footer-align, center);
}
.deb-footer__block + .deb-footer__block {
	margin-top: 18px;
}
.deb-footer--flat .deb-footer__inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: stretch;
}
.deb-footer--flat.deb-footer--align-center .deb-footer__col {
	text-align: center;
}
.deb-footer--flat.deb-footer--align-left .deb-footer__col {
	text-align: left;
}
.deb-footer--two-col .deb-footer__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px 48px;
	align-items: start;
}
.deb-footer--two-col.deb-footer--align-center .deb-footer__col--meta {
	text-align: center;
}
.deb-footer--two-col.deb-footer--align-left .deb-footer__col--meta {
	text-align: left;
}
.deb-footer__logo {
	margin-bottom: 12px;
}
.deb-footer__logo-img {
	display: inline-block;
	max-width: 160px;
	height: auto;
}
.deb-footer__tagline {
	margin: 0 0 8px;
	font-size: 14px;
	opacity: .85;
}
.deb-footer__entity {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 700;
}
.deb-footer__address,
.deb-footer__contacts,
.deb-footer__info-reason {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.55;
	opacity: .9;
}
.deb-footer__share {
	display: grid;
	grid-template-columns: repeat(3, 44px);
	gap: 10px;
	justify-content: var(--deb-footer-align, center);
	margin-bottom: 16px;
}
.deb-footer__social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	justify-content: var(--deb-footer-align, center);
}
.deb-footer--align-left .deb-footer__share {
	justify-content: flex-start;
}
.deb-footer--align-left .deb-footer__social {
	justify-content: flex-start;
}
.deb-footer__share-item,
.deb-footer__social-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 8px;
	color: inherit;
	background: transparent;
	text-decoration: none;
	cursor: pointer;
	padding: 0;
	transition: background .15s ease, border-color .15s ease;
}
.deb-footer__share-item:hover,
.deb-footer__share-item:focus,
.deb-footer__social-item:hover,
.deb-footer__social-item:focus {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .45);
	color: inherit;
}
.deb-footer__share-icon {
	display: block;
}
.deb-footer__section-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	justify-content: inherit;
	margin-bottom: 14px;
}
.deb-footer__section-link {
	color: var(--deb-footer-link, var(--deb-accent, #6eb5ff));
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
}
.deb-footer__section-link:hover,
.deb-footer__section-link:focus {
	text-decoration: underline;
}
.deb-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	justify-content: inherit;
	margin-bottom: 10px;
}
.deb-footer__legal-link {
	color: var(--deb-footer-link, var(--deb-accent, #6eb5ff));
	text-decoration: none;
	font-size: 14px;
}
.deb-footer__legal-link:hover,
.deb-footer__legal-link:focus {
	text-decoration: underline;
}
.deb-footer__copyright {
	margin: 0;
	font-size: 13px;
	opacity: .75;
}

.deb-event .deb-footer__tagline,
.deb-event .deb-footer__entity,
.deb-event .deb-footer__address,
.deb-event .deb-footer__contacts,
.deb-event .deb-footer__copyright {
	color: var(--deb-footer-text, #e8e8e8) !important;
}
.deb-event .deb-footer__entity {
	font-weight: 700;
}
.deb-event .deb-footer__section-link,
.deb-event .deb-footer__legal-link {
	color: var(--deb-footer-link, var(--deb-accent, #6eb5ff)) !important;
}
.deb-event .deb-footer__share-item {
	color: var(--deb-footer-text, #e8e8e8) !important;
	border-color: rgba(255, 255, 255, .35) !important;
}
.deb-event .deb-footer__social-item {
	color: var(--deb-footer-text, #e8e8e8) !important;
	border-color: rgba(255, 255, 255, .35) !important;
}
.deb-event .deb-footer__share-item:hover,
.deb-event .deb-footer__share-item:focus,
.deb-event .deb-footer__social-item:hover,
.deb-event .deb-footer__social-item:focus {
	color: var(--deb-footer-text, #e8e8e8) !important;
	border-color: rgba(255, 255, 255, .55) !important;
}

@media (min-width: 769px) and (max-width: 1024px) {
	.deb-footer--columns-3 .deb-footer__inner,
	.deb-footer--columns-4 .deb-footer__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.deb-required { color: #ffd966; }

/*
 * Force the GDPR consent label text — and ANY inline element nested inside
 * the admin-authored label HTML (a, span, strong, em, code …) — to render
 * white. Event pages often use a dark background, so themes that
 * default <body> color to black/grey leave the consent text invisible. We
 * scope the rule under .deb-event so it never leaks onto unrelated content
 * elsewhere on the host site, and use !important to defeat the most
 * aggressive theme stylesheets without any specificity wars.
 *
 * The wildcard child selector (.deb-gdpr__label *) is essential — without
 * it, the <a> tags inside the consent sentence would still inherit the
 * theme's link color (commonly black or brand-blue) instead of white.
 */
.deb-event .deb-gdpr__label,
.deb-event .deb-gdpr__label * {
	color: #fff !important;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}
.deb-event .deb-gdpr__label a {
	color: #fff !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;
}
.deb-event .deb-gdpr__label a:hover,
.deb-event .deb-gdpr__label a:focus {
	text-decoration: none !important;
	opacity: .85;
}

/* Registration consents: white card row — dark text like input placeholders. */
.deb-event .deb-form-check .deb-gdpr__label,
.deb-event .deb-form-check .deb-gdpr__label * {
	color: var(--deb-card-text) !important;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}
.deb-event .deb-form-check .deb-gdpr__label a {
	color: var(--deb-accent) !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;
}
.deb-event .deb-form-check .deb-gdpr__label a:hover,
.deb-event .deb-form-check .deb-gdpr__label a:focus {
	opacity: .85;
	text-decoration: none !important;
}

/* ------------------------------------------------------------------ *
 * Subscribe — email capture (standalone form, outside .deb-form)
 * ------------------------------------------------------------------ */
.deb-subscribe-form {
	max-width: var(--deb-field-max-width, 100%);
	margin: 0 auto;
}
.deb-subscribe__row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
}
.deb-subscribe__controls[hidden],
.deb-subscribe__row[hidden],
.deb-subscribe__success[hidden] {
	display: none !important;
}
.deb-subscribe__field {
	position: relative;
}
.deb-subscribe__row--inline .deb-subscribe__field {
	flex: 1 1 220px;
	min-width: 0;
	margin: 0;
}
.deb-subscribe__row--inline .deb-subscribe__submit {
	flex: 0 0 auto;
	align-self: stretch;
}
.deb-subscribe__row--stacked {
	flex-direction: column;
}
.deb-subscribe__row--stacked .deb-subscribe__field,
.deb-subscribe__row--stacked .deb-subscribe__submit {
	flex: 0 0 auto;
	width: 100%;
}
.deb-subscribe__message,
.deb-subscribe__error {
	margin: 16px 0 0;
	font-size: 15px;
	line-height: 1.5;
	text-align: center;
}
.deb-subscribe__error {
	color: #b32d2e;
}
.deb-subscribe__success {
	margin: 0;
	padding: 8px 16px 16px;
	line-height: 1.4;
	text-align: var(--deb-subscribe-success-align, center);
	font-size: var(--deb-subscribe-success-size, 24px);
	font-weight: var(--deb-subscribe-success-weight, 600);
	font-style: var(--deb-subscribe-success-style, normal);
	text-decoration: var(--deb-subscribe-success-decoration, none);
	font-family: var(--deb-subscribe-success-family, inherit);
	color: var(--deb-subscribe-success-color, inherit);
	padding-top: var(--deb-subscribe-success-pad-top, 8px);
	padding-right: var(--deb-subscribe-success-pad-right, 0);
	padding-bottom: var(--deb-subscribe-success-pad-bottom, 16px);
	padding-left: var(--deb-subscribe-success-pad-left, 0);
}
.deb-subscribe-form.is-success {
	max-width: none;
}
.deb-subscribe__field input.has-error {
	border-color: #b32d2e;
}
@media (max-width: 640px) {
	.deb-subscribe__row--inline {
		flex-direction: column;
	}
	.deb-subscribe__row--inline .deb-subscribe__field {
		flex: 0 0 auto;
		width: 100%;
	}
	.deb-subscribe__row--inline .deb-subscribe__submit {
		width: 100%;
		align-self: auto;
	}
}

/* ------------------------------------------------------------------ *
 * Submit button
 *
 * Padding and font-size are emitted inline from PHP (admin-controlled).
 * The shape is one of two modifier classes:
 *   .deb-submit--pill       → fully rounded ends   (default)
 *   .deb-submit--rectangle  → subtle rounded corners (10px)
 *
 * .deb-submit--framed adds a thin outer ring in the accent color with a
 * small gap, matching the bordered "Zaregistrovať sa" mock. We use
 * `outline` + `outline-offset` instead of a wrapper element because
 * modern browsers render `outline` along the element's `border-radius`,
 * giving us a perfectly-shaped frame for both pill and rectangle.
 * ------------------------------------------------------------------ */
.deb-submit-wrap {
	text-align: center;
	width: 100%;
	/* Vertical rhythm comes from .deb-section padding; keep margin at 0 so
	   button sections match the gap between every other section type. */
	margin: 0;
}
.deb-submit {
	display: inline-flex;          /* flex so we can center the label on
	                                  every axis without depending on the
	                                  browser's default <button> behaviour
	                                  (which themes love to override). */
	align-items: center;
	justify-content: center;
	max-width: 100%;
	border: 0;
	cursor: pointer;
	font-weight: 600;
	color: #fff;
	background: var(--deb-accent);
	letter-spacing: .04em;
	line-height: 1.2;              /* keeps multi-line labels visually balanced */
	text-align: center !important; /* defeat themes that left-align <button> */
	vertical-align: middle;
	box-shadow: var(--deb-shadow);
	transition: transform .15s ease, box-shadow .15s ease, outline-offset .15s ease;
}
.deb-submit--pill      { border-radius: var(--deb-radius-pill); }
.deb-submit--rectangle { border-radius: var(--deb-radius); }

/* Shared button hook (1.4.20). Link & download actions render as <a> but
   must look identical to the submit <button>: kill the default underline
   and inherited link color. */
a.deb-btn,
a.deb-submit {
	text-decoration: none !important;
	color: #fff;
}
a.deb-btn:hover,
a.deb-submit:hover { color: #fff; }

/* Outer thin ring + small gap. `outline` follows border-radius in modern
   browsers (Chrome/Edge ≥ 88, Firefox ≥ 88, Safari ≥ 16.4). */
.deb-submit--framed {
	outline: 2px solid var(--deb-accent);
	outline-offset: 6px;
}

.deb-submit:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}
.deb-submit--framed:hover { outline-offset: 8px; }
.deb-submit:disabled { opacity: .65; cursor: progress; transform: none; }
.deb-form-error {
	max-width: 480px;
	margin: 12px auto 0;
	background: #ffe5e5;
	color: #8a1f1f;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 13px;
}

/* ------------------------------------------------------------------ *
 * Field-level validation hint
 * ------------------------------------------------------------------ */
.deb-input.has-error input,
.deb-input.has-error select,
.deb-resources.has-error,
.deb-gdpr__item.has-error label {
	outline: 2px solid #ff4d4d;
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * Thank-you (default message + admin override container)
 * ------------------------------------------------------------------ */
.deb-thanks {
	min-height: var(--deb-thanks-min-h, 360px);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	color: #fff;
	text-align: center;
	padding: 60px 20px;
	background: var(--deb-thanks-bg, transparent);
}

/* Default fallback (`.deb-thanks--default`) keeps the old uppercase look so
 * existing events that haven't touched the new admin panel still render
 * exactly the same. The .deb-thanks--dynamic variant below is the new,
 * admin-stylable mode. */
.deb-thanks--default h1 { font-size: clamp(28px, 5vw, 56px); margin: 0; text-transform: uppercase; }
.deb-thanks--default p  { margin: 12px 0 0; opacity: .85; }

/* ---- Dynamic mode --------------------------------------------------- *
 * Inline custom properties (set on the wrapper) drive size + color so the
 * admin's choices override these defaults without per-event stylesheet
 * generation. */
.deb-thanks--dynamic {
	text-align: var(--deb-thanks-align, center);
	align-items: var(--deb-thanks-align, center) !important; /* flex axis */
}
.deb-thanks--dynamic.deb-thanks--align-center { align-items: center !important; }
.deb-thanks--dynamic.deb-thanks--align-left   { align-items: flex-start !important; }

.deb-thanks--dynamic .deb-thanks__title {
	margin: 0;
	font-size: var(--deb-thanks-title-size, 56px);
	color: var(--deb-thanks-title-color, #ffffff);
	line-height: 1.15;
}
.deb-thanks--dynamic .deb-thanks__tagline {
	margin: 16px 0 0;
	font-size: var(--deb-thanks-tagline-size, 18px);
	color: var(--deb-thanks-tag-color, #ffffff);
	opacity: 1;
}

/* ---- Registration closed page (1.2.38 / 1.2.41) ---------------------- *
 * Single hero-style band; title/tagline pick up admin custom properties.
 * Full viewport height so no empty page-background strip below. */
.deb-event--closed {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.deb-event--closed .deb-hero--closed {
	flex: 1 1 auto;
}
.deb-hero--closed .deb-hero__inner--closed {
	gap: 0;
	padding: clamp(24px, 6vw, 60px);
	text-align: center;
}
.deb-hero--closed .deb-thanks__title {
	margin: 0;
	font-size: var(--deb-thanks-title-size, 56px);
	color: var(--deb-thanks-title-color, #ffffff);
	line-height: 1.15;
	max-width: 900px;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
.deb-hero--closed .deb-thanks__tagline {
	margin: 16px 0 0;
	font-size: var(--deb-thanks-tagline-size, 18px);
	color: var(--deb-thanks-tag-color, #ffffff);
	max-width: 900px;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
.deb-hero--closed.deb-thanks--align-left .deb-hero__inner--closed {
	align-items: flex-start;
	text-align: left;
}

/* ---- Image mode ----------------------------------------------------- *
 * Single image, centred. The image element's own inline style enforces
 * max-width / responsiveness — this rule just guarantees centering and
 * vertical breathing room regardless of theme. */
.deb-thanks--image {
	min-height: auto; /* image dictates its own height */
	padding: 40px 20px;
}
.deb-thanks--image img {
	display: block;
	margin: 0 auto;
}

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
	.deb-event {
		--deb-section-padding-x: 20px;
	}

	.deb-form-grid { grid-template-columns: 1fr; }

	.deb-resources { grid-template-columns: 1fr; }

	.deb-grid--cols-2,
	.deb-grid--cols-3,
	.deb-grid--cols-4,
	.deb-grid--cols-5,
	.deb-grid--cols-6,
	.deb-grid--cols-7,
	.deb-grid--cols-8 { grid-template-columns: 1fr; }

	.deb-cards--manual-columns {
		grid-template-columns: 1fr;
	}
	.deb-cards--mobile-right-first .deb-cards__column--1 { order: 2; }
	.deb-cards--mobile-right-first .deb-cards__column--2 { order: 1; }

	.deb-gallery__grid--cols-2 { grid-template-columns: 1fr; }
	.deb-gallery__grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.deb-countdown__unit {
		flex: 1 1 calc(50% - 12px);
		max-width: none;
	}

	.deb-event .deb-pricing-grid[class*="deb-pricing-grid--cols-"] {
		grid-template-columns: 1fr !important;
	}

	/* Explicit-width mode keeps its centred max-width on mobile too —
	   the inline --deb-blog-width still caps the row, but never above
	   the available content area. */
	.deb-section--blog .deb-grid.deb-grid--has-width {
		max-width: min(var(--deb-blog-width), 100%);
		margin-left: auto;
		margin-right: auto;
	}

	.deb-agenda--2col {
		display: flex;
		flex-direction: column;
		row-gap: 12px;
		padding: 0;
	}
	.deb-agenda--2col::before,
	.deb-agenda--2col .deb-agenda__marker,
	.deb-agenda--2col .deb-agenda__row::after { display: none; }
	.deb-agenda--2col .deb-agenda__row {
		width: 100%;
	}

	/* Stack start/end times — narrow column, more room for title/speaker. */
	.deb-agenda__time {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		min-width: 0;
		width: auto;
		max-width: 4.25rem;
		padding: 12px 8px 12px 12px;
		white-space: normal;
		font-size: 13px;
	}
	.deb-agenda__time-sep { display: none; }
	.deb-agenda__time-start,
	.deb-agenda__time-end { display: block; }
	.deb-agenda__body { padding-left: 8px; }

	/* Footer: always single column on narrow viewports */
	.deb-footer__inner {
		grid-template-columns: minmax(0, 1fr);
	}
	.deb-footer--two-col .deb-footer__inner {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	/* Keep anchor targets below the measured closed sticky menu. */
	.deb-event .deb-section { scroll-margin-top: calc(var(--deb-nav-h, 0px) + 14px); }

	/*
	 * MOBILE HERO LAYOUT (added in 1.2.11)
	 *
	 * Problem we're fixing: on a 360×420 portrait hero with a wide hero image
	 * (typical 16:9 / 2:1 marketing artwork), background-size:cover crops the
	 * image to roughly the middle ~25% of its width — the visitor sees a
	 * heavily zoomed slice instead of the actual photo.
	 *
	 * New approach: drop the fixed min-height on mobile and let the hero be
	 * a natural-flow column. The <img class="deb-hero__bg"> becomes an
	 * in-flow element with object-fit:contain so the WHOLE image is visible,
	 * scaled to the viewport width. Title / tagline / arrow then stack
	 * underneath. Looks great on every aspect ratio (portrait, square,
	 * widescreen) without any per-event tuning.
	 */
	.deb-hero__device-layer--d,
	.deb-hero__device-layer--t { display: none; }
	.deb-hero__device-layer--m { display: block; }
	.deb-hero--mode-m-none .deb-hero__overlay { display: none !important; }
	.deb-hero {
		min-height: 0;             /* let content + image dictate height */
		padding-bottom: 18px;      /* breathing room under the arrow */
		/* Dark backdrop so the white title + tagline stay readable in the
		 * area below the (in-flow) image, regardless of the page-level
		 * background the admin chose. Suppressed when there's no hero
		 * image (.deb-hero--no-image rule lower down keeps the page bg
		 * showing through unaltered, per existing admin behaviour). */
		background-color: var(--deb-hero-canvas-m, var(--deb-hero-canvas-t, var(--deb-hero-canvas-d, #111111)));
	}
	.deb-hero__overlay {
		background: var(--deb-hero-overlay-color-m, var(--deb-hero-overlay-color-t, var(--deb-hero-overlay-color-d, #000000)));
		opacity: var(--deb-hero-overlay-opacity-m, 0);
	}
	.deb-hero--overlay-m-on .deb-hero__overlay { display: block !important; }
	.deb-hero--overlay-m-off .deb-hero__overlay { display: none !important; }
	/* No hero image: fixed visual band; title centred, tagline pinned inside it. */
	.deb-hero.deb-hero--no-image {
		background-color: transparent;
		min-height: auto;
		padding-bottom: 0;
	}
	.deb-hero.deb-hero--no-image .deb-hero__inner {
		position: relative;
		inset: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 12px;
		z-index: 2;
		padding: var(--deb-hero-inner-pad-top, 18px) clamp(16px, 5vw, 28px) var(--deb-hero-inner-pad-bottom, 18px);
		order: unset;
		flex: 0 0 auto;
	}
	.deb-hero.deb-hero--no-image .deb-hero__bottom {
		position: static;
		order: 3;
		margin-top: 8px;
		padding: 0 clamp(16px, 5vw, 28px) 0;
	}
	.deb-hero__stage {
		position: relative;
		inset: auto;
		order: 1;
		flex: 0 0 auto;
		width: 100%;
		pointer-events: auto;
	}
	/* The dark overlay was designed to darken the bg-image so the title
	 * (layered on top of it on desktop) stayed readable. On mobile the
	 * title now sits BELOW the image and the image should be shown as-is,
	 * so the overlay just dims the artwork unnecessarily — hide it. */
	.deb-hero__overlay { display: none; }
	.deb-hero__stage .deb-hero__overlay { display: none; }
	.deb-hero__bg,
	.deb-hero__stage .deb-hero__bg {
		position: static;          /* in-flow inside the stage band */
		width: 100%;
		height: auto;              /* natural aspect ratio */
		max-height: 70vh;          /* sanity cap on extremely tall portraits */
		object-fit: contain;       /* applies only if max-height kicks in */
		object-position: var(--deb-hero-image-pos-m, center);
	}
	.deb-hero--mode-m-image.deb-hero--fit-m-natural .deb-hero__device-layer--m {
		position: relative;
		inset: auto;
	}
	.deb-hero--mode-m-image.deb-hero--fit-m-natural {
		padding-bottom: 0;
	}
	.deb-hero__title {
		font-size: var(--deb-hero-title-m-size, clamp(28px, 8vw, calc(var(--deb-hero-title-size) * 0.6)));
		font-weight: var(--deb-hero-title-m-weight, var(--deb-hero-title-weight, 800));
		font-style: var(--deb-hero-title-m-style, var(--deb-hero-title-style, normal));
		text-decoration: var(--deb-hero-title-m-decoration, var(--deb-hero-title-decoration, none));
		text-align: var(--deb-hero-title-m-align, var(--deb-hero-title-align, center));
		font-family: var(--deb-hero-title-m-family, var(--deb-hero-title-family, inherit));
		color: var(--deb-hero-title-m-color, var(--deb-hero-title-color, #fff)) !important;
		text-shadow: var(--deb-hero-title-m-shadow, var(--deb-hero-title-shadow, none));
		padding-top: var(--deb-hero-title-m-pad-top, var(--deb-hero-title-pad-top, 0));
		padding-right: var(--deb-hero-title-m-pad-right, var(--deb-hero-title-pad-right, 0));
		padding-bottom: var(--deb-hero-title-m-pad-bottom, var(--deb-hero-title-pad-bottom, 0));
		padding-left: var(--deb-hero-title-m-pad-left, var(--deb-hero-title-pad-left, 0));
	}
	.deb-hero__tagline {
		font-size: var(--deb-hero-tagline-m-size, var(--deb-hero-tagline-size, clamp(15px, 1.4vw, 18px)));
		font-weight: var(--deb-hero-tagline-m-weight, var(--deb-hero-tagline-weight, 400));
		font-style: var(--deb-hero-tagline-m-style, var(--deb-hero-tagline-style, normal));
		text-decoration: var(--deb-hero-tagline-m-decoration, var(--deb-hero-tagline-decoration, none));
		text-align: var(--deb-hero-tagline-m-align, var(--deb-hero-tagline-align, center));
		font-family: var(--deb-hero-tagline-m-family, var(--deb-hero-tagline-family, inherit));
		color: var(--deb-hero-tagline-m-color, var(--deb-hero-tagline-color, #fff)) !important;
		text-shadow: var(--deb-hero-tagline-m-shadow, var(--deb-hero-tagline-shadow, none));
		padding-top: var(--deb-hero-tagline-m-pad-top, var(--deb-hero-tagline-pad-top, 0));
		padding-right: var(--deb-hero-tagline-m-pad-right, var(--deb-hero-tagline-pad-right, 0));
		padding-bottom: var(--deb-hero-tagline-m-pad-bottom, var(--deb-hero-tagline-pad-bottom, 0));
		padding-left: var(--deb-hero-tagline-m-pad-left, var(--deb-hero-tagline-pad-left, 0));
	}
	.deb-section__title {
		padding-top: var(--deb-section-title-pad-top-m, var(--deb-section-title-pad-top, 0));
		padding-right: var(--deb-section-title-pad-right-m, var(--deb-section-title-pad-right, 0));
		padding-bottom: var(--deb-section-title-pad-bottom-m, var(--deb-section-title-pad-bottom, 0));
		padding-left: var(--deb-section-title-pad-left-m, var(--deb-section-title-pad-left, 0));
	}
	.deb-section__subtitle {
		padding-top: var(--deb-section-subtitle-pad-top-m, var(--deb-section-subtitle-pad-top, 0));
		padding-right: var(--deb-section-subtitle-pad-right-m, var(--deb-section-subtitle-pad-right, 0));
		padding-bottom: var(--deb-section-subtitle-pad-bottom-m, var(--deb-section-subtitle-pad-bottom, 0));
		padding-left: var(--deb-section-subtitle-pad-left-m, var(--deb-section-subtitle-pad-left, 0));
	}
	.deb-gallery__type {
		padding-top: var(--deb-gallery-type-pad-top-m, var(--deb-gallery-type-pad-top, 0));
		padding-right: var(--deb-gallery-type-pad-right-m, var(--deb-gallery-type-pad-right, 0));
		padding-bottom: var(--deb-gallery-type-pad-bottom-m, var(--deb-gallery-type-pad-bottom, 0));
		padding-left: var(--deb-gallery-type-pad-left-m, var(--deb-gallery-type-pad-left, 0));
	}
	.deb-event .deb-pricing-footnote {
		padding-top: var(--deb-pricing-footnote-pad-top-m, var(--deb-pricing-footnote-pad-top, 28px)) !important;
		padding-right: var(--deb-pricing-footnote-pad-right-m, var(--deb-pricing-footnote-pad-right, 0)) !important;
		padding-bottom: var(--deb-pricing-footnote-pad-bottom-m, var(--deb-pricing-footnote-pad-bottom, 0)) !important;
		padding-left: var(--deb-pricing-footnote-pad-left-m, var(--deb-pricing-footnote-pad-left, 0)) !important;
	}
	.deb-subscribe-success {
		padding-top: var(--deb-subscribe-success-pad-top-m, var(--deb-subscribe-success-pad-top, 8px));
		padding-right: var(--deb-subscribe-success-pad-right-m, var(--deb-subscribe-success-pad-right, 0));
		padding-bottom: var(--deb-subscribe-success-pad-bottom-m, var(--deb-subscribe-success-pad-bottom, 16px));
		padding-left: var(--deb-subscribe-success-pad-left-m, var(--deb-subscribe-success-pad-left, 0));
	}
	/* The inner block (title + tagline) and optional bottom scroll cue flow
	 * below the image instead of being absolutely positioned over it. */
	.deb-hero__inner {
		flex: 0 0 auto;
		order: 2;
		gap: 10px;
		padding: var(--deb-hero-panel-pad-top-m, 18px) clamp(16px, 5vw, 28px) var(--deb-hero-panel-pad-bottom-m, 18px);
		transform: translateY(var(--deb-hero-text-offset-y-m, 0px));
	}
	.deb-hero--mode-m-image.deb-hero--fit-m-natural .deb-hero__inner {
		min-height: var(--deb-hero-panel-height-m, auto);
		justify-content: var(--deb-hero-panel-align-m, center);
	}
	.deb-hero__bottom {
		position: static;
		order: 3;
		padding: 0 clamp(16px, 5vw, 28px);
	}

	/* Cover / contain keep a fixed responsive Banner canvas with text over
	 * the image. Natural remains the default mobile flow above. */
	.deb-hero.deb-hero--fit-m-cover,
	.deb-hero.deb-hero--fit-m-contain {
		min-height: var(--deb-hero-min-height-m, var(--deb-hero-min-height, 640px));
		padding-bottom: 0;
		background-color: var(--deb-hero-canvas-m, #111111);
	}
	.deb-hero.deb-hero--fit-m-cover .deb-hero__stage,
	.deb-hero.deb-hero--fit-m-contain .deb-hero__stage {
		position: absolute;
		inset: 0;
		order: unset;
		width: auto;
	}
	.deb-hero.deb-hero--fit-m-cover .deb-hero__bg,
	.deb-hero.deb-hero--fit-m-contain .deb-hero__bg {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		max-height: none;
	}
	.deb-hero.deb-hero--fit-m-cover .deb-hero__bg { object-fit: cover; }
	.deb-hero.deb-hero--fit-m-contain .deb-hero__bg { object-fit: contain; }
	.deb-hero.deb-hero--fit-m-cover .deb-hero__overlay,
	.deb-hero.deb-hero--fit-m-contain .deb-hero__overlay { display: block; }
	.deb-hero.deb-hero--fit-m-cover .deb-hero__inner,
	.deb-hero.deb-hero--fit-m-contain .deb-hero__inner {
		flex: 1 1 auto;
		order: unset;
		padding: var(--deb-hero-inner-pad-top, 18px) clamp(16px, 5vw, 28px) var(--deb-hero-inner-pad-bottom, 18px);
	}
	.deb-hero.deb-hero--fit-m-cover .deb-hero__bottom,
	.deb-hero.deb-hero--fit-m-contain .deb-hero__bottom {
		position: absolute;
		order: unset;
		bottom: var(--deb-hero-edge);
	}

	/* A section-envelope background is still a real Banner background.
	 * Keep the configured Banner height and overlay text layout; only a truly
	 * empty Banner may collapse to content height via --no-image. */
	.deb-hero.deb-hero--envelope-bg {
		min-height: var(--deb-hero-min-height-m, var(--deb-hero-min-height, 640px));
		padding-bottom: 0;
	}
	.deb-hero.deb-hero--envelope-bg .deb-hero__inner {
		flex: 1 1 auto;
		order: unset;
		position: relative;
	}
	.deb-hero.deb-hero--envelope-bg .deb-hero__bottom {
		position: absolute;
		order: unset;
		bottom: var(--deb-hero-edge);
	}
	.deb-hero.deb-hero--envelope-bg.deb-hero--bg-bleed {
		background-image: var(--deb-section-bg-image, none);
		background-size: var(--deb-section-bg-size, cover);
		background-position: var(--deb-hero-image-pos-m, var(--deb-section-bg-position, center));
		background-repeat: var(--deb-section-bg-repeat, no-repeat);
	}
	.deb-hero.deb-hero--envelope-bg.deb-hero--bg-bleed.deb-hero--fit-m-cover {
		background-size: cover;
	}
	.deb-hero.deb-hero--envelope-bg.deb-hero--bg-bleed.deb-hero--fit-m-contain,
	.deb-hero.deb-hero--envelope-bg.deb-hero--bg-bleed.deb-hero--fit-m-natural {
		background-size: contain;
	}

	/* Video / gradient banner: fixed canvas + text overlay. */
	.deb-hero.deb-hero--mode-m-video,
	.deb-hero.deb-hero--mode-m-gradient {
		min-height: var(--deb-hero-min-height-m, var(--deb-hero-min-height, 640px));
		display: flex;
		flex-direction: column;
		padding-bottom: 0;
		background-color: var(--deb-hero-canvas-m, #111111);
	}
	.deb-hero.deb-hero--mode-m-video .deb-hero__stage,
	.deb-hero.deb-hero--mode-m-gradient .deb-hero__stage {
		position: absolute;
		inset: 0;
		order: unset;
		flex: unset;
		width: auto;
		pointer-events: none;
	}
	.deb-hero.deb-hero--mode-m-video .deb-hero__overlay,
	.deb-hero.deb-hero--mode-m-video .deb-hero__stage .deb-hero__overlay,
	.deb-hero.deb-hero--mode-m-gradient .deb-hero__overlay,
	.deb-hero.deb-hero--mode-m-gradient .deb-hero__stage .deb-hero__overlay {
		display: block;
	}
	.deb-hero.deb-hero--mode-m-video .deb-hero__inner,
	.deb-hero.deb-hero--mode-m-gradient .deb-hero__inner {
		flex: 1 1 auto;
		order: unset;
		position: relative;
	}
	.deb-hero.deb-hero--mode-m-video .deb-hero__bottom,
	.deb-hero.deb-hero--mode-m-gradient .deb-hero__bottom {
		position: absolute;
		order: unset;
	}
	.deb-hero.deb-hero--mode-m-video .deb-hero__video-iframe {
		inset: 0;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		min-width: 0;
		min-height: 0;
		transform: none;
	}

	/* Hero frame inset on small screens when admin frame is enabled. */
	.deb-hero.deb-section--has-frame::before {
		inset: min(var(--deb-section-frame-inset, 6px), 4px);
	}
	/*
	 * Mobile logo: same admin-controlled positioning model as desktop, but
	 * reading the *-m variants. Default values (60 px / 50 %) put a slightly
	 * smaller badge at the vertical centre of the hero block — well clear of
	 * the hamburger at the top and the tagline+arrow at the bottom on every
	 * common image aspect ratio.
	 */
	.deb-hero__logo--edge-right {
		right: 4px;
		left: auto;
		top: var(--deb-hero-logo-pos-m, 50%);
		bottom: auto;
		transform: translateY(-50%);
	}
	.deb-hero__logo--edge-left {
		left: 4px;
		right: auto;
		top: var(--deb-hero-logo-pos-m, 50%);
		bottom: auto;
		transform: translateY(-50%);
	}
	.deb-hero__logo--edge-top {
		top: 4px;
		bottom: auto;
		left: var(--deb-hero-logo-pos-m, 50%);
		right: auto;
		transform: translateX(-50%);
	}
	.deb-hero__logo--edge-bottom {
		bottom: 4px;
		top: auto;
		left: var(--deb-hero-logo-pos-m, 50%);
		right: auto;
		transform: translateX(-50%);
	}
	.deb-hero__logo--image img {
		max-height: var(--deb-hero-logo-size-m, 60px);
		max-width: calc(var(--deb-hero-logo-size-m, 60px) * 1.5);
	}
	.deb-hero__logo--text .deb-hero__logo-text {
		font-size: var(--deb-hero-logo-text-size-m, 12px);
		padding: 6px 10px;
		border-radius: 5px;
	}
	.deb-hero__logo--text.deb-hero__logo--edge-left .deb-hero__logo-text,
	.deb-hero__logo--text.deb-hero__logo--edge-right .deb-hero__logo-text {
		padding: 10px 6px;
	}

	/* Submit button on small screens
	 * --------------------------------
	 * The admin-set horizontal padding (default 60px each side) eats too
	 * much room on a 360px viewport — `padding: 18px 60px` leaves only
	 * ~240px for the label, which can squash longer Slovak strings like
	 * "Zaregistrovať sa" off-center or wrap them awkwardly. We override
	 * the inline `padding` shorthand with an explicit `padding-inline`
	 * (a longhand always wins over the shorthand in the cascade, even
	 * when the shorthand is inline). The vertical padding from the
	 * inline style is preserved.
	 *
	 * The flex centering on .deb-submit (above) takes care of the actual
	 * text alignment. */
	.deb-submit {
		padding-inline: clamp(18px, 6vw, 32px);
		max-width: calc(100vw - 32px); /* never overflow the form gutter */
		width: auto;
	}

	/* Nav -> hamburger (standalone top bar + legacy in-hero).
	 * Accordion in document flow: opening the menu grows the nav block and
	 * pushes hero / page content down instead of overlaying it. */
	.deb-event .deb-nav {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}
	.deb-event .deb-nav__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 36vw) 40px;
		align-items: center;
		column-gap: 6px;
		width: 100%;
		max-width: 100%;
		padding-inline: 12px 8px;
	}
	.deb-event .deb-nav--brand-only .deb-nav__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 36vw);
	}
	.deb-event .deb-nav--brand-only:not(.deb-nav--has-partners) .deb-nav__inner {
		grid-template-columns: minmax(0, 1fr);
	}
	.deb-event .deb-nav__brand {
		grid-column: 1;
		max-width: 100%;
		margin-right: 0;
	}
	.deb-event .deb-nav--brand-only .deb-nav__brand {
		max-width: 100%;
	}
	.deb-event .deb-nav__brand-image {
		height: var(--deb-nav-brand-size-m, 26px);
	}
	.deb-event .deb-nav__brand-text {
		font-size: var(--deb-nav-brand-size-m, 26px);
	}
	.deb-event .deb-nav__partner-logos {
		grid-column: 2;
		justify-self: end;
		width: 100%;
		max-width: 36vw;
		gap: 4px;
		margin-right: 0;
	}
	.deb-event .deb-nav--partners-before-brand .deb-nav__inner {
		grid-template-columns: minmax(0, 36vw) minmax(0, 1fr) 40px;
	}
	.deb-event .deb-nav--partners-before-brand .deb-nav__partner-logos {
		grid-column: 1;
		justify-self: start;
		margin-right: var(--deb-nav-partner-gap-m, 8px);
	}
	.deb-event .deb-nav--partners-before-brand .deb-nav__brand {
		grid-column: 2;
	}
	.deb-event .deb-nav--brand-only.deb-nav--partners-before-brand .deb-nav__inner {
		grid-template-columns: minmax(0, 36vw) minmax(0, 1fr);
	}
	.deb-event .deb-nav--partners-after-brand .deb-nav__brand {
		margin-right: var(--deb-nav-partner-gap-m, 8px);
	}
	.deb-event .deb-nav--partners-after-menu .deb-nav__inner {
		grid-template-columns: minmax(0, 1fr) 40px minmax(0, 36vw);
	}
	.deb-event .deb-nav--partners-after-menu .deb-nav__partner-logos {
		grid-column: 3;
		justify-self: end;
		margin-left: var(--deb-nav-partner-gap-m, 8px);
	}
	.deb-event .deb-nav--partners-after-menu .deb-nav__toggle {
		grid-column: 2;
	}
	.deb-event .deb-nav--brand-only.deb-nav--partners-after-menu .deb-nav__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 36vw);
	}
	.deb-event .deb-nav--brand-only.deb-nav--partners-after-menu .deb-nav__partner-logos {
		grid-column: 2;
	}
	.deb-event .deb-nav--no-brand .deb-nav__partner-logos {
		grid-column: 1 / 3;
		justify-self: start;
		max-width: min(56vw, 220px);
	}
	.deb-event .deb-nav--no-brand.deb-nav--partners-after-menu:not(.deb-nav--brand-only) .deb-nav__partner-logos {
		grid-column: 3;
		justify-self: end;
	}
	.deb-event .deb-nav__partner-logo {
		flex: 1 1 var(--deb-nav-partner-width-m, 52px);
		width: var(--deb-nav-partner-width-m, 52px);
		max-width: var(--deb-nav-partner-width-m, 52px);
	}
	.deb-event .deb-nav__partner-logo-image {
		max-height: 32px;
	}
	.deb-event .deb-nav__toggle {
		display: flex;
		grid-column: 3;
		position: relative;
		right: auto;
		top: auto;
		transform: none;
		align-self: center;
		flex-shrink: 0;
		margin: 4px 0 0 auto;
	}
	.deb-event .deb-nav__list {
		grid-column: 1 / -1;
		flex: 1 0 100%;
		flex-direction: column;
		align-items: stretch;
		text-align: var(--deb-nav-align, center);
		gap: 0;
		padding: 0;
		max-height: 0;
		min-height: 0; /* override desktop min-height so links don't peek through */
		overflow: hidden;
		transition: max-height .25s ease;
		background: var(--deb-nav-bg, rgba(0,0,0,.92));
		position: static;
		width: 100%;
	}
	.deb-event .deb-nav.is-open .deb-nav__list { max-height: 80vh; padding: 8px 0; }
	.deb-event .deb-nav__item { border-top: 1px solid rgba(255,255,255,.1); }
	.deb-event .deb-nav__link { display: block; padding: 14px 18px; border: 0; text-shadow: none; }

	/* Standalone top bar */
	.deb-nav--standalone {
		min-height: 48px;
		padding:
			calc(4px + var(--deb-nav-padding-top, 0px))
			0
			calc(4px + var(--deb-nav-padding-bottom, 0px));
	}
	.deb-nav--standalone .deb-nav__list {
		margin: 0;
		backdrop-filter: blur(8px);
	}

	/* In-hero nav on mobile */
	.deb-nav--in-hero { padding: 14px 0 0; }
	.deb-nav--in-hero .deb-nav__toggle { margin: 4px 16px 0 0; }
	.deb-nav--in-hero .deb-nav__list { margin: 0; }
}