/**
 * Components used on many page types: hero and page heads, sections,
 * cards, steps, reviews, figures, prose, filter and pagination, search,
 * consent banner and the bottom-left buttons, and the like.
 *
 * Moved in stage A, step 9, from portfolio.css, oferta.css, blog.css,
 * system.css and pages.css (in that order, so rules keep their order in
 * the cascade); selectors and values unchanged. Loads on every page, in
 * the place portfolio.css had before (after chrome.css).
 *
 * @package plantworld
 */

/* ═══ from portfolio.css ═══ */

/* ── Portfolio: archive filter ── */
/*
 * Stage G [20]: a darker box with drop-down lists (Typ, Rodzaj
 * przestrzeni, Miasto – review of 29.10.2026), sharing the width of the
 * box evenly. Each list is a <details>: the current choice in the
 * summary, plain links in the panel (they work without JavaScript and for
 * Google). The current link is ink and bold.
 */
.pw-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	margin-bottom: 64px;
	padding: 20px 24px;
	background: var(--pw-paper-alt);
}

.pw-filter__row {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 0;
	min-width: 220px;
}

.pw-filter__label {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-lead-muted);
}

.pw-filter__drop {
	position: relative;
}

.pw-filter__current {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 48px;
	padding: 0 16px;
	border: 1px solid var(--border-field);
	background: var(--pw-paper);
	font-size: 15px;
	font-weight: 500;
	color: var(--text-heading);
	cursor: pointer;
	list-style: none;
}

.pw-filter__current::-webkit-details-marker {
	display: none;
}

.pw-filter__current::after {
	content: "";
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-right: 1.5px solid var(--border-field);
	border-bottom: 1.5px solid var(--border-field);
	transform: rotate(45deg);
}

.pw-filter__drop[open] > .pw-filter__current {
	border-color: var(--action-on-light);
}

.pw-filter__drop[open] > .pw-filter__current::after {
	margin-top: 4px;
	transform: rotate(-135deg);
}

.pw-filter__current:focus-visible {
	outline: 2px solid var(--focus-ring-on-light);
	outline-offset: 2px;
}

.pw-filter__list {
	position: absolute;
	z-index: 20;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	border: 1px solid var(--border-field);
	background: var(--pw-paper);
}

.pw-filter__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	min-height: 44px;
	padding: 0 16px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--text-body);
	text-decoration: none;
	transition: var(--transition-color);
}

.pw-filter__link:hover {
	background: var(--pw-paper-alt);
	color: var(--action-on-light);
}

.pw-filter__link[aria-current="page"] {
	color: var(--pw-ink);
	font-weight: 600;
}

.pw-filter__link:focus-visible {
	outline: 2px solid var(--focus-ring-on-light);
	outline-offset: -2px;
}

.pw-filter__count {
	color: var(--text-lead-muted);
	font-weight: 400;
}

/* A list being loaded (portfolio-filter.js): dimmed, nothing jumps. */
[data-pw-filter-target][aria-busy="true"] {
	opacity: 0.5;
	transition: opacity 120ms var(--ease);
}

.pw-load-more {
	display: flex;
	justify-content: center;
	margin-top: 48px;
}

.pw-filter--compact .pw-filter__row {
	grid-template-columns: minmax(0, 1fr);
	gap: 4px;
	padding: 16px 0 8px;
}

.pw-filter--compact .pw-filter__list {
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: thin;
	padding-bottom: 8px;
}

/* ── Portfolio: entry card ── */
/* The whole card is one link. 4:3 photo in a fixed frame (.pw-tile), caption below. Hover: photo scales, title turns green. */
.pw-entries {
	list-style: none;
	margin: 0;
	padding: 0;
	row-gap: 56px;
}

/* A feature card next to entry cards, built from blocks (stage B): the list item is the card, so it keeps the height of its content, as the card inside an item did. */
.pw-entries > .pw-feature-card {
	align-self: start;
}

.pw-entry-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.pw-entry-card .pw-tile {
	aspect-ratio: 4 / 3;
}

.pw-entry-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pw-entry-card__title {
	transition: var(--transition-color);
}

.pw-entry-card:hover .pw-tile__img {
	transform: scale(1.04);
}

.pw-entry-card:hover .pw-entry-card__title {
	color: var(--action-on-light);
}

/* ── Portfolio: pagination ── */
.pw-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-top: 64px;
	padding-top: 16px;
	border-top: 1px solid var(--hairline);
}

.pw-pagination__list {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pw-pagination__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	font-size: 15px;
	font-weight: 600;
	color: var(--text-body);
	text-decoration: none;
	transition: var(--transition-color);
}

.pw-pagination__page:hover {
	color: var(--action-on-light);
}

.pw-pagination__page[aria-current="page"] {
	color: var(--pw-ink);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 8px;
}

.pw-pagination__step {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--action-on-light);
	text-decoration: none;
	transition: var(--transition-color);
}

a.pw-pagination__step:hover {
	color: var(--action-on-light-hover);
}

.pw-pagination__step[aria-disabled="true"] {
	color: var(--text-lead-muted);
	cursor: default;
}

.pw-split--reverse > :first-child {
	order: 2;
}

/* ── Entry: main photo, prose, scope list ── */
.pw-figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pw-figure img {
	width: 100%;
	aspect-ratio: var(--media-ratio, 4 / 3);
	object-fit: cover;
	object-position: var(--media-pos, 50% 50%);
	display: block;
	background: var(--pw-paper-alt);
}

.pw-figure figcaption {
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-lead-muted);
}

.pw-entry-hero {
	margin-top: 64px;
}

.pw-entry-hero img {
	aspect-ratio: 16 / 9;
}

.pw-split--2-1 {
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 64px;
}

/*
 * The editor canvas of a blog post (body .post-type-post) has no .pw-prose
 * wrapper around the content: its root container takes every .pw-prose rule
 * (step 12, editor 1:1 of the imported posts). :where() keeps the specificity
 * of the front, so component rules inside the text win in both places alike.
 */
.pw-prose,
:where(.post-type-post) .is-root-container {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 72ch;
}

/*
 * Review of 30.10.2026: a blog post's text as wide as its photo (952 px, blog.css), boxes in it too.
 * Stage I: the padding of .pw-container--narrow on the root, which WordPress also pads: the canvas then
 * has the same column as the page (872 px against 952 px before), which the plant blocks fill.
 */
.post-type-post .is-root-container {
	box-sizing: border-box;
	max-width: calc(952px + 80px);
	padding-inline: 40px;
}

@media (max-width: 1439px) {
	.post-type-post .is-root-container {
		padding-inline: 32px;
	}
}

@media (max-width: 575px) {
	.post-type-post .is-root-container {
		padding-inline: 20px;
	}
}

.pw-checklist {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pw-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--hairline-weak);
	font-size: 15px;
	line-height: 1.5;
}

.pw-checklist svg {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--text-lead-muted);
}

/* Review card (the "What clients say" pattern from the homepage). Homepage, client review in portfolio entries. */
.pw-review {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 28px;
	border: 1px solid var(--hairline);
}

.pw-review__stars {
	display: inline-flex;
	gap: 4px;
	color: var(--action-on-light);
}

.pw-review__rule {
	display: block;
	height: 1px;
	background: var(--hairline-weak);
	margin-top: auto;
}

.pw-review__person {
	display: flex;
	align-items: center;
	gap: 12px;
}

.pw-review__avatar {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--pw-paper);
	border: 1px solid var(--hairline);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--pw-text);
}

