/*
Theme Name: 42edit
Theme URI: https://42edit.hr
Description: Editorial child theme for 42edit — a Croatian lifestyle portal. The Cut-inspired magazine layout built on Blocksy.
Author: 42edit
Template: blocksy
Version: 1.0.0
Text Domain: 42edit
*/

:root {
	--e-ink: #0c0b0a;
	--e-muted: #6f6a63;
	--e-accent: #2bbf9a; /* mint green — the 42edit accent */
	--e-line: #e8e3db;
	--e-bg: #ffffff;
	/* Display serif — headlines, H1–H3, cards, quotes (not body). */
	--e-serif: "Bodoni Moda", Georgia, "Times New Roman", serif;
	/* big hero / display moments (off-canvas menu, etc.) */
	--e-display: "Bodoni Moda", Georgia, "Times New Roman", serif;
	/* Source Serif 4 — article reading text: sturdier + full Croatian diacritics */
	--e-read: "Source Serif 4", Georgia, "Times New Roman", serif;
	/* Display faces carry different x-heights, so nominal rem sizes don't match
	   optically between them. Cormorant (x-height 0.386em) needed 1.22; Libre
	   Bodoni (0.45em) 1.05; Bodoni Moda (0.46em) 1.03. */
	--e-display-scale: 1.03;
	/* Bodoni Moda is variable (400-900). Its 700 lays down 15% less ink than
	   Libre Bodoni's 700 did, which is why it read as thin, so headlines run at
	   800 to hold the same weight on screen. Raise to 900 for a heavier page. */
	--e-display-weight: 800;
	/* IBM Plex Sans — UI, nav, labels, meta (client-chosen sans) */
	--e-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------------------------------------------------------------
   Base typography
--------------------------------------------------------------- */
body {
	font-family: var(--e-sans);
	color: var(--e-ink);
	background: var(--e-bg) !important;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.entry-title,
.page-title,
.ct-page-title {
	font-family: var(--e-serif);
	font-weight: var(--e-display-weight);
	letter-spacing: -0.015em;
}

/* Some display serifs default to old-style figures, whose digits drop below the
   baseline and look odd next to caps — force lining figures in headlines. */
h1, h2, h3, h4, h5, h6,
.entry-title, .page-title, .ct-page-title,
.home-feature__title,
.hf-card__title, .hf-photo__title, .hf-frame__head,
.hf-col__head, .nt-lead__title, .nt-card__title,
.hero-overlay .entry-title,
.home-latest .entry-title {
	font-variant-numeric: lining-nums;
	font-feature-settings: "lnum" 1;
}

/* Bodoni Moda carries an optical-size axis (opsz 6-96) and browsers tie it to
   the font-size by default, which draws hairlines for a display cut. At our
   sizes those hairlines fall below a pixel and disappear: "Đakovo" rendered as
   "Dakovo" because the crossbar on Đ/đ vanished, and em dashes went with it.
   Pinning the text cut keeps every thin stroke on screen — which is also what
   stops the face reading as thin in the first place. Deks are included: they
   are the same family, so they lose the same strokes. */
h1, h2, h3, h4, h5, h6,
.entry-title, .page-title, .ct-page-title,
.entry-excerpt,
.home-feature__title,
.hf-card__title, .hf-photo__title, .hf-frame__head,
.hf-col__head, .nt-lead__title, .nt-card__title,
.nt-lead__dek, .nt-card__dek,
.hero-overlay .entry-title,
.home-latest .entry-title,
.ht-item__head, .ht-item__dek,
.rel-card__title,
.arch-lead__title, .archive-cat-title,
.home-quote__lead, .home-quote__muted,
.home-news__lead, .home-news__muted,
.ct-menu-link,
.entry-content blockquote p {
	font-optical-sizing: none;
	font-variation-settings: "opsz" 8;
}

a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------------------------------------------------------------
   Masthead — logo left · lettered nav centered · search + newsletter right
--------------------------------------------------------------- */
.ct-header { border-bottom: none; }

.site-title,
.site-title a {
	font-family: var(--e-sans) !important;
	font-weight: 500 !important;
	letter-spacing: 0.01em;
	color: var(--e-ink) !important;
	text-transform: lowercase;
	font-size: clamp(1.5rem, 4vw, 2.6rem) !important;
	line-height: 1;
}

/* Wordmark accent: the tittle of the "i" rendered as a coloured dot.
   The "i" is swapped for a dotless ı (via hero.js) and we draw the dot. */
.logo-i {
	position: relative;
	display: inline-block;
}
.logo-i__dot {
	position: absolute;
	left: 50%;
	top: 0.14em;
	width: 0.125em;
	height: 0.125em;
	margin-left: -0.06em;
	border-radius: 50%;
	background: var(--e-accent) !important;
}

.header-menu-1 .ct-menu-link,
.ct-header .menu-item > a {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.9rem !important;
	font-weight: 600;
	font-family: var(--e-sans);
}
.header-menu-1 .ct-menu-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Desktop header (The Cut): logo left · categories right with pipe dividers ·
   newsletter + search at the far right. */
@media (min-width: 1000px) {
	#header [data-device="desktop"] [data-column="end"] [data-items="primary"] {
		display: flex;
		align-items: center;
		gap: 1.75rem;
	}
	#header [data-device="desktop"] #header-menu-1 ul {
		display: flex;
		align-items: center;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	#header [data-device="desktop"] #header-menu-1 .menu-item {
		display: flex;
		align-items: center;
	}
	#header [data-device="desktop"] #header-menu-1 .ct-menu-link {
		padding: 0;
		font-size: 1.05rem !important;
		letter-spacing: 0.16em;
	}
	/* Wordmark sized to sit alongside the categories */
	#header [data-device="desktop"] .site-title,
	#header [data-device="desktop"] .site-title a {
		font-size: 3rem !important;
	}
	/* Thin vertical pipe between adjacent categories */
	#header [data-device="desktop"] #header-menu-1 .menu-item + .menu-item::before {
		content: "";
		width: 1px;
		height: 0.85em;
		margin: 0 1.1rem;
		background: #c9c2b6;
	}
	/* Drop newsletter link + search; the hamburger opens the menu instead */
	#header [data-device="desktop"] .ct-newsletter-link,
	#header [data-device="desktop"] .ct-header-search {
		display: none !important;
	}
	.desk-trigger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin: 0;
		padding: 0;
		border: none;
		background: none;
		color: var(--e-ink);
		cursor: pointer;
	}
	.desk-trigger svg {
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
	.desk-trigger:hover {
		opacity: 0.65;
	}
}

.ct-newsletter-link {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.9rem;
	font-weight: 600;
	font-family: var(--e-sans);
	color: var(--e-ink);
	text-decoration: none;
	white-space: nowrap;
}
/* Header stays ink-black throughout — no theme link/hover (blue) colour.
   Scoped to the desktop header so the mobile transparent masthead (white logo
   over the lead photo) is untouched. */
@media (min-width: 1000px) {
	#header [data-device="desktop"] a,
	#header [data-device="desktop"] a:hover,
	#header [data-device="desktop"] a:focus,
	#header [data-device="desktop"] a:active,
	#header [data-device="desktop"] .ct-toggle,
	#header [data-device="desktop"] .ct-toggle:hover,
	#header [data-device="desktop"] .ct-icon {
		color: var(--e-ink) !important;
		fill: currentColor;
	}
}

.ct-newsletter-link:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---------------------------------------------------------------
   Archive / blog grid
--------------------------------------------------------------- */
.entries[data-layout="grid"] {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3.25rem 2.25rem;
	grid-row-gap: 3.25rem;
}

