/*
 * Miejsce „Przy wspólnym stole” (template-parts/place/table.php). From the
 * preview docs/preview/miejsce1_2.png: a warm band (#f4ece4 in the preview,
 * the nearest token is band-strong), on the left a heading between two
 * short lines, a larger dark line of text and a smaller note; on the right
 * a photo from the middle of the window to its right edge, with a strip of
 * the band above and below it. Below 56em the photo stands under the text,
 * within the page margins.
 */

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

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

/* About a fifth larger than the card texts above it (--hf-text-l), as in the preview. */
.hf-place-table__text
{
	margin: var(--hf-space-m) 0 0;
	color: var(--hf-color-heading);
	font-size: var(--hf-text-xl);
	line-height: 1.4;
	text-wrap: pretty;
}

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

/* Under the note, a little set off (user, 2026-10-28: „przenieś do następnej
   linii i ciut wyróżnij”): the warm brown of the eyebrows, in italics.
   Contrast on the band: 9.42 : 1. */
.hf-place-table__highlight
{
	max-width: 28em;
	margin: var(--hf-space-xs) 0 0;
	color: var(--hf-color-eyebrow);
	font-size: var(--hf-text-l);
	font-style: italic;
	line-height: 1.5;
	text-wrap: pretty;
}

.hf-place-table__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;
}

/* The cross-fading photos (component-fade-slider.css) fill this box. */
.hf-place-table__media .hf-fade
{
	position: absolute;
	inset: 0;
}

/* Text on the left, the photo from the middle to the window's right edge. */
@media (min-width: 56em)
{
	.hf-place-table
	{
		position: relative;
		display: flex;
		align-items: center;
		/* 440 px at 1440, as the preview's band (photo about 1.9 : 1 there). */
		min-height: clamp(24rem, 10rem + 19.5vw, 37rem);
	}

	/* Half the container less a gap, so the text never reaches the photo. */
	.hf-place-table__content
	{
		max-width: calc(50% - var(--hf-space-l));
	}

	.hf-place-table__media
	{
		position: absolute;
		top: var(--hf-space-l);
		right: 0;
		bottom: var(--hf-space-l);
		left: 50%;
		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-table__text br
	{
		display: none;
	}
}