/* ==========================================================================
   FeelEvent – blog (lista /blog/, archiwa kategorii/dat/autora, pojedynczy wpis)
   2026-10 – poprawa wyglądu bloga. Ładowane tylko na stronach bloga przez
   wp-content/mu-plugins/feelevent-blog-style.php (klasa body: .fe-blog-page).
   Szablony: home.php, archive.php, loop-templates/fe-blog-*.php
   ========================================================================== */

.fe-blog-page {
	/* Kolor akcentu (--fe-accent) ustawia header.php według rodzaju wydarzenia – jak na całej stronie. */
	--fe-accent-hover: var(--fe-accent-light, #8d6cc6);
	--fe-pink: #b33e79;
	--fe-surface: #121214;
	--fe-surface-2: #1b1b1f;
	--fe-line: rgba(255, 255, 255, 0.09);
	--fe-text: #fff;
	--fe-muted: #b2b2b2;
	--fe-radius: 12px;
	--fe-nav-h: 138px;
}

/* Kategoria panieńska bloga – róż także wtedy, gdy nagłówek nie rozpozna części serwisu. */
.fe-blog-page.category-wieczory_panienskie {
	--fe-accent: #b33e79;
	--fe-accent-rgb: 179, 62, 121;
	--fe-accent-hover: #c9548f;
}

/* ---------- Nagłówek sekcji (zamiast pełnoekranowego zdjęcia) ---------- */

.fe-blog-page #wrapper-navbar {
	position: relative;
	z-index: 20;
}

.fe-blog-hero {
	position: relative;
	z-index: 1;
	margin-top: calc(-1 * var(--fe-nav-h));
	padding-top: var(--fe-nav-h);
	min-height: calc(var(--fe-nav-h) + 190px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: #000;
}

.fe-blog-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.fe-blog-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.32;
	display: block;
}

.fe-blog-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.15) 45%, #000 100%);
}

.fe-blog-hero__inner {
	padding-top: 1.5rem;
	padding-bottom: 2rem;
}

.fe-blog-hero__eyebrow {
	margin: 0 0 0.35rem;
	font-size: 0.8rem;
	font-weight: 900;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fe-accent);
	filter: brightness(1.35);
}

.fe-blog-hero__title,
h1.fe-blog-hero__title {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 2.5rem;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	color: var(--fe-text);
}

.fe-blog-hero__page {
	color: var(--fe-muted);
	font-weight: 300;
}

/* ---------- Układ ---------- */

.fe-blog {
	padding-top: 1rem;
	padding-bottom: 3rem;
}

.fe-blog-page .fe-blog .blog-list,
.fe-blog-page.archive .blog-list {
	background: transparent;
}

.fe-blog__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 576px) {
	.fe-blog__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- Karta wpisu ---------- */

.fe-card {
	display: flex;
	flex-direction: column;
	margin: 0;
	background: var(--fe-surface);
	border: 1px solid var(--fe-line);
	border-radius: var(--fe-radius);
	overflow: hidden;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.fe-card:hover,
.fe-card:focus-within {
	border-color: var(--fe-accent);
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
}

.fe-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--fe-surface-2);
}

.fe-card__media img,
.fe-blog-page .img-post-thumbnail img.fe-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 1;
	transition: transform 0.4s ease;
}

.fe-card:hover .fe-card__media img {
	transform: scale(1.04);
}

.fe-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1.1rem 1.25rem 1.35rem;
}

.fe-card__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin-bottom: 0.7rem;
}

.fe-card__cat {
	display: inline-block;
	padding: 0.15rem 0.55rem;
	border: 1px solid var(--fe-line);
	border-radius: 50px;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--fe-muted);
	text-decoration: none;
	line-height: 1.4;
	white-space: nowrap;
}

.fe-card__cat:hover {
	color: #fff;
	border-color: var(--fe-accent);
}

.fe-card__cat--wieczory_panienskie:hover {
	border-color: var(--fe-pink);
}

/* Tytuł: w archiwach <time> jest w środku <h3> (jak wcześniej) – kolejność wizualna przez flex */
.fe-card header {
	margin: 0;
	float: none;
	width: auto;
	padding: 0;
}

.fe-blog-page .fe-card .fe-card__title {
	display: flex;
	flex-direction: column-reverse;
	gap: 0.4rem;
	margin: 0 0 0.6rem;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: 0;
}

.fe-card .fe-card__title a {
	color: var(--fe-text);
	text-decoration: none;
}

.fe-card .fe-card__title a:hover {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var(--fe-accent);
	text-underline-offset: 3px;
}

.fe-card .fe-card__date {
	display: block;
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fe-muted);
}

.fe-card .entry-header .fe-card__date {
	margin-bottom: 0.4rem;
}

.fe-card__excerpt p {
	margin: 0 0 1.1rem;
	font-size: 0.95rem;
	line-height: 1.6;
	color: #cfcfd4;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Przycisk w stylu strony (fioletowy, zaokrąglony, wersaliki) */
.fe-btn,
.fe-blog-page a.fe-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	align-self: flex-start;
	margin-top: auto;
	padding: 0.75rem 1.6rem;
	border: 0;
	border-radius: 50px;
	background: var(--fe-accent);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
	transition: background-color 0.2s ease;
}

.fe-btn::after {
	content: "\2192";
	font-weight: 400;
}

.fe-btn:hover,
.fe-btn:focus-visible {
	background: var(--fe-accent-hover);
	color: #fff;
}

/* ---------- Paginacja ---------- */

.fe-pagination {
	margin-top: 2.5rem;
}

.fe-pagination .pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fe-pagination .page-item {
	margin: 0;
}

.fe-pagination .page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 0.85rem;
	border: 1px solid var(--fe-line);
	border-radius: 50px !important;
	background: var(--fe-surface);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	box-shadow: none;
}

.fe-pagination a.page-link:hover {
	border-color: var(--fe-accent);
	background: var(--fe-surface-2);
	color: #fff;
}

.fe-pagination .page-item.active .page-link,
.fe-pagination .page-link.current {
	background: var(--fe-accent);
	border-color: var(--fe-accent);
	color: #fff;
}

.fe-pagination .page-link.dots {
	border-color: transparent;
	background: transparent;
	color: var(--fe-muted);
}

/* ---------- Sidebar „Archiwum” ---------- */

.fe-blog-page .left-navigation {
	float: none;
	width: 100%;
	margin: 0 0 1.5rem;
	padding: 1.25rem 1.5rem 1rem;
	background: var(--fe-surface);
	border: 1px solid var(--fe-line);
	border-radius: var(--fe-radius);
}

.fe-blog-page .left-navigation header {
	float: none;
	width: auto;
	padding: 0 0 0.75rem;
	border-bottom: 2px solid var(--fe-accent);
	margin-bottom: 0.5rem;
}

.fe-blog-page .left-navigation header h3,
.fe-blog-page .left-navigation header .fe-archive__title {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
}

.fe-blog-page .left-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fe-blog-page .left-navigation ul li {
	display: block;
	padding: 0;
	border-bottom: 1px solid var(--fe-line) !important;
}

.fe-blog-page .left-navigation ul li:last-child {
	border-bottom: 0 !important;
}

.fe-blog-page .left-navigation ul li a {
	display: flex !important;
	justify-content: space-between;
	padding: 0.55rem 0 !important;
	font-size: 0.92rem;
	color: #d8d8dc;
	text-decoration: none;
	text-transform: capitalize;
}

.fe-blog-page .left-navigation ul li a::after {
	content: "\203A";
	color: var(--fe-muted);
}

.fe-blog-page .left-navigation ul li a:hover {
	color: #fff;
}

.fe-blog-page .left-navigation ul li a:hover::after {
	color: var(--fe-accent);
}

.fe-archive__more {
	margin-top: 0.5rem;
	border-top: 1px solid var(--fe-line);
}

.fe-archive__more summary {
	padding: 0.75rem 0 0.25rem;
	font-size: 0.8rem;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fe-accent);
	filter: brightness(1.35);
	cursor: pointer;
}

.fe-archive__more[open] summary {
	margin-bottom: 0.25rem;
}

@media (min-width: 992px) {
	.fe-blog__side .left-navigation {
		position: sticky;
		top: 1.5rem;
	}

	/* SEO-01: kilka bloków w sidebarze – bez przyklejania (nachodziłyby na siebie) */
	.fe-blog__side .fe-side-stack .left-navigation {
		position: static;
	}
}

/* ---------- SEO-01: „Najnowsze poradniki”, wybór miesiąca, „Przeczytaj także” ---------- */

.fe-blog-page .left-navigation .fe-cats li a,
.fe-blog-page .left-navigation .fe-recent__list li a {
	text-transform: none;
	line-height: 1.35;
	gap: 0.75rem;
}

.fe-archive__form {
	display: flex;
	gap: 0.5rem;
	padding: 0.5rem 0 0.25rem;
}

.fe-archive__select {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.5rem 0.6rem;
	font-size: 0.92rem;
	color: #d8d8dc;
	background: transparent;
	border: 1px solid var(--fe-line);
	border-radius: var(--fe-radius);
}

.fe-archive__select option {
	color: #111;
}

.fe-archive__go {
	flex: 0 0 auto;
	padding: 0.5rem 0.9rem;
	font-size: 0.8rem;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	background: var(--fe-accent);
	border: 0;
	border-radius: var(--fe-radius);
	cursor: pointer;
}

.fe-related {
	margin: 2rem 0 1rem;
	padding: 1.25rem 1.5rem 1rem;
	background: var(--fe-surface);
	border: 1px solid var(--fe-line);
	border-radius: var(--fe-radius);
}

.fe-blog-page .fe-related .fe-related__title,
.fe-related__title {
	margin: 0 0 0.5rem !important;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--fe-accent);
	font-size: 1.1rem !important;
	font-weight: 900 !important;
	line-height: 1.3 !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff !important;
}

.fe-related__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fe-blog-page .fe-related .fe-related__list,
.fe-blog-page .fe-related .fe-related__list li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	background: none !important;
}

.fe-blog-page .fe-related .fe-related__list li::before {
	display: none !important;
}

.fe-related__list li {
	border-bottom: 1px solid var(--fe-line);
}

.fe-related__list li:last-child {
	border-bottom: 0;
}

.fe-related__list a {
	display: block;
	padding: 0.55rem 0;
	color: #d8d8dc;
	text-decoration: none;
}

.fe-related__list a:hover {
	color: #fff;
}

.fe-related__all {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 0.8rem;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fe-accent);
	filter: brightness(1.35);
}

/* Pojedynczy wpis (single.php bez zmian) – długa lista archiwum w sidebarze z przewijaniem */
.fe-blog-page.single-post .left-navigation .contact-adress {
	max-height: 26rem;
	overflow-y: auto;
	scrollbar-width: thin;
}

.fe-blog-page.single-post .side .row {
	margin: 0;
}

/* ---------- Mobile ---------- */

@media (max-width: 991.98px) {
	.fe-blog__side {
		margin-top: 2.5rem;
	}
}

@media (max-width: 767.98px) {
	.fe-blog-hero {
		/* nawigacja mobilna nie jest nakładana na zdjęcie */
		margin-top: 0;
		padding-top: 0;
		min-height: 150px;
	}

	.fe-blog-hero__title,
	h1.fe-blog-hero__title {
		font-size: 1.75rem;
	}

	.fe-blog-hero__inner {
		padding-bottom: 1.25rem;
	}

	.fe-card__title {
		font-size: 1.1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fe-card,
	.fe-card__media img {
		transition: none;
	}

	.fe-card:hover,
	.fe-card:focus-within {
		transform: none;
	}

	.fe-card:hover .fe-card__media img {
		transform: none;
	}
}


/* ==========================================================================
   Pojedynczy wpis – wygląd spójny z resztą strony (karta, typografia, akcent)
   ========================================================================== */
.fe-blog-page.single-post .post-content-single > .row > .news {
	padding: 36px 40px 40px;
	background: var(--fe-surface);
	border: 1px solid var(--fe-line);
	border-radius: var(--fe-radius);
	color: #d8d8dc;
	font-size: 17px;
	line-height: 1.75;
}
.fe-blog-page.single-post .post-content-single {
	background: transparent !important;
}
.fe-blog-page.single-post .news > header h1 {
	margin: 0 0 18px;
	color: #fff;
	font-size: clamp(26px, 3.2vw, 38px);
	font-weight: 800;
	line-height: 1.2;
}
.fe-blog-page.single-post .news > header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin-bottom: 14px;
}
.fe-blog-page.single-post .news > header h1 {
	flex: 0 0 100%;
}
.fe-blog-page.single-post .news > header .date,
.fe-blog-page.single-post .news > header .categories {
	float: none;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	color: var(--fe-muted);
	font-size: 14px;
	font-weight: 600;
}
.fe-blog-page.single-post .news > header .date {
	padding: 4px 12px;
	border: 1px solid var(--fe-line);
	border-radius: 999px;
	background: var(--fe-surface-2);
}
.fe-blog-page.single-post .news > header .categories a {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(var(--fe-accent-rgb, 122, 90, 176), .18);
	border: 1px solid rgba(var(--fe-accent-rgb, 122, 90, 176), .45);
	color: #fff;
	font-size: 13px;
	text-decoration: none;
}
.fe-blog-page.single-post .news > header .categories a:hover {
	background: var(--fe-accent);
}
.fe-blog-page.single-post #breadcrumbs {
	margin: 0 0 24px !important;
	color: #8e8e96;
	font-size: 13px;
}
.fe-blog-page.single-post #breadcrumbs a {
	color: #b9b9c2;
}
.fe-blog-page.single-post .news h2 {
	margin: 36px 0 12px;
	color: #fff;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.3;
}
.fe-blog-page.single-post .news h3 {
	margin: 28px 0 10px;
	color: #fff;
	font-size: 21px;
	font-weight: 700;
}
.fe-blog-page.single-post .news p {
	margin: 0 0 16px;
}
.fe-blog-page.single-post .news ul,
.fe-blog-page.single-post .news ol {
	margin: 0 0 18px;
	padding-left: 22px;
}
.fe-blog-page.single-post .news li {
	margin-bottom: 6px;
}
.fe-blog-page.single-post .news li::marker {
	color: var(--fe-accent);
}
.fe-blog-page.single-post .news strong {
	color: #fff;
}
.fe-blog-page.single-post .news a:not(.fe-btn) {
	color: var(--fe-accent-light, #c9b2ee);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.fe-blog-page.single-post .news img,
.fe-blog-page.single-post .news figure img {
	max-width: 100%;
	height: auto;
	border-radius: var(--fe-radius);
}
.fe-blog-page.single-post .news figure,
.fe-blog-page.single-post .news .wp-block-image {
	margin: 24px 0;
}
.fe-blog-page.single-post .news blockquote {
	margin: 24px 0;
	padding: 16px 20px;
	border-left: 3px solid var(--fe-accent);
	border-radius: 0 var(--fe-radius) var(--fe-radius) 0;
	background: var(--fe-surface-2);
}
.fe-blog-page.single-post .news table {
	width: 100%;
	margin: 20px 0;
	border-collapse: collapse;
	font-size: 15px;
}
.fe-blog-page.single-post .news th,
.fe-blog-page.single-post .news td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--fe-line);
}
.fe-blog-page.single-post .news th {
	color: #fff;
	text-align: left;
}
@media (max-width: 767.98px) {
	.fe-blog-page.single-post .post-content-single > .row > .news {
		padding: 24px 18px 28px;
		font-size: 16px;
	}
	.fe-blog-page.single-post .news h2 {
		font-size: 22px;
	}
	.fe-blog-page.single-post .side {
		margin-top: 16px;
	}
}
.fe-blog-page.single-post .post-content-single > .row > .news {
	background: var(--fe-surface) !important;
}
/* Przecinki między kategoriami (tekst z the_category) – zbędne przy pigułkach. */
.fe-blog-page.single-post .news > header .categories {
	font-size: 0;
}
.fe-blog-page.single-post .news > header .categories::before {
	content: "Kategorie:";
	font-size: 14px;
}
.fe-blog-page.single-post .news > header .categories i {
	display: none;
}