/**
 * AvelCoop Design System - Campaign Stats Preview Component
 *
 * Styles pour le widget de progression de campagne.
 */

/* Container principal du widget */
.avelcoop-campaign-widget {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

@container (min-width: 640px) {
	.avelcoop-campaign-widget {
		flex-direction: row;
		align-items: flex-start;
		gap: 12px;
	}
}

/* Section de progression */
.avelcoop-campaign-progress {
	flex: 1;
	min-width: 0;
	padding: 4px 0 12px;
}

/* Tag d'état de campagne */
.avelcoop-campaign-status {
	display: inline-block;
	font-size: var( --avelcoop-font-size-sm );
	font-weight: 600;
	line-height: 1.3;
	color: var( --avelcoop-accent-color );
	background-color: rgba( 255, 107, 53, 0.1 );
	padding: 4px 10px;
	border-radius: 20px;
	margin-bottom: 8px;
}

/* Montant collecté */
.avelcoop-raised {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: baseline;
	margin: 8px 0;
}

.avelcoop-raised strong {
	font-size: 36px;
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.2;
	color: var( --avelcoop-text-primary );
}

.avelcoop-raised span {
	color: var( --avelcoop-muted );
}

/* Ligne d'objectif */
.avelcoop-goal-line {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 16px 0 12px;
}

.avelcoop-goal-line strong {
	font-weight: 500;
}

/* Jauge de progression */
.avelcoop-gauge-area {
	display: block;
}

.avelcoop-gauge {
	position: relative;
	height: 12px;
	background-color: var( --avelcoop-soft );
	border-radius: 20px;
	overflow: hidden;
}

.avelcoop-gauge-fill {
	height: 100%;
	width: 62.5%;
	background-color: var( --avelcoop-accent-color );
	border-radius: 20px;
	transition: width 0.3s ease-out;
}

/* Ticks de la jauge */
.avelcoop-gauge-tick {
	position: absolute;
	top: -3px;
	height: 18px;
	width: 2px;
	background-color: var( --avelcoop-text );
	opacity: 0.6;
}

/* Liste des paliers */
.avelcoop-milestones {
	list-style: none;
	padding: 0;
	margin: 22px 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.avelcoop-milestones li {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

/* Icône de palier */
.avelcoop-milestone-icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: var( --avelcoop-soft );
	color: var( --avelcoop-accent-color );
}

/* Paliers futurs */
.ac-future .avelcoop-milestone-icon {
	filter: grayscale(1);
	color: var( --avelcoop-muted );
}

/* Contenu du palier */
.avelcoop-milestones li > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.avelcoop-milestones strong,
.avelcoop-milestones span:where(:not(.avelcoop-milestone-icon)),
.avelcoop-milestones small {
	display: block;
}

.avelcoop-milestones strong {
	font-weight: 500;
}

.avelcoop-milestones small {
	color: var( --avelcoop-accent-color );
	margin-top: 6px;
}

.ac-future small {
	color: var( --avelcoop-muted );
}

/* Stats de campagne */
.avelcoop-campaign-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	border-top: 1px solid var( --avelcoop-border-color );
	padding-top: 20px;
}

.avelcoop-campaign-stats > div {
	flex: 1 1 100px;
	min-width: 0;
}

.avelcoop-campaign-stats strong {
	font-size: 26px;
	display: block;
	font-weight: 500;
}

.avelcoop-campaign-stats span {
	color: var( --avelcoop-muted );
}

/* Note de comptage */
.avelcoop-counting-note {
	font-size: var( --avelcoop-font-size-sm );
	color: var( --avelcoop-muted );
	margin-top: 0;
	margin-bottom: 22px;
	line-height: 1.4;
}

/* Responsive */
@media ( max-width: 640px ) {
	.avelcoop-milestones {
		grid-template-columns: 1fr;
		gap: 12px;
		margin: 18px 0;
	}

	.avelcoop-milestones li {
		flex-direction: row;
		align-items: center;
	}

	.avelcoop-milestones li > div {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 12px;
		flex: 1;
	}

	.avelcoop-milestones small {
		grid-column: 2;
		margin-top: 0;
	}

	.avelcoop-raised strong {
		font-size: 32px;
	}

	.avelcoop-campaign-widget {
		gap: 12px;
	}

	.avelcoop-campaign-stats {
		gap: 16px;
	}
}