/**
 * Blog: article head, byline, summary, table of contents and body, post
 * cards and grid, post navigation, blog bar, inline CTA, author.
 *
 * 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
 */

/* Post card: the whole card is a link; 3:2 photo in a frame, category, H3 (max 3 lines), excerpt (max 3 lines), meta. */
.pw-post-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 56px 32px;
}

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

.pw-post-card {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: inherit;
	text-decoration: none;
}

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

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

a.pw-post-card:hover .pw-post-card__media img {
	transform: scale(1.03);
}

.pw-post-card__title {
	transition: color var(--dur) var(--ease);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

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

.pw-post-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pw-post-card__meta {
	margin-top: auto;
	padding-top: 4px;
	font-size: 13px;
	color: var(--text-lead-muted);
}

/* Featured: photo 7/12, text 5/12; the links are the TextLink "Czytaj" and the title. */
.pw-post-card--featured {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 48px;
	align-items: center;
	margin-bottom: 80px;
}

.pw-post-card--featured .pw-post-card__media {
	margin: 0;
}

.pw-post-card--featured .pw-post-card__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pw-post-card__title-link {
	color: inherit;
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}

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

.pw-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	font-size: 14px;
	color: var(--text-lead-muted);
}

.pw-byline__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	flex: 0 0 auto;
	background: var(--pw-paper-alt);
}

.pw-byline__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 15%;
	display: block;
}

.pw-byline__name {
	color: var(--pw-ink);
	font-weight: 600;
}

.pw-byline__sep {
	color: var(--hairline);
}

/* "In short" (GEO): hairline frame, 3 points answering the title. Before the main photo. */
.pw-summary {
	margin: 32px 0 0;
	padding: 24px 28px;
	border: 1px solid var(--hairline);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

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

.pw-summary ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pw-summary li {
	display: flex;
	gap: 12px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--pw-text);
}

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

.pw-article-head {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* The category link above the H1 (inline style in the mockup). */
.pw-article-head__cat {
	align-self: flex-start;
	color: var(--action-on-light);
}

.pw-article-hero {
	margin: 48px auto 0;
}

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

/* Service card inside a post: thumbnail, one line, TextLink. */
.pw-inline-cta {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 20px;
	align-items: center;
	padding: 16px;
	border: 1px solid var(--hairline);
}

.pw-inline-cta img {
	width: 120px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

/* In an article the 3:2 rule of .pw-prose figures is more specific; the card keeps its 4:3 (stage C0). */
.pw-prose .pw-inline-cta img,
:where(.post-type-post) .is-root-container .pw-inline-cta img {
	aspect-ratio: 4 / 3;
}

.pw-inline-cta__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pw-inline-cta__body p {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	color: var(--pw-ink);
}

/* Editor 1:1: the rule of a paragraph in the canvas is more specific. */
:where(.post-type-post) .is-root-container .pw-inline-cta__body p {
	font-weight: 500;
	color: var(--pw-ink);
}

/* The TextLink as a Buttons block (stage B): its wrapper makes no box, so the link is a child of the column, as in the mockup.
   .wp-block-button__link: the label in the editor, which stands for the page's <a>. */
.pw-inline-cta__body > .wp-block-buttons {
	display: contents;
}

.pw-inline-cta__body .wp-block-button__link {
	display: flex;
}

/* Post author. */
.pw-author {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	padding: 28px 0;
	border-top: 1px solid var(--hairline);
	border-bottom: 1px solid var(--hairline);
}

.pw-author__photo {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--pw-paper-alt);
}

.pw-author__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 15%;
	display: block;
}

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

@media (max-width: 959px) {


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


	.pw-post-card--featured {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		margin-bottom: 56px;
	}
}

@media (max-width: 575px) {


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


	.pw-summary {
		padding: 20px;
	}


	.pw-inline-cta {
		grid-template-columns: 88px minmax(0, 1fr);
		gap: 14px;
		padding: 12px;
	}


	.pw-inline-cta img {
		width: 88px;
	}


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


	.pw-author__photo {
		width: 64px;
		height: 64px;
	}
}

/* Blog bar: category filter on the left, search on the right, one band between hairlines. */
.pw-blog-bar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 16px 32px;
	align-items: center;
	margin-bottom: 64px;
	border-top: 1px solid var(--hairline);
	border-bottom: 1px solid var(--hairline);
}

.pw-blog-bar .pw-filter {
	margin: 0;
	border: 0;
}

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

/* Post table of contents: built from H2 and H3, numbered, right under the main photo. */
.pw-article-toc {
	margin: 32px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--hairline);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

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

