/*
 * Miejsce „Twój pomysł. Nasza przestrzeń.” (template-parts/place/organizers.php).
 * From the preview docs/preview/miejsce1_2.png: a warm band (#f3ede3 in the
 * preview, the nearest token is band-strong); an eyebrow and the heading
 * over two photos side by side (about 6 : 5) on the left, about 62% of the
 * width; on the right a dark line of text, three icons with labels and a
 * full-width button, the column ending level with the photos. Below 80em
 * the text, list and button come under the heading and the photos last
 * (at 1024 px the column was 303 px wide: the button broke into two lines
 * and the column started above the heading).
 */

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

.hf-place-organizers__inner
{
	display: grid;
	gap: var(--hf-space-l);
}

.hf-place-organizers__eyebrow
{
	margin-bottom: var(--hf-space-s);
}

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

/* Dark as in the preview, the size of the card texts above. */
.hf-place-organizers__text
{
	max-width: 32em;
	margin: 0;
	color: var(--hf-color-heading);
	font-size: var(--hf-text-l);
	line-height: 1.5;
	text-wrap: pretty;
}

.hf-place-organizers__list
{
	display: grid;
	gap: var(--hf-space-s);
	margin: var(--hf-space-m) 0 0;
	padding: 0;
	list-style: none;
}

.hf-place-organizers__item
{
	display: flex;
	align-items: center;
	gap: var(--hf-space-m);
	font-size: var(--hf-text-m);
	line-height: 1.4;
}

.hf-place-organizers__icon
{
	flex: none;
	width: clamp(2.25rem, 1.75rem + 1vw, 2.75rem);
	height: clamp(2.25rem, 1.75rem + 1vw, 2.75rem);
	color: var(--hf-color-icon);
}

.hf-place-organizers__action
{
	margin-top: var(--hf-space-l);
}

/* Full width on phones; in the right column too (below), as in the preview. */
@media (max-width: 40em)
{
	.hf-place-organizers__action .hf-button
	{
		width: 100%;
	}
}

.hf-place-organizers__photos
{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--hf-space-s);
}

.hf-place-organizers__photo
{
	position: relative;
	overflow: hidden;
	border-radius: var(--hf-radius-s);
	background: var(--hf-color-band);
	aspect-ratio: 6 / 5;
}

/* Under the text on tablets and narrower computers the photos span the
   whole container: a lower crop keeps them from towering (6 : 5 gave 468 px
   at 1279). */
@media (min-width: 40em) and (max-width: 79.99em)
{
	.hf-place-organizers__photo
	{
		aspect-ratio: 3 / 2;
	}
}

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

/* Two columns: heading and photos on the left; the rest on the right over
   both rows, ending level with the photos (so it may start beside the
   heading, as in the preview). */
@media (min-width: 80em)
{
	.hf-place-organizers__inner
	{
		grid-template-areas:
			"header content"
			"photos content";
		grid-template-columns: minmax(0, 62fr) minmax(0, 33fr);
		column-gap: clamp(2rem, 4vw, 4rem);
		row-gap: var(--hf-space-m);
	}

	.hf-place-organizers__header
	{
		grid-area: header;
	}

	/* At the bottom of its row, so the photos always end level with the column. */
	.hf-place-organizers__photos
	{
		grid-area: photos;
		align-self: end;
	}

	.hf-place-organizers__content
	{
		grid-area: content;
		align-self: end;
	}

	.hf-place-organizers__action .hf-button
	{
		width: 100%;
	}
}