/*
 * Vijesti i obavještenja — kartice, redovi i filteri.
 *
 * Učitava se uz core/query (wp_enqueue_block_style), dakle samo na
 * stranicama koje stvarno prikazuju spisak objava: naslovna, arhiva
 * novosti, kategorije, pretraga.
 *
 * Sve boje dolaze iz palete kroz CSS varijable; style variation koja
 * promijeni paletu automatski preboji i kartice.
 *
 * Rječnik klasa (postavljaju ih paterni i šabloni teme):
 *   .sejkan-natpis                 — natpis iznad naslova sekcije
 *   .sejkan-kartica-vijest         — kartica vijesti sa fotografijom
 *   .sejkan-kartica-vijest--velika — istaknuta (veća) varijanta
 *   .sejkan-vijest-red             — kratki red sa sličicom (bočna lista)
 *   .sejkan-obavjestenje-red       — red obavještenja bez fotografije
 *   .sejkan-zamjenska-slika        — zamjena kada objava nema fotografiju
 *   .sejkan-filter-kategorije      — spisak kategorija kao dugmići
 */

/* ===========================================================================
 * 1. Natpis sekcije
 *
 * Kratka zlatna crta prije teksta veže sekcije za boju iz grba, a da
 * zlatna ne preuzme cijelu stranicu.
 * ======================================================================== */

.sejkan-natpis {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin-block: 0;
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sejkan-natpis::before {
	content: "";
	flex: none;
	width: 1.75rem;
	height: 3px;
	background-color: var(--wp--preset--color--accent);
}

/* ===========================================================================
 * 2. Kartica vijesti
 *
 * Cijela kartica je jedna veza: pseudo-element naslova se razvuče preko
 * kartice, pa nema mrtvih zona između slike i teksta. Chip kategorije
 * ostaje zasebna veza iznad tog sloja.
 * ======================================================================== */

.sejkan-kartica-vijest {
	position: relative;
	height: 100%;
	overflow: hidden;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--base-3);
	border-radius: 4px;
	box-shadow: var(--wp--preset--shadow--podignuto);
	transition: box-shadow 0.18s ease, border-color 0.18s ease, translate 0.18s ease;
}

.sejkan-kartica-vijest:hover,
.sejkan-kartica-vijest:focus-within {
	border-color: color-mix( in srgb, var(--wp--preset--color--primary) 35%, var(--wp--preset--color--base-3) );
	box-shadow: var(--wp--preset--shadow--istaknuto);
	translate: 0 -3px;
}

/* Vidljiv okvir kada se do kartice dođe tastaturom. */
.sejkan-kartica-vijest:has( .wp-block-post-title a:focus-visible ) {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.sejkan-kartica-vijest:has( .wp-block-post-title a:focus-visible ) .wp-block-post-title a:focus {
	outline: none;
}

/* Naslov nosi vezu; pseudo-element je širi na cijelu karticu. */
.sejkan-kartica-vijest .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.sejkan-kartica-vijest .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.sejkan-kartica-vijest:hover .wp-block-post-title a,
.sejkan-kartica-vijest:focus-within .wp-block-post-title a {
	color: var(--wp--preset--color--primary);
}

/*
 * Potpis kartice: zlatna linija koja izraste iz sredine donje ivice —
 * isti pokret kao podvlaka u glavnom meniju.
 */
.sejkan-kartica-vijest::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 3px;
	background-color: var(--wp--preset--color--accent);
	scale: 0 1;
	transition: scale 0.22s cubic-bezier( 0.2, 0.8, 0.3, 1 );
}

.sejkan-kartica-vijest:hover::after,
.sejkan-kartica-vijest:focus-within::after {
	scale: 1 1;
}

/* Fotografija: bez vlastite margine, blagi zum pri prelasku. */
.sejkan-kartica-vijest__medij {
	position: relative;
	overflow: hidden;
}

.sejkan-kartica-vijest .wp-block-post-featured-image {
	margin: 0;
}

.sejkan-kartica-vijest .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale 0.3s ease;
}

.sejkan-kartica-vijest:hover .wp-block-post-featured-image img,
.sejkan-kartica-vijest:focus-within .wp-block-post-featured-image img {
	scale: 1.04;
}

/* Chip kategorije: zlatno na tamnoplavom — boje iz grba, jedina jaka
 * boja na kartici. Sjedi na donjoj ivici fotografije. */
.sejkan-kartica-vijest__kategorija {
	position: absolute;
	left: 0.75rem;
	bottom: 0.75rem;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
}

.sejkan-kartica-vijest__kategorija a {
	display: inline-block;
	padding: 0.3em 0.75em;
	background-color: var(--wp--preset--color--accent);
	border-radius: 2px;
	color: var(--wp--preset--color--primary-dark);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.sejkan-kartica-vijest__kategorija a:hover,
.sejkan-kartica-vijest__kategorija a:focus-visible {
	background-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--base);
}

/* Datum: mala tehnička oznaka, malim slovima kako pravopis traži. */
.sejkan-kartica-vijest .wp-block-post-date,
.sejkan-vijest-red .wp-block-post-date,
.sejkan-obavjestenje-red .wp-block-post-date {
	text-transform: lowercase;
}

/* Izvod bez vlastite donje margine — razmak vodi blockGap kartice. */
.sejkan-kartica-vijest .wp-block-post-excerpt__excerpt {
	margin-bottom: 0;
}

/* ===========================================================================
 * 3. Zamjena za fotografiju
 *
 * Objava bez fotografije više ne ruši mrežu: umjesto slike stoji tiha
 * pločica sa otvorenom knjigom. Boje su iz palete, motiv je opšti —
 * ništa vezano za pojedinu školu.
 * ======================================================================== */

