/*
 * Miejsce „Pokoje na spokojny odpoczynek” (template-parts/place/rooms.php).
 * From the preview docs/preview/miejsce1_1.png: a warm band, the room
 * photos on the left (about 663 × 530 px at 1440; they cross-fade, see
 * component-fade-slider.css), text, facts and the link on the right. The text comes first in the markup, so on phones and tablets the
 * heading leads and the photo follows.
 */

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

.hf-place-rooms__inner
{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--hf-space-l);
}

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

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

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

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

.hf-place-rooms__more
{
	margin: var(--hf-space-l) 0 0;
}

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

/* Photo on the left (6 parts), text on the right (5 parts). */
@media (min-width: 56em)
{
	.hf-place-rooms__inner
	{
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
		align-items: center;
		column-gap: var(--hf-space-xl);
	}

	.hf-place-rooms__media
	{
		grid-row: 1;
		grid-column: 1;
		aspect-ratio: 5 / 4;
	}

	.hf-place-rooms__content
	{
		grid-row: 1;
		grid-column: 2;
	}
}

/* Phones, and the narrow text column beside the photos up to 80em: the
   typed line breaks would leave the text ragged (a wrapped line, then the
   typed break). */
@media (max-width: 40em), (min-width: 56em) and (max-width: 79.99em)
{
	.hf-place-rooms__text br
	{
		display: none;
	}
}