/* DN Seminars — front end
   Colour tokens are injected inline from the settings; everything else lives here. */

.dn-seminar {
	--dn-dark: #0d0f16;
	--dn-line: #dcdde1;
	--dn-white: #fff;
	--dn-radius-card: 24px;
	--dn-radius-pill: 999px;
	--dn-radius-block: 14px;
	--dn-wrap: 1180px;
	--dn-navbar: 54px;
	--dn-navlink-pad: clamp(16px, 2vw, 30px);
	--dn-active: var(--dn-red);
	--dn-tt-hero: uppercase;
	--dn-tt-intro: uppercase;

	color: var(--dn-text);
	font-size: 16px;
	line-height: 1.7;
}

.dn-seminar *,
.dn-seminar *::before,
.dn-seminar *::after {
	box-sizing: border-box;
}

.dn-wrap {
	width: 100%;
	max-width: var(--dn-wrap);
	margin-inline: auto;
	padding-inline: 20px;
}

.dn-wrap--narrow {
	max-width: 820px;
}

.dn-seminar img {
	max-width: 100%;
	height: auto;
}

.dn-seminar a:focus-visible,
.dn-seminar summary:focus-visible,
.dn-seminar button:focus-visible {
	outline: 3px solid var(--dn-red);
	outline-offset: 2px;
}

/* hgroup pairs a title with its deck; it must not add spacing of its own. */
.dn-hgroup {
	margin: 0;
	padding: 0;
}

/* Real subheadings typed in the editor — use Heading 3 for genuine
   subsections such as "Το περιεχόμενο εκπαίδευσης περιλαμβάνει:". */
.dn-seminar .dn-prose h2,
.dn-seminar .dn-prose h3,
.dn-seminar .dn-prose h4 {
	margin: 1.6em 0 .5em;
	color: var(--dn-navy);
	font-weight: 800;
	line-height: 1.25;
}

.dn-seminar .dn-prose h2 { font-size: 21px; }
.dn-seminar .dn-prose h3 { font-size: 18px; }
.dn-seminar .dn-prose h4 { font-size: 16px; }

.dn-prose > *:first-child { margin-top: 0; }
.dn-prose > *:last-child { margin-bottom: 0; }
.dn-prose p { margin: 0 0 1em; }
.dn-prose ul,
.dn-prose ol { margin: 0 0 1em 1.2em; padding: 0; }
.dn-prose li { margin-bottom: .35em; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ Hero */

.dn-hero {
	--dn-ov: var(--dn-navy);
	--dn-ov-strength: 1;

	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(380px, 46vw, 560px);
	background: var(--dn-navy);
	overflow: hidden;
}

.dn-hero__media {
	position: absolute;
	inset: 0;
}

.dn-hero .dn-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--dn-hero-pos, center);
}

.dn-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: var(--dn-ov-strength, 1);
}

/* First declaration is the fallback for engines without color-mix; the second
   wins everywhere else and follows the per-seminar overlay colour. */
.dn-hero--ov-gradient .dn-hero__media::after {
	background: linear-gradient(100deg, rgb(16 28 79 / 96%) 0%, rgb(16 28 79 / 86%) 34%, rgb(16 28 79 / 42%) 62%, rgb(16 28 79 / 15%) 100%);
	background: linear-gradient(
		100deg,
		color-mix(in srgb, var(--dn-ov) 96%, transparent) 0%,
		color-mix(in srgb, var(--dn-ov) 86%, transparent) 34%,
		color-mix(in srgb, var(--dn-ov) 42%, transparent) 62%,
		color-mix(in srgb, var(--dn-ov) 15%, transparent) 100%
	);
}

/* Same idea, but the dark weight reaches ~70% across before letting go. */
.dn-hero--ov-gradient_wide .dn-hero__media::after {
	background: linear-gradient(100deg, rgb(16 28 79 / 96%) 0%, rgb(16 28 79 / 88%) 48%, rgb(16 28 79 / 45%) 78%, rgb(16 28 79 / 15%) 100%);
	background: linear-gradient(
		100deg,
		color-mix(in srgb, var(--dn-ov) 96%, transparent) 0%,
		color-mix(in srgb, var(--dn-ov) 88%, transparent) 48%,
		color-mix(in srgb, var(--dn-ov) 45%, transparent) 78%,
		color-mix(in srgb, var(--dn-ov) 15%, transparent) 100%
	);
}

.dn-hero--ov-full .dn-hero__media::after {
	background: var(--dn-ov);
}

.dn-hero--ov-none .dn-hero__media::after {
	display: none;
}

.dn-hero__inner {
	position: relative;
	z-index: 1;
	padding-block: clamp(48px, 7vw, 96px);
	color: var(--dn-white);
	max-width: var(--dn-wrap);
}

.dn-hero__eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 14px;
	font-size: clamp(14px, 1.2vw, 16px);
	letter-spacing: .01em;
}

/* All runs occupy one grid cell, so the box is as wide as the longest entry
   and nothing shifts as they cycle. */
.dn-rot {
	display: inline-grid;
	overflow: hidden;
}

.dn-rot__item {
	grid-area: 1 / 1;
	display: flex;
	align-items: baseline;
	gap: 6px;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(9px);
	transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .3, 1);
}

.dn-rot__item.is-current {
	opacity: 1;
	transform: none;
}

.dn-rot__item.is-leaving {
	opacity: 0;
	transform: translateY(-9px);
}

.dn-seminar .dn-rot__city {
	font-weight: 700;
	font-style: normal;
}

.dn-rot__date {
	font-style: italic;
	font-weight: 600;
}

.dn-hero__level {
	color: var(--dn-t-level, var(--dn-red));
	font-weight: 700;
}

/* Specificity note: Elementor Global Fonts emit `.elementor-kit-N h1 {...}`
   (0,1,1). A bare `.dn-hero__title` (0,1,0) loses to it, so every heading here
   is scoped to .dn-seminar (0,2,0) to keep the plugin's typography. */
