/*
 * Miejsce „Przestrzeń do wspólnej praktyki” (template-parts/place/hall.php).
 * From the preview docs/preview/miejsce1_1.png: text, icons and the link
 * on the left (3 parts), photos on the right (4 parts). The hall photo is
 * 4:3; the garden photo, in a light frame, lies over its lower left corner
 * and reaches past it to the left and below by 5 % of the photo area.
 * Below 56em the photos go under the text in the same arrangement.
 */

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

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

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

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

.hf-place-hall__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-hall__items
{
	margin-top: var(--hf-space-l);
}

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

/* Percentages of padding follow the width, so the overhang keeps its
   proportion at every size. */
.hf-place-hall__media
{
	position: relative;
	padding: 0 0 5% 5%;
}

.hf-place-hall__photo
{
	position: relative;
	overflow: hidden;
	border-radius: var(--hf-radius-s);
	background: var(--hf-color-band);
}

.hf-place-hall__photo--main
{
	aspect-ratio: 4 / 3;
}

.hf-place-hall__photo--small
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 46%;
	border: 4px solid var(--hf-color-surface);
	box-shadow: 0 10px 28px color-mix(in srgb, var(--hf-color-heading) 16%, transparent);
	aspect-ratio: 5 / 4;
}

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

@media (min-width: 56em)
{
	.hf-place-hall__inner
	{
		grid-template-columns: minmax(0, 3fr) minmax(0, 4fr);
		align-items: center;
		column-gap: var(--hf-space-m);
	}
}

/* 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-hall__text br
	{
		display: none;
	}
}

/* The garden photo grows gently under the mouse and goes back the same way
   (user, 2026-11-04). Only with a mouse and without reduced motion; on touch
   it stays as it is. transform, not the scale property: the entrance
   (site-motion.css) animates scale and translate, so the two never meet.
   The ease is the entrance one, with a fallback for pages without it. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference)
{
	.hf-place-hall__photo--small
	{
		transition: transform 0.8s var(--hf-motion-ease, cubic-bezier(0.25, 1, 0.5, 1));
	}

	.hf-place-hall__photo--small:hover
	{
		transform: scale(1.08);
	}
}