/* =============================================================================
   PB Toolkit – Powiązania | Frontend styles v1.0.2
   Karuzela powiązanych produktów / artykułów (Splide.js)
   ============================================================================= */

/* ── Zmienne lokalne ──────────────────────────────────────────────────────── */

.pb-powiazania-related {
	--pb-primary:      #e63946;
	--pb-primary-dark: #c62a35;
	--pb-text:         #1d2939;
	--pb-text-muted:   #667085;
	--pb-border:       #e4e7ec;
	--pb-bg:           #f9fafb;
	--pb-white:        #ffffff;
	--pb-radius:       8px;
	--pb-shadow:       0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
	--pb-shadow-lg:    0 10px 15px -3px rgba(0,0,0,.12), 0 4px 6px -2px rgba(0,0,0,.06);
	--pb-ease:         cubic-bezier(0.4, 0, 0.2, 1);
	--pb-t:            150ms;
}

/* ── Wrapper sekcji ───────────────────────────────────────────────────────── */

.pb-powiazania-related {
	margin: 2.5em 0;
	width: 100%;
	box-sizing: border-box;

	/*
	 * Boczny padding daje oddech cieniom skrajnych kart (pierwszej i ostatniej).
	 * Dolny padding daje oddech cieniowi pod ostatnim rzędem kart —
	 * track Splide ma overflow:hidden, więc cień dolny mieści się w padding
	 * slajdu (patrz niżej), ale wrapper sekcji też potrzebuje trochę miejsca.
	 */
	padding: 0 8px 16px;
}

.pb-powiazania-related__title {
	font-size: 1.2em;
	font-weight: 700;
	margin: 0 0 1em;
	padding-bottom: .4em;
	border-bottom: 2px solid currentColor;
	width: 100%;
	box-sizing: border-box;
}

/* ── Karuzela Splide ──────────────────────────────────────────────────────── */

.pb-powiazania-carousel {
	position: relative;
	width: 100%;
}

.pb-powiazania-carousel .splide__track {
	overflow: hidden;
	width: 100%;
}

.pb-powiazania-carousel .splide__list {
	display: flex;
	align-items: stretch;
}

/*
 * Padding na slajdzie — kluczowy trick dla widoczności cieni.
 *
 * overflow:hidden na .splide__track przycina wszystko co wychodzi
 * poza track. Cień karty (box-shadow: 0 10px 15px…) rozciąga się
 * kilkanaście px w dół i kilka px na boki. Dodając padding do slajdu
 * sprawiamy, że cień rozciąga się w obrębie obszaru slajdu
 * (który jest wewnątrz track), a nie poza niego — i nie jest przycinany.
 *
 * padding-bottom: 16px  → cień dolny karty
 * padding-left/right: 6px → cień boczny (dla kart wewnętrznych;
 *   skrajne korzystają z paddingu .pb-powiazania-related)
 */
.pb-powiazania-carousel .splide__slide {
	display: flex;
	box-sizing: border-box;
	padding: 4px 6px 16px;
}

/* ── Strzałki nawigacyjne — nad kartami ───────────────────────────────────── */

/*
 * Splide dodaje klasę .is-overflow do elementu .splide wtedy i tylko wtedy,
 * gdy liczba slajdów przekracza liczbę widocznych jednocześnie (perPage).
 * Gdy wszystkie karty mieszczą się w widoku — klasy nie ma i strzałki
 * są ukryte. Działa poprawnie przy każdym breakpoincie (Splide przelicza
 * is-overflow przy każdym resize).
 */
.pb-powiazania-carousel:not(.is-overflow) .splide__arrow {
	display: none !important;
}


.pb-powiazania-carousel .splide__arrow {
	position: absolute !important;
	top: 30% !important;
	transform: translateY(-50%) !important;
	z-index: 10;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 36px;
	height: 36px;
	padding: 0;
	margin: 0;
	border-radius: 50%;
	border: 1.5px solid var(--pb-border);
	background: var(--pb-white);
	box-shadow: var(--pb-shadow);
	cursor: pointer;
	opacity: 1 !important;
	line-height: 1;

	transition:
		background  var(--pb-t) var(--pb-ease),
		border-color var(--pb-t) var(--pb-ease),
		box-shadow  var(--pb-t) var(--pb-ease);
}

.pb-powiazania-carousel .splide__arrow--prev {
	left: 6px !important;
	right: auto !important;
}

.pb-powiazania-carousel .splide__arrow--next {
	right: 6px !important;
	left: auto !important;
}

/* splide-core.min.css nie obraca strzałki wstecz — robimy to ręcznie. */
.pb-powiazania-carousel .splide__arrow--prev svg {
	transform: scaleX(-1);
}

.pb-powiazania-carousel .splide__arrow svg {
	width: 14px;
	height: 14px;
	fill: var(--pb-text-muted);
	display: block;
	transition: fill var(--pb-t) var(--pb-ease);
}

