/*
 * Layout corrections and responsive typography.
 * Loaded last so it wins over the compiled Etch section styles.
 */

/* ---------------------------------------------------------------------------
 * 1. Responsive type scale.
 *
 * The Etch build hard-codes --text-2xl:4rem / --text-xl:2.5rem with no media
 * queries, so an h1 stayed 64px on a 360px phone. These clamps keep the desktop
 * sizes identical at the top end and scale down with the viewport below that.
 * ------------------------------------------------------------------------- */

:root {
	/*
	 * Ramped so each token reaches the original Etch value by 768px: at tablet
	 * width and above the type is byte-identical to the old site, and only
	 * genuinely small screens scale down.
	 */
	--text-lg:  clamp(1.125rem, 0.75rem + 1.6vw, 1.5rem);   /* 18 -> 24 by 768px */
	--text-xl:  clamp(1.5rem,   0.82rem + 3.5vw, 2.5rem);   /* 24 -> 40 by 768px */
	--text-2xl: clamp(2rem,     0.88rem + 6.5vw, 4rem);     /* 32 -> 64 by 768px */
	--text-3xl: clamp(2.5rem,   1.16rem + 8vw,   5rem);     /* 40 -> 80 by 768px */
}

/* Long Slovak names must not overflow their column. */
.h1, .h2, .h3, .h4,
.candidate__name,
.dotaznik-card__title {
	overflow-wrap: break-word;
	hyphens: manual;          /* `auto` split "Napíšte primátor-ovi" */
	text-wrap: balance;
}

/* ---------------------------------------------------------------------------
 * 2. The grey form panel.
 *
 * .questionnaire__form-wrapper is nested inside .questionnaire in the compiled
 * Etch CSS, so it only ever applied on the homepage. The candidate page and the
 * dotazník subpage reuse the class, so it needs a standalone rule too.
 * ------------------------------------------------------------------------- */

.candidate-ask .questionnaire__form-wrapper,
.dotaznik-single .questionnaire__form-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	width: 100%;
	padding: var(--space-9);

	background-color: var(--color-light-gray);
	border-radius: 0.625rem;
}

@media screen and (max-width: 640px) {
	.candidate-ask .questionnaire__form-wrapper,
	.dotaznik-single .questionnaire__form-wrapper,
	.questionnaire .questionnaire__form-wrapper {
		padding: var(--space-5);
	}
}

/* The textarea sits on the grey panel - give it a hairline so it reads as a
   field rather than merging into the ground. */
.question-form__textarea {
	border: 1px solid rgb(2 4 38 / 0.08);
}

/* ---------------------------------------------------------------------------
 * 3. "Ďalšie dotazníky" - full width of the container, centred.
 * ------------------------------------------------------------------------- */

.questionnaire__more-forms {
	width: 100%;
	max-width: none;
	margin-inline: auto;
}

