/*
 * „Zostań jeszcze na chwilę” under a post (template-parts/post/related.php).
 * From the preview docs/preview/inspiracje_szablon.png (762 px wide; × 1.89
 * for 1440): heading with a rule, two stacked post cards side by side (578 px
 * at 1440, the photo wide, 3.4 : 1), „Wszystkie inspiracje →” at the right
 * under them. Phones: one card under the other.
 */

/* Preview at 1440: about 38 px above the heading, 28 px under the link. */
.hf-post-related
{
	padding-block: var(--hf-space-l) calc(var(--hf-space-m) + var(--hf-space-xs));
}

/* Preview at 1440: 465 px wide („Odkrywaj kolejne historie” on Inspiracje
   uses the larger --hf-text-h2-m). */
.hf-post-related__title
{
	margin: 0 0 var(--hf-space-m);
	font-size: var(--hf-text-h2-s);
}

.hf-post-related__grid
{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--hf-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hf-post-related__item
{
	display: flex;
}

/* The card a little smaller than on the Inspiracje list: a wider photo
   (168 px high at 1440) and a title of about 24 px. */
.hf-post-related .hf-post-card--stacked .hf-post-card__media
{
	aspect-ratio: 3.4 / 1;
}

.hf-post-related .hf-post-card--stacked .hf-post-card__title
{
	font-size: var(--hf-text-l);
}

.hf-post-related__all
{
	display: flex;
	justify-content: flex-end;
	margin: var(--hf-space-m) 0 0;
}

@media (min-width: 40em)
{
	.hf-post-related__grid
	{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Phones: the photo a little taller, so it still shows something. */
@media (max-width: 39.99em)
{
	.hf-post-related .hf-post-card--stacked .hf-post-card__media
	{
		aspect-ratio: 2.4 / 1;
	}
}