/* ==========================================================================
   Hírmondó — editorial front page for hernad.hu

   This file styles the front page BELOW the header only. The masthead, the
   accessibility toolbar, the navigation and the @font-face declarations live
   in masthead.css, which is loaded site-wide and which this file is enqueued
   as depending on — the header is shared with every subpage, so it has exactly
   one definition. Do not re-add masthead rules here.

   Type scales from one variable: body sets `calc(18px * var(--hm-scale))` and
   every other size is expressed in em, so the accessibility text-size control
   only has to change --hm-scale.
   ========================================================================== */

body.hm-page {
	--hm-scale: 1;
	--hm-paper: #fbfaf6;
	--hm-ink: #161616;
	--hm-muted: #565248;
	--hm-red: #8e1b1b;
	/* Azure, from the village arms. The green this replaced came from the theme
	   the site was built on — there is no green in Hernád's coat of arms. */
	--hm-green: #005ca1;
	--hm-rule: #cfcac0;
	--hm-hover: #f3f1ea;
	/* 6vw gutters, but once the viewport passes ~1720px the gutter grows so the
	   content never exceeds 1520px — otherwise a 4K screen produces 100-character
	   lines in the lead story and a Rovatok grid that runs off the page. */
	--hm-gutter: max(6vw, calc((100vw - 1520px) / 2));

	margin: 0;
	background: var(--hm-paper);
	color: var(--hm-ink);
	/* 'Newsreader Fallback' is declared in masthead.css — Georgia carrying
	   Newsreader's metrics, so the font swap changes glyphs and not layout. */
	font-family: 'Newsreader', 'Newsreader Fallback', 'Source Serif 4', Charter, 'Bitstream Charter', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
	font-size: calc(18px * var(--hm-scale));
	line-height: 1.55;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
}

/* High contrast: pure black on white, stronger rules, no image softening.
   Three states — no attribute means "follow the operating system", while
   data-contrast high/normal is an explicit choice made with the toolbar. */
body.hm-page[data-contrast="high"] {
	--hm-paper: #ffffff;
	--hm-ink: #000000;
	--hm-muted: #1a1a1a;
	--hm-red: #7a0000;
	--hm-green: #003a68;
	--hm-rule: #000000;
	--hm-hover: #e8e8e8;
}

@media (prefers-contrast: more) {
	body.hm-page:not([data-contrast="normal"]) {
		--hm-paper: #ffffff;
		--hm-ink: #000000;
		--hm-muted: #1a1a1a;
		--hm-red: #7a0000;
		--hm-green: #003a68;
		--hm-rule: #000000;
		--hm-hover: #e8e8e8;
	}

	body.hm-page:not([data-contrast="normal"]) .hm-lead-img,
	body.hm-page:not([data-contrast="normal"]) .hm-card-img,
	body.hm-page:not([data-contrast="normal"]) .hm-funding img {
		filter: none;
		opacity: 1;
	}

	body.hm-page:not([data-contrast="normal"]) a {
		text-decoration: underline;
	}
}

body.hm-page[data-contrast="high"] .hm-lead-img,
body.hm-page[data-contrast="high"] .hm-card-img,
body.hm-page[data-contrast="high"] .hm-funding img {
	filter: none;
	opacity: 1;
}

body.hm-page[data-contrast="high"] a {
	text-decoration: underline;
}

body.hm-page *,
body.hm-page *::before,
body.hm-page *::after {
	box-sizing: border-box;
}

/* Resets Kadence's heading treatment (Syne, uppercase h2, palette colours).
 *
 * Note there is deliberately NO `margin: 0` here. This selector is (0,1,2) and
 * outranks every single-class component rule like `.hm-card-title` (0,1,1), so
 * a margin reset in this block silently zeroed the spacing on the lead title,
 * the news item headings, the box titles and the section rules — the whole page
 * ran with collapsed heading spacing. Kadence's own `h1..h6 { margin: 0 }`
 * (0,0,1) already provides the reset and is weak enough for components to
 * override, which is exactly what is wanted. */
body.hm-page h1,
body.hm-page h2,
body.hm-page h3 {
	font-family: inherit;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: normal;
	text-transform: none;
	color: var(--hm-ink);
}

body.hm-page p {
	margin: 0;
}

body.hm-page a {
	color: inherit;
	text-decoration: none;
}