.pw-review__id {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pw-review__meta {
	color: var(--text-lead-muted);
}

.pw-review__source {
	margin-left: auto;
}

@media (max-width: 959px) {


	.pw-split--2-1 {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}


	.pw-split--reverse > :first-child {
		order: 0;
	}



	.pw-entries {
		row-gap: 48px;
	}
}

@media (max-width: 575px) {


	.pw-filter {
		margin-bottom: 48px;
	}


	.pw-filter {
		padding: 16px;
	}

	.pw-filter__row {
		max-width: none;
	}


	.pw-entry-hero {
		margin-top: 40px;
	}


	.pw-entry-hero img {
		aspect-ratio: 4 / 3;
	}
}

/* Long labels (EN / UA): buttons, menu links and card titles wrap between words and never leave their container. */
.pw-filter__link {
	overflow-wrap: anywhere;
	hyphens: auto;
}

/* ═══ from oferta.css ═══ */

/* ── Offer: service cards, service rows, table of contents, cost, season calendar, project scope, CTA band, subpage hero ── */
.pw-steps--5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.pw-steps--5 .pw-step {
	padding: 0 28px;
}

.pw-steps--5 .pw-step:first-child {
	padding-left: 0;
}

.pw-steps--5 .pw-step:last-child {
	padding-right: 0;
}

/* Service card: the whole card is one link. Hairline; hover: border and title turn green, arrow moves 4px. Icon not clickable, so muted. */
.pw-service-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.pw-service-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pw-service-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pw-service-grid--items {
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 16px;
}

.pw-service-grid > li {
	display: flex;
}

.pw-page .pw-service-card {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 28px;
	border: 1px solid var(--hairline);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--dur) var(--ease);
}

.pw-service-card__icon {
	display: inline-flex;
	color: var(--text-lead-muted);
}

.pw-service-card__title {
	transition: color var(--dur) var(--ease);
}

.pw-service-card__more {
	margin-top: auto;
	padding-top: 8px;
	display: inline-flex;
	color: var(--action-on-light);
	transition: transform var(--dur) var(--ease);
}

.pw-page a.pw-service-card:hover {
	border-color: var(--action-on-light);
}

/*
 * Cards built from blocks (stage B): the card is a group (li) and its title
 * holds the link. The link's ::after covers the whole card, so the card is
 * still one click target, named by its title; hover and focus show on the
 * card, as when the card was the link (the rules below mirror the
 * a.pw-service-card and .pw-entry-card ones).
 */
:is(.pw-service-card, .pw-entry-card):where(:not(a)) {
	position: relative;
}

:is(.pw-service-card__title, .pw-entry-card__title) a {
	color: inherit;
	text-decoration: none;
}

:is(.pw-service-card__title, .pw-entry-card__title) a::after {
	content: "";
	position: absolute;
	inset: 0;
}

:is(.pw-service-card__title, .pw-entry-card__title) a:focus-visible {
	outline: 0;
}

:is(.pw-service-card, .pw-entry-card):has(:is(.pw-service-card__title, .pw-entry-card__title) a:focus-visible) {
	outline: 2px solid var(--focus-ring-on-light);
	outline-offset: 2px;
}

.pw-page .pw-service-card:has(.pw-service-card__title a):hover {
	border-color: var(--action-on-light);
}

.pw-service-card:has(.pw-service-card__title a):hover .pw-service-card__title {
	color: var(--action-on-light);
}

.pw-service-card:has(.pw-service-card__title a):hover .pw-service-card__more {
	transform: translateX(4px);
}

.pw-service-card--photo:has(.pw-service-card__title a):hover .pw-service-card__media img {
	transform: scale(1.04);
}

a.pw-service-card:hover .pw-service-card__title {
	color: var(--action-on-light);
}

a.pw-service-card:hover .pw-service-card__more {
	transform: translateX(4px);
}

.pw-page .pw-service-card--compact {
	padding: 24px;
	gap: 12px;
}

.pw-page .pw-service-card--inline {
	flex-direction: row;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	min-height: 64px;
}

.pw-service-card--inline .pw-service-card__title {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--pw-ink);
}

.pw-service-card--inline .pw-service-card__more {
	margin: 0 0 0 auto;
	padding: 0;
}

.pw-page .pw-service-card--static {
	border-color: var(--hairline-weak);
}

/* Mid-page CTA band: narrow, on alt, one line + a button. Does not replace the .pw-cta section. */
.pw-section.pw-cta-band {
	padding: 36px 0;
}

.pw-cta-band__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
}

.pw-cta-band__text {
	margin: 0;
	max-width: 62ch;
	font-size: 20px;
	line-height: 1.5;
	color: var(--pw-ink);
	text-wrap: pretty;
}

/* Subpage hero: text 7/12 + a tall 4:5 photo (LCP) 5/12. */
.pw-pagehead--hero {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 64px;
	align-items: center;
}

.pw-pagehead--hero .pw-pagehead__main {
	gap: 24px;
}

.pw-pagehead--hero .pw-facts {
	margin-top: 8px;
}

.pw-pagehead__media img,
.pw-pagehead__media .pw-placeholder {
	aspect-ratio: 4 / 5;
}

/* Placeholder in a photo slot: same ratio as the final photo, description visible, alt in aria-label. */
.pw-figure .pw-placeholder,
.pw-service-card__media .pw-placeholder {
	width: 100%;
	box-sizing: border-box;
}

.pw-service-card__media .pw-placeholder {
	height: 100%;
	border: 0;
}

.pw-pagehead__media .pw-placeholder {
	align-items: center;
	padding-top: 16px;
}

/* Service card with a photo: 4:3 photo in a fixed frame, H3, one sentence, arrow. No icon. Hover: photo scales, title turns green. */
.pw-service-grid--photo {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 48px 24px;
}

.pw-service-grid--photo-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 48px 24px;
}

.pw-service-grid--photo-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px 24px;
}

.pw-page .pw-service-card--photo {
	padding: 0;
	border: 0;
	gap: 12px;
}

.pw-service-card__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	margin-bottom: 8px;
	background: var(--pw-paper-alt);
}

.pw-service-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--media-pos, 50% 50%);
	display: block;
	transition: transform var(--dur-slow) var(--ease);
}

a.pw-service-card--photo:hover .pw-service-card__media img {
	transform: scale(1.04);
}

.pw-service-card--photo .pw-service-card__more {
	padding-top: 0;
}

/*
 * Reviews: 3 cards in a row; --carousel ≤959 = horizontal scroll-snap (card 85%, the next one peeks in);
 * --many = carousel on desktop too (3 visible).
 */
.pw-reviews {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.pw-reviews > li {
	display: flex;
	min-width: 0;
}

.pw-reviews .pw-review {
	flex: 1 1 auto;
}

.pw-reviews__nav {
	display: none;
	align-items: center;
	gap: 16px;
	margin-top: 24px;
}

.pw-reviews__count {
	min-width: 56px;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--text-lead-muted);
}

.pw-reviews--many {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.pw-reviews--many::-webkit-scrollbar {
	display: none;
}

.pw-reviews--many > li {
	flex: 0 0 calc((100% - 48px) / 3);
	scroll-snap-align: start;
}

.pw-reviews--many + .pw-reviews__nav {
	display: flex;
}

/*
 * Photo hero for top-level pages (Offer, Portfolio, Quote, Partnership, Contact). The photo is an <img> (LCP)
 * with an ink layer on top; white text. Lower than the homepage hero: height from content,
 * min. 480 / 420 / auto. Buttons: Button tone="photo" (.pw-btn--photo).
 */
.pw-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 480px;
	padding: 96px 0 64px;
	background: var(--pw-ink);
	overflow: hidden;
}

