/* ==========================================================================
   HARD DÉCO — CARTES DE LA PAGE RÉALISATIONS / VISUAL PORTFOLIO

   Visual Portfolio conserve la mosaïque, les dimensions d'images, les
   filtres et le chargement. Cette feuille contrôle uniquement le langage
   graphique Hard Déco et le contenu éditorial situé sous chaque image.
   ========================================================================== */

:root {
	--hd-vp-navy: var(--theme-headings-color, #314a65);
	--hd-vp-text: var(--theme-text-color, #5d7185);
	--hd-vp-cyan: var(--theme-palette-color-1, #20b9d7);
	--hd-vp-soft: #edf2f5;
	--hd-vp-radius: 7px;
}

/* --------------------------------------------------------------------------
   IMAGE PRINCIPALE
   -------------------------------------------------------------------------- */

.vp-portfolio .vp-portfolio__item-img img,
.vp-portfolio .vp-portfolio__item-img-wrap img,
.vp-portfolio .vp-portfolio__item-image img {
	display: block;
	border-radius: var(--hd-vp-radius);
	transition: transform 480ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.vp-portfolio .vp-portfolio__item:hover .vp-portfolio__item-img img,
.vp-portfolio .vp-portfolio__item:hover .vp-portfolio__item-img-wrap img,
.vp-portfolio .vp-portfolio__item:hover .vp-portfolio__item-image img {
	transform: scale(1.018);
}

/* --------------------------------------------------------------------------
   CONTENU DE LA CARTE
   -------------------------------------------------------------------------- */

.hd-vp-project-card-content {
	position: relative;
	width: 100%;
	padding-top: clamp(17px, 2vw, 23px);
	color: var(--hd-vp-text);
	text-align: left;
}

.hd-vp-project-eyebrow {
	margin: 0 0 8px !important;
	color: var(--hd-vp-cyan) !important;
	font-size: 0.78rem !important;
	font-weight: 700 !important;
	line-height: 1.45 !important;
	letter-spacing: 0.09em !important;
	text-transform: uppercase;
}

.hd-vp-project-title {
	display: -webkit-box;
	overflow: hidden;
	margin: 0 !important;
	color: var(--hd-vp-navy) !important;
	font-size: clamp(1.25rem, 1.6vw, 1.55rem);
	font-weight: 700 !important;
	line-height: 1.28 !important;
	letter-spacing: -0.015em;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.hd-vp-project-title__link {
	color: inherit !important;
	text-decoration: none !important;
	transition: color 160ms ease;
}

.hd-vp-project-title__link:hover,
.hd-vp-project-title__link:focus-visible {
	color: var(--hd-vp-cyan) !important;
}

.hd-vp-project-intro {
	margin-top: 15px;
}

.hd-vp-project-intro p {
	display: -webkit-box;
	overflow: hidden;
	margin: 0 !important;
	color: var(--hd-vp-text) !important;
	font-size: 0.95rem; /* ~15 px */
	
	font-weight: 400 !important;
	line-height: 1.65 !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.hd-vp-project-discover-wrap {
	margin-top: 15px;
}

.hd-project-discover {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--hd-vp-navy) !important;
	font-size: 0.87rem !important;
	font-weight: 700 !important;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-decoration: none !important;
	text-transform: uppercase;
}

.hd-project-discover__arrow {
	color: var(--hd-vp-cyan);
	font-size: 1rem;
	font-weight: 400;
	transition: transform 170ms ease;
}

.hd-project-discover:hover .hd-project-discover__arrow,
.hd-project-discover:focus-visible .hd-project-discover__arrow {
	transform: translateX(4px);
}

/* Neutralise les espacements hérités du modèle de métadonnées du plugin. */
.vp-portfolio .vp-portfolio__item-meta-part:has(.hd-vp-project-card-content),
.vp-portfolio .vp-portfolio__item-meta-author:has(.hd-vp-project-card-content) {
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	font-size: inherit !important;
	line-height: inherit !important;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 999px) {
	.hd-vp-project-title {
		font-size: 1.14rem !important;
	}

	.hd-vp-project-intro p {
		font-size: 0.91rem !important;
	}
}

@media (max-width: 689px) {
	.hd-vp-project-card-content {
		padding-top: 16px;
	}

	.hd-vp-project-eyebrow {
		font-size: 0.78rem; /* ~12,5 px */
	}

	.hd-vp-project-title {
			font-size: clamp(1.25rem, 1.6vw, 1.55rem);
			line-height: 1.25;
	}

	.hd-vp-project-intro p {
		font-size: 0.95rem; /* ~15 px */
			line-height: 1.65;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vp-portfolio .vp-portfolio__item-img img,
	.vp-portfolio .vp-portfolio__item-img-wrap img,
	.vp-portfolio .vp-portfolio__item-image img,
	.hd-vp-project-title__link,
	.hd-project-discover__arrow {
		transition: none;
	}
}

.vp-portfolio__items-style-default .vp-portfolio__item-meta-inline>* {
    opacity: 1 !important;
}