.dn-seminar .dn-hero__title {
	margin: 0;
	max-width: 16ch;
	font-size: clamp(34px, 5vw, 62px);
	font-weight: 800;
	line-height: .96;
	letter-spacing: -.01em;
	text-transform: var(--dn-tt-hero, uppercase);
	color: var(--dn-white);
}

.dn-seminar .dn-hero__subtitle {
	margin: 10px 0 0;
	max-width: 28ch;
	font-size: clamp(18px, 2.1vw, 27px);
	font-weight: 700;
	line-height: 1.18;
}

.dn-hero__note {
	position: relative;
	margin: 30px 0 0;
	padding-top: 26px;
	font-size: clamp(15px, 1.3vw, 18px);
	font-weight: 700;
}

.dn-hero__note::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: min(420px, 100%);
	height: 1px;
	background: rgb(255 255 255 / 55%);
}

.dn-hero--plain .dn-hero__inner {
	padding-block: clamp(56px, 8vw, 110px);
}

/* ------------------------------------------------------------- Sub navigation */

.dn-subnav {
	z-index: 90;
}

.dn-subnav--sticky {
	position: sticky;
	top: var(--dn-offset, 0px);
}

/* Full-bleed bar: colour spans the viewport, items line up with the content. */
.dn-subnav--full { background: var(--dn-navy); }

.dn-subnav__bar {
	display: flex;
	align-items: center;
	gap: 16px;
}

.dn-subnav--full .dn-subnav__list {
	margin-inline-start: calc(-1 * var(--dn-navlink-pad));
}

/* Boxed bar: the coloured block itself is limited to the content width and
   floats over whatever it happens to be scrolling past. */
.dn-subnav--boxed {
	padding-block: 12px;
	background: transparent;
}

.dn-subnav--boxed .dn-subnav__wrap {
	padding-inline: 0;
}

.dn-subnav--boxed .dn-subnav__bar {
	background: var(--dn-navy);
	border-radius: var(--dn-radius-block);
	overflow: hidden;
	box-shadow: 0 6px 20px rgb(16 28 79 / 14%);
	padding-inline-end: 20px;
}

/* Only the first item follows the box corner. Every link is the first child of
   its own <li>, so the radius must be scoped to the item, not the link. */
.dn-subnav--boxed .dn-subnav__item:first-child .dn-subnav__link {
	border-start-start-radius: var(--dn-radius-block);
	border-end-start-radius: var(--dn-radius-block);
}

/* The list must not use the margin shorthand: it would cancel the
   auto centring that .dn-wrap sets on the parent. */
.dn-subnav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	min-height: var(--dn-navbar);
	margin-block: 0;
	padding: 0;
	list-style: none;
}

.dn-subnav__item { margin: 0; display: flex; }

.dn-subnav__link {
	display: flex;
	align-items: center;
	min-height: var(--dn-navbar);
	padding-inline: var(--dn-navlink-pad);
	color: rgb(255 255 255 / 86%);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

.dn-subnav__link:hover,
.dn-subnav__link:focus {
	background: rgb(255 255 255 / 12%);
	color: var(--dn-white);
}

.dn-subnav__link.is-active {
	background: var(--dn-active);
	color: var(--dn-white);
}

/* The run list joins the bar once it sticks, right aligned. */
.dn-subnav__bar .dn-rot--bar {
	margin-inline-start: auto;
	color: rgb(255 255 255 / 88%);
	font-size: 14px;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .35s ease, transform .35s ease;
	pointer-events: none;
}

/* In the sticky bar only, the city takes the accent so it separates from the
   date beside it. The hero rotator is unaffected. */
.dn-subnav.is-stuck .dn-rot--bar .dn-rot__city {
	color: var(--dn-t-level, var(--dn-red));
}

.dn-subnav.is-stuck .dn-rot--bar {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.dn-rot--bar .dn-rot__city { color: var(--dn-white); }

/* Anchor targets clear the sticky bar. */
.dn-seminar [id] {
	scroll-margin-top: calc(var(--dn-offset, 0px) + var(--dn-navbar));
}

/* --------------------------------------------------------------- Sections */

.dn-section {
	padding-block: clamp(48px, 6vw, 84px);
	background: var(--dn-white);
}

.dn-section--band { background: var(--dn-band); }
.dn-section--dark { background: var(--dn-dark); }

/* Blurred hero image behind the schedule. The backdrop is inset past the
   edges and scaled so the blur never feathers into a pale border. */
.dn-section--media {
	--dn-blur: 8px;
	--dn-glass: 24px;

	position: relative;
	overflow: hidden;
}

.dn-section--media > .dn-wrap {
	position: relative;
	z-index: 1;
}

.dn-section__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.dn-section__bg::before {
	content: "";
	position: absolute;
	inset: -7%;
	background-image: var(--dn-shot);
	background-position: center;
	background-size: cover;
	filter: blur(var(--dn-blur)) saturate(1.15) brightness(1.04);
	transform: scale(1.04);
}

/* Parallax reveal. clip-path on the wrapper makes it the containing block for
   the fixed child, so the layer stays put and is clipped to this section —
   unlike background-attachment: fixed, which iOS Safari ignores. */
@supports (clip-path: inset(0)) {
	.dn-section--fixed .dn-section__bg {
		clip-path: inset(0);
	}

	.dn-section--fixed .dn-section__bg::before {
		position: fixed;
		inset: 0;
		transform: scale(1.08);
	}
}

/* Frosted panels. The photo behind stays sharp; the blur happens here, which
   is what makes it read as glass rather than as a blurred picture. */
.dn-section--glass .dn-block {
	background: rgb(255 255 255 / 76%);
	backdrop-filter: blur(var(--dn-glass)) saturate(180%);
	-webkit-backdrop-filter: blur(var(--dn-glass)) saturate(180%);
	border: 1px solid rgb(255 255 255 / 55%);
	box-shadow:
		0 24px 60px rgb(8 12 30 / 28%),
		inset 0 1px 0 rgb(255 255 255 / 70%);
}

.dn-section--glass .dn-block__head {
	background: color-mix(in srgb, var(--dn-navy) 88%, transparent);
	backdrop-filter: blur(var(--dn-glass)) saturate(160%);
	-webkit-backdrop-filter: blur(var(--dn-glass)) saturate(160%);
	border-bottom: 1px solid rgb(255 255 255 / 22%);
}

.dn-section--glass .dn-item {
	border-top-color: rgb(16 28 79 / 12%);
}

/* Slightly darker body copy: it now sits on a translucent panel. */
.dn-section--glass .dn-item__subtitle {
	color: #545c70;
}

.dn-section--glass .dn-item__time {
	color: #2b3556;
}

@supports not (backdrop-filter: blur(1px)) {
	.dn-section--glass .dn-block { background: rgb(255 255 255 / 94%); }
	.dn-section--glass .dn-block__head { background: var(--dn-navy); }
}

.dn-section__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: transparent;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--dn-shot-color, var(--dn-navy)) var(--dn-tint-1, 0%), transparent),
		color-mix(in srgb, var(--dn-shot-color, var(--dn-navy)) var(--dn-tint-2, 0%), transparent) 45%,
		color-mix(in srgb, var(--dn-shot-color, var(--dn-navy)) var(--dn-tint-3, 0%), transparent)
	);
}

