/*
 * Inspiracje featured post (template-parts/inspirations/featured.php). No
 * section mockup; built from the preview docs/preview/inspiracje.png
 * (820 px wide; × 1.756 for 1440): a card the width of the container, the
 * photo on the left (61%, 413 px high at 1440), on the right the eyebrow,
 * the category, the title, the excerpt and a button. The whole card is one
 * link. Below 48em the photo stands above the text (3 : 2).
 */

.hf-inspirations-featured
{
	padding-bottom: var(--hf-space-section-block);
}

.hf-featured-post
{
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	overflow: hidden;
	border: 1px solid var(--hf-color-card-border);
	border-radius: var(--hf-radius-m);
	background: var(--hf-color-surface);
	transition: box-shadow var(--hf-transition);
}

.hf-featured-post:hover
{
	box-shadow: 0 10px 28px color-mix(in srgb, var(--hf-color-heading) 10%, transparent);
}

/* The stretched title link draws the focus ring around the whole card. */
.hf-featured-post:focus-within
{
	outline: 3px solid var(--hf-color-focus);
	outline-offset: 3px;
}

.hf-featured-post__media
{
	position: relative;
	aspect-ratio: 3 / 2;
	background: var(--hf-color-band);
}

.hf-featured-post__image
{
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Preview at 1440: text 40 px from the photo; eyebrow → category 43 px,
   category → title 26 px, title → excerpt 21 px, excerpt → button 36 px
   (after the preview scale). */
.hf-featured-post__body
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

.hf-featured-post__eyebrow
{
	margin-bottom: var(--hf-space-l);
}

.hf-featured-post__category
{
	margin-bottom: var(--hf-space-m);
}

/* The size of the list heading below: at 1440 „Weekend offline” is 377 px
   wide, 362 px in the preview (the page heading: 986 and 938 px). */
.hf-featured-post__title
{
	margin: 0 0 var(--hf-space-s);
	font-size: var(--hf-text-h2-m);
	text-wrap: balance;
}

.hf-featured-post__link
{
	color: inherit;
	text-decoration: none;
}

.hf-featured-post__link::after
{
	position: absolute;
	inset: 0;
	content: "";
}

.hf-featured-post__link:focus-visible
{
	outline: none;
}

.hf-featured-post__text
{
	max-width: 24em;
	margin: 0 0 var(--hf-space-l);
	font-size: var(--hf-text-l);
	line-height: 1.45;
	text-wrap: pretty;
}

/* The card is the link, so the button reacts to the card. */
.hf-featured-post:hover .hf-featured-post__more
{
	border-color: var(--hf-color-primary-hover);
	background: var(--hf-color-primary-hover);
}

.hf-featured-post:hover .hf-featured-post__more .hf-button__icon
{
	transform: translateX(3px);
}

/* Tablets: half and half, so the text column is not too narrow (at 768 the
   61 : 39 split left it 268 px). */
@media (min-width: 48em)
{
	.hf-featured-post
	{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hf-featured-post__media
	{
		min-height: clamp(16rem, 6rem + 22vw, 26rem);
		aspect-ratio: auto;
	}
}

@media (min-width: 64em)
{
	.hf-featured-post
	{
		grid-template-columns: minmax(0, 61fr) minmax(0, 39fr);
	}
}