/**
 * SCT Réalisations — Single Réalisation components.
 *
 * Loaded on sct_realisation singles only. Every selector is scoped to the
 * component; Divi keeps the section, row and outer spacing.
 */

/* ==========================================================================
   Featured gallery
   One column up to 980px (Divi tablet breakpoint), 12 columns above. Keep in
   sync with the image `sizes` in includes/single-shortcodes.php.
   ========================================================================== */

.sct-featured-gallery {
	--sct-gallery-gap: clamp(10px, 1.2vw, 20px);

	/* cqi units below resolve against the gallery width. */
	container-type: inline-size;
}

.sct-featured-gallery__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sct-gallery-gap);
}

/* The frame sets the geometry; the photograph only fills it. */
.sct-featured-gallery__item {
	position: relative;
	overflow: hidden;
	margin: 0;
	background: #e5e9f0;
}

.sct-featured-gallery__item img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

/* One column: landscape frames stay 16:10; portrait and square frames keep
   their character but never grow taller than most of the screen. */
.sct-featured-gallery__item--12,
.sct-featured-gallery__item--7 {
	aspect-ratio: 16 / 10;
}

.sct-featured-gallery__item--5 {
	height: min(125cqi, 80vh);
}

.sct-featured-gallery__item--4 {
	height: min(100cqi, 80vh);
}

@media (min-width: 981px) {
	.sct-featured-gallery__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.sct-featured-gallery__item--12 {
		grid-column: span 12;
	}

	/* No ratio of its own: it stretches to the height set by its 4:5 neighbour,
	   so 7/5 and 5/7 rows always share one height. */
	.sct-featured-gallery__item--7 {
		grid-column: span 7;
		aspect-ratio: auto;
	}

	.sct-featured-gallery__item--5 {
		grid-column: span 5;
		height: auto;
		aspect-ratio: 4 / 5;
	}

	.sct-featured-gallery__item--4 {
		grid-column: span 4;
		height: auto;
		aspect-ratio: 1 / 1;
	}
}

/* ==========================================================================
   Main gallery
   Runs of photographs separated by Before / After comparisons, planned in
   rows from each photograph's orientation (includes/single-shortcodes.php).
   Each frame matches the photograph's family, so object-fit only trims
   lightly. One column up to 980px, 12 columns above; keep in sync with `sizes`.
   ========================================================================== */

.sct-gallery {
	--sct-gallery-gap: clamp(10px, 1.2vw, 20px);

	/* cqi units below resolve against the gallery width. */
	container-type: inline-size;
	display: grid;
	gap: var(--sct-gallery-gap);
}

.sct-gallery__run,
.sct-gallery__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sct-gallery-gap);
}

.sct-gallery__item {
	position: relative;
	overflow: hidden;
	margin: 0;
	background: #e5e9f0;
}

.sct-gallery__item img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

/* Frames by orientation. Portrait and square heights are capped so a single
   column never shows a photograph taller than most of the screen. */
.sct-gallery__item--panorama {
	aspect-ratio: 2.2 / 1;
}

.sct-gallery__item--landscape {
	aspect-ratio: 16 / 10;
}

.sct-gallery__item--square {
	height: min(100cqi, 80vh);
}

.sct-gallery__item--portrait {
	height: min(125cqi, 80vh);
}

