/**
 * Editorial photo expansion with composition-safe portfolio sequences.
 */

.liza-photo-frame {
	margin: 0;
	overflow: hidden;
}

.liza-photo-frame img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

.liza-photo-frame--landscape img {
	aspect-ratio: 3 / 2;
}

.liza-photo-frame--portrait img {
	aspect-ratio: 4 / 5;
}

.liza-photo-frame--cinematic img {
	aspect-ratio: 16 / 9;
}

.liza-portfolio-sequence,
.liza-home-photo-strip,
.liza-experience-story,
.liza-service-gallery {
	margin-block-start: clamp(2.25rem, 5vw, 5.5rem);
}

.liza-portfolio-sequence > * + *,
.liza-home-photo-strip > * + *,
.liza-experience-story > * + *,
.liza-service-gallery > * + * {
	margin-block-start: clamp(1rem, 2.4vw, 2rem);
}

.liza-portfolio-triptych,
.liza-portfolio-duet {
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
}

/*
 * A portrait beside two stacked landscapes creates a balanced rectangle.
 * Keeping the three images in one horizontal row leaves an artificial void
 * under the landscapes because the portrait controls the row height.
 */
.liza-portfolio-sequence .liza-portfolio-triptych--portrait-lead {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, auto);
	align-items: start;
}

.liza-portfolio-triptych--portrait-lead > .wp-block-column:first-child {
	grid-row: 1 / span 2;
}

.liza-portfolio-sequence .wp-block-image,
.liza-home-photo-strip .wp-block-image,
.liza-experience-story .wp-block-image,
.liza-service-gallery .wp-block-image {
	margin-block: 0;
}

/*
 * A portfolio must show the photographer's framing, not manufacture a new one.
 * These overrides are deliberately limited to the expanded sequences so the
 * already-approved cover and service compositions keep their existing rhythm.
 */
.liza-portfolio-sequence > * + * {
	margin-block-start: clamp(1.5rem, 3vw, 3rem) !important;
}

.liza-portfolio-gallery > * + * {
	margin-block-start: clamp(1.5rem, 3vw, 3rem) !important;
}

.liza-portfolio-sequence .wp-block-columns {
	align-items: flex-start;
	column-gap: clamp(1rem, 2vw, 2rem) !important;
	row-gap: clamp(1.25rem, 2.5vw, 2.5rem) !important;
}

.liza-portfolio-sequence .wp-block-column {
	align-self: flex-start;
}

.liza-portfolio-gallery .liza-photo-frame {
	aspect-ratio: auto !important;
}

.liza-portfolio-gallery .liza-photo-frame img {
	height: auto !important;
	object-fit: contain;
}

/* Explicit geometry survives Chrome's size containment for lazy images. */
.liza-portfolio-gallery .liza-photo-frame img[width="1536"][height="1024"] {
	aspect-ratio: 3 / 2 !important;
}

.liza-portfolio-gallery .liza-photo-frame img[width="1024"][height="1536"] {
	aspect-ratio: 2 / 3 !important;
}

.liza-portfolio-gallery .liza-photo-frame img[width="1010"][height="1536"] {
	aspect-ratio: 505 / 768 !important;
}

.liza-portfolio-sequence .liza-portfolio-single-portrait {
	width: min(46rem, 75vw);
	margin-inline: auto;
}

.liza-service-gallery {
	margin-block-start: 0;
}

@media (max-width: 781px) {
	.liza-portfolio-sequence,
	.liza-home-photo-strip,
	.liza-experience-story {
		margin-block-start: 2.5rem;
	}

	.liza-portfolio-triptych,
	.liza-portfolio-duet {
		gap: 1rem;
	}

	.liza-portfolio-sequence .liza-portfolio-triptych--portrait-lead {
		display: flex !important;
	}

	.liza-portfolio-sequence > * + * {
		margin-block-start: 1.5rem !important;
	}

	.liza-portfolio-gallery > * + * {
		margin-block-start: 1.5rem !important;
	}

	.liza-portfolio-sequence .liza-portfolio-single-portrait {
		width: min(100%, 32rem);
	}

	.liza-portfolio-triptych .liza-photo-frame--portrait,
	.liza-portfolio-duet .liza-photo-frame--landscape,
	.liza-service-gallery .liza-photo-frame--landscape {
		aspect-ratio: 4 / 5;
	}

	.liza-portfolio-gallery .liza-photo-frame {
		aspect-ratio: auto !important;
	}
}