/*
 * Page-specific layout.
 *
 * Breakpoints match the measured original: the four icon columns stay four
 * across down to 480px (they do NOT go two-up at tablet), and the two-column
 * blocks collapse only below 480px.
 */

/* ------------------------------------------------------------ page content */

/*
 * Vertical rhythm measured off the original: content opens 10px below the title
 * band, and section headings get 20px of air on both sides.
 */
.br-content {
	font-family: var(--br-font-body);
	font-size: 16px;
	line-height: 24px;
	padding-top: 10px;
}

.br-content > :last-child {
	margin-bottom: 0;
}

.br-content p {
	margin: 0 0 14.4px;
}

.br-content h2 {
	font-family: var(--br-font-display);
	font-size: 16px;
	line-height: 16px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--br-text);
	/* 34.4px above = the paragraph's own 14.4px plus the 20px the old builder
	   put between every widget; 20px below. */
	margin: 34.4px 0 20px;
}

.br-content > h2:first-child:not(.br-faq__group-title) {
	margin-top: 0;
}

.br-content h3 {
	font-family: var(--br-font-display);
	font-size: 16px;
	line-height: 20px;
	font-weight: 600;
	margin: 0 0 10px;
}

.br-content ul,
.br-content ol {
	padding-inline-start: 40px;
	margin: 0 0 14.4px;
}

/*
 * 24px is the site-wide list rhythm. The Rólunk page's one list ran at 32px on
 * the original — it was set on that text block, not globally.
 */
.br-content li {
	line-height: 24px;
}

body.page-id-19 .br-content li {
	line-height: 32px;
}

/* body links kept the theme link colour and underline the original used */
.br-content a {
	color: #c36;
	text-decoration: underline;
	transition: color var(--br-ki-mikro) var(--br-gorbe-be);
}

.br-content a:hover,
.br-content a:focus-visible {
	color: var(--br-accent);
	transition: color var(--br-be-mikro) var(--br-gorbe-be);
}

.br-content img {
	height: auto;
}

.br-spacer {
	display: block;
}

/* ---------------------------------------------------------------- homepage */

.br-hero {
	margin-block: 6px;
}

.br-hero__img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * The hero was nudged up over the header by 3% on the original; kept so the
 * gap between header and image matches.
 *
 * A `<picture>` óta EGY <img> van, tehát a két vágat nem különíthető el
 * osztállyal: az eltolás médialekérdezésre megy. Az 1024 képpontos határnak
 * egyeznie kell a br_the_hero() `<source media>` értékével.
 */
.br-hero__img {
	transform: translateY(-3%);
}

@media (max-width: 1024px) {
	.br-hero {
		margin-block: 0;
	}

	.br-hero__img {
		transform: none;
	}
}

/*
 * Homepage vertical rhythm.
 *
 * Each variable is one measured gap between two anchors on the original page,
 * and every breakpoint had its own values — the old builder stored section
 * padding per device. Numbers come from _source/design/probe-orig.
 */
.br-front {
	--br-g-hero-intro: 45px;
	--br-g-intro-ways: 14px;
	--br-g-icon-label: 0px;
	--br-g-ways-notes: 82px;
	--br-g-notes-cta: 39px;
	--br-g-cta-panels: 58px;
	--br-g-panels-notes: 44px;
	--br-g-notes-footer: 120px;
}

.br-intro {
	padding-top: var(--br-g-hero-intro);
}

.br-intro__text {
	font-family: var(--br-font-body);
	font-size: 18px;
	line-height: 27px;
	letter-spacing: 0.2px;
	word-spacing: 1px;
	margin: 0;
}

/* four "how to take part" columns */
.br-ways {
	margin: var(--br-g-intro-ways) 0 var(--br-g-ways-notes);
	padding-block: 40px 0;
}

.br-ways .br-cards {
	align-items: stretch;
}

.br-ways .br-card {
	padding-inline: 0;
	gap: 0;
}

.br-ways .br-card__label {
	margin: var(--br-g-icon-label) 22px 0;
}

.br-ways .br-card__note {
	margin-top: 8px;
}

/* arrow-note rows */
.br-notes-block--first {
	margin-block: 0 var(--br-g-notes-cta);
}

.br-notes-block--second {
	margin-block: var(--br-g-panels-notes) var(--br-g-notes-footer);
}

/* the blue call-to-action */
.br-cta {
	padding-block: 25px var(--br-g-cta-panels);
	text-align: center;
}

