/*
Theme Name:     Za Srce Gre
Theme URI:      https://grit.si
Description:    Generatepress child theme.
Author:         Grit, Gregor Grešak, s.p.
Author URI:     https://grit.si
Template:       generatepress
Version:        0.3.0
*/

/* /odklop-i/ page: footer — full-width breakout, no bottom gap, visual separator */
.odklop-i-footer {
	margin-left: calc(-100vw / 2 + 100% / 2);
	margin-right: calc(-100vw / 2 + 100% / 2);
	max-width: 100vw;
	width: auto;
	margin-bottom: -40px;
	border-top: 4px solid;
	border-image: linear-gradient(to right, #009941, #fcc300, #db0814) 1;
}

/* inner alignfull's own GP calc self-corrects to 0 inside a full-width parent */
.odklop-i-footer .alignfull {
	padding: 24px 40px;
	gap: 40px;
}

.odklop-i-footer > *:last-child {
	margin-bottom: 0;
}

/* /odklop-i/ page: featured image full-width, flush to top */
body.page-id-20622 .featured-image.page-header-image {
	max-width: 100%;
	margin: 0;
	height: 33.33vh;
	overflow: hidden;
	border-radius: 0; /* full-bleed hero — no card rounding */
	box-shadow: none; /* …and no framing shadow on an edge-to-edge banner */
}

body.page-id-20622 .featured-image.page-header-image img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: auto; /* fill the fixed-height hero, not the 4:1 stripe */
	object-fit: cover;
	object-position: center center;
	border-radius: 0;
}

/* Category archive: intro page content rendered above the posts loop */
.category-intro {
	margin-bottom: 2.5em;
	padding-bottom: 1.5em;
	border-bottom: 2px solid;
	border-image: linear-gradient(to right, #009941, #fcc300, #db0814) 1;
}

.category-intro > *:last-child {
	margin-bottom: 0;
}

nav.main-navigation {
	border-bottom: 6px solid; /* thickness */
	border-image: linear-gradient(
		to right,
		#009941,
		#fcc300,
		#db0814
	) 1;
}

nav.main-navigation a {
	font-size:17px;
 }

/* ── Rounded-corner softening ───────────────────────────────────────────────
 * Subtle scale: soften interactive + container surfaces, keep the tri-color
 * gradient accents (nav border, .category-intro) crisp on purpose.
 * NOTE: GenerateBlocks buttons/containers store radius per block — global CSS
 * does not reach them; set those via a GB Global Style / per block instead. */
:root {
	/* Brand palette — mirrors GP Global Colors (zasrce-green/yellow/red) */
	--zasrce-green:  #009941;
	--zasrce-yellow: #fcc300;
	--zasrce-red:    #db0814;

	--radius-sm: 4px;  /* inputs, search, chips */
	--radius-md: 8px;  /* buttons, notices, small cards */
	--radius-lg: 12px; /* thumbnails, large containers */

	/* Content sidebar: a surface just off the white article, so the column
	 * reads as a distinct panel rather than a continuation of the prose. */
	--sidebar-surface: #f5f7f5;
	--sidebar-border:  #e2e7e2;
}

/* Buttons */
button,
.button,
.wp-block-button__link,
.wp-block-search__button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border-radius: var(--radius-md);
}

/* Form fields */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select,
.wp-block-search__input {
	border-radius: var(--radius-sm);
}

/* Rounded corners on content, featured and widget images site-wide. */
.entry-content img,
.wp-block-image img,
.post-image img,
.wp-block-post-featured-image img,
.featured-image img,
.widget img {
	border-radius: var(--radius-lg);
}

/* …but keep these sharp: the site logo (brand mark) and inline emoji. */
img.emoji,
.site-logo img,
.header-image {
	border-radius: 0;
}

/* Page featured image → uniform banner stripe.
 * GeneratePress prints the page featured image above the content as a full-
 * content-width block. Force every page's hero into the same 4:1 stripe as
 * /ateroskleroza/ (2400×600), centre-cropping any other ratio, and round the
 * corners to match the card system. Editorial swaps in better-cropped art
 * where the automatic centre crop lands badly.
 * The odklop-i landing page (id 20622) keeps its own full-bleed hero — its
 * page-scoped rules above/below override this. */
.featured-image.page-header-image {
	overflow: hidden;
	border-radius: var(--radius-lg);
	/* Discreet lift so the stripe reads as a framed banner even when the image
	 * itself has a white background (edges would otherwise vanish). */
	box-shadow: 0 2px 8px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
}

.featured-image.page-header-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 1;
	height: auto;
	object-fit: cover;
	object-position: center;
	border-radius: var(--radius-lg);
}

/* ── Main navigation enhancements ───────────────────────────────────────────
 * Bolder top-level items, an animated brand-green underline for hover/current
 * (complements the gradient bar without repeating it), and softened dropdowns
 * matching the card system (radius + soft shadow). */
.main-navigation .main-nav > ul > li > a {
	font-weight: 600;
	position: relative;
}

/* Animated green underline. left/right inset = GP's default nav item padding
 * (20px); if that padding is changed, match it here. Top-level items only. */
