/*
 * Page "Nos Causes" (nos-causes.php) — mise en page inspirée d'une référence
 * fournie par l'utilisateur (cartes cause : photo + badge catégorie + barre
 * de progression + "Donate Now") mais reconstruite avec les couleurs de
 * marque JADE (vert/or) et de vraies données : pas de "Raised / Goal" en
 * dollars inventés (aucun suivi de collecte réel n'existe), remplacés par un
 * chiffre réel tiré des activités (nombre de campagnes, livres distribués).
 */

.causes-section {
	padding: 56px 0 72px;
}

.causes-intro {
	max-width: 760px;
	margin: 0 auto 48px;
	text-align: center;
	color: #555;
	font-size: 16px;
	line-height: 1.7;
}

/* ---------- Section "Nos Causes" sur l'accueil (index.php) ---------- */
/* Réutilise .causes-grid/.cause-card ci-dessous (mêmes cartes que
   nos-causes.php) — seuls l'intro badge + titre sont propres à l'accueil. */

.section-causes-home {
	padding: 72px 0;
}

.causes-home-intro {
	text-align: center;
	max-width: 620px;
	margin: 0 auto 48px;
}

.causes-badge {
	display: inline-block;
	padding: 8px 20px;
	border: 1px solid var(--jade-primary, #097D50);
	border-radius: 999px;
	color: var(--jade-primary, #097D50);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	margin-bottom: 18px;
}

.causes-home-intro h2 {
	margin: 0;
	font-size: 34px;
	color: #14181f;
}

.causes-home-more {
	text-align: center;
	margin-top: 40px;
}

.causes-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: start;
	gap: 32px;
}

.cause-card {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: column;
}

.cause-card-media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--jade-background, #F2F1EE);
}

