/* ==========================================================================
   COR BONUM — public site styles.
   Fluid landscape design with content capped at --content-max.
   Mobile (portrait) pass is deferred — see media query at the bottom.
   ========================================================================== */

:root {
	--night: #1B223E;
	--blue-center: #1D48C1;
	--gold: #C49F1A;
	--gold-light: #E6C86A;
	--text-on-dark: #FFFFFF;

	/* Layout tokens */
	--nav-height: clamp(64px, 5.5vw, 100px);
	--content-max: 1600px;
	--gutter: clamp(64px, 12vw, 224px);
	/* Top toolbar uses its own (much smaller) gutter so the bar reaches
	   close to the screen edge regardless of how wide --gutter is. */
	--nav-gutter: clamp(20px, 3vw, 64px);
	--col-gap: clamp(28px, 4.5vw, 80px);
	--section-pad-y: clamp(56px, 7vw, 120px);
	--divider-pad-y: clamp(28px, 3vw, 48px);

	/* Type scale (fluid by viewport) */
	--fs-body:     clamp(15px, 0.6vw + 11px, 22px);
	--fs-h2:       clamp(28px, 1.7vw + 16px, 56px);
	--fs-tagline:  clamp(18px, 1vw + 12px, 32px);
	--fs-projekty: clamp(40px, 5.5vw, 100px);
	--fs-nav:      clamp(15px, 0.55vw + 12px, 22px);
	--fs-dropdown: clamp(15px, 0.3vw + 13px, 19px);

	--gold-gradient: linear-gradient(90deg,
		#C6A11B 0%, #BB9113 24%, #CCA82C 30%,
		#EDD75F 43%, #FBE973 50%, #F3DD65 56%,
		#EBD359 65%, #E9D055 73%, #CB9F00 100%);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-height); }
body {
	margin: 0;
	background: var(--night);
	color: #fff;
	font-family: "Minion Pro","Minion Variable Concept",Constantia,Georgia,serif;
	font-size: var(--fs-body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: geometricPrecision;
}

img, svg { display: block; max-width: 100%; }

/* ---------- Top toolbar ---------- */
.site-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
	background: var(--night);
	height: var(--nav-height);
}
.top-nav {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 var(--nav-gutter);
	gap: clamp(12px, 1.6vw, 24px);
}
.nav-logo-graphical {
	flex: 0 0 auto;
	width: clamp(54px, 4.5vw, 85px);
	height: auto;
}
.nav-logo-graphical svg { width: 100%; height: auto; }
.nav-logo-text {
	flex: 0 0 auto;
	width: clamp(130px, 12vw, 192px);
	height: auto;
	margin-right: auto;
}
.nav-logo-text svg { width: 100%; height: auto; }

.nav-links {
	height: 100%;
	display: flex;
	align-items: stretch;
}
ul#primary-menu {
	list-style: none; margin: 0; padding: 0;
	height: 100%;
	display: flex;
	align-items: stretch;
	gap: clamp(20px, 3vw, 48px);
}
ul#primary-menu > li {
	list-style: none; margin: 0; padding: 0;
	align-self: stretch;
	display: flex;
	align-items: center;
}
ul#primary-menu > li > a {
	position: relative;
	display: inline-block;
	color: var(--text-on-dark);
	text-decoration: none;
	font-family: inherit;
	font-size: var(--fs-nav);
	line-height: 1;
	padding-bottom: clamp(4px, 0.4vw, 6px);
	text-transform: uppercase;
}
ul#primary-menu > li > a::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0;
	height: clamp(2px, 0.2vw, 3px);
	background: var(--gold-gradient);
	opacity: 0;
	transition: opacity 200ms ease;
}
ul#primary-menu > li > a:hover::after,
ul#primary-menu > li > a:focus::after { opacity: 1; }

.menu-toggle { display: none; }

/* Dropdown ("O nás" sub-menu) — larger touch targets for tablet */
ul#primary-menu li.has-dropdown { position: relative; }
.dropdown {
	position: absolute;
	top: 100%; left: 50%; transform: translateX(-50%);
	width: clamp(220px, 18vw, 320px);
	opacity: 0; visibility: hidden;
	transition: opacity 150ms ease;
	pointer-events: none;
	z-index: 1001;
	padding-top: clamp(8px, 0.8vw, 14px);
}
ul#primary-menu li.has-dropdown:hover .dropdown,
ul#primary-menu li.has-dropdown:focus-within .dropdown,
.dropdown:hover { opacity: 1; visibility: visible; pointer-events: auto; }