@media (min-width: 981px) {
	.sct-gallery__row {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.sct-gallery__item--span-12 {
		grid-column: span 12;
	}

	.sct-gallery__item--span-7 {
		grid-column: span 7;
	}

	.sct-gallery__item--span-6 {
		grid-column: span 6;
	}

	.sct-gallery__item--span-5 {
		grid-column: span 5;
	}

	.sct-gallery__item--span-4 {
		grid-column: span 4;
	}

	/* A lone portrait or square stays centred instead of filling the width. */
	.sct-gallery__item--centered.sct-gallery__item--span-6 {
		grid-column: 4 / span 6;
	}

	.sct-gallery__item--centered.sct-gallery__item--span-8 {
		grid-column: 3 / span 8;
	}

	.sct-gallery__item--square {
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.sct-gallery__item--portrait {
		height: auto;
		aspect-ratio: 4 / 5;
	}

	/* The 7-column partner of a mixed pair takes the height set by the more
	   vertical photograph beside it. */
	.sct-gallery__item--fill {
		height: auto;
		aspect-ratio: auto;
	}
}

/* "Voir plus de photos": belongs to the gallery, centred under the last row.
   Its spacing adds to the gallery gap. */
.sct-gallery__more {
	display: flex;
	justify-content: center;
	margin-top: clamp(8px, 1.5vw, 20px);
}

.sct-gallery__more-button {
	margin: 0;
	padding: 14px 22px;
	border: 0;
	border-radius: 5px;
	background-color: rgb(32, 61, 133);
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

@media (hover: hover) {
	.sct-gallery__more-button:not(:disabled):hover {
		transform: translateY(-1px);
	}
}

.sct-gallery__more-button:disabled {
	cursor: progress;
}

.sct-gallery__more-button:focus:not(:focus-visible) {
	outline: none;
}

.sct-gallery__more-button:focus-visible {
	outline: 2px solid rgb(32, 61, 133);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.sct-gallery__more-button {
		transition: none;
	}

	.sct-gallery__more-button:not(:disabled):hover {
		transform: none;
	}
}

/* ==========================================================================
   Before / After
   The Before image is clipped over the After image; the divider and the
   native range input share --sct-ba-position (set by single-realisation.js).
   ========================================================================== */

.sct-before-after {
	--sct-ba-handle: 44px;
}

.sct-before-after__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: #e5e9f0;
}

.sct-before-after__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.sct-before-after__image--before {
	clip-path: inset(0 calc(100% - var(--sct-ba-position)) 0 0);
}

.sct-before-after__divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--sct-ba-position);
	width: 2px;
	margin-left: -1px;
	background: #fff;
	box-shadow: 0 0 0 1px rgb(8 19 42 / 0.12);
	pointer-events: none;
}

/* Square grip with two hairline chevrons, in the cards' visual language. */
.sct-before-after__handle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--sct-ba-handle);
	height: var(--sct-ba-handle);
	border: 1px solid rgb(255 255 255 / 0.85);
	background: rgb(8 19 42 / 0.55);
	transform: translate(-50%, -50%);
}

.sct-before-after__handle::before,
.sct-before-after__handle::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 7px;
	height: 7px;
	border-bottom: 1.5px solid #fff;
	border-left: 1.5px solid #fff;
}

.sct-before-after__handle::before {
	left: 11px;
	transform: translateY(-50%) rotate(45deg);
}

.sct-before-after__handle::after {
	right: 11px;
	transform: translateY(-50%) rotate(-135deg);
}

.sct-before-after__label {
	position: absolute;
	top: clamp(12px, 2cqi, 20px);
	padding: 0.55em 0.9em 0.5em;
	background: rgb(8 19 42 / 0.5);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	pointer-events: none;
}

.sct-before-after__label--before {
	left: clamp(12px, 2cqi, 20px);
}

.sct-before-after__label--after {
	right: clamp(12px, 2cqi, 20px);
}

/* Invisible native range over the whole image. It is widened by one handle so
   its thumb centre matches the divider exactly at every value, and the thumb
   sits under the visible grip for touch dragging. */
.sct-before-after__range {
	position: absolute;
	top: 0;
	left: calc(var(--sct-ba-handle) / -2);
	z-index: 1;
	width: calc(100% + var(--sct-ba-handle));
	height: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	opacity: 0;
	cursor: ew-resize;
	-webkit-appearance: none;
	appearance: none;
}

.sct-before-after__range::-webkit-slider-runnable-track {
	height: 100%;
	background: transparent;
}

.sct-before-after__range::-webkit-slider-thumb {
	width: var(--sct-ba-handle);
	height: 100%;
	-webkit-appearance: none;
	appearance: none;
}

.sct-before-after__range::-moz-range-track {
	height: 100%;
	background: transparent;
}

.sct-before-after__range::-moz-range-thumb {
	width: var(--sct-ba-handle);
	height: 100%;
	border: 0;
	background: transparent;
}

