/* ==========================================================================
   KUDLA.LT — reusable section components
   ========================================================================== */

/* -- generic prose / plain pages ---------------------------------------- */
.k-prose { max-width: 720px; }
.k-prose h2 { margin-top: 1.6em; }
.k-prose h3 { margin-top: 1.4em; }
.k-prose ul, .k-prose ol { margin: 1em 0 1em 1.2em; }
.k-prose a { text-decoration: underline; text-underline-offset: 3px; }
.k-plain h1 { max-width: 20ch; }

.k-postlist {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 40px;
	margin-top: 40px;
}
.k-postcard__media { aspect-ratio: 4 / 5; display: block; margin-bottom: 16px; }
.k-postcard__title { font-size: 1.25rem; margin-bottom: 8px; }

/* -- hero --------------------------------------------------------------- */
.k-hero {
	position: relative;
	min-height: clamp(480px, 78vh, 820px);
	margin-top: calc(-1 * var(--k-header-h));
	padding-top: var(--k-header-h);
	display: grid;
	align-items: center;
	isolation: isolate;
	background: #B3AB98; /* Figma hero reads as a light, near-flat warm taupe */
}
.k-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
}
.k-hero__media img, .k-hero__media video { width: 100%; height: 100%; object-fit: cover; }
/* Figma hero = a light warm-taupe near-flat backdrop with the statement baked
   over it. Wash whatever media sits behind toward that tone + a soft vignette. */
.k-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(rgba(179, 171, 152, 0.44), rgba(179, 171, 152, 0.44)),
		radial-gradient(120% 120% at 50% 50%, transparent 52%, rgba(0, 0, 0, 0.16));
}
.k-hero__inner { text-align: center; position: relative; z-index: 2; }
.k-hero__title {
	font-family: var(--k-font-sans);
	color: var(--k-pure);
	font-weight: 700;
	font-size: clamp(1.6rem, 1rem + 2vw, 2.25rem);
	text-transform: uppercase;
	letter-spacing: 0;
	line-height: 1.16;
	max-width: 20ch;
	margin-inline: auto;
}
.k-hero__sub { margin-top: 1.4em; }

/* -- full-width band (marquee / statement) ----------------------------- */
.k-band {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 8px var(--k-gutter);
	overflow: hidden;
}
.k-band--dark { background: var(--k-pure); color: var(--k-white); }
.k-band__text {
	/* Figma: a slim bar with small Playfair caps — much smaller than a heading. */
	font-family: var(--k-font-serif);
	font-size: clamp(0.9375rem, 0.78rem + 0.45vw, 1.125rem);
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-transform: uppercase;
	white-space: nowrap;
}

/* -- split section (media + content) --------------------------------------- */
.k-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	min-height: clamp(520px, 82vh, 900px);
}
.k-split--flip { direction: rtl; }
.k-split--flip > * { direction: ltr; }
.k-split__media { position: relative; overflow: hidden; }
.k-split__media img, .k-split__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.k-split__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(48px, 7vw, 110px) var(--k-gutter);
	max-width: 720px;
}
.k-split__label { margin-bottom: 22px; }
.k-split__title { margin-bottom: 14px; }
.k-split__title.k-serif { font-size: var(--k-fs-h2); max-width: 18ch; }
.k-split__text { color: var(--k-black); max-width: 52ch; }
.k-split__text + .k-split__text { margin-top: 1.1em; }
.k-split__actions { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }

/* -- overlay media section (text over image) ---------------------------- */
.k-overlay {
	position: relative;
	min-height: clamp(460px, 70vh, 760px);
	display: grid;
	align-items: center;
	isolation: isolate;
	overflow: hidden;
}
.k-overlay__media { position: absolute; inset: 0; z-index: 0; margin: 0; }
.k-overlay__media img, .k-overlay__media video { width: 100%; height: 100%; object-fit: cover; }
.k-overlay__inner { position: relative; z-index: 2; }
.k-overlay--dark { color: var(--k-cream); }
.k-overlay__inner { max-width: var(--k-container); margin-inline: auto; padding-inline: var(--k-gutter); width: 100%; }
.k-overlay__inner--center { text-align: center; }
.k-overlay__inner--end { text-align: right; }
.k-overlay__title { max-width: 16ch; margin-left: auto; }
.k-overlay__title.k-serif { font-size: var(--k-fs-h1); }
.k-overlay__text { margin-top: 1.2em; max-width: 44ch; }
.k-overlay__inner--end .k-overlay__text { margin-left: auto; }
.k-overlay__actions { margin-top: 30px; }