.dropdown__notch {
	position: absolute;
	top: clamp(2px, 0.4vw, 6px);
	left: 50%; transform: translateX(-50%);
	width: clamp(16px, 1.4vw, 22px);
	height: clamp(8px, 0.7vw, 11px);
	background: #131930;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	z-index: 1;
}
.dropdown > ul {
	list-style: none; margin: 0;
	background: #131930;
	border-radius: clamp(10px, 1vw, 16px);
	padding: clamp(14px, 1.2vw, 20px) clamp(20px, 1.8vw, 28px);
	box-shadow: 0 8px 24px rgba(0,0,0,0.35);
	margin-top: clamp(6px, 0.6vw, 10px);
}
.dropdown > ul li { list-style: none; margin: 0; padding: 0; display: block; }
.dropdown > ul li + li { margin-top: clamp(10px, 0.9vw, 16px); }
ul#primary-menu li.has-dropdown .dropdown > ul li a {
	position: relative; display: inline-block;
	color: #FFFFFF; text-decoration: none;
	font-family: inherit;
	font-size: var(--fs-dropdown);
	line-height: 1.3;
	text-transform: none;
	white-space: nowrap;
	padding: clamp(4px, 0.4vw, 6px) 0;
}
ul#primary-menu li.has-dropdown .dropdown > ul li a::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0;
	height: 2px;
	background: var(--gold-gradient);
	opacity: 0;
	transition: opacity 150ms ease;
}
ul#primary-menu li.has-dropdown .dropdown > ul li a:hover::after,
ul#primary-menu li.has-dropdown .dropdown > ul li a:focus::after { opacity: 1; }

/* ==========================================================================
   Section base — every coloured section spans 100vw with a content cap
   on the inner container. Dividers are direct children of the section so
   their lines reach the viewport edge.
   ========================================================================== */
.cb-gold,
.cb-white,
.cb-blue,
.cb-gold-2,
.cb-projekt {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.cb-gold__inner,
.cb-blue__inner,
.cb-gold-2__inner,
.cb-projekt__inner {
	position: relative;
	width: 100%;
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 var(--gutter) var(--section-pad-y);
}

/* ---------- Hero (landing page) — fills the viewport ---------- */
.cb-hero {
	position: relative;
	width: 100%;
	min-height: calc(100vh - var(--nav-height));
	margin-top: var(--nav-height);
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--night);
	background-image: radial-gradient(
		circle at 50% 50%,
		rgba(29,72,193,0.2) 0%,
		rgba(29,72,193,0.2) 44%,
		rgba(27,34,62,0.2) 100%
	);
	overflow: hidden;
	padding: clamp(40px, 6vh, 96px) var(--gutter);
}
.cb-hero__inner {
	position: relative;
	width: 100%;
	max-width: 760px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(18px, 2.6vw, 44px);
}
.cb-hero__logo-graphical {
	width: clamp(140px, 16vw, 222px);
	height: auto;
}
.cb-hero__logo-graphical svg { width: 100%; height: auto; }
.cb-hero__logo-text {
	width: clamp(320px, 38vw, 540px);
	height: auto;
}
.cb-hero__logo-text svg { width: 100%; height: auto; }
.cb-hero__tagline {
	margin: 0;
	width: 100%;
	max-width: 540px;
	color: #FFFFFF;
	font-size: var(--fs-tagline);
	line-height: 1.5;
	text-align: center;
}