.questionnaire__more-forms .dotazniky__items {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media screen and (max-width: 767px) {
	.questionnaire__more-forms .dotazniky__items {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------
 * 4. Vertical rhythm between candidate-page sections.
 * ------------------------------------------------------------------------- */

.single-kandidat .candidate__container,
.single-kandidat .candidate-ask__container,
.single-kandidat .dotazniky__container,
.single-kandidat .team__container,
.single-kandidat .full-video__container {
	margin-bottom: var(--space-section);
}

.single-kandidat .faqs__container {
	margin-top: 0;
}

/* ---------------------------------------------------------------------------
 * 5. Homepage candidate cards.
 *
 * The circle lives on the IMAGE (border-radius:50%), not the wrapper - adding a
 * 0.625rem radius to the wrapper clipped it into a squircle. Match the circle
 * on the wrapper so the hover scale is clipped correctly.
 * ------------------------------------------------------------------------- */

.featured-candidates__item-image-wrapper {
	overflow: hidden;
	border-radius: 50%;
}

.featured-candidates__item-image {
	border-radius: 50%;
	object-position: center top;
}

/* The content wrapper is a flex column, so children stretch full width - which
   is why the underline ran past the name. Shrink the heading to its text. */
.featured-candidates__item-title {
	align-self: flex-start;
	width: fit-content;
	max-width: 100%;
}

/* ---------------------------------------------------------------------------
 * 6. Mega menu on small screens - never wider than the viewport.
 * ------------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
	.mainnav__panel {
		max-width: 100vw;
		box-sizing: border-box;
	}

	.mega,
	.mega__inner,
	.mega__list,
	.mega__card {
		max-width: 100%;
		box-sizing: border-box;
	}

	.mega__body {
		min-width: 0;
	}

	.mega__name,
	.mega__role {
		overflow-wrap: anywhere;
	}

	.mainnav__list {
		box-sizing: border-box;
		max-width: 100%;
	}
}

@media screen and (max-width: 700px) {
	.mega__list--team {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------
 * 7. Mobile spacing for the new sections.
 * ------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
	.candidate__container {
		gap: var(--space-5);
	}

	.candidate__numbers {
		gap: var(--space-6);
	}

	.pmap__canvas {
		height: clamp(16rem, 46vh, 22rem);
	}

	.team__items {
		gap: var(--space-4);
	}
}

/* ---------------------------------------------------------------------------
 * 8. Video archive section.
 * ------------------------------------------------------------------------- */

.videos__container {
	display: flex;
	flex-direction: column;
	gap: var(--space-7);
	margin-bottom: var(--space-section);
}

.videos__top {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--space-6);
	width: 100%;
}

.videos__text { max-width: 34rem; }

@media screen and (max-width: 900px) {
	.videos__top {
		flex-direction: column;
		align-items: flex-start;
	}
}

.label--small.videos__label {
	display: inline-block;
	align-self: flex-start;
	padding: 0.375rem 0.75rem;
	margin-bottom: var(--space-3);
	color: var(--color-white);
	background-color: var(--color-primary);
	border-radius: 999px;
}

.videos__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: var(--space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.video-card__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--color-light-gray);
	border-radius: 0.625rem;
}

.video-card__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.video-card__body {
	padding-top: var(--space-4);
}

.video-card__title { margin: 0; }
.video-card__text  { margin: var(--space-2) 0 0; opacity: 0.75; }

/* ---------------------------------------------------------------------------
 * 9. Vertical (9:16) hero video.
 *
 * The inherited rule pins every embed to width:100% + aspect-ratio:16/9, so a
 * portrait clip is letterboxed inside a very tall, very wide box. For portrait
 * we cap the width and flip the ratio instead.
 * ------------------------------------------------------------------------- */

.full-video--portrait .full-video__container {
	max-width: 32rem;
	margin-inline: auto;
}

.full-video--portrait .full-video__video,
:where(.full-video--portrait .full-video__video) {
	width: 100%;
	max-width: 26rem;
	height: auto;
	min-height: 0;
	aspect-ratio: 9 / 16;
	margin-inline: auto;
}

@media screen and (max-width: 560px) {
	.full-video--portrait .full-video__video,
	:where(.full-video--portrait .full-video__video) {
		max-width: 100%;
		/* Never taller than the viewport, or the page becomes a scroll tunnel. */
		max-height: 78vh;
	}
}

/* Landscape stays as designed. */
.full-video--landscape .full-video__video,
:where(.full-video--landscape .full-video__video) {
	aspect-ratio: 16 / 9;
}

/* ---------------------------------------------------------------------------
 * 10. Candidate meta chips + priorities.
 * ------------------------------------------------------------------------- */

.candidate__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	margin: 0 0 var(--space-5);
	padding: 0;
}

.candidate__meta-item {
	padding: 0.25rem 0.75rem;
	font-size: var(--text-sm);
	color: var(--color-secondary);
	background-color: var(--color-light-gray);
	border-radius: 999px;
}

.priorities__container {
	display: flex;
	flex-direction: column;
	gap: var(--space-7);
	margin-bottom: var(--space-section);
}