/* -- media only ------------------------------------------------------------ */
.k-fullmedia { position: relative; overflow: hidden; line-height: 0; }
/* Figma: a solid black divider strip sits between the intro section and this
   full-bleed photograph. */
.k-fullmedia::before {
	content: "";
	display: block;
	width: 100%;
	height: clamp(36px, 3.4vw, 48px);
	background: var(--k-pure);
}
.k-fullmedia .k-media { aspect-ratio: 16 / 8.4; }
.k-fullmedia img, .k-fullmedia video { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .k-fullmedia .k-media { aspect-ratio: 4 / 5; } }

/* -- home: brand intro -------------------------------------------------- */
.k-intro { min-height: clamp(460px, 49vw, 709px); align-items: end; }
.k-intro .k-overlay__media img { object-position: center 62%; }
.k-intro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(35,30,26,0) 45%, rgba(35,30,26,0.05)); z-index: 1; pointer-events: none; }
/* Figma: text column is the right half, left-aligned inside it, and sits LOW
   in the section (baseline ~14% off the bottom). Heading Outfit 35 / 400
   uppercase (~500px wide → 2 lines), body Outfit 16 / 400 uppercase, two
   paragraphs with a blank-line gap, line-height 1.5, letter-spacing 0, black. */
.k-intro .k-overlay__inner--end { text-align: left; }
.k-intro .k-overlay__inner { padding-block: clamp(40px, 8vw, 90px) clamp(44px, 9vw, 104px); }
.k-intro__title {
	font-family: var(--k-font-sans);
	font-size: clamp(1.375rem, 0.95rem + 1vw, 1.75rem);
	font-weight: 400;
	line-height: 1.16;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #000;
	max-width: 560px;
	margin-left: auto;
}
.k-intro__body {
	margin-top: 1.6em;
	/* Same width as the heading so both blocks share one left edge (Figma). */
	max-width: 560px;
	margin-left: auto;
	font-size: 0.8125rem;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #000;
	line-height: 1.5;
}
.k-intro__body p + p { margin-top: 1.5em; }

/* -- home: diagnostics CTA ------------------------------------------------- */
/* Figma: a compact wide band that floats on the cream page — a strip of
   cream above it separates it from the full-width photo. */
.k-diagcta { min-height: clamp(300px, 34vw, 400px); margin-top: clamp(16px, 2.4vw, 32px); }
.k-diagcta .k-overlay__media img { object-position: center 45%; }
.k-diagcta .k-overlay__media::after { content: ""; position: absolute; inset: 0; background: rgba(20, 18, 16, 0.42); z-index: 1; }
.k-diagcta__text {
	max-width: 40ch;
	margin-inline: auto;
	font-family: var(--k-font-serif);
	font-size: clamp(1rem, 0.85rem + 0.7vw, 1.25rem);
	font-weight: 400;
	letter-spacing: 0;
	color: #fff;
	line-height: 1.4;
	margin-bottom: 26px;
}
/* Home diagnostics CTA button is editorial serif (Figma: Playfair 18). */
.k-diagcta .k-btn {
	font-family: var(--k-font-serif);
	font-size: 1.125rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	padding: 14px 30px;
}
/* The recurring "Registracija" / "Atlik plaukų testą" buttons on content
   pages are small, sans, sentence-case in a tight rectangle. */
.k-closing .k-btn,
.k-ctaband .k-btn {
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	padding: 12px 26px;
}

/* -- home: "did you know" ----------------------------------------------- *
 * Figma: filter chips across the top, then two columns — left holds the
 * serif heading (top), the current fact (lower) and the ← → arrows;
 * right holds one tall portrait image.
 * -------------------------------------------------------------------- */
