/**
 * Styles front du bloc « Adhésion HelloAsso ».
 *
 * La carte elle-même est habillée par le style de bloc `is-style-helloasso` du
 * thème : on ne fait qu'ajouter le visuel, absent du design d'origine.
 */

.ha-adhesion__visuel {
	margin: 0 0 16px;
	overflow: hidden;
	border-radius: 10px;
	line-height: 0;
}

.ha-adhesion__visuel img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 220px;
	object-fit: cover;
}

/* ===========================================================================
   Bloc « Carte chapter HelloAsso » (`helloasso/chapter`)
   ---------------------------------------------------------------------------
   Tuile entièrement cliquable de la page d'accueil. Volontairement différente
   de la carte de la page « Adhésion » : ici pas de checklist ni de bouton, mais
   un bandeau HelloAsso, le territoire du chapter, une accroche courte et le
   tarif en pastille biseautée. Les tokens du thème sont repris avec une valeur
   de repli, cette feuille étant aussi servie au canevas de l'éditeur.
   =========================================================================== */

.wp-block-group.ha-chapters {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px;
	max-width: var(--bkg-shell, 1240px);
	margin-inline: auto;
	padding: 54px 28px 58px;
	background: var(--bkg-panel, #0d0d0d);
	border-top: 1px solid var(--bkg-line-soft, #1c1c1c);
	border-bottom: 1px solid var(--bkg-line-soft, #1c1c1c);
}

/* La bande est posée en `alignfull`, que le thème étire sur toute la largeur de
   l'écran, et sa feuille est imprimée après celle du plugin, donc à
   spécificité égale c'est elle qui gagnait. Trois classes suffisent à rendre à
   la bande la largeur du site : des tuiles plus étroites étirent aussi moins le
   bandeau HelloAsso, qui ne fait que 166 à 200 px de haut. */
.wp-block-group.ha-chapters.alignfull {
	max-width: var(--bkg-shell, 1240px);
	width: auto;
	margin-inline: auto;
}

/* Le filet d'espacement du thème (`> * + *`) donnerait une marge haute à la
   seconde tuile, qui la décalerait vers le bas et l'empêcherait de s'étirer à
   la hauteur de la première. Dans une grille, c'est le `gap` qui espace. */
.wp-block-group.ha-chapters > * {
	margin-block: 0;
}

.ha-chapter {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--bkg-surface, #111111);
	border: 1px solid var(--bkg-line, #1e1e1e);
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.ha-chapter:hover,
.ha-chapter:focus-visible {
	border-color: var(--bkg-red, #cc0000);
	transform: translateY(-4px);
	box-shadow: 0 22px 50px rgb(0 0 0 / 0.55);
}

.ha-chapter:focus-visible {
	outline: 2px solid var(--bkg-red, #cc0000);
	outline-offset: 3px;
}

/* Filet rouge qui balaie le haut de la tuile au survol. */
.ha-chapter::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 3;
	background: var(--bkg-red, #cc0000);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1);
}

.ha-chapter:hover::before,
.ha-chapter:focus-visible::before {
	transform: scaleX(1);
}

/* Bandeau HelloAsso : on suit ses proportions natives (souvent ~7,7:1). */
.ha-chapter__media {
	position: relative;
	display: block;
	aspect-ratio: var(--ha-chapter-ratio, 16 / 9);
	max-height: 220px;
	overflow: hidden;
	line-height: 0;
	background: var(--bkg-ink, #060606);
}

.ha-chapter__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Pas de filtre ni de mise à l'échelle au repos : le bandeau HelloAsso est
	   déjà peu défini, tout rééchantillonnage se voit. */
	transition: transform 0.6s ease;
}

.ha-chapter:hover .ha-chapter__img,
.ha-chapter:focus-visible .ha-chapter__img {
	transform: scale(1.04);
}

/* Pastille de tarif, biseautée comme les boutons BKG. */
.ha-chapter__price {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	background: var(--bkg-red, #cc0000);
	color: #fff;
	font-family: var(--bkg-font-ui, "Oswald", ui-sans-serif, system-ui, sans-serif);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 1.5px;
	padding: 9px 18px 9px 22px;
	clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%);
}

.ha-chapter__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 12px;
	padding: 30px 30px 26px;
}

.ha-chapter__place {
	font-family: var(--bkg-font-ui, "Oswald", ui-sans-serif, system-ui, sans-serif);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--bkg-red, #cc0000);
}

.ha-chapter__title {
	font-family: var(--bkg-font-display, "Barlow Condensed", ui-sans-serif, system-ui, sans-serif);
	font-weight: 800;
	font-size: 34px;
	line-height: 1.02;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #fff;
}

.ha-chapter__rule {
	display: block;
	width: 44px;
	height: 3px;
	background: var(--bkg-red, #cc0000);
	transition: width 0.4s ease;
}

.ha-chapter:hover .ha-chapter__rule,
.ha-chapter:focus-visible .ha-chapter__rule {
	width: 92px;
}

.ha-chapter__blurb {
	color: #b5b5b5;
	font-size: 14.5px;
	line-height: 1.65;
}

/* Repoussé en bas : deux accroches de longueurs différentes gardent des
   tuiles alignées. */
.ha-chapter__cta {
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--bkg-line, #1e1e1e);
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--bkg-font-ui, "Oswald", ui-sans-serif, system-ui, sans-serif);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #fff;
}

.ha-chapter__cta::after {
	/* Le logo et le libellé restent groupés à gauche, la flèche à droite. */
	margin-left: auto;
	content: "→";
	color: var(--bkg-red, #cc0000);
	font-size: 17px;
	transition: transform 0.3s ease;
}

.ha-chapter:hover .ha-chapter__cta::after,
.ha-chapter:focus-visible .ha-chapter__cta::after {
	transform: translateX(6px);
}

@media (max-width: 860px) {
	.wp-block-group.ha-chapters {
		grid-template-columns: 1fr;
		padding: 40px 20px 44px;
	}
	.ha-chapter__title {
		font-size: 30px;
	}
	.ha-chapter__body {
		padding: 26px 24px 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ha-chapter,
	.ha-chapter::before,
	.ha-chapter__img,
	.ha-chapter__rule,
	.ha-chapter__cta::after {
		transition: none;
	}
}

/* Dans l'éditeur, la tuile ne doit pas emmener l'auteur sur HelloAsso. */
.editor-styles-wrapper .ha-chapter {
	pointer-events: none;
}