/* The input is invisible, so its keyboard focus is shown on the grip. */
.sct-before-after__range:focus-visible ~ .sct-before-after__divider .sct-before-after__handle {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* ==========================================================================
   Lightbox triggers
   The link fills the photograph frame of both galleries without changing it.
   ========================================================================== */

.sct-lightbox-trigger {
	position: absolute;
	inset: 0;
	display: block;
	cursor: zoom-in;
}

.sct-lightbox-trigger:focus:not(:focus-visible) {
	outline: none;
}

/* Drawn inside the frame, which clips anything outside it. */
.sct-lightbox-trigger:focus-visible::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow:
		inset 0 0 0 2px #fff,
		inset 0 0 0 4px #203d85;
	pointer-events: none;
}

/* ==========================================================================
   Lightbox
   One native <dialog> covering the viewport; the photograph is shown whole.
   ========================================================================== */

.sct-lightbox-open {
	overflow: hidden;
}

.sct-lightbox {
	--sct-lightbox-control: 48px;
	--sct-lightbox-edge: clamp(12px, 2vw, 24px);

	width: 100vw;
	max-width: none;
	height: 100vh;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: rgb(5 10 22 / 0.97);
	color: #fff;
}

.sct-lightbox[open] {
	display: grid;
	place-items: center;
}

.sct-lightbox::backdrop {
	background: rgb(5 10 22 / 0.97);
}

/* Room is kept on each side for the controls; the image is never cropped. */
.sct-lightbox__image {
	display: block;
	width: auto;
	max-width: calc(100vw - 2 * (var(--sct-lightbox-control) + 2 * var(--sct-lightbox-edge)));
	height: auto;
	max-height: calc(100dvh - 2 * (var(--sct-lightbox-control) + var(--sct-lightbox-edge)));
	margin: 0;
	object-fit: contain;
}

.sct-lightbox__button {
	position: absolute;
	display: block;
	width: var(--sct-lightbox-control);
	height: var(--sct-lightbox-control);
	margin: 0;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 0.35);
	background: rgb(255 255 255 / 0.04);
	color: #fff;
	cursor: pointer;
}

@media (hover: hover) {
	.sct-lightbox__button:not(:disabled):hover {
		border-color: rgb(255 255 255 / 0.85);
	}
}

.sct-lightbox__button:disabled {
	opacity: 0.25;
	cursor: default;
}

.sct-lightbox__button:focus:not(:focus-visible) {
	outline: none;
}

.sct-lightbox__button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Hairline icons drawn in CSS, as on the cards and the Before / After grip. */
.sct-lightbox__button::before,
.sct-lightbox__button::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
}

.sct-lightbox__close {
	top: var(--sct-lightbox-edge);
	right: var(--sct-lightbox-edge);
}

.sct-lightbox__close::before,
.sct-lightbox__close::after {
	width: 18px;
	height: 1.5px;
	background: currentColor;
}

.sct-lightbox__close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.sct-lightbox__close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.sct-lightbox__prev,
.sct-lightbox__next {
	top: 50%;
	transform: translateY(-50%);
}

.sct-lightbox__prev {
	left: var(--sct-lightbox-edge);
}

.sct-lightbox__next {
	right: var(--sct-lightbox-edge);
}

.sct-lightbox__prev::before,
.sct-lightbox__next::before {
	width: 10px;
	height: 10px;
	border-bottom: 1.5px solid currentColor;
	border-left: 1.5px solid currentColor;
}

.sct-lightbox__prev::before {
	transform: translate(-30%, -50%) rotate(45deg);
}

.sct-lightbox__next::before {
	transform: translate(-70%, -50%) rotate(-135deg);
}

.sct-lightbox__counter {
	position: absolute;
	bottom: var(--sct-lightbox-edge);
	left: 50%;
	margin: 0;
	padding: 0;
	color: rgb(255 255 255 / 0.75);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	line-height: var(--sct-lightbox-control);
	letter-spacing: 0.14em;
	transform: translateX(-50%);
}

/* Narrow screens: the photograph takes the width, the arrows move down to the
   thumb zone on each side of the counter. */
@media (max-width: 980px) {
	.sct-lightbox__image {
		max-width: calc(100vw - 2 * var(--sct-lightbox-edge));
		max-height: calc(100dvh - 2 * (var(--sct-lightbox-control) + 2 * var(--sct-lightbox-edge)));
	}

	.sct-lightbox__prev,
	.sct-lightbox__next {
		top: auto;
		bottom: var(--sct-lightbox-edge);
		transform: none;
	}
}