.priorities__top {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.label--small.priorities__label {
	display: inline-block;
	padding: 0.375rem 0.75rem;
	margin-bottom: var(--space-3);
	color: var(--color-white);
	background-color: var(--color-primary);
	border-radius: 999px;
}

.priorities__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.priority-card {
	position: relative;
	height: 100%;
	padding: var(--space-6) var(--space-5) var(--space-5);

	background-color: var(--color-light-gray);
	border-radius: 0.625rem;

	transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (hover: hover) {
	.priorities__item:hover .priority-card {
		transform: translateY(-3px);
	}
}

.priority-card__index {
	display: block;
	margin-bottom: var(--space-3);

	font-family: "Gotham", sans-serif;
	font-weight: 450;
	font-size: var(--text-sm);
	line-height: 1;
	color: var(--color-primary);
}

.priority-card__title {
	margin: 0 0 var(--space-2);
}

.priority-card__text {
	margin: 0;
	opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
	.priority-card { transition: none; }
	.priorities__item:hover .priority-card { transform: none; }
}

/* ---------------------------------------------------------------------------
 * 11. Events / stretnutia.
 * ------------------------------------------------------------------------- */

.events__container {
	display: flex;
	flex-direction: column;
	gap: var(--space-7);
	margin-bottom: var(--space-section);
}

.events__top {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--space-6);
	width: 100%;
}

.events__text { max-width: 34rem; }

@media screen and (max-width: 900px) {
	.events__top { flex-direction: column; align-items: flex-start; }
}

.label--small.events__label {
	display: inline-block;
	align-self: flex-start;
	padding: 0.375rem 0.75rem;
	margin-bottom: var(--space-3);
	color: var(--color-white);
	background-color: var(--color-primary);
	border-radius: 999px;
}

.events__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.event-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;

	background-color: var(--color-light-gray);
	border-radius: 0.625rem;

	transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.28s ease-out;
}

@media (hover: hover) {
	.events__item:hover .event-card:not(.event-card--past) {
		transform: translateY(-3px);
		box-shadow: 0 0.75rem 1.75rem rgb(2 4 38 / 0.1);
	}
}

.event-card__media {
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background-color: var(--color-dark);
}

.event-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.event-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-5);
}

.event-card__date {
	margin: 0;
	font-family: "Gotham", sans-serif;
	font-weight: 450;
	font-size: var(--text-sm);
	color: var(--color-primary);
	text-transform: lowercase;
}

.event-card__title { margin: 0; }

.event-card__place {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	font-size: var(--text-sm);
	color: var(--color-dark);
	opacity: 0.8;
}

.event-card__place a { color: inherit; }

.event-card__text { margin: 0; opacity: 0.8; }

/* Past events read as archive, not as a call to action. */
.event-card--past { opacity: 0.62; }
.event-card--past .event-card__date { color: var(--color-dark); }

.events__past { width: 100%; }

.events__past-summary {
	cursor: pointer;
	padding: var(--space-3) 0;
	font-family: "Gotham", sans-serif;
	font-weight: 450;
	font-size: var(--text-sm);
	color: var(--color-dark);
}

.events__past-summary:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}

.events__items--past { margin-top: var(--space-4); }

.events__empty { margin: 0; opacity: 0.8; }

@media (prefers-reduced-motion: reduce) {
	.event-card { transition: none; }
	.events__item:hover .event-card { transform: none; }
}

/* ---------------------------------------------------------------------------
 * 12. Event grid.
 *
 * auto-fit made a lone upcoming event span the whole container, so a 4:5
 * poster filled the viewport. Explicit column counts keep one card one column
 * wide, and `justify-content: start` stops a short row stretching.
 * ------------------------------------------------------------------------- */

.events__items {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	justify-content: start;
}

