/* =====================================================================
   LOBYNAS — turinio atradimo centras (/lobynas)

   Kortelės remiasi TIKRAIS turinio paveikslėliais (dailininko kūrinys,
   istorijos įvykio fonas, citatos fonas), todėl tekstas NIEKADA nededamas
   ant nuotraukos — jis gyvena vientisame korpuse po ja. Vienintelė išimtis
   yra citatos kortelė, kur paveikslėlis sąmoningai nublukintas iki fono ir
   virš jo dar guli tamsi danga (žr. .lobynas-card--quote).

   Tinklelis auga savaime: `auto-fit` + `minmax`, tad naujos kolekcijos
   kortelės ateityje įsiterps be CSS keitimo.
   ===================================================================== */

.lobynas-page {
	max-width: 1080px;
	margin: 0 auto;
	padding: clamp(1rem, 4vw, 2.5rem) clamp(1rem, 4vw, 2rem) clamp(3rem, 8vw, 4.5rem);
	color: var(--color-text-primary, #f5f5fa);
}

/* ---------- Antraštė ---------- */

.lobynas-hero {
	margin-bottom: clamp(1.75rem, 5vw, 2.75rem);
}

.lobynas-hero__date {
	margin: 0 0 var(--spacing-sm, 0.5rem);
	font-family: var(--font-mono, 'JetBrains Mono', 'Consolas', monospace);
	font-size: var(--font-size-xs, 0.75rem);
	font-weight: var(--font-weight-semibold, 600);
	letter-spacing: var(--letter-spacing-wider, 0.1em);
	text-transform: uppercase;
	color: var(--color-accent-gold, #e7ca93);
}

.lobynas-hero__title {
	margin: 0 0 var(--spacing-sm, 0.5rem);
	font-family: var(--font-display, 'Exo 2', sans-serif);
	font-size: clamp(2rem, 7vw, 3.25rem);
	font-weight: var(--font-weight-bold, 700);
	line-height: var(--line-height-tight, 1.25);
}

.lobynas-hero__sub {
	max-width: 46ch;
	margin: 0;
	font-size: clamp(0.95rem, 2.4vw, 1.0625rem);
	line-height: var(--line-height-relaxed, 1.625);
	color: var(--color-text-secondary, #adadc9);
}

/* ---------- Sekcijos antraštė ---------- */

.lobynas-section {
	display: flex;
	align-items: center;
	gap: var(--spacing-md, 1rem);
	margin: 0 0 var(--spacing-md, 1rem);
	font-family: var(--font-mono, 'JetBrains Mono', 'Consolas', monospace);
	font-size: var(--font-size-xs, 0.75rem);
	font-weight: var(--font-weight-semibold, 600);
	letter-spacing: var(--letter-spacing-wider, 0.1em);
	text-transform: uppercase;
	color: var(--color-text-secondary, #adadc9);
}

.lobynas-section::after {
	content: '';
	flex: 1;
	height: 1px;
	background: linear-gradient(
		90deg,
		var(--color-border-subtle, #252538) 0%,
		transparent 100%
	);
}

.lobynas-section:not(:first-of-type) {
	margin-top: clamp(2rem, 6vw, 3rem);
}

/* ---------- Kortelių tinklelis ---------- */

.lobynas-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(0.875rem, 2.5vw, 1.25rem);
}

/* 340px riba parinkta taip, kad 1080px konteineryje susidarytų DU stulpeliai.
   Su 300px `auto-fit` suskaičiuotų tris takus, o trečias liktų tuščias —
   dvi kortelės atrodytų nustumtos į kairę. Atsiradus trečiai kortelei ji
   persikels į naują eilutę savaime. */
@media (min-width: 768px) {
	.lobynas-grid {
		grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	}
}

/* ---------- Kortelė ---------- */

.lobynas-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--color-bg-secondary, #1a1a2e);
	border: 1px solid var(--color-border-subtle, #252538);
	border-radius: var(--radius-xl, 1rem);
	text-decoration: none;
	color: inherit;
	contain: layout paint;
	transition:
		border-color var(--duration-base, 250ms) var(--ease-default, ease-out),
		transform var(--duration-base, 250ms) var(--ease-default, ease-out),
		box-shadow var(--duration-base, 250ms) var(--ease-default, ease-out);
}

.lobynas-card:hover,
.lobynas-card:focus-visible {
	border-color: var(--color-border-hover, #e7ca93);
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45),
		0 0 0 1px var(--color-shadow-gold, rgba(252, 211, 77, 0.2));
}

.lobynas-card:focus-visible {
	outline: 2px solid var(--color-border-focus, #fdd970);
	outline-offset: 3px;
}

/* --- Paveikslėlio zona --- */

.lobynas-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--gradient-primary, linear-gradient(135deg, #0f0f1f, #1a1a2e));
	overflow: hidden;
}

.lobynas-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--duration-slow, 500ms) var(--ease-smooth, ease);
}

.lobynas-card:hover .lobynas-card__img {
	transform: scale(1.04);
}

/* Perėjimas į korpusą — kad nuotraukos apačia nesibaigtų aštria riba */
.lobynas-card__media::after {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: 45%;
	background: linear-gradient(180deg, transparent 0%, var(--color-bg-secondary, #1a1a2e) 100%);
	pointer-events: none;
}

/* Kai paveikslėlio nėra — didelis emoji vietoj tuščio stačiakampio */
.lobynas-card__glyph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(2.5rem, 8vw, 3.5rem);
	opacity: 0.35;
}

/* Dailininko portretas — apskritimas ant kūrinio krašto */
.lobynas-card__portrait {
	position: absolute;
	left: var(--spacing-md, 1rem);
	bottom: var(--spacing-sm, 0.5rem);
	z-index: 1;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: var(--radius-full, 9999px);
	object-fit: cover;
	object-position: top center;
	border: 2px solid var(--color-accent-gold, #e7ca93);
	background: var(--color-bg-primary, #0f0f1f);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

/* Metų ženklas — istorijos kortelė */
.lobynas-card__year {
	position: absolute;
	top: var(--spacing-sm, 0.5rem);
	right: var(--spacing-sm, 0.5rem);
	z-index: 1;
	padding: 0.3rem 0.6rem;
	border-radius: var(--radius-full, 9999px);
	font-family: var(--font-mono, 'JetBrains Mono', 'Consolas', monospace);
	font-size: var(--font-size-sm, 0.875rem);
	font-weight: var(--font-weight-bold, 700);
	color: var(--color-accent-gold, #e7ca93);
	background: rgba(9, 9, 18, 0.82);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(231, 202, 147, 0.35);
}

/* --- Tekstinis korpusas --- */

.lobynas-card__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.35rem;
	padding: var(--spacing-md, 1rem) clamp(1rem, 3vw, 1.375rem) clamp(1rem, 3vw, 1.375rem);
}

.lobynas-card__kicker {
	font-size: var(--font-size-xs, 0.75rem);
	font-weight: var(--font-weight-bold, 700);
	letter-spacing: var(--letter-spacing-wider, 0.1em);
	text-transform: uppercase;
	color: var(--color-text-secondary, #adadc9);
}

.lobynas-card__title {
	font-size: clamp(1.0625rem, 2.6vw, 1.375rem);
	font-weight: var(--font-weight-bold, 700);
	line-height: var(--line-height-tight, 1.25);
}

.lobynas-card__meta {
	font-size: var(--font-size-sm, 0.875rem);
	color: var(--color-text-secondary, #adadc9);
}

.lobynas-card__text {
	margin-top: 0.15rem;
	font-size: var(--font-size-sm, 0.875rem);
	line-height: var(--line-height-normal, 1.5);
	color: var(--color-text-secondary, #adadc9);
	/* Trys eilutės — ilgesnis short_text neišbalansuotų tinklelio */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lobynas-card__cta {
	margin-top: auto;
	padding-top: var(--spacing-sm, 0.5rem);
	font-size: var(--font-size-sm, 0.875rem);
	font-weight: var(--font-weight-semibold, 600);
	color: var(--color-accent-gold, #e7ca93);
}

.lobynas-card__cta::after {
	content: '→';
	display: inline-block;
	/* margin, o ne tarpas content'e — tarpas prieš rodyklę susitraukia */
	margin-left: 0.35em;
	transition: transform var(--duration-fast, 150ms) var(--ease-default, ease-out);
}

.lobynas-card:hover .lobynas-card__cta::after {
	transform: translateX(4px);
}

/* --- Citatos kortelė: paveikslėlis kaip fonas, ne kaip antraštė --- */

.lobynas-card--quote {
	min-height: 11rem;
	isolation: isolate;
}

/* Centruojam PAČIAME korpuse: .lobynas-card__body turi flex:1, tad kortelės
   justify-content jo nepajudintų ir tekstas liktų prilipęs prie viršaus.
   z-index 2 — virš dangos (1) ir fono paveikslėlio (0). */
.lobynas-card--quote .lobynas-card__body {
	justify-content: center;
	z-index: 2;
}

@media (min-width: 768px) {
	.lobynas-card--quote {
		grid-column: 1 / -1;
	}
}

.lobynas-card__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.9) brightness(0.95);
	transition: transform var(--duration-slow, 500ms) var(--ease-smooth, ease);
}

/* Danga guli VIRŠ paveikslėlio (z-index 1 prieš .lobynas-card__bg z-index 0).
   Be to citatos fonas nustelbtų tekstą: pseudoelementas piešiamas anksčiau
   už <img> tame pačiame sluoksnyje, tad be z-index paveikslėlis atsidurtų
   viršuje. Mobiliajame danga tolygi, plačiame ekrane — tamsi kairėje (ten
   tekstas) ir permatomesnė dešinėje, kur paveikslėliui leidžiama pasirodyti. */
.lobynas-card--quote::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(11, 11, 22, 0.9) 0%,
		rgba(11, 11, 22, 0.93) 100%
	);
	pointer-events: none;
}

@media (min-width: 768px) {
	.lobynas-card--quote::before {
		background: linear-gradient(
			90deg,
			rgba(11, 11, 22, 0.95) 0%,
			rgba(11, 11, 22, 0.9) 45%,
			rgba(11, 11, 22, 0.72) 100%
		);
	}

	/* Tekstas neperžengia tamsiosios dangos pusės — taip kontrastas lieka
	   virš 4,5:1 net ant šviesiausio citatos fono. */
	.lobynas-card--quote .lobynas-card__body {
		max-width: 58%;
	}
}

.lobynas-card--quote:hover .lobynas-card__bg {
	transform: scale(1.03);
}

.lobynas-card__quote {
	margin: 0.25rem 0 0;
	font-size: clamp(1rem, 2.8vw, 1.25rem);
	font-style: italic;
	line-height: var(--line-height-relaxed, 1.625);
	color: var(--color-text-primary, #f5f5fa);
	/* Ilgos citatos neturi ištempti kortelės per visą ekraną */
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lobynas-card__quote::before {
	content: '„';
	color: var(--color-accent-gold, #e7ca93);
}

.lobynas-card__quote::after {
	content: '"';
	color: var(--color-accent-gold, #e7ca93);
}

.lobynas-card__author {
	margin-top: var(--spacing-sm, 0.5rem);
	font-size: var(--font-size-sm, 0.875rem);
	font-weight: var(--font-weight-semibold, 600);
	color: var(--color-accent-gold, #e7ca93);
}

/* --- Kortelė be turinio (dar nėra nė vieno įrašo) --- */

.lobynas-card--empty .lobynas-card__body {
	padding: clamp(1.25rem, 4vw, 1.75rem);
}

/* ---------- Kolekcijų juosta ---------- */

.lobynas-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-sm, 0.5rem);
}

.lobynas-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	/* Buvo 42px — dviejų pikselių pritrūko iki lietimo taikinio ribos. */
	min-height: 44px;
	padding: 0.6rem 0.9rem;
	background: var(--color-bg-secondary, #1a1a2e);
	border: 1px solid var(--color-border-subtle, #252538);
	border-radius: var(--radius-full, 9999px);
	text-decoration: none;
	color: var(--color-text-primary, #f5f5fa);
	font-size: var(--font-size-sm, 0.875rem);
	font-weight: var(--font-weight-medium, 500);
	transition:
		border-color var(--duration-fast, 150ms) var(--ease-default, ease-out),
		background var(--duration-fast, 150ms) var(--ease-default, ease-out);
}

a.lobynas-chip:hover,
a.lobynas-chip:focus-visible {
	border-color: var(--color-border-hover, #e7ca93);
	background: var(--color-bg-tertiary, #252538);
}

a.lobynas-chip:focus-visible {
	outline: 2px solid var(--color-border-focus, #fdd970);
	outline-offset: 2px;
}

.lobynas-chip__icon {
	font-size: 1rem;
	line-height: 1;
}

.lobynas-chip__count {
	padding: 0.1rem 0.45rem;
	border-radius: var(--radius-full, 9999px);
	background: rgba(231, 202, 147, 0.14);
	font-family: var(--font-mono, 'JetBrains Mono', 'Consolas', monospace);
	font-size: var(--font-size-xs, 0.75rem);
	font-weight: var(--font-weight-semibold, 600);
	color: var(--color-accent-gold, #e7ca93);
}

.lobynas-chip--soon {
	border-style: dashed;
	color: var(--color-text-secondary, #adadc9);
	cursor: default;
}

.lobynas-chip--soon .lobynas-chip__count {
	background: rgba(173, 173, 201, 0.12);
	color: var(--color-text-secondary, #adadc9);
	text-transform: lowercase;
}

/* --- Geografijos kortelė --- */

/* Diorama generuojama kvadratu ir su tarpu aplink objektą (žr. geoPrompts.php),
   o kortelės medija zona yra 16/10. `cover` nukirstų viršų ir apačią — kartu
   su Italijos „bato" galu. Todėl čia `contain` ant tos pačios šiltai baltos
   studijinės plokštumos, kurios prašo promptas: vaizdas lieka visas, o laisvos
   juostos šonuose atrodo kaip pačio kadro fonas, ne kaip tuštuma. */
.lobynas-card--geo .lobynas-card__media {
	background: #f5f1e8;
}

.lobynas-card--geo .lobynas-card__img {
	object-fit: contain;
}