/* ==========================================================================
   Featured Projects Section
   ========================================================================== */

.featured-section {
	background-color: var(--color-grisclair);
	padding: var(--spacing-x-large) 0;
}

.featured-inner {
	max-width: var(--wide-width);
	margin: 0 auto;
	padding: 0 var(--spacing-gap);
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* Featured Header */
.featured-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.featured-header-left {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.featured-title {
	font-family: var(--font-heading);
	font-size: clamp(24px, 4vw, 44px);
	font-weight: var(--font-weight-bold);
	color: var(--color-contrast);
	margin: 0;
	line-height: var(--line-height-medium);
}

.featured-subtitle {
	font-family: var(--font-primary);
	font-size: var(--font-size-medium);
	font-weight: var(--font-weight-regular);
	color: var(--color-gris);
	margin: 0;
}

.featured-see-all {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-primary);
	font-size: 15px;
	font-weight: var(--font-weight-semi-bold);
	color: #6A9468;
	text-decoration: none;
	transition: color 0.2s ease;
}

.featured-see-all:hover {
	color: var(--color-secondary);
}

.featured-see-all svg {
	transition: transform 0.2s ease;
}

.featured-see-all:hover svg {
	transform: translateX(4px);
}

/* Featured Grid - Override WP columns flexbox */
.featured-grid,
.wp-block-columns.featured-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 24px !important;
	flex-wrap: unset !important;
}

.featured-grid > .wp-block-column {
	flex-basis: unset !important;
	width: 100% !important;
}

/* Project Card */
.project-card {
	position: relative;
	background-color: var(--color-base);
	border: 1px solid var(--border-color);
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 235px;
	box-shadow: 0 1px 2px var(--overlay-light), 0 2px 6px var(--overlay-light);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.project-card:hover {
	box-shadow: 0 12px 24px var(--overlay-strong);
	border-color: var(--border-color-hover);
}

.project-card:hover .project-cta {
	color: var(--color-secondary);
}

.project-card:hover .project-cta svg {
	transform: translateX(3px);
}

/* Project Tags */
.project-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 24px;
}

.project-tag {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 100px;
	font-family: var(--font-primary);
	font-size: 11px;
	font-weight: var(--font-weight-medium);
}

.project-tag--primary {
	background-color: var(--color-secondary);
	color: var(--color-contrast);
}

.project-tag--secondary {
	background-color: var(--color-primary);
	color: var(--color-contrast);
}

.project-tag--purple {
	background-color: #E8D4F0;
	color: var(--color-contrast);
}

.project-tag--outline {
	background-color: var(--color-base);
	color: var(--color-gris);
	border: 1px solid var(--border-color);
}

/* Thématiques (bean coloré dérivé de la couleur du terme) */
.project-thematiques {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	padding: 24px;
	overflow: hidden;
	min-width: 0;
}

.project-thematique {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 100px;
	border: 1px solid #CFE3CC;
	font-family: var(--font-primary);
	font-size: 11px;
	font-weight: var(--font-weight-medium);
	line-height: 1.2;
	background-color: var(--color-cream);
	color: #4A5A47;
	white-space: nowrap;
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
}

.project-thematique__label {
	display: inline-block;
	white-space: nowrap;
	transform: translateX(0);
	transition: transform linear;
	transition-duration: 0s;
}

/* Fade-out du texte à droite : pseudo-element qui s'étend jusqu'au bord
   du tag pour couvrir aussi la zone du padding-right. */
.project-thematique[data-overflow="1"]::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 20px;
	pointer-events: none;
	background: linear-gradient(to right, transparent 0%, var(--thematique-bg, var(--color-cream)) 60%);
}

/* Au hover de la card : le label défile vers la gauche pour révéler la suite,
   et le fade disparaît. Distance + durée fournies par JS. */
.project-card:hover .project-thematique[data-overflow="1"] .project-thematique__label {
	transform: translateX(var(--thematique-shift, 0px));
	transition-duration: var(--thematique-duration, 2s);
}

.project-card:hover .project-thematique[data-overflow="1"]::after {
	width: 10px;
}

/* Project Content */
.project-content {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0 24px 24px 24px;
	flex: 1;
}

.project-title {
	font-family: var(--font-heading);
	font-size: 17px;
	font-weight: var(--font-weight-semi-bold);
	color: var(--color-contrast);
	line-height: 1.3;
	margin: 0;
	padding: 0 !important;
}

.project-title a {
	color: inherit;
	text-decoration: none;
}

.project-title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.project-desc {
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: var(--font-weight-regular);
	color: var(--color-gris);
	line-height: var(--line-height-body);
	margin: 0 !important;
}

/* Project Divider */
.project-divider {
	width: 100%;
	height: 1px;
	background-color: var(--divider-color);
	border: 0;
}

/* Project Footer */
.project-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 24px 8px;
}

.project-org {
	font-family: var(--font-primary);
	font-size: 13px;
	font-weight: var(--font-weight-medium);
	color: var(--color-contrast);
}

.project-date {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-primary);
	font-size: 13px;
	font-weight: var(--font-weight-medium);
	color: var(--color-gris);
}

.project-date::before {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	background-image: url('../icons/calendar.svg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

.project-date:empty::before {
	display: none;
}

.project-card--expired {
	opacity: 0.7;
}

.project-card--expired .project-thematiques {
	opacity: 0.5;
}

.project-card--expired .project-title,
.project-card--expired .project-title a,
.project-card--expired .project-cta {
	color: #6B7280;
}

.project-date--expired {
	color: var(--color-danger);
}

.project-date--expired::before {
	background-image: none;
	background-color: currentColor;
	-webkit-mask-image: url('../icons/warning-diamond.svg');
	mask-image: url('../icons/warning-diamond.svg');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
}

.project-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-primary);
	font-size: 13px;
	color: #6A9468;
	transition: color 0.2s ease;
}

.project-cta svg {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}


/* Featured Responsive */
@media (max-width: 1024px) {
	.featured-grid,
	.wp-block-columns.featured-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 768px) {
	.featured-section {
		padding: var(--spacing-medium) 0;
	}

	.featured-inner {
		gap: 20px;
	}

	.featured-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.featured-grid,
	.wp-block-columns.featured-grid {
		grid-template-columns: 1fr !important;
	}

	.project-card {
		min-height: auto;
	}

	.project-cta .project-cta-label {
		display: none;
	}
}