/*
 * Band with a heading, text and buttons (template-parts/components/cta-band.php).
 * No section mockup; built from the preview docs/preview/inspiracje.png
 * („Od inspiracji do spotkania”, 820 px wide; × 1.756 for 1440): a warm
 * band the width of the page, about 214 px high at 1440; heading with a
 * rule and two lines of text on the left, a thin vertical line, two
 * buttons on the right (263 and 269 px at 1440, no arrows).
 * Below 75em the buttons go under the text without the line (at 1024
 * side by side the text column would be 286 px); on phones they are full
 * width, one under the other.
 */

.hf-cta-band
{
	padding-block: calc(var(--hf-space-m) + var(--hf-space-xs));
	background: var(--hf-color-band-strong);
}

.hf-cta-band__inner
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hf-space-m);
}

.hf-cta-band__content
{
	flex: 1 1 100%;
	min-width: 0;
}

.hf-cta-band__title
{
	margin: 0;
	font-size: var(--hf-text-h2-m);
	text-wrap: balance;
}

.hf-cta-band__text
{
	margin: var(--hf-space-s) 0 0;
	color: var(--hf-color-text);
	font-size: var(--hf-text-l);
	line-height: 1.5;
	text-wrap: pretty;
}

.hf-cta-band__actions
{
	display: flex;
	flex-wrap: wrap;
	gap: var(--hf-space-s);
}

/* Preview at 1440: 263 and 269 px. */
.hf-cta-band__actions .hf-button
{
	min-width: 16.5rem;
}

/* Text and buttons side by side, the line between them as high as the text. */
@media (min-width: 75em)
{
	.hf-cta-band__inner
	{
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: stretch;
		gap: 0 var(--hf-space-l);
	}

	.hf-cta-band__actions
	{
		flex-wrap: nowrap;
		align-items: center;
		padding-left: var(--hf-space-l);
		border-left: 1px solid color-mix(in srgb, var(--hf-color-outline) 15%, transparent);
	}
}

/*
 * Compact, under a post (preview docs/preview/inspiracje_szablon.png, 762 px
 * wide; × 1.89 for 1440): the band about 163 px high, a smaller heading
 * (660 px wide at 1440), one line of text, the buttons as wide as their
 * text (231 and 201 px), no line between text and buttons.
 */
.hf-cta-band--compact .hf-cta-band__title
{
	font-size: var(--hf-text-h2-s);
}

.hf-cta-band--compact .hf-cta-band__actions .hf-button
{
	min-width: 0;
}

@media (min-width: 75em)
{
	.hf-cta-band--compact .hf-cta-band__actions
	{
		padding-left: 0;
		border-left: 0;
	}
}

/*
 * With an icon before the heading (Uważność „Nie wiesz, którą drogę
 * wybrać?”, docs/preview/uwaznosc.png: a line icon of about 55 px at 1440,
 * centred against the text). Below 75em the icon stays beside the text and
 * the buttons go under both.
 */
.hf-cta-band__icon
{
	display: flex;
	flex: none;
	align-self: flex-start;
	color: var(--hf-color-icon);
}

/* The drawing has a margin in its 48 × 48 box: 71 px here gives the bubble
   of about 55 px seen in the preview at 1440 (it was 35 px at 49 px). */
.hf-cta-band__icon-svg
{
	width: clamp(2.75rem, 1.2rem + 3.6vw, 4.5rem);
	height: auto;
}

.hf-cta-band--icon .hf-cta-band__content
{
	flex: 1 1 0;
}

.hf-cta-band--icon .hf-cta-band__actions
{
	flex-basis: 100%;
}

@media (min-width: 75em)
{
	.hf-cta-band--icon .hf-cta-band__inner
	{
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.hf-cta-band--icon .hf-cta-band__icon
	{
		align-self: center;
	}
}

@media (max-width: 40em)
{
	.hf-cta-band__actions
	{
		flex-direction: column;
		width: 100%;
	}

	.hf-cta-band__actions .hf-button
	{
		width: 100%;
		min-width: 0;
	}
}