@media (max-width: 999px) {
	.entries[data-layout="grid"] { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.75rem; }
}
@media (max-width: 600px) {
	.entries[data-layout="grid"] { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* Strip Blocksy's "boxed" card chrome for a clean editorial look */
.entry-card {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

/* Reorder: image first, then category eyebrow, headline, excerpt, date */
.entry-card .ct-media-container { order: 1; margin: 0 0 0.35rem; border-radius: 2px; overflow: hidden; aspect-ratio: 4 / 3; display: block; width: 100%; }
.entry-card .entry-meta[data-id="meta_1"] { order: 2; }
.entry-card .entry-title { order: 3; }
.entry-card .entry-excerpt { order: 4; }
.entry-card .entry-meta[data-id="meta_2"] { order: 5; }

.entry-card .ct-media-container img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 0.5s ease;
}
.entry-card .ct-media-container:hover img { transform: scale(1.03); }

/* Category eyebrow */
.entry-meta { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.meta-categories a {
	font-family: var(--e-sans);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.6rem;
	font-weight: 700;
	color: var(--e-ink);
	text-decoration: none;
}
.meta-categories a:hover { text-decoration: underline; }

.entry-meta[data-id="meta_2"],
.meta-date {
	font-family: var(--e-sans);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--e-muted);
}

/* Headline */
.entry-title { font-size: 1.4rem; line-height: 1.16; margin: 0.05rem 0; font-weight: var(--e-display-weight); }
.entry-title a { color: var(--e-ink); text-decoration: none; }
.entry-title a:hover { text-decoration: underline; }

/* Excerpt */
.entry-excerpt { color: #4a463f; font-size: 0.95rem; line-height: 1.55; }
.entry-excerpt p { margin: 0; }

/* ---------------------------------------------------------------
   Homepage hero (desktop) — lead photo in the left column with the
   headline box straddling its lower edge (The Cut), and a "THE LATEST"
   article list in the right column. The mobile hero is handled below.
--------------------------------------------------------------- */
.hero-overlay { display: block; }

@media (min-width: 1000px) {
	.home .entries[data-layout="grid"],
	.blog .entries[data-layout="grid"] {
		grid-template-columns: minmax(0, 3.2fr) minmax(0, 1fr);
		column-gap: 2.25rem;
		row-gap: 0;
		align-items: start;
		padding-left: 13%;
		padding-right: 13%;
		padding-bottom: 6rem;
	}

	/* Lead occupies the left column */
	.home .entries[data-layout="grid"] > .entry-card:first-child,
	.blog .entries[data-layout="grid"] > .entry-card:first-child {
		grid-column: 1;
		display: block;
		position: relative;
		align-self: stretch;
		margin: 0;
		padding: 0;
		border-bottom: none;
	}
	/* Photo fills the column so its lower edge lines up with the bottom of
	   "THE LATEST" (both children are absolute, so the column height is driven
	   by the list and the photo stretches to match). */
	.home .entries > .entry-card:first-child .ct-media-container,
	.blog .entries > .entry-card:first-child .ct-media-container {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		margin: 0;
	}
	.home .entries > .entry-card:first-child .ct-media-container img,
	.blog .entries > .entry-card:first-child .ct-media-container img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Headline box straddling the photo's lower-LEFT edge, poking slightly
	   outside the photo on the left (The Cut). */
	.home .entries > .entry-card:first-child .hero-overlay,
	.blog .entries > .entry-card:first-child .hero-overlay {
		display: block;
		position: absolute;
		left: -4.5rem;
		right: auto;
		bottom: -5rem;
		width: 84%;
		box-sizing: border-box;
		z-index: 2;
		background: var(--e-bg);
		padding: 1.2rem 2rem 1.5rem;
		text-align: center;
	}
	.home .entries > .entry-card:first-child .hero-overlay .entry-meta[data-id="meta_1"],
	.blog .entries > .entry-card:first-child .hero-overlay .entry-meta[data-id="meta_1"] {
		display: flex;
		justify-content: center;
		margin: 0 0 0.4rem;
		padding: 0;
		background: none;
	}
	.home .entries > .entry-card:first-child .hero-overlay .entry-title,
	.blog .entries > .entry-card:first-child .hero-overlay .entry-title {
		display: inline;
		margin: 0;
		font-family: var(--e-serif);
		font-size: calc(2rem * var(--e-display-scale));
		line-height: 1.12;
		font-weight: var(--e-display-weight);
	}
	.home .entries > .entry-card:first-child .hero-overlay .entry-title a,
	.blog .entries > .entry-card:first-child .hero-overlay .entry-title a { text-decoration: none; }
	.home .entries > .entry-card:first-child .hero-overlay .entry-title a::after,
	.blog .entries > .entry-card:first-child .hero-overlay .entry-title a::after { content: " "; }
	.home .entries > .entry-card:first-child .hero-overlay .entry-excerpt,
	.blog .entries > .entry-card:first-child .hero-overlay .entry-excerpt {
		display: inline;
		font-family: var(--e-serif);
		font-size: calc(2rem * var(--e-display-scale));
		line-height: 1.12;
		font-weight: 400;
		color: var(--e-muted);
	}
	.home .entries > .entry-card:first-child .hero-overlay .entry-excerpt p,
	.blog .entries > .entry-card:first-child .hero-overlay .entry-excerpt p { display: inline; margin: 0; }
	.home .entries > .entry-card:first-child .hero-overlay .entry-meta[data-id="meta_2"],
	.blog .entries > .entry-card:first-child .hero-overlay .entry-meta[data-id="meta_2"] {
		display: none;
	}
	.home .entries > .entry-card:first-child .hero-overlay .entry-meta[data-id="meta_2"] li,
	.blog .entries > .entry-card:first-child .hero-overlay .entry-meta[data-id="meta_2"] li { list-style: none; margin: 0; }

	/* "THE LATEST" list in the right column */
	.home .home-latest,
	.blog .home-latest {
		grid-column: 2;
		padding-bottom: 1.3rem;
		border-bottom: 1px solid var(--e-ink);
	}
	.home .home-latest__head,
	.blog .home-latest__head {
		font-family: var(--e-sans);
		text-transform: uppercase;
		letter-spacing: 0.2em;
		font-size: 1.1rem;
		font-weight: 700;
		color: var(--e-ink);
		margin: 0 0 1.4rem;
		padding-top: 0.85rem;
		border-top: 1px solid var(--e-ink);
	}
	/* Hide all but the first 4 stories in the column */
	.home .home-latest .entry-card:nth-of-type(n + 5),
	.blog .home-latest .entry-card:nth-of-type(n + 5) {
		display: none;
	}
	.home .home-latest .entry-card,
	.blog .home-latest .entry-card {
		display: flex;
		flex-direction: column;
		margin: 0 0 1.4rem 1rem;
		padding: 0;
		border-bottom: none;
		background: none;
	}
	.home .home-latest .entry-card .ct-media-container,
	.home .home-latest .entry-card .entry-meta[data-id="meta_1"],
	.blog .home-latest .entry-card .ct-media-container,
	.blog .home-latest .entry-card .entry-meta[data-id="meta_1"] { display: none !important; }
	.home .home-latest .entry-card .entry-meta[data-id="meta_2"],
	.blog .home-latest .entry-card .entry-meta[data-id="meta_2"] {
		order: -1;
		margin: 0;
		padding: 0;
		list-style: none;
		line-height: 1;
	}
	.home .home-latest .entry-card .entry-meta[data-id="meta_2"] li,
	.blog .home-latest .entry-card .entry-meta[data-id="meta_2"] li { list-style: none; margin: 0; }
	.home .home-latest .entry-card .entry-meta[data-id="meta_2"] time,
	.blog .home-latest .entry-card .entry-meta[data-id="meta_2"] time {
		color: var(--e-accent);
		font-family: var(--e-sans);
		font-weight: 700;
		font-size: 0.74rem;
		letter-spacing: 0.03em;
	}
	.home .home-latest .entry-card .home-latest__text,
	.blog .home-latest .entry-card .home-latest__text {
		font-family: var(--e-serif);
		font-size: calc(1.5rem * var(--e-display-scale));
		line-height: 1.05;
		margin: -0.1rem 0 0;
	}
	.home .home-latest .entry-card .entry-title,
	.blog .home-latest .entry-card .entry-title {
		display: inline;
		font-family: var(--e-serif);
		font-size: inherit;
		line-height: inherit;
		font-weight: var(--e-display-weight);
		margin: 0;
	}
	.home .home-latest .entry-card .entry-title::after,
	.blog .home-latest .entry-card .entry-title::after { content: " "; }
	.home .home-latest .entry-card .entry-title a,
	.blog .home-latest .entry-card .entry-title a { color: var(--e-ink); text-decoration: none; }
	.home .home-latest .entry-card .entry-title a:hover,
	.blog .home-latest .entry-card .entry-title a:hover { text-decoration: underline; }
	.home .home-latest .entry-card .entry-excerpt,
	.blog .home-latest .entry-card .entry-excerpt {
		display: inline;
		font-family: var(--e-serif);
		font-size: inherit;
		line-height: inherit;
		font-weight: 400;
		color: var(--e-muted);
	}
	.home .home-latest .entry-card .entry-excerpt p,
	.blog .home-latest .entry-card .entry-excerpt p { display: inline; margin: 0; }
	.home .home-latest .entry-card:last-of-type,
	.blog .home-latest .entry-card:last-of-type { border-bottom: none; }
	.home .home-latest__more,
	.blog .home-latest__more {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		margin-top: 0.2rem;
		margin-left: 1rem;
		font-family: var(--e-sans);
		text-transform: uppercase;
		letter-spacing: 0.12em;
		font-size: 0.72rem;
		font-weight: 700;
		color: var(--e-ink);
		text-decoration: none;
	}
	.home .home-latest__more span,
	.blog .home-latest__more span { display: inline-block; }
	.home .home-latest__more-arrow,
	.blog .home-latest__more-arrow {
		flex: none;
		stroke: var(--e-accent);
		stroke-width: 2.4;
		stroke-linecap: round;
		stroke-linejoin: round;
		transition: transform 0.2s ease;
	}
	.home .home-latest__more:hover span,
	.blog .home-latest__more:hover span { text-decoration: underline; }
	.home .home-latest__more:hover .home-latest__more-arrow,
	.blog .home-latest__more:hover .home-latest__more-arrow { transform: translateX(3px); }
}

@media (max-width: 999px) {
	/* Homepage stacks in one column: lead, then the latest stories as normal cards */
	.home .entries[data-layout="grid"],
	.blog .entries[data-layout="grid"] {
		grid-template-columns: 1fr;
	}
	/* Bigger side gutters on mobile (The Cut style) for the feature sections and
	   the NAJNOVIJE list. The lead photo stays full-bleed; the quote and
	   newsletter sections keep their current width. */
	.home .home-feature:not(.home-quote):not(.home-news),
	.home .home-latest,
	.blog .home-latest {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	/* IZDVOJENO title: match the NAJNOVIJE utility-header style (centered, light
	   uppercase sans) so both non-category sections share one consistent look. */
	:is(.home, .single) .home-trending .home-trending__title {
		display: block;
		text-align: center;
		font-family: var(--e-sans);
		text-transform: uppercase;
		letter-spacing: 0.22em;
		font-size: 1.45rem;
		font-weight: 400;
		color: var(--e-ink);
		margin: 1.5rem 0 1.6rem;
		/* Give back the tracking that trails the last letter, or the word centres
		   half a unit to the left. Same as the section names above. */
		padding-left: 0.22em;
	}
	/* IZDVOJENO on mobile: a compact list — small square thumbnail on the right,
	   bold headline + first sentence, with the date pinned to the photo's lower
	   edge (the look NAJNOVIJE used to have). */
	:is(.home, .single) .home-trending .home-trending__row {
		display: block;
	}
	:is(.home, .single) .home-trending .ht-item {
		display: flow-root;
		position: relative;
		padding: 1.3rem 0;
		border-bottom: 1px solid var(--e-line);
		gap: 0;
		/* The headline's size and leading live on the row, not on the headline,
		   because the thumbnail is measured from them: the photo is exactly as tall
		   as the four clamped lines beside it. A fixed 108px square could not hold
		   that, since the headline grows with the viewport (4.3vw) until it caps at
		   521px — four lines run 84px on a phone and 107px on a tablet, so the same
		   square was 24px too tall on a phone and right on a tablet. */
		--ht-lines: 4;
		--ht-leading: 1.16;
		--ht-head: clamp(
			calc(1.1rem * var(--e-display-scale)),
			calc(4.3vw * var(--e-display-scale)),
			calc(1.4rem * var(--e-display-scale))
		);
		--ht-text-height: calc(var(--ht-lines) * var(--ht-leading) * var(--ht-head));
	}
	:is(.home, .single) .home-trending .ht-item:last-child { border-bottom: none; }
	:is(.home, .single) .home-trending .ht-item__media {
		float: right;
		width: var(--ht-text-height);
		height: var(--ht-text-height);
		aspect-ratio: auto;
		margin: 0 0 0 1.2rem;
		overflow: hidden;
	}
	:is(.home, .single) .home-trending .ht-item__media img { width: 100%; height: 100%; object-fit: cover; }
	:is(.home, .single) .home-trending .ht-item__head {
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-align: left;
		margin: 0;
		font-family: var(--e-serif);
		font-size: var(--ht-head);
		line-height: var(--ht-leading);
		font-weight: var(--e-display-weight);
	}
	:is(.home, .single) .home-trending .ht-item__head a { font-weight: var(--e-display-weight); color: var(--e-ink); text-decoration: none; }
	:is(.home, .single) .home-trending .ht-item__head a::after { content: " "; }
	:is(.home, .single) .home-trending .ht-item__dek { font-weight: 400; color: var(--e-ink); }
	:is(.home, .single) .home-trending .ht-item__date { display: none; }
	/* NAJNOVIJE as a compact list: small square thumbnail + date / headline,
	   so the section stays short instead of a tall stack of big cards. */
	.home .home-latest,
	.blog .home-latest {
		margin-top: 2.4rem;
	}
	.home .home-latest__head,
	.blog .home-latest__head {
		display: block;
		text-align: center;
		font-family: var(--e-sans);
		text-transform: uppercase;
		letter-spacing: 0.22em;
		font-size: 1.45rem;
		font-weight: 400;
		color: var(--e-ink);
		margin: 0 0 0.4rem;
		padding-top: 1.5rem;
		/* As IZDVOJENO above: the trailing tracking, given back. The rule over the
		   heading is unaffected, since padding does not narrow the border box. */
		padding-left: 0.22em;
		border-top: 1px solid var(--e-line);
	}
	/* show only the first 4, then a VIŠE link */
	.home .home-latest .entry-card:nth-of-type(n + 5),
	.blog .home-latest .entry-card:nth-of-type(n + 5) {
		display: none;
	}
	.home .home-latest .entry-card,
	.blog .home-latest .entry-card {
		display: flex;
		flex-direction: column;
		position: relative;
		margin: 0;
		padding: 0.85rem 0 !important;
		border-bottom: none !important;
		background: none;
	}
	.home .home-latest .entry-card:first-of-type,
	.blog .home-latest .entry-card:first-of-type { padding-top: 0.3rem !important; }
	/* The Cut "latest" style: no photo — a coloured timestamp above the
	   headline, then bold headline + first sentence inline (like the lead). */
	.home .home-latest .entry-card .ct-media-container,
	.blog .home-latest .entry-card .ct-media-container { display: none !important; }
	.home .home-latest .entry-card .entry-meta[data-id="meta_1"],
	.blog .home-latest .entry-card .entry-meta[data-id="meta_1"] { display: none !important; }
	.home .home-latest .entry-card .home-latest__text,
	.blog .home-latest .entry-card .home-latest__text { display: block; }
	.home .home-latest .entry-card .entry-title,
	.blog .home-latest .entry-card .entry-title {
		display: inline;
		margin: 0;
		font-family: var(--e-serif);
		font-size: clamp(
			calc(1.1rem * var(--e-display-scale)),
			calc(4.3vw * var(--e-display-scale)),
			calc(1.4rem * var(--e-display-scale))
		);
		line-height: 1.16;
		font-weight: var(--e-display-weight);
	}
	.home .home-latest .entry-card .entry-title a,
	.blog .home-latest .entry-card .entry-title a { color: var(--e-ink); text-decoration: none; }
	.home .home-latest .entry-card .entry-title a::after,
	.blog .home-latest .entry-card .entry-title a::after { content: " "; }
	.home .home-latest .entry-card .entry-excerpt,
	.blog .home-latest .entry-card .entry-excerpt {
		display: inline;
		font-family: var(--e-serif);
		font-size: clamp(
			calc(1.1rem * var(--e-display-scale)),
			calc(4.3vw * var(--e-display-scale)),
			calc(1.4rem * var(--e-display-scale))
		);
		line-height: 1.16;
		font-weight: 400;
		color: var(--e-ink);
	}
	.home .home-latest .entry-card .entry-excerpt p,
	.blog .home-latest .entry-card .entry-excerpt p { display: inline; margin: 0; }
	/* date/time kicker above the headline, in the mint accent (The Cut uses red) */
	.home .home-latest .entry-card .entry-meta[data-id="meta_2"],
	.blog .home-latest .entry-card .entry-meta[data-id="meta_2"] {
		order: -1;
		position: static;
		transform: none;
		margin: 0 0 0.15rem;
		padding: 0;
		list-style: none;
	}
	.home .home-latest .entry-card .entry-meta[data-id="meta_2"] li,
	.blog .home-latest .entry-card .entry-meta[data-id="meta_2"] li { list-style: none; margin: 0; }
	.home .home-latest .entry-card .entry-meta[data-id="meta_2"] time,
	.blog .home-latest .entry-card .entry-meta[data-id="meta_2"] time {
		font-family: var(--e-sans);
		font-weight: 700;
		font-size: 0.72rem;
		letter-spacing: 0.09em;
		text-transform: uppercase;
		color: var(--e-accent);
	}

	.home .home-latest__more,
	.blog .home-latest__more {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0.55rem;
		margin-top: 1.6rem;
		font-family: var(--e-sans);
		text-transform: uppercase;
		letter-spacing: 0.2em;
		font-size: 0.72rem;
		font-weight: 700;
		color: var(--e-ink);
		text-decoration: none;
	}
	.home .home-latest__more-arrow,
	.blog .home-latest__more-arrow {
		flex: none;
		stroke: var(--e-accent);
		stroke-width: 2.4;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
	/* keep every VIŠE link the same size as NAJNOVIJE across mobile sections.
	   Doubling .home raises specificity above the later base rules (0,2,0). */
	.home.home .home-feature__more,
	.home.home .home-quote__more,
	.home:is(.home, .single) .home-trending__more {
		font-size: 0.72rem;
		letter-spacing: 0.2em;
		font-weight: 700;
	}

	/* CITAT DANA on mobile: keep the desktop side-by-side layout — quote text on
	   the left, a small polaroid on the right — instead of stacking them.
	   (Extra .home-quote in the selector raises specificity over the base rule.) */
	.home .home-quote .home-quote__inner {
		grid-template-columns: minmax(0, 1fr) 34%;
		gap: 1rem;
		align-items: center;
		padding: 0 0.4rem;
	}
	.home .home-quote .home-quote__text {
		font-size: clamp(1rem, 3.9vw, 1.3rem);
		line-height: 1.22;
	}
	.home .home-quote .home-quote__photo {
		width: 100%;
		max-width: none;
		margin: 0;
		justify-self: end;
		padding: 7px 7px 16px;
		transform: rotate(3deg);
	}

	/* LIFE: first and third photos matted on mint, like the desktop layout. */
	.home .home-feature--life .hf-col:first-child .hf-col__media,
	.home .home-feature--life .hf-col:last-child .hf-col__media {
		background: #d5f2eb;
		padding: 8%;
		box-sizing: border-box;
	}

	/* Lead story (The Cut mobile): full-bleed photo with a white box straddling its bottom edge.
	   Negative side margins pull the card past the container padding so the photo runs edge-to-edge. */
	.home .entries[data-layout="grid"] > .entry-card:first-child,
	.blog .entries[data-layout="grid"] > .entry-card:first-child {
		display: block;
		position: relative;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		padding-bottom: 3.5rem !important;
		margin-bottom: 1.6rem;
		border-bottom: none !important;
	}

	/* Tall gradient over the top of the lead photo so the white logo sits on an
	   immersive image (journal.hr style), not a flat band. */
	.home .entries[data-layout="grid"] > .entry-card:first-child::before,
	.blog .entries[data-layout="grid"] > .entry-card:first-child::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 20%;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.26) 45%, rgba(0, 0, 0, 0) 100%);
		z-index: 1;
		pointer-events: none;
	}
	.home .entries > .entry-card:first-child .ct-media-container,
	.blog .entries > .entry-card:first-child .ct-media-container {
		display: block;
		aspect-ratio: 3 / 5.15;
		margin: 0;
		border-radius: 0;
	}
	/* date hidden on the lead */
	.home .entries > .entry-card:first-child .entry-meta[data-id="meta_2"],
	.blog .entries > .entry-card:first-child .entry-meta[data-id="meta_2"] {
		display: none;
	}

	/* The white box: sits in the photo's lower-RIGHT corner, overlapping it (The Cut style).
	   Photo peeks on the left and above; box is flush to the right edge and hangs just below. */
	.home .entries > .entry-card:first-child .hero-overlay,
	.blog .entries > .entry-card:first-child .hero-overlay {
		display: block;
		position: absolute;
		left: 0;
		right: auto;
		bottom: 0;
		width: 90%;
		box-sizing: border-box;
		margin: 0 !important;
		z-index: 2;
		background: var(--e-bg);
		text-align: center;
		padding: 1rem 1.15rem 1.35rem;
	}
	.home .entries > .entry-card:first-child .hero-overlay .entry-meta[data-id="meta_1"],
	.blog .entries > .entry-card:first-child .hero-overlay .entry-meta[data-id="meta_1"] {
		align-self: center;
		justify-content: center;
		text-align: center;
		margin: 0 0 0.35rem;
		padding: 0;
		background: none;
	}
	/* Headline + dek run together on one line block, like The Cut */
	.home .entries > .entry-card:first-child .hero-overlay .entry-title,
	.blog .entries > .entry-card:first-child .hero-overlay .entry-title {
		display: inline;
		margin: 0;
		padding: 0;
		background: none;
		font-family: var(--e-serif);
		font-size: clamp(
			calc(1.4rem * var(--e-display-scale)),
			calc(5.6vw * var(--e-display-scale)),
			calc(1.85rem * var(--e-display-scale))
		);
		line-height: 1.14;
		font-weight: var(--e-display-weight);
	}
	.home .entries > .entry-card:first-child .hero-overlay .entry-title a,
	.blog .entries > .entry-card:first-child .hero-overlay .entry-title a {
		text-decoration: none;
	}
	.home .entries > .entry-card:first-child .hero-overlay .entry-title a:hover,
	.blog .entries > .entry-card:first-child .hero-overlay .entry-title a:hover {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 3px;
	}
	.home .entries > .entry-card:first-child .hero-overlay .entry-title a::after,
	.blog .entries > .entry-card:first-child .hero-overlay .entry-title a::after {
		content: " ";
	}
	.home .entries > .entry-card:first-child .hero-overlay .entry-excerpt,
	.blog .entries > .entry-card:first-child .hero-overlay .entry-excerpt {
		display: inline;
		font-family: var(--e-serif);
		font-size: clamp(
			calc(1.4rem * var(--e-display-scale)),
			calc(5.6vw * var(--e-display-scale)),
			calc(1.85rem * var(--e-display-scale))
		);
		line-height: 1.14;
		font-weight: 400;
		color: var(--e-ink);
	}
	.home .entries > .entry-card:first-child .hero-overlay .entry-excerpt p,
	.blog .entries > .entry-card:first-child .hero-overlay .entry-excerpt p {
		display: inline;
		margin: 0;
	}
	/* Publish date removed from the lead headline on mobile */
	.home .entries > .entry-card:first-child .hero-overlay .entry-meta[data-id="meta_2"],
	.blog .entries > .entry-card:first-child .hero-overlay .entry-meta[data-id="meta_2"] {
		display: none;
	}
	.home .entries > .entry-card:first-child .hero-overlay .entry-meta[data-id="meta_2"] li,
	.blog .entries > .entry-card:first-child .hero-overlay .entry-meta[data-id="meta_2"] li {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.home .entries > .entry-card:first-child .hero-overlay .entry-meta[data-id="meta_2"] time,
	.blog .entries > .entry-card:first-child .hero-overlay .entry-meta[data-id="meta_2"] time {
		color: var(--e-muted);
	}
}

/* ---------------------------------------------------------------
   Homepage feature row — category showcase (The Cut "STYLE" style):
   bold rule, large category wordmark, a 4-photo collage story next to a
   single big-photo story, then a centered VIŠE link to the category.
--------------------------------------------------------------- */
.home .home-feature {
	margin: 3rem 0 0;
	padding-top: 2rem;
}
.home .home-feature__rule {
	border: 0;
	border-top: 1px solid var(--e-line);
	margin: 0 0 2rem;
}
.home .home-feature--people .home-feature__rule,
.home .home-feature--life .home-feature__rule,
.home .home-internet .home-feature__rule,
.home .home-notes .home-feature__rule {
	margin-bottom: 3.6rem;
}
.home .home-feature__rule--thin-top {
	margin-bottom: 0.5rem;
}
.home .home-feature__rule--bold {
	border-top: 6px solid var(--e-ink);
	margin-bottom: 2.6rem;
}

/* Quote of the day — The Cut "issue" block: kicker, big two-tone serif quote,
   and a polaroid-style photo to the side. */
.home .home-quote__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}
.home .home-quote__kicker {
	display: block;
	font-family: var(--e-sans);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--e-ink);
	margin-bottom: 1rem;
}
.home .home-quote__text {
	margin: 0;
	font-family: var(--e-serif);
	font-weight: 400;
	font-size: clamp(1.5rem, 4.4vw, 2.5rem);
	line-height: 1.15;
}
.home .home-quote__lead { color: var(--e-ink); font-weight: 600; }
.home .home-quote__lead::after { content: " "; }
.home .home-quote__muted { color: var(--e-muted); }
.home .home-quote__more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.8rem;
	font-family: var(--e-sans);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--e-ink);
	text-decoration: none;
}
.home .home-quote__more:hover span { text-decoration: underline; text-underline-offset: 3px; }
.home .home-quote__more:hover .home-feature__more-arrow { transform: translateX(3px); }
.home .home-quote__photo {
	margin: 0 auto;
	background: #fff;
	padding: 12px 12px 30px;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
	transform: rotate(3.5deg);
	width: 230px;
	max-width: 70%;
}
.home .home-quote__photo-inner {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}
.home .home-quote__photo-inner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.home .home-feature__title {
	display: block;
	text-align: center;
	font-family: var(--e-serif);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	line-height: 0.92;
	color: var(--e-ink);
	text-decoration: none;
	margin: 0 0 6.5rem;
	font-size: clamp(2.6rem, 8vw, 6.5rem);
	/* Tracking is added after the last letter as well, so the inline box is one
	   0.14em wider than the letters themselves and centring the box leaves the
	   word half of that to the left — 3.6px on a phone, 7.3px at full size. The
	   padding gives the line back that half unit. In em so it holds at any size. */
	padding-left: 0.14em;
}
.home .home-feature__title:hover { text-decoration: none; }
/* On a phone the clamp above bottoms out at 2.6rem, which left the section name
   sitting in the middle of the measure: FASHION and 42NOTES, the longest names,
   ran 233px inside 311px, so a quarter of the line stayed empty and the title
   read smaller than it does anywhere else. 13vw brings them within ~13px of each
   side. It is a viewport unit rather than a fixed size so the fit holds across
   phone widths, and the tracking scales with it. Worth re-checking if a section
   name longer than eight characters ever appears: at this size it would wrap. */
