/*
Theme Name: Toogether
Theme URI: https://toogether.to
Author: Toogether
Description: Thème de blocs sur mesure pour Toogether — événements francophones à Toronto. Identité violet et or, doodles au trait, entretien minimal.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.2
Version: 0.2.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: toogether
Tags: block-templates, full-site-editing, translation-ready
*/

.format-carte {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 260px;
	border-radius: 6px;
	padding: var(--wp--preset--spacing--40);
	gap: var(--wp--preset--spacing--20);
	text-decoration: none;
	color: inherit;
	position: relative;
	overflow: hidden;
	transition: transform 160ms ease;
}

.format-carte--creme { background: var(--wp--preset--color--blanc); border: 1px solid var(--wp--preset--color--trait); }
.format-carte--violet { background: var(--wp--preset--color--violet); color: var(--wp--preset--color--creme); }
.format-carte--or { background: var(--wp--preset--color--or); }
.format-carte--lavande { background: var(--wp--preset--color--lavande); }

.format-carte__doodle {
	position: absolute;
	right: -14px;
	bottom: -14px;
	width: 124px;
	height: 124px;
	opacity: 0.26;
	pointer-events: none;
}

.format-carte h3 {
	font-size: var(--wp--preset--font-size--grand);
}

.format-carte p {
	font-size: 1rem;
	line-height: 1.5;
}

.hero-image img {
	border-radius: 8px;
	width: 100%;
	height: auto;
}

@media (hover: hover) {
	.format-carte:hover { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
	.format-carte { transition: none; }
	.format-carte:hover { transform: none; }
}

.eyebrow {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--etiquette);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--or-profond);
}

.chiffre {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--titre);
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--violet);
}

:where(a:focus-visible, button:focus-visible, .format-carte:focus-visible) {
	outline: 2px solid var(--wp--preset--color--violet);
	outline-offset: 3px;
}

.contact-carte {
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	padding: var(--wp--preset--spacing--40);
	height: 100%;
}

.contact-carte--violet { background: var(--wp--preset--color--violet); color: var(--wp--preset--color--creme); }
.contact-carte--creme { background: var(--wp--preset--color--blanc); border: 1px solid var(--wp--preset--color--trait); }

.contact-carte__doodle {
	position: absolute;
	right: -14px;
	top: -14px;
	width: 96px;
	height: 96px;
	opacity: 0.22;
	pointer-events: none;
}

.contact-lien {
	display: inline-block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.0625rem;
	text-decoration: none;
	border-bottom: 2px solid currentColor;
	padding-bottom: 2px;
}

.contact-lien--or { color: var(--wp--preset--color--or); }
.contact-lien--violet { color: var(--wp--preset--color--violet); }

.contact-lien:hover { opacity: 0.75; }

.format-detail {
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	padding: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--30);
}

.format-detail:last-child { margin-bottom: 0; }

.format-detail--creme { background: var(--wp--preset--color--creme); border: 1px solid var(--wp--preset--color--trait); }
.format-detail--violet { background: var(--wp--preset--color--violet); color: var(--wp--preset--color--creme); }
.format-detail--or { background: var(--wp--preset--color--or); }
.format-detail--lavande { background: var(--wp--preset--color--lavande); }

.format-detail--violet .eyebrow { color: var(--wp--preset--color--or); }
.format-detail--lavande .eyebrow { color: var(--wp--preset--color--violet); }

.format-detail h2 {
	margin: .35rem 0 .6rem;
	font-size: var(--wp--preset--font-size--grand);
}

.format-detail p:not(.format-detail__date) {
	max-width: 48ch;
	font-size: var(--wp--preset--font-size--moyen);
	line-height: 1.5;
}

.format-detail__photo {
	margin: 0;
}

.format-detail__photo img {
	border-radius: 6px;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

/* Emplacement vide : repère visuel tant qu'aucune photo n'est choisie */
.format-detail__photo:not(:has(img[src])) {
	min-height: 220px;
	border: 2px dashed currentColor;
	border-radius: 6px;
	opacity: 0.35;
}

.photo-ronde img {
	border-radius: 8px;
	width: 100%;
	height: auto;
}

.format-detail__faits {
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	max-width: 46rem;
}

.format-detail__faits li {
	font-size: 0.9375rem;
	line-height: 1.45;
}

.format-detail__faits strong {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--etiquette);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.65;
	margin-bottom: 2px;
}

@media (max-width: 600px) {
	.format-detail { padding: var(--wp--preset--spacing--40); }
	.format-detail__photo img { aspect-ratio: 3 / 2; }
}

/* Liste des pages dans le pied de page */
.liste-pied,
.liste-pied .wp-block-pages-list__item {
	list-style: none;
	margin: 0;
	padding: 0;
}

.liste-pied .wp-block-pages-list__item {
	margin-bottom: var(--wp--preset--spacing--20);
}

.liste-pied a {
	color: var(--wp--preset--color--creme);
	text-decoration: none;
}

.liste-pied a:hover {
	color: var(--wp--preset--color--or);
	text-decoration: underline;
}

/* Ligne « prochaine date » des blocs de format */
.format-detail__date {
	display: inline-block;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0.45rem 0.95rem;
	border: 1.5px solid currentColor;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.3;
}

.format-detail__date a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.format-detail__date a:hover {
	text-decoration-thickness: 2px;
}

/* Galerie : défilement horizontal sur mobile, grille sur desktop */
@media (max-width: 781px) {
	.wp-block-gallery.galerie-defilante.has-nested-images {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 0;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 0.75rem;
		scrollbar-width: thin;
		scrollbar-color: var(--wp--preset--color--trait) transparent;
	}

	.wp-block-gallery.galerie-defilante.has-nested-images figure.wp-block-image {
		flex: 0 0 78%;
		width: 78%;
		max-width: 78%;
		margin: 0;
		scroll-snap-align: center;
	}

	.wp-block-gallery.galerie-defilante.has-nested-images figure.wp-block-image img {
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 2;
		object-fit: cover;
		border-radius: 6px;
	}

	.wp-block-gallery.galerie-defilante.has-nested-images::-webkit-scrollbar {
		height: 4px;
	}

	.wp-block-gallery.galerie-defilante.has-nested-images::-webkit-scrollbar-thumb {
		background: var(--wp--preset--color--trait);
		border-radius: 999px;
	}
}

/* Blocs « principes » de la page À propos */
.principe {
	position: relative;
	overflow: hidden;
	height: 100%;
	border: 1px solid var(--wp--preset--color--trait);
	border-radius: 6px;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--blanc);
}

.principe__doodle {
	position: absolute;
	right: -12px;
	top: -12px;
	width: 88px;
	height: 88px;
	color: var(--wp--preset--color--violet);
	opacity: 0.18;
	pointer-events: none;
}

.principe h3 {
	margin: 0 0 .45rem;
	font-size: var(--wp--preset--font-size--moyen);
}

.principe p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
}