/*
Theme Name: KAFON
Theme URI: https://kafon.sk
Author: KAFON
Description: KAFON V1 — Fresh Air + Modern Editorial, supported by Coffee & Nature photography. Lightweight custom theme, no page builder, no bundled plugins.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: kafon
*/

/* ==========================================================================
   1. DESIGN TOKENS (see brand/KAFON_DESIGN_TOKENS_V1.md — V1 prototype values)
   ========================================================================== */

:root {
	/* Backgrounds */
	--color-bg-base: #FBF7F1;
	--color-bg-elevated: #FDFCFA;
	--color-bg-muted: #F3ECE1;

	/* Text */
	--color-text-primary: #2E2A26;
	--color-text-secondary: #5C574F;
	--color-text-on-accent: #2E2A26;

	/* Accents — Tonal System Pass (2026-09-05): saturation eased ~15-18%
	   at roughly constant lightness (HSL-derived, not a blanket filter),
	   moving from a bright peach-orange toward a calmer muted
	   terracotta/caramel, per KAFON_PHOTO_TONAL_STANDARD_V1 / DECISION-047.
	   Contrast re-verified after the change (see build log Section 16.15). */
	--color-accent-warm: #DFAA79;
	--color-accent-warm-deep: #CE8F55;
	--color-accent-sage: #93A583;
	--color-accent-sky: #A7C7C5;
	--color-coffee: #6E5040;

	/* Borders / dividers, derived, kept subtle — nudged ~15% toward the
	   page background for a finer, lower-contrast line (Tonal System Pass). */
	--color-border: #EAE3D7;

	/* Homepage Lower Half V1: the ONE restrained signature surface, used
	   only by "Káva podľa nálady" — approx. 10% accent-sage blended into
	   the base cream. Every other new lower-half section stays on the
	   existing bg-base/bg-muted surfaces; do not add further tinted
	   backgrounds without a human design decision (locked tonal system,
	   DECISION-047/049). */
	--color-bg-signature: #F1EFE6;

	/* Spacing scale */
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2rem;
	--space-5: 3rem;
	--space-6: 4rem;
	--space-7: 6rem;

	/* Radius — restrained; editorial pages, not app cards */
	--radius-card: 10px;
	--radius-button: 8px;
	--radius-pill: 999px;
	--radius-image: 12px;

	/* Shadow — very light, used sparingly; borders do most of the separation work */
	--shadow-soft: 0 2px 10px rgba(46, 42, 38, 0.045);

	/* Typography */
	--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Width tiers (Responsive Layout Correction Pass): the earlier 1280px
	   cap read as a narrow central column on real 1600–1920px desktops.
	   Editorial landing-page width is now separated from article reading
	   width (.entry-content > .container stays 760px, untouched below). */
	--container-max: 1500px;
	--container-hero: 1540px;

	/* Crop focus for the hero photo — tune per-image without touching markup */
	--hero-object-position: 50% 42%;
	--hero-object-position-mobile: 62% 42%;
}

/* ==========================================================================
   2. FONTS (self-hosted — see assets/fonts/, no third-party font requests)
   ========================================================================== */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('assets/fonts/inter-latin.woff2') format('woff2-variations'), url('assets/fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('assets/fonts/inter-latin-ext.woff2') format('woff2-variations'), url('assets/fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-024F, U+1E00-1EFF, U+0304, U+0308, U+0329;
}

@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('assets/fonts/fraunces-latin.woff2') format('woff2-variations'), url('assets/fonts/fraunces-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('assets/fonts/fraunces-latin-ext.woff2') format('woff2-variations'), url('assets/fonts/fraunces-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-024F, U+1E00-1EFF, U+0304, U+0308, U+0329;
}

/* ==========================================================================
   3. RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--color-bg-base);
	color: var(--color-text-primary);
	font-family: var(--font-body);
	font-size: 1.0625rem; /* ~17px base, generous per audience needs */
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 var(--space-2);
	color: var(--color-text-primary);
}
h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); font-weight: 500; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 var(--space-2); max-width: 68ch; }
.container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--space-3);
}

/* Skip link, kept for accessibility even in a calm design */
.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	background: var(--color-text-primary);
	color: var(--color-bg-base);
	padding: var(--space-1) var(--space-2);
	z-index: 1000;
	border-radius: var(--radius-button);
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

:focus-visible {
	outline: 2px solid var(--color-accent-warm-deep);
	outline-offset: 2px;
}

/* ==========================================================================
   4. HEADER / WORDMARK / NAVIGATION
   ========================================================================== */

.site-header {
	padding: var(--space-3) 0 calc(var(--space-3) * 1.15);
	background: var(--color-bg-base);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}
