/**
 * Galaxy Gym — Landing
 *
 * Valeurs reprises du thème de référence (kit Elementor + CSS de page) :
 * Kanit 600/800, bandeaux en skew(0, -20deg), images de carte à 460px,
 * titre de carte 30px / 0.93em, flèche à 20px, points de rupture 1024 / 767.
 */

/* =========================================================
   Bandeaux inclinés
   ========================================================= */

.gl-hero {
	--gl-accent: #f8ce03;
	--gl-band-text: #191919;
	--gl-hero-h: 75vh;
	--gl-band-w: 310px;
	--gl-band-size: 50px;
	--gl-skew: -20deg;
	--gl-band-align: center;
	--gl-pull: 200px;
	--gl-hero-overlay: 0;

	position: relative;
	/* Passe devant la section suivante même hors Elementor ; le réglage
	   « Superposition » agit en plus sur le conteneur du widget. */
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: var(--gl-band-align);
	min-height: var(--gl-hero-h);
	/* La pile descend sous la photo : la marge négative fait chevaucher la
	   section suivante, comme dans le modèle. */
	margin-bottom: calc(var(--gl-pull) * -1);
	padding: 0 20px;
	box-sizing: border-box;
	/* La photo est rognée à ses propres bords, mais la pile doit pouvoir en
	   sortir : pas d'overflow:hidden ici. */
	overflow: visible;
}

/* La section suivante est plus loin dans le DOM : sans z-index explicite elle
   se peint par-dessus la pile qui déborde. Le modèle fait la même chose
   (colonne des bandeaux z-index:3, section des cartes z-index:2). */
.elementor-widget-galaxy_skew_hero {
	position: relative;
	z-index: 5;
}

/* Elementor peut rogner le contenu débordant de ses conteneurs. */
.elementor-widget-galaxy_skew_hero,
.elementor-widget-galaxy_skew_hero > .elementor-widget-container {
	overflow: visible;
}

