/*
 * Style front-end dla bloków dopisywanych do treści CPT noisa_events
 * (info-box, embed YouTube, FAQ, przycisk afiliacyjny). Lekki, samodzielny
 * CSS (bez JS, bez zewnętrznych fontów/ikon).
 *
 * WAŻNE — poprawka 2026-07-25 (produkcja): pierwsza wersja tego CSS
 * zakładała, że theme Noisa renderuje treść eventu na CIEMNYM tle
 * (jak w szablonie/demo theme: body{background:#0B0B0C}), więc breadcrumbs
 * i sekcja FAQ używały jasnych/białych kolorów tekstu. W REALNEJ
 * instalacji produkcyjnej użytkownika obszar treści (gdzie plugin
 * dopisuje swój HTML przez `the_content`) renderuje się na BIAŁYM tle
 * — przez co te elementy były praktycznie niewidoczne (biały/bardzo
 * jasny tekst na białym tle). Naprawiono: WSZYSTKIE bloki dopisywane
 * przez plugin są teraz samodzielne — każdy ma WŁASNE, jawnie zdefiniowane
 * tło i kolor tekstu, niezależne od tła strony/theme (ani jasnego, ani
 * ciemnego). Dzięki temu wygląda tak samo niezależnie od tego, czy
 * konkretna instalacja/theme/child-theme renderuje treść na jasnym czy
 * ciemnym tle.
 */

.nei-event-info,
.nei-event-clip,
.nei-event-faq,
.nei-event-related {
	margin: 2.5em 0;
}

.nei-event-info__title,
.nei-event-clip__title,
.nei-event-faq__title,
.nei-event-related__title {
	margin: 0 0 1em;
	font-size: 1.15em;
	display: flex;
	align-items: center;
	gap: 0.4em;
	/* Wszystkie tytuły sekcji stoją teraz na WŁASNYM jasnym tle (patrz
	 * .nei-event-clip/.nei-event-faq/.nei-event-related niżej) — jeden,
	 * jednolity, ciemny kolor niezależny od tła strony. */
	color: #1a1a1a !important;
}

.nei-event-info__title::before {
	content: '\1F39F\FE0F'; /* 🎟️ */
}

.nei-event-clip__title::before {
	content: '\25B6\FE0F'; /* ▶️ */
}

.nei-event-faq__title::before {
	content: '\2753'; /* ❓ */
}

.nei-event-related__title::before {
	content: '\1F3AA'; /* 🎪 */
}

/* ------------------------------------------------------------------
 * Breadcrumbs — pierwszy element dopisywany do treści (przed info-boxem).
 * NIE zakładamy już koloru tła strony (patrz komentarz na górze pliku) —
 * kolory dobrane tak, żeby były czytelne i na jasnym, i na ciemnym tle:
 * link w mocnym kolorze akcentu (czerwony, kontrastowy na obu), tekst
 * nieaktywny/separator w średnioszarym (#767676 ma kontrast >4.5:1 na
 * białym ORAZ jest wystarczająco jasny na ciemnym, żeby nie zniknąć).
 * ------------------------------------------------------------------ */

.nei-event-breadcrumbs {
	margin: 0 0 1.5em;
	font-size: 0.85em;
}

.nei-event-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0.4em;
}

.nei-event-breadcrumbs__item a {
	color: #c2001a !important;
	text-decoration: none !important;
}

.nei-event-breadcrumbs__item a:hover {
	text-decoration: underline !important;
}

.nei-event-breadcrumbs__item span {
	color: #767676 !important;
	opacity: 1;
}

.nei-event-breadcrumbs__sep {
	color: #999 !important;
}

/* ------------------------------------------------------------------ */
/* Info-box: karta z lekkim tłem/cieniem, siatka wierszy z ikonami    */
/* ------------------------------------------------------------------ */

.nei-event-info {
	background: #fafafa;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 10px;
	padding: 1.5em 1.75em;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	/* Theme Noisa ustawia globalnie body { color:#eee/#444 } zależnie od
	 * wariantu — na naszej jasnej karcie wymuszamy ciemny, czytelny tekst. */
	color: #333;
}

.nei-event-info__grid {
	display: grid;
	gap: 0.9em;
	margin: 0;
}

.nei-event-info__row {
	display: grid;
	grid-template-columns: 28px 1fr;
	column-gap: 0.75em;
	row-gap: 0.15em;
}

.nei-event-info__row dt,
.nei-event-info__row dd {
	margin: 0;
	grid-column: 2;
}