.pw-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--media-pos, 50% 50%);
	display: block;
}

.pw-hero__scrim {
	position: absolute;
	inset: 0;
	background: rgba(28, 26, 22, 0.68);
}

.pw-hero__inner {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.pw-hero__inner > .pw-eyebrow,
.pw-hero__title,
.pw-hero__lead {
	color: var(--pw-white);
}

.pw-hero__title {
	max-width: 22ch;
}

.pw-hero__lead {
	max-width: 62ch;
}

.pw-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	padding-top: 8px;
}

.pw-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.pw-hero__facts li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--text-on-dark);
}

.pw-hero__facts svg {
	flex: 0 0 auto;
	color: var(--text-on-dark);
}

/* Wizard card (quote hub): large photo, H2, sentence, 2 points, meta, button. Only the button is a link. 3 / 1 / 1. */
.pw-service-grid--wizard {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

.pw-service-card--wizard {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pw-service-card--wizard .pw-service-card__media {
	margin-bottom: 8px;
}

.pw-service-card--wizard .pw-checklist {
	margin: 0;
}

.pw-service-card__foot {
	margin-top: auto;
	padding-top: 8px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

/* Benefit card: hairline frame, icon and title in one row, text below. 3 / 1. */
.pw-feature-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.pw-feature-grid > li {
	display: flex;
}

.pw-feature-card {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px;
	border: 1px solid var(--hairline);
}

.pw-feature-card__head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.pw-feature-card__icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--text-lead-muted);
}

/* Counters: final value in the HTML, count-up from counters.js (IntersectionObserver, once, 1.2s; no animation with reduced motion). 4 / 2 / 2. */
.pw-counters {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 48px 32px;
}

.pw-counter {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}

.pw-counter__value {
	font-family: var(--font-display);
	font-size: 72px;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--text-on-dark);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pw-counter__num {
	display: inline-block;
	min-width: var(--digits, 1ch);
	text-align: center;
}

.pw-counter__label {
	max-width: 22ch;
	font-size: 15px;
	line-height: 1.5;
	color: var(--text-on-dark-muted);
}

.pw-split--center {
	align-items: center;
	gap: 64px;
}

.pw-counters--dark-text .pw-counter__value {
	color: var(--text-on-dark);
}

/* Contact */
.pw-feature-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pw-feature-card__big {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--action-on-light);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.pw-feature-card__big:hover {
	color: var(--action-on-light-hover);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.pw-feature-card__foot {
	margin-top: auto;
}

/* A foot built as a Buttons block (stage B): a plain box, as in the mockup, not the block's flex row (WordPress's layout rule is 0-1-0). */
.wp-block-buttons.pw-feature-card__foot {
	display: block;
}

@media (max-width: 1439px) {


	.pw-steps--5 .pw-step {
		padding: 0 20px;
	}
}

@media (max-width: 959px) {


	.pw-hero {
		min-height: 420px;
		padding: 72px 0 56px;
	}


	.pw-service-grid--wizard,
.pw-feature-grid {
		grid-template-columns: minmax(0, 1fr);
	}


	.pw-counters {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}


	.pw-counter__value {
		font-size: 56px;
	}


	.pw-feature-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 575px) {


	.pw-hero {
		min-height: 0;
		padding: 56px 0 48px;
	}


	/* The second selector: the actions as a Buttons block (stage B) beat WordPress's flex layout rule (body .is-layout-flex, 0-1-1). */
	.pw-hero__actions,
	.wp-block-buttons.pw-hero__actions {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: 1fr;
		gap: 12px;
	}


	/* .wp-block-button__link: the label of a Button block in the editor, which stands for the page's <a>. */
	.pw-hero__actions > *,
	.pw-hero__actions a,
	.pw-hero__actions .wp-block-button__link {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
	}


	.pw-hero__actions a,
	.pw-hero__actions .wp-block-button > .wp-block-button__link {
		text-align: center;
		line-height: 1.3;
	}


	.pw-hero__facts {
		flex-direction: column;
		gap: 12px;
	}


	.pw-feature-card {
		padding: 24px;
	}


	.pw-counter__value {
		font-size: 44px;
	}


	.pw-feature-grid--4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 959px) {


	.pw-steps--5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}


	.pw-steps--5 .pw-step,
	.pw-steps--5 .pw-step:first-child,
	.pw-steps--5 .pw-step:last-child {
		padding: 24px 0;
	}


	.pw-service-grid,
	.pw-service-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}


	.pw-service-grid--photo {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 40px 20px;
	}


	.pw-service-grid--photo-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 20px;
	}


	.pw-reviews--carousel {
		display: flex;
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}


	.pw-reviews--carousel::-webkit-scrollbar {
		display: none;
	}


	.pw-reviews--carousel > li,
	.pw-reviews--many > li {
		flex: 0 0 85%;
		scroll-snap-align: start;
	}


	.pw-reviews--carousel + .pw-reviews__nav {
		display: flex;
	}


	.pw-pagehead--hero {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}


	.pw-pagehead__media img,
	.pw-pagehead__media .pw-placeholder {
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 575px) {


	.pw-steps--5 {
		grid-template-columns: minmax(0, 1fr);
	}


	.pw-service-grid,
	.pw-service-grid--2,
	.pw-service-grid--4 {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}


	.pw-page .pw-service-card {
		padding: 24px;
	}


	/* Photo cards: 2 columns, photo + name only (the sentence stays in the markup). */
	.pw-service-grid--photo,
	.pw-service-grid--photo-4,
	.pw-service-grid--photo-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 16px;
	}


	.pw-service-card--photo .pw-body,
	.pw-service-card--photo .pw-service-card__more {
		display: none;
	}


	/* Photo card without border and padding: the photo spans the column. Must come after .pw-page .pw-service-card { padding: 24px }. */
	.pw-page .pw-service-card--photo {
		padding: 0;
		border: 0;
		gap: 4px;
	}


	.pw-service-card--photo .pw-service-card__title {
		font-size: 20px;
	}


	/* Hero: both buttons full width, stacked, primary first. */
	/*
	 * Grid with grid-auto-rows: 1fr keeps both buttons the same height, also when a label wraps to two lines.
	 * The mockup needed an important flag on line-height against Button's inline lineHeight: 1; .pw-btn is a
	 * plain class, so this selector (0-2-1) wins by specificity.
	 */
	.pw-pagehead--hero .pw-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: 1fr;
		gap: 12px;
	}


	.pw-pagehead--hero .pw-row > *,
	.pw-pagehead--hero .pw-row a,
	.pw-pagehead--hero .pw-row .wp-block-button__link {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
	}


	.pw-pagehead--hero .pw-row a,
	.pw-pagehead--hero .pw-row .wp-block-button__link {
		text-align: center;
		line-height: 1.3;
	}


	.pw-section.pw-cta-band {
		padding: 32px 0;
	}


	.pw-cta-band__text {
		font-size: 18px;
	}
}

/* Long labels (EN / UA): buttons, menu links and card titles wrap between words and never leave their container. */
.pw-service-card__title {
	overflow-wrap: anywhere;
	hyphens: auto;
}

/* ═══ from blog.css ═══ */

/* ── About / FAQ / text page ── */
/* Person card: 4:5 portrait (placeholder), H3, role as meta, one sentence. 4 from 1200px (stage H9), 2 below, 1 on phones. */
.pw-person-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 48px 32px;
}

