/* =========================================================
   Reunionary — Class Reunions pattern pack
   Scope: everything below is namespaced to .reunionary-class-hero
   Nothing here may affect other patterns or global styles.
   ========================================================= */

.reunionary-class-hero__media {
	position: relative;
	/* Reserves room for the portrait cards that hang below the photo. */
	margin-bottom: var(--wp--preset--spacing--x-large);
}

.reunionary-class-hero__media > .wp-block-image {
	margin: 0;
}

.reunionary-class-hero__media > .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Oversized translucent graduation year */
.reunionary-class-hero__year.reunionary-class-hero__year {
	position: absolute;
	top: -0.38em;
	right: 0.05em;
	z-index: 2;
	margin: 0;
	font-size: clamp(4rem, 10vw, 8.5rem);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.04em;
	opacity: 0.82;
	pointer-events: none;
	text-shadow: 0 2px 18px rgba(2, 27, 51, 0.35);
}

/* Overlapping yearbook portrait cards */
.reunionary-class-hero__portraits {
	position: absolute;
	left: var(--wp--preset--spacing--medium);
	bottom: calc(var(--wp--preset--spacing--large) * -1);
	z-index: 3;
	display: flex;
	align-items: flex-end;
	gap: 0;
}

.reunionary-class-hero__portraits .wp-block-image {
	margin: 0;
	width: clamp(104px, 13vw, 146px);
}

.reunionary-class-hero__portraits .wp-block-image + .wp-block-image {
	margin-left: -30px;
}

/* Explicit height rather than aspect-ratio: Safari narrows the width
   to preserve the ratio and leaves a gap. */
.reunionary-class-hero__portraits .wp-block-image img {
	display: block;
	width: 100%;
	height: clamp(130px, 16vw, 186px);
	object-fit: cover;
	border-radius: 14px;
	border: 4px solid var(--wp--preset--color--white);
	box-shadow: 0 14px 30px rgba(2, 27, 51, 0.22);
}

/* -----------------------------
   Tablet
------------------------------ */
@media (max-width: 782px) {

	.reunionary-class-hero__media {
		margin-bottom: var(--wp--preset--spacing--large);
	}

	.reunionary-class-hero__year.reunionary-class-hero__year {
		font-size: clamp(3.25rem, 12vw, 6rem);
		top: -0.3em;
	}

	.reunionary-class-hero__portraits {
		left: var(--wp--preset--spacing--small);
		bottom: calc(var(--wp--preset--spacing--medium) * -1);
	}
}

/* -----------------------------
   Mobile — stack instead of overlap
------------------------------ */
@media (max-width: 480px) {

	.reunionary-class-hero__media {
		margin-bottom: 0;
	}

	.reunionary-class-hero__year.reunionary-class-hero__year {
		font-size: clamp(2.75rem, 16vw, 4.25rem);
		top: -0.18em;
	}

	.reunionary-class-hero__portraits {
		position: static;
		margin-top: var(--wp--preset--spacing--small);
	}

	.reunionary-class-hero__portraits .wp-block-image {
		width: clamp(96px, 30vw, 128px);
	}
}