.pw-article-toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: pw-toc;
}

/* Two columns: the lines and numbers read as a list even when the eye jumps. */
.pw-article-toc > ol {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 40px;
	align-items: start;
}

.pw-article-toc > ol > li {
	counter-increment: pw-toc;
	border-bottom: 1px solid var(--hairline-weak);
}

.pw-article-toc a {
	display: flex;
	gap: 12px;
	min-height: 44px;
	padding: 8px 0;
	align-items: baseline;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--pw-ink);
	text-decoration: none;
}

.pw-article-toc a::before {
	content: counter(pw-toc, decimal-leading-zero);
	flex: 0 0 26px;
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	color: var(--text-lead-muted);
}

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

/* A long table of contents: a checkbox and its label, so it works without a script. */
.pw-article-toc__all:not(:checked) ~ ol > .pw-toc-extra,
.pw-article-toc__all:not(:checked) ~ .pw-article-toc__more .pw-article-toc__close,
.pw-article-toc__all:checked ~ .pw-article-toc__more .pw-article-toc__open {
	display: none;
}

.pw-article-toc__more {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-size: 14px;
	font-weight: 600;
	color: var(--action-on-light);
	cursor: pointer;
}

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

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

.pw-article-toc__all:checked ~ .pw-article-toc__more svg {
	transform: rotate(180deg);
}

@media (max-width: 767px) {
	.pw-article-toc > ol {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media print {
	.pw-article-toc ol > .pw-toc-extra {
		display: list-item;
	}

	.pw-article-toc__more {
		display: none;
	}
}

.pw-article-body {
	margin-top: 48px;
}

@media (max-width: 959px) {


	.pw-blog-bar {
		grid-template-columns: minmax(0, 1fr);
		padding-bottom: 16px;
	}
}

@media (max-width: 575px) {


	.pw-article-toc {
		padding: 20px;
	}
}

/*
 * Stage G [99, 102]: the header and the photo of a post at 70 % of the
 * container (952 px); since the review of 29.10.2026 the table of contents
 * and the text below too, one column from the title to the end. The photo has
 * its own slot ("article" in inc/images.php), so the file fits the place.
 */
.pw-container--narrow.pw-article-top,
.pw-container--narrow.pw-article-main {
	max-width: calc(952px + 80px);
}

.pw-article-hero {
	max-width: 952px;
}

/*
 * Review of 30.10.2026: the text, the summary and the boxes in it fill the
 * column as the photo and the table of contents do, not the 72ch of other
 * texts (lines of about 95 characters at 952 px, still readable at 18 px).
 */
.pw-prose.pw-article-body {
	max-width: none;
}

/*
 * Plants of the Poradnik (stage I): the blocks plant-* and the plant list.
 * Everything from tokens, no new look: frames as .pw-summary, cards as
 * .pw-post-card. The cells of the calendar are neutral: green means clickable.
 */
.pw-plant-names {
	margin: 0;
	color: var(--text-lead-muted);
}

.pw-plant-latin {
	font-style: italic;
	color: var(--text-lead-muted);
}

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

.pw-plant-filter {
	margin-top: 16px;
}

.pw-plant-card__facts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-body);
}

.pw-plant-card__facts li {
	display: flex;
	gap: 8px;
}

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

/* The type selectors win over the rules of the prose (.pw-prose dl, .pw-prose table …), which stand as long as these. */
dl.pw-plant-facts {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	border-top: 0;
}

.pw-plant-fact {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	border: 1px solid var(--hairline);
}

.pw-plant-fact dt {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pw-ink);
}

.pw-plant-fact dt svg {
	flex: 0 0 auto;
	color: var(--text-lead-muted);
}

.pw-plant-fact dd {
	margin: 0;
	padding: 0;
	border-bottom: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--pw-text);
}

.pw-plant-warning {
	border-color: var(--pw-ink);
}

.pw-plant-warning p {
	margin: 0;
}

table.pw-plant-calendar {
	width: 100%;
	min-width: 0;
	margin: 0;
	table-layout: fixed;
	border-collapse: collapse;
}

.pw-plant-calendar :is(th, td) {
	height: 36px;
	padding: 0;
	border: 1px solid var(--hairline);
	font-size: 13px;
	font-weight: 400;
	text-align: center;
	color: var(--pw-text);
	background: transparent;
}

.pw-plant-calendar thead td {
	border: 0;
}

.pw-plant-calendar th[scope="row"] {
	padding-right: 8px;
	font-weight: 600;
	text-align: left;
	color: var(--pw-ink);
}