/* ---------- Hero (projekty page) — just the word PROJEKTY in gold gradient ---------- */
.cb-projekty-hero {
	position: relative;
	width: 100%;
	min-height: calc(100vh - var(--nav-height));
	margin-top: var(--nav-height);
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--night);
	background-image: radial-gradient(
		circle at 50% 50%,
		rgba(29,72,193,0.2) 0%,
		rgba(29,72,193,0.2) 44%,
		rgba(27,34,62,0.2) 100%
	);
	overflow: hidden;
	padding: clamp(40px, 6vh, 96px) var(--gutter);
}
.cb-projekty-hero__inner {
	position: relative;
	width: 100%;
	max-width: var(--content-max);
	display: flex;
	align-items: center;
	justify-content: center;
}
.cb-projekty-hero__title {
	margin: 0;
	text-align: center;
	font-weight: 400;
	font-size: var(--fs-projekty);
	/* line-height + padding-bottom give the J descender room and stop the
	   background-clip:text fill from being clipped by the line box. */
	line-height: 1.15;
	padding-bottom: 0.12em;
	text-transform: uppercase;
	letter-spacing: 0.02em;

	background: var(--gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* ---------- Coloured section backgrounds ---------- */
.cb-gold {
	background-color: rgba(196,159,26,0.94);
	background-image: radial-gradient(
		circle at 50% 50%,
		rgba(255,255,255,0.2) 0%,
		rgba(196,159,26,0) 100%
	);
	color: var(--night);
}
.cb-white { background: #FFFFFF; color: var(--night); }
.cb-blue {
	background-color: var(--night);
	background-image: radial-gradient(
		circle at 50% 50%,
		rgba(29,72,193,0.2) 0%,
		rgba(29,72,193,0.2) 44%,
		rgba(27,34,62,0.2) 100%
	);
	color: var(--gold);
}
.cb-gold-2 {
	background-color: rgba(196,159,26,0.94);
	background-image: radial-gradient(
		circle at 50% 50%,
		rgba(255,255,255,0.2) 0%,
		rgba(196,159,26,0) 100%
	);
	color: var(--night);
}
.cb-projekt { background: #FFFFFF; color: var(--night); }

/* ---------- Divider — direct child of section, spans viewport edge to edge ---------- */
.cb-divider {
	display: flex;
	align-items: center;
	width: 100%;
	padding: var(--divider-pad-y) 0;
}
.cb-divider__line {
	flex: 1 1 0;
	height: 1px;
	background: currentColor;
}
.cb-divider__logo {
	flex: 0 0 auto;
	width: clamp(36px, 3.4vw, 56px);
	height: clamp(28px, 2.6vw, 44px);
	margin: 0 clamp(16px, 1.8vw, 28px);
}
.cb-divider__logo svg { width: 100%; height: 100%; }

.cb-gold    .cb-divider { color: var(--night); }
.cb-white   .cb-divider { color: #C7A425; }
.cb-blue    .cb-divider { color: #C7A425; }
.cb-gold-2  .cb-divider { color: var(--night); }
.cb-projekt .cb-divider { color: #C7A425; }

.cb-gold    .cb-divider__logo svg * { fill: #1B223E; }
.cb-white   .cb-divider__logo svg * { fill: #C7A425; }
.cb-blue    .cb-divider__logo svg * { fill: #C7A425; }
.cb-gold-2  .cb-divider__logo svg * { fill: #1B223E; }
.cb-projekt .cb-divider__logo svg * { fill: #C7A425; }

/* ---------- Shared section heading & body ---------- */
.cb-gold__title,
.cb-white__title,
.cb-blue__title,
.cb-gold-2__title,
.cb-projekt__title {
	margin: 0 0 clamp(20px, 2.4vw, 40px);
	font-size: var(--fs-h2);
	line-height: 1.05;
	font-weight: 400;
	text-transform: uppercase;
}
.cb-gold__title    { color: var(--night); }
.cb-white__title   { color: var(--night); }
.cb-blue__title    { color: var(--gold); }
.cb-gold-2__title  { color: var(--night); }
.cb-projekt__title { color: var(--gold); }

.cb-gold__body,
.cb-white__body,
.cb-blue__body,
.cb-gold-2__body,
.cb-projekt__body,
.cb-white__block--single {
	font-size: var(--fs-body);
	line-height: 1.55;
}
.cb-gold__body p,
.cb-white__body p,
.cb-blue__body p,
.cb-gold-2__body p,
.cb-projekt__body p,
.cb-white__block--single p {
	margin: 0 0 clamp(14px, 1.2vw, 22px);
}
.cb-gold__body p:last-child,
.cb-white__body p:last-child,
.cb-blue__body p:last-child,
.cb-gold-2__body p:last-child,
.cb-projekt__body p:last-child,
.cb-white__block--single p:last-child {
	margin-bottom: 0;
}
.cb-gold__body strong { font-weight: 400; }

/* ---------- White section ----------
   The inner stays full viewport width so the dividers nested inside it
   reach the screen edges. Only the blocks themselves cap their width. */
.cb-white__inner {
	position: relative;
	width: 100%;
	padding-bottom: var(--section-pad-y);
}
.cb-white__inner > .cb-divider { width: 100%; }
.cb-white__block {
	width: 100%;
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 var(--gutter);
	color: var(--night);
}
/* Two consecutive blocks (no divider between them) need their own breathing room. */
.cb-white__block + .cb-white__block { margin-top: clamp(40px, 5vw, 80px); }
.cb-white__block--columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--col-gap);
	align-items: start;
}
.cb-white__col { position: relative; }

/* ---------- Bullets + numbered lists ---------- */
.cb-bullets {
	list-style: none;
	margin: 0 0 clamp(14px, 1.2vw, 22px);
	padding: 0;
}
.cb-bullets li {
	position: relative;
	padding-left: clamp(20px, 1.5vw, 28px);
	margin: 0 0 clamp(4px, 0.4vw, 8px);
}
.cb-bullets li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.55em;
	width: clamp(7px, 0.7vw, 10px);
	height: clamp(7px, 0.7vw, 10px);
	border-radius: 50%;
	background: #C49F1A;
}
.cb-numbers {
	list-style: none; counter-reset: cbnum;
	margin: 0 0 clamp(14px, 1.2vw, 22px);
	padding: 0;
}
.cb-numbers > li {
	position: relative;
	padding-left: clamp(28px, 2.2vw, 40px);
	margin: 0 0 clamp(8px, 0.8vw, 14px);
	counter-increment: cbnum;
}
.cb-numbers > li::before {
	content: counter(cbnum) ".";
	position: absolute;
	left: 0; top: 0;
	color: #C49F1A;
	font-weight: 400;
}
.cb-numbers .cb-bullets {
	margin-top: clamp(6px, 0.6vw, 10px);
	margin-bottom: clamp(6px, 0.6vw, 10px);
}

/* ---------- Blue section ("Pomáhejte s námi") ---------- */
.cb-blue__block--columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--col-gap);
	align-items: start;
}
.cb-blue__col--right {
	display: flex; flex-direction: column;
	align-items: center; justify-content: flex-start;
}
.cb-blue__qr {
	width: clamp(200px, 22vw, 320px);
	height: clamp(200px, 22vw, 320px);
}
.cb-blue__qr svg { width: 100%; height: 100%; }
.cb-blue__account {
	margin: clamp(18px, 1.8vw, 28px) 0 0;
	color: var(--gold);
	font-size: var(--fs-body);
	line-height: 1.2;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* ---------- Gold section 2 ("Kontakt") ---------- */
.cb-gold-2__block--columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--col-gap);
	align-items: start;
}
.cb-gold-2__col { position: relative; }
.cb-gold-2__col--right { padding-top: clamp(56px, 6vw, 104px); }
.cb-gold-2__body p { font-variant-numeric: tabular-nums; margin: 0 0 clamp(10px, 1vw, 16px); }
.cb-gold-2__body p:last-child { margin-bottom: 0; }
.cb-gold-2__body a { color: inherit; text-decoration: none; }
.cb-gold-2__body a:hover { text-decoration: underline; }

/* ---------- Footer ---------- */
.site-footer {
	position: relative;
	width: 100%;
	background-color: var(--night);
	background-image: radial-gradient(
		circle at 50% 50%,
		rgba(29,72,193,0.2) 0%,
		rgba(29,72,193,0.2) 44%,
		rgba(27,34,62,0.2) 100%
	);
	color: #fff;
	padding: clamp(20px, 2vw, 32px) var(--gutter);
}
.footer-inner {
	position: relative;
	width: 100%;
	max-width: var(--content-max);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}
.footer-logo-text {
	width: clamp(150px, 14vw, 220px);
	height: auto;
}
.footer-logo-text svg { width: 100%; height: auto; }

/* ---------- Projekt entries (projekty.php) ----------
   HTML order is text → image. For image-left, the CSS swaps columns
   (image to col 1, text to col 2). Without an explicit grid-row, the
   auto-placement cursor advances past row 1 after placing the text in
   col 2, so the image would land in row 2 col 1 — well below the text.
   Pinning both items to grid-row: 1 keeps them on the same row in both
   layouts. */
.cb-projekt__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--col-gap);
	align-items: start;
}
.cb-projekt__text,
.cb-projekt__image { grid-row: 1; }
.cb-projekt--image-right .cb-projekt__text  { grid-column: 1; }
.cb-projekt--image-right .cb-projekt__image { grid-column: 2; }
.cb-projekt--image-left  .cb-projekt__image { grid-column: 1; }
.cb-projekt--image-left  .cb-projekt__text  { grid-column: 2; }

/* Push the gallery down so its top sits at the start of the body text,
   not at the start of the title. The offset matches the title block's
   own line-height + bottom margin so the alignment stays correct as
   --fs-h2 scales with the viewport. */
.cb-projekt__image {
	margin-top: calc(var(--fs-h2) * 1.05 + clamp(20px, 2.4vw, 40px));
}

.cb-projekt__body ul { padding-left: clamp(20px, 1.5vw, 28px); }
.cb-projekt__body a { color: inherit; text-decoration: underline; }

/* ---------- Projekt image gallery ----------
   Grid: [arrow-prev] [track] [arrow-next]
   The track owns the aspect-ratio and the photo. Arrows sit outside the
   image in their own auto-sized columns. Counter overlays the bottom-
   right corner of the track via grid placement (same cell). The whole
   gallery (arrows + image) fits inside its parent column. */
.cb-gallery {
	position: relative;
	width: 100%;
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: 1fr;
	align-items: center;
	column-gap: clamp(8px, 1vw, 18px);
}
/* Empty gallery placeholder — no children, so just paint a sized box. */
.cb-gallery--empty {
	display: block;
	aspect-ratio: 1 / 1;
	background: transparent;
}

.cb-gallery__track {
	grid-column: 2;
	grid-row: 1;
	position: relative;
	width: 100%;
	/* Square frame; portrait + landscape photos are letterboxed inside it
	   (object-fit: contain on the img). The letterbox band is the same
	   white as the surrounding .cb-projekt section, so it visually
	   disappears — the photo just floats in the page. */
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: transparent;
}
.cb-gallery__item {
	position: absolute; inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 300ms ease;
	pointer-events: none;
}
.cb-gallery__item.is-active { opacity: 1; pointer-events: auto; }
.cb-gallery__img {
	width: 100%; height: 100%;
	/* `contain` (not cover): the longer side of the photo equals the
	   square's side; the shorter side is letterboxed. Preserves the
	   original orientation regardless of EXIF / portrait vs landscape. */
	object-fit: contain;
	cursor: zoom-in;
}

.cb-gallery__arrow {
	grid-row: 1;
	width: clamp(32px, 2.6vw, 44px);
	height: clamp(32px, 2.6vw, 44px);
	display: flex; align-items: center; justify-content: center;
	background: transparent;
	color: var(--gold);
	border: 0;
	cursor: pointer;
	padding: 0;
	transition: color 180ms ease, transform 180ms ease;
}
.cb-gallery__arrow:hover,
.cb-gallery__arrow:focus-visible {
	color: #FFD66E;
	outline: none;
	transform: scale(1.1);
}
.cb-gallery__arrow svg { width: 60%; height: 60%; }
.cb-gallery__arrow--prev { grid-column: 1; }
.cb-gallery__arrow--next { grid-column: 3; }

/* Counter shares the track's grid cell and pins to its bottom-right. */
.cb-gallery__counter {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	justify-self: end;
	margin: clamp(8px, 0.8vw, 14px);
	z-index: 2;
	padding: 0;
	background: transparent;
	color: var(--gold);
	font-size: clamp(12px, 0.9vw, 16px);
	font-variant-numeric: tabular-nums;
	text-shadow: 0 1px 3px rgba(0,0,0,0.6);
	pointer-events: none;
}

/* ==========================================================================
   HERO INTRO ANIMATION (landing page only)
   1. Logo graphic draws itself along its single curve (stroke-dashoffset)
   2. Gold gradient fill fades in once the outline finishes
   3. Logo wordmark rises into view
   4. Tagline rises into view last

   The drawing technique needs the actual path length, so JS measures it
   with getTotalLength() and writes stroke-dasharray + stroke-dashoffset
   inline. JS then adds .is-anim-armed (hides the elements) and on the
   next frame .is-anim-go (kicks off the keyframes). Without JS, or with
   prefers-reduced-motion, none of this applies and the hero renders in
   its normal static state.
   ========================================================================== */
@keyframes cb-hero-draw {
	to { stroke-dashoffset: 0; }
}
@keyframes cb-hero-fill {
	to { fill-opacity: 1; stroke-opacity: 0; }
}
@keyframes cb-hero-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
	/* Step 1 — JS adds .is-anim-armed: prepare the start frame. */
	.cb-hero.is-anim-armed .cb-hero__logo-graphical svg path {
		fill-opacity: 0;
		stroke: #C49F1A;
		stroke-width: 1.2;
		stroke-linecap: round;
		stroke-linejoin: round;
		/* JS sets stroke-dasharray + stroke-dashoffset inline to the
		   measured path length so the curve starts fully invisible.
		   will-change pre-promotes the path so the browser doesn't
		   re-allocate a layer mid-animation (which used to cause a
		   visible hitch on the first few frames of the draw). */
		will-change: stroke-dashoffset, fill-opacity, stroke-opacity;
	}
	.cb-hero.is-anim-armed .cb-hero__logo-text,
	.cb-hero.is-anim-armed .cb-hero__tagline {
		opacity: 0;
		transform: translateY(14px);
		will-change: opacity, transform;
	}

	/* Step 2 — JS adds .is-anim-go on the next frame: run the timeline.

	   Why these timings + easings:
	   * cubic-bezier(0.65, 0, 0.35, 1) = "ease-in-out cubic" — a softer,
	     more even acceleration than CSS's stiff default ease-in-out, so
	     the brush sweeps without the obvious mid-curve speed bump.
	   * The fill now starts AT 2.5s, exactly when the draw finishes
	     (0.3s + 2.2s). Previously they overlapped by 0.2s, which made
	     the stroke fade-out fight with the path still completing — that
	     was the "choppy" feel.
	   * Rise uses a quick-out / settled-in curve so the wordmark and
	     tagline glide rather than abruptly stopping. */
	.cb-hero.is-anim-go .cb-hero__logo-graphical svg path {
		animation:
			cb-hero-draw 2.2s cubic-bezier(0.65, 0, 0.35, 1) 0.3s forwards,
			cb-hero-fill 0.8s ease-out 2.5s forwards;
	}
	.cb-hero.is-anim-go .cb-hero__logo-text {
		animation: cb-hero-rise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 3.0s forwards;
	}
	.cb-hero.is-anim-go .cb-hero__tagline {
		animation: cb-hero-rise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 3.6s forwards;
	}
}

/* ==========================================================================
   DIVIDER REVEAL ANIMATION
   When a divider scrolls into view: logo pops in at the centre first,
   then the two horizontal lines draw outward from the centre to the
   viewport edges.
   IntersectionObserver in main.js arms each divider (.is-divider-armed)
   and triggers it (.is-divider-go) on the first time it intersects.
   ========================================================================== */
@keyframes cb-divider-logo-in {
	from { opacity: 0; transform: scale(0.4); }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes cb-divider-line-draw {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: no-preference) {
	/* Step 1 — armed: hide everything so the start frame is invisible. */
	.cb-divider.is-divider-armed .cb-divider__logo {
		opacity: 0;
		transform: scale(0.4);
	}
	.cb-divider.is-divider-armed .cb-divider__line {
		transform: scaleX(0);
	}
	/* Each line collapses toward the centre (next to the logo) and
	   then grows outward to the screen edge. */
	.cb-divider.is-divider-armed .cb-divider__line:first-child {
		transform-origin: right center;
	}
	.cb-divider.is-divider-armed .cb-divider__line:last-child {
		transform-origin: left center;
	}

	/* Step 2 — go: logo pops in, then the lines draw outward. */
	.cb-divider.is-divider-go .cb-divider__logo {
		animation: cb-divider-logo-in 0.45s ease-out forwards;
	}
	.cb-divider.is-divider-go .cb-divider__line {
		animation: cb-divider-line-draw 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s forwards;
	}
}

/* ==========================================================================
   SCROLL-AWARE TOP BAR
   The site-header is fixed. JS toggles .is-hidden when the user scrolls
   down past the hero, and removes it on scroll-up — same pattern as a
   typical "smart" sticky header. Works on every viewport, not just mobile.
   `will-change` is intentionally NOT set: on iOS Safari it can leave
   `position: fixed` headers behind / cause flicker.
   ========================================================================== */
.site-header { transition: transform 260ms ease; }
.site-header.is-hidden { transform: translateY(-100%); }
/* When the mobile menu is open the page underneath should not scroll. */
body.menu-open { overflow: hidden; }

/* ==========================================================================
   MOBILE (≤ 899px) — single column, hamburger menu, full-page dropdown.
   899px matches the srcset breakpoint used for projekt images, so the
   image columns collapse to full width at the same point.
   ========================================================================== */
@media (max-width: 899px) {
	:root {
		/* Tighter gutter so content has reasonable margins on phones. */
		--gutter:        clamp(18px, 5vw, 36px);
		--section-pad-y: clamp(40px, 9vw, 72px);
		--col-gap:       0;
		--nav-height:    clamp(56px, 14vw, 72px);
		--nav-gutter:    clamp(14px, 4vw, 24px);
	}

	/* ---------- Top bar: graphic-left | text-center | hamburger-right ---------- */
	.top-nav {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		gap: clamp(8px, 2.5vw, 16px);
	}
	.nav-logo-graphical {
		justify-self: start;
		grid-column: 1;
		width: clamp(34px, 9vw, 44px);
	}
	.nav-logo-text {
		display: block;            /* override the desktop "margin-right:auto" centring trick */
		justify-self: center;
		grid-column: 2;
		margin: 0;
		width: clamp(120px, 32vw, 200px);
	}
	.menu-toggle {
		justify-self: end;
		grid-column: 3;
		display: inline-flex;
		flex-direction: column;
		justify-content: space-between;
		width: 32px; height: 22px;
		padding: 0;
		background: transparent;
		border: 0;
		cursor: pointer;
		margin: 0;
	}
	/* Gold-gradient hamburger lines (matches the PROJEKTY title). */
	.menu-toggle .hamburger-line {
		display: block;
		width: 100%; height: 2px;
		background: var(--gold-gradient);
		border-radius: 2px;
		transition: transform 220ms ease, opacity 160ms ease;
		transform-origin: center;
	}
	/* Morph into an X when open. */
	.menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
		transform: translateY(10px) rotate(45deg);
	}
	.menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
		/* Shrink the bar from both sides toward its centre, in sync with
		   lines 1+3 rotating into the X. transform-origin is `center`
		   (set on the base rule), so scaleX(0) collapses symmetrically.
		   Gradient stays at full opacity DURING the shrink so the
		   shortening is clearly visible — then `visibility: hidden`
		   kicks in at the 220ms mark to kill any sub-pixel remnants
		   left by the rounded-end pill at width 0.
		   The override transition keeps transform on its 220ms curve
		   and adds a zero-duration visibility flip with a 220ms delay,
		   so visibility waits until after the shrink finishes. On the
		   reverse (closing the menu), the base rule's transition takes
		   over — visibility reverts to `visible` instantly and the bar
		   grows back from the centre. */
		transform: scaleX(0);
		visibility: hidden;
		transition: transform 220ms ease, visibility 0s 220ms;
	}
	.menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
		transform: translateY(-10px) rotate(-45deg);
	}

	/* ---------- Full-page dropdown overlay (below the top bar) ----------
	   Sits at top:nav-height, fills the rest of the viewport, scrolls
	   internally if its content overflows. Z-index below the bar (1000)
	   so the bar — and therefore the close (X) button — always stays on top. */
	.nav-links {
		position: fixed;
		top: var(--nav-height); left: 0; right: 0; bottom: 0;
		background: var(--night);
		background-image: radial-gradient(
			circle at 50% 30%,
			rgba(29,72,193,0.18) 0%,
			rgba(27,34,62,0) 70%
		);
		display: none;
		height: auto;
		padding: clamp(28px, 7vw, 48px) var(--gutter);
		overflow-y: auto;
		z-index: 999;
		-webkit-overflow-scrolling: touch;
	}
	.nav-links.is-open { display: block; }

	/* Reset to a vertical stack of full-width rows. */
	ul#primary-menu {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: clamp(22px, 5vw, 36px);
		height: auto;
		margin: 0; padding: 0;
		list-style: none;
	}
	ul#primary-menu > li {
		display: block;
		list-style: none;
		margin: 0; padding: 0;
		width: 100%;
		align-self: stretch;
	}
	/* Top-level items keep desktop styling: white, uppercase, gold underline.
	   Only the size is bumped up for touch. */
	ul#primary-menu > li > a {
		display: inline-block;
		font-size: clamp(20px, 4.6vw, 26px);
		padding-bottom: clamp(4px, 1vw, 6px);
	}

	/* Dropdown ("O nás" sub-menu) — show inline as an indented accordion.
	   Sub-items keep desktop colour + lowercase styling, just bumped a
	   touch for readability. */
	.dropdown {
		position: static;
		display: block;
		width: 100%;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		left: auto; top: auto;
		margin-top: clamp(10px, 2.5vw, 16px);
		padding-top: 0;
	}
	.dropdown__notch { display: none; }
	.dropdown > ul {
		position: static;
		background: transparent;
		padding: 0 0 0 clamp(14px, 4vw, 22px);
		margin: 0;
		box-shadow: none;
		border-radius: 0;
		list-style: none;
	}
	.dropdown > ul li {
		display: block;
		list-style: none;
		margin: 0; padding: 0;
	}
	.dropdown > ul li + li { margin-top: clamp(8px, 2vw, 14px); }
	ul#primary-menu li.has-dropdown .dropdown > ul li a {
		display: inline-block;
		font-size: clamp(15px, 3.6vw, 18px);
		padding: clamp(2px, 0.6vw, 4px) 0;
		white-space: normal;
	}

	/* ---------- Single column for every two-column block ---------- */
	.cb-white__block--columns,
	.cb-blue__block--columns,
	.cb-gold-2__block--columns,
	.cb-projekt__inner {
		grid-template-columns: 1fr;
		row-gap: clamp(24px, 6vw, 40px);
	}

	/* Projekt: HTML order is text → image; reset the desktop column /
	   row pinning so they stack naturally, and drop the title-height
	   offset (no title to align with above the image any more). */
	.cb-projekt--image-right .cb-projekt__text,
	.cb-projekt--image-right .cb-projekt__image,
	.cb-projekt--image-left  .cb-projekt__text,
	.cb-projekt--image-left  .cb-projekt__image {
		grid-column: 1;
		grid-row: auto;
	}
	.cb-projekt__image { margin-top: 0; }

	/* Kontakt right col was offset to align with desktop title — not needed. */
	.cb-gold-2__col--right { padding-top: 0; }

	/* Blue right col: tighter top spacing. */
	.cb-blue__col--right { padding-top: 0; }

	/* ---------- Hero (landing) — keep filling the viewport ---------- */
	.cb-hero {
		padding-top: clamp(32px, 8vh, 64px);
		padding-bottom: clamp(32px, 8vh, 64px);
	}
	.cb-hero__inner { gap: clamp(16px, 4vw, 28px); }
	.cb-hero__logo-graphical { width: min(38vw, 150px); }
	.cb-hero__logo-text      { width: min(78vw, 360px); }
	.cb-hero__tagline {
		font-size: clamp(16px, 4.4vw, 22px);
		max-width: 90vw;
	}

	/* Hero (projekty page) — same gutter, smaller PROJEKTY title. */
	.cb-projekty-hero {
		padding-top: clamp(32px, 8vh, 64px);
		padding-bottom: clamp(32px, 8vh, 64px);
	}
	.cb-projekty-hero__title { font-size: clamp(44px, 13vw, 88px); }

	/* ---------- Gallery — bigger touch targets, tighter gap ---------- */
	.cb-gallery { column-gap: clamp(4px, 1.5vw, 10px); }
	.cb-gallery__arrow {
		width: 40px; height: 40px;
	}
	.cb-gallery__arrow:hover,
	.cb-gallery__arrow:focus-visible { transform: none; }
	.cb-gallery__counter {
		font-size: clamp(13px, 3.4vw, 16px);
	}

	/* ---------- Footer ---------- */
	.site-footer { padding-left: var(--gutter); padding-right: var(--gutter); }
	.footer-logo-text { width: clamp(140px, 40vw, 200px); }
}

