/**
 * Instagram Cards — grille responsive sobre.
 *
 * Volontairement neutre : couleurs et typographie héritent du thème.
 * Tout est surchargeable via les variables --ic-*.
 *
 * Le nombre de colonnes n'est PAS piloté par des media queries : la grille
 * réagit à la largeur réellement disponible (colonne de contenu, sidebar,
 * pleine largeur…) et non à celle du navigateur. Voir la formule ci-dessous.
 */

.ic-cards-wrap {
	/* Référence pour les container queries du mode carrousel. */
	container-name: ic-cards;
	container-type: inline-size;

	--ic-columns: 3;
	--ic-gap: 20px;
	--ic-min: 240px;
	--ic-radius: 10px;
	--ic-border: rgba(0, 0, 0, 0.08);
	--ic-muted: rgba(0, 0, 0, 0.55);
	--ic-surface: transparent;
}

.ic-cards {
	/*
	 * « Repeat auto-fit, minmax, avec plafond de colonnes ».
	 *
	 * La borne basse de chaque piste vaut le plus grand entre :
	 *   - la largeur mini de carte souhaitée (--ic-min) ;
	 *   - la largeur qu'aurait une colonne si on en affichait --ic-columns.
	 *
	 * Tant que la place le permet, on obtient donc exactement --ic-columns
	 * colonnes ; dès qu'elles passeraient sous --ic-min, le nombre descend
	 * tout seul, palier par palier, jusqu'à une seule colonne.
	 */
	display: grid;
	grid-template-columns: repeat(
		auto-fit,
		minmax(
			max(
				var(--ic-min),
				calc( ( 100% - ( var(--ic-columns) - 1 ) * var(--ic-gap) ) / var(--ic-columns) )
			),
			1fr
		)
	);
	gap: var(--ic-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ic-card {
	display: flex;
	min-width: 0;
	background: var(--ic-surface);
}

.ic-card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: inherit;
	text-decoration: none;
	border-radius: var(--ic-radius);
	overflow: hidden;
	border: 1px solid var(--ic-border);
	background: inherit;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ic-card__link:hover,
.ic-card__link:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09);
	text-decoration: none;
}

.ic-card__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.ic-card__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: rgba(0, 0, 0, 0.04);
	overflow: hidden;
}

.ic-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.ic-card__link:hover .ic-card__image {
	transform: scale(1.03);
}

.ic-card__badge {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 2px 8px;
	font-size: 0.72em;
	line-height: 1.6;
	letter-spacing: 0.02em;
	color: #fff;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 999px;
	backdrop-filter: blur(2px);
}

.ic-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 14px 14px;
}

.ic-card__date {
	font-size: 0.78em;
	color: var(--ic-muted);
}

.ic-card__caption {
	font-size: 0.9em;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.ic-cards__notice {
	padding: 12px 14px;
	border: 1px dashed var(--ic-border, rgba(0, 0, 0, 0.2));
	border-radius: 8px;
	font-size: 0.9em;
	color: rgba(0, 0, 0, 0.6);
}

/* ---------------------------------------------------------------------------
 * Mode carrousel
 *
 * Activé uniquement sous le seuil calculé pour chaque bloc : la règle
 * @container correspondante est émise à la volée par le rendu PHP, une seule
 * fois par seuil et par page. Au-dessus du seuil, la grille normale s'applique.
 *
 * Défilement natif : pas une ligne de JavaScript. Les liens restent focusables,
 * donc la navigation au clavier fait défiler le rail toute seule.
 * ------------------------------------------------------------------------- */

/*
 * Seules les déclarations « conteneur » (display:flex, overflow…) vivent dans
 * la règle @container émise par PHP, car son seuil dépend du bloc. Celles-ci
 * peuvent rester ici : sur un élément de grille, flex et scroll-snap-align
 * sont simplement ignorés.
 */
.ic-cards--carousel > .ic-card {
	/*
	 * La carte suivante dépasse : c'est le seul signal fiable qu'il y a
	 * autre chose à droite. Le clamp évite les cartes géantes sur tablette.
	 */
	flex: 0 0 clamp(200px, 82%, 340px);
	scroll-snap-align: start;
}

.ic-cards--carousel::-webkit-scrollbar {
	height: 4px;
}

.ic-cards--carousel::-webkit-scrollbar-track {
	background: transparent;
}

.ic-cards--carousel::-webkit-scrollbar-thumb {
	background: var(--ic-border);
	border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
	.ic-card__link,
	.ic-card__image {
		transition: none;
	}

	.ic-card__link:hover {
		transform: none;
	}

	.ic-card__link:hover .ic-card__image {
		transform: none;
	}

	.ic-cards--carousel {
		scroll-snap-type: none;
	}
}

/* Mode sombre : on suit la préférence système si le thème ne fixe rien. */
@media (prefers-color-scheme: dark) {
	.ic-cards-wrap {
		--ic-border: rgba(255, 255, 255, 0.14);
		--ic-muted: rgba(255, 255, 255, 0.6);
	}

	.ic-card__media {
		background: rgba(255, 255, 255, 0.06);
	}
}