@media screen and (max-width: 1200px) {
	.events__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media screen and (max-width: 900px) {
	.events__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 560px) {
	.events__items { grid-template-columns: minmax(0, 1fr); }
}

/* A single card should not balloon on a wide screen. */
.events__item { max-width: 22rem; }

/* ---------------------------------------------------------------------------
 * 13. Candidate page rhythm.
 *
 * --space-section (clamp 60→160px) is right between major blocks but far too
 * much between the hero and the priorities that belong with it.
 * ------------------------------------------------------------------------- */

.single-kandidat .candidate__container {
	margin-bottom: var(--space-8);
}

.single-kandidat .priorities__container {
	margin-bottom: var(--space-10);
}

.single-kandidat .full-video__container {
	margin-top: 0;
	margin-bottom: var(--space-9);
}

/* ---------------------------------------------------------------------------
 * 14. Candidate bio typography.
 *
 * Bios come from spoken-word transcripts, so they need real structure: a lead
 * paragraph, breathing room between paragraphs, and a pull-quote for the line
 * about backing Roman.
 * ------------------------------------------------------------------------- */

.candidate__bio p {
	margin: 0 0 var(--space-4);
}

.candidate__bio p:last-child {
	margin-bottom: 0;
}

.candidate__bio .lead {
	font-size: var(--text-md);
	line-height: 1.5;
	color: var(--color-dark);
}

.candidate__bio strong {
	font-weight: 450;
	color: var(--color-secondary);
}

.candidate__bio blockquote {
	position: relative;
	margin: var(--space-5) 0 0;
	padding: var(--space-4) 0 var(--space-4) var(--space-5);
	border-left: 3px solid var(--color-primary);
}

.candidate__bio blockquote p {
	margin: 0;
	font-size: var(--text-base);
	line-height: 1.6;
	color: var(--color-dark);
}

/* ---------------------------------------------------------------------------
 * 15. Odpočet v číslach.
 * ------------------------------------------------------------------------- */

.odpocet__container {
	display: flex;
	flex-direction: column;
	gap: var(--space-7);
	margin-bottom: var(--space-section);
}

.odpocet__top {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--space-6);
	width: 100%;
}

.odpocet__text { max-width: 34rem; }

@media screen and (max-width: 900px) {
	.odpocet__top { flex-direction: column; align-items: flex-start; }
}

.label--small.odpocet__label {
	display: inline-block;
	align-self: flex-start;
	padding: 0.375rem 0.75rem;
	margin-bottom: var(--space-3);
	color: var(--color-white);
	background-color: var(--color-primary);
	border-radius: 999px;
}

.odpocet__items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media screen and (max-width: 900px) {
	.odpocet__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 560px) {
	.odpocet__items { grid-template-columns: minmax(0, 1fr); }
}

.odpocet__item {
	padding: var(--space-6) var(--space-5);
	background-color: var(--color-light-gray);
	border-radius: 0.625rem;
}

.odpocet__value {
	margin: 0 0 var(--space-2);
	font-family: "Gotham", sans-serif;
	font-weight: 450;
	font-size: var(--text-xl);
	line-height: 1;
	color: var(--color-secondary);
}

.odpocet__label-text {
	margin: 0;
	font-family: "Gotham", sans-serif;
	font-weight: 450;
	font-size: var(--text-base);
	line-height: 1.3;
	color: var(--color-dark);
}

.odpocet__note {
	margin: var(--space-2) 0 0;
	font-size: var(--text-sm);
	line-height: 1.4;
	color: var(--color-dark);
	opacity: 0.7;
}

/* ---------------------------------------------------------------------------
 * 16. Header on small screens.
 *
 * The overflow was the header row itself: logo + logo label + burger + two CTA
 * buttons will not fit at 375px, so the row pushed past the viewport and took
 * the absolutely-positioned nav panel with it. Below 1024px the CTA moves into
 * the panel instead, leaving only logo + burger in the bar.
 * ------------------------------------------------------------------------- */

.mainnav__item--cta { display: none; }

@media screen and (max-width: 1024px) {
	.header--has-nav .header__cta-wrapper {
		display: none;
	}

	.mainnav__item--cta {
		display: block;
		border-bottom: 0;
		padding-top: var(--space-4);
	}

	.mainnav__cta {
		display: inline-flex;
		width: 100%;
		justify-content: center;
	}

	/* Belt and braces: nothing in the header may push the page sideways. */
	.header--has-nav .header__container {
		flex-wrap: nowrap;
		max-width: 100%;
		column-gap: var(--space-4);
	}

	.header--has-nav .header__logo-wrapper {
		min-width: 0;
	}
}

/* The nav panel is measured from the viewport, not from a row that might
   overflow, so it can never end up wider than the screen. */
@media screen and (max-width: 1024px) {
	/*
	 * 100vw includes the scrollbar, so the panel ended up wider than the
	 * content box and pushed the page sideways. Span the positioned ancestor
	 * (the header) instead - it is already exactly the content width.
	 */
	.mainnav__panel {
		left: 0;
		right: 0;
		width: auto;
		max-width: 100%;
		transform: none;
		overflow-x: hidden;
	}
}

