/* ==========================================================================
   KAFEL WPISU (.post-card) + siatka (.post-grid) — prymityw „historii i porad”.

   Jedno źródło stylu kafla dla WSZYSTKICH powierzchni, które go renderują
   (markup: `template-parts/post-card.php` przez `inc/content/post-grid.php`):
     • baner „gentle rain” na archiwach sklepu   → `.post-card--feature`
     • „przeczytaj też” pod artykułem             → `.post-card--card`
   Dwie powierzchnie, żadna nie jest globalna → osobny arkusz z enqueue
   warunkowym (ADR-0032, precedens: `components/forms.css`). Dep `-components`
   (używa prymitywu `.pill`); nadpisania celujemy specyficznością (ADR-0011).

   Wartości przeniesione 1:1 z sekcji banera w `listing.css` (port prototypu
   `sections/listing/baner-gentle-rain`) — render bez zmian.

   Blok Home `acf/blog` NIE korzysta z tego pliku: jego kafle zostają ręcznie
   kuratorowane i mają własny `blocks/blog/style.css` (ADR-0040).
   ========================================================================== */

.post-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.post-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--wp--preset--spacing--md);
	}
}

/* --- Karta -------------------------------------------------------------- */
.post-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--md);
}

/* Wariant „card” ma ciaśniejszy rytm — pill/nagłówek/meta to jeden blok treści. */
.post-card--card {
	gap: var(--wp--preset--spacing--sm);
}

/* --- Okrągłe zdjęcie ---------------------------------------------------- */
.post-card__media {
	display: block;
	width: 100%;
	max-width: 22rem;
	margin-inline: auto;
}

@media (min-width: 768px) {
	.post-card__media {
		max-width: none;
	}
}

.post-card__image {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
	border-radius: var(--wp--custom--radius--circle);
	user-select: none;
	-webkit-user-drag: none;
}

/* --- Treść karty -------------------------------------------------------- */
.post-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--sm);
}

/* Nagłówek dziedziczy kolor/krój po `base.css`; link w środku jest niewidoczny
   wizualnie (cała różnica to focus-visible) — kafel ma wyglądać jak w makiecie,
   a nie jak link. */
.post-card__link {
	color: inherit;
	text-decoration: none;
}

.post-card__link:hover {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* --- Wariant `feature` (baner na listingu) — pill INLINE w nagłówku 46px --- */
.post-card--feature .post-card__heading {
	font-size: var(--wp--preset--font-size--h-1);
	line-height: var(--wp--custom--line-height--tight);
	letter-spacing: var(--wp--custom--letter-spacing--wide);
}

.post-card--feature .post-card__tag {
	margin-inline-end: var(--wp--preset--spacing--sm);
	vertical-align: middle;
}

/* --- Wariant `card` („przeczytaj też”) — pill osobno, nagłówek mniejszy ---- */
.post-card--card .post-card__heading {
	font-size: var(--wp--preset--font-size--heading);
	line-height: var(--wp--custom--line-height--tight);
	max-width: 18ch;
}

.post-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--muted);
}