body.hm-page a:hover,
body.hm-page a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.hm-page :focus-visible {
	outline: 2px solid var(--hm-red);
	outline-offset: 2px;
}

body.hm-page img {
	max-width: 100%;
	height: auto;
	display: block;
}

.hm-sep {
	margin: 0 .4em;
	color: var(--hm-rule);
}

/* --- Front page grid ---------------------------------------------------- */

.hm-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	padding: 0 var(--hm-gutter);
}

.hm-col {
	padding: 34px 28px;
	min-width: 0;
}

.hm-col + .hm-col {
	border-left: 1px solid var(--hm-rule);
}

.hm-grid > .hm-col:first-child {
	padding-left: 0;
}

.hm-grid > .hm-col:last-child {
	padding-right: 0;
}

.hm-kicker {
	color: var(--hm-red);
	font-size: .778em;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-bottom: 8px;
}

/* Lead story */

.hm-lead-media {
	display: block;
	margin-bottom: 16px;
}

.hm-lead-img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	filter: saturate(.85);
}

.hm-lead-title {
	font-size: calc(clamp(32px, 3.4vw, 52px) * var(--hm-scale));
	margin-bottom: 12px;
}

.hm-lead-excerpt {
	font-size: 1.111em;
}

/* The lead story's byline ("Hernádi Hírmondó szerkesztősége") was removed from
   the template — the council asked for it gone, and every story on the site is
   the office's, so crediting it on one of them said nothing. The rule is left
   here, unused, only because the class may still appear in older imported
   content; delete both if that turns out not to be the case. */
.hm-byline {
	display: none;
}

/* Secondary list */

.hm-item {
	padding: 16px 0;
	border-bottom: 1px solid var(--hm-rule);
}

/* The last item keeps its rule now: the "Tovább" button sits below it and the
   line separates the list from the action. */
.hm-item:last-child {
	border-bottom: 1px solid var(--hm-rule);
}

/* "Tovább" — the way from the five stories on the front page to the rest. */
.hm-list-more {
	margin-top: 16px;
}

.hm-item h3 {
	font-size: 1.278em;
	margin-bottom: 6px;
}

.hm-item p {
	font-size: .889em;
	color: var(--hm-muted);
}

.hm-meta {
	font-size: .722em;
	color: var(--hm-muted);
	margin-top: 6px;
}

/* Sidebar boxes */

.hm-box {
	border: 1px solid var(--hm-ink);
	padding: 20px;
	margin-bottom: 26px;
}

.hm-box:last-child {
	margin-bottom: 0;
}

.hm-box > h2 {
	font-size: .833em;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--hm-ink);
	padding-bottom: 8px;
	margin-bottom: 12px;
}

.hm-datelist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hm-datelist li {
	display: flex;
	gap: 12px;
	padding: 6px 0;
	font-size: .889em;
}

.hm-d {
	color: var(--hm-green);
	font-weight: 700;
	min-width: 62px;
	flex: none;
}

.hm-empty,
.hm-box-more {
	font-size: .833em;
	color: var(--hm-muted);
}

.hm-box-more {
	margin-top: 10px;
}

.hm-box-more a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hm-office {
	width: 100%;
	border-collapse: collapse;
}

.hm-office th,
.hm-office td {
	padding: 4px 0;
	font-size: .889em;
	vertical-align: top;
	text-align: left;
	font-weight: 400;
}

.hm-office th {
	color: var(--hm-muted);
	padding-right: 14px;
	white-space: nowrap;
	width: 1%;
}

.hm-office tr.is-today th,
.hm-office tr.is-today td {
	color: var(--hm-ink);
	font-weight: 700;
}

/* Secondary button — outlined, so the red "Ügyintézés indítása" stays the one
   primary action on the page. Used for the waste calendar. */
body.hm-page .hm-btn {
	display: block;
	margin-top: 12px;
	padding: 10px 12px;
	border: 1px solid var(--hm-ink);
	background: transparent;
	color: var(--hm-ink);
	text-align: center;
	font-weight: 700;
	font-size: .889em;
	text-decoration: none;
}

body.hm-page .hm-btn:hover,
body.hm-page .hm-btn:focus-visible {
	background: var(--hm-ink);
	color: var(--hm-paper);
	text-decoration: none;
}

/* Specificity note: `body.hm-page a { color: inherit }` is (0,1,2) and would
   otherwise win over a bare `.hm-cta`, leaving dark text on the red button. */