.cause-card-media img,
.cause-card-media .activite-thumb-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cause-card-badge {
	position: absolute;
	left: 16px;
	bottom: 16px;
	background: var(--jade-yellow, #FFC107);
	color: #1a1a1a;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	padding: 8px 16px;
	border-radius: 999px;
}

.cause-card-body {
	padding: 30px 28px 28px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.cause-card-body h2 {
	font-size: 22px;
	margin: 0 0 12px;
}

.cause-card-body h2 a {
	color: #14181f;
	text-decoration: none;
}

.cause-card-body h2 a:hover {
	color: var(--jade-primary, #097D50);
}

.cause-card-body > p {
	color: #555;
	line-height: 1.6;
	margin: 0 0 20px;
}

.cause-card-progress {
	margin: 0 0 26px;
}

.cause-card-progress-track {
	position: relative;
	height: 8px;
	background: var(--jade-background, #F2F1EE);
	border-radius: 999px;
}

.cause-card-progress-fill {
	position: relative;
	height: 100%;
	min-width: 8px;
	background: var(--jade-yellow, #FFC107);
	border-radius: 999px;
}

.cause-card-progress-handle {
	position: absolute;
	right: -9px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	background: var(--jade-yellow, #FFC107);
	border: 3px solid #fff;
	border-radius: 50%;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

.cause-card-progress-labels {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 14px 0 0;
	font-size: 13px;
	font-weight: 700;
	color: #14181f;
}

.cause-card-actions {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 16px;
}

@media (max-width: 1100px) {
	.causes-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 700px) {
	.causes-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Section "Nos Événements" sur l'accueil (index.php) ---------- */
/* Inspirée d'une référence utilisateur (lignes événement : infos + pastille
   date + photo, fond à motif de lignes diagonales) — reconstruite avec les
   vraies activités de data/activites.json. Pas de "Speakers" ni d'horaires
   fixes inventés (aucune notion de "speaker" ni d'heure d'événement n'existe
   dans les données réelles) : seuls le titre, la date et le volet réels sont
   affichés. Fond : assets/shape/line-3-1.png (motif fourni), 100px de
   padding haut/bas comme demandé. */

.section-events-home {
	position: relative;
	padding: 100px 0;
	margin-bottom: 50px;
	background: var(--jade-background, #F2F1EE);
	overflow: hidden;
}

/* Texture en calque séparé à 15% d'opacité, pas directement sur le fond gris
   (même traitement que .section-volet--icons). */
.section-events-home::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url('/assets/shape/team-bg-2-1.png') center / cover no-repeat;
	opacity: 0.15;
	z-index: 0;
}

.section-events-home > .accueil-container {
	position: relative;
	z-index: 1;
}

.section-events-home .section-heading {
	text-align: left;
	margin: 0;
}

.events-home-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 48px;
}

.btn-all-events {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--jade-primary, #097D50);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	padding: 12px 24px;
	border-radius: 999px;
	transition: background 0.15s ease;
	white-space: nowrap;
}

.btn-all-events:hover {
	background: #075c3b;
}

/* ---------- "Nos Événements" (accueil) — vraies annonces JADE ---------- */
/* 2 cartes par ligne ; chaque carte : affiche/photo à gauche, détails
   (titre, description, date/heure/lieu, bouton) à droite (demande explicite
   de l'utilisateur, référence fournie). Remplace l'ancien design basé sur
   les activités passées, et la précédente variante avec pastille date. */

.annonces-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
}

.annonce-card {
	display: grid;
	grid-template-columns: 240px 1fr;
	align-items: center;
	gap: 24px;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 16px;
	padding: 20px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.annonce-card:hover {
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.1);
	transform: translateY(-3px);
}

.annonce-card-body h3 {
	margin: 0 0 10px;
	font-size: 19px;
}

.annonce-card-body h3 a {
	color: #14181f;
	text-decoration: none;
}

.annonce-card-body h3 a:hover {
	color: var(--jade-primary, #097D50);
}

.annonce-card-desc {
	margin: 0 0 14px;
	font-size: 14px;
	color: #555;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.annonce-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0 0 18px;
	font-size: 13px;
	color: #555;
}

.annonce-card-meta i {
	color: var(--jade-primary, #097D50);
	margin-right: 5px;
}

.annonce-card-btn {
	display: inline-block;
	background: var(--jade-background, #F2F1EE);
	color: var(--jade-primary, #097D50);
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
	padding: 12px 24px;
	border-radius: 999px;
	transition: background 0.15s ease, color 0.15s ease;
}

.annonce-card-btn:hover {
	background: var(--jade-primary, #097D50);
	color: #fff;
}

.annonce-card-photo {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: 12px;
	overflow: hidden;
}

.annonce-card-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.annonce-card-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 5px 12px;
	border-radius: 999px;
	color: #fff;
}

.annonce-card-badge--upcoming {
	background: var(--jade-primary, #097D50);
}

.annonce-card-badge--past {
	background: #9199a1;
}

/* ---------- Événement/annonce passé(e) (date de référence antérieure à
   aujourd'hui) : grisé, même traitement visuel que les cartes de la page
   /evenements/. ---------- */

.annonce-card--passee .annonce-card-photo img {
	filter: grayscale(85%);
}

.annonce-card--passee .annonce-card-body h3 a {
	color: #5a6169;
}

.annonce-card--passee .annonce-card-btn {
	background: #eceeef;
	color: #5a6169;
}

.annonce-card--passee .annonce-card-btn:hover {
	background: #5a6169;
	color: #fff;
}

@media (max-width: 640px) {
	.events-home-header {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 1100px) {
	.annonce-card {
		grid-template-columns: 190px 1fr;
	}
}

@media (max-width: 900px) {
	.section-events-home {
		padding: 60px 0;
	}

	.annonces-grid {
		grid-template-columns: 1fr;
	}

	.annonce-card {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.annonce-card-meta {
		justify-content: center;
	}

	.annonce-card-photo {
		aspect-ratio: 16 / 9;
	}
}