/*
 * Miejsce „Miejsce tworzą też spotkania” (template-parts/place/meet.php).
 * From the preview docs/preview/miejsce1_2.png: on the page background, a
 * heading under a short line, a dark line of text and three icons with
 * labels in equal columns on the left; on the right a photo from 56% of
 * the window to its right edge, with a strip of the page above and below.
 * The same layout as „Przy wspólnym stole” (place-table.css), without the
 * band. Below 56em the photo stands under the text, within the page margins.
 */

.hf-place-meet
{
	padding-block: var(--hf-space-section-block);
}

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

/* Dark as the headings in the preview (#14161a), the size of the card texts above. */
.hf-place-meet__text
{
	margin: var(--hf-space-m) 0 0;
	color: var(--hf-color-heading);
	font-size: var(--hf-text-l);
	line-height: 1.5;
	text-wrap: pretty;
}

/* The icon row (component-icon-row.css) in equal columns across the text,
   without the dividers, with darker labels as in the preview. Both classes,
   so the grid wins over the component's flex whatever the file order. */
.hf-icon-row.hf-place-meet__icons
{
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	margin-top: var(--hf-space-l);
}

.hf-place-meet__icons .hf-icon-row__item,
.hf-place-meet__icons .hf-icon-row__item:first-child,
.hf-place-meet__icons .hf-icon-row__item:last-child
{
	padding-inline: var(--hf-space-xs);
	color: var(--hf-color-heading);
}

.hf-place-meet__icons .hf-icon-row__item + .hf-icon-row__item
{
	border-left: 0;
}

/* About 52 px at 1440, as in the preview (the strips above use 44 px). */
.hf-place-meet__icons .hf-icon-row__icon
{
	width: clamp(2.5rem, 0.75rem + 2.8vw, 3.5rem);
	height: clamp(2.5rem, 0.75rem + 2.8vw, 3.5rem);
}

.hf-place-meet__media
{
	position: relative;
	width: min(100% - 2 * var(--hf-gutter), var(--hf-container-max));
	margin: var(--hf-space-l) auto 0;
	overflow: hidden;
	border-radius: var(--hf-radius-s);
	background: var(--hf-color-band);
	aspect-ratio: 3 / 2;
}

/* Out of the flow, so the photo's own height never stretches its box. */
.hf-place-meet__image
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Text on the left, the photo from 56% of the window to its right edge. */
@media (min-width: 56em)
{
	.hf-place-meet
	{
		position: relative;
		display: flex;
		align-items: center;
		/* 434 px at 1440, as the preview's section. */
		min-height: clamp(24rem, 10rem + 19vw, 36rem);
	}

	/* 56% of the container less a gap: always left of the photo, which
	   starts at 56% of the (wider) window. */
	.hf-place-meet__content
	{
		max-width: calc(56% - var(--hf-space-l));
	}

	.hf-place-meet__media
	{
		position: absolute;
		top: var(--hf-space-l);
		right: 0;
		bottom: var(--hf-space-l);
		left: 56%;
		width: auto;
		margin: 0;
		border-radius: var(--hf-radius-s) 0 0 var(--hf-radius-s);
		aspect-ratio: auto;
	}
}

/* Phones, and the narrow column next to the photo below 80em: a line that
   wraps before its typed break would end ragged (as in the sections above). */
@media (max-width: 40em), (min-width: 56em) and (max-width: 79.99em)
{
	.hf-place-meet__text br
	{
		display: none;
	}
}