.dn-seminar .dn-section__title {
	margin: 0 0 24px;
	color: var(--dn-title, var(--dn-red));
	font-size: clamp(24px, 2.6vw, 31px);
	font-weight: 800;
	line-height: 1.14;
}

.dn-seminar .dn-section__title--light { color: var(--dn-sched-title, var(--dn-white)); }

/* Per-title overrides, each falling back to the per-seminar master and then
   to the global accent. */
.dn-seminar #dn-overview-title { color: var(--dn-t-overview, var(--dn-title, var(--dn-red))); }
.dn-seminar #dn-syllabus-title { color: var(--dn-t-syllabus, var(--dn-title, var(--dn-red))); }
.dn-seminar #dn-instructors-title { color: var(--dn-t-instructors, var(--dn-title, var(--dn-red))); }
.dn-seminar #dn-dates-title { color: var(--dn-t-dates, var(--dn-title, var(--dn-red))); }
.dn-seminar #dn-gallery-title { color: var(--dn-t-gallery, var(--dn-title, var(--dn-red))); }
.dn-seminar #dn-registration-title { color: var(--dn-t-registration, var(--dn-title, var(--dn-red))); }

/* With no overlay the heading sits straight on the photo, so it carries its
   own soft shadow rather than the whole section being dimmed for it. */
.dn-section--media .dn-section__title--light {
	text-shadow: 0 2px 18px rgb(0 0 0 / 55%), 0 1px 3px rgb(0 0 0 / 35%);
}
.dn-seminar .dn-section__title--small { font-size: clamp(20px, 2vw, 24px); }

/* -------------------------------------------------------------- Overview */

.dn-overview {
	padding-block: clamp(44px, 5vw, 72px);
	background: var(--dn-white);
}

.dn-overview__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
}

.dn-seminar .dn-overview__title {
	margin: 0;
	color: var(--dn-title, var(--dn-red));
	font-size: clamp(22px, 2.4vw, 29px);
	font-weight: 800;
	line-height: 1.1;
	text-transform: var(--dn-tt-intro, uppercase);
}

.dn-seminar .dn-overview__subtitle {
	margin: 5px 0 18px;
	color: var(--dn-navy);
	font-size: clamp(17px, 1.7vw, 20px);
	font-weight: 600;
	line-height: 1.22;
}

.dn-overview__main .dn-prose {
	color: var(--dn-text);
	font-size: 16px;
	line-height: 1.75;
}

/* ------------------------------------------------------------- Facts card */

.dn-card {
	padding: clamp(20px, 2.2vw, 28px);
	padding-block: calc(clamp(20px, 2.2vw, 28px) + 10px);
	background: var(--dn-surface);
	border-radius: var(--dn-radius-card);
}

.dn-facts {
	margin: 0 0 4px;
}

.dn-facts__row {
	margin-bottom: 13px;
}

.dn-facts__label {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 1px;
	color: var(--dn-navy);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.dn-facts__icon {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--dn-navy);
}

.dn-facts__value {
	margin: 0;
	padding-left: 27px;
	color: var(--dn-muted);
	font-size: 15px;
	line-height: 1.5;
}

.dn-facts__cities {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 3px;
}

.dn-facts__city {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--dn-radius-pill);
	background: rgb(16 28 79 / 8%);
	color: var(--dn-navy);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease;
}

.dn-facts__city:hover,
.dn-facts__city:focus {
	background: var(--dn-navy);
	color: var(--dn-white);
}

.dn-facts__value--price { color: var(--dn-text); }

.dn-price__tag {
	color: var(--dn-alert, #e8112d);
	font-weight: 600;
}
.dn-price__was { color: var(--dn-muted); }
.dn-price__now { color: var(--dn-navy); font-weight: 800; }
.dn-price__until { color: var(--dn-muted); }

/* ------------------------------------------------------------ Accordions */

.dn-accordions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 14px;
}

.dn-acc {
	border-radius: var(--dn-radius-pill);
	background: var(--dn-white);
	border: 1px solid var(--dn-line);
	overflow: hidden;
	/* Radius deliberately NOT transitioned: morphing a 999px pill into a 16px
	   card while the height animates reads as the corners melting. It snaps,
	   the height glides, and only one thing appears to move. */
	transition: border-color .2s ease, box-shadow .25s ease, background-color .2s ease;
}

/* The summary recolours when opening; without a transition it flashes. */
.dn-acc__summary {
	transition: background-color .25s ease, color .2s ease;
}

/* Smooth expand/collapse for the native details element. Engines without
   ::details-content support simply keep the instant toggle. */
.dn-acc::details-content {
	block-size: 0;
	overflow: clip;
	/* Decelerating curve: quick to start, settling gently — the same easing
	   as the row hovers, so the page has one motion language. */
	transition:
		block-size .34s cubic-bezier(.2, .7, .3, 1),
		content-visibility .34s allow-discrete;
}

.dn-acc[open]::details-content {
	block-size: auto;
}