.site-header__right { display: none; align-items: center; gap: var(--space-3); }
.header-icon { display: inline-flex; color: var(--color-text-secondary); }
.header-icon .icon-line { width: 20px; height: 20px; }

@media (min-width: 900px) {
	.site-header__inner {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
	}
	.primary-nav { grid-column: 2; justify-self: center; }
	.site-header__right { grid-column: 3; justify-self: end; display: inline-flex; }
}
@media (min-width: 1100px) {
	.site-header { padding: var(--space-4) 0 calc(var(--space-4) * 1.1); }
	.primary-nav ul { gap: var(--space-5); }
	.primary-nav a { font-size: 1.02rem; }
}
.wordmark {
	font-family: var(--font-display);
	font-size: 1.85rem;
	font-weight: 500;
	text-decoration: none;
	letter-spacing: -0.01em;
	color: var(--color-text-primary);
	display: inline-flex;
	align-items: baseline;
}
@media (min-width: 1100px) {
	.wordmark { font-size: 2.15rem; }
}
.wordmark__on {
	font-weight: 600;
	color: var(--color-accent-warm-deep);
}
.locale-stub {
	font-size: 0.8rem;
	color: var(--color-text-secondary);
	margin-left: var(--space-2);
	display: inline-flex;
	gap: 0.35em;
	align-items: baseline;
}
.locale-stub span[aria-current] { color: var(--color-text-primary); font-weight: 600; }
.locale-stub .locale-soon { opacity: 0.55; cursor: default; }

.primary-nav {
	display: none;
}
.primary-nav ul { display: flex; gap: var(--space-4); align-items: center; }
.primary-nav a {
	text-decoration: none;
	font-size: 0.98rem;
	font-weight: 500;
	color: var(--color-text-primary);
	padding: 0.3em 0;
	border-bottom: 2px solid transparent;
	transition: border-color 0.15s ease;
}
.primary-nav a:hover, .primary-nav a:focus-visible { border-color: var(--color-accent-warm); }

.menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	background: none;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	padding: 0.5em 1em;
	font-family: var(--font-body);
	font-size: 0.95rem;
	color: var(--color-text-primary);
	cursor: pointer;
	min-height: 44px; /* touch target — QA'd in the Final Tablet + Mobile Polish pass */
	min-width: 44px;
}
.menu-toggle:hover { border-color: var(--color-accent-warm); }

.mobile-nav {
	display: none;
	background: var(--color-bg-elevated);
	border-top: 1px solid var(--color-border);
	padding: var(--space-3);
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul { display: flex; flex-direction: column; gap: var(--space-2); }
.mobile-nav a {
	display: block;
	text-decoration: none;
	font-size: 1.15rem;
	font-weight: 500;
	color: var(--color-text-primary);
	padding: 0.5em 0;
}

@media (min-width: 900px) {
	.primary-nav { display: block; }
	.menu-toggle { display: none; }
}

/* ==========================================================================
   5. HERO
   ========================================================================== */

.hero { padding: var(--space-4) 0 0; }
.hero__frame { max-width: var(--container-hero); margin: 0 auto; padding: 0 var(--space-3); }

/* Mobile-first: image on top, content stacked below in normal flow (no
   overlay-on-photo readability risk on small screens). */
.hero__stage { display: flex; flex-direction: column; }
.hero__visual {
	order: 1;
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-image);
	overflow: hidden;
}
.hero__content { order: 2; padding: var(--space-4) 0 var(--space-2); }

/* Reused (not the homepage hero) for single-post header imagery — see single.php */
.hero__art { border-radius: var(--radius-image); overflow: hidden; }

.hero__visual picture,
.card__art picture {
	display: block;
	width: 100%;
	height: 100%;
}
.hero__photo-img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-object-position); display: block; }

/* Mobile hero crop: the stacked 4:3 frame is much narrower than the source
   photo, so the focal point shifts slightly right (toward the coffee tray
   and terrace view) rather than the desktop left-scrim composition. */
@media (max-width: 899px) {
	.hero__photo-img { object-position: var(--hero-object-position-mobile, 62% 42%); }
}
.hero__photo-fallback {
	position: relative;
	width: 100%;
	height: 100%;
	background: linear-gradient(160deg, #FDF9F1 0%, #FAF1DE 22%, #F1E3C7 40%, #E3EBDD 62%, #C3DEC9 82%, #A6C9AC 100%);
	overflow: hidden;
}
.hero__glow {
	position: absolute;
	top: -12%;
	right: -6%;
	width: 45%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,250,235,0.95) 0%, rgba(255,250,235,0) 70%);
}
.hero__horizon { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 42%; }
.hero__leaf {
	position: absolute;
	left: 4%;
	bottom: 6%;
	width: 56px;
	height: auto;
	fill: none;
	stroke: var(--color-accent-sage);
	stroke-width: 1.4;
	opacity: 0.5;
}

