/*
 * Always full-bleed, regardless of any core alignment class — consistent
 * with the other section blocks. Defaults to white; editable via the
 * block's own "Background color" panel (supports.color.background in
 * block.json) — picking any theme.json palette color there overrides this
 * via WordPress's own inline style, which always wins over this external
 * stylesheet rule.
 *
 * Heading color (#002547) is the design's ink/navy "text-primary" — not yet
 * part of theme.json's palette (see square-card/style.css). Hardcoded here
 * for this first version.
 */
.wp-block-andrei-saguna-gallery-section {
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--4);
	background-color: var(--wp--preset--color--surface-strong);
}

.wp-block-andrei-saguna-gallery-section__row {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--12);
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

.wp-block-andrei-saguna-gallery-section__header {
	display: flex;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--6);
	width: 100%;
}

h2.wp-block-andrei-saguna-gallery-section__heading {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	font-family: var(--wp--preset--font-family--ivypresto-headline);
	font-size: var(--wp--preset--font-size--h-1);
	line-height: 1.1;
	color: #002547;
}

.wp-block-andrei-saguna-gallery-section__header-text {
	flex: 0 0 424px;
	max-width: 424px;
}

p.wp-block-andrei-saguna-gallery-section__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--body-base);
	line-height: 1.5;
	color: var(--wp--preset--color--neutral-700);
}

/*
 * Desktop: a single 6-column grid, not two separate rows — the top 3
 * photos each span 2 columns (so they land as 3 equal squares), the bottom
 * 2 each span 3 columns (so they land as 2 equal wide photos), and both
 * rows line up to the same overall width automatically. Row heights come
 * from each photo's own aspect-ratio below rather than a fixed px height,
 * so the grid stays responsive instead of the source design's fixed
 * 424px/368px row heights.
 */
.wp-block-andrei-saguna-gallery-section__images {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--6);
}

.wp-block-andrei-saguna-gallery-section__image {
	grid-column: span 2;
	aspect-ratio: 1 / 1;
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
	background-color: var(--wp--preset--color--neutral-200);
}

/*
 * Bottom row (photos 4 and 5): wider aspect ratio than the top row's
 * squares, taken directly from the Figma design — same corner radius as
 * every other photo (--wp--custom--radius--md), by request.
 */
.wp-block-andrei-saguna-gallery-section__image:nth-child(4),
.wp-block-andrei-saguna-gallery-section__image:nth-child(5) {
	grid-column: span 3;
	aspect-ratio: 16 / 9;
}

.wp-block-andrei-saguna-gallery-section__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wp-block-andrei-saguna-gallery-section__image-placeholder {
	width: 100%;
	height: 100%;
	background-color: var(--wp--preset--color--neutral-200);
}

@media (max-width: 767px) {
	.wp-block-andrei-saguna-gallery-section__header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--4);
	}

	.wp-block-andrei-saguna-gallery-section__header-text {
		flex: 1 1 100%;
		max-width: 100%;
	}

	/*
	 * The section's own horizontal padding would otherwise cap how far the
	 * slider can scroll, same reasoning as Pași and Testimoniale: the
	 * section drops its own horizontal padding so the slider can scroll
	 * photos flush to the true screen edges, and __row/__images each take
	 * over that inset as their own padding instead.
	 */
	.wp-block-andrei-saguna-gallery-section {
		overflow: hidden;
		padding-left: 0;
		padding-right: 0;
	}

	.wp-block-andrei-saguna-gallery-section__row {
		padding-left: var(--wp--preset--spacing--4);
		padding-right: var(--wp--preset--spacing--4);
		gap: var(--wp--preset--spacing--8);
	}

	/*
	 * The 3+2 grid becomes a single-row horizontal slider — same "1 photo +
	 * ~20% of the next" technique as Pași and Testimoniale (see
	 * steps-section/style.css for the full scroll-padding explanation).
	 */
	.wp-block-andrei-saguna-gallery-section__images {
		display: flex;
		gap: var(--wp--preset--spacing--4);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin-left: calc(-1 * var(--wp--preset--spacing--4));
		margin-right: calc(-1 * var(--wp--preset--spacing--4));
		padding-left: var(--wp--preset--spacing--4);
		padding-right: var(--wp--preset--spacing--4);
		scroll-padding-left: var(--wp--preset--spacing--4);
		scroll-padding-right: var(--wp--preset--spacing--4);
		scrollbar-width: none;
		touch-action: pan-y;
		cursor: grab;
	}

	.wp-block-andrei-saguna-gallery-section__images::-webkit-scrollbar {
		display: none;
	}

	.wp-block-andrei-saguna-gallery-section__images.is-dragging {
		cursor: grabbing;
		scroll-behavior: auto;
		scroll-snap-type: none;
		user-select: none;
	}

	/*
	 * Every slide gets the same fixed proportions on mobile, overriding the
	 * desktop grid-column/aspect-ratio split between the "square" and
	 * "wide" slots above — as a single-row slider there's no separate
	 * top/bottom row left to distinguish, so all 5 photos read as one
	 * consistent set of slides instead of jumping between two shapes.
	 * Corner radius stays --wp--custom--radius--md throughout, so no
	 * override needed here.
	 */
	.wp-block-andrei-saguna-gallery-section__image,
	.wp-block-andrei-saguna-gallery-section__image:nth-child(4),
	.wp-block-andrei-saguna-gallery-section__image:nth-child(5) {
		grid-column: unset;
		flex: 0 0 80%;
		aspect-ratio: 4 / 3;
		scroll-snap-align: start;
	}
}