.main-navigation .main-nav > ul > li > a::after {
	content: "";
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 6px;
	height: 3px;
	border-radius: 2px;
	background-color: var(--accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.2s ease;
}

.main-navigation .main-nav > ul > li:hover > a::after,
.main-navigation .main-nav > ul > li.current-menu-item > a::after,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a::after {
	transform: scaleX(1);
}

/* Softened dropdowns: rounded + soft shadow, consistent with the cards.
 * overflow:hidden clips item-hover backgrounds to the radius (note: would clip
 * a 3rd-level fly-out menu — current menu is 2 levels, so safe). */
.main-navigation ul ul {
	border: none;
	border-radius: var(--radius-md);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

/* Submenu item hover/current: subtle green tint + brand-green text. */
.main-navigation .main-nav ul ul li a:hover,
.main-navigation .main-nav ul ul li.current-menu-item > a {
	background-color: color-mix(in srgb, var(--accent) 8%, transparent);
	color: var(--accent);
}

/* Post cards — SHARED between the archive grid (GP float grid, .generate-columns
 * / .inside-article) and the front-page news grid (core Query Loop, .home-news /
 * .wp-block-post). Each rule lists both selectors so the cards are guaranteed
 * identical and stay in sync: edit once, both contexts update.
 *
 * Equal-height flex cards: the grid item stretches to row height, and the card
 * being a flex column lets us align inner blocks and pin the footer to the
 * bottom. White surface lifts off the light-gray page background; radius matches
 * the thumbnails; soft shadow + subtle hover lift keep it clean, not heavy. */
.generate-columns .inside-article,
.home-news .wp-block-post {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--radius-lg);
	padding: 1.25rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* The archive card sits INSIDE the flex column item (.generate-columns), so it
 * needs height:100% to fill the stretched column. The front-grid card IS the
 * grid item — it already stretches to the row height via the grid's default
 * align-items:stretch, so height:100% there is redundant and, worse, makes the
 * editor's grid preview miscompute heights and overlap the cards. */
.generate-columns .inside-article {
	height: 100%;
}

.generate-columns .inside-article:hover,
.home-news .wp-block-post:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

/* Archive grid: smaller, heavier post titles. Full-size titles look oversized
 * in the 3-col layout; weight 600 keeps presence at 22px. Single-post h1 is
 * untouched (.generate-columns only exists in the grid layout).
 * Clamp to a fixed 2-line block (line-clamp caps long titles, min-height
 * reserves the space for short ones) so the excerpt below always starts at the
 * same vertical position across cards. */
.generate-columns .entry-title,
.home-news .wp-block-post-title {
	font-size: 1.375rem; /* 22px */
	line-height: 1.3;
	font-weight: 600;
	margin-top: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em; /* 2 × line-height */
}

.home-news .wp-block-post-title a {
	color: var(--contrast);
	text-decoration: none;
}

.home-news .wp-block-post-title a:hover,
.home-news .wp-block-post-title a:focus {
	color: var(--accent);
}

/* Archive grid: clamp the excerpt to 4 lines with an ellipsis so wildly
 * varying excerpt lengths don't make cards uneven. Inner <p> margin zeroed so
 * the clamp measures only text lines. */
.generate-columns .entry-summary,
.home-news .wp-block-post-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* core/post-excerpt's own default style sets margin-top/bottom to
 * var(--wp--style--block-gap), which theme.json fixes at 2.5rem — the archive
 * card has no such rule, so without this override the front-grid excerpt gets
 * 40px of space above and below it that the archive excerpt never had. */
.home-news .wp-block-post-excerpt {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.generate-columns .entry-summary p,
.home-news .wp-block-post-excerpt p {
	margin-bottom: 0;
}

/* Footer meta sticks to the card bottom so cards of unequal text length still
 * line up their footers. padding-top (not margin) adds breathing room above it
 * without overriding the margin-top:auto that does the pinning. */
.generate-columns .inside-article > footer,
.home-news .wp-block-post > .home-news__footer {
	margin-top: auto;
	padding-top: 1.25em;
}

/* ── Front-page block rhythm ─────────────────────────────────────────────────
 * GeneratePress is a classic theme, so .entry-content is NOT a block-layout
 * container — WP's blockGap never spaces the top-level blocks, and plain blocks
 * (images, groups, …) collapse against each other. This owl selector restores a
 * consistent vertical gap between every root block on the front page. Adjacent
 * vertical margins collapse, so it never doubles up with a block's own margin
 * (e.g. .hero-spot below). Scoped to .home so regular posts/pages keep their
 * normal typographic spacing (paragraph/heading margins) untouched. */
.home .entry-content > * + * {
	margin-top: 2.5rem;
}

/* ── Hero spot (zasidrani članek) ────────────────────────────────────────────
 * Core Query Loop (sticky-only, 1 post). Built from a plain Group + the dynamic
 * core/post-featured-image + a Group overlay — NOT core/cover, whose hand-
 * authored save markup wouldn't pass the editor's block validator. The image
 * fills the card; the overlay is pinned to the bottom with a dark scrim. */
.hero-spot {
	margin-bottom: 2.5rem;
}

/* The card is the positioning context + the rounded, clipped frame. min-height
 * gives it size; the absolutely-filled image doesn't contribute height. */
.hero-spot__card {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-lg);
	min-height: 440px;
}

/* Featured image absolutely fills the whole card as the background. */
.hero-spot__card .wp-block-post-featured-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.hero-spot__card .wp-block-post-featured-image a,
.hero-spot__card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
}

.hero-spot__card .wp-block-post-featured-image img {
	object-fit: cover;
	border-radius: 0; /* the card clips; override the global rounded-image rule */
}

/* Text overlay: above the image, pinned to the bottom, dark bottom-up scrim for
 * legibility. */
.hero-spot__overlay {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	padding: clamp(1.25rem, 3vw, 2.25rem);
	color: #fff;
	background: linear-gradient(
		0deg,
		rgba(0, 0, 0, 0.78) 0%,
		rgba(0, 0, 0, 0.3) 55%,
		rgba(0, 0, 0, 0) 100%
	);
}

.hero-spot__cat,
.hero-spot__cat a {
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.8rem;
	font-weight: 600;
}

.hero-spot__cat {
	margin-bottom: 0.5rem;
}

.hero-spot .wp-block-post-title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	line-height: 1.15;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.hero-spot .wp-block-post-title a {
	color: #fff;
	text-decoration: none;
}

.hero-spot .wp-block-post-title a:hover,
.hero-spot .wp-block-post-title a:focus {
	text-decoration: underline;
}

.hero-spot .wp-block-post-excerpt {
	max-width: 60ch;
	margin-bottom: 1.25rem;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.hero-spot .wp-block-post-excerpt__excerpt {
	color: #fff;
}

.hero-spot__more {
	display: inline-block;
	background: var(--accent);
	color: #fff;
	padding: 0.6rem 1.4rem;
	border-radius: var(--radius-md);
	font-weight: 600;
	text-decoration: none;
}

.hero-spot__more:hover,
.hero-spot__more:focus {
	background: #007a33;
	color: #fff;
}

/* ── Tri barvni bloki pattern ────────────────────────────────────────────────
 * Each card (.barvni-blok) grows to fill the column so cards of unequal text
 * length stay the same height. The columns wrapper needs to be a flex container
 * for this to work (columns block is already flex by default). */
.tri-barvni-bloki .wp-block-column {
	display: flex;
	flex-direction: column;
}

.barvni-blok {
	flex: 1;
	display: flex;
	flex-direction: column;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Harden against GP's global .site-main .wp-block-group__inner-container rules
 * (40px padding + max-width + centering). When the group renders the legacy
 * inner-container wrapper, make IT the flex column that fills the card — so the
 * CTA still pins to the bottom — and cancel the inherited box metrics. Harmless
 * when the editor saves the modern flat (no inner-container) markup. */
.barvni-blok > .wp-block-group__inner-container {
	flex: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 24px;
}

.barvni-blok:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

/* Fixed 4:3 featured images for an even grid regardless of the uploaded image's
 * proportions. object-fit:cover crops, no distortion. Shared archive + front
 * grid; single-post / other featured images keep their natural ratio. */
.generate-columns .post-image img,
.home-news .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

/* ── Front-page news grid (.home-news) ───────────────────────────────────────
 * Core Query Loop (latest posts, sticky excluded so the hero isn't repeated).
 * The cards reuse the shared rules above; here we only set the grid container
 * and the bits the GP archive gets from its own markup (list reset, image
 * spacing, footer meta). Breakpoints mirror GP's float grid exactly:
 * 3-up >1024px, 2-up 768–1024px, 1-up ≤767px — so it collapses identically. */
/* The post-template carries WP's native grid layout (set in the pattern), which
 * lays out correctly in BOTH the editor and the front end. We only override the
 * column count + gap here to match GP's archive breakpoints exactly. */

.home-news .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

/* theme.json (blockGap) makes WP emit a global owl rule that stamps
 * `margin-block-start: 2.5rem` on every `.is-layout-flow > *` except the first.
 * The post-template carries `is-layout-flow`, so its card `<li>`s (which we lay
 * out as a grid above) inherit that top margin on all but the first card —
 * pushing cards 2+ down and leaving the first sitting higher. The grid `gap`
 * already owns the spacing, so zero the stray margin on the grid items. */
.home-news .wp-block-post-template > li {
	margin-top: 0;
}

@media (min-width: 768px) and (max-width: 1024px) {
	.home-news .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.home-news .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Featured image: inset within the card padding and fully rounded — same
 * treatment as the archive thumbnail (which sits inside .inside-article's
 * padding), not edge-to-edge. Just normalise the figure's default margins. */
.home-news .wp-block-post-featured-image {
	margin: 0 0 1rem;
}

/* Footer meta row: muted, small, date · category — mirrors the archive entry
 * meta. Pinned to the card bottom by the shared footer rule above.
 *
 * The group block renders an inner `.wp-block-group__inner-container` wrapper,
 * which GP globally centers + max-widths. So flex BOTH the group and that
 * wrapper (whichever holds the items), and cancel the inherited centering, so
 * the meta is a tight, left-aligned row instead of stacked + centered. */
.home-news__footer,
.home-news__footer > .wp-block-group__inner-container {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	align-items: center;
}

.home-news__footer > .wp-block-group__inner-container {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0; /* cancels GP's .site-main .wp-block-group__inner-container{padding:40px} */
}

.home-news__footer {
	color: var(--contrast-2);
	font-size: 0.85rem;
}

.home-news__footer .wp-block-post-terms {
	margin: 0;
}

.home-news__footer a {
	color: var(--contrast-2);
	text-decoration: none;
}

.home-news__footer a:hover,
.home-news__footer a:focus {
	color: var(--accent);
}

/* ── Content sidebar: a distinct column, not part of the article ─────────────
 * Client feedback: the widget column read as a continuation of the article.
 * Two causes: GP's separate-containers renders content and sidebar as white
 * boxes on a white page, so nothing marked the boundary; and each widget's
 * <h2 class="widget-title"> was styled like an article heading. Fix both —
 * lift the whole column onto its own tinted panel, and demote the titles to
 * brand eyebrow labels. Scoped to the content sidebars (.is-right/left-sidebar)
 * so the header and footer widget areas are untouched. Posts and pages alike. */
.is-right-sidebar .inside-right-sidebar,
.is-left-sidebar .inside-left-sidebar {
	background: var(--sidebar-surface);
	border: 1px solid var(--sidebar-border);
	border-radius: var(--radius-lg);
	padding: 1.5em 1.5em 0.5em;
}

/* Beside the article (desktop), drop the panel so its top edge meets the
 * article's first content. GP insets that content by 60px: .content-area main
 * carries margin-top:20px and .inside-article carries padding-top:40px. Below
 * GP's 768px sidebar breakpoint the column stacks, so no offset is wanted. */
@media (min-width: 769px) {
	.is-right-sidebar .inside-right-sidebar,
	.is-left-sidebar .inside-left-sidebar {
		margin-top: 60px;
	}
}

/* Dissolve the widgets into the panel: GP paints .sidebar .widget with the
 * white --base-3, which turned each one into a card floating on the tint. Make
 * them share the panel surface instead, so the column reads as one quiet aside
 * (matching the footer) rather than a stack of boxes. Modules are told apart by
 * whitespace + the green eyebrow titles, not chrome. */
.is-right-sidebar .widget,
.is-left-sidebar .widget {
	background: transparent;
	/* GP pads each widget 40px; with no widget box that's redundant with the
	 * panel's own inset, so zero it and let panel padding + margin do the work. */
	padding: 0;
}

.is-right-sidebar .widget + .widget,
.is-left-sidebar .widget + .widget {
	margin-top: 1.25em;
}

.is-right-sidebar .widget:last-child,
.is-left-sidebar .widget:last-child {
	margin-bottom: 0;
}

/* Widget titles → brand eyebrow: small, upper, letter-spaced, green. A sidebar
 * label is not an article heading, so it should not look like one. */
.is-right-sidebar .widget-title,
.is-left-sidebar .widget-title {
	margin-bottom: 0.75em;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--zasrce-green);
}

/* ── Site footer ─────────────────────────────────────────────────────────────
 * GP default footer had no theme styling: white-on-white (both .footer-widgets
 * and .site-info use --base-3), ragged widget images at native sizes, and plain
 * titles. This block gives it a distinct tinted surface, echoes the nav's
 * tri-color gradient as a top accent, equalizes the images into a tidy row, and
 * cleans up the copyright bar. Widget CONTENT is untouched (it's prod data). */

/* Lift the footer off the white page: subtle gray surface + brand gradient hairline
 * on top, mirroring the main-nav's bottom border so the page is bookended. */
.site-footer .footer-widgets {
	background-color: var(--base);
	border-top: 4px solid;
	border-image: linear-gradient(to right, #009941, #fcc300, #db0814) 1;
}

/* Even, top-aligned columns with real gutters instead of GP's floats, so the
 * three widget blocks share width and their contents can center cleanly. */
.footer-widgets .inside-footer-widgets {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
	align-items: stretch;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.footer-widgets [class*="footer-widget-"] {
	flex: 1 1 200px;
	float: none;
	width: auto;
	padding: 0;
	text-align: center;
}

/* Consistent, brand-tinted widget titles. */
.footer-widgets .widget-title {
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--contrast);
	margin: 0 0 0.9rem;
}

/* Tame the mismatched images: cap their height and center them so a tall
 * portrait cover, a square logo and a landscape card read as one tidy row. */
.footer-widgets .widget_media_image {
	margin-bottom: 1.25rem;
}

.footer-widgets .widget_media_image:last-child {
	margin-bottom: 0;
}

.footer-widgets .widget_media_image img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 150px;
	margin: 0 auto;
	border-radius: var(--radius-md);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.footer-widgets .widget_media_image a:hover img,
.footer-widgets .widget_media_image a:focus img {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* Text widgets (e.g. "Podarite 1 % dohodnine"): readable, muted, links in brand. */
.footer-widgets .textwidget {
	color: var(--contrast-2);
	font-size: 0.95rem;
	line-height: 1.5;
}

.footer-widgets .textwidget a {
	color: var(--accent);
	font-weight: 600;
}

/* Copyright bar: darker band that anchors the very bottom, centered and muted. */
.site-info {
	background-color: var(--contrast) !important;
	color: rgba(255, 255, 255, 0.7);
}

.site-info .inside-site-info {
	text-align: center;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.site-info,
.site-info .copyright-bar {
	font-size: 0.8rem;
}

.site-info a {
	color: rgba(255, 255, 255, 0.9);
}

.site-info a:hover,
.site-info a:focus {
	color: #fff;
}

@media (max-width: 768px) {
	.footer-widgets .inside-footer-widgets {
		gap: 1.75rem;
	}
}

/* ── Header CTA: heart-monitor donation button + quiet social row ───────────
 * Rendered on generate_after_header_content → sits in GP's right-hand header
 * slot (.inside-header is flex/space-between, so this block hugs the right).
 * Signature: the "Podprite nas" button is a tiny heart monitor — a heart with
 * an ECG pulse trailing from it; on hover the heart beats once (lub-dub).
 * Boldness is spent there; the social glyphs stay quiet beside it. */
.zasrce-header-cta {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	margin-left: auto; /* hug right even if it's the only flex item */
}

/* Quiet social row: bare monochrome glyphs, no chips. */
.zasrce-header-cta__social {
	display: flex;
	align-items: center;
	gap: 0.95rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zasrce-header-cta__social li {
	margin: 0;
	line-height: 0;
}

.zasrce-social {
	display: block;
	color: #4a4a4a;
	transition: color 0.18s ease, transform 0.18s ease;
}

.zasrce-social svg {
	display: block;
	width: 24px;
	height: 24px;
}

.zasrce-social:hover,
.zasrce-social:focus-visible {
	color: var(--zasrce-green);
	transform: translateY(-2px);
}

/* Hairline divider encodes "external profiles │ primary action". */
.zasrce-header-cta__rule {
	width: 1px;
	align-self: stretch;
	min-height: 1.9rem;
	background: rgba(0, 0, 0, 0.14);
}

/* Signature: the donation button as a heart monitor. */
.zasrce-support {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.62rem 1.3rem 0.62rem 1.05rem;
	border-radius: var(--radius-md);
	background-color: var(--zasrce-red);
	color: #fff;
	font-size: 0.92rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 1px 2px rgba(219, 8, 20, 0.35);
	transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.zasrce-support:hover,
.zasrce-support:focus-visible {
	background-color: #b00610;
	color: #fff;
	box-shadow: 0 3px 10px rgba(219, 8, 20, 0.4);
	transform: translateY(-1px);
}

.zasrce-support__mark {
	display: block;
	flex: none;
	width: 40px;
	height: 24px;
}

.zasrce-support__heart {
	fill: #fff;
	transform-box: fill-box;
	transform-origin: center;
}

.zasrce-support__ecg {
	fill: none;
	stroke: var(--zasrce-yellow);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.zasrce-support:hover .zasrce-support__heart,
.zasrce-support:focus-visible .zasrce-support__heart {
	animation: zasrce-beat 0.9s ease 1;
}

/* Medically-timed double-thump: lub … dub. */
@keyframes zasrce-beat {
	0%, 100% { transform: scale(1); }
	14%      { transform: scale(1.18); }
	28%      { transform: scale(1); }
	42%      { transform: scale(1.11); }
	56%      { transform: scale(1); }
}

/* Below 768px GP stacks .inside-header into a centered column. GP gives its own
 * .header-widget a 1.5em top margin there, but our CTA is a sibling of the
 * branding (not .header-widget), so we mirror that gap ourselves. Sizes stay at
 * the smaller mobile scale — only the desktop bar was enlarged. */
@media (max-width: 768px) {
	.zasrce-header-cta {
		gap: 0.7rem;
		margin-top: 1.5em;
	}
	.zasrce-header-cta__social {
		gap: 0.65rem;
	}
	.zasrce-social svg {
		width: 20px;
		height: 20px;
	}
	.zasrce-header-cta__rule {
		min-height: 1.5rem;
	}
	.zasrce-support {
		gap: 0.5rem;
		padding: 0.45rem 0.9rem;
		font-size: 0.8rem;
	}
	.zasrce-support__mark {
		width: 34px;
		height: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.zasrce-social,
	.zasrce-support,
	.zasrce-support__heart {
		transition: none;
		animation: none;
	}
}

/* ── Nujna stanja ────────────────────────────────────────────────────────────
 * Emergency-conditions section: three equal cards linking to the condition
 * subpages. Distinct from the tri-barvni bloki (which use the brand tri-color)
 * and the news grid (inset thumbnails): here a single urgent red runs through
 * the pulse, the arrow and the hover, and the image is full-bleed like a poster.
 * Signature: a red ECG line under the heading, echoing the header CTA + GROM. */
.nujna-stanja__title {
	margin: 0;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
}

/* The pulse: a red heartbeat trace sitting under the title. Purely decorative
 * (CSS background SVG), so it can't be deleted by accident in the editor. */
.nujna-stanja__title::after {
	content: "";
	display: block;
	margin-top: 0.7rem;
	margin-inline: auto;
	width: 138px;
	height: 20px;
	/* Same healthy sinus rhythm as the Podprite nas trace, tiled in brand red. */
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 26'%3E%3Cpath d='M0 16 L4 16 Q11 10 18 16 L22 16 L24 18 L27 3 L30 22 L33 16 L38 16 Q45 9 52 16 L60 16' fill='none' stroke='%23db0814' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x left center;
	background-size: 46px 20px;
}

/* Heading → lead tighter than the global 2.5rem block gap; lead → grid roomy.
 * 0-2-0 specificity beats the theme.json owl (:root :where(.is-layout-flow) > *). */
.nujna-stanja .nujna-stanja__lead {
	margin-top: 0.5rem;
	margin-inline: auto;
	max-width: 60ch;
	color: var(--contrast-2);
	font-size: 1.05rem;
	text-align: center;
}

.nujna-stanja__lead strong {
	color: var(--zasrce-red);
	font-weight: 700;
}

.nujna-stanja .nujna-stanja__grid {
	margin-top: 1.8rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

@media (min-width: 768px) and (max-width: 1024px) {
	.nujna-stanja .nujna-stanja__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.nujna-stanja .nujna-stanja__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Card: white poster on the page, full-bleed image clipped by the rounded card.
 * position:relative anchors the stretched title link; align-items:stretch keeps
 * the image edge-to-edge (overriding the global .is-layout-flex{align-items:center}). */
.nujna-stanja__grid .nujno-card {
	position: relative;
	align-items: stretch;
	background: #fff;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.nujna-stanja__grid .nujno-card:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

/* Aspect-ratio lives on the figure (a stable block-level box) rather than the
 * <img>: in a flex column the img's own aspect-ratio can collapse the figure and
 * let the image overflow onto the body. The figure reserves the 3:2 box; the img
 * fills it and object-fit crops. overflow clips to the rounded card. */
.nujno-card__media {
	margin: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.nujno-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0; /* the card clips the corners; cancel the global rounded-image rule */
}

.nujno-card__body {
	flex: 1;
	padding: 1.2rem 1.35rem 1.35rem;
}

.nujno-card__title {
	margin: 0;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.25;
}

.nujno-card__title a {
	color: var(--contrast);
	text-decoration: none;
}

/* Stretched link: the whole card is clickable through the one title link, so
 * there are no overlapping links to trip up keyboard / screen-reader users. */
.nujno-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.nujna-stanja__grid .nujno-card:hover .nujno-card__title a {
	color: var(--zasrce-red);
}

.nujno-card__desc {
	margin: 0;
	color: var(--contrast-2);
	font-size: 0.95rem;
}

/* Push the "Preberi več" affordance to the card bottom so uneven title/desc
 * lengths still line up. 0-2-0 beats the global .is-layout-flex>* margin reset. */
.nujno-card__body > .nujno-card__more {
	margin-top: auto;
	padding-top: 0.6rem;
	color: var(--zasrce-red);
	font-weight: 600;
	font-size: 0.9rem;
}

.nujno-card__more::after {
	content: " \2192"; /* → */
	display: inline-block;
	transition: transform 0.2s ease;
}

.nujna-stanja__grid .nujno-card:hover .nujno-card__more::after {
	transform: translateX(4px);
}

/* Visible keyboard focus on the (otherwise text-decoration-free) card link. */
.nujno-card__title a:focus-visible {
	outline: 2px solid var(--zasrce-red);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.nujna-stanja__grid .nujno-card,
	.nujno-card__more::after {
		transition: none;
	}
}

/* ── Podprite nas CTA ────────────────────────────────────────────────────────
 * Full-bleed green support band — the page's one edge-to-edge element and its
 * emotional high point. Green (the "za zdravo srce" life colour) is a deliberate
 * tonal shift from the red urgency above. Green is deep enough that white body
 * text clears AA contrast. The heartbeat motif reaches full size here: a faint
 * ECG trace across the band + a red heart that beats on the white button (the
 * inverted twin of the header CTA, reusing @keyframes zasrce-beat). */
.podprite-cta {
	position: relative;
	overflow: hidden;
	padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
	background: linear-gradient(135deg, #00843b 0%, #005e29 100%);
	color: #fff;
	text-align: center;
}

/* Readout plate: the message sits on a translucent deep-green panel so white
 * text clears contrast on the punchy green, while the monitor trace still shows
 * around it and faintly through it. The hairline bezel reads as a screen edge. */
.podprite-cta__plate {
	max-width: 680px;
	margin-inline: auto;
	padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.75rem);
	background: rgba(0, 42, 19, 0.75);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 18px;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
}

/* Ambient heart-monitor trace, tiled across the full width behind the content. */
.podprite-cta::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 60px;
	transform: translateY(-50%);
	/* Normal sinus rhythm (P–QRS–T), tiled: small P hump, sharp R spike, rounded
	 * T — a healthy heartbeat, not a flatline-with-a-blip agonal trace. */
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 26'%3E%3Cpath d='M0 16 L4 16 Q11 10 18 16 L22 16 L24 18 L27 3 L30 22 L33 16 L38 16 Q45 9 52 16 L60 16' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x center;
	background-size: 104px 45px;
	opacity: 0.75;
	pointer-events: none;
}

/* Content sits above the trace. */
.podprite-cta > * {
	position: relative;
	z-index: 1;
}

.podprite-cta__title {
	margin: 0 auto;
	max-width: 18ch;
	font-size: clamp(1.7rem, 3.6vw, 2.5rem);
	font-weight: 800;
	line-height: 1.15;
	color: #fff;
}

/* 0-2-0 beats the theme.json owl (:root :where(.is-layout-constrained) > *). */
.podprite-cta .podprite-cta__lead {
	margin: 0.8rem auto 0;
	max-width: 52ch;
	font-size: clamp(1rem, 1.6vw, 1.15rem);
	line-height: 1.55;
	color: #fff;
}

.podprite-cta .wp-block-buttons {
	margin-top: 1.9rem;
}

/* Brand-red pill with a white heart — the same identity as the header "Podprite
 * nas" button, so the action reads the same everywhere; red pops warmly on the
 * dark plate. inline-flex centres the heart via layout (gap), NOT a transform,
 * so the beat's scale() can't knock it off-centre.
 * Selector is deliberately (0,3,1): it must outrank GP's dynamic button rule
 * `a.wp-block-button__link:not(.has-background)` (0,2,1), which otherwise paints
 * the button grey (#55555e). */
.podprite-cta .podprite-cta__button a.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	background: var(--zasrce-red);
	color: #fff;
	text-decoration: none;
	border-radius: 999px;
	padding: 0.9rem 2rem;
	font-weight: 700;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.podprite-cta__button .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 1.2rem;
	height: 1.2rem;
	transform-origin: center;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 20.7C6 16.5 2 12.7 2 8.9 2 6.1 4.2 4 6.9 4c1.7 0 3.3.9 4.2 2.3l.9 1.3.9-1.3C13.8 4.9 15.4 4 17.1 4 19.8 4 22 6.1 22 8.9c0 3.8-4 7.6-10 11.8z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.podprite-cta .podprite-cta__button a.wp-block-button__link:hover,
.podprite-cta .podprite-cta__button a.wp-block-button__link:focus-visible {
	background: #b00610;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
}

/* Beats for as long as the pointer/focus stays — a living heart, not one thump.
 * zasrce-beat is lub-dub then rest, so looped it reads as a steady ~60 bpm. */
.podprite-cta__button .wp-block-button__link:hover::before,
.podprite-cta__button .wp-block-button__link:focus-visible::before {
	animation: zasrce-beat 1s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.podprite-cta__button .wp-block-button__link {
		transition: none;
	}
	.podprite-cta__button .wp-block-button__link:hover::before,
	.podprite-cta__button .wp-block-button__link:focus-visible::before {
		animation: none;
	}
}

/* ── Kalkulatorji ────────────────────────────────────────────────────────────
 * Two side-by-side calculator promos. Each box is fronted by a sample "readout"
 * (a preview of the number the tool produces) inside a faint inset display: the
 * ITM box a value + a tri-color BMI gauge, the smoking box a yearly cost. The
 * readouts are illustrative (marked "primer"). Whole card is one clickable link. */
.kalkulatorji__title {
	margin: 0;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	font-weight: 700;
	line-height: 1.15;
}

.kalkulatorji .kalkulatorji__lead {
	margin-top: 0.5rem;
	color: var(--contrast-2);
	font-size: 1.05rem;
}

.kalkulatorji .kalk-grid {
	margin-top: 1.8rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
}

@media (max-width: 600px) {
	.kalkulatorji .kalk-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Card: white surface, consistent with the site card system; flex column so the
 * button pins to the bottom and both cards line up. align-items:stretch overrides
 * the global .is-layout-flex{align-items:center}. */
.kalk-grid .kalk-card {
	position: relative;
	align-items: stretch;
	background: #fff;
	border-radius: var(--radius-lg);
	padding: 1.5rem 1.5rem 1.6rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.kalk-grid .kalk-card:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.kalk-card__eyebrow {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--contrast-2);
}

/* Readout: the faint inset "display" the sample number sits in. */
.kalk-readout {
	position: relative;
	align-items: stretch;
	background: #f3f6f4;
	border-radius: var(--radius-md);
	padding: 1.1rem 1.25rem 1.25rem;
}

.kalk-readout::before {
	content: "primer";
	position: absolute;
	top: 0.6rem;
	right: 0.85rem;
	font-size: 0.62rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #9aa0a6;
}

.kalk-readout__value {
	margin: 0;
	font-size: clamp(2.2rem, 5vw, 2.9rem);
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

.kalk-readout__unit {
	display: inline-block;
	margin-left: 0.4rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--contrast-2);
	letter-spacing: 0;
}

.kalk-card--itm .kalk-readout__value {
	color: var(--zasrce-green);
}

.kalk-card--kajenje .kalk-readout__value {
	color: var(--zasrce-red);
}

/* BMI gauge: a continuous brand blend (healthy green → high red). Body weight is
 * a continuum, not stepped bands, so the color transitions smoothly; the marker
 * sample sits in the healthy green stretch. */
.kalk-gauge {
	position: relative; /* anchor the marker (::after) to the gauge, not the card */
	height: 10px;
	border-radius: 999px;
	background: linear-gradient(
		to right,
		#7ec8a2 0%,
		var(--zasrce-green) 30%,
		var(--zasrce-yellow) 64%,
		var(--zasrce-red) 100%
	);
	width: 100%;
}

.kalk-gauge::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 38%;
	width: 14px;
	height: 14px;
	transform: translate(-50%, -50%);
	background: #fff;
	border: 3px solid var(--zasrce-green);
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* ITM gauge legend: the gradient alone never says what its colors mean, so key
 * the three zones beneath it. This also gives the plate the same height as the
 * smoking card's milestone row (its 22px swatch slot mirrors the 22px icon). */
.kalk-scale {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	width:100%;
}

.kalk-scale__legend {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.kalk-scale__zone {
	display: flex;
	flex: 0 0 auto;
	max-width: 33%;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
}

.kalk-scale__swatch {
	width: 12px;
	height: 12px;
	margin: 5px 0; /* 5 + 12 + 5 = 22px — matches the smoking card's icon slot */
	border-radius: 50%;
}

.kalk-scale__swatch--green  { background: var(--zasrce-green); }
.kalk-scale__swatch--yellow { background: var(--zasrce-yellow); }
.kalk-scale__swatch--red    { background: var(--zasrce-red); }

.kalk-scale__label {
	font-size: 0.62rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #9aa0a6;
}

/* Smoking "burn track": no healthy zone — the bar FILLS (amber → red) up to a
 * marker (money already gone); the grey remainder is how far it can still climb.
 * Milestones above translate the sum into things you'd own instead. */
.kalk-ladder {
	margin-top: 0.15rem;
	width:100%;
}

.kalk-ladder__track {
	position: relative;
	height: 8px;
	border-radius: 999px;
	background: #e7e3dd;
	margin-bottom: 0.7rem;
}

.kalk-ladder__fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 54%; /* sample: a lifelong heavy smoker ≈ price of a flat */
	border-radius: 999px;
	background: linear-gradient(90deg, #f4a623, var(--zasrce-red));
}

.kalk-ladder__marker {
	position: absolute;
	left: 54%;
	top: 50%;
	width: 15px;
	height: 15px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--zasrce-red);
	border: 3px solid #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.kalk-ladder__stops {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.kalk-ladder__stop {
	display: flex;
	flex: 0 0 auto;
	max-width: 33%;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	color: #9aa0a6;
}

.kalk-ladder__ico {
	display: block;
	width: 22px;
	height: 22px;
}

.kalk-ladder__label {
	font-size: 0.62rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #9aa0a6;
}

.kalk-card__desc {
	margin: 0;
	color: var(--contrast-2);
	font-size: 0.98rem;
	line-height: 1.5;
}

/* Pin the button to the card bottom (beats the global .is-layout-flex>* reset). */
.kalk-card .wp-block-buttons {
	margin-top: auto;
}

/* Brand-green button. Selector is (0,3,1) to outrank GP's dynamic
 * a.wp-block-button__link:not(.has-background) (0,2,1), which otherwise greys it. */
.kalkulatorji .kalk-card__btn a.wp-block-button__link {
	background: var(--zasrce-green);
	color: #fff;
	text-decoration: none;
	border-radius: var(--radius-md);
	padding: 0.7rem 1.4rem;
	font-weight: 700;
}

.kalkulatorji .kalk-card__btn a.wp-block-button__link:hover,
.kalkulatorji .kalk-card__btn a.wp-block-button__link:focus-visible {
	background: #007a33;
	color: #fff;
}

/* Whole card clickable through the single button link (no overlapping links). */
.kalk-card__btn a.wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.kalk-card__btn a.wp-block-button__link:focus-visible {
	outline: 2px solid var(--zasrce-green);
	outline-offset: 3px;
}

/* ── Revija Za srce ───────────────────────────────────────────────────────────
 * Promo for the current issue of the members' magazine. The section IS the
 * magazine's own front matter: a physical-looking cover on the left (narrow),
 * and on the right the kazalo (table of contents) — rubric · headline · page
 * number, hairline-ruled — the genuine editorial device, not a decorative list.
 * The cover is a styled placeholder; the editorial swaps in the real image. */

/* The whole section sits in the site card frame (white surface, rounded corners,
 * hairline border, soft shadow) so it matches the other home cards. */
.revija {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.revija__inner {
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
}

/* Cover: the real issue photo, lifted off the page with a drop shadow and a
 * stack of page-edge slivers on the right so it reads as a printed magazine you
 * could pick up, not a flat digital thumbnail. */
.revija__cover {
	margin: 0;
	max-width: 300px;
	margin-inline: auto;
}

/* (0,3,1) so the shadow + tighter radius beat the global .wp-block-image img
 * radius-lg rule; the img fills the wrapper. */
.revija .revija__cover img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
	box-shadow:
		3px 0 0 #efece6,
		6px 0 0 #e7e3dc,
		9px 0 0 #ded9d1,
		0 18px 40px rgba(0, 0, 0, 0.18);
}

/* Body: masthead line + issue number sit tight together like a dateline. */
.revija__body-col .revija__eyebrow {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--zasrce-red);
}

.revija__body-col .revija__issue {
	margin: 0.25rem 0 0;
	font-size: clamp(1.6rem, 3.2vw, 2.2rem);
	font-weight: 800;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.revija__label {
	margin: 1.5rem 0 0.6rem;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--contrast-2);
}

/* Contents = an editable core/list of article titles. The CSS only adds hairline
 * rules between items so it still reads like a kazalo; editors just type titles.
 * `.revija .revija__list` (0,2,0) beats core's `.wp-block-list` + the flow owl. */
.revija .revija__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.revija .revija__list li {
	margin: 0;
	padding: 0.7rem 0;
	border-top: 1px solid #ececec;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--contrast);
}

.revija .revija__list li:last-child {
	border-bottom: 1px solid #ececec;
}

.revija .revija__cta {
	margin-top: 1.6rem;
}

/* Red CTA — the magazine's identity colour. Selector is (0,3,1) to outrank GP's
 * dynamic a.wp-block-button__link:not(.has-background) (0,2,1). */
.revija .revija__cta a.wp-block-button__link {
	background: var(--zasrce-red);
	color: #fff;
	text-decoration: none;
	border-radius: var(--radius-md);
	padding: 0.7rem 1.5rem;
	font-weight: 700;
}

.revija .revija__cta a.wp-block-button__link:hover,
.revija .revija__cta a.wp-block-button__link:focus-visible {
	background: #b30610;
	color: #fff;
}

.revija .revija__cta a.wp-block-button__link:focus-visible {
	outline: 2px solid var(--zasrce-red);
	outline-offset: 3px;
}

/* Stack on narrow screens; cap the cover so it doesn't dominate the column. */
@media (max-width: 781px) {
	.revija__cover {
		max-width: 220px;
	}
}

/* ── Podporniki (sponsors) ────────────────────────────────────────────────────
 * The page's closing note: a quiet stripe acknowledging the funders. Same card
 * frame as the other home cards; white surface so the mixed logo backgrounds
 * (some transparent PNG, some white-matte JPG) sit on a common ground. Logos run
 * full colour at a uniform optical height — dimming or greyscaling a sponsor's
 * mark can breach their brand rules, so the restraint lives in the layout, not
 * in altering the logos. */
.sponsorji {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 4vw, 2.25rem);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* One stripe on desktop (the logos fit inside the 1200px wide card); wraps to a
 * tidy centred grid on narrow screens. The row is a core/group flex block — each
 * logo is an editable core/image — so these rules just enforce even spacing and
 * a uniform optical height on top of the block's own flex layout. `.sponsorji
 * .sponsorji__row` (0,2,0) beats the generated per-container gap (0,1,0). */
.sponsorji .sponsorji__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1.25rem, 3vw, 2.75rem);
}

/* Kill the default figure margin so logos sit centred on one baseline. */
.sponsorji .sponsorji__logo {
	margin: 0;
}

/* Uniform height, natural width; corners stay square. `.sponsorji .sponsorji__row
 * img` (0,2,1) beats the site-wide `.wp-block-image img` radius-lg (0,2,0) so the
 * white-matte JPG logos don't show a clipped edge. */
.sponsorji .sponsorji__row img {
	display: block;
	width: auto;
	height: clamp(24px, 3.2vw, 38px);
	max-width: 100%;
	object-fit: contain;
	border-radius: 0;
}