.pw-person-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pw-person-card .pw-placeholder {
	aspect-ratio: 4 / 5;
	width: 100%;
	margin-bottom: 8px;
}

.pw-faq-cat + .pw-faq-cat {
	margin-top: 0;
}

.pw-faq-cat__foot {
	margin-top: 24px;
}

.pw-faq-cat [id] {
	scroll-margin-top: calc(var(--header-h-sticky) + 24px);
}

.pw-pagehead--text {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Prose from the WordPress editor (Gutenberg): every element an editor can insert. 780px. */
.pw-prose > *,
:where(.post-type-post) .is-root-container > * {
	margin: 0;
}

.pw-prose h2,
:where(.post-type-post) .is-root-container h2 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 36px;
	line-height: 1.2;
	color: var(--pw-ink);
	margin-top: 32px;
	scroll-margin-top: calc(var(--header-h-sticky) + 24px);
}

.pw-prose h3,
:where(.post-type-post) .is-root-container h3 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 26px;
	line-height: 1.25;
	color: var(--pw-ink);
	margin-top: 16px;
}

.pw-prose p,
.pw-prose li,
.pw-prose dd,
:where(.post-type-post) .is-root-container p,
:where(.post-type-post) .is-root-container li,
:where(.post-type-post) .is-root-container dd {
	font-size: 16px;
	line-height: 1.7;
	color: var(--pw-text);
}

.pw-prose ul,
.pw-prose ol,
:where(.post-type-post) .is-root-container ul,
:where(.post-type-post) .is-root-container ol {
	padding-left: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Stage I6: the markers back, only on the lists of the text of a post (core List), not on the lists of components.
   Neve sets list-style: none on every list. A style of the block (checklist) and ol[type] keep their own. */
.pw-article-body ul.wp-block-list:not([class*="is-style-"]),
:where(.post-type-post) .is-root-container ul.wp-block-list:not([class*="is-style-"]) {
	list-style-type: disc;
}

.pw-article-body ol.wp-block-list:not([class*="is-style-"], [type]),
:where(.post-type-post) .is-root-container ol.wp-block-list:not([class*="is-style-"], [type]) {
	list-style-type: decimal;
}

.pw-prose ul li::marker,
:where(.post-type-post) .is-root-container ul li::marker {
	color: var(--text-lead-muted);
}

.pw-prose ol li::marker,
:where(.post-type-post) .is-root-container ol li::marker {
	color: var(--text-lead-muted);
	font-weight: 600;
}

.pw-prose dl,
:where(.post-type-post) .is-root-container dl {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	border-top: 1px solid var(--hairline-weak);
}

.pw-prose dt,
:where(.post-type-post) .is-root-container dt {
	padding-top: 12px;
	font-size: 16px;
	font-weight: 600;
	color: var(--pw-ink);
}

.pw-prose dd,
:where(.post-type-post) .is-root-container dd {
	margin: 0;
	padding: 4px 0 12px;
	border-bottom: 1px solid var(--hairline-weak);
}

.pw-prose a:not([class]),
:where(.post-type-post) .is-root-container a:not([class]) {
	color: var(--action-on-light);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: var(--transition-color);
}

.pw-prose a:not([class]):hover,
:where(.post-type-post) .is-root-container a:not([class]):hover {
	color: var(--action-on-light-hover);
}

.pw-prose blockquote,
:where(.post-type-post) .is-root-container blockquote {
	padding: 4px 0 4px 24px;
	border-left: 1px solid var(--hairline);
	font-family: var(--font-display);
	font-size: 24px;
	line-height: 1.4;
	color: var(--pw-ink);
}

.pw-prose blockquote cite,
:where(.post-type-post) .is-root-container blockquote cite {
	display: block;
	margin-top: 12px;
	font-family: var(--font-body);
	font-style: normal;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-lead-muted);
}

/*
 * Neve sets `blockquote cite { font-size: .9em !important }`,
which beats the
 * 12px above and cannot be beaten without !important. So the quote box is
 * sized for it: 12px / 0.9 makes Neve's .9em exactly 12px,
and the quote
 * text (the paragraphs of core/quote) gets the 24px of the mockup back.
 * Deviation listed in docs/komponenty.md.
 */
.pw-prose blockquote:has(> cite),
and the quote
 * text (the paragraphs of core/quote) gets the 24px of the mockup back.
 * Deviation listed in docs/komponenty.md.
 */
:where(.post-type-post) .is-root-container blockquote:has(> cite) {
	font-size: calc(12px / 0.9);
}

.pw-prose blockquote:has(> cite) > :not(cite),
:where(.post-type-post) .is-root-container blockquote:has(> cite) > :not(cite) {
	font-size: 24px;
}

.pw-prose hr,
:where(.post-type-post) .is-root-container hr {
	width: 100%;
	height: 0;
	border: 0;
	border-top: 1px solid var(--hairline);
	margin: 16px 0;
}

/* A table scrolls inside its own container (≤575); the page never scrolls sideways. */
.pw-table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/*
 * The table built with the Table block (stage B): the block's figure is the
 * scrolling frame, its caption stands above the table as the <caption> of
 * the mockup did, and the cells keep only the prose's bottom rule, not the
 * block's default frame (border 1px on every cell, 3px under the head).
 */
.wp-block-table.pw-table-wrap {
	display: flex;
	flex-direction: column-reverse;
	margin: 0;
}

.wp-block-table.pw-table-wrap > figcaption {
	margin: 0;
	padding-bottom: 12px;
	font-size: 14px;
	line-height: 1.6;
	text-align: left;
	color: var(--text-lead-muted);
}

.wp-block-table.pw-table-wrap thead {
	border-bottom: 0;
}

/*
 * Core's table CSS (.wp-block-table td: border 1px solid, padding .5em) has
 * the specificity of .pw-prose td and, in a long post, WordPress links it
 * after this file instead of inlining it (step 12, imported posts): the cell
 * values of the prose again, here, where they cannot lose by order.
 */
.wp-block-table.pw-table-wrap :is(th, td) {
	border-width: 0 0 1px;
	border-color: var(--hairline-weak);
	padding: 12px 16px 12px 0;
}

.wp-block-table.pw-table-wrap thead th {
	border-color: var(--hairline);
}

.pw-prose table,
:where(.post-type-post) .is-root-container table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.6;
}

.pw-prose caption,
:where(.post-type-post) .is-root-container caption {
	caption-side: top;
	text-align: left;
	padding-bottom: 12px;
	font-size: 14px;
	color: var(--text-lead-muted);
}

.pw-prose th,
.pw-prose td,
:where(.post-type-post) .is-root-container th,
:where(.post-type-post) .is-root-container td {
	padding: 12px 16px 12px 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--hairline-weak);
}

.pw-prose thead th,
:where(.post-type-post) .is-root-container thead th {
	border-bottom: 1px solid var(--hairline);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pw-ink);
}

/*
 * The questions and the CTA of a plant stand in the column of the text: their
 * own colours and width, not those of the prose. Here, not in blog.css, because
 * the canvas of the editor has none of the trigger classes of that file.
 */
.pw-article-body .pw-section,
:where(.post-type-post) .is-root-container .pw-section {
	margin-block: 24px;
}

.pw-article-body .pw-col-70,
:where(.post-type-post) .is-root-container .pw-col-70 {
	max-width: none;
	width: 100%;
}

.pw-article-body .pw-cta__title,
:where(.post-type-post) .is-root-container .pw-cta__title {
	margin: 0;
	color: var(--text-on-dark);
}