.nei-event-info__row dt {
	grid-row: 1;
	font-weight: 600;
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #333;
	opacity: 0.65;
}

.nei-event-info__row dd {
	grid-row: 2;
	line-height: 1.5;
	color: #1a1a1a;
}

.nei-event-info__row::before {
	grid-column: 1;
	grid-row: 1 / span 2;
	font-size: 1.2em;
	line-height: 1;
	align-self: start;
	margin-top: 0.15em;
}

.nei-event-info__row--date::before   { content: '\1F4C5'; } /* 📅 */
.nei-event-info__row--venue::before  { content: '\1F4CD'; } /* 📍 */
.nei-event-info__row--price::before  { content: '\1F4B0'; } /* 💰 */
.nei-event-info__row--availability::before { content: '\1F3AB'; } /* 🎫 */
.nei-event-info__row--meet-and-greet::before { content: '\2B50'; } /* ⭐ */

.nei-event-info__row--meet-and-greet dd {
	font-style: italic;
	opacity: 0.85;
}

/* Odznaka dostępności biletów */
.nei-badge {
	display: inline-block;
	padding: 0.2em 0.7em;
	border-radius: 999px;
	font-size: 0.9em;
	font-weight: 600;
}

.nei-badge--available {
	background: #e6f6ec;
	color: #1a7a3d;
}

.nei-badge--soldout {
	background: #fce8e8;
	color: #b3261e;
}

.nei-event-map {
	margin-top: 1.5em;
}

.nei-event-map iframe {
	display: block;
	width: 100%;
	border-radius: 8px;
}

.nei-event-map__link {
	display: inline-block;
	margin-top: 0.5em;
	font-size: 0.9em;
}

.nei-event-info__cta {
	margin-top: 1.5em;
	padding-top: 1.25em;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.nei-affiliate-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.8em 1.9em;
	background: #e2001a;
	color: #fff !important;
	border-radius: 6px;
	font-weight: 700;
	text-decoration: none !important;
	box-shadow: 0 2px 6px rgba(226, 0, 26, 0.25);
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.nei-affiliate-button::after {
	content: '\2192'; /* → */
	transition: transform 0.15s ease;
}

.nei-affiliate-button:hover {
	background: #b80015;
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(226, 0, 26, 0.3);
}

.nei-affiliate-button:hover::after {
	transform: translateX(3px);
}

/* ------------------------------------------------------------------ */
/* YouTube embed: karta z ramką, żeby wideo nie "wisiało" samotnie    */
/* ------------------------------------------------------------------ */

.nei-event-clip__wrapper {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9 */
	border-radius: 10px;
	overflow: hidden;
	background: #000;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.nei-event-clip__wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ------------------------------------------------------------------ */
/* FAQ accordion (native <details>/<summary>, zero zależności JS)    */
/* Własna jasna karta (jak .nei-event-info) — NIE zakłada koloru tła */
/* strony, patrz komentarz na górze pliku.                           */
/* ------------------------------------------------------------------ */

.nei-event-faq {
	background: #fafafa;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 10px;
	padding: 1.5em 1.75em;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.nei-event-faq__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.6em;
	height: 1.6em;
	padding: 0 0.4em;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.08);
	color: #1a1a1a;
	font-size: 0.7em;
	font-weight: 700;
}

.nei-event-faq__list {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.nei-event-faq__item {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	padding: 0;
}

.nei-event-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 1em 0.2em;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	transition: color 0.15s ease;
	color: #1a1a1a !important;
}

.nei-event-faq__question:hover {
	color: #c2001a !important;
}

.nei-event-faq__question::-webkit-details-marker {
	display: none;
}

.nei-event-faq__question::after {
	content: '+';
	flex: 0 0 auto;
	width: 1.4em;
	height: 1.4em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.06);
	color: #1a1a1a;
	font-weight: 700;
	font-size: 1.1em;
	transition: transform 0.2s ease, background 0.15s ease;
}

.nei-event-faq__item[open] .nei-event-faq__question::after {
	content: '\2212'; /* − */
	transform: rotate(180deg);
	background: rgba(226, 0, 26, 0.1);
	color: #c2001a;
}

.nei-event-faq__answer {
	padding: 0 0.2em 1.1em;
	color: #333 !important;
	opacity: 1;
	line-height: 1.6;
}

