/*
 * Biļešu Paradīze Events Calendar — stili
 * ---------------------------------------------------------------------------
 * Šis fails ir domāts rediģēšanai. Spraudņa PHP loģika (API, kešošana,
 * īskodi) šo failu nelasa un nepārraksta — droši mainiet jebko šeit.
 *
 * Gandrīz visas vērtības nāk no Twenty Twenty-Five theme.json mainīgajiem
 * (--wp--preset--*), tāpēc kalendārs seko aktīvajam tēmas stilam. Aiz komata
 * katram var norādīt rezerves vērtību, ja tēma to nedefinē.
 *
 * Ātrākie regulēšanas punkti ir :root mainīgie zemāk — krāsas, atstarpes,
 * pogas izmērs un afišas priekšskatījuma platums.
 *
 * Pēc saglabāšanas izmaiņas parādās uzreiz: spraudnis stila versijai izmanto
 * faila modificēšanas laiku, tāpēc pārlūka kešs netiek izmantots.
 */

:root {
	/* Theme tokens first, plain fallbacks second. Override any of these from
	   Appearance > Customize > Additional CSS. */
	--bpar-ink: var(--wp--preset--color--contrast, #111);
	--bpar-base: var(--wp--preset--color--base, #fff);
	--bpar-muted: var(--wp--preset--color--accent-4, #686868);
	--bpar-line: var(--wp--preset--color--accent-6, color-mix(in srgb, currentColor 20%, transparent));
	--bpar-soft: var(--wp--preset--color--accent-5, #f7f6f2);
	--bpar-radius: 0px;
	--bpar-pill-radius: 999px;
	--bpar-gap: var(--wp--preset--spacing--30, 20px);
	--bpar-row-space: var(--wp--preset--spacing--15, 15px);
	--bpar-block-space: var(--wp--preset--spacing--40, 30px);
	--bpar-status-ok: #3f7d34;
	--bpar-status-sold: var(--wp--preset--color--accent-4, #686868);
	--bpar-preview-width: 220px;

	/* Virsrakstu fonts. Izrādes nosaukums ir <h3>, tāpēc tēmas virsrakstu fontu
	   paņem pats; datums nav virsraksts, tāpēc citādi mantotu pamatteksta fontu.
	   Šis mainīgais tos savieno. Ja maināt vietnes virsrakstu fontu, norādiet
	   šeit atbilstošo presetu (visi ir --wp--preset--font-family--*). */
	--bpar-font-display: var(--wp--preset--font-family--lfs-adelia, inherit);

	/* Pamatteksta fonts — mēnesim ("aug.") zem datuma cipara. Atsevišķi no
	   --bpar-font-display, lai lielais cipars būtu virsrakstu fontā, bet mazais
	   mēneša apzīmējums paliktu pamatteksta fontā. */
	--bpar-font-body: var(--wp--preset--font-family--google-sans, inherit);

	/* Poga. Vērtības ņemtas no tēmas "outline" pogas stila, lai kalendāra poga
	   izskatītos tieši tāda pati kā pārējās vietnes pogas. */
	--bpar-btn-font-size: var(--wp--preset--font-size--medium, 1rem);
	--bpar-btn-padding: var(--wp--preset--spacing--30, 20px) var(--wp--preset--spacing--40, 30px);
	--bpar-btn-border-width: 1px;
	--bpar-btn-radius: var(--bpar-pill-radius);
	/* Tēmas pogai, uzbraucot ar peli, fons kļūst par 5% tekstas krāsas. */
	--bpar-btn-hover-bg: color-mix(in srgb, var(--bpar-ink) 5%, transparent);

	/* Izpārdotā pasākuma poga — pelēka un neaktīva. */
	--bpar-soldout-ink: var(--bpar-muted);
	--bpar-soldout-border: color-mix(in srgb, var(--bpar-muted) 45%, transparent);
}

/* ---------- Alignment ----------
   When the wrapper is a direct child of a layout container (the usual case)
   the block theme already styles .alignwide / .alignfull from theme.json, and
   these rules simply restate the same values. They are here so that alignment
   still works if the output ends up nested one level deeper, e.g. wrapped in a
   paragraph by wpautop. */
.bpar-events-list.alignwide,
.bpar-events-grid.alignwide {
	max-width: var(--wp--style--global--wide-size, 1340px);
	margin-left: auto;
	margin-right: auto;
}
.bpar-events-list.alignfull,
.bpar-events-grid.alignfull {
	max-width: none;
}

/* ---------- List (row schedule) layout ---------- */
.bpar-events-list {
	margin-block: var(--bpar-block-space);
	color: var(--bpar-ink);
}
.bpar-events-list .bpar-event-row {
	display: grid;
	grid-template-columns: 4.5rem 6rem 1fr auto;
	align-items: center;
	gap: var(--bpar-gap);
	padding-block: var(--bpar-row-space);
	border-bottom: 1px solid var(--bpar-line);
}
.bpar-events-list--status .bpar-event-row {
	grid-template-columns: 4.5rem 6rem 1fr auto 1rem;
}
.bpar-events-list .bpar-event-row:first-child {
	border-top: 1px solid var(--bpar-line);
}
.bpar-events-list .bpar-event-when {
	display: flex;
	flex-direction: column;
	font-size: var(--wp--preset--font-size--small, .875rem);
	line-height: 1.4;
	color: var(--bpar-muted);
}
/* Fonts te apzināti netiek noteikts: cipars un mēnesis to izvēlas katrs pats
   (skat. .bpar-day-num un .bpar-month-label zemāk). */
.bpar-events-list .bpar-event-date {
	display: flex;
	align-items: baseline;
	gap: .3rem;
}
.bpar-events-list .bpar-day-num {
	font-size: var(--wp--preset--font-size--xx-large, 2.15rem);
	line-height: 1;
	letter-spacing: -0.02em;
	font-family: var(--bpar-font-display);
	/* Virsrakstu fontam cipari ir dažāda platuma ("11" ir šaurāks par "28"),
	   tāpēc bez fiksēta platuma mēneša apzīmējums katrā rindā sāktos citā
	   vietā. Cipars sākas pie kreisās malas, un fiksētais platums notur mēnesi
	   vienā kolonnā — līdzinās abas malas. Mērs ir em, tāpēc tas pieskaņojas
	   fonta izmēram arī planšetē un telefonā.

	   Ja labāk patīk dabiska atstarpe aiz viencipara datuma (un mēnesis drīkst
	   "lēkāt"), pietiek ar: --bpar-day-num-width: 0; */
	min-width: var(--bpar-day-num-width, 1.05em);
	text-align: start;
	font-variant-numeric: tabular-nums;
}
.bpar-events-list .bpar-month-label {
	font-size: var(--wp--preset--font-size--small, .875rem);
	color: var(--bpar-muted);
	font-family: var(--bpar-font-body);
}
.bpar-events-list .bpar-event-title {
	/* No font-family here on purpose: as an <h3> this inherits the theme's
	   heading font, weight and letter-spacing. */
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large, 3.6em);
	text-wrap: balance;
	/* Tēmai ir globāls "h3 { text-align: center }". Vienā rindā tas neizpaužas,
	   bet, tiklīdz nosaukums laužas divās rindās, tas centrētos. Sarakstā tam
	   vienmēr jābūt pie kreisās malas. */
	text-align: start;
	/* Drošības tīkls: garš vārds bez atstarpēm ("Netaisīsim") citādi izlīstu
	   ārpus savas kolonnas un uzzīmētos virsū pogai. */
	overflow-wrap: break-word;
	/* Shrink-wrap the heading so the hover preview is triggered by the title
	   itself, not by the empty space next to a short one. */
	justify-self: start;
}
/* Two classes deep on purpose: the theme's own link rules are a single class
   worth of specificity, and they are printed after this stylesheet. */
.bpar-events-list .bpar-event-title-link,
.bpar-events-grid .bpar-event-title-link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease;
}
.bpar-events-list .bpar-event-title-link:hover,
.bpar-events-list .bpar-event-title-link:focus-visible,
.bpar-events-grid .bpar-event-title-link:hover,
.bpar-events-grid .bpar-event-title-link:focus-visible {
	border-bottom-color: currentColor;
}

/* Poga "Pirkt biļetes".
   Šeit ir tikai izkārtojums — izmēru un fontu nosaka mainīgie :root sadaļā.
   button_style="theme" pogai ir arī .wp-element-button klase, tāpēc krāsas,
   izmēru un hover tā manto tieši no tēmas; te neko no tā nepārrakstām. */
.bpar-events-list .bpar-buy-btn {
	justify-self: start;
	display: inline-block;
	white-space: nowrap;
	text-decoration: none;
	line-height: var(--bpar-btn-line-height, inherit);
}
/* button_style="outline". Bez .wp-element-button klases tēma šo pogu nestilizē
   nemaz, tāpēc te atkārtojam tēmas "outline" pogas izmērus 1:1. */
.bpar-events-list .bpar-buy-btn--outline {
	font-size: var(--bpar-btn-font-size);
	padding: var(--bpar-btn-padding);
	background-color: transparent;
	color: var(--bpar-ink);
	border: var(--bpar-btn-border-width) solid currentColor;
	border-radius: var(--bpar-btn-radius);
	transition: background-color .2s ease;
}
.bpar-events-list .bpar-buy-btn--outline:hover,
.bpar-events-list .bpar-buy-btn--outline:focus-visible {
	background-color: var(--bpar-btn-hover-bg);
	color: var(--bpar-ink);
}
/* Izpārdots. PHP šeit izvada <span>, nevis <a>, tāpēc uz tā nevar uzklikšķināt
   un tas nenonāk tabulēšanas secībā. Izmērs nāk no tiem pašiem mainīgajiem, lai
   rinda nelēkā, kad pasākums izpārdodas. */
.bpar-events-list .bpar-buy-btn--soldout,
.bpar-events-grid .bpar-buy-btn--soldout {
	font-size: var(--bpar-btn-font-size);
	padding: var(--bpar-btn-padding);
	background-color: transparent;
	color: var(--bpar-soldout-ink);
	border: var(--bpar-btn-border-width) solid var(--bpar-soldout-border);
	border-radius: var(--bpar-btn-radius);
	cursor: not-allowed;
}
.bpar-events-list .bpar-status-dot {
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	justify-self: center;
}
.bpar-events-list .bpar-status-dot.is-available { background: var(--bpar-status-ok); }
.bpar-events-list .bpar-status-dot.is-soldout { background: var(--bpar-status-sold); }

/* ---------- Planšete (601–781px) ----------
   Saglabā datora rindas formu — poga paliek pa labi — tikai kolonnas, fonti un
   pogas izmērs ir mazliet savilkti, lai nosaukumam pietiktu vietas.
   Visu regulē mainīgie, tāpēc atsevišķu pogas noteikumu te nevajag. */
@media (min-width: 601px) and (max-width: 781px) {
	.bpar-events-list {
		--bpar-gap: 1rem;
		--bpar-btn-font-size: var(--wp--preset--font-size--small, .875rem);
		--bpar-btn-padding: .85em 1.6em;
	}
	.bpar-events-list .bpar-event-row {
		grid-template-columns: 3.25rem 4.25rem 1fr auto;
	}
	.bpar-events-list--status .bpar-event-row {
		grid-template-columns: 3.25rem 4.25rem 1fr auto 1rem;
	}
	.bpar-events-list .bpar-day-num,
	.bpar-events-list .bpar-event-title {
		font-size: var(--wp--preset--font-size--x-large, 1.75rem);
	}
}

/* ---------- Telefons (līdz 600px) ----------
   Nosaukums un poga vienā rindā, poga pie labās malas. Kreisajā kolonnā tā pati
   secība, kas datorā un planšetē — vispirms nedēļas diena ar pulksteni, tad
   datums, tikai viens zem otra, nevis blakus:

       Se 19:00
       19 sept.    Neliešu balle    [ Pirkt biļetes ]

   Telefonā vienkārši nepietiek platuma četrām atsevišķām kolonnām — datums,
   pulkstenis un poga aizņemtu gandrīz visu, un nosaukumam paliktu ~60px. Tāpēc
   datums un pulkstenis ir salikti vienā šaurā kolonnā divās rindās, bet
   nosaukums un poga stiepjas pāri abām rindām. Ieguvums: nosaukumam ir divu
   rindu augstums, ko kreisā kolonna tāpat aizņem, tāpēc divrindu nosaukums
   rindu nepadara augstāku.

   Elementu secība HTML kodā nemainās — tos pārliek grid-template-areas, tāpēc
   ekrānlasītājiem un tabulēšanai secība paliek tāda pati. */
@media (max-width: 600px) {
	.bpar-events-list {
		--bpar-gap: .75rem;
		/* Tā pati mazākā poga, kas planšetē. */
		--bpar-btn-font-size: var(--wp--preset--font-size--small, .875rem);
		--bpar-btn-padding: .85em 1.6em;
	}
	.bpar-events-list .bpar-event-row {
		/* minmax(0,1fr): bez tā garš nosaukums izstieptu kolonnu un poga
		   izbīdītos ārpus ekrāna. */
		grid-template-columns: 4.5rem minmax(0, 1fr) auto;
		grid-template-areas:
			"when title button"
			"date title button";
	}
	/* Statusa punktam sava kolonna tikai tad, kad tas tiešām tiek rādīts —
	   citādi tukša kolonna atstātu lieku atstarpi labajā malā. */
	.bpar-events-list--status .bpar-event-row {
		grid-template-columns: 4.5rem minmax(0, 1fr) auto auto;
		grid-template-areas:
			"when title button status"
			"date title button status";
	}
	.bpar-events-list .bpar-event-row,
	.bpar-events-list--status .bpar-event-row {
		align-items: center;
		column-gap: var(--bpar-gap);
		row-gap: 0;
	}
	/* Nedēļas diena ar pulksteni augšā, datums zem tā — abi horizontāli un
	   piespiesti viens otram (augšējais uz leju, apakšējais uz augšu), lai
	   bloks izskatītos kā viens vesels, nevis divas atsevišķas rindas. */
	.bpar-events-list .bpar-event-when {
		grid-area: when;
		flex-direction: row;
		gap: .4rem;
		align-self: end;
	}
	.bpar-events-list .bpar-event-date {
		grid-area: date;
		flex-direction: row;
		align-items: baseline;
		gap: .3rem;
		min-width: auto;
		align-self: start;
	}
	.bpar-events-list .bpar-day-num,
	.bpar-events-list .bpar-event-title {
		font-size: var(--wp--preset--font-size--x-large, 1.75rem);
	}
	.bpar-events-list .bpar-event-title { grid-area: title; }
	.bpar-events-list .bpar-buy-btn {
		grid-area: button;
		justify-self: end;
		margin-top: 0;
	}
	.bpar-events-list .bpar-status-dot {
		grid-area: status;
		justify-self: end;
		align-self: center;
	}
}

/* ---------- Šauri telefoni (līdz 379px) ----------
   Blakus izkārtojumam vajag zināmu minimumu: datuma kolonna 72px + poga 118px
   + atstarpes atstāj nosaukumam pārāk maz, tiklīdz ekrāns ir šaurāks par
   ~350px (garākais viens vārds repertuārā, "Netaisīsim", pie 28px ir 88px).
   Tāpēc pie šaurākiem ekrāniem nosaukums un poga kļūst mazliet mazāki — tā
   izkārtojums paliek tas pats līdz pat 320px platam ekrānam. */
@media (max-width: 379px) {
	.bpar-events-list {
		--bpar-btn-padding: .7em 1.1em;
		--bpar-gap: .6rem;
	}
	.bpar-events-list .bpar-event-row {
		grid-template-columns: 3.75rem minmax(0, 1fr) auto;
	}
	.bpar-events-list--status .bpar-event-row {
		grid-template-columns: 3.75rem minmax(0, 1fr) auto auto;
	}
	.bpar-events-list .bpar-day-num,
	.bpar-events-list .bpar-event-title {
		font-size: var(--wp--preset--font-size--large, 1.375rem);
	}
}

/* ---------- Hover poster preview (desktop pointers only) ---------- */
.bpar-event-preview {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	width: var(--bpar-preview-width, 220px);
	pointer-events: none;
	opacity: 0;
	transition: opacity .16s ease;
	will-change: transform, opacity;
}
.bpar-event-preview.is-visible.is-loaded { opacity: 1; }
.bpar-event-preview img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 62vh;
	object-fit: contain;
	background: var(--bpar-soft);
	border-radius: var(--bpar-radius);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
}
@media (prefers-reduced-motion: reduce) {
	.bpar-event-preview { transition: none; }
}

/* ---------- Grid (poster card) layout ---------- */
.bpar-events-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--bpar-gap);
	margin-block: var(--bpar-block-space);
	color: var(--bpar-ink);
}
@media (min-width: 782px) {
	.bpar-events-grid { grid-template-columns: repeat(var(--bpar-columns, 3), 1fr); }
}
.bpar-events-grid .bpar-event-card {
	display: flex;
	flex-direction: column;
	background: var(--bpar-base);
	border: 1px solid var(--bpar-line);
	border-radius: var(--bpar-radius);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}
