/* Nirmata Events — tuile de soirée, partagée par les deux listes (0.48.0).
 *
 * `[nirmata_events]` (public) et `[nirmata_planning]` (orga) montrent les mêmes
 * soirées : elles montrent désormais la même tuile. Ce fichier est la seule
 * source de son dessin — grille, image, voile, pastilles.
 *
 * Arbitrages repris de chaque côté :
 *   - grille **fluide** (liste publique) : autant de colonnes que la largeur en
 *     porte, plutôt qu'un nombre figé qui laisse une tuile seule sur sa ligne ;
 *   - image **entière** (`contain`, liste publique) : une bannière porte souvent
 *     un titre travaillé, que `cover` couperait ;
 *   - informations en **pastilles** (liste planning), le titre seul restant en
 *     texte nu.
 *
 * Palette : tokens partagés (tokens.css, dépendance enregistrée).
 */

.nirmata-tiles {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 300px, 1fr ) );
	gap: 20px;
}

.nirmata-tile {
	margin: 0;
}

/* Tuile à hauteur fixe : l'image occupe tout le cadre, le texte se superpose. */
.nirmata-tile__link {
	position: relative;
	display: block;
	height: 240px;
	overflow: hidden;
	border-radius: 10px;
	border: 1px solid var( --nirmata-border );
	background: var( --nirmata-surface );
	text-decoration: none;
	color: #fff;
	transition: transform 0.15s ease, filter 0.15s ease, border-color 0.15s ease;
}

.nirmata-tile__link:hover,
.nirmata-tile__link:focus-visible {
	transform: translateY( -3px );
	filter: brightness( 1.05 );
	border-color: var( --nirmata-primary );
}

/* Bannière **entière** (jamais recadrée) ; le fond de tuile fait la letterbox.
   Un visuel de soirée porte le plus souvent son titre : `cover` le couperait. */
.nirmata-tile__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
}

.nirmata-tile__img--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.4rem;
	color: var( --nirmata-rose );
	background: var( --nirmata-surface-2 );
}

/* Voile dégradé : sombre en bas (derrière la barre d'informations), et un
   soupçon en haut pour que la pastille de statut ne flotte pas sur un ciel
   clair de bannière. */
.nirmata-tile__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba( 0, 0, 0, 0.9 ) 0%,
		rgba( 0, 0, 0, 0.55 ) 38%,
		rgba( 0, 0, 0, 0.12 ) 70%,
		rgba( 0, 0, 0, 0.35 ) 100%
	);
}

/* --- Statut, coin supérieur droit (0.48.0) ---------------------------
   Réservé à la liste planning : le public n'a pas à lire l'état du
   recrutement. En haut à droite, il ne dispute plus la barre du bas aux
   informations pratiques. */
.nirmata-tile__statuses {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	max-width: calc( 100% - 24px );
}

.nirmata-tile__status {
	display: inline-block;
	max-width: 100%;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.76rem;
	font-weight: 600;
	line-height: 1.35;
	color: #fff;
	background: #4a4f5a;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	box-shadow: 0 1px 6px rgba( 0, 0, 0, 0.45 );
}

.nirmata-tile__status--open     { background: var( --nirmata-ok ); color: var( --nirmata-primary-ink ); }
.nirmata-tile__status--closed   { background: var( --nirmata-danger ); color: #fff; }
.nirmata-tile__status--draft    { background: #4a4f5a; }
.nirmata-tile__status--guest    { background: var( --nirmata-rose ); color: var( --nirmata-bg ); }
.nirmata-tile__status--archived { background: #3a3f49; }
/* Publication du planning (0.76.0), seconde pastille sous la première. */
.nirmata-tile__status--published   { background: var( --nirmata-ok ); color: var( --nirmata-primary-ink ); }
.nirmata-tile__status--unpublished { background: var( --nirmata-warn ); color: var( --nirmata-primary-ink ); }

/* Barre du bas : titre, puis pastilles — la disposition de la liste publique,
   empilée à gauche, plutôt que titre et pastilles se partageant la ligne. */
.nirmata-tile__content {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 14px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

/* Nom de la soirée : police d'affichage (0.45.9), la même que le hero de la
   page détaillée — une tuile et sa page doivent nommer la soirée de la même
   façon. Nulshock est nettement plus large que la police de texte, d'où la
   taille d'un cran en dessous et `break-word` pour un nom d'un seul tenant. */
.nirmata-tile__title {
	max-width: 100%;
	font-family: var( --nirmata-font-display );
	font-size: 1.05rem;
	line-height: 1.25;
	overflow-wrap: break-word;
	color: #fff;
	text-shadow: 0 1px 4px rgba( 0, 0, 0, 0.65 );
}

.nirmata-tile__pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	max-width: 100%;
}

.nirmata-tile__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	padding: 4px 11px;
	border-radius: 999px;
	border: 1px solid rgba( 255, 255, 255, 0.18 );
	/* Semi-transparent : la bannière reste devinée derrière la pastille. Le
	   flou n'est qu'un confort — sans lui, l'opacité seule tient déjà. */
	background: rgba( 12, 13, 20, 0.55 );
	backdrop-filter: blur( 6px );
	color: rgba( 255, 255, 255, 0.94 );
	font-size: 0.82rem;
	line-height: 1.3;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.6 );
}

.nirmata-tile__pill-ico {
	flex: 0 0 auto;
	font-size: 0.85em;
}

/* Un nom de lieu long est coupé plutôt que replié sur trois lignes : la
   pastille reste sur une ligne, l'attribut `title` porte la valeur entière. */
.nirmata-tile__pill-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media ( max-width: 480px ) {
	.nirmata-tile__pill {
		font-size: 0.78rem;
		padding: 3px 9px;
	}
}