/* =========================================================
   SOLARBLOG — SIDEBAR + RELATED POSTS
   AdsWeb
   ========================================================= */


/* =========================================================
   SIDEBAR — BASE
   ========================================================= */

.sb-side {
	--sb-primary: var(--ast-global-color-0, #022492);
	--sb-navy: var(--ast-global-color-1, #1d2b5a);
	--sb-heading: var(--ast-global-color-2, #0f172a);
	--sb-text: var(--ast-global-color-3, #364151);
	--sb-border: var(--ast-border-color, #d1dae5);
	--sb-line: #e7eaee;

	width: 100%;
	margin: 0;
	padding: 0;

	font-family: "Karla", sans-serif;
	color: var(--sb-text);
}

.sb-side *,
.sb-side *::before,
.sb-side *::after {
	box-sizing: border-box;
}

.widget .sb-side a,
.sb-side a {
	text-decoration: none !important;
}


/* =========================================================
   SIDEBAR — SECTIONS
   ========================================================= */

.sb-side__section {
	margin: 0;
	padding: 0;
}

.sb-side__section + .sb-side__section {
	margin-top: 26px;
}


/* =========================================================
   SIDEBAR — TITLES
   ========================================================= */

.sb-side__title {
	position: relative;

	margin: 0 0 5px !important;
	padding: 0 0 10px 11px !important;

	border-bottom: 1px solid var(--sb-border);

	font-family: "Rubik", sans-serif !important;
	font-size: 19px !important;
	line-height: 1.2 !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em;

	color: var(--sb-heading) !important;
}

.sb-side__title::before {
	content: "";

	position: absolute;
	left: 0;
	top: 2px;
	bottom: 12px;

	width: 3px;

	border-radius: 4px;

	background: var(--sb-primary);
}


/* =========================================================
   SIDEBAR — LIST
   ========================================================= */

.sb-side-list {
	margin: 0 !important;
	padding: 0 !important;

	list-style: none !important;
}

.sb-side-list__item {
	margin: 0 !important;
	padding: 0 !important;

	border-bottom: 1px solid var(--sb-line);
}

.sb-side-list__item:last-child {
	border-bottom: 0;
}


/* =========================================================
   SIDEBAR — LINKS
   ========================================================= */

.sb-side-link {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 12px;

	width: 100%;

	margin: 0;
	padding: 8px 1px;

	color: var(--sb-text) !important;

	transition: color .16s ease;
}

.sb-side-link__label {
	min-width: 0;
}

.sb-side-link__arrow {
	flex: 0 0 auto;

	font-size: 15px;
	line-height: 1;

	color: var(--sb-primary);

	transition: transform .16s ease;
}

.sb-side-link:hover {
	color: var(--sb-primary) !important;
}

.sb-side-link:hover .sb-side-link__arrow {
	transform: translateX(3px);
}


/* =========================================================
   SIDEBAR — MAIN TOPICS
   ========================================================= */

.sb-side-list--topics .sb-side-link {
	min-height: 36px;
}

.sb-side-list--topics .sb-side-link__label {
	font-size: 15.5px;
	line-height: 1.25;
	font-weight: 600;
}


/* =========================================================
   SIDEBAR — RECOMMENDED
   ========================================================= */

.sb-side-list--recommended .sb-side-link {
	align-items: flex-start;

	padding-top: 9px;
	padding-bottom: 9px;
}

.sb-side-list--recommended .sb-side-link__label {
	font-family: "Rubik", sans-serif;

	font-size: 15.5px;
	line-height: 1.32;
	font-weight: 500;

	color: var(--sb-heading);

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;

	overflow: hidden;
}

.sb-side-list--recommended .sb-side-link__arrow {
	margin-top: 3px;
}

.sb-side-list--recommended .sb-side-link:hover .sb-side-link__label {
	color: var(--sb-primary);
}


/* =========================================================
   SIDEBAR — FOCUS
   ========================================================= */

.sb-side a:focus-visible {
	outline: 3px solid rgba(2, 36, 146, .18);
	outline-offset: 2px;
}


/* =========================================================
   SIDEBAR — MOBILE
   ========================================================= */

@media (max-width: 921px) {

	.sb-side__section + .sb-side__section {
		margin-top: 24px;
	}

}

@media (max-width: 480px) {

	.sb-side__title {
		font-size: 18px !important;
	}

	.sb-side-link {
		padding-top: 9px;
		padding-bottom: 9px;
	}

	.sb-side-list--topics .sb-side-link__label {
		font-size: 15px;
	}

	.sb-side-list--recommended .sb-side-link__label {
		font-size: 15px;
	}

}


/* =========================================================
   RELATED POSTS — BASE
   ========================================================= */

.ast-single-related-posts-container {
	--sb-related-primary: var(--ast-global-color-0, #022492);
	--sb-related-navy: var(--ast-global-color-1, #1d2b5a);
	--sb-related-heading: var(--ast-global-color-2, #0f172a);
	--sb-related-text: var(--ast-global-color-3, #364151);
	--sb-related-border: var(--ast-border-color, #d1dae5);

	width: 100% !important;

	margin: 52px 0 0 !important;
	padding: 0 !important;

	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;

	font-family: "Karla", sans-serif;
}


/* =========================================================
   RELATED POSTS — TITLE
   ========================================================= */

.ast-related-posts-title-section {
	margin: 0 0 20px !important;
	padding: 0 0 12px !important;

	border-bottom: 1px solid var(--sb-related-border);
}

.ast-related-posts-title {
	position: relative;

	margin: 0 !important;
	padding: 0 0 0 15px !important;

	font-family: "Rubik", sans-serif !important;
	font-size: 26px !important;
	line-height: 1.2 !important;
	font-weight: 600 !important;
	letter-spacing: -0.015em;

	color: var(--sb-related-heading) !important;
}

.ast-related-posts-title::before {
	content: "";

	position: absolute;

	left: 0;
	top: 2px;
	bottom: 2px;

	width: 4px;

	border-radius: 5px;

	background: var(--sb-related-primary);
}


/* =========================================================
   RELATED POSTS — GRID
   ========================================================= */

.ast-related-posts-wrapper {
	display: grid !important;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 18px !important;

	align-items: stretch;

	width: 100%;

	margin: 0 !important;
	padding: 0 !important;
}


/* =========================================================
   RELATED POSTS — CARD
   ========================================================= */

.ast-related-post {
	display: flex !important;
	flex-direction: column;

	min-width: 0;
	height: 100%;

	margin: 0 !important;
	padding: 0 !important;

	overflow: hidden;

	border: 1px solid #e1e5ea !important;
	border-radius: 9px !important;

	background: #f6f7f8 !important;

	box-shadow: none !important;

	transition:
		border-color .18s ease,
		background .18s ease,
		box-shadow .18s ease;
}

.ast-related-post:hover {
	border-color: var(--sb-related-border) !important;

	background: #fafbfc !important;

	box-shadow:
		0 4px 16px rgba(15, 23, 42, .04) !important;
}


/* =========================================================
   RELATED POSTS — INTERNAL FLEX
   ========================================================= */

.ast-related-posts-inner-section {
	display: flex !important;
	flex-direction: column;

	width: 100%;
	height: 100%;

	margin: 0 !important;
	padding: 0 !important;
}

.ast-related-post-content {
	display: flex !important;
	flex-direction: column;
	flex: 1;

	width: 100%;
	height: 100%;

	margin: 0 !important;
	padding: 0 !important;
}


/* =========================================================
   RELATED POSTS — IMAGE
   ========================================================= */

.ast-related-post-featured-section {
	flex: 0 0 auto;

	width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	overflow: hidden;
}

.ast-related-post .post-thumb-img-content,
.ast-related-post .post-thumb {
	width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	overflow: hidden;
}

.ast-related-post .post-thumb a {
	display: block !important;

	width: 100% !important;

	aspect-ratio: 16 / 9;

	margin: 0 !important;
	padding: 0 !important;

	overflow: hidden;
}

.ast-related-post .post-thumb img {
	display: block !important;

	width: 100% !important;
	height: 100% !important;

	max-width: none !important;

	margin: 0 !important;
	padding: 0 !important;

	aspect-ratio: auto !important;

	object-fit: cover !important;
	object-position: center center !important;

	border-radius: 0 !important;

	transform: scale(1);

	transition:
		transform .36s cubic-bezier(.2, .6, .2, 1);
}


/* =========================================================
   RELATED POSTS — CONTENT
   ========================================================= */

.ast-related-post .related-entry-header {
	display: flex !important;
	flex-direction: column;
	flex: 1;

	min-width: 0;

	margin: 0 !important;
	padding: 16px !important;
}


/* =========================================================
   RELATED POSTS — TITLE
   ========================================================= */

.ast-related-post-title {
	margin: 0 !important;
	padding: 0 !important;

	font-family: "Rubik", sans-serif !important;
	font-size: 18px !important;
	line-height: 1.3 !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em;

	color: var(--sb-related-heading) !important;

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;

	overflow: hidden;
}

.ast-related-post-title a {
	color: inherit !important;
	text-decoration: none !important;

	transition: color .18s ease;
}

.ast-related-post:hover .ast-related-post-title a {
	color: var(--sb-related-primary) !important;
}


/* =========================================================
   RELATED POSTS — META

   Astra generuje:
   Kategorie | data

   Kategorie ukrywamy.
   Separator znika dzięki font-size:0.
   Data zostaje i jest zawsze przy dole karty.
   ========================================================= */

.ast-related-post .entry-meta {
	margin: auto 0 0 !important;
	padding: 11px 0 0 !important;

	font-size: 0 !important;
	line-height: 1 !important;

	color: #89929f !important;
}


/* ukrywamy wszystkie kategorie */

.ast-related-post .entry-meta .cat-links,
.ast-related-post .entry-meta .ast-taxonomy-container {
	display: none !important;
}


/* zostawiamy tylko datę */

.ast-related-post .entry-meta .posted-on {
	display: block !important;

	margin: 0 !important;
	padding: 0 !important;

	font-family: "Karla", sans-serif !important;
	font-size: 12.5px !important;
	line-height: 1.3 !important;
	font-weight: 400 !important;

	color: #89929f !important;
}

.ast-related-post .entry-meta .published {
	display: inline !important;

	margin: 0 !important;
	padding: 0 !important;

	font-size: inherit !important;
	line-height: inherit !important;

	color: inherit !important;
}


/* =========================================================
   RELATED POSTS — EMPTY CONTENT
   ========================================================= */

.ast-related-post .entry-content {
	display: none !important;
}


/* =========================================================
   RELATED POSTS — HOVER
   ========================================================= */

@media (hover: hover) {

	.ast-related-post:hover .post-thumb img {
		transform: scale(1.035);
	}

}


/* =========================================================
   RELATED POSTS — TABLET
   ========================================================= */

@media (max-width: 921px) {

	.ast-single-related-posts-container {
		margin-top: 46px !important;
	}

	.ast-related-posts-wrapper {
		gap: 14px !important;
	}

	.ast-related-post-title {
		font-size: 17px !important;
	}

}


/* =========================================================
   RELATED POSTS — MOBILE

   WAŻNE:
   obraz nadal jest NAD tekstem.
   Żadnego bocznego grida.
   ========================================================= */

@media (max-width: 700px) {

	.ast-single-related-posts-container {
		margin-top: 44px !important;
		padding: 0 !important;
	}

	.ast-related-posts-title-section {
		margin-bottom: 16px !important;
		padding-bottom: 10px !important;
	}

	.ast-related-posts-title {
		padding-left: 13px !important;

		font-size: 23px !important;
	}

	.ast-related-posts-title::before {
		width: 3px;
	}

	.ast-related-posts-wrapper {
		display: grid !important;

		grid-template-columns: 1fr !important;

		gap: 14px !important;
	}

	.ast-related-post {
		display: flex !important;
		flex-direction: column !important;

		width: 100% !important;
		height: auto;
	}

	.ast-related-posts-inner-section,
	.ast-related-post-content {
		display: flex !important;
		flex-direction: column !important;

		width: 100% !important;
		height: 100%;
	}

	.ast-related-post-featured-section,
	.ast-related-post .post-thumb-img-content,
	.ast-related-post .post-thumb {
		width: 100% !important;
		height: auto !important;
	}

	.ast-related-post .post-thumb a {
		display: block !important;

		width: 100% !important;
		height: auto !important;

		aspect-ratio: 16 / 9 !important;
	}

	.ast-related-post .post-thumb img {
		width: 100% !important;
		height: 100% !important;

		object-fit: cover !important;
	}

	.ast-related-post .related-entry-header {
		display: flex !important;
		flex-direction: column !important;

		padding: 14px !important;
	}

	.ast-related-post-title {
		font-size: 17px !important;
		line-height: 1.3 !important;

		-webkit-line-clamp: 2;
	}

	.ast-related-post .entry-meta {
		margin-top: 10px !important;
		padding-top: 0 !important;
	}

	.ast-related-post .entry-meta .posted-on {
		font-size: 12px !important;
	}

}


/* =========================================================
   RELATED POSTS — SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

	/*
	 * Przebija wcześniejsze stare custom CSS Astry,
	 * które dodawało padding do related posts.
	 */
	.site .ast-single-related-posts-container {
		width: 100% !important;

		margin-left: 0 !important;
		margin-right: 0 !important;

		padding: 0 !important;
	}

	.ast-related-posts-title {
		font-size: 22px !important;
	}

	.ast-related-post .related-entry-header {
		padding: 13px !important;
	}

	.ast-related-post-title {
		font-size: 16px !important;
		line-height: 1.32 !important;
	}

	.ast-related-post .entry-meta .posted-on {
		font-size: 11.5px !important;
	}

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

	.sb-side *,
	.sb-side *::before,
	.sb-side *::after,
	.ast-related-post,
	.ast-related-post img,
	.ast-related-post a {
		transition: none !important;
	}

	.ast-related-post .post-thumb img {
		transform: none !important;
	}

}