.bpar-events-grid .bpar-event-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
}
.bpar-events-grid .bpar-event-media {
	position: relative;
	aspect-ratio: 3 / 4;
	background: var(--bpar-soft);
	overflow: hidden;
}
.bpar-events-grid .bpar-event-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.bpar-events-grid .bpar-event-datebadge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--bpar-base);
	color: var(--bpar-ink);
	border-radius: var(--bpar-radius);
	padding: 6px 10px;
	text-align: center;
	line-height: 1.15;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.bpar-events-grid .bpar-event-datebadge .bpar-day {
	display: block;
	font-size: var(--wp--preset--font-size--large, 1.38rem);
	font-weight: 600;
	font-family: var(--bpar-font-display);
}
.bpar-events-grid .bpar-event-datebadge .bpar-month {
	display: block;
	font-size: var(--wp--preset--font-size--small, .875rem);
	color: var(--bpar-muted);
}
.bpar-events-grid .bpar-event-body {
	padding: var(--wp--preset--spacing--30, 20px);
	display: flex;
	flex-direction: column;
	gap: .5rem;
	flex: 1;
}
.bpar-events-grid .bpar-event-meta {
	margin: 0;
	font-size: var(--wp--preset--font-size--small, .875rem);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--bpar-muted);
}
.bpar-events-grid .bpar-event-title {
	margin: 0;
	text-align: start;
	font-size: var(--wp--preset--font-size--large, 3.6em);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.bpar-events-grid .bpar-event-footer {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding-top: .5rem;
}
.bpar-events-grid .bpar-event-price {
	font-size: var(--wp--preset--font-size--small, .875rem);
	font-weight: 600;
	white-space: nowrap;
}
.bpar-events-grid .bpar-buy-btn {
	display: inline-block;
	text-decoration: none;
	white-space: nowrap;
	line-height: var(--bpar-btn-line-height, inherit);
}
.bpar-events-grid .bpar-buy-btn--outline {
	font-size: var(--bpar-btn-font-size);
	padding: var(--bpar-btn-padding);
	background-color: transparent;
	color: var(--bpar-ink);
	border: var(--bpar-btn-border-width) solid currentColor;
	border-radius: var(--bpar-btn-radius);
	transition: background-color .2s ease;
}
.bpar-events-grid .bpar-buy-btn--outline:hover,
.bpar-events-grid .bpar-buy-btn--outline:focus-visible {
	background-color: var(--bpar-btn-hover-bg);
	color: var(--bpar-ink);
}

.bpar-events-empty { opacity: .7; font-style: italic; }