/*
 * ACGM – sections de la page d'accueil (patterns acgm/accueil-*).
 * Chaque section est utilisable seule, sur n'importe quelle page.
 */

/* ---------- En-têtes de section (titre + lien) ---------- */

.acgm-entete-section {
	row-gap: 0.5rem;
}

.acgm-entete-section > * {
	margin: 0;
}

.acgm-intro-section {
	text-align: center;
}

.acgm-intro-section > * {
	margin-inline: auto;
}

/* ---------- 1. Hero ---------- */

.acgm-hero .wp-block-cover__inner-container {
	color: var(--acgm-blanc);
}

.acgm-hero h1 {
	margin-bottom: 0;
	line-height: 1.02;
	text-wrap: balance;
}

.acgm-hero__accroche {
	margin-top: 0.5rem;
	font-style: italic;
	font-weight: 400;
	line-height: 1.25;
}

.acgm-hero__actions {
	margin-top: var(--wp--preset--spacing--50);
}

/* Sur mobile, le texte passe sur toute la largeur : voile vertical. */
@media (max-width: 781.98px) {
	.acgm-hero {
		min-height: 560px !important;
	}

	.acgm-hero > .wp-block-cover__background.has-background-gradient {
		background: linear-gradient(180deg, rgb(15 30 51 / 0.55) 0%, rgb(15 30 51 / 0.88) 70%) !important;
	}
}

/* ---------- 2. Piliers ---------- */

.acgm-pilier {
	text-align: center;
}

.acgm-pilier > * {
	margin-block: 0;
}

.acgm-pilier > * + * {
	margin-block-start: 0.6rem;
}

.acgm-pilier .acgm-icone {
	display: grid;
	place-items: center;
	width: 5.5rem;
	height: 5.5rem;
	margin-inline: auto;
	margin-block-end: 1rem;
	background: var(--acgm-blanc);
	border: 1px solid var(--acgm-bordure);
	border-radius: 50%;
}

@media (min-width: 1100px) {
	.acgm-piliers .acgm-pilier + .acgm-pilier {
		border-inline-start: 1px solid var(--acgm-bordure);
	}
}

/* ---------- 3. Disciplines : cartes photo cliquables ---------- */

.acgm-discipline {
	position: relative;
	overflow: hidden;
	border-radius: var(--acgm-rayon-petit);
	background: var(--acgm-marine-fonce);
	isolation: isolate;
}

.acgm-discipline .wp-block-image {
	margin: 0;
}

.acgm-discipline img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transition: transform 400ms ease;
}

/* Voile dégradé pour la lisibilité du titre. */
.acgm-discipline::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgb(15 30 51 / 0) 45%, rgb(15 30 51 / 0.88) 100%);
	pointer-events: none;
}

.acgm-discipline__titre {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	margin: 0;
	padding: 1rem;
	color: var(--acgm-blanc);
	line-height: 1.15;
}

.acgm-discipline__titre a {
	color: inherit;
	text-decoration: none;
}

/* Toute la carte est cliquable (un seul lien, dans le titre). */
.acgm-discipline__titre a::before {
	content: "";
	position: absolute;
	inset: -100vh 0 0;
}

.acgm-discipline__titre::after {
	content: "\2192";
	content: "\2192" / "";
	display: block;
	margin-top: 0.35rem;
	color: var(--acgm-sable);
	font-family: var(--wp--preset--font-family--acgm-sans);
	font-size: 1.125rem;
	transition: transform var(--acgm-transition);
}

.acgm-discipline:hover img {
	transform: scale(1.04);
}

.acgm-discipline:hover .acgm-discipline__titre::after,
.acgm-discipline:focus-within .acgm-discipline__titre::after {
	transform: translateX(4px);
}

.acgm-discipline:focus-within {
	outline: 3px solid var(--acgm-marine);
	outline-offset: 3px;
}

.acgm-discipline__titre a:focus-visible {
	outline: none;
}

@media (max-width: 599.98px) {
	.acgm-discipline__titre {
		padding: 0.75rem;
		font-size: 1rem;
	}
}

/* ---------- 4. Événement à la une ---------- */

.acgm-evenement {
	overflow: hidden;
	border-radius: var(--acgm-rayon);
}

.acgm-evenement__colonnes {
	margin: 0;
	align-items: stretch !important;
}

.acgm-evenement__texte > * {
	margin-block: 0;
}