.pw-article-body .pw-cta .pw-on-dark-muted,
:where(.post-type-post) .is-root-container .pw-cta .pw-on-dark-muted {
	color: var(--text-on-dark-muted);
}

/* Callout: alt fill, no accent line on the side. */
.pw-callout {
	display: flex;
	gap: 16px;
	padding: 24px;
	background: var(--pw-paper-alt);
}

.pw-callout__icon {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--text-lead-muted);
}

.pw-callout p {
	margin: 0;
}

.pw-callout strong {
	color: var(--pw-ink);
}

.pw-legal-foot {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--hairline);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

@media (max-width: 1199px) {


	.pw-person-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 575px) {


	.pw-person-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}


	.pw-prose h2,
	:where(.post-type-post) .is-root-container h2 {
		font-size: 28px;
	}


	.pw-prose h3,
	:where(.post-type-post) .is-root-container h3 {
		font-size: 22px;
	}


	.pw-callout {
		padding: 20px;
	}
}

/* Full-width legal page: table of contents sticky on the left (4/12), content 8/12 (line length still ≤ 72ch). Stacked ≤959. */
.pw-legal {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: 64px;
	align-items: start;
}

.pw-legal__aside {
	position: sticky;
	top: calc(var(--header-h-sticky) + 24px);
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pw-legal__toc {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--hairline);
	counter-reset: pw-legal;
}

.pw-legal__toc li {
	counter-increment: pw-legal;
	border-bottom: 1px solid var(--hairline-weak);
}

.pw-legal__toc a {
	display: flex;
	gap: 12px;
	min-height: 44px;
	align-items: center;
	padding: 8px 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--action-on-light);
	text-decoration: none;
	transition: var(--transition-color);
}

.pw-legal__toc a::before {
	content: counter(pw-legal) ".";
	flex: 0 0 20px;
	color: var(--text-lead-muted);
	font-weight: 600;
}

.pw-legal__toc a:hover {
	color: var(--action-on-light-hover);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.pw-legal .pw-prose {
	max-width: 72ch;
}

/*
 * Places a legal text still waits for (a date, a provider, a decision of
 * the client): <mark> in the text, visible to whoever reviews the page,
 * from the palette (no new colour). On the legal page (text and the date in
 * its header) and in the designer's advice of a plant: nowhere else.
 */
:is(.pw-legal, .pw-pagehead, .pw-plant-advice, .pw-plant-photo-missing) mark {
	background: var(--pw-paper-alt);
	color: var(--pw-ink);
	outline: 1px dashed var(--pw-error);
	outline-offset: 1px;
	padding: 0 2px;
}

.pw-prose ol[type="a"],
:where(.post-type-post) .is-root-container ol[type="a"] {
	list-style-type: lower-alpha;
}

@media (max-width: 959px) {


	.pw-legal {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}


	.pw-legal__aside {
		position: static;
	}
}

/* Portrait in the person card: 4:5, cropped from the top (face). */
.pw-person-card__photo {
	margin: 0 0 8px;
}

.pw-person-card__photo img {
	aspect-ratio: 4 / 5;
	object-position: 50% 20%;
}

/* References (About): real logos only, 2 / 2 / 1; placeholder until the files arrive. */
.pw-refs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 280px));
	gap: 32px;
}

.pw-ref {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pw-ref .pw-placeholder {
	aspect-ratio: 3 / 2;
}

.pw-ref__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--pw-ink);
}

@media (max-width: 575px) {


	.pw-refs {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Blog ── */
/* Search: label, field and icon button in one row; --border-field border. */
.pw-search {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	max-width: 420px;
}

.pw-search__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-lead-muted);
}

.pw-search__row {
	display: flex;
}

.pw-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	padding: 0 16px;
	border: 1px solid var(--border-field);
	border-right: 0;
	background: transparent;
	font: inherit;
	font-size: 16px;
	color: var(--pw-ink);
	border-radius: 0;
}

.pw-search__input:focus {
	outline: 2px solid var(--action-on-light);
	outline-offset: 2px;
	background: var(--pw-paper);
}

.pw-search__btn {
	flex: 0 0 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: var(--action-fill-on-light, var(--action-on-light));
	color: #fff;
	cursor: pointer;
	transition: background var(--dur) var(--ease);
}

.pw-search__btn:hover {
	background: var(--action-fill-on-light-hover, var(--action-on-light-hover));
}

.pw-search__btn:focus-visible {
	outline: 2px solid var(--action-on-light);
	outline-offset: 2px;
}

.pw-search--sm .pw-search__input,
.pw-search--sm .pw-search__btn {
	height: 44px;
}

.pw-search--sm .pw-search__btn {
	flex-basis: 44px;
}

.pw-search--dark .pw-search__label {
	color: var(--text-on-dark-muted);
}

.pw-search--dark .pw-search__input {
	border-color: var(--border-field-on-dark);
	color: var(--text-on-dark);
}

.pw-search--dark .pw-search__input:focus {
	outline-color: var(--action-on-dark);
	background: transparent;
}

.pw-search--dark .pw-search__btn {
	background: var(--action-on-dark);
	color: var(--pw-ink);
}

.pw-prose figure,
:where(.post-type-post) .is-root-container figure {
	margin: 0;
}

.pw-prose figure img,
:where(.post-type-post) .is-root-container figure img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

.pw-prose figcaption,
:where(.post-type-post) .is-root-container figcaption {
	margin-top: 8px;
	font-size: 14px;
	color: var(--text-lead-muted);
}

@media (max-width: 575px) {


	.pw-search {
		max-width: none;
	}
}

.pw-prose h3[id],
:where(.post-type-post) .is-root-container h3[id] {
	scroll-margin-top: calc(var(--header-h-sticky) + 24px);
}

/* Places list: a grid of text links with hairlines between rows, no photos. 4 / 3 / 2. */
.pw-loc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 32px;
	border-top: 1px solid var(--hairline);
}

.pw-loc-list > li {
	border-bottom: 1px solid var(--hairline-weak);
}

.pw-loc-list__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 56px;
	font-family: var(--font-display);
	font-size: 22px;
	line-height: 1.2;
	color: var(--pw-ink);
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}

.pw-loc-list__arrow {
	display: inline-flex;
	color: var(--action-on-light);
	transition: transform var(--dur) var(--ease);
}

.pw-loc-list__link:hover {
	color: var(--action-on-light);
}

.pw-loc-list__link:hover .pw-loc-list__arrow {
	transform: translateX(4px);
}

@media (max-width: 959px) {


	.pw-loc-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 575px) {


	.pw-loc-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 16px;
	}


	.pw-loc-list__link {
		font-size: 19px;
		min-height: 52px;
	}
}

.pw-person-card__photo.pw-placeholder {
	aspect-ratio: 4 / 5;
	width: 100%;
	margin-bottom: 8px;
}

/* ═══ from system.css ═══ */

.pw-footer__cookies:hover {
	color: var(--action-on-dark);
}

/*
 * Consent banner: a small ink card in the bottom-right corner (the mockup comment says left; the code and
 * HANDOFF say right). Max 420px; ≤575 full width minus 16px margins, max 40% of the height (scrolls inside).
 * It sits at the bottom edge, so it never covers the hero CTA. Text, not an image, so it is never the LCP.
 */
