/**
 * Portfolio entries: facts (.pw-spec), plan legend, plants, solution
 * blocks, before/after slider, gallery and lightbox, entry types, the
 * invitation card, empty list.
 *
 * Moved from the mockup's components.css (design-261005-final); selectors
 * and values unchanged, deviations in docs/komponenty.md. Loads only on
 * pages with one of its trigger classes (plantworld_conditional_styles()
 * in inc/enqueue.php); every rule here contains one of them.
 *
 * @package plantworld
 */

/* Invitation card in a small archive: text only, hairline, no photo. */
.pw-page .pw-entry-invite {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
	height: 100%;
	min-height: 320px;
	padding: 32px;
	border: 1px solid var(--hairline);
	color: inherit;
	text-decoration: none;
	transition: var(--transition-color);
}

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

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

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

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

.pw-entry-invite__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--action-on-light);
}

/* ── Portfolio: empty filter state ── */
.pw-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 64px 0;
	border-top: 1px solid var(--hairline);
	border-bottom: 1px solid var(--hairline);
}

.pw-empty .pw-body {
	max-width: 56ch;
}

/* ── Portfolio: entry types (text and photo alternating) ── */
.pw-types {
	display: flex;
	flex-direction: column;
	gap: 96px;
}

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

/* ── Entry: facts list <dl> ── */
.pw-spec {
	margin: 0;
	display: flex;
	flex-direction: column;
}

.pw-spec__row {
	display: grid;
	grid-template-columns: 136px minmax(0, 1fr);
	gap: 16px;
	align-items: baseline;
	padding: 14px 0;
	border-bottom: 1px solid var(--hairline);
}

.pw-spec__row:first-child {
	border-top: 1px solid var(--hairline);
}

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

.pw-spec dd {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--pw-text);
}

.pw-spec__links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
}

.pw-aside {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 24px;
	border-top: 1px solid var(--hairline);
}

/* ── Design entry: plan legend, plants ── */
/* Legend numbers match the marks on the plan. They carry meaning, so they are text (--text-lead-muted), not stone. */
.pw-legend {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: pw-leg;
	border-top: 1px solid var(--hairline);
}

.pw-legend li {
	counter-increment: pw-leg;
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 16px;
	align-items: baseline;
	padding: 16px 0;
	border-bottom: 1px solid var(--hairline-weak);
}

.pw-legend li::before {
	content: counter(pw-leg);
	font-family: var(--font-display);
	font-size: 28px;
	line-height: 1;
	color: var(--text-lead-muted);
}

.pw-legend__name {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: var(--pw-ink);
}

.pw-legend__desc {
	display: block;
	font-size: 15px;
	line-height: 1.5;
	color: var(--pw-text);
}

.pw-plants {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 48px;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--hairline);
}

.pw-plants li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px 0;
	border-bottom: 1px solid var(--hairline-weak);
}

.pw-plants__name {
	font-size: 16px;
	font-weight: 500;
	color: var(--pw-ink);
}

.pw-plants__latin {
	font-size: 14px;
	font-style: italic;
	color: var(--text-lead-muted);
}

/* ── Entry: gallery + lightbox (native <dialog>) ── */
.pw-gallery,
.pw-gallery__row {
	display: flex;
	gap: var(--space-4);
}

.pw-gallery {
	flex-direction: column;
}

/* One row for a phone: on wider screens its photos belong straight to the row. */
.pw-gallery__sub {
	display: contents;
}

/*
 * flex-grow = the proportion of the photo: the same height for all in a row, and the row as wide as the container.
 * Times 100, because a sum of flex-grow below 1 fills only that part of the row (a lone portrait photo: 0.8).
 */
.pw-gallery__item {
	display: block;
	flex: calc(var(--pw-ar, 1.5) * 100) 1 0;
	min-width: 0;
	aspect-ratio: var(--pw-ar, 1.5);
	padding: 0;
	border: 0;
	overflow: hidden;
	background: var(--pw-paper-alt);
	cursor: zoom-in;
}

/* The two large visualisations keep their own box (.pw-grid-2). */
.pw-gallery__item--lead {
	width: 100%;
	aspect-ratio: 4 / 3;
}

.pw-gallery__more {
	margin-top: var(--space-6);
}

.pw-gallery__more[open] {
	margin-top: var(--space-4);
}

.pw-gallery__more > summary {
	display: flex;
	width: fit-content;
	margin-inline: auto;
	list-style: none;
}

