/**
 * SCT Réalisations — cards grid.
 *
 * Loaded only on pages whose content contains [sct_realisations_grid].
 * Every selector is scoped to the component.
 */

/* ==========================================================================
   Tokens
   ========================================================================== */

.sct-realisations-grid {
	--sct-gap: clamp(16px, 2vw, 32px);

	/* Card-relative (cqi) values resolve against each card. */
	--sct-pad: clamp(20px, 5.5cqi, 36px);

	--sct-ink: 10 12 16;
	/* Night blue for the veils laid over photographs (as in services.css). */
	--sct-overlay: 8 19 42;
	--sct-focus: #203d85;

	--sct-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--sct-duration-slow: 1100ms;
	--sct-duration: 600ms;
	--sct-duration-fast: 360ms;
}

/* ==========================================================================
   Grid
   One column up to 980px (Divi tablet breakpoint), two above. Keep in sync
   with the image `sizes` attribute in templates/card.php.
   ========================================================================== */

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

@media (min-width: 981px) {
	/* Four tracks with two per card let a lone last card sit centred at the
	   exact width of the others. */
	.sct-realisations-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.sct-realisations-grid > .sct-realisation-card {
		grid-column: span 2;
	}

	.sct-realisations-grid > .sct-realisation-card:last-child:nth-child(odd) {
		grid-column: 2 / span 2;
	}
}

/* ==========================================================================
   Card surface
   ========================================================================== */

.sct-realisations-grid .sct-realisation-card {
	container-type: inline-size;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.sct-realisations-grid .sct-realisation-card__link {
	position: relative;
	display: grid;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(160deg, #24272d, #121418);
	box-shadow: 0 24px 48px -32px rgb(var(--sct-ink) / 0.55);
	color: #fff;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

/* 16:10 minimum height. The overlay shares this grid cell, so a card can grow
   when its visible text needs more room instead of clipping it. */
.sct-realisations-grid .sct-realisation-card__link::before {
	content: "";
	grid-area: 1 / 1;
	padding-top: 62.5%;
}

/* Hairline edge drawn above the photograph. */
.sct-realisations-grid .sct-realisation-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
	pointer-events: none;
}

/* ==========================================================================
   Photograph and legibility layer
   ========================================================================== */

.sct-realisations-grid .sct-realisation-card__media {
	position: absolute;
	inset: 0;
	margin: 0;
}

.sct-realisations-grid .sct-realisation-card__media img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

/* Light veil at the top for the eyebrow and arrow, eased density at the
   bottom for the text, and a faint lean towards the text side. */
.sct-realisations-grid .sct-realisation-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgb(var(--sct-overlay) / 0.32) 0%, rgb(var(--sct-overlay) / 0.12) 14%, rgb(var(--sct-overlay) / 0) 28%),
		linear-gradient(to top, rgb(var(--sct-overlay) / 0.84) 0%, rgb(var(--sct-overlay) / 0.62) 17%, rgb(var(--sct-overlay) / 0.34) 35%, rgb(var(--sct-overlay) / 0.12) 53%, rgb(var(--sct-overlay) / 0.03) 66%, rgb(var(--sct-overlay) / 0) 76%),
		linear-gradient(to right, rgb(var(--sct-overlay) / 0.14) 0%, rgb(var(--sct-overlay) / 0) 60%);
}

/* ==========================================================================
   Overlay
   ========================================================================== */

.sct-realisations-grid .sct-realisation-card__overlay {
	position: relative;
	z-index: 1;
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--sct-pad);
	padding: var(--sct-pad);
}

/* Extra depth for the taller text block when the description is shown.
   Always on in the static layout; faded in on interaction otherwise. */
.sct-realisations-grid .sct-realisation-card__overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgb(var(--sct-overlay) / 0.42) 0%, rgb(var(--sct-overlay) / 0.28) 36%, rgb(var(--sct-overlay) / 0.08) 62%, rgb(var(--sct-overlay) / 0) 82%);
}