.pb-powiazania-carousel .splide__arrow:hover {
	background: var(--pb-primary) !important;
	border-color: var(--pb-primary);
}

.pb-powiazania-carousel .splide__arrow:hover svg {
	fill: #fff;
}

.pb-powiazania-carousel .splide__arrow:disabled {
	opacity: .3 !important;
	cursor: default;
	pointer-events: none;
}

/* ── Karta — baza ─────────────────────────────────────────────────────────── */

.pb-powiazania-card {
	background: var(--pb-white);
	border: 1px solid var(--pb-border);
	border-radius: var(--pb-radius);
	overflow: hidden;
	box-shadow: var(--pb-shadow);
	display: flex;
	flex-direction: column;
	width: 100%;
	position: relative;
	transition:
		box-shadow var(--pb-t) var(--pb-ease),
		transform  var(--pb-t) var(--pb-ease);
}

.pb-powiazania-card:hover {
	box-shadow: var(--pb-shadow-lg);
	transform: translateY(-2px);
}

/* ── Obrazek ──────────────────────────────────────────────────────────────── */

.pb-powiazania-card__image {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--pb-bg);
	flex-shrink: 0;
}

.pb-powiazania-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 300ms ease;
}

.pb-powiazania-card:hover .pb-powiazania-card__image img {
	transform: scale(1.04);
}

.pb-powiazania-related--products .pb-powiazania-card__image {
	aspect-ratio: 3 / 4;
}

.pb-powiazania-related--posts .pb-powiazania-card__image {
	aspect-ratio: 16 / 9;
}

.pb-powiazania-card__img-link {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.pb-powiazania-card__no-image {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #e5e7eb 25%, #d1d5db 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.pb-powiazania-card__no-image::after {
	content: '';
	display: block;
	width: 40%;
	padding-top: 40%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23b0b7c0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z'/%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

/* ── Przycisk serduszka / zakładki ────────────────────────────────────────── */

.pb-powiazania-card__fav,
.pb-powiazania-card__bookmark {
	position: absolute;
	top: .55em;
	right: .55em;
	z-index: 2;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .88);
	backdrop-filter: blur(2px);
	cursor: pointer;
	box-shadow: var(--pb-shadow);
	transition: background var(--pb-t) ease, transform var(--pb-t) ease;
}

.pb-powiazania-card__fav:hover,
.pb-powiazania-card__bookmark:hover {
	background: #fff;
	transform: scale(1.12);
}

.pb-powiazania-card__fav svg,
.pb-powiazania-card__bookmark svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: var(--pb-text-muted);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	display: block;
	transition: fill var(--pb-t) ease, stroke var(--pb-t) ease;
}

.pb-powiazania-card__fav[aria-pressed="true"] svg,
.pb-powiazania-card__bookmark[aria-pressed="true"] svg {
	fill: var(--pb-primary);
	stroke: var(--pb-primary);
}

/* ── Overlay-link (karty artykułów) ──────────────────────────────────────── */

.pb-powiazania-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--pb-radius);
}

/* ── Body karty ───────────────────────────────────────────────────────────── */

/*
 * Roboto wymuszony na całym body karty i dziedziczony przez tytuł, autora,
 * cenę i przycisk. Fallback do system-ui na wypadek braku dostępności fontu
 * (Roboto ładowany przez motyw Newspaper lub Google Fonts w nagłówku).
 */
.pb-powiazania-card__body {
	font-family: 'Roboto', system-ui, sans-serif;
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex-grow: 1;
	position: relative;
	z-index: 2;
}

/* ── Tytuł ────────────────────────────────────────────────────────────────── */

.pb-powiazania-card__title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--pb-text);
	word-break: break-word;
	display: block;
	margin: 0;
	flex: 1;
	text-decoration: none;
}

a.pb-powiazania-card__title:hover {
	color: var(--pb-primary);
	text-decoration: underline;
}

/* ── Autor artykułu ───────────────────────────────────────────────────────── */

.pb-powiazania-card__author {
	font-size: 12px;
	color: var(--pb-text-muted);
}

/* ── Cena produktu ────────────────────────────────────────────────────────── */

.pb-powiazania-card__price {
	font-size: 15px;
	font-weight: 600;
	color: var(--pb-text);
}

.pb-powiazania-card__price .woocommerce-Price-amount {
	color: inherit;
}

/* ── Przycisk Dodaj do koszyka ────────────────────────────────────────────── */

.pb-powiazania-card__atc {
	display: block;
	padding: 7px 14px;
	background: var(--pb-primary);
	color: #fff !important;
	border-radius: 6px;
	border: none;
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	width: 100%;
	box-sizing: border-box;
	position: relative;
	z-index: 2;
	transition: background var(--pb-t) var(--pb-ease);
}

.pb-powiazania-card__atc:hover {
	background: var(--pb-primary-dark);
	color: #fff !important;
	text-decoration: none !important;
}

.pb-powiazania-card__atc.added {
	opacity: .7;
}