.gl-hero__bg,
.gl-hero__veil {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.gl-hero__bg {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.gl-hero__veil {
	background: #000;
	opacity: var(--gl-hero-overlay);
}

.gl-hero__stack {
	position: relative;
	/* Au-dessus de la photo et du voile. */
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	width: 100%;
	max-width: var(--gl-band-w);
	/* Décale la pile vers le bas pour qu'elle dépasse de la photo. */
	transform: translateY(var(--gl-pull));
}

.gl-hero__band {
	/* skew sur l'axe Y : c'est ce qui donne le parallélogramme penché. */
	transform: skew(0deg, var(--gl-skew));
	background-color: var(--gl-accent);
	color: var(--gl-band-text);
	padding: 5px 10px 20px 40px;
	box-sizing: border-box;
	text-decoration: none;
}

.gl-hero__text {
	display: block;
	font-family: "Kanit", "Bai Jamjuree", sans-serif;
	font-size: var(--gl-band-size);
	font-weight: 800;
	line-height: 0.8em;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: inherit;
}

.gl-hero__band--chevron {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	color: var(--gl-band-text);
}

a.gl-hero__band--chevron {
	transition: filter 0.25s ease;
}

a.gl-hero__band--chevron:hover,
a.gl-hero__band--chevron:focus-visible {
	filter: brightness(0.92);
}

/* =========================================================
   Grille d'activités
   ========================================================= */

.gl-cards {
	--gl-accent: #f8ce03;
	--gl-text: #ffffff;
	--gl-cols: 4;
	--gl-card-h: 460px;
	--gl-gap: 10px;
	--gl-overlay: 0.25;
	--gl-gray: 1;

	background-color: #191919;
	padding: 140px 30px 70px;
	box-sizing: border-box;
	/* Reste sous la pile du hero, qui la chevauche volontairement. */
	position: relative;
	z-index: 1;
}

.gl-cards__head {
	text-align: center;
	color: var(--gl-text);
	font-family: "Kanit", "Bai Jamjuree", sans-serif;
}

.gl-cards__eyebrow {
	margin: 0;
	font-size: 36px;
	font-weight: 600;
	line-height: 34px;
	text-transform: uppercase;
	color: inherit;
}

.gl-cards__title {
	margin: 0;
	padding-bottom: 40px;
	font-size: 90px;
	font-weight: 600;
	line-height: 70px;
	text-transform: uppercase;
	color: inherit;
}

.gl-cards__grid {
	display: grid;
	grid-template-columns: repeat(var(--gl-cols), minmax(0, 1fr));
	gap: var(--gl-gap);
	margin-top: 120px;
}

.gl-card {
	display: block;
	text-decoration: none;
	color: var(--gl-text);
}

.gl-card__media {
	display: block;
	position: relative;
	height: var(--gl-card-h);
	overflow: hidden;
}

.gl-card__bg {
	display: block;
	position: absolute;
	inset: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.gl-card__overlay {
	display: block;
	position: absolute;
	inset: 0;
	background: #000;
	opacity: var(--gl-overlay);
}

.gl-cards--zoom .gl-card:hover .gl-card__bg,
.gl-cards--zoom .gl-card:focus-visible .gl-card__bg {
	transform: scale(1.1);
}

/* ---- Noir et blanc ----
   Deux sens possibles : la photo se décolore au survol, ou l'inverse — elle est
   en noir et blanc au repos et reprend ses couleurs au survol. La transition
   porte sur transform ET filter pour que zoom et décoloration restent
   synchronisés. */

.gl-cards--gray-hover .gl-card__bg,
.gl-cards--gray-idle .gl-card__bg {
	transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1), filter 0.5s ease;
}

.gl-cards--gray-hover .gl-card:hover .gl-card__bg,
.gl-cards--gray-hover .gl-card:focus-visible .gl-card__bg {
	filter: grayscale(var(--gl-gray));
}

.gl-cards--gray-idle .gl-card__bg {
	filter: grayscale(var(--gl-gray));
}

.gl-cards--gray-idle .gl-card:hover .gl-card__bg,
.gl-cards--gray-idle .gl-card:focus-visible .gl-card__bg {
	filter: grayscale(0);
}

/* Titre à gauche, flèche calée à droite : la flèche ne bouge pas selon que le
   titre tient sur une ou deux lignes. */
.gl-card__content {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 10px;
	padding-top: 30px;
}

.gl-card__title {
	font-family: "Kanit", "Bai Jamjuree", sans-serif;
	font-size: 30px;
	font-weight: 600;
	line-height: 0.93em;
	text-transform: uppercase;
	color: var(--gl-text);
	transition: color 0.25s ease;
}

.gl-card__arrow {
	display: flex;
	align-items: center;
	color: var(--gl-accent);
	transition: transform 0.25s ease;
}

.gl-card:hover .gl-card__title,
.gl-card:focus-visible .gl-card__title {
	color: var(--gl-accent);
}

.gl-card:hover .gl-card__arrow,
.gl-card:focus-visible .gl-card__arrow {
	transform: translateX(5px);
}

.gl-card:focus-visible {
	outline: 2px solid var(--gl-accent);
	outline-offset: 4px;
}

/* =========================================================
   Responsive — mêmes points de rupture que le modèle
   ========================================================= */

@media (max-width: 1024px) {
	.gl-cards {
		padding: 90px 30px 50px;
	}

	.gl-cards__title {
		font-size: 62px;
		line-height: 56px;
	}

	.gl-cards__grid {
		margin-top: 60px;
	}

	.gl-hero__band {
		padding: 5px 30px 20px 30px;
	}
}

@media (max-width: 767px) {
	.gl-cards {
		padding: 60px 20px 40px;
	}

	.gl-cards__eyebrow {
		font-size: 26px;
		line-height: 26px;
	}

	.gl-cards__title {
		font-size: 44px;
		line-height: 40px;
		padding-bottom: 25px;
	}

	.gl-cards__grid {
		margin-top: 0;
	}

	.gl-card__title {
		font-size: 26px;
	}

	.gl-hero {
		padding: 0 20px;
	}

	.gl-hero__band {
		padding: 5px 20px 20px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gl-card__bg,
	.gl-card__title,
	.gl-card__arrow,
	.gl-cards--gray-hover .gl-card__bg,
	.gl-cards--gray-idle .gl-card__bg {
		transition: none;
	}

	.gl-cards--zoom .gl-card:hover .gl-card__bg {
		transform: none;
	}
}