/* Photo gallery: 272×368 portrait tiles, four across at 1280 (two on phones), or one scrolling row,
   optionally beside the heading and text (SAORI "Frame 450"). */

.s-gallery__inner {
	display: grid;
	gap: 32px;
}

.s-gallery__head {
	display: grid;
	gap: 16px;
}

.s-gallery__heading {
}

.s-gallery__text {
	color: var(--c-text-2);
}

.s-gallery__list {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.s-gallery__list--grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
	.s-gallery__list--grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.s-gallery__scroller {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
}

.s-gallery__list--carousel {
	grid-auto-flow: column;
	grid-auto-columns: min(272px, 72%);
}

.s-gallery__list--carousel > li {
	scroll-snap-align: start;
}

.s-gallery__img {
	width: 100%;
	aspect-ratio: 272 / 368;
	object-fit: cover;
}

/* Beside: heading and text in a 368 column, the row of 272 square photos in the 560 beside it
   (242 × 272 on phones, running to the window edge). */
@media (min-width: 768px) {
	.s-gallery__inner--beside {
		grid-template-columns: minmax(0, 368fr) minmax(0, 560fr);
		align-items: start;
		column-gap: clamp(32px, 16.25vw, 208px);
	}

	.s-gallery__inner--beside .s-gallery__img {
		aspect-ratio: 1;
	}
}

.s-gallery__inner--beside .s-gallery__list--carousel {
	grid-auto-columns: 272px;
}

@media (max-width: 767px) {
	.s-gallery__inner--beside .s-gallery__scroller {
		margin-right: calc(-1 * var(--gutter));
	}

	.s-gallery__inner--beside .s-gallery__list--carousel {
		grid-auto-columns: 242px;
	}

	.s-gallery__inner--beside .s-gallery__img {
		aspect-ratio: 242 / 272;
	}
}

/* Caption under the photos (Discover - Social Sector). */
.s-gallery__caption {
	font-family: var(--f-display);
	font-size: var(--t-title-s);
	line-height: var(--lh-title-s);
	font-weight: 500;
	color: var(--c-text-2);
}

/* Grid on wider screens; on phones one photo across the column at a time, the next one peeking in
   at the edge of the screen, with the caption above. */
@media (max-width: 767px) {
	.s-gallery__caption {
		order: -1;
	}

	.s-gallery__list--scroll {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 100%;
		gap: 8px;
		margin-inline: calc(-1 * var(--gutter));
		padding-inline: var(--gutter);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
	}

	.s-gallery__list--scroll > li {
		scroll-snap-align: start;
	}

	.s-gallery__list--scroll .s-gallery__img {
		aspect-ratio: 328 / 368;
	}
}

/* Progress bar and small outlined arrows under the scrolling row (as in the card carousels). */
.s-gallery__controls {
	display: grid;
	gap: 16px;
}

.s-gallery__progress {
	position: relative;
	height: 2px;
	background: var(--c-line-2);
}

.s-gallery__progress span {
	position: absolute;
	inset-block: 0;
	left: calc(var(--pos, 0) * (1 - var(--size, 1)) * 100%);
	width: calc(var(--size, 1) * 100%);
	background: var(--c-muted);
}

.s-gallery__nav {
	display: flex;
	gap: 8px;
}

.s-gallery__button {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--c-line);
	border-radius: 50%;
	background: none;
	color: var(--c-muted);
	transition: color 0.2s, border-color 0.2s;
}

.s-gallery__button .icon {
	width: 21px;
	height: 21px;
	stroke-width: 2;
}

.s-gallery__button--prev .icon {
	transform: rotate(90deg);
}

.s-gallery__button--next .icon {
	transform: rotate(-90deg);
}

.s-gallery__button:not(:disabled):hover {
	border-color: currentColor;
	color: var(--c-text);
}

.s-gallery__button:disabled {
	opacity: 0.5;
	cursor: default;
}