/* Content settles in as the panel expands. ONE selector: the instructor panel
   carries both .dn-acc__panel and .dn-person, so matching both would run this
   animation twice on the same element and look different from the others. */
.dn-acc[open] > .dn-acc__panel {
	animation: dn-acc-in .34s cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes dn-acc-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.dn-acc::details-content { transition: none; }
	.dn-acc[open] > .dn-acc__panel { animation: none; }
	.dn-acc[open] > .dn-acc__panel { animation: none; }
}

@supports (interpolate-size: allow-keywords) {
	.dn-seminar {
		interpolate-size: allow-keywords;
	}
}

.dn-acc:hover {
	border-color: rgb(16 28 79 / 20%);
	box-shadow: 0 5px 16px rgb(16 28 79 / 9%);
}

/* Hover MOTION is inherited from .dn-acc so all three accordions behave
   identically; only the colour differs, because this variant sits on navy. */
.dn-acc--person:not([open]):hover {
	background: color-mix(in srgb, var(--dn-navy) 93%, #fff);
}

.dn-acc__summary {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 20px;
	cursor: pointer;
	list-style: none;
	color: var(--dn-navy);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

.dn-acc__summary::-webkit-details-marker { display: none; }

/* The title is an <h3> for the document outline, but must look and lay out
   exactly as the span did: no UA margins, inherited type, no kit override. */
.dn-seminar .dn-acc__title {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: none;
}

.dn-acc__mark {
	position: relative;
	flex: none;
	width: 13px;
	height: 13px;
}

.dn-acc__mark::before,
.dn-acc__mark::after {
	content: "";
	position: absolute;
	background: currentcolor;
	transition: transform .2s ease, opacity .2s ease;
}

.dn-acc__mark::before {
	top: 6px;
	left: 0;
	width: 13px;
	height: 1.6px;
}

.dn-acc__mark::after {
	top: 0;
	left: 5.7px;
	width: 1.6px;
	height: 13px;
}

.dn-acc[open] > .dn-acc__summary .dn-acc__mark::after {
	transform: scaleY(0);
	opacity: 0;
}

.dn-acc[open] > .dn-acc__summary { color: var(--dn-red); }

/* Open panels drop the capsule radius, otherwise a tall block of text
   sits inside a giant pill. */
.dn-acc[open] {
	border-radius: var(--dn-radius-block);
	background: var(--dn-white);
}

.dn-acc[open] > .dn-acc__summary {
	border-bottom: 1px solid var(--dn-line);
}

/* Scoped to .dn-seminar so the kit's body typography cannot re-bold it, and
   the weight is now explicit rather than inherited. */
.dn-seminar .dn-acc__panel {
	padding: 16px 24px 20px;
	color: var(--dn-muted);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.55;
}

.dn-seminar .dn-acc__panel p,
.dn-seminar .dn-acc__panel li {
	font-weight: 400;
}

/* Extra separation between the facts list and the collapsible group. */
.dn-card .dn-accordions {
	margin-top: 24px;
}

.dn-seminar .dn-acc__heading {
	margin: 0 0 10px;
	color: var(--dn-navy);
	font-size: 16px;
	font-weight: 700;
}

/* Syllabus variant: square-ish panel, pill summary. */
.dn-accordions--wide { gap: 12px; }

.dn-acc--wide[open] {
	border-radius: var(--dn-radius-block);
	background: var(--dn-white);
}

.dn-acc--wide[open] > .dn-acc__summary {
	border-bottom: 1px solid var(--dn-line);
}

.dn-acc--wide .dn-acc__panel {
	padding: 20px 26px 24px;
	color: var(--dn-text);
}

/* Instructor variant: navy pill, red when open. */


.dn-acc--person {
	background: var(--dn-navy);
	border-color: transparent;
}

.dn-acc--person > .dn-acc__summary {
	color: var(--dn-white);
	font-weight: 700;
}

/* The name stays bold, the letters after it do not. */
.dn-acc__creds {
	margin-inline-start: 6px;
	font-weight: 400;
}

.dn-acc--person[open] {
	background: var(--dn-white);
	border-color: var(--dn-line);
	border-radius: var(--dn-radius-block);
}

/* Square inside the open card: the container clips its own rounded corners,
   so the coloured bar meets the card edges exactly instead of floating as a
   fully-round pill with the card corners showing behind its ends. */
.dn-acc--person[open] > .dn-acc__summary {
	background: var(--dn-red);
	color: var(--dn-white);
	border-radius: 0;
	border-bottom: 0;
}

/* --------------------------------------------------------------- Person */

.dn-person {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: 24px;
	padding: 22px 26px 26px;
	color: var(--dn-text);
}

.dn-person:not(:has(.dn-person__media)) {
	grid-template-columns: minmax(0, 1fr);
}

/* Scoped to .dn-seminar: a bare .dn-person__img (0,1,0) loses to the kit's
   `.elementor-kit-N img` (0,1,1), which is what squares the photo off. */
.dn-seminar .dn-person__img {
	width: 132px;
	height: 132px;
	object-fit: cover;
	object-position: center top;   /* faces sit high in a headshot */
	border-radius: 50%;
	border: 3px solid var(--dn-white);
	box-shadow: 0 6px 18px rgb(16 28 79 / 16%);
	transition: transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s ease;
}

.dn-acc--person[open] .dn-person__img:hover {
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 10px 24px rgb(16 28 79 / 22%);
}

.dn-seminar .dn-person__name {
	margin: 0;
	color: var(--dn-navy);
	font-size: 17px;
	font-weight: 800;
}

.dn-person__credentials {
	margin: 2px 0 4px;
	color: var(--dn-navy);
	font-size: 15px;
	font-weight: 600;
}

.dn-person__role {
	margin: 0 0 12px;
	color: var(--dn-muted);
	font-size: 15px;
}

.dn-person__body .dn-prose {
	font-size: 15px;
	line-height: 1.62;
}

.dn-person__links {
	display: flex;
	gap: 10px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.dn-person__link {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--dn-navy);
	color: var(--dn-white);
	transition: background .18s ease;
}

.dn-person__link:hover { background: var(--dn-red); }

.dn-person__icon { width: 19px; height: 19px; }

/* -------------------------------------------------------------- Schedule */

.dn-schedule {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(20px, 2.4vw, 32px);
	align-items: start;
}

.dn-schedule--cols-1 { grid-template-columns: minmax(0, 1fr); max-width: 760px; }

.dn-block {
	background: var(--dn-white);
	border-radius: var(--dn-radius-block);
	overflow: hidden;
}

.dn-seminar .dn-block__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 16px 22px;
	background: var(--dn-navy);
	color: var(--dn-white);
	font-size: 19px;
	font-weight: 800;
}

.dn-block__icon {
	width: 22px;
	height: 22px;
	flex: none;
	color: var(--dn-red);
}

/* Label and time share a baseline; centring two different sizes leaves the
   smaller one sitting visibly high. */
.dn-block__meta {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px 10px;
	min-width: 0;
}

.dn-block__time {
	color: #7ea6ff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
}

.dn-block__label {
	line-height: 1.2;
}

.dn-block__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.dn-item {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	padding: 16px 22px;
	border-top: 1px solid #ececee;
}

.dn-item:first-child { border-top: 0; }

.dn-item:not(:has(.dn-item__media)) {
	grid-template-columns: minmax(0, 1fr);
}

.dn-item__img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 50%;
}