@media (max-width: 600px) {
	.home .home-feature__title {
		font-size: 13vw;
		/* The 6.5rem below the title is one title-height on a desktop, where the
		   name runs 104px. On a phone the name is half that, so the same 104px read
		   as a hole between the section name and its first photo. */
		margin-bottom: 4.5rem;
	}
}
.home .home-feature__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.2rem;
}
/* Rectangular collage (clean outer edges) built from four photos, where the
   INNER seams are cut on a diagonal via clip-path — the dividing lines are
   angled while the overall block stays a neat rectangle, like The Cut. */
.home .hf-collage {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1.08;
	margin-bottom: 1.2rem;
}
.home .hf-collage__cell {
	position: absolute;
	overflow: hidden;
}
.home .hf-collage__cell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Two columns split by a diagonal vertical seam; straight horizontal seam.
   Outer corners stay at the rectangle's corners, the gaps (clip insets) show
   the page background. */
.home .hf-collage__cell:nth-child(1) {
	left: 0; top: 0; width: 56%; height: 50%;
	clip-path: polygon(0 0, 100% 0, 86% 95%, 0 95%);
}
.home .hf-collage__cell:nth-child(3) {
	left: 0; top: 50%; width: 56%; height: 50%;
	clip-path: polygon(0 5%, 86% 5%, 74% 100%, 0 100%);
}
.home .hf-collage__cell:nth-child(2) {
	left: 44%; top: 0; width: 56%; height: 50%;
	clip-path: polygon(25% 0, 100% 0, 100% 95%, 14% 95%);
}
.home .hf-collage__cell:nth-child(4) {
	left: 44%; top: 50%; width: 56%; height: 50%;
	clip-path: polygon(14% 5%, 100% 5%, 100% 100%, 2% 100%);
}

.home .hf-single {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	margin-bottom: 1.2rem;
}
/* Fashion pair: collage and single photo must share one box so they
   read as the same size, not a short grid next to a tall portrait. */
.home .home-feature--people .hf-collage,
.home .home-feature--people .hf-single {
	aspect-ratio: 4 / 5;
}
.home .hf-single img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Headline block (The Cut): small uppercase kicker, bold headline + dek inline,
   then a byline underneath. */
/* Every centred kicker carries 0.13em of tracking, which is also added after its
   last letter, so centring the box leaves the word 0.065em to the left. The
   padding hands that half unit back. Grouped here rather than repeated in each
   of the six rules below. */