.nei-event-faq__answer p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Podobne wydarzenia: siatka lekkich kart (współdzielona kategoria/  */
/* miasto z taksonomii noisa_events_cats / noisa_events_locations)   */
/* ------------------------------------------------------------------ */

.nei-event-related__grid {
	display: grid;
	/* Zmniejszone z 220px na 150px — mieści więcej kart w rzędzie na życzenie
	 * użytkownika ("kilka z mniejszymi obrazkami"); przy szerokim ekranie
	 * pokazuje 6-8 kart na raz zamiast 3-4. */
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0.8em;
}

.nei-event-related__card {
	display: flex;
	flex-direction: column;
	border-radius: 10px;
	overflow: hidden;
	/* Własna jasna karta (jak .nei-event-info / .nei-event-faq) — niezależna
	 * od tła strony. Wcześniej karta była (prawie) przezroczysta z założeniem
	 * ciemnego tła theme, co na białym tle produkcyjnym renderowało się jako
	 * niewidoczna obwódka i biały tekst na białym tle. */
	background: #fafafa;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	text-decoration: none !important;
	transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.nei-event-related__card:hover {
	transform: translateY(-2px);
	border-color: rgba(226, 0, 26, 0.4);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.nei-event-related__thumb {
	display: block;
	/* Bardziej "kwadratowy" kadr (4/3 zamiast 16/10) — przy mniejszych,
	 * węższych kartach wygląda lepiej niż szeroki baner. */
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #000;
}

.nei-event-related__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nei-event-related__body {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	/* Mniejszy padding — dopasowany do węższych kart. */
	padding: 0.7em 0.8em;
}

/* Karta ma teraz własne jasne tło (patrz .nei-event-related__card powyżej),
 * więc tekst musi być ciemny, żeby był czytelny niezależnie od tła strony. */
.nei-event-related__name {
	color: #1a1a1a !important;
	font-weight: 700;
	/* Lekko zmniejszone, żeby dłuższe tytuły nie "rozsadzały" węższych kart. */
	font-size: 0.85em;
	line-height: 1.3;
}

.nei-event-related__meta {
	color: #666 !important;
	opacity: 1;
	font-size: 0.75em;
}

/* ------------------------------------------------------------------ */
/* Box "Zasady bezpieczeństwa" — jasna karta (jak .nei-event-info),  */
/* umieszczony zaraz po info-boxie/przycisku afiliacyjnym.            */
/* ------------------------------------------------------------------ */

.nei-event-safety {
	background: #fafafa;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 10px;
	padding: 1.5em 1.75em;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	color: #333;
	margin: 2.5em 0;
}

.nei-event-safety__header {
	display: flex;
	align-items: flex-start;
	gap: 0.75em;
	margin: 0 0 1em;
	padding-bottom: 1em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.nei-event-safety__icon {
	flex: 0 0 auto;
	color: #1a1a1a;
	line-height: 0;
}

.nei-event-safety__title {
	margin: 0;
	font-size: 1.05em;
	font-weight: 700;
	color: #1a1a1a !important;
	line-height: 1.4;
}

.nei-event-safety__subtitle {
	display: block;
	font-size: 0.85em;
	font-weight: 400;
	opacity: 0.7;
}

.nei-event-safety__list {
	margin: 0;
	padding: 0 0 0 1.2em;
	list-style: disc;
}

.nei-event-safety__list li {
	margin: 0 0 0.6em;
	line-height: 1.5;
	color: #333;
}

.nei-event-safety__list li:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Obrazek eventu NAD treścią (opisem SEO) — pierwszy element bloku   */
/* dopisywanego przez append_event_content(), przed samą treścią.    */
/* ------------------------------------------------------------------ */

/*
 * Technika "letterbox" — feed Eventim dostarcza obrazek promocyjny serii
 * (esPictureBig) WYŁĄCZNIE w rozmiarze 222×222px (kwadrat, bardzo mały —
 * patrz Noisa_Eventim_Image_Processor::upscale_image()). Poprzednia wersja
 * (width:100% + object-fit:cover na kontenerze bez ustalonej proporcji)
 * rozciągała ten mały kwadrat na całą szerokość strony (pikselizacja) i
 * dodatkowo KADROWAŁA go (obcinana góra/dół), żeby wypełnić szeroki,
 * niski kontener.
 *
 * Rozwiązanie: kontener ma ustaloną proporcję (aspect-ratio), wypełnioną
 * rozmytym/przyciemnionym tłem tego samego obrazka (object-fit:cover +
 * blur — tło może być swobodnie rozciągnięte, bo jest rozmyte, więc
 * pikselizacja nie jest widoczna), a NAD nim ostry, nieprzycięty obrazek
 * (object-fit:contain) z ograniczoną szerokością — nigdy nie jest
 * rozciągany bardziej niż jego naturalna rozdzielczość pozwala wyglądać
 * akceptowalnie, i nigdy nie jest kadrowany.
 */

.nei-event-featured-image {
	position: relative;
	margin: 0 0 1.75em;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	aspect-ratio: 16 / 7;
	background: #111;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nei-event-featured-image__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(30px) brightness(0.65) saturate(1.1);
	transform: scale(1.15); /* maskuje rozmyte krawędzie po blur() */
}

/* Przycisk "Kup bilet" jako overlay w prawym dolnym rogu obrazka głównego —
 * pierwszy blok plugin renderuje na stronie (zaraz po hero theme), więc to
 * najbardziej "górne"/widoczne miejsce dostępne bez nadpisywania szablonów
 * theme. Pozycjonowany na tle rozmytego obrazka (zawsze ciemne/nasycone tło
 * z filter:brightness(0.65) na .nei-event-featured-image__bg) — czerwony
 * przycisk z białym tekstem ma wystarczający kontrast niezależnie od treści
 * konkretnego zdjęcia. */
.nei-event-featured-image__cta {
	position: absolute;
	right: 1em;
	bottom: 1em;
	z-index: 2;
}

.nei-event-featured-image__cta .nei-affiliate-button {
	padding: 0.65em 1.5em;
	font-size: 0.95em;
}

/* Fallback dla eventów bez zdjęcia głównego (patrz render_header_cta_bar()
 * w class-frontend-renderer.php) — ten sam przycisk, ale jako samodzielny
 * pasek na samej górze treści (nie overlay), więc bez pozycjonowania
 * absolutnego/tła obrazka. */
.nei-event-header-cta-bar {
	margin: 0 0 1.75em;
	text-align: right;
}

.nei-event-featured-image__img {
	position: relative;
	display: block;
	/* UWAGA: width/height MUSZĄ być ustawione na wymiar większy niż naturalny
	 * rozmiar źródła (222×222px) — inaczej przeglądarka renderuje obrazek w
	 * jego naturalnym rozmiarze (ignorując object-fit, który działa tylko,
	 * gdy pudełko ma inny rozmiar niż obrazek), dając efekt małego "znaczka
	 * pocztowego" na środku dużego kontenera. clamp(180px, 40vw, 480px)
	 * celowo NIE wypełnia całej szerokości kontenera — obrazek 222px
	 * powiększony do np. 900px byłby zauważalnie rozmazany; ten rozmiar jest
	 * kompromisem między "widoczny/czytelny" i "nie nadmiernie rozmazany"
	 * dla nieupscalowanych (starych) importów. Po zastosowaniu AI upscalingu
	 * (przycisk "Napraw jakość obrazków" w panelu) źródło ma realną wyższą
	 * rozdzielczość i ten sam CSS wygląda ostro, bez zmian.
	 *
	 * vw (nie %) na PURPOSE — kontener ma proporcję 16:7 (niekwadratowy),
	 * a source jest kwadratowy (1:1). Gdyby width/height liczyły się jako
	 * % szerokości/wysokości kontenera, dałoby to niekwadratowe pudełko
	 * (np. 480×210px) i object-fit:contain by SKADROWAŁ obrazek wewnątrz
	 * TEGO pudełka — czyli ten sam błąd na mniejszej skali. vw daje
	 * identyczną wartość px dla width i height niezależnie od proporcji
	 * kontenera, gwarantując kwadratowe pudełko dla kwadratowego source. */
	width: clamp(180px, 40vw, 480px);
	height: clamp(180px, 40vw, 480px);
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 6px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

@media (max-width: 600px) {
	.nei-event-info {
		padding: 1.25em;
	}

	.nei-event-info__row {
		grid-template-columns: 24px 1fr;
	}

	.nei-event-info__row dt,
	.nei-event-info__row dd {
		grid-column: 2;
	}

	.nei-event-safety {
		padding: 1.25em;
	}

	.nei-event-featured-image {
		aspect-ratio: 4 / 3;
	}

	.nei-event-featured-image__cta {
		right: 0.6em;
		bottom: 0.6em;
	}

	.nei-event-featured-image__cta .nei-affiliate-button {
		padding: 0.5em 1.1em;
		font-size: 0.85em;
	}

	.nei-event-map iframe {
		height: 240px;
	}
}