body.hm-page .hm-cta {
	display: block;
	margin-top: 12px;
	padding: 12px;
	background: var(--hm-red);
	color: #fff;
	text-align: center;
	font-weight: 700;
}

body.hm-page .hm-cta:hover,
body.hm-page .hm-cta:focus-visible {
	background: #731616;
	color: #fff;
}

/* --- Section rules ------------------------------------------------------ */

.hm-section {
	margin: 0 var(--hm-gutter);
}

.hm-rule {
	border-top: 3px double var(--hm-ink);
	padding-top: 18px;
	margin-top: 30px;
	font-size: .778em;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 700;
}

/* Fejlesztések */

/* Column counts are stepped, not auto-fit, and chosen to divide the item
   counts exactly: 4 projects and 8 Rovatok cards go 4 → 2 → 1, the 9 crests go
   9 → 3. auto-fit produced 7 columns for 8 cards on a 1920px screen (one card
   orphaned on a second row) and 3 columns at ~1000px (an empty cell). */
.hm-strip {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	padding: 20px 0 50px;
}

.hm-card {
	display: block;
	min-width: 0;
}

/* Project artwork is a mix of narrow funding plaques and full photographs, so
   it is letterboxed inside a fixed band rather than cropped — cropping a
   250x79 banner to 4:3 would cut the sponsor logos in half. */
.hm-card-media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	padding: 14px;
	background: #f3f1ea;
	border: 1px solid var(--hm-rule);
	overflow: hidden;
}

body.hm-page .hm-card-media .hm-card-img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
}

svg.hm-card-img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
}

.hm-card-title {
	font-size: 1.056em;
	margin-top: 10px;
}

.hm-card-programme {
	color: var(--hm-green);
	font-weight: 700;
	font-size: .889em;
}

/* Rovatok */

.hm-sections {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	border-top: 1px solid var(--hm-ink);
	border-left: 1px solid var(--hm-ink);
	margin: 20px 0 50px;
}

/* Each card carries its Rovat's colour in --hm-rovat, set inline from
   hernad_section_colour(). It appears as a rule along the leading edge and as
   the icon's colour — enough to tell the sections apart at a glance without
   turning the grid into eight coloured boxes, which would fight the newspaper
   character of the page. Falls back to azure if a new section has no colour. */
.hm-section-card {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 16px 18px;
	border-right: 1px solid var(--hm-ink);
	border-bottom: 1px solid var(--hm-ink);
	border-left: 3px solid var(--hm-rovat, var(--hm-green));
	min-width: 0;
	transition: background-color .12s ease;
}

.hm-section-card:hover,
.hm-section-card:focus-visible {
	background: var(--hm-hover);
	text-decoration: none;
}

.hm-section-card .hm-icon {
	color: var(--hm-rovat, var(--hm-green));
}

/* Direction C tints the cards, so the Rovatok read as a block of panels rather
   than as ruled entries in a newspaper. The coloured leading rule from
   direction B stays — the tint is the change, not the coding. */
body.hm-dir-flag .hm-section-card,
body.hm-dir-flag .hm-box {
	background: #f2f6fa;
}

body.hm-dir-flag .hm-section-card:hover,
body.hm-dir-flag .hm-section-card:focus-visible {
	background: #e6eef6;
}

/* High contrast drops the section colours back to ink: the whole point of that
   mode is that nothing relies on hue. The colours are a second cue on top of
   the label, never the only one, so nothing is lost by removing them. */
body.hm-page[data-contrast="high"].hm-dir-flag .hm-section-card,
body.hm-page[data-contrast="high"].hm-dir-flag .hm-box {
	background: var(--hm-paper);
}

body.hm-page[data-contrast="high"] .hm-section-card {
	border-left-color: var(--hm-ink);
}

body.hm-page[data-contrast="high"] .hm-section-card .hm-icon {
	color: var(--hm-ink);
}

@media (prefers-contrast: more) {
	body.hm-page:not([data-contrast="normal"]) .hm-section-card {
		border-left-color: var(--hm-ink);
	}

	body.hm-page:not([data-contrast="normal"]) .hm-section-card .hm-icon {
		color: var(--hm-ink);
	}
}

/* Optical sizing: hairline icons read as spindly next to the bold serif titles.
   Scaled up again and given a touch more weight now the drawings are more
   detailed — the church cross and the columns need room to stay legible. */