.home .hf-card__kicker,
.home .hf-col__kicker,
.home .hf-frame__kicker,
.home .hf-photo__kicker,
.home .nt-lead__kicker,
.home .nt-card__kicker {
	padding-left: 0.13em;
}
.home .hf-card__kicker {
	display: block;
	text-align: center;
	font-family: var(--e-sans);
	text-transform: uppercase;
	letter-spacing: 0.13em;
	font-size: 0.62rem;
	font-weight: 700;
	color: var(--e-ink);
	margin: 0 0 0.5rem;
}
.home .hf-card__head {
	margin: 0;
	text-align: center;
	font-family: var(--e-serif);
	font-weight: 400;
	font-size: 1.15rem;
	line-height: 1.3;
}
.home .hf-card__title {
	font-weight: var(--e-display-weight);
	color: var(--e-ink);
	text-decoration: none;
}
.home .hf-card__title::after { content: " "; }
.home .hf-card__title:hover { text-decoration: underline; text-underline-offset: 3px; }
.home .hf-card__dek { font-weight: 400; color: var(--e-ink); }
.home .hf-card__byline {
	display: block;
	margin: 0.5rem 0 0;
	font-family: var(--e-sans);
	font-size: 0.72rem;
	letter-spacing: 0.02em;
	color: var(--e-muted);
}
/* LIFE row: three articles side by side, photo over a centered serif headline */
.home .home-feature__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.4rem;
}
.home .hf-col__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin-bottom: 1rem;
}
.home .hf-col__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.home .hf-col__kicker {
	display: block;
	text-align: center;
	font-family: var(--e-sans);
	text-transform: uppercase;
	letter-spacing: 0.13em;
	font-size: 0.62rem;
	font-weight: 700;
	color: var(--e-ink);
	margin: 0 0 0.5rem;
}
.home .hf-col__head {
	margin: 0;
	text-align: center;
	font-family: var(--e-serif);
	font-weight: 400;
	font-size: 1.2rem;
	line-height: 1.3;
}
.home .hf-col__head a {
	font-weight: var(--e-display-weight);
	color: var(--e-ink);
	text-decoration: none;
}
.home .hf-col__head a::after { content: " "; }
.home .hf-col__head a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.home .hf-col__dek { font-weight: 400; color: var(--e-ink); }

.home .home-feature__more {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.55rem;
	margin-top: 2rem;
	font-family: var(--e-sans);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--e-ink);
	text-decoration: none;
}
.home .home-feature__more-arrow {
	flex: none;
	stroke: var(--e-accent);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.2s ease;
}
.home .home-feature__more:hover span { text-decoration: underline; text-underline-offset: 3px; }
.home .home-feature__more:hover .home-feature__more-arrow { transform: translateX(3px); }
/* Roomier gap between the article grid/row and the VIŠE link (PEOPLE + LIFE) */
.home .home-feature__grid + .home-feature__more,
.home .home-feature__row + .home-feature__more,
.home .home-internet__grid + .home-feature__more { margin-top: 3.6rem; }

/* TRENDING strip (The Cut "shop" style): label, a row of four compact stories
   (small photo + headline) divided by hairlines, with thin rules top & bottom. */
:is(.home, .single) .home-trending .home-feature__rule { margin: 0; }
:is(.home, .single) .home-trending .home-feature__rule:last-child { margin-top: 3.2rem; }
:is(.home, .single) .home-trending__title {
	display: block;
	font-family: var(--e-sans);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--e-ink);
	margin: 1.3rem 0 1.6rem;
}
:is(.home, .single) .home-trending__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.4rem;
}
:is(.home, .single) .ht-item {
	display: flex;
	align-items: center;
	gap: 1rem;
}
:is(.home, .single) .ht-item__media {
	flex: none;
	display: block;
	width: 108px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
:is(.home, .single) .ht-item__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
:is(.home, .single) .ht-item__head {
	margin: 0;
	text-align: center;
	font-family: var(--e-serif);
	font-weight: var(--e-display-weight);
	font-size: calc(1.55rem * var(--e-display-scale));
	line-height: 1.22;
}
:is(.home, .single) .ht-item__head a { color: var(--e-ink); text-decoration: none; }
:is(.home, .single) .ht-item__head a:hover { text-decoration: underline; text-underline-offset: 3px; }
:is(.home, .single) .home-trending__more {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 0.5rem;
	margin: 1.6rem 0 1.3rem;
	font-family: var(--e-sans);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--e-ink);
	text-decoration: none;
}
:is(.home, .single) .home-trending__more:hover span { text-decoration: underline; text-underline-offset: 3px; }
:is(.home, .single) .home-trending__more .home-feature__more-arrow { stroke: var(--e-accent); }

/* Newsletter signup, laid out like the Quotes section: left-aligned text on the
   left, the subscribe form (input + stacked button) on the right. Mint accent
   on the button echoes the logo dot. */
.home .home-news__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}
.home .home-news__kicker {
	display: block;
	font-family: var(--e-sans);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--e-ink);
	margin-bottom: 1.1rem;
}
.home .home-news__head {
	margin: 0;
	font-family: var(--e-serif);
	font-weight: 400;
	font-size: clamp(1.8rem, 5vw, 3rem);
	line-height: 1.12;
}
.home .home-news__lead { display: block; color: var(--e-ink); font-weight: 500; }
.home .home-news__muted { display: block; color: var(--e-muted); }
.home .home-news__form {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	width: 100%;
}
.home .home-news__form input {
	min-width: 0;
	border: 0;
	border-bottom: 1.5px solid var(--e-ink);
	background: transparent;
	padding: 0.55rem 0.1rem;
	font-family: var(--e-sans);
	font-size: 1rem;
	color: var(--e-ink);
	transition: border-color 0.2s ease;
}
.home .home-news__form input:focus {
	outline: none;
	border-bottom-color: var(--e-accent);
}
.home .home-news__form input::placeholder { color: var(--e-muted); }
.home .home-news__form button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	border: 0;
	background: var(--e-ink);
	color: #fff;
	padding: 0.95rem 1.4rem;
	font-family: var(--e-sans);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.78rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.home .home-news__form button:hover { background: #2a2724; }
.home .home-news__arrow {
	flex: none;
	stroke: var(--e-accent);
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.2s ease;
}
.home .home-news__form button:hover .home-news__arrow { transform: translateX(3px); }

/* Custom newsletter validation message (replaces the browser's un-stylable
   bubble). On-brand: a small uppercase sans label led by a mint dot; the field
   border turns mint to draw the eye. Client dislikes red, so no red here. */
.nl-error {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	font-family: var(--e-sans);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--e-ink);
}
.nl-error[hidden] { display: none; }
.nl-error::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--e-accent);
}
/* Success state: mint check + mint text (a friendly confirmation). */
.nl-error.nl-error--ok { color: var(--e-accent); }
.nl-error.nl-error--ok::before {
	content: "\2713";
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	font-size: 0.82rem;
	line-height: 1;
	color: var(--e-accent);
}
.oc-newsletter .nl-error { margin-top: 0.7rem; }
.home .home-news__form input.is-invalid { border-bottom-color: var(--e-accent); }
.oc-newsletter__form input.is-invalid { border-color: var(--e-accent); }

/* NOTES section: a wide lead story (text + round photo) above two stacked
   stories (photo + kicker + headline + dek). */
.home .nt-lead {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.6rem;
	align-items: start;
}
.home .nt-lead__kicker {
	display: block;
	text-align: center;
	font-family: var(--e-sans);
	text-transform: uppercase;
	letter-spacing: 0.13em;
	font-size: 0.62rem;
	font-weight: 700;
	color: var(--e-ink);
	margin-bottom: 0.9rem;
}
.home .nt-lead__head {
	margin: 0;
	text-align: center;
	font-family: var(--e-serif);
	font-weight: 400;
	font-size: clamp(1.4rem, 3vw, 1.95rem);
	line-height: 1.32;
}
.home .nt-lead__title { font-weight: var(--e-display-weight); color: var(--e-ink); text-decoration: none; }
.home .nt-lead__title::after { content: " "; }
.home .nt-lead__title:hover { text-decoration: underline; text-underline-offset: 3px; }
.home .nt-lead__dek { font-weight: 400; color: var(--e-ink); }
.home .nt-lead__media {
	display: block;
	justify-self: center;
	width: 250px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
}
.home .nt-lead__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* On mobile the lead stacks; show the round photo first, then its headline
   below it. Desktop keeps the text-left / photo-right two-column layout. */
@media (max-width: 999px) {
	.home .nt-lead__media { order: -1; }
	/* Match the other card headlines on mobile (the lead only stays larger on
	   desktop, where it sits beside the photo). */
	.home .nt-lead__head {
		font-size: 1.2rem;
		line-height: 1.3;
	}
}

.home .nt-duo {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.6rem;
	margin-top: 3rem;
}
.home .nt-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin-bottom: 1rem;
}
.home .nt-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Third NOTES photo sits matted on a soft mint background, like The Cut's beige. */
.home .nt-duo .nt-card:last-child .nt-card__media {
	background: #d5f2eb;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8% 7%;
	box-sizing: border-box;
}
.home .nt-duo .nt-card:last-child .nt-card__media img {
	width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
}
.home .nt-card__kicker {
	display: block;
	text-align: center;
	font-family: var(--e-sans);
	text-transform: uppercase;
	letter-spacing: 0.13em;
	font-size: 0.62rem;
	font-weight: 700;
	color: var(--e-ink);
	margin-bottom: 0.5rem;
}
.home .nt-card__head {
	margin: 0;
	text-align: center;
	font-family: var(--e-serif);
	font-weight: 400;
	font-size: 1.2rem;
	line-height: 1.3;
}
.home .nt-card__title { font-weight: var(--e-display-weight); color: var(--e-ink); text-decoration: none; }
.home .nt-card__title::after { content: " "; }
.home .nt-card__title:hover { text-decoration: underline; text-underline-offset: 3px; }
.home .nt-card__dek { font-weight: 400; color: var(--e-ink); }
.home .nt-duo + .home-feature__more { margin-top: 3.6rem; }

/* INTERNET section: two framed text cards stacked left, one photo story right */
.home .home-internet__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}
.home .home-internet__col {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
.home .hf-frame {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 1.1rem;
	border: 7px solid var(--e-ink);
	padding: 2rem 1.5rem;
	min-height: 220px;
	text-decoration: none;
	color: var(--e-ink);
}
.home .hf-frame__kicker {
	font-family: var(--e-sans);
	text-transform: uppercase;
	letter-spacing: 0.13em;
	font-size: 0.62rem;
	font-weight: 700;
	color: var(--e-ink);
}
.home .hf-frame__head {
	font-family: var(--e-serif);
	font-weight: var(--e-display-weight);
	font-size: 1.5rem;
	line-height: 1.2;
}
.home .hf-frame:hover .hf-frame__head { text-decoration: underline; text-underline-offset: 3px; }
/* Bottom INTERNET card: a thicker soft-mint frame (matches the photo matting
   used on the LIFE/INTERNET cards) instead of the saturated accent. */
.home .hf-frame--mint {
	border-color: #d5f2eb;
	border-width: 12px;
	min-height: 0;
	padding: 1.95rem 1.4rem;
	gap: 0.65rem;
}
.home .hf-frame--mint .hf-frame__head { font-size: 1.2rem; }
.home .hf-frame--mint .hf-frame__kicker { color: var(--e-ink); }

/* The portal never uses bylines. Production's post meta prints the author
   ("Vesna") before the date in the NAJNOVIJE list and other listing cards —
   hide it everywhere so only the date remains. */
.entry-card .meta-author,
.entry-card .ct-meta-author,
.entry-meta .meta-author { display: none !important; }

.home .hf-photo__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin-bottom: 1rem;
}
.home .hf-photo__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.home .hf-photo__kicker {
	display: block;
	text-align: center;
	font-family: var(--e-sans);
	text-transform: uppercase;
	letter-spacing: 0.13em;
	font-size: 0.62rem;
	font-weight: 700;
	color: var(--e-ink);
	margin-bottom: 0.5rem;
}
.home .hf-photo__head {
	margin: 0;
	text-align: center;
	font-family: var(--e-serif);
	font-weight: 400;
	font-size: 1.2rem;
	line-height: 1.3;
}
.home .hf-photo__title {
	font-weight: var(--e-display-weight);
	color: var(--e-ink);
	text-decoration: none;
}
.home .hf-photo__title::after { content: " "; }
.home .hf-photo__title:hover { text-decoration: underline; text-underline-offset: 3px; }
.home .hf-photo__dek { font-weight: 400; color: var(--e-ink); }