.pw-consent {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 400;
	width: min(420px, calc(100vw - 32px));
	max-height: 40vh;
	overflow: auto;
	padding: 24px;
	background: var(--pw-ink);
	color: var(--text-on-dark);
	border: 1px solid var(--hairline-on-dark);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pw-consent:focus {
	outline: 2px solid var(--action-on-dark);
	outline-offset: 2px;
}

.pw-consent__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.2;
	color: var(--text-on-dark);
}

.pw-consent__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-on-dark-muted);
}

/* Three buttons of equal weight: same outline, same size. */
.pw-consent__actions {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-top: 4px;
}

.pw-consent__btn {
	min-height: 44px;
	padding: 8px 10px;
	background: transparent;
	border: 1px solid var(--text-on-dark);
	color: var(--text-on-dark);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.25;
	cursor: pointer;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.pw-consent__btn:hover {
	background: var(--text-on-dark);
	color: var(--pw-ink);
}

.pw-consent__btn:focus-visible {
	outline: 2px solid var(--action-on-dark);
	outline-offset: 2px;
}

.pw-consent-dialog {
	width: min(560px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	padding: 0;
	border: 1px solid var(--hairline);
	background: var(--pw-paper);
	color: var(--pw-text);
}

.pw-consent-dialog::backdrop {
	background: rgba(28, 26, 22, 0.72);
}

.pw-consent-dialog__inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px;
}

.pw-consent-dialog__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--hairline);
}

.pw-consent-dialog__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 16px 0;
	border-bottom: 1px solid var(--hairline-weak);
}

.pw-consent-dialog__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pw-consent-dialog__name {
	font-size: 16px;
	font-weight: 600;
	color: var(--pw-ink);
}

.pw-consent-dialog__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: flex-end;
}

@media (max-width: 575px) {


	.pw-consent {
		left: 16px;
		right: 16px;
		bottom: 16px;
		width: auto;
		padding: 20px;
	}


	.pw-fabs {
		left: 12px;
		bottom: 12px;
	}


	.pw-consent__actions {
		grid-template-columns: minmax(0, 1fr);
	}


	.pw-consent-dialog__inner {
		padding: 24px 20px;
	}
}

/* Long labels (EN / UA): buttons, menu links and card titles wrap between words and never leave their container. */
.pw-consent__btn {
	overflow-wrap: anywhere;
	hyphens: auto;
}

/*
 * "Oddzwonimy" in the bottom-left stack (stage G, in place of the cookie
 * button): the size of the quick contact button under it, no frame, a speech
 * bubble. Ink, the dark of the logo (review of 30.10.2026): the bubble dark,
 * the phone green, so the two read as two different actions. The field
 * border of dark sections keeps its edge over an ink section.
 */
.pw-callback-fab {
	box-sizing: border-box;
	width: 52px;
	height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--surface-dark);
	color: #fff;
	border: 1px solid var(--border-field-on-dark);
	text-decoration: none;
	transition: background var(--dur) var(--ease);
}

.pw-callback-fab:hover {
	background: var(--surface-field-on-dark);
	color: #fff;
}

/* Neve paints a focused link dark green: after the dialog closes the focus is back here, the bubble stays white. */
.pw-callback-fab:focus,
.pw-callback-fab:focus-visible {
	color: #fff;
}

.pw-callback-fab:focus-visible {
	outline: 2px solid var(--action-on-light);
	outline-offset: 2px;
}

/* The "Oddzwonimy" dialog: the box of the consent dialog, with a close button. */
.pw-callback {
	width: min(520px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	padding: 0;
	border: 1px solid var(--hairline);
	background: var(--pw-paper);
	color: var(--pw-text);
}

.pw-callback::backdrop {
	background: rgba(28, 26, 22, 0.72);
}

.pw-callback__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 32px;
}

.pw-callback__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--pw-text);
	cursor: pointer;
}

.pw-callback__close:focus-visible {
	outline: 2px solid var(--action-on-light);
}

.pw-callback__body {
	margin-top: 8px;
}

/* Bottom-left corner: a stack of buttons: "Oddzwonimy" above quick contact, both 52px. Ink or green, outline, no shadow, no radius. */
.pw-fabs {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 390;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.pw-quick {
	position: relative;
}

.pw-quick__toggle {
	width: 52px;
	height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: var(--action-fill-on-light, var(--action-on-light));
	color: #fff;
	border: 0;
	cursor: pointer;
	transition: background var(--dur) var(--ease);
}

.pw-quick__toggle:hover,
.pw-quick__toggle[aria-expanded="true"] {
	background: var(--action-fill-on-light-hover, var(--action-on-light-hover));
}

.pw-quick__toggle:focus-visible {
	outline: 2px solid var(--action-on-light);
	outline-offset: 2px;
}

.pw-quick__panel {
	position: absolute;
	left: 0;
	bottom: 64px;
	width: min(320px, calc(100vw - 32px));
	padding: 20px;
	background: var(--pw-ink);
	color: var(--text-on-dark);
	border: 1px solid var(--hairline-on-dark);
	display: flex;
	flex-direction: column;
}

.pw-quick__title {
	padding-bottom: 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-on-dark-muted);
}

.pw-quick__item {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 56px;
	padding: 8px 0;
	border-top: 1px solid var(--hairline-on-dark);
	color: var(--text-on-dark);
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	transition: color var(--dur) var(--ease);
}

.pw-quick__item svg {
	flex: 0 0 auto;
	color: var(--action-on-dark);
}

.pw-quick__item > span {
	display: flex;
	flex-direction: column;
}

.pw-quick__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-on-dark-muted);
}

.pw-quick__item:hover {
	color: var(--action-on-dark);
}

.pw-quick__item:focus-visible {
	outline: 2px solid var(--action-on-dark);
	outline-offset: 2px;
}

/* Bottom-left stack: hidden at the top of the page, while the banner is open and over the footer's bottom bar (.is-visible from Consent). */
.pw-fabs {
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}

.pw-fabs.is-visible {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--dur) var(--ease), visibility 0s;
}

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


	.pw-fabs,
	.pw-fabs.is-visible {
		transition: none;
	}
}

/* Consent banner ≤575: compact: no title, one sentence, two equal buttons side by side, "Settings" as a link below them, max 30% of the height. */
.pw-consent__text--short {
	display: none;
}

@media (max-width: 575px) {


	.pw-consent {
		max-height: 30vh;
		padding: 14px 16px;
		gap: 10px;
	}


	.pw-consent__title,
	.pw-consent__text:not(.pw-consent__text--short) {
		display: none;
	}


	.pw-consent__text--short {
		display: block;
		font-size: 13px;
		line-height: 1.45;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}


	.pw-consent__actions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		margin: 0;
	}


	.pw-consent__btn {
		min-height: 44px;
	}


	.pw-consent__btn--settings {
		grid-column: 1 / -1;
		min-height: 32px;
		border: 0;
		padding: 4px 0;
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 3px;
		letter-spacing: 0.04em;
	}


	.pw-consent__btn--settings:hover {
		background: none;
		color: var(--action-on-dark);
	}
}

/*
 * ── Theme additions: consent and stack states ──
 * Not in the mockup's components.css: React rendered these parts only when
 * open. Here they are always in the HTML and consent.js toggles `hidden`.
 * Listed in docs/komponenty.md.
 */

/* `hidden` loses to a class that sets display, so it is restated for the three that do. */
.pw-consent[hidden],
.pw-callback-fab[hidden],
.pw-quick__panel[hidden] {
	display: none;
}