.sejkan-zamjenska-slika {
	display: grid;
	place-items: center;
	margin: 0;
	background-color: var(--wp--preset--color--base-2);
	background-image: linear-gradient(
		135deg,
		var(--wp--preset--color--base-2) 0%,
		color-mix( in srgb, var(--wp--preset--color--primary) 7%, var(--wp--preset--color--base-2) ) 100%
	);
	color: color-mix( in srgb, var(--wp--preset--color--primary) 38%, var(--wp--preset--color--base-3) );
}

.sejkan-zamjenska-slika svg {
	width: clamp( 2.5rem, 22%, 4rem );
	height: auto;
}

/* ===========================================================================
 * 4. Kratki red sa sličicom (bočna lista „Još iz škole")
 * ======================================================================== */

.sejkan-vijest-red {
	position: relative;
	padding-block: var(--wp--preset--spacing--20);
}

li:not( :first-child ) > .sejkan-vijest-red,
.sejkan-vijest-red + .sejkan-vijest-red {
	border-top: 1px solid var(--wp--preset--color--base-3);
}

.sejkan-vijest-red .wp-block-post-featured-image {
	flex: none;
	margin: 0;
	overflow: hidden;
	border-radius: 3px;
}

.sejkan-vijest-red .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.sejkan-vijest-red .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.sejkan-vijest-red:hover .wp-block-post-title a,
.sejkan-vijest-red:focus-within .wp-block-post-title a {
	color: var(--wp--preset--color--primary);
}

.sejkan-vijest-red:has( .wp-block-post-title a:focus-visible ) {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* ===========================================================================
 * 5. Red obavještenja (kompaktna lista i rezultati pretrage)
 *
 * Datum u vlastitoj koloni poravnava spisak u registar; na uskom ekranu
 * kolone se slože jedna ispod druge.
 * ======================================================================== */

.sejkan-obavjestenje-red {
	position: relative;
	display: grid;
	grid-template-columns: 6.5rem 1fr;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--base-3);
	transition: background-color 0.15s ease;
}

.wp-block-post-template > li:last-child > .sejkan-obavjestenje-red,
.sejkan-obavjestenje-red:last-child {
	border-bottom: 1px solid var(--wp--preset--color--base-3);
}

.sejkan-obavjestenje-red:hover,
.sejkan-obavjestenje-red:focus-within {
	background-color: var(--wp--preset--color--base-2);
}

.sejkan-obavjestenje-red .wp-block-post-date {
	padding-top: 0.2em;
}

.sejkan-obavjestenje-red .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.sejkan-obavjestenje-red .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.sejkan-obavjestenje-red:hover .wp-block-post-title a,
.sejkan-obavjestenje-red:focus-within .wp-block-post-title a {
	color: var(--wp--preset--color--primary);
}

.sejkan-obavjestenje-red:has( .wp-block-post-title a:focus-visible ) {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
}

/* Tiha oznaka kategorije — u dugom spisku zlatna bi vikala. */
.sejkan-obavjestenje-red .wp-block-post-terms {
	margin: 0;
}

.sejkan-obavjestenje-red .wp-block-post-terms a {
	position: relative;
	z-index: 1;
	display: inline-block;
	padding: 0.15em 0.6em;
	background-color: var(--wp--preset--color--base-2);
	border: 1px solid var(--wp--preset--color--base-3);
	border-radius: 999px;
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}

.sejkan-obavjestenje-red .wp-block-post-terms a:hover,
.sejkan-obavjestenje-red .wp-block-post-terms a:focus-visible {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.sejkan-obavjestenje-red:hover .wp-block-post-terms a {
	background-color: var(--wp--preset--color--base);
}

@media ( max-width: 599px ) {

	.sejkan-obavjestenje-red {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--10);
	}
}

/* ===========================================================================
 * 6. Filter kategorija kao dugmići
 *
 * Blok jezgre ispisuje običnu listu; ovdje ona postaje red dugmića,
 * pa filter liči na ono što jeste — izbor, a ne sadržaj.
 * ======================================================================== */

.sejkan-filter-kategorije .wp-block-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sejkan-filter-kategorije .wp-block-categories li {
	margin: 0;
}

.sejkan-filter-kategorije .wp-block-categories a {
	display: inline-block;
	padding: 0.4em 1em;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--base-3);
	border-radius: 999px;
	color: var(--wp--preset--color--primary-dark);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sejkan-filter-kategorije .wp-block-categories a:hover,
.sejkan-filter-kategorije .wp-block-categories a:focus-visible {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* Broj objava uz naziv kategorije: tiši od naziva. */
.sejkan-filter-kategorije .wp-block-categories li {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--x-small);
}

/* ===========================================================================
 * 7. Smanjeno kretanje
 * ======================================================================== */

@media ( prefers-reduced-motion: reduce ) {

	.sejkan-kartica-vijest,
	.sejkan-kartica-vijest::after,
	.sejkan-kartica-vijest .wp-block-post-featured-image img,
	.sejkan-kartica-vijest__kategorija a,
	.sejkan-obavjestenje-red,
	.sejkan-filter-kategorije .wp-block-categories a {
		transition: none;
	}

	.sejkan-kartica-vijest:hover,
	.sejkan-kartica-vijest:focus-within {
		translate: 0 0;
	}

	.sejkan-kartica-vijest:hover .wp-block-post-featured-image img,
	.sejkan-kartica-vijest:focus-within .wp-block-post-featured-image img {
		scale: 1;
	}
}