/* ============================================
   Portal Items block (photo tiles)
   ============================================ */

.portal-items {
	/* Overridden inline per block instance (2–4). */
	--portal-items-columns: 4;
	--portal-items-gap: 1.5rem;
	--portal-items-min: 220px;
	/* Default tile drop shadow; overridable per instance. */
	--portal-items-shadow: 0 2px 8px color-mix(in srgb, var(--wp--preset--color--arch-black) 25%, transparent);

	display: grid;
	/*
	 * Each track is at least an even fraction of the row, but never narrower than
	 * --portal-items-min — so the grid caps at --portal-items-columns when there's
	 * room and wraps to fewer columns as the *container* narrows, without media
	 * queries. auto-fill (not auto-fit) keeps a short final row at tile width
	 * instead of stretching it across the grid.
	 */
	grid-template-columns: repeat(
		auto-fill,
		minmax(
			min(
				100%,
				max(
					var(--portal-items-min),
					(100% - (var(--portal-items-columns) - 1) * var(--portal-items-gap)) / var(--portal-items-columns)
				)
			),
			1fr
		)
	);
	gap: var(--portal-items-gap);
	max-width: 1200px !important;
	margin-inline: auto !important;
}

.portal-items a:hover {
	text-decoration: none;
}

.portal-items__item {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var(--wp--preset--color--arch-black);
	text-decoration: none;
	box-shadow: var(--portal-items-shadow);
}

.portal-items__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.portal-items__item:hover .portal-items__image,
.portal-items__item:focus-visible .portal-items__image {
	transform: scale(1.1);
}

/* Dark wash keeps the white label at AA contrast over any photo. */
.portal-items__overlay {
	position: absolute;
	inset: 0;
	background-color: color-mix(in srgb, var(--wp--preset--color--arch-black) 55%, transparent);
}

/* Thin white keyline inset from the tile edge. */
.portal-items__frame {
	position: absolute;
	inset: 12px;
	border: 1px solid var(--wp--preset--color--chapel-bell-white);
	pointer-events: none;
}

.portal-items__label {
	position: relative;
	padding: 0 1rem;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: clamp(1rem, 1.6vw, 1.4rem);
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none !important;
	color: var(--wp--preset--color--chapel-bell-white) !important;
}

.portal-items__item:focus-visible {
	outline: 2px solid var(--wp--preset--color--chapel-bell-white);
	outline-offset: 3px;
}

@media (max-width: 900px) {
	.portal-items__label {
		font-size: 1.05rem;
	}
}

@media (max-width: 600px) {
	.portal-items {
		--portal-items-gap: 1rem;
		--portal-items-min: 150px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.portal-items__image {
		transition: none;
	}

	.portal-items__item:hover .portal-items__image,
	.portal-items__item:focus-visible .portal-items__image {
		transform: none;
	}
}

/* ============================================
   Editor-only affordances
   ============================================ */

/* The "add item" button sits in the grid, so give it a tile's footprint. */
.editor-styles-wrapper .portal-items > .block-list-appender {
	margin: 0;
}

.editor-styles-wrapper .portal-items .block-editor-button-block-appender {
	width: 100%;
	height: 100%;
	min-height: 0;
	aspect-ratio: 1 / 1;
	border: 1px dashed currentColor;
	border-radius: 0;
}

/* Empty tiles would otherwise collapse to an invisible target. */
.editor-styles-wrapper .portal-items__item {
	cursor: default;
}

.editor-styles-wrapper .portal-items__label {
	min-width: 2em;
}