/*
 * A `background: #145c88` INNEN KIVETTÜK — szó szerint ugyanaz volt, ami a
 * components.css `.br-button` szabályában, tehát nem tett hozzá semmit, viszont
 * elnyomta a hover-t.
 *
 * Miért: ez a szelektor (0,2,0) ugyanolyan fajsúlyú, mint a `.br-button:hover`,
 * a pages.css viszont a components.css UTÁN kerül a kaszkádba — azonos fajsúlyon
 * a későbbi nyer. Így a gomb háttere hoveren is az alapkéken maradt (mérve:
 * `:hover` illeszkedett, a háttér mégis `rgb(20, 92, 136)`).
 */
.br-cta .br-button {
	max-width: 100%;
}

/* the two grey feature panels */
.br-panels {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.br-panel {
	margin: 6px;
	padding: 25px;
	background: #e4e4e3;
}

.br-panel:nth-child(2) {
	background: #c7c7c6;
}

.br-panel__icon {
	display: block;
	width: 81px;
	height: auto;
	margin-bottom: 20px;
}

.br-panel__title {
	font-family: var(--br-font-display);
	font-size: 25px;
	line-height: 25px;
	font-weight: 700;
	color: var(--br-primary);
	text-transform: none;
	margin: 0 0 36px;
}

.br-panel__body {
	font-family: var(--br-font-body);
	font-size: 14px;
	line-height: 23px;
	letter-spacing: 0.2px;
}

/* the right-hand panel ran slightly tighter than the left on the original */
.br-panel:nth-child(2) .br-panel__body {
	line-height: 20px;
	letter-spacing: 0.1px;
}

.br-panel__body p {
	margin: 0 0 14.4px;
}

.br-panel__body > :last-child {
	margin-bottom: 0;
}

/* the chevron bullets inside the left panel */
.br-bullet {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-inline-end: 5px;
	vertical-align: -2px;
	background: var(--br-acc-open) center/contain no-repeat;
}

@media (max-width: 1024px) {
	.br-front {
		--br-g-hero-intro: 70px;
		--br-g-intro-ways: 34px;
		--br-g-icon-label: -5px;
		--br-g-ways-notes: 141px;
		--br-g-notes-cta: 63px;
		--br-g-cta-panels: 58px;
		--br-g-panels-notes: 70px;
		--br-g-notes-footer: 140px;
	}

	.br-ways {
		padding-block: 20px 0;
	}

	.br-panel__icon {
		width: 51.5px;
	}
}

@media (max-width: 480px) {
	.br-front {
		--br-g-hero-intro: 42px;
		--br-g-intro-ways: -6px;
		--br-g-icon-label: 5px;
		--br-g-ways-notes: 36px;
		--br-g-notes-cta: 132px;
		--br-g-cta-panels: 64px;
		--br-g-panels-notes: 56px;
		--br-g-notes-footer: 70px;
	}

	.br-panels {
		grid-template-columns: 1fr;
	}

	.br-panel {
		margin: 0;
		padding: 5px 10px 20px;
	}

	.br-panel__icon {
		width: 59px;
	}
}

/* ------------------------------------------------------- prize / winner grids */

.br-prizes {
	/* 35px above the first row, 50px between the two rows — measured. */
	margin-block: 35px 0;
	row-gap: 50px;
}

.br-prizes .br-card__icon {
	width: 155px;
	max-width: 100%;
}

.br-content .br-prizes .br-card__label,
.br-prizes .br-card__label {
	font-family: var(--br-font-display);
	font-size: 25px;
	font-weight: 700;
	color: var(--br-primary);
	text-transform: none;
}

.br-winner {
	margin-bottom: 25px;
	padding-block: 25px;
}

.br-winner--boxed {
	background: var(--br-white);
}

.br-winner__icon {
	display: block;
	width: 155px;
	height: auto;
	margin-inline: auto;
}

.br-content .br-winner__title,
.br-winner__title {
	font-family: var(--br-font-display);
	font-size: 25px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--br-primary);
	text-transform: none;
	text-align: center;
	margin: 10px 0 20px;
}

.br-winner__list {
	font-family: var(--br-font-body);
	font-size: 16px;
	line-height: 24px;
}

/* ------------------------------------------------------------------- GYIK */

.br-content .br-faq__group-title,
.br-faq__group-title {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: var(--br-font-display);
	font-size: 19px;
	line-height: 1.3;
	font-weight: 800;
	color: var(--br-text);
	text-transform: none;
	margin: 25px 0 10px;
}

/* the numbered magenta disc before each GYIK group */
.br-faq__num {
	display: grid;
	place-items: center;
	flex: none;
	margin-top: -4px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #8d004c;
	color: var(--br-white);
	font-family: var(--br-font-system);
	font-size: 25px;
	line-height: 30px;
	font-weight: 500;
	text-align: center;
	text-transform: none;
}