/* Top row: eyebrow on the left, arrow always on the right. */
.sct-realisations-grid .sct-realisation-card__top {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.sct-realisations-grid .sct-realisation-card__eyebrow {
	min-width: 0;
	margin: 0;
	padding: 0.6em 1em 0.56em;
	border: 1px solid rgb(255 255 255 / 0.14);
	background: rgb(var(--sct-ink) / 0.34);
	color: rgb(255 255 255 / 0.9);
	font-size: clamp(0.6875rem, 2.1cqi, 0.8125rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Hairline arrow drawn in CSS. The ↗ glyph stays in the markup as an
   unstyled fallback and is hidden here (font-size: 0). */
.sct-realisations-grid .sct-realisation-card__arrow {
	--sct-arrow: clamp(14px, 3.2cqi, 18px);
	position: relative;
	flex: none;
	width: var(--sct-arrow);
	height: var(--sct-arrow);
	margin-left: auto;
	color: rgb(255 255 255 / 0.88);
	font-size: 0;
	line-height: 0;
}

/* Shaft along the square's diagonal, stopping just inside the head. */
.sct-realisations-grid .sct-realisation-card__arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(var(--sct-arrow) * 1.36);
	height: 1.5px;
	background: currentColor;
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* Head: two strokes meeting at the top-right corner. */
.sct-realisations-grid .sct-realisation-card__arrow::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 58%;
	height: 58%;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
}

/* ==========================================================================
   Text
   Explicit rows keep the description in the last row even without tagline.
   ========================================================================== */

.sct-realisations-grid .sct-realisation-card__content {
	display: grid;
	max-width: 40rem;
}

.sct-realisations-grid .sct-realisation-card__title {
	grid-row: 1;
	margin: 0;
	padding: 0;
	color: #fff;
	font-family: inherit;
	font-size: clamp(1.375rem, 5.4cqi, 2.25rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.012em;
	text-transform: none;
	text-wrap: balance;
}

.sct-realisations-grid .sct-realisation-card__tagline {
	grid-row: 2;
	margin: 0.55em 0 0;
	padding: 0;
	color: rgb(255 255 255 / 0.86);
	font-size: clamp(1rem, 2.9cqi, 1.1875rem);
	font-weight: 500;
	line-height: 1.35;
	text-wrap: pretty;
}

.sct-realisations-grid .sct-realisation-card__description {
	grid-row: 3;
	max-width: 34em;
	margin: 0.9rem 0 0;
	padding: 0;
	color: rgb(255 255 255 / 0.78);
	font-size: clamp(0.9375rem, 2.5cqi, 1rem);
	font-weight: 400;
	line-height: 1.55;
	text-wrap: pretty;
}

/* ==========================================================================
   Keyboard focus
   ========================================================================== */

.sct-realisations-grid .sct-realisation-card__link:focus-visible {
	outline: 2px solid var(--sct-focus);
	outline-offset: 4px;
}

.sct-realisations-grid .sct-realisation-card__link:focus-visible::after {
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.7);
}

/* ==========================================================================
   Pointer feedback without motion
   ========================================================================== */

@media (hover: hover) {
	.sct-realisations-grid .sct-realisation-card__link:is(:hover, :focus-visible) .sct-realisation-card__arrow {
		color: #fff;
	}
}

/* ==========================================================================
   Motion and hover reveal
   Only for precise pointers with motion allowed. Touch devices and reduced
   motion keep the static layout above, with the description visible.
   ========================================================================== */

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.sct-realisations-grid .sct-realisation-card__media img {
		transition: transform var(--sct-duration-slow) var(--sct-ease);
	}

	.sct-realisations-grid .sct-realisation-card__overlay::before {
		opacity: 0;
		transition: opacity var(--sct-duration) var(--sct-ease);
	}

	.sct-realisations-grid .sct-realisation-card__arrow {
		transition:
			transform var(--sct-duration-fast) var(--sct-ease),
			color var(--sct-duration-fast) var(--sct-ease);
	}

	/* The description row collapses to zero and opens to its own height. */
	.sct-realisations-grid .sct-realisation-card__content {
		grid-template-rows: auto auto minmax(0, 0fr);
		transition: grid-template-rows var(--sct-duration) var(--sct-ease);
	}

	/* Clamped so a long description cannot grow the card on hover. */
	.sct-realisations-grid .sct-realisation-card__description {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		opacity: 0;
		transform: translateY(0.5rem);
		transition:
			opacity var(--sct-duration-fast) var(--sct-ease),
			transform var(--sct-duration) var(--sct-ease);
	}

	.sct-realisations-grid .sct-realisation-card__link:is(:hover, :focus-visible) img {
		transform: scale(1.03);
	}

	.sct-realisations-grid .sct-realisation-card__link:is(:hover, :focus-visible) .sct-realisation-card__overlay::before {
		opacity: 1;
	}

	.sct-realisations-grid .sct-realisation-card__link:is(:hover, :focus-visible) .sct-realisation-card__arrow {
		transform: translate(3px, -3px);
	}

	.sct-realisations-grid .sct-realisation-card__link:is(:hover, :focus-visible) .sct-realisation-card__content {
		grid-template-rows: auto auto minmax(0, 1fr);
	}

	.sct-realisations-grid .sct-realisation-card__link:is(:hover, :focus-visible) .sct-realisation-card__description {
		opacity: 1;
		transform: none;
		transition-delay: 80ms;
	}
}