.pw-gallery__more > summary::-webkit-details-marker {
	display: none;
}

.pw-gallery__more[open] > summary {
	display: none;
}

.pw-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--dur-slow) var(--ease);
}

.pw-gallery__item:hover img {
	transform: scale(1.03);
}

/*
 * Lightbox (stage G [32], Damian): the page behind is darkened and
 * blurred, the photo stands sharp on it, the arrows are translucent
 * squares on its sides (no lines), the dialog fades in. Keyboard, Escape
 * and focus as before (gallery.js); without motion when the visitor asks
 * for less (the 1ms rule of core.css and the media query below).
 */
.pw-lightbox {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--text-on-dark);
	font-family: var(--font-body);
	opacity: 1;
	transition: opacity 240ms var(--ease), display 240ms allow-discrete, overlay 240ms allow-discrete;
}

.pw-lightbox::backdrop {
	background: rgba(28, 26, 22, 0.92);
	transition: background-color 240ms var(--ease), backdrop-filter 240ms var(--ease);
}

@supports (backdrop-filter: blur(1px)) {
	.pw-lightbox::backdrop {
		background: rgba(28, 26, 22, 0.8);
		backdrop-filter: blur(14px);
	}
}

@starting-style {
	.pw-lightbox[open] {
		opacity: 0;
	}

	.pw-lightbox[open]::backdrop {
		background-color: rgba(28, 26, 22, 0);
		backdrop-filter: blur(0);
	}
}

.pw-lightbox[open],
.pw-lightbox--static {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
}

.pw-lightbox--static {
	position: relative;
	width: 100%;
	height: 560px;
	background: var(--pw-ink);
}

.pw-lightbox__bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 12px 16px 0 24px;
}

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

.pw-lightbox__figure {
	position: relative;
	margin: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px 96px 24px;
}

.pw-lightbox__img {
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	object-fit: contain;
	display: block;
}

/* Previous / next on the sides of the photo, at its middle. */
.pw-lightbox__nav {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	padding: 0 24px;
	pointer-events: none;
	transform: translateY(-50%);
}

.pw-lightbox__nav .pw-lightbox__btn {
	width: 56px;
	height: 56px;
	padding: 0;
	background: rgba(28, 26, 22, 0.55);
	border: 1px solid rgba(247, 245, 241, 0.24);
	pointer-events: auto;
}

@supports (backdrop-filter: blur(1px)) {
	.pw-lightbox__nav .pw-lightbox__btn {
		background: rgba(247, 245, 241, 0.12);
		backdrop-filter: blur(8px);
	}
}

.pw-lightbox__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	background: none;
	border: 0;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-on-dark);
	cursor: pointer;
	transition: var(--transition-color);
}

/* The words "Poprzednie" / "Następne" stay for screen readers; the arrow is enough on screen. */
.pw-lightbox__btn span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

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

.pw-lightbox__nav .pw-lightbox__btn:hover {
	border-color: var(--action-on-dark);
}

.pw-lightbox :where(a, button):focus-visible {
	outline: 2px solid var(--focus-ring-on-dark);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.pw-lightbox,
	.pw-lightbox::backdrop {
		transition: none;
	}
}

/* ── Entry: before / after slider ── */
/* A real <input type="range"> over the whole surface drives the split (mouse, touch, arrow keys). JS only sets --pos. */
.pw-compare {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--pw-ink);
	--pos: 50%;
}

.pw-compare__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pw-compare__img--after {
	clip-path: inset(0 0 0 var(--pos));
}

.pw-compare__label {
	position: absolute;
	top: 16px;
	padding: 6px 10px;
	background: var(--pw-ink);
	color: var(--text-on-dark);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	pointer-events: none;
}

.pw-compare__label--before {
	left: 16px;
}

.pw-compare__label--after {
	right: 16px;
}

.pw-compare__line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos);
	width: 1px;
	margin-left: -0.5px;
	background: var(--pw-paper);
	pointer-events: none;
}

.pw-compare__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	-webkit-appearance: none;
	appearance: none;
}