/* Scrim is only meaningful once text overlays the photo (desktop) */
.hero__scrim { display: none; }

.hero h1 {
	margin-bottom: var(--space-2);
	font-size: clamp(2.4rem, 5.5vw, 4.8rem);
	line-height: 1.03;
}
.eyebrow--hero {
	font-size: 0.82rem;
	letter-spacing: 0.14em;
	margin-bottom: var(--space-2);
}
.accent-word { position: relative; display: inline-block; color: inherit; }
.accent-underline {
	position: absolute;
	left: 0.02em;
	right: 0.02em;
	bottom: -0.12em;
	width: calc(100% - 0.04em);
	height: 0.3em;
}
.accent-underline path {
	fill: none;
	stroke: var(--color-accent-warm-deep);
	stroke-width: 3;
	stroke-linecap: round;
}
.hero p.lede {
	font-size: 1.1rem;
	color: var(--color-text-secondary);
	max-width: 42ch;
}
.hero__actions { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); flex-wrap: wrap; }

.link-quiet {
	color: var(--color-text-secondary);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.98rem;
	border-bottom: 1px solid var(--color-border);
	padding-bottom: 0.15em;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.link-quiet:hover, .link-quiet:focus-visible {
	color: var(--color-text-primary);
	border-color: var(--color-accent-warm-deep);
}

/* Desktop: one immersive cinematic stage, text overlaid on a light scrim
   covering roughly the left third. */
@media (min-width: 900px) {
	.hero__stage {
		display: block;
		position: relative;
		aspect-ratio: 2.55 / 1;
		min-height: 500px;
		max-height: 640px;
		border-radius: var(--radius-image);
		overflow: hidden;
	}
	.hero__visual { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
	.hero__scrim {
		display: block;
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgba(251,247,241,0.92) 0%, rgba(251,247,241,0.82) 28%, rgba(251,247,241,0.35) 50%, rgba(251,247,241,0) 68%);
	}
	.hero__content {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		max-width: 44%;
		padding: 0 0 0 var(--space-5);
		z-index: 3;
	}
}
@media (min-width: 1100px) {
	.hero__content { padding-left: var(--space-6); }
	.hero p.lede { font-size: 1.18rem; }
}

/* ==========================================================================
   6. BUTTONS
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.98rem;
	text-decoration: none;
	padding: 0.85em 1.6em;
	border-radius: var(--radius-button);
	border: 1px solid transparent;
	cursor: pointer;
	min-height: 44px; /* touch target */
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn-primary { background: var(--color-accent-warm); color: var(--color-text-primary); }
.btn-primary:hover { background: var(--color-accent-warm-deep); }
.btn-ghost { background: transparent; border-color: var(--color-border); color: var(--color-text-primary); }
.btn-ghost:hover { border-color: var(--color-accent-warm-deep); }

/* ==========================================================================
   7. DISCOVERY NAV (Kávy / Kávovary / Kaviarne / Pražiarne / Za kávou / kafOFF)
   ========================================================================== */

.discovery-nav { padding: var(--space-4) 0 var(--space-5); }

/* Mobile: comfortable horizontal scroll-snap strip, no tiny boxes. */
.discovery-strip {
	display: flex;
	gap: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	scrollbar-width: none;
}
.discovery-strip::-webkit-scrollbar { display: none; }

.discovery-tile {
	scroll-snap-align: start;
	flex: 0 0 auto;
	/* Final Tablet + Mobile Polish pass: tuned so the next tile's icon
	   peeks in fully (~54-72px of it visible at 360-430px, mathematically
	   derived from tile padding + icon width) without exposing its label
	   text — a deliberate "swipe, there's more" cue instead of an
	   accidental partial-word clip. */
	width: 82%;
	max-width: 310px;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-3);
	text-decoration: none;
	color: var(--color-text-primary);
	border-right: 1px solid var(--color-border);
	transition: background 0.15s ease;
}
.discovery-tile:last-child { border-right: none; }
.discovery-tile:hover { background: var(--color-bg-elevated); }
.discovery-tile__icon { display: inline-flex; flex: 0 0 auto; color: var(--color-coffee); }
.discovery-tile__icon .icon-line { width: 30px; height: 30px; }
.discovery-tile:hover .discovery-tile__icon { color: var(--color-accent-warm-deep); }
.discovery-tile__text { display: flex; flex-direction: column; gap: 0.15em; min-width: 0; }
.discovery-tile__label { font-family: var(--font-display); font-size: 1.1rem; }
.discovery-tile__hint { font-size: 0.86rem; color: var(--color-text-secondary); }
.discovery-tile__arrow {
	margin-left: auto;
	color: var(--color-text-secondary);
	font-size: 1.1rem;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.15s ease, transform 0.15s ease;
	flex: 0 0 auto;
}
.discovery-tile:hover .discovery-tile__arrow { opacity: 1; transform: translateX(0); }

