/**
 * Post Card — Styles partagés des cartes d'articles
 * Utilisé dans : ri-grille-actualites, home.php (archive actualités)
 *
 * Structure HTML attendue :
 *   <article class="ri-post-card">
 *     <div class="card-image">
 *       <span class="card-badge">Open Inno</span>  ← optionnel
 *       <img ...>
 *     </div>
 *     <div class="card-content">
 *       <div class="card-meta">
 *         <span class="card-tag">Sécurité</span>
 *         <span class="card-date">Publié le 12.12.24</span>
 *       </div>
 *       <h2 class="card-title">Titre de l'article</h2>
 *       <p class="card-excerpt">Extrait...</p>
 *       <div class="card-footer">
 *         <a href="#" class="card-link"><span>&gt;</span> Lire l'article</a>
 *       </div>
 *     </div>
 *   </article>
 */

/* ========================================
   Base
   ======================================== */

.ri-post-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-shadow: 0 4px 20px rgba(208, 208, 208, 0.5);
	overflow: hidden;
}

/* ========================================
   Image
   ======================================== */

.ri-post-card .card-image {
	position: relative;
	width: 100%;
	aspect-ratio: 411 / 240;
	overflow: hidden;
	background-color: var(--ri-color-grey-soft);
	flex-shrink: 0;
}

.ri-post-card .card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ri-transition-slow);
}

.ri-post-card:hover .card-image img {
	transform: scale(1.05);
}

/* Badge type (coin haut droit de l'image) */
.ri-post-card .card-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 2px 8px;
	background-color: var(--ri-color-grey-soft);
	border-radius: 240px;
	font: 700 12px/1 var(--ri-font-1);
	color: var(--ri-color-teal);
	z-index: 1;
}

.ri-post-card .card-badge.is-nova {
	background-color: var(--ri-color-violet-dark);
	color: var(--ri-color-yellow);
}

.ri-post-card .card-badge.is-open-inno,
.category-open-inno-factory .ri-post-card .card-badge {
	background-color: var(--ri-color-open-inno);
	color: #fff;
}

/* ========================================
   Contenu
   ======================================== */

.ri-post-card .card-content {
	display: flex;
	flex-direction: column;
	gap: var(--ri-space-md);
	padding: 16px 16px 24px;
	background-color: var(--ri-color-grey-soft);
	flex: 1;
}

/* ========================================
   Meta : tag + date
   ======================================== */

.ri-post-card .card-meta {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--ri-space-sm);
}

.ri-post-card .card-tag {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	font: 700 12px/1.5 var(--ri-font-1);
	color: var(--ri-color-teal);
	background-color: var(--ri-color-grey-mid);
	flex-shrink: 0;
}

/* Variantes de couleur du tag */
.ri-post-card .card-tag.is-violet {
	background-color: var(--ri-color-violet-dark);
	color: var(--ri-color-violet-light);
}

.ri-post-card .card-tag.is-gray {
	background-color: var(--ri-color-grey-mid);
	color: var(--ri-color-white);
}

.ri-post-card .card-date {
	font: 400 12px/1 var(--ri-font-1);
	white-space: nowrap;
	flex-shrink: 0;
	margin-inline-start: auto;
}

/* ========================================
   Titre + Extrait
   ======================================== */

.ri-post-card .card-body {
	display: flex;
	flex-direction: column;
	gap: var(--ri-space-sm);
	flex: 1;
}

.ri-post-card .card-title {
	margin: 0;
	font: 700 var(--ri-size-text-body) / 1.7 var(--ri-font-1);
	display: -webkit-box;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}

.ri-post-card .card-title a {
	color: inherit;
	text-decoration: none;
	transition: opacity var(--ri-transition-base);
}

.ri-post-card .card-title a:hover {
	opacity: 0.75;
}

.ri-post-card .card-excerpt {
	margin: 0;
	font: 400 var(--ri-size-text-body) / 1.7 var(--ri-font-1);
	display: -webkit-box;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

/* ========================================
   Footer de la card
   ======================================== */

.ri-post-card .card-footer {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: var(--ri-space-sm);
	margin-top: auto;
	min-height: 47px;
}

.ri-post-card .card-footer.has-cta {
	justify-content: space-between;
}

.ri-post-card .card-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font: 700 var(--ri-size-text-body-sm) / 1 var(--ri-font-1);
	color: var(--ri-color-teal);
	text-decoration: none;
	transition: opacity var(--ri-transition-base);
}

.ri-post-card .card-link:hover {
	opacity: 0.7;
}

.ri-post-card .card-link .arrow {
	font-size: 15.4px;
}

.ri-post-card .card-link .label {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* Bouton CTA secondaire (ex: "Candidater") */
.ri-post-card .card-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 16px;
	background-color: var(--ri-color-teal);
	font: 700 var(--ri-size-text-body-sm) / 1 var(--ri-font-1);
	color: var(--ri-color-white);
	text-decoration: none;
	transition: opacity var(--ri-transition-base);
	flex-shrink: 0;
}

.ri-post-card .card-cta:hover {
	opacity: 0.85;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 782px) {

	.ri-post-card .card-footer {
		display: none;
	}

}