@media (min-width: 1000px) {
	.home .home-feature {
		margin-top: 3.5rem;
		padding-top: 2.4rem;
	}
	.home .home-feature__grid {
		grid-template-columns: 1.15fr 1.05fr;
		gap: 3rem;
		align-items: end;
		max-width: 1000px;
		margin: 0 auto;
	}
	.home .home-feature--people .home-feature__grid {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
	.home .hf-card__head { font-size: 1.25rem; }
	.home .home-feature__row {
		grid-template-columns: repeat(3, 1fr);
		gap: 2.6rem;
		max-width: 1000px;
		margin: 0 auto;
	}
	/* LIFE: middle story is the prominent one; the first and third photos are
	   smaller and matted on soft mint, like The Cut and the NOTES third photo. */
	.home .home-feature--life .home-feature__row {
		grid-template-columns: 0.82fr 1.36fr 0.82fr;
		align-items: start;
	}
	.home .home-feature--life .hf-col:first-child,
	.home .home-feature--life .hf-col:last-child {
		margin-top: 3rem;
	}
	.home .home-feature--life .hf-col:first-child .hf-col__media,
	.home .home-feature--life .hf-col:last-child .hf-col__media {
		background: #d5f2eb;
		padding: 8%;
		box-sizing: border-box;
	}
	.home .home-feature--life .hf-col:first-child .hf-col__media img,
	.home .home-feature--life .hf-col:last-child .hf-col__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.home .home-quote__inner {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 3.5rem;
		align-items: center;
		max-width: 1240px;
		margin: 0 auto;
	}
	.home .home-internet__grid {
		grid-template-columns: 0.82fr 1.18fr;
		gap: 3rem;
		align-items: stretch;
		max-width: 1000px;
		margin: 0 auto;
	}
	/* Push the mint frame to the bottom of the (stretched) left column so its
	   lower edge lines up with the bottom of the right story's headline. */
	.home .home-internet__col { gap: 1rem; justify-content: space-between; }
	/* Top INTERNET card matches the first LIFE card: photo matted on soft mint. */
	.home .home-internet .hf-col__media {
		background: #d5f2eb;
		padding: 8%;
		box-sizing: border-box;
	}

	:is(.home, .single) .home-trending .home-feature__rule { max-width: 1160px; margin: 0 auto; }
	:is(.home, .single) .home-trending__title { max-width: 1160px; margin: 1.4rem auto 1.8rem; }
	:is(.home, .single) .home-trending__more { max-width: 1160px; margin: 1.8rem auto 1.4rem; }
	:is(.home, .single) .home-trending__row {
		grid-template-columns: repeat(4, 1fr);
		gap: 0;
		max-width: 1160px;
		margin: 0 auto;
	}
	:is(.home, .single) .home-trending__row > .ht-item { padding: 0 1.7rem; }
	:is(.home, .single) .home-trending__row > .ht-item + .ht-item { border-left: 1px solid var(--e-line); }
	:is(.home, .single) .home-trending__row > .ht-item:first-child { padding-left: 0; }
	:is(.home, .single) .home-trending__row > .ht-item:last-child { padding-right: 0; }
	/* desktop IZDVOJENO is a photo-beside-text strip, so keep its headline
	   left-aligned; the centered treatment is only for the mobile card grid. */
	:is(.home, .single) .ht-item__head { text-align: left; }
	/* the first-sentence dek and date are only for the mobile compact list */
	:is(.home, .single) .ht-item__dek,
	:is(.home, .single) .ht-item__date { display: none; }
	.home .home-quote__photo {
		margin: 0;
		justify-self: end;
		width: 260px;
		max-width: none;
	}
	.home .home-news__inner {
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: 3.5rem;
		align-items: center;
		max-width: 1240px;
		margin: 0 auto;
	}

	.home .nt-lead {
		grid-template-columns: minmax(0, 1fr) 260px;
		gap: 3.2rem;
		max-width: 1180px;
		margin: 0 auto;
	}
	.home .nt-lead__media { width: 100%; }
	.home .nt-duo {
		grid-template-columns: 1.18fr 0.82fr;
		gap: 3rem;
		align-items: start;
		max-width: 1000px;
		margin: 5.5rem auto 0;
	}
	.home .nt-duo .nt-card:last-child .nt-card__media { aspect-ratio: 1 / 1; }
	.home .nt-duo .nt-card:last-child { margin-top: 3.5rem; }
}

/* ---------------------------------------------------------------
   Archive title (category pages)
--------------------------------------------------------------- */
.page-title, .ct-page-title {
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------
   Single article (The Cut style): a bordered two-box header (tag + headline
   on the left, date + share on the right, divided by a vertical rule), a big
   lead photo spanning the wide main column, and a "Još iz rubrike" list in the
   right column beside the story.
--------------------------------------------------------------- */
.entry-hero-image { margin: 0 0 1.6rem; }
.entry-hero-image__img { display: block; width: 100%; height: auto; border-radius: 0; }

.single .has-article-layout {
	max-width: 720px;
	margin: 1.4rem auto 3rem;
	padding: 0 1.15rem;
}
.single .has-article-layout > .hero-section,
.single .has-article-layout > .entry-content {
	max-width: none;
	width: auto;
	margin: 0;
	padding: 0;
}
.single .entry-header[hidden] { display: none !important; }

/* Blocksy stretches <main> to fill the viewport (its sticky-footer flex trick),
   which on a short story opens a big void between the article and the IZDVOJENO
   strip that follows <main>. Opt out so IZDVOJENO sits right under the story. */
.single .site-main { flex-grow: 0 !important; }

/* --- Header (two-box, ruled) --- */
.single .article-head {
	border-top: 1px solid var(--e-line);
	border-bottom: 1px solid var(--e-line);
	padding: 1.1rem 0 1.3rem;
	margin: 0 0 1.6rem;
}
.single .article-kicker {
	display: block;
	font-family: var(--e-sans);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--e-accent);
	margin: 0 0 0.85rem;
}
.single .page-title,
.single .entry-title {
	font-family: var(--e-serif);
	font-weight: var(--e-display-weight);
	font-size: clamp(2rem, 6vw, 2.5rem);
	line-height: 1.07;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--e-ink);
}
.single .page-description {
	display: block !important;
	font-family: var(--e-serif);
	font-weight: 400;
	font-size: 1.15rem;
	line-height: 1.42;
	color: var(--e-muted);
	margin: 0.9rem 0 0;
}
.single .page-description p { margin: 0; }
.single .page-description[hidden] { display: none !important; }
.single .article-head .entry-meta { display: none !important; }

/* Meta box: date + share. Divided from the headline (vertical rule on desktop,
   horizontal rule on mobile). */
.single .article-head__meta {
	margin-top: 1.2rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--e-line);
}
.single .article-head__date {
	display: block;
	font-family: var(--e-sans);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--e-muted);
	margin: 0 0 1.5rem;
}
.single .article-share { display: flex; align-items: center; gap: 0.55rem; }
.single .article-share__label {
	font-family: var(--e-sans);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.62rem;
	font-weight: 700;
	color: var(--e-muted);
	margin-right: 0.15rem;
}
.single .article-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--e-line);
	color: var(--e-ink);
}
.single .article-share__btn svg { width: 15px; height: 15px; display: block; }

/* --- Body --- */
/* Reading size is set a notch larger than Blocksy's default, because editors
   were manually bumping every article from S to M anyway. Static pages read
   the same way, so they share these rules. */
:is(.single, .page) .entry-content { font-size: 1.3rem; line-height: 1.45; }
:is(.single, .page) .entry-content p,
:is(.single, .page) .entry-content li,
:is(.single, .page) .entry-content blockquote { font-family: var(--e-read); }
:is(.single, .page) .entry-content p { margin-bottom: 1.4rem; }

/* In-content links. Blocksy paints them in its factory blue (#2872fa), the
   same colour already stripped off pull-quotes below and one that appears
   nowhere else in the brand. Mint can't carry body text either — 2.3:1
   against white, under the 4.5:1 minimum — so the text stays ink and the
   mint goes on the underline. */
:is(.single, .page) .entry-content a {
	color: var(--e-ink);
	text-decoration: underline;
	text-decoration-color: var(--e-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
:is(.single, .page) .entry-content a:hover { text-decoration-color: var(--e-ink); }

/* Pull-quotes. Blocksy rules every <blockquote> with a 4px bar in its factory
   palette colour (#2872fa), which is a blue that exists nowhere else in the
   brand — so a quoted line looked like a default theme. Mint rule + display
   serif instead, with the attribution as a small sans kicker. */
.single .entry-content blockquote:not(.tiktok-embed):not(.edit42-tt):not(.instagram-media):not(.twitter-tweet) {
	border-inline-start: 3px solid var(--e-accent);
	padding-inline-start: 1.4rem;
	margin: 2.1rem 0;
	color: var(--e-ink);
}
.single .entry-content blockquote:not(.tiktok-embed):not(.edit42-tt):not(.instagram-media):not(.twitter-tweet) p {
	font-family: var(--e-serif);
	font-size: clamp(1.35rem, 3.4vw, 1.6rem);
	line-height: 1.3;
	margin-bottom: 0.75rem;
}
.single .entry-content blockquote p:last-child { margin-bottom: 0; }
.single .entry-content blockquote cite,
.single .entry-content blockquote .wp-block-quote__citation,
.single .entry-content blockquote .wp-element-caption {
	display: block;
	margin-top: 0.7rem;
	font-family: var(--e-sans);
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.68rem;
	font-weight: 700;
	color: var(--e-muted);
}
/* Centred / plain quote styles keep the type but drop the rule. */
.single .entry-content blockquote.has-text-align-center,
.single .entry-content blockquote.has-text-align-right,
.single .entry-content blockquote.is-style-plain {
	border-inline-start: 0;
	padding-inline-start: 0;
}

/* Social embeds are blockquotes too: TikTok's oEmbed keeps its
   <blockquote class="tiktok-embed"> wrapper around the player, so Blocksy's
   quote bar and 1.5em indent landed on the video. Strip both and centre it. */
.single .entry-content blockquote.tiktok-embed,
.single .entry-content blockquote.edit42-tt,
.single .entry-content blockquote.instagram-media,
.single .entry-content blockquote.twitter-tweet {
	border-inline-start: 0;
	padding-inline-start: 0;
	margin-inline: auto;
}

/* A TikTok clip that hasn't loaded yet. The player measures 700-775px tall and
   that height doesn't change with width, so holding 720px keeps the article
   from jumping when a clip swaps in. The placeholder shows the poster link
   TikTok ships in its own markup, so there is something to read meanwhile. */
.single .entry-content blockquote.edit42-tt {
	min-height: 720px;
	max-width: 605px;
}
.single .entry-content blockquote.edit42-tt:not(.tiktok-embed) {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.6rem;
	border: 1px solid var(--e-line);
	text-align: center;
	font-family: var(--e-sans);
	font-size: 0.82rem;
	color: var(--e-muted);
}
.single .entry-content blockquote.edit42-tt:not(.tiktok-embed) a { color: var(--e-muted); }

/* In-content heading cascade, shared by articles and static pages. Blocksy's
   defaults rendered body H2 (35px) LARGER than the article H1 (~32px) and in
   navy — this forces a proper, smaller hierarchy: H1 (title) > H2 (podnaslov)
   > H3 (međunaslov), all ink-black. clamp() keeps one rule working on both
   phone and desktop. */
:is(.single, .page) .entry-content h2,
:is(.single, .page) .entry-content h3,
:is(.single, .page) .entry-content h4,
:is(.single, .page) .entry-content h5,
:is(.single, .page) .entry-content h6 {
	font-family: var(--e-serif);
	color: var(--e-ink);
	font-weight: var(--e-display-weight);
	letter-spacing: -0.005em;
}
:is(.single, .page) .entry-content h2 {
	font-size: clamp(1.725rem, 4.4vw, 1.75rem);
	line-height: 1.2;
	margin: 2rem 0 0.9rem;
}
:is(.single, .page) .entry-content h3 {
	font-size: clamp(1.25rem, 3.6vw, 1.4rem);
	line-height: 1.25;
	margin: 1.7rem 0 0.75rem;
}
:is(.single, .page) .entry-content h4 {
	font-size: clamp(1.1rem, 3vw, 1.2rem);
	line-height: 1.3;
	margin: 1.5rem 0 0.4rem;
}
:is(.single, .page) .entry-content h5,
:is(.single, .page) .entry-content h6 {
	font-size: 1.05rem;
	line-height: 1.35;
	margin: 1.4rem 0 0.35rem;
}

/* Photo captions: small, muted sans — quiet under the image (The Cut style). */
.single .entry-content figcaption,
.single .entry-content .wp-element-caption,
.single .entry-content .wp-caption-text {
	font-family: var(--e-sans);
	font-size: 0.78rem;
	line-height: 1.4;
	font-weight: 400;
	color: var(--e-muted);
	letter-spacing: 0;
	margin: 0.55rem 0 0;
}
/* Photographer credit pulled from the caption ("… Foto: Ime Prezime"). */
.single .entry-content .photo-caption__text { display: inline; }
.single .entry-content .photo-credit {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.72rem;
	letter-spacing: 0.01em;
	color: var(--e-muted);
	opacity: 0.9;
}
/* Gallery photos: by default WordPress paints the caption as white text over
   the image (hard to read). Show it quietly BELOW each photo instead — same
   look as a single Image block (the "Shalimar" example). */
.single .entry-content .wp-block-gallery.has-nested-images figure.wp-block-image {
	justify-content: flex-start;
}
.single .entry-content .wp-block-gallery.has-nested-images figure.wp-block-image img {
	height: auto;
}
.single .entry-content .wp-block-gallery.has-nested-images figure.wp-block-image figcaption,
.single .entry-content .wp-block-gallery figure.wp-block-image figcaption {
	position: static;
	max-width: none;
	margin: 0.5rem 0 0;
	padding: 0;
	background: none;
	color: var(--e-muted);
	text-align: center;
	text-shadow: none;
}

@media (max-width: 999px) {
	.single .entry-content figcaption,
	.single .entry-content .wp-element-caption,
	.single .entry-content .wp-caption-text { font-size: 0.72rem; }
}

/* --- "Još iz rubrike" related stories. Full-width under the story by default
   (mobile/tablet); moved into the right column beside the story on desktop. --- */
.single .article-related {
	margin: 2.4rem 0 0;
	padding-top: 1.8rem;
	border-top: 1px solid var(--e-line);
}
.single .article-related__title {
	font-family: var(--e-sans);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--e-ink);
	margin: 0 0 1.4rem;
}
.single .article-related__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.8rem;
}
.single .rel-card__media { display: block; margin: 0 0 0.65rem; }
.single .rel-card__media img { display: block; width: 100%; height: auto; }
.single .rel-card__kicker {
	display: block;
	font-family: var(--e-sans);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.6rem;
	font-weight: 700;
	color: var(--e-accent);
	margin: 0 0 0.35rem;
}
.single .rel-card__title {
	margin: 0;
	font-family: var(--e-serif);
	font-size: 1.16rem;
	line-height: 1.2;
	font-weight: var(--e-display-weight);
}
.single .rel-card__title a { color: var(--e-ink); }