.hm-icon {
	flex: none;
	width: 36px;
	height: 36px;
	stroke-width: 1.35;
	color: var(--hm-green);
}

.hm-section-card h3 {
	font-size: 1.056em;
}

.hm-section-desc {
	display: block;
	color: var(--hm-muted);
	font-size: .778em;
	margin-top: 2px;
}

/* Kistérség — the nine neighbouring councils, each with its coat of arms
   linking to that council's own site. Crests are portrait (~120x160) and keep
   their colour: a coat of arms is heraldic, greyscaling it would be wrong. */

.hm-kisterseg {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 20px 0 50px;
	padding: 0;
}

/* Wide layouts: every grid at its full column count. */
@media (min-width: 960px) {
	.hm-strip,
	.hm-sections {
		grid-template-columns: repeat(4, 1fr);
	}

	.hm-kisterseg {
		grid-template-columns: repeat(9, 1fr);
	}
}

/* Phones: single column for the card grids (the crests stay 3 across). */
@media (max-width: 560px) {
	.hm-strip,
	.hm-sections {
		grid-template-columns: 1fr;
	}
}

.hm-kisterseg a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	padding: 10px 4px;
}

.hm-kisterseg a:hover,
.hm-kisterseg a:focus-visible {
	background: var(--hm-hover);
	text-decoration: none;
}

body.hm-page .hm-crest-img {
	width: auto;
	height: 64px;
	max-width: 100%;
	object-fit: contain;
}

.hm-kisterseg-name {
	font-size: .778em;
	font-weight: 700;
	line-height: 1.2;
	hyphens: auto;
}

