/* ==========================================================================
   wPrawo Promo: wygląd kreacji. Korzysta ze zmiennych motywu wPrawo
   (--accent, --bg-soft, --fg, --rule, --font-serif...), z wartościami zapasowymi.
   ========================================================================== */

.wprawo-promo {
	container-type: inline-size;
	--wp-ink: #14171c;
	--wp-accent: var(--accent, #e2131d);
	--wp-on-accent: var(--on-accent, #ffffff);
	--wp-serif: var(--font-serif, Georgia, "Times New Roman", serif);
	--wp-sans: var(--font-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
}

/* Rezerwacja miejsca do czasu wyboru kreacji (ogranicza skoki układu). */
.wprawo-promo[data-state="pending"] { min-height: 9rem; }
.wprawo-promo[data-state="empty"] { display: none; }

.ad-slot:has(> .wprawo-promo[data-state="empty"]),
.wprawo-promo-row:has(> .wprawo-promo[data-state="empty"]) { display: none; }

.wprawo-promo-row { grid-column: 1 / -1; margin-block: 0.5rem; }
.rows > .wprawo-promo-row { padding-block: 1rem; border-bottom: 1px solid var(--rule, rgba(127, 127, 127, 0.3)); }

/* W treści wpisu (.prose) zachowujemy własne odstępy i kolory linków. */
.prose > .wprawo-promo { margin-block: 2rem; }
.wprawo-promo .wp-promo a { text-decoration: none; }
.wprawo-promo .wp-promo p { margin: 0; }

/* Baza kreacji ----------------------------------------------------------- */
.wp-promo {
	position: relative;
	display: grid;
	overflow: hidden;
	background: var(--wp-bg);
	color: var(--wp-fg);
	font: 400 1rem/1.45 var(--wp-sans);
	hyphens: manual;
	text-align: left;
}

.wp-promo--ink { --wp-bg: var(--wp-ink); --wp-fg: #ffffff; --wp-btn-bg: #ffffff; --wp-btn-fg: var(--wp-ink); }
.wp-promo--accent { --wp-bg: var(--wp-accent); --wp-fg: var(--wp-on-accent); --wp-btn-bg: var(--wp-on-accent); --wp-btn-fg: var(--wp-accent); }
.wp-promo--paper { --wp-bg: var(--bg-soft, #f4f2ee); --wp-fg: var(--fg, #121212); --wp-btn-bg: var(--fg, #121212); --wp-btn-fg: var(--bg, #ffffff); }
.wp-promo--plain { --wp-bg: transparent; --wp-fg: var(--fg, #121212); --wp-btn-bg: var(--fg, #121212); --wp-btn-fg: var(--bg, #ffffff); border-block: 1px solid var(--rule-strong, rgba(127, 127, 127, 0.5)); }
.wp-promo--custom, .wp-promo--product { --wp-bg: transparent; --wp-fg: inherit; }

.wp-promo__body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem; }
/* Obraz zawsze wypelnia ramke o stalych proporcjach, wiec zdjecie pionowe nie rozciaga kreacji. */
.wp-promo__media { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: rgba(127, 127, 127, 0.15); }
.wp-promo__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }

.wp-promo__tag { font: 700 0.6875rem/1 var(--wp-sans); letter-spacing: 0.16em; text-transform: uppercase; }
.wp-promo__eyebrow { font: 600 0.8125rem/1.3 var(--wp-sans); }
.wp-promo__title { font: 600 clamp(1.4rem, 5cqw, 2rem)/1.12 var(--wp-serif); letter-spacing: -0.015em; text-wrap: balance; }
.wp-promo__title a { color: inherit; }
.wp-promo__text { max-width: 36rem; font: 400 1.05rem/1.45 var(--wp-serif); }
.wp-promo__actions { margin-top: 0.4rem !important; }

.wp-promo__btn {
	display: inline-flex;
	align-items: center;
	padding: 0.7rem 1.15rem;
	background: var(--wp-btn-bg);
	color: var(--wp-btn-fg);
	border: 1px solid var(--wp-btn-bg);
	font: 600 0.875rem/1 var(--wp-sans);
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}
.wp-promo__btn:hover { background: transparent; color: var(--wp-fg); }
.wprawo-promo .wp-promo a.wp-promo__btn { color: var(--wp-btn-fg); }
.wprawo-promo .wp-promo a.wp-promo__btn:hover { color: var(--wp-fg); }

@container (min-width: 36rem) {
	.wp-promo.has-media { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
	.wp-promo.has-media .wp-promo__body { justify-content: center; padding: 2rem; }
	.wp-promo.has-media .wp-promo__media { aspect-ratio: auto; min-height: 15rem; }
}

/* Stala wysokosc banerow (wsparcie, polecana strona): wartosci --wp-h (szeroki uklad) i --wp-h-m (waski) ustawia panel.
   Produkty maja wlasna wysokosc, kod HTML dostaje ja jako minimalna. */
.wp-promo--support, .wp-promo--page { height: var(--wp-h-m, auto); grid-template-rows: minmax(0, 1fr); }
.wp-promo--support .wp-promo__body, .wp-promo--page .wp-promo__body { justify-content: center; min-height: 0; overflow: hidden; }
.wp-promo--support .wp-promo__title, .wp-promo--page .wp-promo__title,
.wp-promo--support .wp-promo__text, .wp-promo--page .wp-promo__text {
	display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
	-webkit-line-clamp: 3; line-clamp: 3;
}
.wp-promo--support .wp-promo__text, .wp-promo--page .wp-promo__text { -webkit-line-clamp: 2; line-clamp: 2; }
.wp-promo--support.has-media, .wp-promo--page.has-media { grid-template-rows: minmax(0, 42%) minmax(0, 1fr); }
.wp-promo--support.has-media .wp-promo__media, .wp-promo--page.has-media .wp-promo__media { aspect-ratio: auto; min-height: 0; }
.wp-promo--custom { min-height: var(--wp-h-m, 0); }

@container (min-width: 36rem) {
	.wp-promo--support, .wp-promo--page { height: var(--wp-h, auto); }
	.wp-promo--support.has-media, .wp-promo--page.has-media { grid-template-rows: minmax(0, 1fr); }
	.wp-promo--support.has-media .wp-promo__media, .wp-promo--page.has-media .wp-promo__media { min-height: 0; }
	.wp-promo--support .wp-promo__body, .wp-promo--page .wp-promo__body { padding-block: 1.25rem; }
	.wp-promo--custom { min-height: var(--wp-h, 0); }
}

/* Produkty ---------------------------------------------------------------- */
/* Pas ze sklepem ma lekko inne tlo niz tresc strony i delikatna ramke, zeby czytelnik widzial wyrazne odciecie od felietonow. */
.wp-promo--product { --wp-bg: var(--bg-soft, rgba(127, 127, 127, 0.08)); padding: 1.5rem; border: 1px solid var(--rule, rgba(127, 127, 127, 0.3)); }
@supports (background: color-mix(in srgb, red 5%, blue)) {
	.wp-promo--product { --wp-bg: color-mix(in srgb, var(--fg, #121212) 4%, var(--bg, #ffffff)); border-color: color-mix(in srgb, var(--fg, #121212) 10%, var(--bg, #ffffff)); }
}
@media (max-width: 479px) { .wp-promo--product { padding: 1rem; } }
.wp-promo__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1rem; margin-bottom: 1rem; }
.wp-promo__head .wp-promo__tag { flex: 0 0 100%; }
.wp-promo__head .wp-promo__title { flex: 1 1 auto; font-size: 1.35rem; }
.wp-promo__more { display: inline-flex; align-items: center; padding: 0.4rem 0.9rem; border: 1px solid var(--btn-solid-bg, var(--wp-accent)); border-radius: 999px; background: var(--btn-solid-bg, var(--wp-accent)); font: 600 0.8125rem/1.2 var(--wp-sans); color: var(--btn-solid-fg, var(--wp-on-accent)) !important; white-space: nowrap; transition: background 0.2s, border-color 0.2s; }
.wp-promo__more::after { content: " →"; margin-left: 0.4rem; }
.wp-promo__more:hover { background: var(--btn-solid-bg-hover, var(--wp-accent)); border-color: var(--btn-solid-bg-hover, var(--wp-accent)); }

/* Karuzela: ile kafelkow naraz ustawia panel (--cols-w >=1280, -d >=1024, -t >=768, -s >=480, -m ponizej), reszta przewija sie poziomo. */
.wp-promo__products {
	--gap: 1.25rem;
	--cols: var(--cols-w, 4);
	--lines: 3;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
	gap: var(--gap);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.wp-promo__products::-webkit-scrollbar { display: none; }
@media (max-width: 1279px) { .wp-promo__products { --cols: var(--cols-d, 4); } }
@media (max-width: 1023px) { .wp-promo__products { --cols: var(--cols-t, 3); --gap: 1rem; } }
@media (max-width: 767px) { .wp-promo__products { --cols: var(--cols-s, 3); --lines: 4; } }
@media (max-width: 479px) { .wp-promo__products { --cols: var(--cols-m, 2); --gap: 0.875rem; } }
.wp-promo__products > li { min-width: 0; scroll-snap-align: start; }

/* Kafelek: zdjecie, tytul o stalej wysokosci (cena zawsze na tym samym poziomie), cena. */
.wp-promo--product .wp-product > a { display: flex; flex-direction: column; height: 100%; gap: 0.75rem; color: var(--fg, inherit); text-decoration: none; }
/* Kafelek zdjęcia: zawsze kwadrat w kolorze motywu (jasny/ciemny z ustawień), zdjęcie w całości (contain), cały kafelek jest linkiem. */
.wp-promo__products { --tile-bg: var(--tile-light, #f3f1ec); }
:root[data-theme="dark"] .wp-promo__products { --tile-bg: var(--tile-dark, #1b1b1f); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .wp-promo__products { --tile-bg: var(--tile-dark, #1b1b1f); } }
.wp-product__img { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--tile-bg); }
.wp-product__img img { position: absolute; inset: 6%; width: 88%; height: 88%; max-width: none; object-fit: contain; object-position: center; mix-blend-mode: multiply; transition: transform 0.35s ease; }
:root[data-theme="dark"] .wp-product__img img { mix-blend-mode: normal; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .wp-product__img img { mix-blend-mode: normal; } }
.wp-product > a:hover .wp-product__img img { transform: scale(1.03); }
.wp-product__name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--lines);
	line-clamp: var(--lines);
	overflow: hidden;
	height: calc(1.35em * var(--lines));
	font: 500 0.9375rem/1.35 var(--wp-serif);
	color: var(--fg, inherit);
	text-wrap: pretty;
}
.wp-product > a:hover .wp-product__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.wp-product__price {
	margin-top: auto;
	padding-top: 0.5rem;
	border-top: 1px solid var(--rule, rgba(127, 127, 127, 0.3));
	font: 600 0.8125rem/1 var(--wp-sans);
	letter-spacing: 0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--accent-text, var(--wp-accent));
}
.wp-product__price del { font-weight: 400; color: var(--fg-muted, inherit); opacity: 0.7; margin-right: 0.35em; }

/* Nawigacja karuzeli (tylko gdy jest wiecej stron niz jedna): male kropki, aktywna to dluzsza zaokraglona kreska,
   w ktorej (przy automatycznym przewijaniu) wypelnia sie pasek czasu do nastepnego przeskoku. */
.wp-promo__dots { --dur: 5s; display: flex; justify-content: center; align-items: center; gap: 0.4rem; margin-top: 1.1rem; }
.wp-promo__dots button {
	position: relative;
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(127, 127, 127, 0.4);
	background: color-mix(in srgb, var(--fg, currentColor) 28%, transparent);
	cursor: pointer;
	transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s;
}
.wp-promo__dots button::before { content: ""; position: absolute; inset: -0.65rem -0.25rem; }
.wp-promo__dots button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--wp-accent); clip-path: inset(0 100% 0 0); }
.wp-promo__dots button:hover { background: rgba(127, 127, 127, 0.7); background: color-mix(in srgb, var(--fg, currentColor) 50%, transparent); }
.wp-promo__dots button[aria-current="true"] { width: 1.75rem; cursor: default; }
.wp-promo__dots button[aria-current="true"]::after { clip-path: inset(0 0 0 0); }
/* Wypelnienie przez clip-path (bez przeliczania layoutu, plynne co do ulamka piksela), a nie przez width. */
.wp-promo__dots.is-auto button[aria-current="true"]::after { clip-path: inset(0 100% 0 0); animation: wp-dot-fill var(--dur) linear forwards; will-change: clip-path; }
.wp-promo__dots.is-paused button[aria-current="true"]::after { animation-play-state: paused; }
.wp-promo__dots button:focus-visible { outline: 2px solid var(--wp-accent); outline-offset: 3px; }
@keyframes wp-dot-fill { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
	.wp-product__img img, .wp-promo__dots button { transition: none; }
}

/* Tryb debugowania (tylko redaktorzy) ------------------------------------ */
.wprawo-promo.is-debug { outline: 2px dashed #d63638; outline-offset: 4px; position: relative; min-height: 3rem; }
.wprawo-promo.is-debug[data-state="empty"] { display: block; }
.wprawo-promo.is-debug::before {
	content: attr(data-debug);
	position: absolute;
	z-index: 5;
	top: -0.9rem;
	left: 0;
	padding: 0.15rem 0.4rem;
	background: #d63638;
	color: #fff;
	font: 600 0.6875rem/1.2 var(--wp-sans);
}

@media print { .wprawo-promo { display: none !important; } }

/* Miejsce pod glownym felietonem na stronie glownej jest wezsze niz caly kontener: na szerokich ekranach pokazujemy tyle kafelkow, co na tablecie. */
@media (min-width: 1024px) { .ad-slot--home-hero .wp-promo__products { --cols: var(--cols-t, 3); --gap: 1rem; } }