/*
 * Page hero with a photo (template-parts/components/page-hero.php): Miejsce,
 * Uważność and O nas (variant „sharp”, at the end). From the previews docs/preview/miejsce1_1.png and
 * uwaznosc.png: text on the left, a photo on the right (about 60% of the
 * width, from the site header to the end of the section) whose left edge
 * fades into the page; the buttons reach into the fade. Below 56em the
 * photo sits above the text and fades at the bottom. The breadcrumbs above
 * the heading in the previews are left out, as on the other pages.
 */

.hf-page-hero
{
	position: relative;
}

.hf-page-hero__media
{
	position: relative;
	aspect-ratio: 3 / 2;
	background: var(--hf-color-band);
	-webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
	mask-image: linear-gradient(to bottom, #000 78%, transparent);
}

.hf-page-hero__image
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
}

.hf-page-hero__inner
{
	position: relative;
	padding-block: var(--hf-space-s) var(--hf-space-section-block);
}

.hf-page-hero__eyebrow
{
	margin-bottom: var(--hf-space-s);
}

/* Uważność: the size of the other page headings (Kontakt, Inspiracje),
   about 5% under the preview at 1440. */
.hf-page-hero__title
{
	margin: 0;
	font-size: var(--hf-text-page-title);
	text-wrap: balance;
}

/* Miejsce: smaller, as in its preview. */
.hf-page-hero__title--m
{
	font-size: var(--hf-text-h2-m);
}

/* „Zatrzymaj się. Zauważ. Pobądź.” (Uważność): one size above the
   description, in the heading colour, as in the preview (Georgia about
   17% larger there, like the other texts of the generated previews). */
.hf-page-hero__tagline
{
	margin: var(--hf-space-m) 0 0;
	color: var(--hf-color-heading);
	font-size: var(--hf-text-xl);
	line-height: 1.3;
	text-wrap: balance;
}

.hf-page-hero__lead
{
	max-width: 30em;
	margin: var(--hf-space-m) 0 var(--hf-space-l);
	font-size: var(--hf-text-l);
	line-height: 1.5;
	text-wrap: pretty;
}

.hf-page-hero__tagline + .hf-page-hero__lead
{
	margin-top: var(--hf-space-s);
}

.hf-page-hero__actions
{
	display: flex;
	flex-wrap: wrap;
	gap: var(--hf-space-s) calc(var(--hf-space-s) + var(--hf-space-xs));
}

/* The outline button may stand on the faded photo: a solid ground keeps it
   readable (white in the preview). Not under the mouse: this rule is as
   strong as .hf-button--outline:hover and comes later, so it kept the white
   ground behind the light hover text (contrast 1.02 : 1, 2026-11-04). */
.hf-page-hero__actions .hf-button--outline:not(:hover)
{
	background: var(--hf-color-surface);
}

/* „Szukasz kursu MBSR online?” under the button (Uważność): the same gap
   as between the description and the button, as in the preview. */
.hf-page-hero__more
{
	margin: var(--hf-space-l) 0 0;
}

/* Photo on the right, fading into the page on its left edge. */
@media (min-width: 56em)
{
	.hf-page-hero
	{
		display: flex;
		align-items: center;
		min-height: clamp(30rem, 14rem + 28vw, 40rem);
	}

	.hf-page-hero__media
	{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		/* Half the width until 80em, so the text column stays clear of the
		   photo (at 1024 px the first line of the lead reached into it). */
		width: 50%;
		aspect-ratio: auto;
		-webkit-mask-image: linear-gradient(to right, transparent, #000 16%);
		mask-image: linear-gradient(to right, transparent, #000 16%);
	}

	.hf-page-hero__inner
	{
		padding-block: var(--hf-space-section-block);
	}

	/* Wide enough for both buttons on one row (599 px at 1440, 628 px at
	   1920 with the larger button text), as in the preview. */
	.hf-page-hero__content
	{
		max-width: 40rem;
	}

	/* Two lines as in the previews; on one line (at 896 px) it ran into the photo. */
	.hf-page-hero__title
	{
		max-width: 11em;
	}
}

/* As in the previews at 1440: the photo takes 60% of the width. */
@media (min-width: 80em)
{
	.hf-page-hero__media
	{
		width: 60%;
	}
}

/*
 * Variant „sharp” (O nas, docs/preview/onas.png): the photo ends with a
 * straight edge instead of fading, so the text must not reach into it.
 * From 80em the photo takes 55% of the width, as in the preview at 1440.
 */
.hf-page-hero--sharp .hf-page-hero__media
{
	-webkit-mask-image: none;
	mask-image: none;
}

@media (min-width: 56em)
{
	/* The photo starts in the middle of the page and the container is
	   centred, so half of the container ends where the photo begins. */
	.hf-page-hero--sharp .hf-page-hero__content
	{
		max-width: calc(50% - var(--hf-space-l));
	}
}

/* In the narrow column next to the photo the typed line breaks wrap again
   and leave single words on their own lines (1024: „na matę,”). */
@media (min-width: 56em) and (max-width: 79.99em)
{
	.hf-page-hero--sharp .hf-page-hero__lead br
	{
		display: none;
	}
}

@media (min-width: 80em)
{
	.hf-page-hero--sharp .hf-page-hero__media
	{
		width: 55%;
	}

	/* The photo starts at 45% of the page: 5% of the page width (5vw)
	   before the middle of the container. */
	.hf-page-hero--sharp .hf-page-hero__content
	{
		max-width: calc(50% - 5vw - var(--hf-space-l));
	}
}

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

	.hf-page-hero__actions .hf-button
	{
		width: 100%;
	}
}