.k-know__chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: clamp(28px, 4vw, 44px); }
/* Figma: small fully-rounded pill chips with a thin rule, not near-square. */
.k-know__chips .k-chip {
	border-radius: 999px;
	padding: 4px 13px;
	font-size: 0.8125rem;
	letter-spacing: 0.01em;
}
.k-know__grid {
	display: grid;
	/* right column is a portrait image — cap its width so on wide monitors it
	   stays portrait (Figma) instead of stretching to a landscape strip. */
	grid-template-columns: 1fr minmax(0, 520px);
	gap: clamp(32px, 6vw, 96px);
	align-items: stretch;
}
.k-know__col { display: flex; flex-direction: column; min-height: 0; }
.k-know__title {
	font-size: clamp(1.5rem, 1rem + 1.25vw, 1.875rem);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--k-black);
	max-width: 20ch;
}
/* Figma: the fact + arrows sit near the BOTTOM of the column, which is capped
   to the image height so the whole section fits a laptop screen. */
.k-know__facts { margin-top: auto; padding-top: 0; }
.k-know__fact[hidden] { display: none; }
.k-know__fact h3 { font-size: 0.9375rem; font-weight: 500; margin-bottom: 12px; color: #000; line-height: 1.35; }
.k-know__fact p { color: #000; max-width: 42ch; font-size: 0.8125rem; line-height: 1.55; }
.k-know__nav { display: flex; gap: 12px; margin-top: 22px; }
/* Figma: the fact-slider arrows in this section are round. */
.k-know__nav .k-arrow { border-radius: 50%; }
/* Fixed box: every slide image fills this same frame (object-fit: cover), so a
   picture's own dimensions never resize the section. Height is bounded so the
   whole block still fits a laptop screen — was an unbounded 583/861 aspect
   ratio that grew to ~1100px on wide monitors. */
.k-know__media { position: relative; height: clamp(520px, 68vh, 700px); overflow: hidden; background: var(--k-cream); }
.k-know__mslot { position: absolute; inset: 0; margin: 0; }
.k-know__mslot img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.k-know__mslot[hidden] { display: none; }
@media (max-width: 960px) {
	.k-know__grid { grid-template-columns: 1fr; }
	/* Figma mobile order: chips → heading → fact → body → image → ← → arrows.
	   display:contents lifts the column's children into the grid so the nav
	   can be ordered AFTER the image. */
	.k-know__col { display: contents; }
	.k-know__title { order: 1; font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.125rem); margin-bottom: 22px; }
	.k-know__facts { order: 2; margin-top: 0; margin-bottom: clamp(24px, 6vw, 38px); padding-top: 0; }
	.k-know__media { order: 3; height: auto; aspect-ratio: 3 / 4; }
	.k-know__nav { order: 4; margin-top: clamp(18px, 5vw, 28px); justify-content: center; }
	.k-know__fact h3 { font-size: 1rem; }
	.k-know__fact p { font-size: 0.9375rem; line-height: 1.5; }
	/* chips stack one per row on mobile, larger */
	.k-know__chips { flex-direction: column; align-items: flex-start; gap: 13px; }
	.k-know__chips .k-chip { font-size: 1rem; padding: 6px 18px; }
}

/* -- home: dark closing ("SUPRASK SAVO PLAUKUS.") ---------------------- *
 * Figma: title small Playfair caps, right-aligned, near the TOP; body small
 * Playfair caps, left-aligned, ~30% in from the left and low in the section. */
.k-closing { min-height: clamp(440px, 45vw, 620px); align-items: stretch; }
.k-closing .k-overlay__media::after { content: ""; position: absolute; inset: 0; background: rgba(12, 11, 10, 0.42); z-index: 1; }
.k-closing .k-overlay__inner {
	display: flex;
	flex-direction: column;
	padding-block: clamp(40px, 7vw, 84px);
}
.k-closing__title {
	font-family: var(--k-font-serif);
	font-size: clamp(1.25rem, 0.95rem + 0.75vw, 1.4375rem);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #fff;
	text-align: right;
	/* wide enough for "SUPRASK SAVO" on line 1, "PLAUKUS." on line 2 */
	max-width: 220px;
	margin-left: auto;
	line-height: 1.28;
}
.k-closing__text {
	/* Figma: sits around 58% down, not pinned to the bottom. */
	margin-top: clamp(130px, 24vw, 280px);
	margin-bottom: 0;
	margin-left: clamp(0px, 30%, 420px);
	margin-right: auto;
	/* narrow enough to wrap to 3 lines like Figma */
	max-width: 270px;
	font-family: var(--k-font-serif);
	font-size: clamp(0.75rem, 0.68rem + 0.35vw, 0.875rem);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: #fff;
	line-height: 1.42;
	text-align: left;
}
.k-closing__actions { margin-top: 24px; }
@media (max-width: 720px) {
	.k-closing { min-height: clamp(420px, 112vw, 560px); }
	.k-closing .k-overlay__inner { padding-top: clamp(64px, 20vw, 104px); }
	.k-closing__title {
		text-align: left;
		margin-left: 0;
		max-width: none;
		font-size: clamp(1rem, 0.85rem + 0.6vw, 1.1875rem);
		line-height: 1.3;
	}
	/* body sits low in the section and wraps to 3 lines like Figma */
	.k-closing__text {
		margin-left: 0;
		margin-top: auto;
		margin-bottom: clamp(44px, 13vw, 88px);
		max-width: 210px;
		font-size: 0.8125rem;
		line-height: 1.45;
	}
}

/* -- sand text card ----------------------------------------------------- */
.k-cardgrid { display: grid; gap: 24px; }
.k-cardgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-cardgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.k-textcard {
	background: var(--k-sand);
	padding: clamp(28px, 3vw, 44px);
	color: var(--k-brown);
}
.k-textcard h3 { font-size: 1.125rem; margin-bottom: 10px; }

/* -- stat row -------------------------------------------------------------- */
.k-stats {
	display: flex;
	justify-content: center;
	gap: clamp(40px, 8vw, 120px);
	text-align: center;
}
.k-stat__num {
	font-family: var(--k-font-lusitana);
	font-size: clamp(2.75rem, 1rem + 6vw, 4rem);
	font-weight: 400;
	line-height: 1.1;
	color: var(--k-black);
}
.k-stat__cap { margin-top: 10px; font-size: 0.875rem; color: var(--k-black); max-width: 22ch; }

/* -- "did you know" / editorial block with carousel ------------------- */
.k-editorial { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.k-editorial__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.k-editorial__title.k-serif { font-size: var(--k-fs-h1); }
.k-editorial__body { color: var(--k-text-muted); margin-top: 1.4em; max-width: 40ch; }
.k-editorial__nav { display: flex; gap: 12px; margin-top: 30px; }
.k-editorial__media { aspect-ratio: 4 / 5; }

/* -- carousel primitive -------------------------------------------------- */
.k-carousel__track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.k-carousel__track::-webkit-scrollbar { display: none; }
.k-carousel__track > * { scroll-snap-align: start; flex: 0 0 auto; }

/* -- responsive ------------------------------------------------------------- */
@media (max-width: 900px) {
	.k-split { grid-template-columns: 1fr; min-height: 0; }
	.k-split--flip { direction: ltr; }
	.k-split__media { aspect-ratio: 16 / 10; }
	.k-split__body { max-width: none; padding-block: clamp(36px, 9vw, 56px); }
	.k-editorial { grid-template-columns: 1fr; }
	.k-editorial__media { order: -1; }
	.k-cardgrid--2, .k-cardgrid--3 { grid-template-columns: 1fr; }
	.k-overlay__title, .k-overlay__inner--end .k-overlay__text { margin-left: 0; }
	.k-overlay__inner--end { text-align: left; }
	/* Mobile intro (Figma): text block low over the image, left-aligned,
	   smaller heading + body. */
	.k-intro { align-items: end; min-height: clamp(440px, 118vw, 620px); }
	.k-intro .k-overlay__inner { padding-block: 0 clamp(36px, 11vw, 64px); }
	.k-intro__title, .k-intro__body { margin-left: 0; max-width: none; }
	.k-intro__title { font-size: clamp(1.125rem, 0.85rem + 1.8vw, 1.5rem); line-height: 1.18; }
	.k-intro__body { font-size: clamp(0.6875rem, 0.62rem + 0.35vw, 0.8125rem); line-height: 1.45; margin-top: 1.3em; }
	.k-intro__body p + p { margin-top: 1.3em; }
	.k-stats { flex-wrap: wrap; gap: 32px; }
}