@media (min-width: 700px) and (max-width: 1099px) {
	.discovery-strip { flex-wrap: wrap; overflow: visible; }
	.discovery-tile { width: 50%; max-width: none; border-bottom: 1px solid var(--color-border); }
	.discovery-tile:nth-child(even) { border-right: none; }
	.discovery-tile:nth-last-child(-n+2) { border-bottom: none; }
}
@media (min-width: 1100px) {
	.discovery-strip { overflow: visible; }
	.discovery-tile { width: auto; flex: 1 1 0; max-width: none; padding: var(--space-4) var(--space-3); }
	.discovery-tile__arrow { display: none; }
	.discovery-tile__icon .icon-line { width: 36px; height: 36px; }
	.discovery-tile__label { font-size: 1.25rem; }
	.discovery-tile__hint { font-size: 0.92rem; }
}

/* ==========================================================================
   8. SECTIONS (generic content section wrapper)
   ========================================================================== */

.section { padding: var(--space-5) 0; }
.section--muted { background: var(--color-bg-muted); }
.section__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
	flex-wrap: wrap;
}
.section__head h2 { margin: 0; }
.section__rule {
	display: block;
	width: 48px;
	height: 3px;
	margin-top: 0.5em;
	background: var(--color-accent-warm-deep);
	border-radius: var(--radius-pill);
}
.section__head a.section__more {
	text-decoration: none;
	font-weight: 600;
	color: var(--color-accent-warm-deep);
	white-space: nowrap;
}

/* Final Tablet + Mobile Polish pass: at narrow mobile the heading and
   "Všetky články" link felt crowded sharing one line. Calmer stacked
   composition — heading, then the link on its own line, right-aligned. */
@media (max-width: 479px) {
	.section__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.4em;
	}
	.section__head a.section__more { align-self: flex-end; }
}
.eyebrow {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-secondary);
	margin-bottom: var(--space-1);
}