/* Quick contact toggle: phone when closed, × when open (the mockup swapped the icon). */
.pw-quick__toggle[aria-expanded="true"] .pw-quick__icon-open,
.pw-quick__toggle:not([aria-expanded="true"]) .pw-quick__icon-close {
	display: none;
}


/*
 * Stage G [13, 30] (Damian, 29.10.2026): lines only between the items of a
 * list – none above the first (the heading above it is enough) and none
 * after the last. One rule for the whole site; a subheading (H3) is set
 * off by the space under it, not by a line.
 */
.pw-checklist li:last-child,
.pw-legal__toc li:last-child,
.pw-loc-list > li:last-child {
	border-bottom: 0;
}

/*
 * Tables in content (stage G [19]): one look for every table – a band with
 * the column names, a line between rows only, the first column of a row
 * heading in ink. Up to 599px a table with a head becomes cards: one card
 * per row, every value with its column name (data-label from
 * plantworld_table_labels()), so nothing is cut or scrolled. A table
 * without a head keeps scrolling in its focusable frame (.pw-table-wrap).
 */
.pw-prose thead th,
:where(.post-type-post) .is-root-container thead th,
.wp-block-table.pw-table-wrap thead th {
	padding: 14px 16px;
	border-bottom: 0;
	background: var(--pw-paper-alt);
}

.pw-prose :is(tbody th, td),
:where(.post-type-post) .is-root-container :is(tbody th, td),
.wp-block-table.pw-table-wrap :is(tbody th, td) {
	padding: 14px 16px;
	border-bottom: 0;
}

.pw-prose tbody tr + tr :is(th, td),
:where(.post-type-post) .is-root-container tbody tr + tr :is(th, td),
.wp-block-table.pw-table-wrap tbody tr + tr :is(th, td) {
	border-top: 1px solid var(--hairline-weak);
}

.pw-prose tbody th,
.wp-block-table.pw-table-wrap tbody th {
	font-weight: 600;
	color: var(--pw-ink);
}

@media (max-width: 599px) {
	.pw-table--cards table {
		min-width: 0;
	}

	.pw-table--cards :is(table, thead, tbody, tr, th, td) {
		display: block;
	}

	/* The head stays for screen readers only; each value says its column. */
	.pw-table--cards thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.pw-table--cards tbody {
		display: grid;
		gap: 12px;
	}

	.pw-table--cards tbody tr {
		padding: 8px 16px;
		background: var(--pw-paper-alt);
	}

	.pw-table--cards.wp-block-table tbody tr + tr :is(th, td),
	.pw-prose .pw-table--cards tbody tr + tr :is(th, td) {
		border-top: 0;
	}

	.pw-table--cards.wp-block-table :is(tbody th, td) {
		padding: 8px 0;
	}

	.pw-table--cards.wp-block-table td + td,
	.pw-table--cards.wp-block-table th + td {
		border-top: 1px solid var(--hairline-weak);
	}

	.pw-table--cards td[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 2px;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--text-lead-muted);
	}
}

/*
 * One or two reviews (stage G [33, 44], Damian): three cards fill a row,
 * one card stretched to the width looked empty. One review is a centred
 * quote – narrower, larger serif text, the person under it; two reviews
 * share the row in halves.
 */
.pw-review-solo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.pw-review--solo,
.pw-reviews--count-1 .pw-review {
	width: 100%;
	max-width: 760px;
	margin-inline: auto;
	padding: 48px 56px;
	border: 0;
	background: var(--pw-paper);
	align-items: center;
	gap: 20px;
	text-align: center;
}

/* An opening quotation mark as an ornament (stone: decoration only, never text). */
.pw-review--solo::before,
.pw-reviews--count-1 .pw-review::before {
	content: "„";
	display: block;
	height: 40px;
	font-family: var(--font-display);
	font-size: 96px;
	line-height: 0.5;
	color: var(--pw-stone);
}

.pw-review--solo > .pw-body,
.pw-reviews--count-1 .pw-review > .pw-body {
	font-family: var(--font-display);
	font-size: 26px;
	line-height: 1.4;
	color: var(--text-heading);
}

.pw-review--solo .pw-review__rule,
.pw-reviews--count-1 .pw-review__rule {
	display: none;
}

.pw-review--solo .pw-review__person,
.pw-reviews--count-1 .pw-review__person {
	flex-wrap: wrap;
	justify-content: center;
	text-align: left;
}

.pw-reviews--count-1 {
	grid-template-columns: minmax(0, 1fr);
}

.pw-reviews--count-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Nothing to scroll with one review; two scroll only on a phone. */
.pw-reviews--count-1 + .pw-reviews__nav {
	display: none;
}

@media (min-width: 960px) {
	.pw-reviews--count-2 + .pw-reviews__nav {
		display: none;
	}
}

@media (max-width: 959px) {
	.pw-reviews--count-1 > li {
		flex-basis: 100%;
	}

	.pw-review--solo,
	.pw-reviews--count-1 .pw-review {
		padding: 32px 24px;
	}

	.pw-review--solo > .pw-body,
	.pw-reviews--count-1 .pw-review > .pw-body {
		font-size: 21px;
	}
}

/*
 * Green section (stage G [23], Damian): the CTA under the Portfolio lists
 * stands out on the brand green (--pw-green-on-light; paper text 5.2:1, AA)
 * with light text and the buttons turned around: the filled one is paper
 * with a green label, the outlined one paper on green.
 */
.pw-section--green {
	--surface-field: var(--pw-paper);
	background: var(--pw-green-on-light);
	color: var(--text-on-dark);
}

.pw-section--green :is(h2, h3, p, .pw-eyebrow, .pw-on-dark-muted, .pw-cta__title, .pw-topbar__item) {
	color: var(--text-on-dark);
}

/* In a post the rule for the lead on ink is stronger than the one above. */
.pw-section--green .pw-cta .pw-on-dark-muted {
	color: var(--text-on-dark);
}

.pw-section--green :is(.pw-btn--on-dark, .wp-block-button.is-style-on-dark > .wp-block-button__link, .wp-block-button:not([class*="is-style-"]) > .wp-block-button__link) {
	--_bg: var(--pw-paper);
	--_fg: var(--pw-green-on-light);
	--_line: var(--pw-paper);
	--_bg-hover: var(--pw-white);
	--_fg-hover: var(--pw-green-on-light-hover);
	--_line-hover: var(--pw-white);
}

.pw-section--green :is(.pw-btn--on-dark.pw-btn--secondary, .wp-block-button.is-style-secondary-dark > .wp-block-button__link) {
	--_bg: transparent;
	--_fg: var(--pw-paper);
	--_line: var(--pw-paper);
	--_bg-hover: var(--pw-paper);
	--_fg-hover: var(--pw-green-on-light);
	--_line-hover: var(--pw-paper);
}

.pw-section--green :where(a, button):focus-visible {
	outline: 2px solid var(--pw-paper);
	outline-offset: 2px;
}

/*
 * Element cards (stage G [10]): a fixed number of columns, so the twelve
 * cards of "Co może znaleźć się w projekcie" fill every row – 4, 3, 2 or 1.
 */