/* --- Phones/tablet: smaller body type. --- */
@media (max-width: 999px) {
	/* 1.35 is Source Serif 4's own natural line height (measured: 1.354em), so
	   this is as tight as the body can go before Croatian carons on č/š/ž meet
	   the descenders of the line above. */
	:is(.single, .page) .entry-content { font-size: 1.2rem; line-height: 1.35; }

	/* H3 sat at 20px against 19.2px body text, so product names read as bold
	   paragraphs rather than headings. */
	:is(.single, .page) .entry-content h3 { font-size: 1.45rem; }

	/* Headline runs 20% larger than the desktop scale on phones. One rule for
	   both title classes: .page-title and .entry-title used to land on
	   different sizes here, so the same story could render 32px or 31px
	   depending on which template drew it. */
	.single .page-title,
	.single .entry-title {
		font-size: clamp(2.4rem, 7.2vw, 3rem);
	}

	/* Trim the dead space above the story: Blocksy pads the content container
	   ~50px and the article adds its own top margin. Pull the header up close
	   under the sticky bar, The Cut style. */
	.single .ct-container-full { padding-top: 1rem; padding-bottom: 0.5rem; }
	.single .has-article-layout { margin-top: 0.4rem; margin-bottom: 0.5rem; }
	/* Pull the IZDVOJENO strip up close under the story on phones. */
	.single-izdvojeno .home-feature { margin-top: 1.25rem; }

	/* The Cut mobile header: kicker, big headline, a hairline, then a single
	   row with the date on the left and share buttons on the right (in place of
	   The Cut's SAVE/comment), sitting just above the lead photo. */
	.single .article-head {
		border-bottom: 0;
		padding: 0.85rem 0 1rem;
		margin: 0 0 1.15rem;
	}
	.single .article-head__meta {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		margin-top: 0.9rem;
		padding-top: 0.9rem;
	}
	.single .article-head__date { margin: 0; }
	.single .article-share__label { display: none; }

	/* "Još iz rubrike" as a swipeable slider: one card (photo + headline) shows at
	   a time with a peek of the next, swipe horizontally for the rest. Bleeds to
	   the screen edges so cards use the full content width. */
	.single .article-related__row {
		display: flex;
		grid-template-columns: none;
		gap: 0.9rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 1.15rem;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin: 0 -1.15rem;
		padding: 0.1rem 1.15rem;
	}
	.single .article-related__row::-webkit-scrollbar { display: none; }
	.single .article-related .rel-card {
		flex: 0 0 82%;
		min-width: 0;
		scroll-snap-align: start;
	}
	.single .article-related .rel-card:only-child { flex-basis: 100%; }
	.single .article-related .rel-card__media { margin: 0 0 0.7rem; }
	.single .article-related .rel-card__media img {
		aspect-ratio: 3 / 2;
		object-fit: cover;
	}
	.single .article-related .rel-card__title {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* --- Desktop: The Cut two-column frame. Main column (story) on the left,
   "Još iz rubrike" on the right; the ruled header spans both and splits with a
   vertical rule that lines up with the column gap. --- */
@media (min-width: 1000px) {
	.single .has-article-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 300px;
		column-gap: 3rem;
		max-width: 1160px;
		margin: 2.4rem auto 1.5rem;
		padding: 0 2rem;
		align-items: start;
	}

	/* Header spans the full width and mirrors the column template so its inner
	   split aligns with the story/sidebar boundary. */
	.single .has-article-layout > .article-head {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: minmax(0, 1fr) 300px;
		column-gap: 3rem;
		padding: 1.4rem 0 1.6rem;
		margin: 0 0 2rem;
	}
	.single .article-head__main { grid-column: 1; }
	.single .article-head__meta {
		grid-column: 2;
		margin-top: 0;
		margin-left: -1.5rem; /* pull the rule to the middle of the 3rem gap */
		padding-top: 0;
		padding-left: 1.5rem; /* content lands on the "Još iz rubrike" left edge */
		border-top: 0;
		border-left: 1px solid var(--e-line);
	}

	.single .page-title,
	.single .entry-title {
		font-size: clamp(2.4rem, 3.3vw, 3.05rem);
		line-height: 1.04;
	}

	/* Story column + big lead photo. */
	.single .has-article-layout > .entry-content { grid-column: 1; }
	.single .entry-hero-image { margin: 0 0 2rem; }

	/* Right column: "Još iz rubrike", top-aligned with the lead photo, sticky. */
	.single .has-article-layout > .article-related {
		grid-column: 2;
		align-self: start;
		position: sticky;
		top: 120px;
		margin: 0;
		padding-top: 0;
		border-top: 0;
	}
	.single .article-related__row {
		display: flex;
		flex-direction: column;
		gap: 1.3rem;
	}
	.single .article-related .rel-card {
		display: grid;
		grid-template-columns: 74px 1fr;
		grid-template-rows: auto auto;
		column-gap: 0.85rem;
		row-gap: 0.3rem;
		align-items: start;
	}
	.single .article-related .rel-card:not(:last-child) {
		border-bottom: 1px solid var(--e-line);
		padding-bottom: 1.3rem;
	}
	.single .article-related .rel-card__media {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: start;
		margin: 0;
	}
	.single .article-related .rel-card__media img { width: 74px; height: 74px; object-fit: cover; }
	.single .article-related .rel-card__kicker { grid-column: 2; grid-row: 1; margin: 0; }
	.single .article-related .rel-card__title {
		grid-column: 2;
		grid-row: 2;
		margin: 0;
		font-size: 0.95rem;
		line-height: 1.22;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* Nudge only the "Još iz rubrike" column further right into the empty page
   margin (story, headline and date/share stay put). Wide screens only so it
   never overflows the viewport. */
@media (min-width: 1280px) {
	.single .has-article-layout > .article-related {
		width: 300px;
		margin-left: 3.5rem;
	}
	/* Match the date/share indent to the shifted "Još iz rubrike" column. */
	.single .article-head__meta { padding-left: 5rem; }
}

/* --- IZDVOJENO band above the footer on single articles. Reuses the homepage
   IZDVOJENO styles (see the :is(.home, .single) selectors below); this just sets
   the band's own frame + gutters since it sits outside the homepage container. --- */
.single-izdvojeno { padding: 0 1.15rem 1rem; }
.single-izdvojeno .home-feature { margin: 3rem 0 0; padding-top: 2rem; }
.single-izdvojeno .home-feature__rule { border: 0; border-top: 1px solid var(--e-line); }
@media (min-width: 1000px) {
	.single-izdvojeno { padding: 0 2rem 1rem; }
	.single-izdvojeno .home-feature { margin-top: 1.5rem; padding-top: 1.6rem; }
}

/* ---------------------------------------------------------------
   Static pages — O nama, Oglašavanje, Uvjeti korištenja, Pravila
   privatnosti, Kontakt. These had no design of their own, so they fell
   back to Blocksy: 16px sans across a 1290px measure, which ran to 99
   characters a line against the 45-75 that reads comfortably. They borrow
   the article's frame and reading type instead, which measures 683px and 56
   characters; the body and heading rules are shared above via :is().
--------------------------------------------------------------- */
.page .hero-section,
.page .entry-content {
	max-width: 720px;
	margin-inline: auto;
	padding-inline: 1.15rem;
}
/* The article's ruled header without the date/share box beside it. */
.page .entry-header {
	border-bottom: 1px solid var(--e-line);
	padding-bottom: 1.2rem;
	margin-bottom: 1.8rem;
}
.page .page-title {
	font-size: clamp(2rem, 6vw, 2.5rem);
	line-height: 1.07;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--e-ink);
}
/* The legal pages lean on lists, which Blocksy leaves flush with the text. */
.page .entry-content ul,
.page .entry-content ol {
	margin: 0 0 1.4rem;
	padding-left: 1.4rem;
}
.page .entry-content li { margin-bottom: 0.45rem; }
@media (max-width: 999px) {
	/* Same trim as the article: Blocksy pads the container ~50px on phones. */
	.page .ct-container-full { padding-top: 1rem; }
	.page .entry-header {
		padding-bottom: 1rem;
		margin-bottom: 1.4rem;
	}
	.page .page-title { font-size: clamp(2.4rem, 7.2vw, 3rem); }
}

/* ---------------------------------------------------------------
   Footer
--------------------------------------------------------------- */
.ct-footer { border-top: 1px solid var(--e-line); }

/* ---------------------------------------------------------------
   Mobile — 90% of 42edit traffic. Single-column, photo-first feed.
--------------------------------------------------------------- */
.ct-media-container,
.ct-media-container img,
.entry-hero-image__img,
.entry-content img { max-width: 100%; }

@media (max-width: 600px) {
	/* Roomier single-column feed with hairline dividers between stories */
	.entries[data-layout="grid"] { gap: 0; }
	.entries[data-layout="grid"] > .entry-card {
		padding-bottom: 1.9rem;
		margin-bottom: 1.9rem;
		border-bottom: 1px solid var(--e-line);
	}
	.entries[data-layout="grid"] > .entry-card:last-child {
		border-bottom: none;
		margin-bottom: 0;
	}

	/* Bigger, tappable editorial headlines */
	.entry-title { font-size: 1.55rem; line-height: 1.18; }
	.entry-excerpt { font-size: 1rem; line-height: 1.5; }
	.meta-categories a { font-size: 0.62rem; }

	/* Masthead: keep the wordmark prominent and the bar compact */
	.site-title,
	.site-title a { font-size: 1.5rem !important; }

	/* Single article reads comfortably on a phone. Headline size is handled by
	   the max-width:999px rule above, which covers both title classes. */
	:is(.single, .page) .entry-content { font-size: 1.2rem; line-height: 1.35; }
	.entry-hero-image { margin: 0 0 1.5rem; }
}

/* Sticky mobile masthead — wordmark stays visible while scrolling */
@media (max-width: 999px) {
	#header.ct-header {
		position: sticky;
		top: 0;
		z-index: 99;
		background: var(--e-bg);
		border-bottom: none;
	}
}

/* Custom menu trigger: a refined downward double-chevron (see hero.js) drawn as
   two open polylines, so it inherits the trigger's colour via stroke. */
.ct-header-trigger .ct-icon {
	fill: none !important;
}
.ct-header-trigger .ct-icon polyline {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Journal.hr-style overlay masthead on the homepage (mobile):
   transparent over the lead photo with a WHITE logo; flips to a solid white bar
   with a DARK logo once the reader starts scrolling (.is-scrolled added by hero.js). */
@media (max-width: 999px) {
	.home #header.ct-header,
	.blog #header.ct-header {
		position: fixed;
		left: 0;
		right: 0;
		background: transparent;
		transition: background-color 0.25s ease;
	}

	/* Blocksy paints the bar background on the inner row, not on #header. */
	.home #header.ct-header [data-row="middle"],
	.blog #header.ct-header [data-row="middle"] {
		background: transparent !important;
		box-shadow: none !important;
		transition: background-color 0.25s ease;
	}

	.home #header.ct-header .site-title a,
	.blog #header.ct-header .site-title a {
		color: #fff !important;
		text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
		transition: color 0.25s ease;
	}
	.home #header.ct-header .ct-header-trigger,
	.blog #header.ct-header .ct-header-trigger {
		filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.45));
	}
	.home #header.ct-header .ct-header-trigger svg,
	.home #header.ct-header .ct-header-trigger svg *,
	.blog #header.ct-header .ct-header-trigger svg,
	.blog #header.ct-header .ct-header-trigger svg * {
		fill: none !important;
		stroke: #fff !important;
		transition: stroke 0.25s ease;
	}

	/* scrolled state — solid white bar, dark logo + hamburger */
	.home #header.ct-header.is-scrolled,
	.blog #header.ct-header.is-scrolled {
		background: var(--e-bg);
	}
	.home #header.ct-header.is-scrolled [data-row="middle"],
	.blog #header.ct-header.is-scrolled [data-row="middle"] {
		background: var(--e-bg) !important;
	}
	.home #header.ct-header.is-scrolled .site-title a,
	.blog #header.ct-header.is-scrolled .site-title a {
		color: var(--e-ink) !important;
		text-shadow: none;
	}
	.home #header.ct-header.is-scrolled .ct-header-trigger,
	.blog #header.ct-header.is-scrolled .ct-header-trigger {
		filter: none;
	}
	.home #header.ct-header.is-scrolled .ct-header-trigger svg,
	.home #header.ct-header.is-scrolled .ct-header-trigger svg *,
	.blog #header.ct-header.is-scrolled .ct-header-trigger svg,
	.blog #header.ct-header.is-scrolled .ct-header-trigger svg * {
		fill: none !important;
		stroke: #3a4f66 !important;
	}
}

