/**
 * Gallery (blocks/gallery).
 *   carousel — Figma 171:882 (Home): heading left, 44px round arrows right, 400px photos
 *              40 apart. carousel.js appends .kc-carousel__nav into .kc-carousel.
 *   grid     — Figma 171:834 (About): heading + intro left, photos 3 across. Its 390 ×
 *              420 photos 36 apart are normalised to the carousel's 400 × 409, 40 apart.
 * Both sit on 80px gutters (1280 wide at 1440).
 */

.kc-gallery {
	--kc-gallery-top: clamp( 3.5rem, 5.739vw, 5.165rem );
	--kc-gallery-bottom: clamp( 2.5rem, 3.889vw, 3.5rem );

	padding-block: var( --kc-gallery-top ) var( --kc-gallery-bottom );
}

.kc-gallery.has-global-padding {
	padding-inline: min( var( --kc-gutter-wide ), var( --kc-gutter ) );
}

/* Spacing (Figma 1440, Home's values on every page): 82.6 above the content, 56
   below it to the next wave's crest. A wave rising into the bottom of this band (the
   next section's top wave, or the footer's after the last section) or hanging into its
   top (the previous section's bottom wave) adds its own height. */
.kc-gallery:not( .kc-wave-bottom ):is( :has( + .kc-wave-top ), :last-child ) {
	padding-bottom: calc( var( --kc-gallery-bottom ) + var( --kc-wave-h ) );
}

.kc-wave-bottom + .kc-gallery {
	padding-top: calc( var( --kc-gallery-top ) + var( --kc-wave-h ) );
}

.kc-gallery .kc-gallery__head > * {
	margin-block: 0;
}

.kc-gallery .kc-gallery__heading {
	font-size: clamp( 2rem, 3.334vw, 3rem );
	line-height: 1;
}

.kc-gallery .kc-gallery__intro {
	margin-top: 0.75rem;
	font-size: 1.125rem;
	line-height: 1.556;
}

/* Text on the dark purple band (About). */
.kc-gallery.has-kc-dark-purple-background-color {
	color: var( --kc-white );
}

.kc-gallery .kc-gallery__item {
	margin: 0;
}

.kc-gallery .kc-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: var( --kc-radius-card );
	object-fit: cover;
}

/* -------------------------------------------------------------- grid ---- */

.kc-gallery .kc-gallery__grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 2.5rem;
	margin-top: 2rem;
}

.kc-gallery--grid .kc-gallery__item {
	aspect-ratio: 400 / 409.27;
}

/* ---------------------------------------------------------- carousel ---- */

.kc-gallery .kc-gallery__carousel {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	align-items: end;
	gap: clamp( 2rem, 3.75vw, 3.375rem ) 1.5rem;
}

.kc-gallery .kc-gallery__carousel > * {
	margin: 0;
}

.kc-gallery .kc-gallery__track {
	grid-column: 1 / -1;
	grid-row: 2;
	gap: 2.5rem;
	/* A grid item would otherwise grow to fit every slide and never scroll. */
	min-width: 0;
}

.kc-gallery .kc-carousel__nav {
	display: flex;
	grid-column: 2;
	grid-row: 1;
	gap: 0.5rem;
}

.kc-gallery .kc-carousel__nav[hidden] {
	display: none;
}

.kc-gallery .kc-carousel__button {
	width: 2.75rem;
	height: 2.75rem;
	border-width: 1px;
}

.kc-gallery--carousel .kc-gallery__item {
	width: calc( ( 100% - 5rem ) / 3 );
	aspect-ratio: 400 / 409.27;
}

@media ( max-width: 1024px ) {
	.kc-gallery .kc-gallery__grid {
		gap: 1.5rem;
	}

	.kc-gallery .kc-gallery__track {
		gap: 1.5rem;
	}

	.kc-gallery--carousel .kc-gallery__item {
		width: calc( ( 100% - 1.5rem ) / 2 );
	}
}

@media ( max-width: 599px ) {
	.kc-gallery .kc-gallery__grid {
		grid-template-columns: minmax( 0, 1fr );
		gap: 1rem;
	}

	.kc-gallery .kc-gallery__track {
		gap: 1rem;
	}

	.kc-gallery--carousel .kc-gallery__item {
		width: 85%;
	}
}