/*
 * Warm band with a photo beside the text (template-parts/components/media-band.php).
 *
 * Variant „rounded”, Uważność „Doświadcz uważności na Kaszubach”: from the
 * preview docs/preview/uwaznosc.png: a warm band (#f4ece5 in the preview,
 * the nearest token is band-strong, as on Miejsce „Twój pomysł…”); a photo
 * with rounded corners on the left (about 682 × 484 px at 1440) and, beside
 * it, an eyebrow, the heading with a short line, a text, a button and a
 * text link, centred against the photo. Below 72em the photo comes first
 * at 3 : 2 and the text under it (at 1024 and 1152 the text column was
 * 396–448 px: the heading took 3 lines, the text 4–5).
 *
 * Variant „wide”, O nas „Przy wspólnym stole” (docs/preview/onas.png): the
 * same band (#f2eae2 in the preview) and columns, a photo with square
 * corners of about 2 : 1 (710 × 349 px at 1440), no button.
 */

.hf-media-band
{
	padding-block: var(--hf-space-section-block);
	background: var(--hf-color-band-strong);
}

.hf-media-band__inner
{
	display: grid;
	gap: var(--hf-space-l);
}

.hf-media-band__media
{
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--hf-radius-m);
	background: var(--hf-color-band-deep);
}

.hf-media-band__image
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hf-media-band__eyebrow
{
	margin-bottom: var(--hf-space-s);
}

/* About 42 px in the preview at 1440. */
.hf-media-band__title
{
	margin: 0;
	font-size: var(--hf-text-h2-m);
	text-wrap: balance;
}

/* About 25 px in the preview at 1440. */
.hf-media-band__text
{
	max-width: 24em;
	margin: var(--hf-space-m) 0 0;
	font-size: var(--hf-text-l);
	line-height: 1.45;
	text-wrap: pretty;
}

.hf-media-band__actions
{
	margin-top: var(--hf-space-l);
}

/* The same gap as above the button, as in the preview. */
.hf-media-band__more
{
	margin: var(--hf-space-l) 0 0;
}

/* Photo and text side by side, half and half until 80em. */
@media (min-width: 72em)
{
	.hf-media-band__inner
	{
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		column-gap: clamp(var(--hf-space-l), 3.5vw, var(--hf-space-xl));
	}

	.hf-media-band--no-image .hf-media-band__inner
	{
		grid-template-columns: minmax(0, 1fr);
	}

	.hf-media-band__media
	{
		aspect-ratio: 682 / 484;
	}
}

/* As in the preview at 1440: the photo about 55% of the width. */
@media (min-width: 80em)
{
	.hf-media-band__inner
	{
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	}
}

/* Variant „wide” (O nas): square corners; about 2 : 1 beside the text. */
.hf-media-band--wide .hf-media-band__media
{
	border-radius: 0;
}

@media (min-width: 72em)
{
	.hf-media-band--wide .hf-media-band__media
	{
		aspect-ratio: 710 / 349;
	}
}

/* Phones: the typed line breaks would leave the text ragged; button full width. */
@media (max-width: 40em)
{
	.hf-media-band__text br
	{
		display: none;
	}

	.hf-media-band__actions .hf-button
	{
		width: 100%;
	}
}