/* Lead photo butts right up against the masthead on mobile/tablet — no gap.
   Matches the overlay-header breakpoint (999px) so the photo always reaches the top. */
@media (max-width: 999px) {
	.site-main > .ct-container {
		padding-top: 0 !important;
	}
}

/* ---------------------------------------------------------------
   Mobile off-canvas menu — full-screen warm-paper overlay with a
   large Fraunces serif nav (editorial / magazine feel).
--------------------------------------------------------------- */
#offcanvas.ct-panel {
	width: 100% !important;
}

#offcanvas .ct-panel-inner {
	width: 100% !important;
	max-width: none !important;
	background: #f6f2ea !important; /* warm paper */
	padding: 0 !important;
	display: flex;
	flex-direction: column;
}

/* Desktop: present the panel as a right-hand drawer over a dim backdrop,
   reusing the mobile menu content. */
@media (min-width: 1000px) {
	#offcanvas.ct-panel {
		display: flex !important;
		justify-content: flex-end;
		background: rgba(20, 18, 16, 0.45) !important;
	}
	#offcanvas .ct-panel-inner {
		width: 460px !important;
		max-width: 92vw !important;
		height: 100%;
		box-shadow: -16px 0 50px rgba(0, 0, 0, 0.22);
	}
	#offcanvas .ct-panel-content[data-device="mobile"] .ct-panel-content-inner {
		padding: 2rem;
	}
	#offcanvas .ct-menu-link {
		font-size: 2rem !important;
	}
}

/* Top row: wordmark left, close right */
#offcanvas .ct-panel-actions {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.35rem;
	border-bottom: 1px solid var(--e-line);
}
#offcanvas .ct-panel-actions::before { content: none !important; }
.oc-wordmark {
	font-family: var(--e-sans);
	font-weight: 500;
	font-size: 1.6rem;
	letter-spacing: 0.01em;
	line-height: 1;
	color: var(--e-ink);
}
#offcanvas .ct-toggle-close {
	color: var(--e-ink) !important;
	opacity: 1 !important;
}
#offcanvas .ct-toggle-close .ct-icon {
	width: 16px;
	height: 16px;
	fill: var(--e-ink) !important;
}

/* Hide the empty desktop content variant on mobile */
#offcanvas .ct-panel-content[data-device="desktop"] {
	display: none !important;
}

/* Content area fills the screen; footer pins to the bottom */
#offcanvas .ct-panel-content[data-device="mobile"] {
	flex: 1 1 auto;
	display: flex;
}
#offcanvas .ct-panel-content[data-device="mobile"] .ct-panel-content-inner {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2rem 1.5rem;
}

#offcanvas .mobile-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#offcanvas .ct-menu-link {
	display: inline-block;
	font-family: var(--e-display) !important;
	font-weight: 600 !important;
	font-size: clamp(2.1rem, 9vw, 2.9rem) !important;
	line-height: 1.18;
	letter-spacing: -0.02em;
	text-transform: lowercase;
	color: var(--e-ink) !important;
	padding: 0.22em 0;
	text-decoration: none;
}
#offcanvas .ct-menu-link::first-letter {
	text-transform: uppercase;
}
#offcanvas .ct-menu-link:hover,
#offcanvas .current-menu-item > .ct-menu-link {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* Search field at the top of the menu */
.oc-search {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 1.2rem 1.5rem 0;
	padding: 0.72rem 1rem;
	border: 1px solid #d8d2c8;
}
.oc-search input {
	flex: 1 1 auto;
	border: none;
	background: transparent;
	padding: 0.1rem 0;
	font-family: var(--e-sans);
	font-size: 0.82rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--e-ink);
	-webkit-appearance: none;
	appearance: none;
}
.oc-search input:focus {
	outline: none;
}
.oc-search input::placeholder {
	color: var(--e-muted);
}
.oc-search button,
.oc-search button:hover,
.oc-search button:focus,
.oc-search button:active {
	display: flex;
	padding: 0;
	margin: 0;
	border: none !important;
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	color: var(--e-ink) !important;
	cursor: pointer;
}
.oc-search button svg {
	width: 18px;
	height: 18px;
	color: var(--e-ink);
}

/* Newsletter signup box (journal.hr style) */
.oc-newsletter {
	padding: 1.5rem 1.5rem 0.4rem;
	border-top: 1px solid var(--e-line);
}
.oc-newsletter__title {
	margin: 0 0 0.3rem;
	font-family: var(--e-sans);
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.005em;
	color: var(--e-ink);
}
.oc-newsletter__sub {
	margin: 0 0 0.95rem;
	font-family: var(--e-sans);
	font-size: 0.92rem;
	line-height: 1.4;
	color: var(--e-muted);
}
.oc-newsletter__form {
	display: flex;
	align-items: stretch;
	gap: 0.5rem;
}
.oc-newsletter__form input {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid #d8d2c8;
	background: #fff;
	padding: 0.72rem 0.9rem;
	font-family: var(--e-sans);
	font-size: 0.92rem;
	color: var(--e-ink);
	-webkit-appearance: none;
	appearance: none;
}
.oc-newsletter__form input:focus {
	outline: none;
	border-color: var(--e-ink);
}
.oc-newsletter__form input::placeholder {
	color: var(--e-muted);
}
.oc-newsletter__form button,
.oc-newsletter__form button:hover,
.oc-newsletter__form button:focus,
.oc-newsletter__form button:active {
	flex: none;
	width: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--e-ink) !important;
	background: var(--e-ink) !important;
	background-color: var(--e-ink) !important;
	color: #fff !important;
	box-shadow: none !important;
	cursor: pointer;
}
.oc-newsletter__form button svg {
	width: 20px;
	height: 20px;
}

/* Footer: social icons + copyright */
.oc-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	padding: 1.4rem 1.5rem;
}
.oc-social {
	display: flex;
	justify-content: center;
	gap: 0.9rem;
}
.oc-social a {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #d8d2c8;
	border-radius: 50%;
	color: var(--e-ink);
	transition: border-color 0.2s ease;
}
.oc-social a:hover {
	border-color: var(--e-ink);
}
.oc-social svg {
	width: 18px;
	height: 18px;
}
.oc-copy {
	font-family: var(--e-sans);
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--e-muted);
}

/* Gentle fade-up stagger when the panel opens */
#offcanvas .menu-item {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
#offcanvas.active .menu-item {
	opacity: 1;
	transform: none;
}
#offcanvas.active .menu-item:nth-child(1) { transition-delay: 0.05s; }
#offcanvas.active .menu-item:nth-child(2) { transition-delay: 0.11s; }
#offcanvas.active .menu-item:nth-child(3) { transition-delay: 0.17s; }
#offcanvas.active .menu-item:nth-child(4) { transition-delay: 0.23s; }

/* ---------------------------------------------------------------
   Site footer (The Cut style) — replaces Blocksy's default footer
---------------------------------------------------------------- */
#footer.ct-footer {
	display: none !important;
}

.site-footer-42 {
	background: var(--e-bg);
	border-top: 1px solid var(--e-line);
	padding: 3.25rem 1.5rem 2.75rem;
}
.footer-42__inner {
	max-width: 1100px;
	margin: 0 auto;
	text-align: center;
}
.footer-42__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1.4rem;
	margin-bottom: 1.7rem;
}
.footer-42__logo {
	font-family: var(--e-sans);
	font-weight: 500;
	font-size: 1.9rem;
	letter-spacing: 0.01em;
	line-height: 1;
	text-transform: lowercase;
	color: var(--e-ink);
	text-decoration: none;
}
.footer-42__cats a {
	font-family: var(--e-sans);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 0.84rem;
	font-weight: 600;
	color: var(--e-ink);
	text-decoration: none;
}
.footer-42__cats a + a::before {
	content: "|";
	display: inline-block;
	margin: 0 0.85rem;
	color: #c9c2b6;
	font-weight: 400;
	text-decoration: none;
}
.footer-42__social {
	display: flex;
	justify-content: center;
	gap: 0.85rem;
	margin-bottom: 1.9rem;
}
.footer-42__social a {
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #d8d2c8;
	border-radius: 50%;
	color: var(--e-ink);
	transition: border-color 0.2s ease;
}
.footer-42__social a:hover {
	border-color: var(--e-ink);
}
.footer-42__social svg {
	width: 18px;
	height: 18px;
}
.footer-42__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.7rem 1.7rem;
	margin-bottom: 1.6rem;
}
.footer-42__links a {
	font-family: var(--e-sans);
	text-transform: uppercase;
	letter-spacing: 0.13em;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--e-ink);
	text-decoration: none;
}
.footer-42 a,
.site-footer-42 a:hover {
	color: var(--e-ink);
}
.footer-42__logo:hover,
.footer-42__cats a:hover,
.footer-42__links a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.footer-42__copy {
	font-family: var(--e-sans);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.66rem;
	color: var(--e-muted);
}
/* Discreet studio credit in the footer's bottom row: a small "Powered by"
   label beside the Rubycode monogram, linking to rubycode.co. Muted to match
   the copyright line it sits next to, a touch brighter on hover. */
.footer-42__bottom {
	position: relative;
	margin-top: 1.6rem;
}
.footer-42__bottom .footer-42__copy {
	text-align: center;
	/* The trailing tracking, given back, as on the headings above. */
	padding-left: 0.14em;
}
/* Absolute so the copyright stays optically centred in the footer rather than
   being pushed off-centre by the credit sitting beside it. Which is why the
   bottom row has to stay inside .footer-42__inner: that column is what gives
   right: 0 the same edge the links above it end on. Outside the column it
   reaches the window instead, and the credit strands itself further into the
   margin the wider the screen gets. */