/* ---------------------------------------------------------------------------
 * 17. Candidate intro video: play button over the photo + modal.
 * ------------------------------------------------------------------------- */

.candidate__media--has-video { position: relative; }

.candidate__play {
	position: absolute;
	left: var(--space-4);
	bottom: var(--space-4);

	display: inline-flex;
	align-items: center;
	gap: var(--space-3);

	padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);

	font-family: "Gotham", sans-serif;
	font-weight: 450;
	font-size: var(--text-sm);
	color: var(--color-dark);

	background-color: var(--color-white);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 0.5rem 1.25rem rgb(2 4 38 / 0.22);

	transition: transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.candidate__play-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	color: var(--color-white);
	background-color: var(--color-primary);
	border-radius: 50%;
}

@media (hover: hover) {
	.candidate__play:hover,
	.candidate__play:focus-visible { transform: translateY(-2px); }
}

.candidate__actions { margin-bottom: var(--space-6); }

.candidate-video {
	position: fixed;
	inset: 0;
	z-index: 220;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-5);
}

.candidate-video[hidden] { display: none; }

.candidate-video__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgb(2 4 38 / 0.72);
}

.candidate-video__dialog {
	position: relative;
	z-index: 1;
	width: min(24rem, 100%);
}

.candidate-video__frame {
	aspect-ratio: 9 / 16;
	max-height: 82vh;
	overflow: hidden;
	background-color: var(--color-dark);
	border-radius: 0.625rem;
}

.candidate-video__frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.candidate-video__close {
	position: absolute;
	top: -2.75rem;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	color: var(--color-dark);
	background-color: var(--color-white);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * 18. Videos grid (#7) - more columns so each video is not enormous.
 * ------------------------------------------------------------------------- */

.videos__items {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media screen and (max-width: 1100px) {
	.videos__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 640px) {
	.videos__items { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.candidate__play { transition: none; }
}

/* ---------------------------------------------------------------------------
 * 19. Footer: next meeting block.
 * ------------------------------------------------------------------------- */

.footer__next {
	padding: var(--space-4);
	background-color: rgb(255 255 255 / 0.08);
	border-radius: 0.625rem;
	border-left: 3px solid var(--color-primary);
}

.footer__next-label {
	margin: 0 0 var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-white);
	opacity: 0.65;
}

.footer__next-title {
	margin: 0;
	font-family: "Gotham", sans-serif;
	font-weight: 450;
	font-size: var(--text-base);
	color: var(--color-white);
}

.footer__next-meta {
	margin: var(--space-2) 0 0;
	font-size: var(--text-sm);
	color: var(--color-white);
	opacity: 0.75;
}

.footer__links-columns {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---------------------------------------------------------------------------
 * 20. Skip link - visible only when focused.
 * ------------------------------------------------------------------------- */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 300;

	padding: var(--space-3) var(--space-5);

	font-family: "Gotham", sans-serif;
	font-size: var(--text-sm);
	color: var(--color-white);
	text-decoration: none;

	background-color: var(--color-primary);
	border-radius: 0 0 0.625rem 0;
}

.skip-link:focus {
	left: 0;
}

/* ---------------------------------------------------------------------------
 * 21. Hero text on mobile.
 *
 * The inherited Etch CSS carries:
 *     @media (max-width: 750px) { .primary-hero__container { display: none } }
 * so below 750px the hero showed only the background image - no label, no
 * title, no CTA. Bring the content back and give it room to sit on.
 * ------------------------------------------------------------------------- */

@media screen and (max-width: 750px) {
	.primary-hero__container {
		display: flex;
	}

	.primary-hero__content-wrapper {
		margin-bottom: var(--space-8);
		padding-inline: var(--space-4);
	}

	/* The person cut-out competes with the text at this width. */
	.primary-hero__person-image {
		display: none;
	}
}

@media screen and (max-width: 580px) {
	.primary-hero {
		height: auto;
		min-height: 26rem;
	}

	.primary-hero__title {
		font-size: clamp(1.5rem, 1.05rem + 2.2vw, 2rem);
		max-width: 100%;
	}
}

/* ---------------------------------------------------------------------------
 * 22. Form validation notice: below the field, centred.
 * ------------------------------------------------------------------------- */

.question-form__notice {
	order: 2;                 /* after the textarea in the flex column */
	margin: 0 auto;
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * 23. Email field + thank-you page.
 * ------------------------------------------------------------------------- */

.question-form__field {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	width: 100%;
	max-width: 33.75rem;
	order: 1;
}

.question-form__sublabel {
	font-size: var(--text-sm);
	color: var(--color-dark);
}

.question-form__optional {
	opacity: 0.6;
}

.question-form__input {
	width: 100%;
	padding: var(--space-4);

	font-family: "Gotham", sans-serif;
	font-size: var(--text-sm);
	font-weight: 400;
	color: var(--color-dark);

	background-color: var(--color-white);
	border: 1px solid rgb(2 4 38 / 0.08);
	border-radius: 0.625rem;
}

.question-form__input::placeholder {
	color: #00000040;
}

.question-form__input:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.question-form__actions { order: 3; }

.thanks__container {
	display: flex;
	flex-direction: column;
	align-items: center;      /* column flex: this is the horizontal axis */
	justify-content: center;
	padding-block: var(--space-11);
}

.thanks__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);

	width: 100%;
	max-width: 34rem;
	padding: var(--space-9) var(--space-6);

	text-align: center;
	background-color: var(--color-light-gray);
	border-radius: 0.625rem;
}

.thanks__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	color: var(--color-white);
	background-color: var(--color-primary);
	border-radius: 50%;
}

.thanks__title { margin: 0; }
.thanks__text  { margin: 0; }

.thanks__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
	margin-top: var(--space-3);
}