/* Card grid for editorial content */
.card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}
@media (min-width: 700px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

.card {
	background: transparent;
	border-radius: var(--radius-card);
	overflow: hidden;
	text-decoration: none;
	color: var(--color-text-primary);
	display: flex;
	flex-direction: column;
	transition: transform 0.15s ease;
}
.card:hover { transform: translateY(-2px); }
.card__art {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-image);
	overflow: hidden;
}
.card__eyebrow {
	position: absolute;
	left: var(--space-2);
	bottom: var(--space-2);
	background: rgba(251,247,241,0.92);
	color: var(--color-text-primary);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 0.3em 0.7em;
	border-radius: var(--radius-pill);
}
.card__body { padding: var(--space-2) 0.1rem; display: flex; flex-direction: column; gap: 0.5em; }
.card__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text-secondary);
	width: fit-content;
}
.card__badge--on { color: var(--color-accent-warm-deep); }
.card__badge--off { color: #5C6E4E; }
.card__title { font-family: var(--font-display); font-size: 1.2rem; margin: 0; }
.card__excerpt { font-size: 0.96rem; color: var(--color-text-secondary); margin: 0; }
.card__meta { font-size: 0.82rem; color: var(--color-text-secondary); margin-top: auto; }

/* ==========================================================================
   7b. EDITORIAL MODULES — "Dnes pre vás" (Visual Master V2)
   Fixed KAFON artwork (banner-*.jpg/webp) + dynamic WordPress article
   content. Large, magazine-style, stacked full-width blocks — not a
   3-column e-shop grid, not a dashboard card.
   ========================================================================== */

.editorial-modules {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.editorial-module {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--color-text-primary);
	border-radius: var(--radius-image);
	overflow: hidden;
	border: 1px solid var(--color-border);
	background: var(--color-bg-elevated);
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.editorial-module:hover { border-color: var(--color-accent-warm-deep); transform: translateY(-2px); }
/* Final Tablet + Mobile Polish pass: phone default (<700px). ~8% less
   height than the previous 4:3 (still "nearby 4:3", per instruction) so
   article information becomes visible sooner without shrinking the photo. */
.editorial-module__photo { aspect-ratio: 1.45 / 1; }
.editorial-module__photo picture,
.editorial-module__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.editorial-module__panel {
	position: relative;
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: 0.6em;
}
.editorial-module__eyebrow {
	display: inline-block;
	width: fit-content;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--color-accent-warm-deep);
	background: var(--color-bg-muted);
	padding: 0.35em 0.9em;
	border-radius: var(--radius-pill);
}
.editorial-module__title {
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	line-height: 1.15;
	margin: 0;
}
.editorial-module__rule {
	display: block;
	width: 40px;
	height: 3px;
	background: var(--color-accent-warm-deep);
	border-radius: var(--radius-pill);
}
.editorial-module__teaser {
	font-size: 1rem;
	color: var(--color-text-secondary);
	margin: 0;
	max-width: 48ch;
}
.editorial-module__cta {
	font-weight: 600;
	color: var(--color-accent-warm-deep);
}
.editorial-module__accent {
	position: absolute;
	right: var(--space-3);
	bottom: var(--space-3);
	color: var(--color-accent-sage);
	opacity: 0.7;
	font-size: 1.1rem;
}

/* Final Responsive Correction (2026-09-06, DECISION-057): tablet AND
   mobile (<900px) now share one compact HORIZONTAL [image | text]
   composition per card — replacing the previous full-width-image-on-top
   stack (the earlier 700–899px tier above only eased that stack's photo
   ratio; it did not fix the root height problem Ivan flagged: three
   full-width-image cards made the homepage require far too much
   scrolling on tablet/mobile). Mirrors the same [image|text] pattern
   already approved at 900px+/1100px+ (below), just tuned for a narrower
   card: a ~32% image column (within the requested 30–38% range), a
   2-line-clamped title, category + CTA kept per the stated content
   priority (category, title, "Čítať viac →"), and the decorative
   teaser/rule/accent hidden to let the card shrink to roughly half its
   previous height or less. Desktop (>=1100px) is untouched by this
   block — it only applies below 900px. */
@media (max-width: 899px) {
	.editorial-module {
		flex-direction: row;
		align-items: stretch;
		min-height: 108px;
	}
	.editorial-module__photo { flex: 0 0 32%; aspect-ratio: auto; }
	.editorial-module__panel {
		padding: 0.85rem 0.9rem;
		justify-content: center;
		gap: 0.3em;
	}
	.editorial-module__eyebrow { font-size: 0.68rem; padding: 0.3em 0.7em; }
	.editorial-module__title {
		font-size: clamp(0.95rem, 3.6vw, 1.1rem);
		line-height: 1.2;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.editorial-module__rule,
	.editorial-module__teaser,
	.editorial-module__accent { display: none; }
	.editorial-module__cta { font-size: 0.85rem; }
}

/* Tablet landscape (900–1099px): one column, photo|panel side by side.
   Visual Master Correction Pass: made shallower (was min-height:380px,
   generous space-5 padding) to match the new density target — still a
   comfortable single full-width horizontal card. */
@media (min-width: 900px) and (max-width: 1099px) {
	.editorial-module { flex-direction: row; min-height: 220px; }
	.editorial-module__photo { flex: 0 0 42%; aspect-ratio: auto; }
	.editorial-module__panel { flex: 1; justify-content: center; padding: var(--space-3) var(--space-4); }
}

/* Standard desktop and up (>=1100px): THREE COMPACT HORIZONTAL EDITORIAL
   CARDS IN ONE ROW. Visual Master Correction Pass (DECISION-051):
   supersedes the previous vertical photo-top/panel-bottom composition at
   this tier (DECISION-049/Section 16.14), which Ivan judged far too large
   ("giant portrait/banner"). The 3-column grid itself (row structure) is
   UNCHANGED — only each card's internal composition switches from a tall
   vertical stack to a compact [image | text] split, roughly halving the
   section's vertical footprint. */
@media (min-width: 1100px) {
	.editorial-modules {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-3);
	}
	.editorial-module { flex-direction: row; min-height: 180px; }
	.editorial-module__photo { flex: 0 0 38%; aspect-ratio: auto; }
	.editorial-module__panel { flex: 1; justify-content: center; padding: var(--space-3); gap: 0.35em; }
	.editorial-module__eyebrow { font-size: 0.7rem; padding: 0.3em 0.7em; }
	.editorial-module__title {
		font-size: clamp(1rem, 1vw + 0.5rem, 1.15rem);
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.editorial-module__teaser {
		font-size: 0.85rem;
		max-width: none;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.editorial-module__rule { display: none; }
	.editorial-module__accent { display: none; }
}

.demo-flag {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-coffee);
	background: rgba(107,74,56,0.08);
	padding: 0.2em 0.6em;
	border-radius: var(--radius-pill);
	margin-bottom: 0.6em;
	width: fit-content;
}

/* Generative placeholder art blocks — no stock photography, avoids copyright risk */
.art-block { width: 100%; height: 100%; }
.art--window { background: linear-gradient(160deg, #FCEFDD 0%, #F5DCB9 45%, #E9D9C6 70%, #DCEAE1 100%); }
.art--terrace { background: linear-gradient(160deg, #F3E7D2 0%, #E7D2AE 40%, #D7C9A9 65%, #CFE0D3 100%); }
.art--mountain { background: linear-gradient(180deg, #EAF2EF 0%, #D9E7DF 45%, #C7DACE 70%, #AEC9BA 100%); }
.art--kafoff { background: linear-gradient(160deg, #EFEFE2 0%, #DCE6D8 45%, #C9D9CB 75%, #B7CFC1 100%); }
.art--cafe { background: linear-gradient(160deg, #F6E9D8 0%, #ECD7B9 45%, #DCC7A5 75%, #C9B393 100%); }

/* ==========================================================================
   8. HOMEPAGE LOWER HALF V1 (Phase 3)
   One coherent editorial journey, not repeated article grids. ~80% of this
   stays on the existing cream/muted surfaces; only .mood-section gets the
   one restrained signature tint. No gradients, no heavy shadows, no dark
   sections.
   ========================================================================== */

/* 8a. Najradšej čítate — compact numbered editorial cards, a deliberate
   rhythm change after the large "Dnes pre vás" modules. */
.najradsej-section__intro {
	color: var(--color-text-secondary);
	max-width: 52ch;
	margin: 0.4em 0 var(--space-4);
}
.najradsej-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}
/* Desktop Precision Pass: recomposed from a stacked (number-over-image-
   over-text) card into one compact horizontal row — number, small fixed
   thumbnail, text — a true "magazine index" item, not an article card. */
.najradsej-card {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.6em;
	text-decoration: none;
	color: var(--color-text-primary);
}
.najradsej-card__number {
	flex: 0 0 auto;
	font-family: var(--font-display);
	font-size: 1.4rem;
	line-height: 1;
	font-weight: 500;
	color: rgba(110, 80, 64, 0.22);
}
.najradsej-card__media {
	position: relative;
	display: block;
	flex: 0 0 90px;
	width: 90px;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-button);
	overflow: hidden;
	background: var(--color-bg-muted);
}
.najradsej-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.najradsej-card__body { display: flex; flex-direction: column; gap: 0.2em; min-width: 0; flex: 1; }
.najradsej-card__category {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--color-accent-warm-deep);
}
.najradsej-card__title {
	font-family: var(--font-display);
	font-size: 0.98rem;
	line-height: 1.28;
	transition: color 0.15s ease;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.najradsej-card:hover .najradsej-card__title,
.najradsej-card:focus-visible .najradsej-card__title { color: var(--color-accent-warm-deep); }
.najradsej-card__meta { font-size: 0.76rem; color: var(--color-text-secondary); }

@media (min-width: 700px) and (max-width: 1099px) {
	.najradsej-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
	.najradsej-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
}

/* 8b. Káva podľa nálady — signature interactive discovery section, now the
   FIRST section below the hero (DECISION-051). Visual Master Correction
   Pass: recomposed into a shallow horizontal band (intro left, chips
   right) instead of a tall stacked block — the ONE tonal surface variation
   on the lower homepage (see --color-bg-signature) is preserved. */
.mood-section { background: var(--color-bg-signature); padding: var(--space-4) 0; }
.mood-section__band { display: flex; flex-direction: column; gap: var(--space-3); }
.mood-section__intro-col h2 { margin: 0.15em 0; }
.mood-section__intro {
	color: var(--color-text-secondary);
	font-size: 1rem;
	max-width: 44ch;
	margin: 0.3em 0 0;
}
.mood-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
}
.mood-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	min-height: 44px;
	padding: 0.55em 1.05em;
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-border);
	background: var(--color-bg-elevated);
	color: var(--color-text-primary);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.88rem;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.mood-chip__icon { display: inline-flex; flex: 0 0 auto; color: var(--color-coffee); }
.mood-chip__icon .icon-line { width: 18px; height: 18px; }
.mood-chip.is-active .mood-chip__icon { color: var(--color-text-primary); }
@media (min-width: 1100px) {
	.mood-section__band { flex-direction: row; align-items: center; gap: var(--space-5); }
	.mood-section__intro-col { flex: 0 0 34%; }
	.mood-chips { flex: 1; }
}
.mood-chip:hover, .mood-chip:focus-visible { border-color: var(--color-accent-warm-deep); }
/* Active state is never color-only: a heavier border AND a checkmark. */
.mood-chip.is-active {
	background: var(--color-accent-warm);
	border-color: var(--color-accent-warm-deep);
}
.mood-chip.is-active::after { content: "✓"; margin-left: 0.5em; font-weight: 700; }

.mood-results { margin-top: var(--space-2); }
.mood-result { padding-top: var(--space-3); }
.mood-result + .mood-result { border-top: 1px solid var(--color-border); margin-top: var(--space-4); }
.mood-result__heading { font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 var(--space-2); }
.mood-result__cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}
@media (min-width: 900px) {
	.mood-result__cards { grid-template-columns: repeat(3, 1fr); }
}
.mood-card {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	padding: var(--space-3);
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}
.mood-card__title { font-family: var(--font-display); font-size: 1.1rem; margin: 0; }
.mood-card__profile { font-size: 0.85rem; color: var(--color-text-secondary); margin: 0; }
.mood-card__why { font-size: 0.95rem; margin: 0; }
.mood-card__prep { font-size: 0.85rem; color: var(--color-text-secondary); font-style: italic; margin: 0; }
.mood-card__cta {
	margin-top: auto;
	font-weight: 600;
	color: var(--color-accent-warm-deep);
	text-decoration: none;
	padding-top: 0.3em;
}
/* 8c. Kam na kávu — one destination feature, not another article grid. */
.kam-feature { display: flex; flex-direction: column; gap: var(--space-4); }
/* Desktop Precision Pass: an intentional editorial placeholder (line-art
   icons + short note on the signature surface) instead of a plain dashed
   box, which read as a broken/missing element rather than a deliberate
   "photo coming soon" treatment. Occupies the same footprint a real photo
   will later fill. */
.kam-feature__photo {
	background: var(--color-bg-signature);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-image);
	min-height: 220px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3);
}
.kam-feature__placeholder-icons { display: flex; align-items: center; gap: var(--space-2); }
.kam-feature__placeholder-icon { display: inline-flex; }
.kam-feature__placeholder-icon .icon-line { width: 28px; height: 28px; }
.kam-feature__placeholder-icon--coffee { color: var(--color-coffee); }
.kam-feature__placeholder-icon--pin { color: var(--color-accent-warm-deep); }
.kam-feature__placeholder-icon--mountain { color: var(--color-accent-sage); }
.kam-feature__photo-note { font-size: 0.82rem; color: var(--color-text-secondary); text-align: center; max-width: 28ch; }
.kam-feature__panel { display: flex; flex-direction: column; gap: 0.4em; justify-content: center; }
.kam-feature__panel h2 { margin: 0.1em 0; font-size: clamp(1.3rem, 1.6vw + 0.8rem, 1.7rem); }
.kam-feature__location { font-weight: 600; color: var(--color-text-secondary); margin: 0; }
.kam-feature__copy { color: var(--color-text-secondary); margin: 0; max-width: 46ch; }
.kam-feature__tags { display: flex; gap: 0.5em; list-style: none; padding: 0; margin: 0.2em 0 0.4em; flex-wrap: wrap; }
.kam-feature__tags li {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--color-coffee);
	background: var(--color-bg-muted);
	padding: 0.25em 0.7em;
	border-radius: var(--radius-pill);
}
@media (min-width: 1100px) {
	.kam-feature { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-4); align-items: stretch; height: 100%; }
	.kam-feature__photo { min-height: 100%; }
}

/* Visual Master Correction Pass: "Kam na kávu?" (~70%) and "Malý objav"
   (~30%) now share one desktop row instead of two separate sections. */
.kam-row { display: flex; flex-direction: column; gap: var(--space-4); }
.kam-row__main { flex: 1; }
.kam-row__side {
	flex: 1;
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-3);
}
@media (min-width: 1100px) {
	.kam-row { flex-direction: row; align-items: stretch; gap: var(--space-5); }
	.kam-row__main { flex: 0 0 70%; }
	.kam-row__side {
		flex: 1;
		border-top: none;
		border-left: 1px solid var(--color-border);
		padding-top: 0;
		padding-left: var(--space-4);
		display: flex;
		align-items: center;
	}
}

/* 8d. Malý objav — compact coffee-first rhythm break, now the side column
   of the Kam na kávu row rather than its own full section. */
.maly-objav { display: flex; flex-direction: column; gap: 0.35em; }
.maly-objav__fact { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.4; margin: 0.2em 0; }
.maly-objav__sub { color: var(--color-text-secondary); margin: 0; font-size: 0.85rem; }

/* 8e. Chvíľa kafOFF — one shallow horizontal band: photo | copy | choices. */
.kafoff-section__intro {
	color: var(--color-text-secondary);
	max-width: 46ch;
	margin: 0.4em 0 0;
	font-size: 0.95rem;
}
.kafoff-band { display: flex; flex-direction: column; gap: var(--space-3); }
.kafoff-band__photo {
	border-radius: var(--radius-image);
	overflow: hidden;
	aspect-ratio: 16 / 10;
}
.kafoff-band__photo picture, .kafoff-band__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kafoff-band__copy h2 { margin: 0.1em 0; font-size: clamp(1.25rem, 1.4vw + 0.8rem, 1.55rem); }
.kafoff-band__choices { display: flex; flex-direction: column; gap: 0.6em; }
.kafoff-choice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6em;
	padding: 0.7em 1em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-button);
	text-decoration: none;
	color: var(--color-text-primary);
	background: var(--color-bg-elevated);
	min-height: 44px;
	transition: border-color 0.15s ease;
}
.kafoff-choice:hover, .kafoff-choice:focus-visible { border-color: var(--color-accent-warm-deep); }
.kafoff-choice__label { font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.01em; }
.kafoff-choice__desc { display: none; }
.kafoff-choice__arrow { color: var(--color-accent-warm-deep); font-weight: 600; flex: 0 0 auto; }
@media (min-width: 1100px) {
	.kafoff-band { display: grid; grid-template-columns: 220px 1fr 1.1fr; gap: var(--space-4); align-items: center; }
}
@media (min-width: 700px) and (max-width: 1099px) {
	.kafoff-band__photo { aspect-ratio: 21 / 9; }
}