/* A cell of its own, like those under it (Damian, 05.11.2026), with the name in its middle. */
table.pw-plant-calendar thead th {
	padding: 0;
	letter-spacing: 0;
	vertical-align: middle;
	border: 1px solid var(--hairline);
}

/* A fixed table takes the widths of its first row: the empty cell above the names of the works. */
.pw-plant-calendar thead td {
	width: 120px;
}

/* Every cell its own four edges, on every row (stage H1.1): the tables of the text take the bottom line away. */
table.pw-plant-calendar tbody tr :is(th, td),
table.pw-plant-seasons thead tr :is(th, td),
table.pw-plant-seasons tbody tr :is(th, td) {
	border-bottom: 1px solid var(--hairline);
}

.pw-plant-calendar td.is-on {
	background: var(--pw-green-on-light);
}

.pw-plant-calendar__letter {
	display: none;
}

table.pw-plant-seasons {
	width: 100%;
	min-width: 0;
	margin: 0;
	border-collapse: collapse;
}

.pw-plant-seasons :is(th, td) {
	padding: 12px;
	border: 1px solid var(--hairline);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	vertical-align: top;
	color: var(--pw-text);
	background: transparent;
}

.pw-plant-seasons thead th,
.pw-plant-seasons th[scope="row"] {
	font-weight: 600;
	color: var(--pw-ink);
}

.pw-plant-block > h2 {
	margin: 0 0 16px;
}

.pw-plant-block {
	margin-block: 24px;
}

/* The frame, the heading and the crosses in the colour of errors of the site (--pw-error, 5:1 on paper). */
.pw-summary.pw-plant-mistakes {
	border-color: var(--pw-error);
}

.pw-plant-mistakes li svg {
	color: var(--pw-error);
}

.pw-plant-mistakes > h2 {
	margin: 0;
	font-size: 26px;
	color: var(--pw-error);
}

.pw-plant-mistakes > ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pw-plant-advice {
	margin-inline: 0;
}

.pw-plant-advice blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--pw-text);
}

.pw-plant-advice blockquote p {
	margin: 0;
}

.pw-plant-advice img {
	width: 40px;
	height: 40px;
	max-width: none;
	padding: 0;
	object-fit: cover;
}

.pw-plant-pair {
	flex: 1 1 auto;
	padding: 20px;
	border: 1px solid var(--hairline);
}

ul.pw-plant-pairs {
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	list-style: none;
}

.pw-plant-pairs > li {
	margin: 0;
}

.pw-plant-sources {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.pw-plant-checked {
	margin: 16px 0 0;
	font-size: 14px;
	color: var(--text-lead-muted);
}

/* Two photos side by side (stage I6). The class on the columns also holds the frame of a missing photo, in the same
   proportions as the photos, so nothing moves when the photo comes. */
.pw-plant-photos {
	gap: 16px;
	margin: 24px 0;
}

.pw-plant-photos img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.pw-plant-photos .wp-block-image {
	margin: 0;
}

.pw-plant-photos .pw-plant-photo-missing {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 2;
	margin: 0;
	padding: 16px;
	text-align: center;
	background: var(--pw-paper-alt);
	border: 1px dashed var(--border-field);
}

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

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

	/* Twelve narrow columns with one letter each: no sideways scroll at 320 px. */
	.pw-plant-calendar :is(th, td) {
		font-size: 12px;
	}

	.pw-plant-calendar th[scope="row"] {
		padding-right: 4px;
	}

	.pw-plant-calendar thead td {
		width: 76px;
	}

	.pw-plant-calendar__short {
		display: none;
	}

	.pw-plant-calendar__letter {
		display: inline;
	}

	/* The seasons as cards: the name of the season on top, each value with its name. */
	table.pw-plant-seasons,
	.pw-plant-seasons tbody,
	.pw-plant-seasons tr,
	.pw-plant-seasons :is(th, td) {
		display: block;
		width: 100%;
	}

	.pw-plant-seasons thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.pw-plant-seasons tr + tr {
		margin-top: 16px;
	}

	.pw-plant-seasons tbody tr {
		border: 1px solid var(--hairline);
	}

	table.pw-plant-seasons thead tr :is(th, td),
	table.pw-plant-seasons tbody tr :is(th, td) {
		border: 0;
	}

	.pw-plant-seasons tbody td {
		padding-top: 0;
	}

	.pw-plant-seasons td::before {
		content: attr(data-label) ": ";
		font-weight: 600;
		color: var(--pw-ink);
	}
}