/**
 * Page détail d'une activité — thème V3 (swizy-v3x).
 * Grille « fiche produit » : contenu à gauche, colonne collante à droite.
 *
 * Une colonne (défaut) : flux vertical dans l'ordre du DOM (galerie, titre/réservation, contenu).
 * Deux colonnes : à partir de md (900px dans le thème — pas les 768px de Bootstrap), SAUF si
 * la racine porte .activite-detail--stacked. La colonne droite s'étend sur les 2 rangées
 * (galerie / contenu) et son contenu, présenté en carte ombrée, se colle sous l'en-tête
 * sticky du site.
 *
 * .activite-detail--stacked est posée par le script de detail.php quand la fenêtre fait
 * moins de 700px de haut (plancher) ou que la carte collante ne tient pas dans sa hauteur
 * (carte + en-tête sticky + marges) : une carte
 * collante ne défile pas, son bas — donc le bouton Réserver — serait inatteignable. On
 * retombe alors sur la mise en page une colonne, CTA collant en bas compris (cf.
 * detail_generic_cta_script.php, qui écoute l'évènement activite-detail:layout).
 *
 * TODO : à porter dans eazyce-scss.3.0.0 (composant product-layout) une fois le
 * layout validé ; en attendant les valeurs (breakpoint md = 900px, espacements)
 * sont alignées sur les tokens du thème ($grid-breakpoints de eazyce-scss).
 */

.activite-detail {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

@media (min-width: 900px) {
	.activite-detail:not(.activite-detail--stacked) {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		column-gap: 3rem;
		row-gap: 0;
	}

	.activite-detail:not(.activite-detail--stacked) .activite-detail__gallery {
		grid-column: 1;
		grid-row: 1;
	}

	.activite-detail:not(.activite-detail--stacked) .activite-detail__content {
		grid-column: 1;
		grid-row: 2;
	}

	.activite-detail:not(.activite-detail--stacked) .activite-detail__gallery ~ .activite-detail__content {
		margin-top: 5rem;
	}

	.activite-detail:not(.activite-detail--stacked) .activite-detail__sidebar {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	/* Colonne droite : collante sous l'en-tête, en carte ombrée
	 * (élévation 4 du thème, comme .shadow-4 / l'en-tête du site). */
	.activite-detail:not(.activite-detail--stacked) .activite-detail__sidebar-inner {
		position: sticky;
		top: calc(var(--app-header-height, 0px) + 1.5rem);
		padding: 1.5rem;
		background-color: var(--bs-card-bg, #fff);
		border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.175));
		border-radius: var(--bs-border-radius-lg, 0.5rem);
		box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
	}
}

/* CTA collant en bas d'écran (une colonne, cf. detail_generic_cta_script.php) : à partir
 * de md (900px dans le thème) les boutons ne s'étirent plus sur toute la largeur — pertinent
 * surtout sur écran large mais bas — ils passent en ligne, centrés. Les utilitaires
 * Bootstrap du bloc (flex-column, gap-1) et des boutons (w-100) sont en !important :
 * on doit surenchérir. */
@media (min-width: 900px) {
	[data-activite-cta].toolbar--sticky {
		flex-direction: row !important;
		justify-content: center;
		gap: 1rem !important;
	}

	[data-activite-cta].toolbar--sticky .btn {
		width: auto !important;
		min-width: 16rem;
	}
}

/* Badges méta de la carte (dates, lieu, participants…) : contrairement au badge-md du thème
 * (hauteur fixe, nowrap, centré), une valeur longue peut passer sur deux lignes dans la
 * colonne étroite au lieu de déborder. Sélecteur à 2 classes pour passer devant le thème. */
.activite-detail .activite-detail__meta {
	height: auto;
	min-height: 32px;
	white-space: normal;
	text-align: left;
	justify-content: flex-start;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

/* Sélecteur de dates en plein écran (modal-fullscreen-sm-down : sous sm, qui vaut 600px dans le
 * thème V3 et non les 576px de Bootstrap). La modale occupe tout l'écran, on en répartit la
 * hauteur : les deux mois passent l'un sous l'autre au lieu d'être serrés côte à côte, le
 * calendrier est centré dans la place restante, et la barre d'actions tient le bas de l'écran.
 * Ces règles ne doublonnent pas la lib : son propre traitement plein écran est scopé sous
 * .dce-calendar__popper, qui n'existe plus ici. Et comme son pied est injecté dans son conteneur
 * (elle ne câble ses boutons que chez elle), il n'y a pas de .modal-footer à positionner.
 *
 * min-height: 0 tout au long de la chaîne : sans lui un élément flex refuse de devenir plus petit
 * que son contenu, les boîtes débordent de l'écran et il ne reste jamais d'espace libre à
 * répartir — ni pour centrer le calendrier, ni pour laisser le pied en bas. Le défilement a donc
 * lieu dans la zone des mois, et le pied reste à l'écran sans avoir besoin d'être collant. */
@media (max-width: 599.98px) {
	#modalDates .modal-body {
		display: flex;
		flex-direction: column;
		padding: 0;
		min-height: 0;
	}

	#lineaire-dates-calendar,
	#modalDates .dce-calendar__container {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
	}

	#modalDates .dce-calendar__calendars {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		flex-direction: column;
		gap: 1rem;
		padding: 0 0.5rem;
		/* safe : quand les deux mois dépassent la hauteur disponible, un center classique rend
		 * le haut du contenu inatteignable. Les navigateurs qui ignorent le mot-clé gardent la
		 * déclaration précédente. */
		justify-content: center;
		justify-content: safe center;
	}

	/* La lib pose flex: 1 sur chaque mois (.dce-calendar). En colonne, ce flex-grow lui fait
	 * remplir toute la zone : il ne reste aucun espace libre, et le justify-content ci-dessus
	 * n'a donc rien à répartir — d'où le calendrier collé en haut malgré le centrage. On lui
	 * rend sa hauteur de contenu ; flex-shrink à 0 pour qu'il déborde (et défile) plutôt que
	 * de se tasser quand les deux mois ne tiennent pas. */
	#modalDates .dce-calendar__calendars .dce-calendar {
		flex: 0 0 auto;
	}
}