/*
 * The Réalisation tile: cover photograph that turns into its sketch on hover,
 * with the type badge and the project name.
 *
 * Shared component -- the archive grid (terradev/grille-realisations) and the
 * "other réalisations" carousel (terradev/carousel-realisations) both render
 * this markup, so the same project reads the same way wherever it appears.
 */

.tdev-realisation-tile {
	position: relative;
	display: block;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
}

.tdev-realisation-tile[hidden] {
	display: none;
}

.tdev-realisation-tile__media {
	display: block;
	position: relative;
}

.tdev-realisation-tile__photo,
.tdev-realisation-tile__sketch {
	display: block;
	width: 100%;
	height: auto;
}

/* The sketch sits on top and fades in, so the two covers -- framed
   identically -- read as one drawing itself. */
.tdev-realisation-tile__sketch {
	position: absolute;
	inset: 0;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.35s ease;
}

.tdev-realisation-tile:hover .tdev-realisation-tile__sketch,
.tdev-realisation-tile:focus-visible .tdev-realisation-tile__sketch {
	opacity: 1;
}

/* Same trick as the buttons: the terracotta is the element's own background,
   clipped by a brush silhouette, so the ragged edge scales to whatever the term
   name is. Here the silhouette is a rounded pill rather than a rectangle.

   The silhouette is masked in three slices instead of one stretched drawing:
   the two ends keep the drawing's own ratio, so their round caps look the same
   on "Rénovations" as on "Planifications générales", and only the straight
   middle stretches. The middle starts at the pill's radius -- half the badge
   height -- so it runs *under* the caps rather than butting against them, which
   is what keeps the seam invisible. That radius is why the height is pinned:
   the caps scale with it, and the middle's width is derived from it. */
.tdev-realisation-tile__badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	--tdev-badge-height: 29px;
	min-width: 67px;
	height: var(--tdev-badge-height);
	padding: 0.3em 1.1em 0 1.1em;
	background-color: var(--wp--preset--color--terracotta);
	-webkit-mask:
		url('../images/badge-brush-left.svg') no-repeat left center / auto 100%,
		url('../images/badge-brush-mid.svg') no-repeat center /
			calc(100% - var(--tdev-badge-height)) 100%,
		url('../images/badge-brush-right.svg') no-repeat right center / auto 100%;
	mask:
		url('../images/badge-brush-left.svg') no-repeat left center / auto 100%,
		url('../images/badge-brush-mid.svg') no-repeat center /
			calc(100% - var(--tdev-badge-height)) 100%,
		url('../images/badge-brush-right.svg') no-repeat right center / auto 100%;
	color: var(--wp--preset--color--blanc);
	font-family: var(--wp--preset--font-family--lunchbox);
	font-size: 14px;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
}

/* Long term names only need breathing room and a guarantee they stay on one
   line -- the mask now follows whatever width the text asks for, so there is no
   floor to pad the drawing out to. */
.tdev-realisation-tile__badge--long {
	padding-left: 1.35em;
	padding-right: 1.35em;
	white-space: nowrap;
}

.tdev-realisation-tile__title {
	position: absolute;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	opacity: 0;
	transform: translateY(0.4rem);
	transition:
		opacity 0.3s ease,
		transform 0.3s ease;
	color: var(--wp--preset--color--noir);
	font-family: var(--wp--preset--font-family--lunchbox);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
}

.tdev-realisation-tile:hover .tdev-realisation-tile__title,
.tdev-realisation-tile:focus-visible .tdev-realisation-tile__title {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.tdev-realisation-tile__sketch,
	.tdev-realisation-tile__title {
		transition: none;
	}
}

/* In the carousel the covers are a mixed bag of portrait and landscape, so the
   row is squared off to keep the slides level. */
.tdev-carousel__slide.tdev-realisation-tile .tdev-realisation-tile__media {
	aspect-ratio: 9 / 10;
	min-height: 420px;
}

.tdev-carousel__slide.tdev-realisation-tile .tdev-realisation-tile__photo {
	height: 100%;
	object-fit: cover;
}