/* ==========================================================================
   LIGHTBOX
   Click a gallery photo → fullscreen overlay with a dark (but slightly
   transparent) backdrop, the photo at its true aspect ratio, and prev/next
   arrows OUTSIDE the photo on the left and right edges of the viewport.
   ESC + arrow keys + click-outside all close / navigate.
   The lightbox element is created once by JS (initLightbox in main.js)
   and reused for every gallery on the page.
   ========================================================================== */
.cb-lightbox {
	position: fixed;
	inset: 0;
	z-index: 5000;            /* above the sticky header (which is ~1000) */
	background: rgba(0, 0, 0, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	/* Reserve gutters so the side arrows always have room outside the
	   photo, even on tall portrait shots that fill the height. */
	padding: clamp(20px, 5vh, 56px) clamp(64px, 8vw, 120px);
	animation: cb-lightbox-fade 200ms ease-out;
}
.cb-lightbox[hidden] { display: none; }

.cb-lightbox__figure {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cb-lightbox__img {
	max-width: 100%;
	/* 90vh leaves room for the counter strip at the bottom. */
	max-height: 90vh;
	object-fit: contain;       /* preserve original aspect ratio */
	display: block;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
	user-select: none;
	-webkit-user-drag: none;
	/* Default smooth animation curve for snap-back / slide-in /
	   slide-out. JS sets `transition: none` while a finger is dragging
	   so the image follows in real time, then restores the default
	   the instant the finger lifts so the snap animates cleanly. */
	transition: transform 280ms cubic-bezier(0.2, 0.7, 0.3, 1);
	will-change: transform;
}

/* Side arrows (outside the photo, on the dark backdrop).
   Filled with a SOLID dark disc + white icon so they read against any
   photo — including bright/white photos where a white-on-translucent
   button would just disappear into the image. The drop-shadow halo
   adds a faint dark gradient just outside the disc edge for extra
   separation when the photo behind is very light.

   z-index: 2 is critical: the image has `will-change: transform`, which
   makes it a stacking context. Because the <figure> wrapper is NOT a
   stacking context, the image is promoted into the lightbox's stacking
   order at z-index auto (0), where tree order decides who paints over
   whom. The prev arrow appears in the DOM BEFORE the figure, so without
   an explicit positive z-index it would paint behind the image. (The
   next arrow appears AFTER the figure so it would happen to be on top.)
   Forcing every control to z-index 2 puts them in the "positive z" band
   that always paints last, regardless of DOM order. */
.cb-lightbox__arrow,
.cb-lightbox__close,
.cb-lightbox__counter {
	z-index: 2;
}
.cb-lightbox__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: clamp(44px, 5vw, 56px);
	height: clamp(44px, 5vw, 56px);
	display: flex; align-items: center; justify-content: center;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
	transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.cb-lightbox__arrow:hover,
.cb-lightbox__arrow:focus-visible {
	background: rgba(0, 0, 0, 0.8);
	border-color: rgba(255, 255, 255, 0.6);
	outline: none;
	transform: translateY(-50%) scale(1.06);
}
.cb-lightbox__arrow svg { width: 50%; height: 50%; }
.cb-lightbox__arrow--prev { left: clamp(8px, 2vw, 24px); }
.cb-lightbox__arrow--next { right: clamp(8px, 2vw, 24px); }

/* Close (X) in the top-right — same visibility treatment as the arrows. */
.cb-lightbox__close {
	position: absolute;
	top: clamp(12px, 2vh, 24px);
	right: clamp(12px, 2vw, 24px);
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
	transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.cb-lightbox__close:hover,
.cb-lightbox__close:focus-visible {
	background: rgba(0, 0, 0, 0.8);
	border-color: rgba(255, 255, 255, 0.6);
	outline: none;
	transform: scale(1.06);
}
.cb-lightbox__close svg { width: 50%; height: 50%; }

/* Counter pill, centered along the bottom edge. */
.cb-lightbox__counter {
	position: absolute;
	bottom: clamp(14px, 3vh, 28px);
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.9);
	font-size: clamp(13px, 1.1vw, 15px);
	font-variant-numeric: tabular-nums;
	background: rgba(0, 0, 0, 0.45);
	padding: 6px 14px;
	border-radius: 999px;
	pointer-events: none;
}

/* JS toggles `is-hidden` on these for single-image galleries. */
.cb-lightbox__arrow.is-hidden,
.cb-lightbox__counter.is-hidden { display: none; }

/* Lock the page behind the lightbox so it can't scroll. */
body.lb-open { overflow: hidden; }

@keyframes cb-lightbox-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* On phones the side gutters get tight; pull arrows in flush to the edge
   and accept that they may briefly overlap a wide landscape photo's
   corners. The dark translucent disc keeps them readable. */
@media (max-width: 600px) {
	.cb-lightbox { padding: clamp(20px, 8vh, 56px) 8px; }
	.cb-lightbox__arrow--prev { left: 4px; }
	.cb-lightbox__arrow--next { right: 4px; }
}