.br-faq__set {
	background: var(--br-white);
	margin-bottom: 10px;
}

.br-faq {
	max-width: 774px;
	margin-inline: auto;
}

/* ------------------------------------------------------------------ posts */

.br-posts {
	display: grid;
	gap: 30px;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

/* Hírek page: three across, newest first — as the archive widget rendered it. */
.br-posts--grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 30px 32px;
}

@media (max-width: 1024px) {
	.br-posts--grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.br-posts--grid {
		grid-template-columns: 1fr;
	}
}

.br-post__back {
	margin-top: 30px;
	font-family: var(--br-font-body);
	font-size: 14px;
}

.br-post__back a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--br-primary);
}

.br-post__thumb {
	margin-bottom: 20px;
}

.br-post__thumb img {
	display: block;
	width: 100%;
	height: auto;
}

.br-post-card__title {
	font-family: var(--br-font-display);
	font-size: 22px;
	font-weight: 700;
	text-transform: none;
	margin: 0 0 8px;
}

.br-post-card__meta {
	font-family: var(--br-font-body);
	font-size: 13px;
	color: #555;
	margin: 0 0 10px;
}

.br-post-card__thumb img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 12px;
}

.br-pagination {
	display: flex;
	gap: 10px;
	margin-block: 30px;
	font-family: var(--br-font-body);
	font-size: 14px;
}

/* --------------------------------------------------------------------- 404 */

.br-404 {
	padding-block: 20px 60px;
	text-align: center;
}

.br-404__title {
	font-family: var(--br-font-display);
	font-size: 25px;
	font-weight: 700;
	text-transform: none;
	margin: 0 0 14.4px;
}

.br-404__text {
	font-family: var(--br-font-body);
	font-size: 16px;
	line-height: 24px;
	/* the original put a 25px spacer widget between the text and the button */
	margin: 0 0 79px;
}

/* ------------------------------------------------------ measured refinements */

/*
 * Everything below was derived from the measured original (probe-orig) rather
 * than from Elementor's generated CSS, which expressed the same geometry through
 * transforms and negative margins that mean nothing once the markup changes.
 */

/*
 * Single posts ran edge-to-edge on the 1140px grid, and narrowed to a centred
 * 600px measure once the grid collapsed — that is the theme default the old
 * stack fell back to, not an Elementor setting.
 */
@media (min-width: 1025px) {
	.br-container--flush {
		padding-inline: 0;
	}
}

@media (max-width: 1024px) {
	.br-container--flush {
		max-width: 600px;
		padding-inline: 0;
	}
}

@media (max-width: 480px) {
	.br-container--flush {
		padding-inline: 10px;
	}
}

.br-post__title {
	font-family: var(--br-font-system);
	font-size: 22px;
	line-height: 26.4px;
	font-weight: 700;
	text-transform: none;
	margin: 8px 0 16px;
}

.br-content--base {
	font-family: var(--br-font-system);
	font-size: var(--br-body-size);
	line-height: 19.2px;
}

.br-content--base p {
	margin: 0 0 14.4px;
}

/* inline content images keep their own width — only cap them at the column */
.br-content figure,
.br-content .wp-block-image {
	margin: 0 0 14.4px;
}

.br-content figure img,
.br-content .wp-block-image img {
	width: auto;
	max-width: 100%;
	height: auto;
}

/* --- 404 ---------------------------------------------------------------- */

.br-404 {
	padding-top: 10px;
	text-align: center;
}

.br-404__title {
	font-family: var(--br-font-display);
	font-size: 16px;
	line-height: 16px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--br-primary);
	margin: 0 0 20px;
}

.br-404__text {
	font-family: var(--br-font-body);
	font-size: 16px;
	line-height: 24px;
	/* the original put a 25px spacer widget between the text and the button */
	margin: 0 0 79px;
}

.br-404__action {
	margin: 0;
}

/* --- Nyeremények: two ruled columns per row ----------------------------- */

.br-prizes .br-card {
	padding: 10px;
}

.br-prizes .br-card__icon {
	width: 143px;
	max-width: 100%;
	margin-bottom: 20px;
}

.br-content .br-prizes .br-card__label,
.br-prizes .br-card__label {
	margin: 0;
	font-family: var(--br-font-display);
	font-size: 21px;
	line-height: 21px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--br-primary);
}