/* 8f. Ešte jednu? — small, memorable, shallow band (not a CTA banner). */
.este-jednu-section { padding: var(--space-4) 0; }
.este-jednu {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	text-align: center;
}
.este-jednu h2 { margin: 0; font-size: clamp(1.3rem, 1.4vw + 0.8rem, 1.6rem); }
@media (min-width: 900px) {
	.este-jednu { flex-direction: row; justify-content: center; gap: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
	.najradsej-card__title,
	.mood-chip,
	.kafoff-choice { transition: none; }
}

/* ==========================================================================
   9. NEWSLETTER
   ========================================================================== */

.newsletter-section { padding: var(--space-4) 0; }
.newsletter {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	text-align: center;
	max-width: 520px;
	margin: 0 auto;
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border);
}
.newsletter form {
	display: flex;
	gap: var(--space-1);
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
}
/* Visual Master Correction Pass: a shallow horizontal band on desktop
   (copy left, form right) instead of a fully centered stacked block. */
@media (min-width: 1100px) {
	.newsletter {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		text-align: left;
		max-width: none;
		gap: var(--space-4);
	}
	.newsletter h2 { margin: 0; flex: 0 0 auto; }
	.newsletter > p { margin: 0; max-width: 34ch; }
	.newsletter form { flex: 0 0 auto; width: auto; flex-wrap: nowrap; }
	.newsletter__note { flex-basis: 100%; text-align: center; }
}
.newsletter input[type="email"] {
	font-family: var(--font-body);
	font-size: 1rem;
	padding: 0.85em 1em;
	border-radius: var(--radius-button);
	border: 1px solid var(--color-border);
	background: var(--color-bg-base);
	min-width: 220px;
	flex: 1 1 240px;
	min-height: 44px;
}
.newsletter__note {
	font-size: 0.82rem;
	color: var(--color-text-secondary);
	max-width: 42ch;
	margin: 0;
}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */

.site-footer {
	background: var(--color-bg-muted);
	padding: var(--space-5) 0 var(--space-3);
	margin-top: var(--space-6);
}
.footer__grid {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: 1fr;
	margin-bottom: var(--space-4);
}
.footer__col h4 { font-size: 0.95rem; margin-bottom: var(--space-1); }
.footer__col ul { display: flex; flex-direction: column; gap: 0.5em; }
.footer__col a { text-decoration: none; color: var(--color-text-secondary); font-size: 0.94rem; }
.footer__col a:hover { color: var(--color-text-primary); }
.footer__bottom {
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-2);
	font-size: 0.85rem;
	color: var(--color-text-secondary);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-1);
}
@media (min-width: 900px) {
	.footer__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   11. PAGE / SECTION TEMPLATE / SINGLE / 404
   ========================================================================== */

.page-hero { padding: var(--space-5) 0 var(--space-4); }
.page-hero p.lede { color: var(--color-text-secondary); font-size: 1.1rem; }
.entry-content { padding-bottom: var(--space-5); }
.entry-content > .container { max-width: 760px; }
.entry-content h2 { margin-top: var(--space-4); }
.not-found { padding: var(--space-6) 0; text-align: center; }

.breadcrumbs { font-size: 0.85rem; color: var(--color-text-secondary); margin-bottom: var(--space-2); }
.breadcrumbs a { text-decoration: none; color: var(--color-text-secondary); }
.breadcrumbs a:hover { color: var(--color-text-primary); }

/* ==========================================================================
   12. UTILITIES
   ========================================================================== */

.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
}

/* WordPress core alignment classes kept minimal-compatible */
.alignwide { max-width: 100%; }
.alignfull { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }