/* Simply Me – Single Post Layout
   Zmienne CSS (--smsl-*) są nadpisywane inline na podstawie ustawień w panelu admina.
   UWAGA: żadna reguła w tym pliku nie celuje w klasy .elementor-* -
   stylujemy wyłącznie własne klasy smsl-*, aby nie ingerować w layout Elementora. */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;600;700&display=swap');

:root {
	--smsl-stripe-color: #2563eb;
	--smsl-content-width: 72fr;
	--smsl-sidebar-width: 28fr;
	--smsl-image-radius: 12px;
	--smsl-el-sidebar-width: 300px;
	--smsl-el-container-width: 1540px;
	--smsl-el-gap: 40px;
	--smsl-el-main-width: 880px;
	--smsl-el-image-max-width: 700px;
	--smsl-header-margin: 20px;
	--smsl-header-offset: 110px; /* fallback - nadpisywane precyzyjnie przez frontend.js */
}

/* ==========================================================================
   Ścieżka A: wpisy klasyczne (szablon single-simplyme.php)
   ========================================================================== */

.smsl-wrapper {
	width: 100%;
}

.smsl-stripe {
	width: 100%;
	height: 6px;
	background-color: var(--smsl-stripe-color);
}

.smsl-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
}

.smsl-layout {
	display: grid;
	grid-template-columns: var(--smsl-content-width) var(--smsl-sidebar-width);
	gap: 2rem;
	margin: 2rem 0;
	align-items: start;
}

.smsl-content {
	min-width: 0; /* zapobiega rozpychaniu kolumny przez duże obrazki/tabele w treści */
}

.smsl-sidebar {
	min-width: 0;
}

.smsl-thumbnail-img {
	width: 100%;
	height: auto;
	border-radius: var(--smsl-image-radius);
	display: block;
	margin-bottom: 1.25rem;
}

.smsl-title {
	margin: 0 0 0.5rem;
	line-height: 1.2;
}

.smsl-meta {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	font-size: 0.9rem;
	opacity: 0.75;
	margin-bottom: 1.5rem;
}

.smsl-meta a {
	color: inherit;
}

.smsl-entry-content {
	line-height: 1.7;
}

.smsl-sidebar-heading {
	margin-top: 0;
	font-size: 1.1rem;
	font-family: 'Lato', sans-serif;
}

.smsl-featured-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.smsl-featured-item {
	margin-bottom: 1rem;
}

.smsl-featured-link {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	text-decoration: none;
	color: inherit;
}

.smsl-featured-thumb img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: calc(var(--smsl-image-radius) / 2);
	display: block;
}

.smsl-featured-title {
	font-size: 0.95rem;
	line-height: 1.3;
	font-family: 'Lato', sans-serif;
}

@media (max-width: 782px) {
	.smsl-layout {
		grid-template-columns: 1fr; /* sidebar spada pod treść dopiero na mobile */
	}
}

/* ==========================================================================
   Ścieżka B: wpisy zbudowane w Elementorze - karty POD treścią.
   Struktura HTML jest niezależna od Elementora, nie opakowuje ani nie zmienia
   samej treści Elementora w żaden sposób.
   ========================================================================== */

.smsl-featured-cards-section {
	max-width: 1200px;
	margin: 3rem auto 2rem;
	padding: 2rem 1rem 0;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.smsl-featured-cards-heading {
	margin: 0 0 1.5rem;
	font-size: 1.3rem;
	text-align: center;
}

.smsl-featured-cards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.smsl-featured-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

.smsl-featured-card-thumb img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--smsl-image-radius);
	display: block;
	margin-bottom: 0.75rem;
}

.smsl-featured-card-title {
	font-size: 1rem;
	line-height: 1.3;
	font-weight: 600;
}

@media (max-width: 992px) {
	.smsl-featured-cards-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.smsl-featured-cards-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Ścieżka B2: wpisy zbudowane w Elementorze - polecane wpisy W PANELU BOCZNYM.
   Żadna reguła poniżej nie celuje w klasy .elementor-* i nie zmienia szerokości
   sekcji Elementora - poszerzany jest wyłącznie zewnętrzny kontener Astry
   (.ast-container), żeby obok istniejącej (niezmienionej) szerokości treści
   zmieściła się dodatkowa kolumna sidebaru.
   ========================================================================== */

/* Poszerzenie kontenera Astry TYLKO gdy tryb sidebar jest aktywny na tym wpisie. */
body.smsl-el-sidebar-active .ast-container {
	max-width: var(--smsl-el-container-width);
}

/*
 * Zabezpieczenie: neutralizuje typowe, węższe ograniczenia szerokości, jakie Astra
 * może nakładać na elementy MIĘDZY .ast-container a treścią wpisu - np. własny
 * sidebar Astry (#primary/#secondary), per-post layout "Narrow Container"
 * (.ast-narrow-container) albo wrapper .entry-content/.ast-article-single.
 * Działa WYŁĄCZNIE w obrębie body.smsl-el-sidebar-active, czyli tylko na tym
 * konkretnym wpisie z aktywnym trybem sidebar - nie dotyka żadnych globalnych
 * ustawień Astry ani innych stron. !important jest tu celowe: nadpisujemy
 * węższą szerokość narzuconą przez CSS motywu na tej samej stronie.
 */
body.smsl-el-sidebar-active #primary,
body.smsl-el-sidebar-active .ast-narrow-container,
body.smsl-el-sidebar-active .entry-content,
body.smsl-el-sidebar-active .ast-article-single,
body.smsl-el-sidebar-active .ast-article-post {
	max-width: none !important;
	width: 100% !important;
	float: none !important;
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.smsl-el-layout--sidebar {
	width: 100%;
	max-width: var(--smsl-el-container-width);
	margin-inline: auto;
	margin-block: 2rem;
	display: grid;
	grid-template-columns: var(--smsl-el-main-width) var(--smsl-el-sidebar-width);
	justify-content: center; /* centruje stałoszerokościową siatkę wewnątrz poszerzonego kontenera */
	gap: var(--smsl-el-gap, 40px);
	align-items: start;
}

.smsl-el-main {
	min-width: 0; /* reset siatki - nie zmienia renderowanej szerokości Elementora */
	max-width: var(--smsl-el-main-width);
	background-color: #ffffff;
	border-radius: var(--smsl-image-radius);
	padding: 2rem 2.5rem;
}

/*
 * Dodawana wyłącznie przez frontend.js do pierwszego <img> znalezionego wewnątrz
 * .smsl-el-main - żadna klasa/atrybut Elementora nie jest przy tym zmieniana,
 * to jest DODATKOWA klasa obok istniejących. Obraz NIE jest przycinany i
 * zachowuje swoje naturalne proporcje (height: auto) - ograniczona jest
 * wyłącznie jego maksymalna szerokość. object-fit: cover jest zarezerwowane
 * tylko dla miniatur w panelu bocznym (.smsl-el-card-thumb), nie dla tego obrazu.
 */
.smsl-el-hero-image {
	display: block !important;
	width: 100% !important;
	max-width: var(--smsl-el-image-max-width) !important;
	height: auto !important;
	border-radius: var(--smsl-image-radius) !important;
	margin: 0 auto !important;
}

.smsl-el-sidebar {
	position: sticky;
	top: var(--smsl-header-offset);
	align-self: start;
}

.smsl-el-sidebar-inner {
	display: flex;
	flex-direction: column;
}

.smsl-el-sidebar-heading {
	margin: 0 0 1.25rem;
	font-size: 1.15rem;
	font-family: 'Lato', sans-serif;
}

.smsl-el-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	margin-bottom: 1.75rem;
}

.smsl-el-card:last-child {
	margin-bottom: 0;
}

.smsl-el-card-thumb img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--smsl-image-radius);
	display: block;
	margin-bottom: 0.75rem;
}

.smsl-el-card-title {
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.35;
	margin-bottom: 0.35rem;
	font-family: 'Lato', sans-serif;
}

.smsl-el-card-readmore {
	font-size: 0.9rem;
	opacity: 0.75;
	font-family: 'Lato', sans-serif;
}

@media (max-width: 900px) {
	body.smsl-el-sidebar-active .ast-container {
		max-width: none; /* wraca do domyślnej szerokości kontenera Astry */
	}

	.smsl-el-layout--sidebar {
		grid-template-columns: 1fr; /* sidebar przechodzi pod treść */
		justify-content: stretch;
	}

	.smsl-el-main {
		max-width: none; /* na mobile treść wraca do pełnej dostępnej szerokości */
	}

	.smsl-el-sidebar {
		position: static; /* sticky wyłączone, gdy sidebar jest pod treścią */
		top: auto;
	}
}