/* ==========================================================================
   Katma 2027 — layout.css
   Container, page shell and the few spacing helpers templates rely on.
   Brief §7: clean editorial grid, generous whitespace, no utility soup.
   ========================================================================== */

/* --- Page shell ----------------------------------------------------------- */

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

/* Sticky footer: main grows to push the footer down on short pages. On its own
   that growth is bare page background, which showed as a white band between a
   full-bleed closing section — the "Možda vas zanima" band, the heritage band —
   and the footer, but only on screens tall enough for the page to come up
   short. Handing the growth to the last section instead lets that section's own
   background run all the way down to the footer. */
.site-main {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
}

.site-main > :last-child {
	flex-grow: 1;
}

/* --- Container ------------------------------------------------------------ */

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--wide {
	max-width: var(--container-wide);
}

.container--narrow {
	max-width: var(--container-narrow);
}

/* Full-bleed background, contained content. */
.container--bleed {
	max-width: none;
	padding-inline: 0;
}

/* --- Sections ------------------------------------------------------------- */

.section {
	padding-block: var(--space-2xl);
}

.section--tight {
	padding-block: var(--space-xl);
}

.section--loose {
	padding-block: var(--space-3xl);
}

.section--warm {
	background-color: var(--color-bg-warm);
}

.section--alt {
	background-color: var(--color-bg-alt);
}

/* Section heading row: title left, optional link right. */
.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-sm) var(--space-md);
	margin-bottom: var(--space-lg);
}

/* --- Grid ----------------------------------------------------------------- */

.grid {
	display: grid;
	gap: var(--space-md);
}

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

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

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

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

@media (max-width: 1100px) {
	.grid--5 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

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

@media (max-width: 560px) {
	.grid--2,
	.grid--3,
	.grid--4,
	.grid--5 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Stack ---------------------------------------------------------------- */

.stack > * + * {
	margin-top: var(--space-sm);
}

.stack--sm > * + * {
	margin-top: var(--space-2xs);
}

.stack--lg > * + * {
	margin-top: var(--space-md);
}

/* --- Cluster (inline row that wraps) -------------------------------------- */

.cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs);
}

.cluster--sm {
	gap: var(--space-2xs);
}

.cluster--lg {
	gap: var(--space-md);
}

/* --- Page header (every non-home template) --------------------------------
   Shared masthead: warm band, eyebrow, editorial title, cropped logo accent.
   Built for "O nama" first; template-parts/content/page-header.php now puts
   it on every page, post, archive and search result so the site reads as one
   system. See .accent-shape and .eyebrow for the pieces it reuses.
   -------------------------------------------------------------------------- */

.page-header {
	position: relative;
	overflow: hidden;
	background-color: var(--color-bg-warm);
}

.page-header__inner {
	position: relative;
	z-index: 1;
	padding-block: var(--space-2xl);
}

.page-header__title {
	margin-top: var(--space-2xs);
	font-size: var(--text-2xl);
}

.page-header__meta {
	margin-top: var(--space-sm);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	color: var(--color-muted);
}

.page-header__meta time {
	font-size: var(--text-sm);
}

/* Offset by a share of the mark itself, not of the band.

   A percentage `right` resolves against the containing block, so `right: -10%`
   was -142px against a 1425px band while the mark was only 180px wide — four
   fifths of it pushed out of sight, and worse on a wider monitor, since the
   offset grows with the viewport and the mark does not. translateX is a share
   of the element, so the same fraction stays visible at any width.

   Measured: roughly 45% of the mark now reads inside the band. It clears the
   narrow content column by a wide margin, so it never crowds the title. */
.page-header__accent {
	top: -6%;
	right: 0;
	width: clamp(150px, 15vw, 220px);
	transform: translateX(42%);
}

/* The band is shorter on a narrow screen and the content column reaches nearer
   the edge, so the same share of a same-sized mark starts crowding the title.
   Smaller and pushed a little further out keeps it an accent. */
@media (max-width: 900px) {
	.page-header__accent {
		width: clamp(110px, 17vw, 150px);
		transform: translateX(50%);
	}
}