/* 44px handle: a circle on explicit request (the second exception to --radius: 0, after radio). */
.pw-compare__handle {
	position: absolute;
	top: 50%;
	left: var(--pos);
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	border-radius: 50%;
	border: 1px solid var(--pw-paper);
	background: var(--pw-ink);
	color: var(--text-on-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.pw-compare__range:focus-visible ~ .pw-compare__handle {
	outline: 2px solid var(--focus-ring-on-dark);
	outline-offset: 2px;
}

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

.pw-gallery--after-lead {
	margin-top: 32px;
}

/* Case study: solution blocks (icon not clickable, so muted) and the result paragraph under the numbers. */
.pw-solution {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 24px;
	border-top: 1px solid var(--hairline);
}

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

.pw-result-text {
	margin-top: 56px;
	max-width: 72ch;
}

@media (max-width: 959px) {


	.pw-types {
		gap: 64px;
	}


	.pw-types .pw-split {
		gap: 32px;
	}


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


}

@media (max-width: 575px) {


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


	.pw-gallery,
	.pw-gallery__row,
	.pw-gallery__sub {
		display: flex;
		gap: var(--space-2);
	}

	.pw-gallery__row {
		flex-direction: column;
	}

	.pw-gallery__more[open] {
		margin-top: var(--space-2);
	}


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


	.pw-lightbox__figure {
		padding: 16px 0 88px;
	}

	/* Phone: the arrows under the photo, not over it. */
	.pw-lightbox__nav {
		top: auto;
		bottom: 16px;
		justify-content: center;
		gap: 16px;
		transform: none;
	}


	.pw-compare__label {
		top: 8px;
	}


	.pw-compare__label--before {
		left: 8px;
	}


	.pw-compare__label--after {
		right: 8px;
	}
}


/*
 * 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-legend,
.pw-plants {
	border-top: 0;
}

.pw-legend li:last-child,
.pw-plants li:last-child {
	border-bottom: 0;
}

/*
 * Facts of an entry as a box (stage G [27]): the darker fill of the site's
 * boxes in place of the lines above and below, a weak line between the
 * rows only. The type of the entry is the first row.
 */
.pw-spec {
	padding: 8px 24px;
	background: var(--pw-paper-alt);
}

.pw-spec__row {
	border-bottom: 0;
}

.pw-spec__row:first-child {
	border-top: 0;
}

.pw-spec__row + .pw-spec__row {
	border-top: 1px solid var(--hairline-weak);
}

/*
 * Side box of an entry ("Zakres prac", stage G [29, 31]): the box of the
 * facts in place of a line above a smaller heading, starting level with
 * the text next to it.
 */
.pw-aside {
	gap: 12px;
	padding: 24px;
	border-top: 0;
	background: var(--pw-paper-alt);
}

/* The front end renders the list as .pw-checklist, the editor keeps .is-style-checklist: the same line for both. */
.pw-aside :is(.is-style-checklist, .pw-checklist) li {
	border-bottom: 0;
}

.pw-aside :is(.is-style-checklist, .pw-checklist) li + li {
	border-top: 1px solid var(--hairline-weak);
}

/*
 * Case study (stage G [40-43], Damian).
 * Solutions: a numbered list down the page in place of three columns –
 * the number of points differs from case to case.
 */
.pw-solutions {
	display: flex;
	flex-direction: column;
	max-width: 880px;
	counter-reset: pw-solution;
}

.pw-solutions > .pw-solution {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 4px 24px;
	padding: 28px 0;
	border-top: 0;
	counter-increment: pw-solution;
}

.pw-solutions > .pw-solution + .pw-solution {
	border-top: 1px solid var(--hairline);
}

/* The number of the point in the first column (an ornament; the order is in the markup). */
.pw-solutions > .pw-solution::before {
	content: counter(pw-solution, decimal-leading-zero);
	grid-row: 1 / span 3;
	font-family: var(--font-display);
	font-size: 40px;
	line-height: 1;
	color: var(--pw-stone);
}

.pw-solutions .pw-solution__icon {
	display: none;
}

/* Before and after: as wide as the main photo of the entry. */
.pw-compare-wrap,
.pw-compare-wrap .pw-compare {
	width: 100%;
	max-width: none;
}

/* "Efekt po …": the numbers as boxes, the result in large text across the whole width. */
.pw-section--dark .pw-result-text {
	max-width: none;
	margin-top: 48px;
	font-family: var(--font-display);
	font-size: 28px;
	line-height: 1.4;
	color: var(--text-on-dark);
}

@media (max-width: 959px) {
	.pw-section--dark .pw-result-text {
		font-size: 22px;
	}

	.pw-solutions > .pw-solution {
		grid-template-columns: 40px minmax(0, 1fr);
	}

	.pw-solutions > .pw-solution::before {
		font-size: 28px;
	}
}