/* =========================================================
   8Erikas — journal.css
   Žurnalo archyvas (/zurnalas/). Kraunamas TIK Žurnalo šablone
   (inc/enqueue.php), po main.css.

   TINKLELIO IDĖJA

   Asimetrija (1 — 2 — 3·3·3) gyvena ne HTML struktūroje, o stulpelių
   pločiuose. Vienas 6 stulpelių tinklelis, trys kortelės variantai:

       .jcard--hero  span 6   ->  1 per eilutę
       .jcard--wide  span 3   ->  2 per eilutę
       .jcard--std   span 2   ->  3 per eilutę

   Dėl to AJAX kortelė yra tiesiog dar vienas tinklelio vaikas: jokių
   „eilučių" wrapper'ių, kuriuos reiktų užpildyti iki galo, ir jokios
   nematomos siūlės ties 12-ąja kortele. Variantą kortelei priskiria PHP
   pagal absoliutų indeksą (inc/journal.php, erikas_journal_variant()).

   6 = mažiausias bendras kartotinis 1, 2 ir 3 — todėl visos trys eilučių
   formos telpa be trupmenų. Keisdamas stulpelių skaičių, keisk ir visus
   tris span'us kartu.
   ========================================================= */

/* ---------- Tokens ----------
   Lokalūs kintamieji, ne globalūs: jie prasmingi tik šiame šablone.
   Radiusas ir šriftai ateina iš main.css — čia nėra nė vienos savos
   spalvos, kurios nebūtų perdanga ant nuotraukos. */
.journal {
	--jcard-radius: 20px;
	--jgap: clamp(0.75rem, 1.4vw, 1.5rem);

	/* Kortelių proporcijos — VIENINTELĖ vieta, kur nustatomas nuotraukų
	   aukštis. Kortelė aukščio niekur nefiksuoja: ji išplaukia iš stulpelio
	   pločio ir šitų trijų santykių, tad žemesnės nuotraukos yra trys
	   skaičiai, o ne perrašytos taisyklės.

	   Telefone visos trys suplokštinamos į vieną formą, žr. media query
	   apačioje. */
	--jar-hero: 5 / 2;
	--jar-wide: 16 / 9;
	--jar-std: 3 / 2;

	/* Perdangos stiprumas. Nuotraukos nežinom iš anksto, tad gradientas turi
	   išlaikyti baltą tekstą ir ant šviesaus dangaus — todėl apačioje 0.85,
	   o ne „subtilūs" 0.5. */
	--jveil: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.85) 100%);
}

/* ---------- Antraštė ---------- */
.journal__head {
	max-width: var(--measure);
	margin-bottom: clamp(1.75rem, 3vw, 3rem);
}

.journal__eyebrow { margin-bottom: 1rem; }

.journal__title {
	font-family: var(--font-serif);
	font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin: 0;
	color: var(--stone-900);
}

.journal__lede {
	margin: 1rem 0 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--stone-500);
}

.journal__intro { margin-top: 1rem; color: var(--stone-600); }
.journal__intro > :last-child { margin-bottom: 0; }

.journal__empty {
	padding: 4rem 0;
	text-align: center;
	color: var(--stone-500);
}

/* ---------- Tinklelis ---------- */
.journal__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--jgap);
	/* Kortelės pačios nustato aukštį per aspect-ratio; be `start` paskutinės
	   nepilnos eilutės kortelė išsitemptų iki aukščiausios kaimynės. */
	align-items: start;
}

/* ---------- Kortelė ---------- */
.jcard {
	position: relative;
	grid-column: span 2;
	margin: 0;
	border-radius: var(--jcard-radius);
	overflow: hidden;
	background: var(--stone-200);
	/* Plonas kontūras — ne dėl formos, o dėl to, kad šviesios nuotraukos
	   ant --stone-50 fono kitaip neturėtų krašto. */
	box-shadow: inset 0 0 0 1px rgba(28, 25, 23, 0.06);
	isolation: isolate;
}

.jcard--hero { grid-column: span 6; --jar: var(--jar-hero); }
.jcard--wide { grid-column: span 3; --jar: var(--jar-wide); }
.jcard--std  { grid-column: span 2; --jar: var(--jar-std); }

.jcard__link {
	display: block;
	position: relative;
	color: #fff;
	text-decoration: none;
	/* Nuoroda dengia visą kortelę, tad fokusas turi rodytis ant kortelės
	   krašto, ne ant teksto bloko. */
	border-radius: inherit;
}

.jcard__link:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

/* ---------- Nuotrauka ---------- */
.jcard__media {
	position: relative;
	aspect-ratio: var(--jar, 4 / 3);
	overflow: hidden;
	border-radius: inherit;
}

.jcard__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition:
		transform 0.6s var(--ease-out),
		filter 0.4s var(--ease-out);
}

/* Be miniatiūros: ta pati dėžė, tik piešta CSS. */
.jcard__img--empty {
	background:
		radial-gradient(120% 90% at 20% 0%, var(--stone-300) 0%, transparent 60%),
		linear-gradient(160deg, var(--stone-400) 0%, var(--stone-700) 100%);
}