.dn-item__time {
	margin: 0 0 2px;
	color: var(--dn-text);
	font-size: 14px;
	font-weight: 600;
}

.dn-item__title {
	margin: 0;
	color: var(--dn-navy);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
}

.dn-item__subtitle {
	margin: 4px 0 0;
	color: var(--dn-muted);
	/* A touch darker than the muted token, without leaving the palette. */
	color: color-mix(in srgb, var(--dn-muted) 80%, var(--dn-text));
	font-size: 13.5px;
	line-height: 1.4;
}

/* ------------------------------------------------------------------ Runs */

/* The list owns the columns and each row adopts them with subgrid, so every
   cell lines up across rows however long the text is. Rows are still real
   boxes, which a display:contents approach would have thrown away. */
.dn-runs {
	display: grid;
	grid-template-columns:
		minmax(150px, 1.1fr)   /* city    */
		auto                   /* level   */
		minmax(150px, 1.2fr)   /* dates   */
		minmax(170px, 1.4fr)   /* price   */
		auto                   /* status  */
		auto;                  /* cta     */
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dn-runs--calendar {
	grid-template-columns:
		minmax(150px, .9fr)    /* city     */
		auto                   /* level    */
		minmax(180px, 1.6fr)   /* seminar  */
		minmax(150px, 1.1fr)   /* dates    */
		minmax(170px, 1.3fr)   /* price    */
		auto                   /* status   */
		auto;                  /* cta      */
}

.dn-run {
	position: relative;
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	align-items: center;
	gap: 16px;
	padding: 16px 22px;
	background: var(--dn-white);
	border-radius: var(--dn-radius-block);
	/* A whisper of depth at rest so rows separate on a plain white host. */
	box-shadow: 0 1px 4px rgb(16 28 79 / 6%);
	transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease;
}

.dn-run:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgb(16 28 79 / 13%);
}

.dn-run--past:hover {
	transform: none;
	box-shadow: none;
}

.dn-run > p { margin: 0; min-width: 0; }

.dn-run__city {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: baseline;
	gap: 2px 8px;
	color: var(--dn-navy);
	font-weight: 700;
	font-size: 20px;
}

/* Icon in column 1; name and the venue line stack in column 2. */
.dn-run__city > .dn-run__cityname,
.dn-run__city > .dn-run__venue { grid-column: 2; }

.dn-run__cityname { white-space: nowrap; }

.dn-run__icon {
	width: 19px;
	height: 19px;
	flex: none;
	color: var(--dn-red);
	transform: translateY(3px);
}

/* The underline is a whisper, not a rule: dotted at ~40% strength, with a
   little air above (via the venue margin) and below before the next content. */
.dn-run__venuelink {
	color: inherit;
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 1px dotted color-mix(in srgb, currentcolor 40%, transparent);
}

.dn-run__venuelink:hover { border-bottom-color: currentcolor; }

.dn-run__venuelink:hover { color: var(--dn-navy); }

.dn-run__venuepin {
	margin-inline-start: 3px;
	font-size: .85em;
	opacity: .7;
}

.dn-run__venue {
	margin-top: 3px;
	color: var(--dn-muted);
	font-weight: 400;
	font-size: 12px;
	line-height: 1.3;
	letter-spacing: .01em;
}

.dn-badge {
	display: inline-block;
	padding: 5px 13px;
	border-radius: var(--dn-radius-pill);
	background: rgb(16 28 79 / 8%);
	color: var(--dn-navy);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

.dn-run__title a {
	color: var(--dn-navy);
	font-weight: 700;
	font-size: 17px;
	text-decoration: none;
}

.dn-run__title a:hover { color: var(--dn-red); }

.dn-run__citylink {
	color: inherit;
	text-decoration: none;
	transition: color .18s ease;
}

.dn-run__citylink:hover,
.dn-run__citylink:focus { color: var(--dn-red); }

/* Stretched link: the city anchor covers the whole row, so anywhere on the
   card opens the seminar. The CTA sits above it and keeps its own target. */
.dn-run__citylink::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--dn-radius-block);
}

.dn-run:has(.dn-run__citylink) { cursor: pointer; }

.dn-run__cta {
	position: relative;
	z-index: 1;
}

/* Hovering anywhere on a clickable row lights the button and the city. */
.dn-run:has(.dn-run__citylink):hover .dn-btn {
	background: var(--dn-btn-hover, var(--dn-navy));
}

.dn-run:has(.dn-run__citylink):hover .dn-run__citylink {
	color: var(--dn-red);
}

/* Keyboard: tabbing to the stretched link outlines the whole row. */
.dn-run:has(.dn-run__citylink:focus-visible) {
	outline: 2px solid var(--dn-btn, var(--dn-red));
	outline-offset: 2px;
}