.acgm-evenement__texte > * + * {
	margin-block-start: 1rem;
}

.acgm-evenement__texte h2 {
	margin-block-start: 0.4rem;
}

.acgm-evenement__visuel {
	position: relative;
	min-height: 18rem;
}

.acgm-evenement__visuel .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.acgm-evenement__visuel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Date et lieu : icône + libellé en toutes lettres. */
.acgm-meta {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.acgm-meta::before {
	content: "";
	flex: 0 0 1.25rem;
	height: 1.25rem;
	background-color: var(--acgm-sable);
	-webkit-mask: var(--acgm-meta-icone) center / contain no-repeat;
	mask: var(--acgm-meta-icone) center / contain no-repeat;
}

.acgm-meta--date {
	--acgm-meta-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}

.acgm-meta--lieu {
	--acgm-meta-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 22s-7-7-7-12a7 7 0 0 1 14 0c0 5-7 12-7 12Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}

@media (max-width: 781.98px) {
	.acgm-evenement__visuel {
		order: -1;
		min-height: 0;
		aspect-ratio: 16 / 10;
	}
}

/* ---------- 5. Actualités ---------- */

.acgm-actu {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.acgm-actu__image {
	margin: 0;
}

.acgm-actu__image img {
	border-radius: 0;
}

.acgm-actu__corps {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.acgm-actu__corps > * {
	margin-block: 0;
}

.acgm-actu__date {
	color: var(--acgm-marine);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.acgm-actu .wp-block-post-title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--acgm-sable);
	text-decoration-thickness: 2px;
}

.acgm-actu .wp-block-post-excerpt {
	flex: 1;
	display: flex;
	flex-direction: column;
	color: var(--acgm-gris);
}

.acgm-actu .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.acgm-actu .wp-block-post-excerpt__more-text {
	margin-top: auto;
	padding-top: 0.75rem;
	font-weight: 700;
}

.acgm-actu .wp-block-post-excerpt__more-link::after {
	content: " \2192";
	content: " \2192" / "";
}

/* ---------- 6. Galerie / vie du club ---------- */

.acgm-galerie p:not(.is-style-acgm-surtitre) {
	color: rgb(255 255 255 / 0.86);
}

/* Mosaïque : la première photo occupe deux rangées. */
.acgm-mosaique.acgm-mosaique {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: clamp(8rem, 13vw, 12.5rem);
}

.acgm-mosaique .wp-block-image {
	height: 100%;
	margin: 0;
	overflow: hidden;
	border-radius: var(--acgm-rayon-petit);
}

.acgm-mosaique .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.acgm-mosaique > :first-child {
	grid-row: span 2;
}

@media (max-width: 599.98px) {
	.acgm-mosaique.acgm-mosaique {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 9rem;
	}

	.acgm-mosaique > :first-child {
		grid-column: span 2;
		grid-row: span 1;
	}
}

/* ---------- 7. Comment nous rejoindre : étapes numérotées ---------- */

.acgm-etapes {
	counter-reset: acgm-etape;
}

.acgm-etape {
	position: relative;
	padding-top: 4rem;
	counter-increment: acgm-etape;
}

.acgm-etape > * {
	margin-block: 0;
}

.acgm-etape > * + * {
	margin-block-start: 0.5rem;
}

.acgm-etape::before {
	content: counter(acgm-etape);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	color: var(--acgm-marine-fonce);
	font-family: var(--wp--preset--font-family--acgm-serif);
	font-size: 1.375rem;
	font-weight: 700;
	background: var(--acgm-sable);
	border-radius: 50%;
}

@media (min-width: 782px) {
	.acgm-etape + .acgm-etape::after {
		content: "";
		position: absolute;
		top: 1.5rem;
		left: calc(-1 * var(--wp--preset--spacing--40) + 0.25rem);
		width: calc(var(--wp--preset--spacing--40) - 0.5rem);
		border-top: 2px dotted var(--acgm-sable);
	}
}

/* ---------- 8. Infos pratiques ---------- */

.acgm-info {
	padding: var(--wp--preset--spacing--40);
}

.acgm-info > * {
	margin-block: 0;
}

.acgm-info > * + * {
	margin-block-start: 0.5rem;
}

.acgm-info .acgm-icone {
	margin-block-end: 0.75rem;
}

.acgm-info .acgm-icone img {
	width: 2.5rem;
	height: 2.5rem;
}

.acgm-info ul {
	padding-inline-start: 1.1rem;
}