/* ---------- Perdanga ----------
   Atskiras elementas, o ne .jcard__media::after: taip hover'io transform
   liečia tik nuotrauką, o gradientas lieka stovėti vietoje. Kitaip mastelio
   keitimas tempia ir patį gradientą, ir tekstas trumpam netenka fono. */
.jcard__veil {
	position: absolute;
	inset: 0;
	background: var(--jveil);
	border-radius: inherit;
	pointer-events: none;
	transition: opacity 0.4s var(--ease-out);
}

/* ---------- Tekstas ant nuotraukos ---------- */
.jcard__body {
	position: absolute;
	inset: auto 0 0 0;
	padding: clamp(1rem, 2vw, 1.75rem);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	/* Antra apsauga po gradiento: ant kontrastingų nuotraukų vien gradiento
	   kartais neužtenka ties pačiu tekstu. */
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.jcard__date {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
}

.jcard__title {
	margin: 0;
	font-family: var(--font-serif);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.18;
	color: #fff;
	text-wrap: balance;
}

.jcard--hero .jcard__title { font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3rem); }
.jcard--wide .jcard__title { font-size: clamp(1.25rem, 0.95rem + 0.9vw, 1.75rem); }
.jcard--std  .jcard__title { font-size: clamp(1.0625rem, 0.9rem + 0.5vw, 1.25rem); }

/* Hero gauna daugiau oro apačioje — jo tekstas kitaip prilimpa prie krašto. */
.jcard--hero .jcard__body { padding: clamp(1.25rem, 3vw, 2.75rem); }
.jcard--hero .jcard__body { max-width: 46rem; }

/* ---------- Hover ----------
   Tik nuotrauka juda. Kortelė nekyla ir nemeta šešėlio: tinklelyje, kur
   kaimynės skirtingo dydžio, kylanti kortelė atrodo kaip poslinkis. */
@media (hover: hover) {
	.jcard__link:hover .jcard__img,
	.jcard__link:focus-visible .jcard__img {
		transform: scale(1.045);
		filter: brightness(1.06);
	}

	.jcard__link:hover .jcard__veil { opacity: 0.88; }
}

/* ---------- „Rodyti daugiau" ---------- */
.journal__more {
	display: flex;
	justify-content: center;
	margin-top: clamp(2rem, 4vw, 3.5rem);
}

.journal__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-width: 13.75rem;
	background: transparent;
}

/* Krovimo būsena. Mygtukas NEdingsta ir nekeičia pločio — min-width viršuje
   laiko vietą, kad tinklelis po juo nešokinėtų. */
.journal__btn[aria-busy="true"] {
	cursor: wait;
	color: var(--stone-500);
}

.journal__btn[disabled] { opacity: 0.75; }

.journal__btn-spinner {
	display: none;
	width: 0.875rem;
	height: 0.875rem;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: journal-spin 0.7s linear infinite;
}

.journal__btn[aria-busy="true"] .journal__btn-spinner { display: block; }

@keyframes journal-spin {
	to { transform: rotate(360deg); }
}

.journal__status {
	margin: 1rem 0 0;
	text-align: center;
	font-size: 0.875rem;
	color: var(--stone-500);
	min-height: 1.25rem;
}

.journal__status--error { color: var(--rose-700); }

/* ---------- Priklijuotų kortelių pasirodymas ----------
   Klasę uždeda journal.js, --i yra kortelės eilė porcijoje. Pakopinis
   delsimas daro įspūdį, kad kortelės atkeliavo, o ne visada ten buvo.
   prefers-reduced-motion aptarnauja main.css reset'as (jis nukerta
   animation-duration globaliai), tad čia atskiro bloko nereikia. */
.jcard--enter {
	animation: journal-in 0.5s var(--ease-out) both;
	animation-delay: calc(var(--i, 0) * 55ms);
}

@keyframes journal-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

/* =========================================================
   Responsyvumas

   Du lūžiai, ir abu keičia TIK stulpelių skaičių bei span'us — kortelės
   vidus visur tas pats. Proporcijos telefone perrašomos viena vieta
   (--jar-*), todėl nė vienas variantas neturi savo mobilios taisyklės.
   ========================================================= */

/* Planšetė: 4 stulpeliai. hero per visą plotį, wide ir std po du. */
@media (max-width: 1100px) {
	.journal__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.jcard--hero { grid-column: span 4; }
	.jcard--wide { grid-column: span 2; }
	.jcard--std  { grid-column: span 2; }
}

/* Telefonas: viena kolonėlė. Plačios proporcijos čia netinka — 5:2 juostelė
   360px ekrane būtų 144px aukščio, ir tekstas užimtų ją visą. Todėl hero
   telefone tampa kvadratu, o abi likusios formos susilygina į 3:2. */
@media (max-width: 640px) {
	.journal {
		--jar-hero: 1 / 1;
		--jar-wide: 3 / 2;
		--jar-std: 3 / 2;
		--jcard-radius: 16px;
	}

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

	.jcard,
	.jcard--hero,
	.jcard--wide,
	.jcard--std { grid-column: span 1; }

	.journal__btn { width: 100%; }
}