.dn-run__date {
	font-size: 15px;
	font-weight: 500;
}

.dn-run__date time { white-space: nowrap; }

/* Below the full-width layout the columns get tight; let text wrap again
   rather than overflow the container. */
@media (max-width: 1100px) {
	.dn-run__cityname,
	.dn-run__date time { white-space: normal; }
}

.dn-run__price {
	font-size: 15px;
	line-height: 1.38;
}

/* Two lines here: full price, then the early-bird line beneath it. */
.dn-run__price .dn-price__sep { display: none; }

.dn-run__price .dn-price__early {
	display: block;
	margin-top: 2px;
}

/* Own line, so the validity date can never break mid-phrase. */
.dn-run__price .dn-price__until {
	display: block;
	font-size: 14px;
}

.dn-run__status {
	font-size: 15px;
	font-weight: 600;
	color: var(--dn-muted);
	white-space: nowrap;
}

.dn-run__status--open { color: #1a7f37; }
.dn-run__status--few { color: #b26a00; }
.dn-run__status--full,
.dn-run__status--cancelled { color: var(--dn-alert, #e8112d); }

.dn-run__cta { justify-self: end; }

.dn-run--past { opacity: .55; }

/* Older engines without subgrid: fixed columns still align, they just cannot
   size themselves to the content. */
@supports not (grid-template-columns: subgrid) {
	.dn-runs { display: flex; flex-direction: column; }

	.dn-run {
		grid-template-columns:
			minmax(150px, 1.1fr) auto minmax(150px, 1.2fr)
			minmax(170px, 1.4fr) auto auto;
	}

	.dn-runs--calendar .dn-run {
		grid-template-columns:
			minmax(150px, .9fr) auto minmax(180px, 1.6fr)
			minmax(150px, 1.1fr) minmax(170px, 1.3fr) auto auto;
	}
}

/* ------------------------------------------------------- Dates list widget */

/* No background of its own: it takes whatever the host container provides.
   width: 100% matters in flex hosts (Elementor row containers), where items
   otherwise shrink to their content width. */
.dn-instructors-list {
	width: 100%;
	min-width: 0;
	background: transparent;
}

.dn-dates {
	width: 100%;
	min-width: 0;
	background: transparent;
}

/* In a row-direction Elementor container it is the WIDGET WRAPPER that
   shrinks to fit, so 100% on .dn-dates alone resolves against an already
   narrow box. Stretch the wrapper whenever it hosts this widget. */
.elementor-widget:has(.dn-dates),
.elementor-widget:has(.dn-instructors-list),
.e-con > .elementor-widget-shortcode:has(.dn-dates) {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	flex-grow: 1;
}

.dn-dates__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px 20px;
	margin-bottom: 18px;
}

.dn-dates__heading { margin: 0; }
.dn-dates__spacer { flex: 1; }

.dn-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-left: auto;
}

.dn-filter {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.dn-filter__label {
	color: var(--dn-muted);
	font-size: 15px;
	font-weight: 600;
}

.dn-filter__select {
	appearance: none;
	padding: 9px 34px 9px 16px;
	border: 1px solid var(--dn-line);
	border-radius: var(--dn-radius-pill);
	background-color: var(--dn-white);
	background-image: linear-gradient(45deg, transparent 50%, currentcolor 50%), linear-gradient(135deg, currentcolor 50%, transparent 50%);
	background-position: right 16px center, right 11px center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	color: var(--dn-navy);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.dn-filter__select:hover,
.dn-filter__select:focus {
	border-color: var(--dn-navy);
	box-shadow: 0 4px 14px rgb(16 28 79 / 10%);
}

.dn-seminar .dn-dates__empty {
	max-width: 62ch;
	margin: 0 auto;
	padding: 26px 22px;
	border-radius: var(--dn-radius-block);
	background: var(--dn-white);
	color: var(--dn-muted);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	text-wrap: balance;
}

/* Filtered-out rows leave the grid entirely, so the rest stay aligned. */
.dn-runs .dn-run[hidden] { display: none; }

/* Inside the rows the actions are compact. */
.dn-run .dn-btn {
	padding: 8px 20px;
	font-size: 14px;
}

.dn-run .dn-note {
	padding: 8px 18px;
	font-size: 14px;
}

/* Without the seminar-name column the widget matches the single-page list. */
.dn-runs--notitle {
	grid-template-columns:
		minmax(150px, 1.1fr) auto minmax(150px, 1.2fr)
		minmax(170px, 1.4fr) auto auto;
}

/* Visible to crawlers and screen readers, not to the eye: the tab button
   already shows this text. */
.dn-seminar .dn-sr,
.dn-seminar .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------- Schedule style 2: tabs */

/* Every rule here is scoped to .dn-seminar (0,2,0) so the theme's own button
   styling (.elementor-kit-N button, 0,1,1) cannot repaint the tabs. */
.dn-seminar .dn-tabs {
	display: grid;
	gap: 16px;
}

.dn-seminar .dn-tabs__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
}

/* Same capsule language as the instructor pills and the sub-nav. */
.dn-seminar .dn-tab {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 14px 22px;
	appearance: none;
	border: 1px solid var(--dn-line);
	border-radius: var(--dn-radius-pill);
	background: var(--dn-white);
	background-image: none;
	color: var(--dn-navy);
	font: inherit;
	font-size: 16px;
	letter-spacing: normal;
	text-transform: none;
	text-align: start;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .2s ease;
}

.dn-seminar .dn-tab:hover,
.dn-seminar .dn-tab:focus-visible {
	background: var(--dn-white);
	border-color: rgb(16 28 79 / 22%);
	color: var(--dn-navy);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgb(16 28 79 / 16%);
}

.dn-seminar .dn-tab:hover .dn-tab__icon,
.dn-seminar .dn-tab:focus-visible .dn-tab__icon { color: var(--dn-red); }

/* Active tab mirrors the closed instructor pill: navy field, white text. */
.dn-seminar .dn-tab[aria-selected="true"],
.dn-seminar .dn-tab[aria-selected="true"]:hover {
	background: var(--dn-navy);
	background-image: none;
	border-color: transparent;
	color: var(--dn-white);
	box-shadow: 0 10px 26px rgb(16 28 79 / 26%);
}

.dn-seminar .dn-tab__icon {
	width: 20px;
	height: 20px;
	flex: none;
	color: var(--dn-red);
}

.dn-seminar .dn-tab[aria-selected="true"] .dn-tab__icon { color: var(--dn-red); }

.dn-seminar .dn-tab__text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	text-align: start;
}

.dn-seminar .dn-tab__label { font-weight: 700; font-size: 17px; line-height: 1.25; }
.dn-seminar .dn-tab__meta { font-size: 13.5px; font-weight: 500; opacity: .72; }

/* The panel is the same white card as a schedule column. */
.dn-seminar .dn-tabs__panel {
	/* Symmetric: each row adds its own 15px, so equal panel padding gives
	   an identical gap above the first item and below the last. */
	padding: 16px 36px;
	border-radius: var(--dn-radius-block);
	background: var(--dn-white);
}

@supports (backdrop-filter: blur(4px)) {
	.dn-section--glass .dn-tabs__panel { background: rgb(255 255 255 / 76%); backdrop-filter: blur(12px); }
	.dn-section--glass .dn-tab { background: rgb(255 255 255 / 82%); backdrop-filter: blur(10px); }
	.dn-section--glass .dn-tab[aria-selected="true"] { background: var(--dn-navy); backdrop-filter: none; }
}

/* CRITICAL: no display:none. hidden="until-found" hides via content-visibility
   so the text stays searchable and indexable; display:none would defeat it.
   Collapsing the box is enough, since the children are not rendered. */
.dn-seminar .dn-tabs__panel[hidden] {
	padding-block: 0;
	background: none;
	backdrop-filter: none;
	box-shadow: none;
	border: 0;
}

/* Timeline: times left, markers on the rule, content right. */
/* The list owns the columns and each row adopts them with subgrid, so the
   time cells are identical in width and the connector line is dead straight
   down the whole day. Per-row grids sized themselves independently. */
.dn-seminar .dn-timeline {
	display: grid;
	grid-template-columns: minmax(92px, auto) minmax(0, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dn-seminar .dn-tl {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	gap: 0 24px;
	padding: 15px 0;
	border-bottom: 1px solid rgb(16 28 79 / 9%);
}

@supports not (grid-template-columns: subgrid) {
	.dn-seminar .dn-timeline { display: block; }
	.dn-seminar .dn-tl { grid-template-columns: 104px minmax(0, 1fr); }
}

.dn-seminar .dn-tl:last-child { border-bottom: 0; }

.dn-seminar .dn-tl__time {
	position: relative;
	margin: 0;
	padding-inline-end: 24px;
	color: var(--dn-navy);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
}

.dn-seminar .dn-tl__time::after {
	content: "";
	position: absolute;
	inset-inline-end: -5px;
	top: 5px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 2px solid var(--dn-red);
	background: var(--dn-white);
}

.dn-seminar .dn-tl__time::before {
	content: "";
	position: absolute;
	inset-inline-end: 0;
	top: 17px;
	bottom: -28px;
	width: 1px;
	background: rgb(16 28 79 / 13%);
}

.dn-seminar .dn-tl:last-child .dn-tl__time::before { display: none; }

.dn-seminar .dn-tl__body { min-width: 0; }

.dn-seminar .dn-tl__title {
	margin: 0;
	color: var(--dn-navy);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

.dn-seminar .dn-tl__text {
	margin: 3px 0 0;
	/* Capped by whichever comes first: 70% of the row, or a comfortable
	   reading measure. The ch limit keeps the line length sane on very wide
	   screens, where 70% would still be an unreadable single line. */
	max-width: min(70%, 68ch);
	color: color-mix(in srgb, var(--dn-muted) 68%, var(--dn-text));
	font-size: 13.5px;
	line-height: 1.4;
}

@media (max-width: 640px) {
	.dn-seminar .dn-tl { grid-template-columns: minmax(0, 1fr); gap: 3px; }
	.dn-seminar .dn-tl__time { padding-inline-end: 0; font-weight: 600; }
	.dn-seminar .dn-tl__time::after,
	.dn-seminar .dn-tl__time::before { display: none; }
	.dn-seminar .dn-tl__text { max-width: none; }
	.dn-seminar .dn-tabs__panel { padding-inline: 18px; }
	.dn-seminar .dn-tab { padding: 12px 18px; }
}

/* --------------------------------------------------------------- Buttons */

.dn-btn {
	display: inline-block;
	padding: 10px 22px;
	border-radius: var(--dn-radius-pill);
	background: var(--dn-btn, var(--dn-red));
	color: var(--dn-white);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background .18s ease, transform .18s ease;
}

.dn-btn:hover,
.dn-btn:focus-visible {
	background: var(--dn-btn-hover, var(--dn-navy));
	color: var(--dn-white);
}

/* Stands in for the button when a run cannot be booked. */
.dn-note {
	display: inline-block;
	padding: 10px 20px;
	border-radius: var(--dn-radius-pill);
	background: rgb(16 28 79 / 7%);
	color: var(--dn-muted);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.dn-note--full {
	background: color-mix(in srgb, var(--dn-alert, #e8112d) 12%, transparent);
	color: var(--dn-alert, #e8112d);
}

.dn-btn--lg { padding: 14px 34px; font-size: 16px; }

.dn-cta { margin-top: 24px; }

/* --------------------------------------------------------------- Gallery */

.dn-gal {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dn-gal__link {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--dn-radius-block);
}

.dn-gal__link::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--dn-navy);
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
}

.dn-gal__link:hover::after,
.dn-gal__link:focus-visible::after { opacity: .16; }

.dn-gal__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.dn-gal__link:hover .dn-gal__img,
.dn-gal__link:focus-visible .dn-gal__img { transform: scale(1.06); }

/* ----------------------------------------------------------- Seminar cards */

.dn-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dn-cards--2 { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

.dn-scard {
	height: 100%;
	background: var(--dn-white);
	border: 1px solid var(--dn-line);
	border-radius: var(--dn-radius-block);
	overflow: hidden;
}

.dn-scard__link { display: block; text-decoration: none; color: inherit; }

.dn-scard__img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.dn-scard__body { padding: 20px 22px 24px; }

.dn-seminar .dn-scard__level {
	margin: 0 0 6px;
	color: var(--dn-red);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
}

.dn-seminar .dn-scard__title {
	margin: 0;
	color: var(--dn-navy);
	font-size: 19px;
	font-weight: 800;
	line-height: 1.25;
}

.dn-scard__subtitle {
	margin: 6px 0 0;
	color: var(--dn-muted);
	font-size: 14px;
}

.dn-scard__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin: 14px 0 0;
	color: var(--dn-text);
	font-size: 14px;
	font-weight: 600;
}

.dn-scard__city { color: var(--dn-muted); font-weight: 400; }

/* ------------------------------------------------------------ Responsive */

@media (max-width: 980px) {
	.dn-rot--bar { display: none; }
	.dn-overview__grid { grid-template-columns: minmax(0, 1fr); }
	.dn-runs,
	.dn-runs--calendar,
	.dn-runs--notitle { grid-template-columns: minmax(0, 1fr); }

	.dn-dates__bar { align-items: flex-start; }
	.dn-filters { margin-left: 0; width: 100%; }
	.dn-filter { flex: 1 1 auto; }
	.dn-filter__select { width: 100%; }

	.dn-run,
	.dn-runs--calendar .dn-run {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: 6px;
	}

	.dn-run__cta { justify-self: start; margin-top: 8px; }
}

@media (max-width: 640px) {
	.dn-subnav--sticky { top: var(--dn-offset-m, 0px); }
	.dn-seminar [id] { scroll-margin-top: calc(var(--dn-offset-m, 0px) + var(--dn-navbar)); }
	.dn-subnav__list { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
	.dn-rot--bar { display: none; }
	.dn-subnav--full .dn-subnav__list { margin-inline-start: 0; }
	.dn-subnav { --dn-navlink-pad: 12px; }
	.dn-subnav__link { white-space: nowrap; }
	.dn-section--media { --dn-blur: 16px; }
	.dn-person { grid-template-columns: minmax(0, 1fr); }
	.dn-seminar .dn-person__img { width: 96px; height: 96px; }
	/* Specificity note: Elementor Global Fonts emit `.elementor-kit-N h1 {...}`
   (0,1,1). A bare `.dn-hero__title` (0,1,0) loses to it, so every heading here
   is scoped to .dn-seminar (0,2,0) to keep the plugin's typography. */
.dn-seminar .dn-hero__title { max-width: none; }
	.dn-acc__summary { padding: 12px 18px; }
	.dn-card { border-radius: 18px; }

	/* Gallery: two columns reads as a gallery; one reads as a feed. */
	.dn-seminar .dn-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

	/* Hero title: a slightly smaller floor, and let it use 90% of the screen
	   instead of the desktop character cap, so long Greek titles stop clipping. */
	/* No word may ever split (the "Ηλεκτροβελονισμ-ός" case): break-word is
	   gone, and the floor is low enough that a 17-character Greek word fits a
	   320px screen in one piece. Long words wrap as whole units only. */
	.dn-seminar .dn-hero__title {
		max-width: 90%;
		font-size: clamp(26px, 7.8vw, 40px);
		overflow-wrap: normal;
		word-break: keep-all;
	}

	.dn-hero__inner { padding-inline: 5%; }

	/* Sticky bar: 98% wide and centred rather than edge-to-edge, links one
	   step smaller, edge fade plus an explicit chevron so the horizontal
	   scroll is discoverable. */
	.dn-subnav .dn-subnav__bar {
		position: relative;
		width: 98%;
		margin-inline: auto;
	}

	.dn-subnav__link { font-size: 14px; }

	.dn-subnav__list {
		padding-inline: 14px;
		scrollbar-width: none;
		mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 30px), transparent);
	}

	.dn-subnav__list::-webkit-scrollbar { display: none; }
	.dn-subnav__link:last-child { margin-inline-end: 26px; }

	/* Scroll hints: real flex items flanking the list, so they occupy their
	   own space and NOTHING tappable ever sits underneath them. Double
	   chevrons read as "more content", not as buttons (a single arrow in a
	   disc invited taps). Each side hides when there is nothing further in
	   its direction. */
	.dn-subnav__more {
		display: grid;
		place-items: center;
		flex: none;
		width: 20px;
		align-self: stretch;
		color: var(--dn-white);
		opacity: .55;
		pointer-events: none;
	}

	.dn-subnav__more svg { width: 13px; height: 13px; }

	.dn-subnav__more--end { animation: dn-nudge 1.8s ease-in-out infinite; }
	.dn-subnav__more--start { animation: dn-nudge-back 1.8s ease-in-out infinite; }

	.dn-subnav.is-at-start .dn-subnav__more--start,
	.dn-subnav.is-at-end .dn-subnav__more--end { visibility: hidden; }

	@keyframes dn-nudge {
		0%, 100% { transform: translateX(0); }
		50% { transform: translateX(3px); }
	}

	@keyframes dn-nudge-back {
		0%, 100% { transform: translateX(0); }
		50% { transform: translateX(-3px); }
	}
}

@media (min-width: 641px) {
	.dn-subnav__more { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.dn-subnav__more { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
	.dn-seminar * {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}

	.dn-run:hover,
	.dn-gal__link:hover .dn-gal__img { transform: none; }

	.dn-rot {
		display: inline-flex;
		flex-wrap: wrap;
		gap: 6px 18px;
	}

	.dn-rot__item {
		grid-area: auto;
		opacity: 1;
		transform: none;
	}

	.dn-rot--bar { display: none; }

	.dn-section--fixed .dn-section__bg { clip-path: none; }

	.dn-section--fixed .dn-section__bg::before {
		position: absolute;
		inset: -7%;
		transform: scale(1.04);
	}
}

@media print {
	.dn-subnav { display: none; }
	.dn-acc__panel { display: block !important; }
}