/**
 * The words under an enlarged picture: a place, not a dress.
 *
 * UNE DISPOSITION ET RIEN D'AUTRE, comme la maçonnerie. Aucune couleur, aucune
 * police, aucune taille : le texte prend celles du thème, sur le fond que le
 * cœur donne à la visionneuse d'après les couleurs du thème. Le titre est en
 * `strong`, que le navigateur graisse lui-même.
 *
 * LA PLACE EXACTE EST CALCULÉE PAR `lightbox-texts.js`, qui rétrécit un peu la
 * photographie, la remonte et pose le texte juste dessous. Sans le script, le
 * texte se tient au bas de l'écran, sur la marge que le cœur y laisse.
 *
 * Les sélecteurs passent par `.wp-lightbox-overlay` : le bloc n'existe que là,
 * et la règle du cœur sur les boutons de la visionneuse pèse autant.
 *
 * @package cab-useful-options
 * @since   1.39.0
 */

.wp-lightbox-overlay .cab-uo-lightbox-texts {
	position: absolute;
	z-index: 2000002;
	left: 50%;
	bottom: 12px;
	box-sizing: border-box;
	width: min(36em, calc(100% - 32px));
	max-width: calc(100% - 32px);
	margin: 0;
	transform: translateX(-50%);
	overflow-wrap: break-word;
}

.wp-lightbox-overlay .cab-uo-lightbox-texts[hidden],
.wp-lightbox-overlay .cab-uo-lightbox-texts [hidden] {
	display: none;
}

/* Le texte part avec la visionneuse, sans attendre la fin de son effacement. */
.wp-lightbox-overlay:not(.active) .cab-uo-lightbox-texts {
	visibility: hidden;
}

.wp-lightbox-overlay .cab-uo-lightbox-texts p {
	margin: 0;
}

/* Le titre à gauche, le compteur au bout de la même ligne. */
.wp-lightbox-overlay .cab-uo-lightbox-texts__head {
	display: flex;
	align-items: baseline;
	gap: 1em;
}

.wp-lightbox-overlay .cab-uo-lightbox-texts__counter {
	margin-inline-start: auto;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/*
 * UNE ANNONCE, PAS UN ARTICLE. Une description de vingt lignes repousserait la
 * photographie hors de l'écran : trois lignes de légende, quatre de
 * description, et la suite reste dans la médiathèque.
 */
.wp-lightbox-overlay .cab-uo-lightbox-texts__caption,
.wp-lightbox-overlay .cab-uo-lightbox-texts__description {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wp-lightbox-overlay .cab-uo-lightbox-texts__caption {
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.wp-lightbox-overlay .cab-uo-lightbox-texts__description {
	-webkit-line-clamp: 4;
	line-clamp: 4;
}

@media not (prefers-reduced-motion) {
	.wp-lightbox-overlay.active .cab-uo-lightbox-texts {
		animation: cab-uo-lightbox-texts-in 0.4s both;
	}
}

@keyframes cab-uo-lightbox-texts-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}