/* ---------------------------------------------------------------------------
 * 24. Dotazník archive needs its own vertical rhythm.
 *
 * On the homepage the section sits inside .questionnaire, which supplies the
 * margins. Standalone it had none, so the heading touched the header and the
 * cards ran into the footer.
 * ------------------------------------------------------------------------- */

.post-type-archive-dotaznik .dotazniky__container,
.post-type-archive-podujatie .events__container {
	padding-block: var(--space-10);
	margin-bottom: 0;
}

/* Global guard: nothing may push the page sideways. */
html, body { overflow-x: hidden; }

/* Electoral district on the homepage candidate cards - the thing a voter
   actually needs, since they can only vote within their own obvod. */
.featured-candidates__item-obvod {
	margin: 0.25rem 0 0;
	font-family: "Gotham", sans-serif;
	font-size: var(--text-sm);
	line-height: 1.3;
	color: var(--color-primary);
}

/* ---------------------------------------------------------------------------
 * 25. THE mobile mega-menu bug.
 *
 * The desktop open-state rule is
 *     .mainnav--mega-open .mega { transform: translate(-50%, 0) }
 * at specificity (0,2,0). The mobile reset was `.mega { transform: none }` at
 * (0,1,0), so it lost - and the open panel was dragged half its own width off
 * the left edge, cutting the candidate names in half. Match the specificity.
 * ------------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
	.mega,
	.mainnav--mega-open .mega,
	.mainnav__item--mega .mega {
		position: static;
		left: auto;
		right: auto;
		top: auto;
		width: auto;
		max-width: 100%;
		transform: none;
		opacity: 1;
		box-shadow: none;
		border-radius: 0;
		background: none;
	}
}

/* ---------------------------------------------------------------------------
 * 26. Hero video must not trap the page scroll.
 * ------------------------------------------------------------------------- */

.full-video__container,
.full-video__video {
	touch-action: pan-y;
}