/* the rule sits between the pair, so on every odd cell rather than "not last" */
.br-cards--2.br-cards--ruled > *:not(:last-child) {
	border-inline-end: 0;
}

.br-cards--2.br-cards--ruled > :nth-child(odd) {
	border-inline-end: 3px solid var(--br-primary);
}

/* --- Nyertesek --------------------------------------------------------- */

.br-winner {
	margin: 0 0 25px;
	padding-block: 25px;
}

.br-winner--boxed {
	background: var(--br-white);
}

.br-winner__icon {
	display: block;
	width: 143px;
	height: auto;
	margin: 0 auto 20px;
}

.br-content .br-winner__title,
.br-winner__title {
	font-family: var(--br-font-display);
	font-size: 21px;
	line-height: 21px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--br-primary);
	text-align: center;
	margin: 0 0 22px;
}

.br-winner__list {
	font-family: var(--br-font-body);
	font-size: 15px;
	line-height: 22.5px;
	text-align: center;
}

.br-winner__list p {
	margin: 0 0 14.4px;
}

.br-winner__list strong {
	font-weight: 700;
}

/* --- GYIK -------------------------------------------------------------- */

/* the accordion column was narrower than the page grid */
.br-faq,
.page-id-29 .br-content {
	max-width: 774px;
	margin-inline: auto;
}

.page-id-29 .br-content {
	padding-inline: 10px;
}

.br-content .br-faq__group-title,
.br-faq__group-title {
	font-family: var(--br-font-system);
	font-size: 19px;
	line-height: 22.8px;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--br-text);
	margin: 37px 0 20px;
}

.br-faq__num {
	font-size: 25px;
	line-height: 30px;
	font-weight: 500;
	text-transform: none;
}

.br-faq__set {
	background: var(--br-secondary);
	padding-block: 43px 29px;
	margin-bottom: 0;
}

/* --- Köszönjük: a narrow, centred single paragraph ---------------------- */

.page-id-607 .br-content {
	max-width: 560px;
	margin-inline: auto;
	padding-inline: 0;
	text-align: center;
}

.page-id-607 .br-content p {
	font-size: 18px;
	line-height: 27px;
}

/* --- Hírek cards ------------------------------------------------------- */

/*
 * The card typography is a faithful copy of the original archive widget,
 * including the 10px near-white post title. It is illegible and worth changing —
 * flagged rather than silently "fixed", since the brief was an unchanged front end.
 */
.br-news .br-post-card__title {
	margin: 0;
	font-family: var(--br-font-display);
	font-size: 10px;
	line-height: 12px;
	font-weight: 400;
	text-transform: none;
}

.br-news .br-post-card__title a {
	color: var(--br-secondary);
}

.br-news .br-post-card__meta {
	margin: 0;
	font-family: var(--br-font-slab);
	font-size: 12px;
	line-height: 15.6px;
	color: #adadad;
}

.br-news .br-post-card__excerpt {
	margin: 13px 0 0;
	font-family: var(--br-font-body);
	font-size: 14px;
	line-height: 21px;
	color: #777;
}

.br-news .br-post-card__more {
	display: inline-block;
	margin-top: 13px;
	font-family: var(--br-font-body);
	font-size: 12px;
	line-height: 18px;
	font-weight: 500;
	color: var(--br-accent);
}

.br-news .br-post-card__thumb {
	display: block;
	margin-bottom: 18px;
}

.br-news .br-posts--grid {
	gap: 0;
	margin-block: 55px 40px;
}

.br-news .br-post-card {
	padding-inline: 10px;
}


/* ------------------------------------------------- bottom spacing per page */

/*
 * The original ended each page with a mix of section padding and hand-placed
 * spacer widgets, so the gap between the last element and the magenta footer
 * bar is not uniform. These are the measured values (see the gap column in
 * _source/design/probe-orig), expressed as one variable per page.
 */
.br-page,
.br-news {
	padding-bottom: calc(var(--br-page-pad-bottom, 120px) - var(--br-page-pad-shift, 0px));
}

/*
 * Phones closed the gap between content and footer by a constant amount on the
 * original, whatever the page's own bottom spacing was.
 */
@media (max-width: 480px) {
	:root {
		--br-page-pad-shift: 122px;
	}
}