.footer-42__credit {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	text-decoration: none;
}
/* Match the copyright line exactly: same font, size, spacing and colour. */
.footer-42__credit-label {
	font-family: var(--e-sans);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.66rem;
	color: var(--e-muted);
}
.footer-42__credit-logo {
	width: 16px;
	height: 16px;
	display: block;
	opacity: 0.85;
	transition: opacity 0.2s ease;
}
.footer-42__credit:hover .footer-42__credit-logo {
	opacity: 1;
}
/* Too narrow to place the credit beside the copyright, so it stacks under it. */
@media (max-width: 700px) {
	.footer-42__credit {
		position: static;
		transform: none;
		justify-content: center;
		margin-top: 0.7rem;
	}
	.footer-42__bottom {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}

/* ---------------------------------------------------------------
   Category / archive pages — follow the homepage design: the section
   name in the header (desktop) or as a big serif wordmark (mobile), a
   lead story with the headline box straddling the photo (like the
   homepage lead), then the remaining stories in a grid.
---------------------------------------------------------------- */
/* No pagination on the home page */
.home .ct-pagination { display: none !important; }

.archive .ct-title-label { display: none; } /* drop the "Kategorija" prefix */
/* Hide Blocksy's default page title — the section name is shown in the header
   (desktop) or via our own big serif wordmark (mobile). */
.archive .hero-section { display: none; }
/* The category name is obvious, so the per-article category eyebrow is
   redundant — hide it. */
.archive .entries .entry-card .entry-meta[data-id="meta_1"] { display: none !important; }

/* Section name in the header, on the right (injected by hero.js, desktop). */
.header-cat-title {
	font-family: var(--e-sans);
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-size: 1.95rem;
	font-weight: 500;
	color: var(--e-ink);
	white-space: nowrap;
}

/* Big serif category wordmark — shown on mobile, hidden on desktop (where the
   name lives in the header). */
.archive-cat-title {
	text-align: center;
	font-family: var(--e-serif);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	line-height: 0.92;
	color: var(--e-ink);
	font-size: clamp(2.6rem, 8vw, 5.5rem);
	margin: 0.5rem 0 2.4rem;
}

.archive .entry-card .ct-media-container img { width: 100%; height: 100%; object-fit: cover; }

/* Category lead eyebrow (The Cut): TAG in ink, a hairline pipe, DATE in mint. */
.arch-lead__kicker {
	display: flex;
	align-items: baseline;
	gap: 0.45em;
	margin: 0 0 0.5rem;
	font-family: var(--e-sans);
	text-transform: uppercase;
	letter-spacing: 0.13em;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
}
.arch-lead__tag { color: var(--e-muted); font-weight: 700; }
.arch-lead__sep { color: var(--e-line); font-weight: 400; }
.arch-lead__date { color: var(--e-accent); }

/* ---- Mobile / tablet (single column) ---- */
@media (max-width: 999px) {
	/* Wider side gutters (The Cut) for the article feed. The lead breaks out to
	   full-bleed via its negative margin, so it ignores this padding. */
	.archive .entries[data-layout="grid"] {
		display: block;
		padding-left: 1.15rem;
		padding-right: 1.15rem;
	}

	/* Section name: a big serif wordmark at the top of the page, above the lead. */
	.archive .archive-cat-title {
		display: block;
		margin: 1.4rem 0 1.7rem;
	}

	/* Lead (The Cut): a photo on top, then a TAG | DATE eyebrow and a big serif
	   headline with the first sentence running inline after it — no author. */
	.archive .entries[data-layout="grid"] > .entry-card:first-child {
		display: block;
		position: static;
		margin: 0 0 2rem;
		padding: 0 0 2rem !important;
		border-bottom: 1px solid var(--e-line);
	}
	.archive .entries > .entry-card:first-child .ct-media-container {
		display: block;
		aspect-ratio: 5 / 4;
		margin: 0 0 0.9rem;
		border-radius: 0;
		overflow: hidden;
	}
	.archive .entries > .entry-card:first-child .hero-overlay {
		display: block;
		position: static;
		width: auto;
		background: none;
		padding: 0;
		text-align: left;
	}
	.archive .entries > .entry-card:first-child .hero-overlay .entry-title {
		display: inline;
		margin: 0;
		font-family: var(--e-serif);
		font-size: clamp(1.1rem, 4.3vw, 1.4rem);
		line-height: 1.16;
		font-weight: var(--e-display-weight);
	}
	.archive .entries > .entry-card:first-child .hero-overlay .entry-title a { color: var(--e-ink); text-decoration: none; }
	.archive .entries > .entry-card:first-child .hero-overlay .entry-title a::after { content: " "; }
	.archive .entries > .entry-card:first-child .hero-overlay .entry-excerpt {
		display: inline;
		font-family: var(--e-serif);
		font-size: clamp(1.1rem, 4.3vw, 1.4rem);
		line-height: 1.16;
		font-weight: 400;
		color: var(--e-ink);
	}
	.archive .entries > .entry-card:first-child .hero-overlay .entry-excerpt p { display: inline; margin: 0; }

	/* Remaining stories: a left-aligned feed like The Cut — photo on top, a small
	   mint date kicker, then a bold serif headline with the first sentence running
	   inline after it (no author). */
	.archive .entries[data-layout="grid"] > .entry-card:not(:first-child) {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		text-align: left;
		gap: 0;
		margin: 0 0 2rem;
		padding: 0 0 2rem !important;
		border-bottom: 1px solid var(--e-line);
	}
	.archive .entries[data-layout="grid"] > .entry-card:not(:first-child):last-child {
		border-bottom: none;
		margin-bottom: 0;
	}
	.archive .entry-card:not(:first-child) .ct-media-container {
		order: -1;
		width: 100%;
		aspect-ratio: 4 / 3;
		margin: 0 0 0.4rem;
		overflow: hidden;
	}
	/* "TAG | DATE" eyebrow above the headline (The Cut): tag in ink, date in mint. */
	.archive .entry-card:not(:first-child) .entry-meta[data-id="meta_2"] {
		order: 0;
		display: flex;
		justify-content: flex-start;
		align-items: baseline;
		gap: 0.45em;
		margin: 0 0 0.4rem;
		padding: 0;
		line-height: 1;
		font-family: var(--e-sans);
		text-transform: uppercase;
		letter-spacing: 0.13em;
		font-size: 0.62rem;
		font-weight: 700;
	}
	.archive .entry-card:not(:first-child) .entry-meta[data-id="meta_2"] li { list-style: none; margin: 0; padding: 0; }
	.archive .entry-card:not(:first-child) .entry-meta[data-id="meta_2"] time { line-height: 1; }
	.archive .entry-card:not(:first-child) .entry-meta[data-id="meta_2"] .meta-tag { color: var(--e-muted); font-weight: 700; }
	.archive .entry-card:not(:first-child) .entry-meta[data-id="meta_2"] .meta-sep { color: var(--e-line); font-weight: 400; }
	.archive .entry-card:not(:first-child) .entry-meta[data-id="meta_2"] .meta-date,
	.archive .entry-card:not(:first-child) .entry-meta[data-id="meta_2"] .meta-date * {
		color: var(--e-accent) !important;
	}
	.archive .entry-card:not(:first-child) .arch-card__text {
		order: 1;
		text-align: left;
		max-width: none;
		margin: 0;
	}
	.archive .entry-card:not(:first-child) .entry-title {
		display: inline;
		font-family: var(--e-serif);
		font-size: 1.35rem;
		line-height: 1.24;
		font-weight: var(--e-display-weight);
		margin: 0;
	}
	.archive .entry-card:not(:first-child) .entry-title a { color: var(--e-ink); text-decoration: none; }
	.archive .entry-card:not(:first-child) .entry-title a::after { content: " "; }
	.archive .entry-card:not(:first-child) .entry-excerpt {
		display: inline;
		font-family: var(--e-serif);
		font-size: 1.35rem;
		line-height: 1.24;
		font-weight: 400;
		color: var(--e-ink);
		margin: 0;
	}
	.archive .entry-card:not(:first-child) .entry-excerpt p { display: inline; margin: 0; }
}

/* ---- Desktop: section name in the header, a homepage-style lead (headline
   box straddling the photo), then the rest of the stories in a 2-column grid. ---- */
@media (min-width: 1000px) {
	/* Section name lives in the header, so hide the pipe nav + the body title. */
	.archive #header [data-device="desktop"] #header-menu-1 { display: none !important; }
	.archive .archive-cat-title { display: none; }
	/* Nudge the logo in from the left edge and the header name + menu icon in
	   from the right so they sit closer together (The Cut). */
	.archive #header [data-device="desktop"] [data-column="start"] {
		transform: translateX(3rem);
	}
	.archive #header [data-device="desktop"] [data-column="end"] [data-items="primary"] {
		transform: translateX(-3rem);
	}

	.archive .entries[data-layout="grid"] {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 3rem;
		row-gap: 3.5rem;
		max-width: 1000px;
		margin: 0 auto;
		padding: 0;
	}

	/* Lead story (The Cut): a wide photo, then a TAG | DATE eyebrow and a big
	   serif headline with the first sentence inline after it — left-aligned,
	   no author. Sits as a centred column above the two-column grid. */
	.archive .entries[data-layout="grid"] > .entry-card:first-child {
		grid-column: 1 / -1;
		display: block;
		position: static;
		width: 100%;
		max-width: 760px;
		margin: 0 auto 3.5rem;
		padding: 0 0 3.5rem;
		border-bottom: 1px solid var(--e-line);
		text-align: left;
	}
	.archive .entry-card:first-child .ct-media-container {
		display: block;
		width: 100%;
		aspect-ratio: 5 / 4;
		margin: 0 0 1.1rem;
		overflow: hidden;
	}
	.archive .entry-card:first-child .hero-overlay {
		display: block;
		position: static;
		width: auto;
		background: none;
		padding: 0;
		text-align: left;
	}
	.archive .entry-card:first-child .hero-overlay .entry-title {
		display: inline;
		margin: 0;
		font-family: var(--e-serif);
		font-weight: var(--e-display-weight);
		font-size: 2.1rem;
		line-height: 1.14;
	}
	.archive .entry-card:first-child .hero-overlay .entry-title a { color: var(--e-ink); text-decoration: none; }
	.archive .entry-card:first-child .hero-overlay .entry-title a::after { content: " "; }
	.archive .entry-card:first-child .hero-overlay .entry-excerpt {
		display: inline;
		margin: 0;
		font-family: var(--e-serif);
		font-weight: 400;
		font-size: 2.1rem;
		line-height: 1.14;
		color: var(--e-ink);
	}
	.archive .entry-card:first-child .hero-overlay .entry-excerpt p { display: inline; margin: 0; }

	/* Remaining stories: two-column grid — photo on top, a "TAG | DATE" eyebrow,
	   then a headline styled like the lead "headline" article (left-aligned, bold
	   serif with the first sentence inline in the same ink colour). Font size
	   stays as-is. */
	.archive .entries[data-layout="grid"] > .entry-card:not(:first-child) {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		gap: 0;
		margin: 0;
		padding: 0;
		border: none !important;
	}
	.archive .entry-card:not(:first-child) .ct-media-container {
		order: -1;
		width: 100%;
		aspect-ratio: 4 / 3;
		margin: 0 0 0.9rem;
		overflow: hidden;
	}
	/* "TAG | DATE" eyebrow above the headline (matches the lead): tag in muted,
	   a hairline pipe, date in mint. */
	.archive .entry-card:not(:first-child) .entry-meta[data-id="meta_2"] {
		order: 0;
		display: flex;
		justify-content: flex-start;
		align-items: baseline;
		gap: 0.45em;
		margin: 0 0 0.5rem;
		padding: 0;
		line-height: 1;
		font-family: var(--e-sans);
		text-transform: uppercase;
		letter-spacing: 0.13em;
		font-size: 0.72rem;
		font-weight: 700;
	}
	.archive .entry-card:not(:first-child) .entry-meta[data-id="meta_2"] li { list-style: none; margin: 0; padding: 0; }
	.archive .entry-card:not(:first-child) .entry-meta[data-id="meta_2"] time { line-height: 1; color: var(--e-accent); }
	.archive .entry-card:not(:first-child) .entry-meta[data-id="meta_2"] .meta-tag { color: var(--e-muted); font-weight: 700; }
	.archive .entry-card:not(:first-child) .entry-meta[data-id="meta_2"] .meta-sep { color: var(--e-line); font-weight: 400; }
	/* Headline + first sentence run inline (homepage article style). */
	.archive .entry-card:not(:first-child) .arch-card__text {
		order: 1;
		text-align: left;
		max-width: 42ch;
		margin: 0;
	}
	.archive .entry-card:not(:first-child) .entry-title {
		display: inline;
		margin: 0;
		font-family: var(--e-serif);
		font-weight: var(--e-display-weight);
		font-size: 1.4rem;
		line-height: 1.14;
	}
	.archive .entry-card:not(:first-child) .entry-title a { color: var(--e-ink); text-decoration: none; }
	.archive .entry-card:not(:first-child) .entry-title a::after { content: " "; }
	.archive .entry-card:not(:first-child) .entry-excerpt {
		display: inline;
		margin: 0;
		font-family: var(--e-serif);
		font-weight: 400;
		font-size: 1.4rem;
		line-height: 1.14;
		color: var(--e-ink);
	}
	.archive .entry-card:not(:first-child) .entry-excerpt p { display: inline; margin: 0; }
}

/* ============================================================
   FOTO-GALERIJE — thumbnail grid in the article + click-to-open lightbox
   (each photo shown counts as a GA4 view; no page reloads)
   ============================================================ */

/* Grid photos hint they're clickable. */
.fg-gallery.is-clickable img { cursor: zoom-in; }
.fg-gallery .wp-block-image,
.fg-gallery figure.wp-block-image { position: relative; }
.fg-gallery.is-clickable img { transition: opacity 0.15s ease; }
.fg-gallery.is-clickable img:hover { opacity: 0.9; }

/* Lock scroll behind the lightbox. */
body.fg-lock { overflow: hidden; }

/* Full-screen lightbox slideshow. */
.fg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(12, 12, 12, 0.94);
}
.fg-lightbox.is-open { display: flex; }

.fg-lightbox .fg-lb-top {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.2rem;
	z-index: 2;
}
.fg-lightbox .fg-lb-counter {
	font-family: var(--e-sans);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
}
.fg-lightbox .fg-lb-close {
	border: 0;
	background: none;
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	padding: 0 0.2rem;
	opacity: 0.85;
}
.fg-lightbox .fg-lb-close:hover { opacity: 1; }

.fg-lightbox .fg-lb-figure {
	margin: 0;
	max-width: 92vw;
	max-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.8rem;
	padding: 3.5rem 0 2.5rem;
}
.fg-lightbox .fg-lb-img {
	display: block;
	max-width: 100%;
	max-height: 82vh;
	width: auto;
	height: auto;
	object-fit: contain;
}
.fg-lightbox .fg-lb-cap {
	max-width: 46rem;
	text-align: center;
	font-family: var(--e-sans);
	font-size: 0.82rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.78);
}

.fg-lightbox .fg-lb-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 1.7rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}
.fg-lightbox .fg-lb-prev { left: 1.2rem; }
.fg-lightbox .fg-lb-next { right: 1.2rem; }
.fg-lightbox .fg-lb-arrow:hover { background: rgba(255, 255, 255, 0.24); }
.fg-lightbox .fg-lb-arrow.is-off { display: none; }

@media (max-width: 999px) {
	.fg-lightbox .fg-lb-figure { padding: 3rem 0 2rem; max-width: 100vw; }
	.fg-lightbox .fg-lb-img { max-height: 78vh; }
	.fg-lightbox .fg-lb-arrow { width: 42px; height: 42px; font-size: 1.4rem; }
	.fg-lightbox .fg-lb-prev { left: 0.5rem; }
	.fg-lightbox .fg-lb-next { right: 0.5rem; }
}