.full-video--portrait .full-video__container {
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * 27. Hero content on mobile - second attempt, with matching specificity.
 *
 * The hide rule is NESTED inside .primary-hero, so it resolves to
 * `.primary-hero .primary-hero__container` (0,2,0) and beat the earlier
 * (0,1,0) override. Same trap as the mega menu.
 * ------------------------------------------------------------------------- */

@media screen and (max-width: 750px) {
	.primary-hero .primary-hero__container,
	.section.primary-hero .primary-hero__container {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	.primary-hero .primary-hero__content-wrapper {
		margin: 0 0 var(--space-8);
		padding-inline: var(--space-4);
	}

	.primary-hero .primary-hero__person-image {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * 28. Map point cards need a visible affordance.
 *
 * On touch there is no hover, so a bare tile does not read as tappable.
 * ------------------------------------------------------------------------- */

.pmap__list-button {
	position: relative;
	padding-right: var(--space-8);
}

.pmap__list-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-2);

	font-family: "Gotham", sans-serif;
	font-weight: 450;
	font-size: var(--text-sm);
	color: var(--color-primary);
}

.pmap__list-cta svg { transition: transform 0.24s ease-out; }

@media (hover: hover) {
	.pmap__list-button:hover .pmap__list-cta svg { transform: translateX(3px); }
}

/* ---------------------------------------------------------------------------
 * 29. Videos: two columns.
 * ------------------------------------------------------------------------- */

.videos__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media screen and (max-width: 767px) {
	.videos__items { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
 * 30. More air between the candidates heading and the grid.
 * ------------------------------------------------------------------------- */

.featured-candidates__top { margin-bottom: var(--space-9); }
.featured-candidates__items { row-gap: var(--space-8); }

/* ---------------------------------------------------------------------------
 * 31. Hero copy sits at the bottom of the image, just above the video card.
 *
 * justify-content had nothing to distribute because the hero collapsed to
 * `height: auto` on mobile, so the text rode up under the logo.
 * ------------------------------------------------------------------------- */

@media screen and (max-width: 750px) {
	.primary-hero,
	.section.primary-hero {
		height: auto;
		min-height: 32rem;
	}

	.primary-hero .primary-hero__container {
		justify-content: flex-end;
		min-height: 32rem;
		height: auto;
	}

	/* Clear the video card, which overlaps the hero by -3rem, plus ~36px so the
	   title is not sitting right on top of it. */
	.primary-hero .primary-hero__content-wrapper {
		margin: 0 0 calc(var(--space-9) + 2.25rem);
		padding-inline: var(--space-4);
	}
}

@media screen and (max-width: 580px) {
	.primary-hero,
	.section.primary-hero,
	.primary-hero .primary-hero__container {
		min-height: 30rem;
	}
}

/* ---------------------------------------------------------------------------
 * 32. Mobile nav panel fills the viewport below the header.
 *
 * --macs-header-h is measured by nav.js, so this tracks the real header height
 * on any device rather than assuming one.
 * ------------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
	.mainnav--open .mainnav__panel {
		max-height: calc(100dvh - var(--macs-header-h, 5.5rem) + 12px);
		height: calc(100dvh - var(--macs-header-h, 5.5rem) + 12px);
	}

	@supports not (height: 100dvh) {
		.mainnav--open .mainnav__panel {
			max-height: calc(100vh - var(--macs-header-h, 5.5rem) + 12px);
			height: calc(100vh - var(--macs-header-h, 5.5rem) + 12px);
		}
	}
}

/* ---------------------------------------------------------------------------
 * 33. Hero video card heading.
 * ------------------------------------------------------------------------- */

.full-video__heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: var(--space-5);
}

.label--small.full-video__label {
	display: inline-block;
	padding: 0.375rem 0.75rem;
	margin-bottom: var(--space-3);
	color: var(--color-white);
	background-color: var(--color-primary);
	border-radius: 999px;
}

.full-video__title { margin: 0; color: var(--color-dark); }

/* ---------------------------------------------------------------------------
 * 34. Footer: fourth column + richer bottom bar.
 * ------------------------------------------------------------------------- */

.footer__links-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media screen and (max-width: 1100px) {
	.footer__links-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 480px) {
	.footer__links-columns { grid-template-columns: minmax(0, 1fr); }
}

.footer__bottom {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
}

.footer__bottom-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

.footer__election {
	margin: 0;
	padding: var(--space-2) var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-white);
	background-color: rgb(214 11 81 / 0.15);
	border-radius: 999px;
}

@media screen and (min-width: 768px) {
	.footer__bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* ---------------------------------------------------------------------------
 * 35. Dotazník descriptions.
 * ------------------------------------------------------------------------- */

.dotaznik-card__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
}

.dotaznik-card__desc {
	margin: 0;
	font-size: var(--text-sm);
	line-height: 1.4;
	color: var(--color-white);
	opacity: 0.85;
}

.dotaznik-single__lead {
	max-width: 40rem;
	margin: var(--space-4) 0 0;
	text-align: center;
}