.hm-kisterseg a:hover .hm-kisterseg-name,
.hm-kisterseg a:focus-visible .hm-kisterseg-name {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Partner and service logos — full colour, evenly spaced.
   A grid rather than a wrapping flex row: flex packs everything to the left and
   leaves a ragged gap at the end, while equal columns give each logo the same
   share of the width. Column counts divide the six items exactly (6 → 3 → 2),
   so no row is ever left with an orphan. Logos range from square to 3:1, so the
   cell is the fixed thing and the artwork is centred inside it. */

.hm-partners {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: center;
	justify-items: center;
	gap: 26px 20px;
	margin: 20px 0 44px;
	padding: 0;
}

@media (min-width: 560px) {
	.hm-partners {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 960px) {
	.hm-partners {
		grid-template-columns: repeat(6, 1fr);
	}
}

.hm-partners li {
	display: flex;
	justify-content: center;
	width: 100%;
}

body.hm-page .hm-partners img {
	height: 68px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	transition: transform .18s ease;
}

.hm-partners a:hover img,
.hm-partners a:focus-visible img {
	transform: scale(1.06);
}

/* Fallback when a logo file is missing — never leave a bare empty link. */
.hm-partners a > span {
	font-size: .833em;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* No high-contrast override needed here: these logos are already full colour. */

/* The funding logos moved to the site-wide sticky bar (style.css), so the
   in-page .hm-funding row and its corner-badge override are gone from here. */

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

.hm-footer {
	border-top: 3px double var(--hm-ink);
	margin: 0 var(--hm-gutter);
	padding: 24px 0 40px;
	font-size: .778em;
	color: var(--hm-muted);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 30px;
}

.hm-footer a {
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: var(--hm-rule);
}

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

@media (max-width: 1100px) {
	.hm-grid {
		grid-template-columns: 1.4fr 1fr;
	}

	/* The three boxes are very different heights (the office table is ~3x the
	   other two), so three equal columns left a wall of blank space beside it.
	   Instead: the office box spans both rows on the right, the two short boxes
	   stack on the left and stretch to meet it — a clean rectangle overall. */
	.hm-boxes {
		grid-column: 1 / -1;
		border-left: 0;
		border-top: 1px solid var(--hm-rule);
		padding-left: 0;
		padding-right: 0;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24px;
		align-items: stretch;
	}

	.hm-boxes .hm-box {
		margin-bottom: 0;
		grid-column: 1;
	}

	.hm-boxes .hm-box-office {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
}

@media (max-width: 767px) {
	body.hm-page {
		--hm-gutter: 20px;
		font-size: calc(17px * var(--hm-scale));
	}

	/* One column, in the order: lead story, boxes, list. */
	.hm-grid {
		grid-template-columns: 1fr;
	}

	.hm-col {
		padding: 24px 0;
	}

	.hm-col + .hm-col {
		border-left: 0;
		border-top: 1px solid var(--hm-rule);
	}

	.hm-lead {
		order: 1;
	}

	.hm-boxes {
		order: 2;
		grid-template-columns: 1fr;
		border-top: 1px solid var(--hm-rule);
	}

	.hm-list {
		order: 3;
	}

	/* Undo the tablet placement: in a single column an explicit grid-column: 2
	   would silently create a second, off-screen column. */
	.hm-boxes .hm-box,
	.hm-boxes .hm-box-office {
		margin-bottom: 20px;
		grid-column: auto;
		grid-row: auto;
	}

	.hm-strip {
		gap: 28px;
		padding-bottom: 30px;
	}

	.hm-sections {
		margin-bottom: 30px;
	}

	.hm-kisterseg {
		gap: 10px;
		margin-bottom: 30px;
	}

	body.hm-page .hm-crest-img {
		height: 52px;
	}

	.hm-footer {
		display: block;
		padding-bottom: 30px;
	}

	.hm-footer-links {
		margin-top: 10px;
	}
}

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

/* ==========================================================================
   The picture at the top of the front page

   Three treatments, switched from Beállítások → Címlapkép; the PHP that decides
   between them and the reasoning behind each is in inc/hero.php.

     .hm-hero        the band under the navigation      (A: Homlokzat, B: Évszak)
     .hm-hero-lead   the lead story run across the page (C: Vezető kép)

   In none of them does text sit on the photograph. The captions and the headline
   are underneath, on paper, where their contrast is a fixed number rather than
   something that changes with the picture.

   ON `body.hm-page` IN THESE SELECTORS. It is not decoration. This sheet already
   sets `body.hm-page img { max-width: 100%; height: auto }` — (0,1,1) — and both
   images here need an explicit height, which a bare `.hm-hero-img` (0,1,0) cannot
   give them. Without the prefix the bands render at their full natural height and
   the whole design falls apart. Same trap as the funding bar in style.css.
   ========================================================================== */

/* --- A / B: the band ------------------------------------------------------ */

.hm-hero {
	padding: 0 var(--hm-gutter);
}

.hm-hero-figure {
	/* 1320px, not the 1520px the page is allowed, because the Községháza
	   photograph is only 1100px wide — the largest one in the media library —
	   and this holds its enlargement to 1.2x. The same 1.25x ceiling as the post
	   featured images in style.css, and for the same reason: past that a
	   photograph stops looking like a photograph. */
	max-width: 1320px;
	margin: 0 auto;
}

body.hm-page .hm-hero-img {
	width: 100%;
	/* Same 1.25x enlargement ceiling as the promoted lead below, computed from
	   the width of the file actually served (inc/hero.php sets the property). The
	   Községháza photograph is 1100px, so it may fill 1320 and no more — which is
	   exactly the figure's max-width, so it fills the band and stops there. */
	max-width: min( 100%, calc( var( --hernad-hero-natural-width, 100% ) * 1.25 ) );
	margin: 0 auto;
	/* A fixed height rather than an aspect ratio: the band must stay modest on a
	   wide screen instead of growing to 400px and swallowing the fold. Set in CSS,
	   so the space is reserved before the image arrives and nothing shifts. */
	height: clamp(140px, 19vw, 250px);
	object-fit: cover;
	/* Slightly above centre. The village hall's sign and doorway sit in the upper
	   half of the frame; dead centre trims the sign off. */
	object-position: center 40%;
	filter: saturate(.85);
}

.hm-hero-cap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2px 20px;
	padding: 7px 0 9px;
	border-bottom: 1px solid var(--hm-rule);
	font-size: .722em;
	color: var(--hm-muted);
}

.hm-hero-cap-main {
	color: var(--hm-ink);
	font-weight: 700;
}

/* --- C: the lead story across the page ------------------------------------ */

.hm-hero-lead {
	padding: 26px var(--hm-gutter) 0;
}

.hm-hero-lead-media,
.hm-hero-lead-text {
	max-width: 1320px;
	margin: 0 auto;
}

.hm-hero-lead-media {
	display: block;
	margin-bottom: 18px;
}

body.hm-page .hm-hero-lead-img {
	width: 100%;
	height: clamp(200px, 24vw, 340px);
	/* Never enlarged past 1.25x its own width. inc/hero.php will not promote a
	   story whose photograph is under 900px, so the narrowest this can be is
	   1125px — wide enough to read as a lead picture, and it is centred rather
	   than stretched to the full 1320. */
	max-width: min( 100%, calc( var( --hernad-hero-natural-width, 100% ) * 1.25 ) );
	margin: 0 auto;
	object-fit: cover;
	/* Higher than the band's: in the council's photographs — ceremonies,
	   wreath-layings, ribbon-cuttings — the people are in the upper half. */
	object-position: center 35%;
	filter: saturate(.85);
}

.hm-hero-lead-title {
	font-size: calc(clamp(30px, 3.6vw, 50px) * var(--hm-scale));
	/* A headline this size runs to 40 words across 1320px otherwise. */
	max-width: 20ch;
	margin-bottom: 12px;
	text-wrap: balance;
}

.hm-hero-lead-excerpt {
	font-size: 1.111em;
	max-width: 62ch;
}

/* A + C: both photographs at once.
 *
 * At their solo heights they stack to 590px, and there is not that much room.
 * Measured at 1440x900: the masthead is 324px tall (the navigation wraps to two
 * rows since the Köszöntő/Történetünk/Hernádikum entries came back) and the
 * sticky funding bar covers the bottom 124px, which leaves about 450px of first
 * screen for a picture and a headline.
 *
 * So each gives up height to the other. Even then the headline of A+C lands
 * level with the bottom edge rather than above it — that is the price of asking
 * for a permanent face AND a picture-led story on the same screen, and it is
 * the honest reason to prefer one or the other.
 *
 * `:has()` rather than a body class, because the question is whether the other
 * picture ACTUALLY rendered: option C is switched on for the whole site but
 * stands down on any day the lead story's photograph is too small, and on those
 * days the band should be at its full height again.
 */
body.hm-page:has(.hm-hero-lead) .hm-hero-img {
	height: clamp(110px, 12vw, 150px);
	/* A shorter window has to start higher to hold the same subject. At 250px the
	   band shows the middle 52% of the photograph and `center 40%` keeps the
	   KÖZSÉGHÁZA sign comfortably inside it; at 150px it shows 31%, and the same
	   40% clipped the top of the lettering off. */
	object-position: center 31%;
}

body.hm-page:has(.hm-hero) .hm-hero-lead-img {
	height: clamp(170px, 18vw, 250px);
}

/* The grid with its lead column gone.
   Two columns, and the four remaining stories read down two sub-columns so they
   fill the width they have been given instead of becoming one long ladder. */
.hm-grid-no-lead {
	grid-template-columns: 2fr 1fr;
}

.hm-grid-no-lead .hm-list {
	columns: 2;
	column-gap: 28px;
}

/* "Közérdekű" and the "Tovább" button belong to the whole list, not to one
   column of it. A spanner also splits the flow, which puts the heading above the
   stories and the button below them — which is where they read. */
.hm-grid-no-lead .hm-list > .hm-kicker,
.hm-grid-no-lead .hm-list-more {
	column-span: all;
}

.hm-grid-no-lead .hm-item {
	break-inside: avoid;
}

@media (max-width: 1100px) {
	/* The tablet grid puts .hm-boxes across the full second row. With no lead
	   column there is nothing left to sit beside the list, so an inherited
	   `1.4fr 1fr` would leave an empty column next to it. */
	.hm-grid-no-lead {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.hm-hero {
		/* Edge to edge on a phone: a 20px gutter around a 140px band is more
		   frame than photograph. */
		padding: 0;
	}

	.hm-hero-cap {
		padding: 7px 20px 9px;
	}

	.hm-hero-lead-title {
		max-width: none;
	}

	/* One column of stories again — two 45px-wide columns is not a layout. */
	.hm-grid-no-lead .hm-list {
		columns: 1;
	}
}

/* High contrast: no softening on these photographs either, exactly as the lead
   and card images are treated above. */
body.hm-page[data-contrast="high"] .hm-hero-img,
body.hm-page[data-contrast="high"] .hm-hero-lead-img {
	filter: none;
}

@media (prefers-contrast: more) {
	body.hm-page:not([data-contrast="normal"]) .hm-hero-img,
	body.hm-page:not([data-contrast="normal"]) .hm-hero-lead-img {
		filter: none;
	}
}