.pw-service-grid--items {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1199px) {
	.pw-service-grid--items {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.pw-service-grid--items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 479px) {
	.pw-service-grid--items {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * Tabs (stage G [8]): stages of the project cooperation. Without
 * JavaScript the panels stand one under another with a space between
 * them; with tabs.js a bar of tiles on top, one panel at a time.
 */
.pw-tabs {
	display: flex;
	flex-direction: column;
	/* Not the wrap of ds.css: a wrapping column is as wide as its widest child, here the bar that scrolls sideways (stage H1.1, panels of 932 px at 390). */
	flex-wrap: nowrap;
	gap: 48px;
}

.pw-tabs.is-ready {
	gap: 32px;
}

.pw-tabs__list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 8px;
}

.pw-tabs__tab {
	min-height: 56px;
	padding: 12px 16px;
	border: 1px solid var(--hairline);
	background: var(--pw-paper);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.04em;
	text-align: left;
	color: var(--text-heading);
	cursor: pointer;
	transition: var(--transition-color);
}

.pw-tabs__tab:hover {
	border-color: var(--action-on-light);
	color: var(--action-on-light);
}

.pw-tabs__tab[aria-selected="true"] {
	border-color: var(--action-fill-on-light);
	background: var(--action-fill-on-light);
	color: var(--pw-white);
}

.pw-tabs__tab:focus-visible {
	outline: 2px solid var(--focus-ring-on-light);
	outline-offset: 2px;
}

.pw-tabs__panel[hidden] {
	display: none;
}

@media (max-width: 959px) {
	/* The bar scrolls sideways; the chosen tab is scrolled into view (tabs.js). */
	.pw-tabs__list {
		grid-auto-columns: minmax(180px, max-content);
		overflow-x: auto;
		scrollbar-width: thin;
		padding-bottom: 4px;
	}
}

/*
 * Counters (stage G [47], Damian: "za lekkie"): each number in a box with a
 * line, the number heavier and larger, the label under it. Same tokens on
 * every page with counters (O nas, Współpraca).
 */
.pw-counters {
	gap: 16px;
}

.pw-counter {
	justify-content: center;
	padding: 36px 24px;
	border: 1px solid var(--hairline-on-dark);
	background: rgba(247, 245, 241, 0.04);
}

.pw-counter__value {
	font-size: 88px;
	font-weight: 500;
	color: var(--pw-paper);
}

.pw-counter__label {
	font-size: 16px;
	color: var(--text-on-dark);
}

@media (max-width: 959px) {
	.pw-counter {
		padding: 28px 16px;
	}

	.pw-counter__value {
		font-size: 64px;
	}
}

/*
 * Compact photo header (stage G [63, 64], quote pages): the same banner as
 * the Offer, lower, so the choice or the form is in view right away. The
 * facts stay under the text, as in the Offer header.
 */
.pw-hero.pw-hero--compact {
	min-height: 0;
	padding: 48px 0 40px;
}

.pw-hero--compact .pw-hero__inner {
	gap: 16px;
}

.pw-hero--compact .pw-hero__title {
	font-size: var(--type-h2-size);
	line-height: var(--type-h2-lh);
}

.pw-hero--compact .pw-hero__actions {
	padding-top: 0;
}

/*
 * City links as tiles (stage G [96], Damian): the hub and "Pracujemy też w
 * okolicy" – a tile per town in place of rows between lines.
 */
.pw-loc-list {
	gap: 8px;
	border-top: 0;
}

.pw-loc-list > li,
.pw-loc-list > li:last-child {
	border-bottom: 0;
}

.pw-loc-list__link {
	min-height: 64px;
	padding: 0 20px;
	background: var(--pw-paper-alt);
	font-size: 20px;
}

.pw-section--alt .pw-loc-list__link {
	background: var(--pw-paper);
}

.pw-loc-list__link:hover {
	background: var(--pw-paper);
	outline: 1px solid var(--action-on-light);
}

.pw-loc-list__link:focus-visible {
	outline: 2px solid var(--focus-ring-on-light);
	outline-offset: 2px;
}

/* Table of contents of a legal page (stage G [106]): a summary like the label above it; on a phone a box to open. */
.pw-legal__summary {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-lead-muted);
	list-style: none;
	cursor: pointer;
}

.pw-legal__summary::-webkit-details-marker {
	display: none;
}

.pw-legal__drop[open] > .pw-legal__summary {
	margin-bottom: 16px;
}

@media (max-width: 959px) {
	.pw-legal__drop {
		padding: 16px 20px;
		background: var(--pw-paper-alt);
	}

	.pw-legal__summary {
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-height: 32px;
	}

	.pw-legal__summary::after {
		content: "";
		width: 8px;
		height: 8px;
		margin-top: -4px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
	}

	.pw-legal__drop[open] > .pw-legal__summary::after {
		margin-top: 4px;
		transform: rotate(-135deg);
	}
}

/* Stage G: as many columns as counters (three effects of a case study fill the row), four at most. */
@media (min-width: 960px) {
	.pw-counters {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	}
}

/* Credit of a photo from Wikimedia Commons under the text it belongs to (city pages, stage G). */
.pw-photo-credit {
	margin-top: 24px;
	color: var(--text-lead-muted);
}

/*
 * The compact filter of the blog bar (categories) keeps its row of links:
 * the box and the drop-down of the Portfolio filter (stage G) are not its.
 */
.pw-filter.pw-filter--compact {
	margin-bottom: 0;
	padding: 0;
	background: none;
}

.pw-filter--compact .pw-filter__row {
	flex: 1 1 auto;
	max-width: none;
}

.pw-filter--compact .pw-filter__list {
	position: static;
	flex-direction: row;
	gap: 4px 24px;
	border: 0;
	background: none;
}

.pw-filter--compact .pw-filter__link {
	min-height: 40px;
	padding: 0;
	white-space: nowrap;
}

.pw-filter--compact .pw-filter__link:hover {
	background: none;
}

.pw-filter--compact .pw-filter__link[aria-current="page"] {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 8px;
}

/*
 * Previous / next entry (.pw-post-nav): posts of the blog and, since stage G
 * [26], the entries of Portfolio – so here, not in blog.css (a Portfolio
 * entry would load the whole blog sheet for it).
 */
.pw-post-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.pw-post-nav__link {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
	border: 1px solid var(--hairline);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--dur) var(--ease);
}

.pw-post-nav__link--next {
	text-align: right;
	align-items: flex-end;
}

.pw-post-nav__dir {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-lead-muted);
}

.pw-post-nav__title {
	font-family: var(--font-display);
	font-size: 24px;
	line-height: 1.25;
	color: var(--pw-ink);
	transition: color var(--dur) var(--ease);
}

.pw-post-nav__link:hover {
	border-color: var(--action-on-light);
}

.pw-post-nav__link:hover .pw-post-nav__title {
	color: var(--action-on-light);
}

/* Stage G [104]: Neve takes the bottom border off links of an <article>; the box stays closed. */
.pw-post-nav .pw-post-nav__link {
	border: 1px solid var(--hairline);
}

.pw-post-nav .pw-post-nav__link:hover {
	border-color: var(--action-on-light);
}

@media (max-width: 575px) {
	.pw-post-nav {
		grid-template-columns: minmax(0, 1fr);
	}

	.pw-post-nav__link--next {
		text-align: left;
		align-items: flex-start;
	}
}

/*
 * Hero of /wycena/ (review of 29.10.2026): on the dark of the CTA bands, the
 * text, the buttons and the facts on the left, "Oddzwonimy" in a light card
 * on the right (the form keeps its light look); one column below 960px.
 */
.pw-quote-hero {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 48px 64px;
	align-items: center;
}

.pw-quote-hero__card {
	--surface-field: var(--surface-field-on-page);
	padding: 32px;
	background: var(--pw-paper);
	color: var(--pw-text);
}

@media (max-width: 959px) {
	.pw-quote-hero {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 575px) {
	.pw-quote-hero__card {
		padding: 24px 20px;
	}
}