.page-id-19 .br-page,
body.page-id-19 .br-page { --br-page-pad-bottom: 175px; }
body.page-id-21 .br-page { --br-page-pad-bottom: 184px; }
body.page-id-23 .br-page { --br-page-pad-bottom: 160px; }
body.page-id-25 .br-page { --br-page-pad-bottom: 144px; }
body.page-id-29 .br-page { --br-page-pad-bottom: 107px; }
body.page-id-27 .br-page { --br-page-pad-bottom: 199px; }
body.page-id-607 .br-page { --br-page-pad-bottom: 144px; }
body.blog .br-news { --br-page-pad-bottom: 132px; }
body.single .br-page { --br-page-pad-bottom: 134px; }
body.error404 .br-404 { --br-page-pad-bottom: 130px; }
body.page-id-1235 .br-page { --br-page-pad-bottom: 76px; }

/*
 * The embedded PDF viewer: 600px square on desktop, shorter on narrower screens —
 * the heights are measured from the original, not derived from the width.
 */
.br-pdf__frame {
	width: 600px;
	max-width: 100%;
	height: 600px;
	min-height: 0;
}

@media (max-width: 1024px) {
	.br-pdf__frame {
		height: 460px;
	}
}

@media (max-width: 480px) {
	.br-pdf__frame {
		height: 269px;
	}
}


/* the Szabályzatok data table ran at 0.9rem, not the 16px of the body copy */
.br-content table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
	line-height: 1.5;
	margin: 0 0 14.4px;
}

.br-content td,
.br-content th {
	padding: 0;
	vertical-align: top;
}

.br-content .wp-block-table {
	margin: 16px 0 14.4px;
	overflow-x: auto;
}


/* card captions on the homepage shrink on phones */
@media (max-width: 480px) {
	.br-ways .br-card__label {
		font-size: 12px;
		line-height: 18px;
	}
}


/* Lists in long documents carry no bottom margin of their own; the source uses
   explicit empty paragraphs as separators. */
.br-content ul,
.br-content ol {
	margin-bottom: 0;
}

/* the data table's rows are much taller than the type alone suggests */
.br-content td,
.br-content th {
	padding: 22.7px 16px;
}

/* explicit spacer, standing in for the old builder's spacer widget */
.br-spacer--90 {
	height: 90px;
}


/* the registration form started lower than the other pages' content */
body.page-id-27 .br-content {
	padding-top: 68px;
}


/* top offsets measured against the original's section padding */
body.page-id-23 .br-prizes {
	margin-top: 40px;
}

@media (max-width: 480px) {
	body.page-id-23 .br-prizes {
		margin-top: 31px;
	}
}

body.page-id-25 .br-content {
	padding-top: 55px;
}

/* bottom padding, re-measured after the content changes above */
body.single .br-page { --br-page-pad-bottom: 125px; }
body.blog .br-news { --br-page-pad-bottom: 88px; }
body.page-id-1235 .br-page { --br-page-pad-bottom: 30px; }

.br-post__title {
	margin-bottom: 6px;
}


/* news grid on phones: tighter around and between the cards */
@media (max-width: 480px) {
	/* the news index dropped the band's bottom margin on phones */
	body.blog .br-title-band {
		margin-bottom: 0;
	}

	.br-news .br-posts--grid {
		margin-block: 0 6px;
	}

	.br-news .br-post-card__thumb {
		margin-bottom: 4px;
	}

	.br-news .br-post-card {
		padding-inline: 0;
		padding-bottom: 0;
	}
}


/* ------------------------------------------------------- phone-only overrides */

/*
 * These live at the end of the last stylesheet on purpose: the base rules they
 * override are declared later in components.css, and a media query adds no
 * specificity of its own.
 */
@media (max-width: 480px) {
	/* stacked prize cards sat closer together than the two-up rows */
	.br-prizes {
		row-gap: 19px;
	}

	/* form rows opened up on phones */
	.br-form .gform_wrapper .gform_fields {
		row-gap: 27px;
	}

	/* the accordion chevron sits closer to the edge, so titles stay on one line */
	.br-acc__summary {
		padding: 11.2px 15px 11.2px 34px;
	}

	.br-acc__body {
		padding-inline: 15px 15px;
		padding-left: 57px;
	}

	body.page-id-21 .br-page {
		--br-page-pad-shift: 88px;
	}
}

/* the two-up homepage layout kept more air between its blocks at tablet size */
@media (min-width: 481px) and (max-width: 1024px) {
	.br-front {
		--br-g-ways-notes: 171px;
		--br-g-notes-footer: 70px;
	}

	.br-content td,
	.br-content th {
		padding-block: 19.3px;
	}

	/* the three news cards sat further apart at tablet width */
	.br-news .br-posts--grid {
		row-gap: 41px;
	}
}


@media (max-width: 480px) {
	/* the accordion blocks ran edge to edge on phones */
	body.page-id-29 .br-content {
		padding-inline: 0;
	}
}