/*
======================================================================
Much Ado
Patterns
======================================================================
*/

/* =====================================================
   Pattern IMAGE + QUOTE
===================================================== */

.ma-section{
	max-width:var(--container-small);
	margin:0 auto;
	padding:4rem 0;
	padding:var(--space-48) 0;
}

.ma-columns{
	gap:6rem;
}

.ma-media{
	position:relative;
}

.ma-image{
	position:relative;
}

.ma-image::after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(
		to top,
		rgba(0, 0, 0, 0.7) 0%,
		rgba(0,0,0,.30) 45%,
		transparent 100%
	);
	pointer-events:none;
}

.ma-media figure{
	margin:0;
	padding:0 2rem;
}

.ma-media img{
	width:100%;
	aspect-ratio:4/5;
	object-fit:cover;
}

.ma-quote{
	position:absolute;
	/* Le décalage ne peut jamais dépasser la moitié de l'espace
	   restant autour du conteneur : il se réduit tout seul et
	   atteint 0 dès que le conteneur touche les bords du viewport,
	   sans jamais provoquer de débordement horizontal. */
	right:calc(-1 * clamp(0px, (100vw - var(--container-small)) / 2, 4rem));
	bottom:1rem;
	z-index:10;
	width:100%;
	padding:2rem;
	background:#2b2727;
	box-shadow:0 20px 40px rgba(0,0,0,.35);
}

.ma-quote p.much-quote{
	margin:0 0 1rem;
	font-family:var(--font-heading);
	font-size:var(--fs-md);
	color:var(--color-crown);
}

.ma-quote p.much-author{
	color:var(--color-textdarker);
}

/* =====================================================
   Pattern TEAM GRID
===================================================== */

.ma-team-grid{
	gap:3rem;
}

.ma-team-photo{
	position:relative;
	margin:0 0 1.5rem;
	overflow:hidden;
}

.ma-team-photo img{
	width:100%;
	aspect-ratio:6/5;
	object-fit:cover;
	transition:var(--transition);
}

.ma-team-photo::after{
	content:"";
	position:absolute;
	inset:0;
	background:rgba(0,0,0,0);
	pointer-events:none;
	transition:var(--transition);
}

.ma-team-photo:hover img{
	transform:scale(1.02);
}

.ma-team-photo:hover::after{
	background:rgba(0,0,0,.35);
}

.ma-team-name{
	margin:.5rem 0 .25rem;
	font-family:var(--font-heading);
	font-size:2rem;
	color:var(--color-white);
}

.ma-team-role{
	margin:0;
	font-size:var(--font-body-size);
	color:var(--color-textdarker);
}

/* =====================================================
   RESPONSIVE — TABLETTE (≤ 968px)
===================================================== */

@media (max-width:968px){

	.ma-section{
		padding:var(--space-32) 0;
	}

	.ma-columns{
		gap:3rem;
	}

	.ma-quote{
		bottom:.75rem;
		padding:1.5rem;
	}

	.ma-team-grid{
		gap:2rem;
	}

	.ma-team-name{
		font-size:1.75rem;
	}
}

/* =====================================================
   RESPONSIVE — MOBILE (≤ 600px)
===================================================== */

@media (max-width:600px){

	.ma-section{
		padding:var(--space-24) 0;
	}

	.ma-columns{
		gap:1.5rem;
	}

	/* Le décalage absolu (right:...) et le chevauchement par
	   marge négative sont fragiles avec une citation de longueur
	   variable : on repasse en flux normal, pleine largeur, avec
	   un espacement positif qui s'adapte automatiquement au
	   nombre de lignes. */
	.ma-quote{
		position:static;
		width:100%;
		margin-top:1.5rem;
		padding:1.25rem 1.5rem;
	}

	.ma-quote p.much-quote{
		font-size:1rem;
	}

	.ma-media img{
		aspect-ratio:3/2;
	}

	.ma-team-grid{
		gap:1.5rem;
	}

	.ma-team-photo{
		margin-bottom:1rem;
	}

	.ma-team-name{
		font-size:var(--fs-md);
	}
}
/* =====================================================
   Classe optionnelle : icon-columns

   À ajouter dans "Classes CSS supplémentaires" du bloc Colonnes
   concerné, plutôt que d'imposer ce comportement à tous les blocs
   Colonnes du site — celui-ci a besoin d'un traitement particulier
   (icônes réduites, 2 par ligne sur mobile), mais ce n'est pas le cas
   général.
===================================================== */

/*
| L'icône ne remplit plus toute la largeur de sa colonne : elle est
| centrée à 50% de celle-ci, quelle que soit la taille de l'écran.
*/
.icon-columns img{
	max-width:50%;
	margin-left:auto;
	margin-right:auto;
	display:block;
}

/* =====================================================
   Classe optionnelle : cols-2-mobile

   Indépendante de icon-columns : garde 2 colonnes par ligne sur
   mobile plutôt que l'empilement à 100% par défaut de Gutenberg,
   quel que soit le réglage "Empiler sur mobile" du bloc (qui ne
   connaît que "tout empiler" ou "ne rien empiler").

   Réutilisable sur n'importe quel bloc Colonnes, seule ou combinée
   avec icon-columns (les deux classes dans "Classes CSS
   supplémentaires", séparées par un espace).

   !important nécessaire : Gutenberg pose la largeur de colonne
   directement en style inline sur la balise, qui l'emporterait sinon
   sur une règle de feuille de style classique.
===================================================== */
@media (max-width:768px){

	.cols-2-mobile.wp-block-columns{
		flex-wrap:wrap !important;
		row-gap:2.5rem !important;
	}

	.cols-2-mobile > .wp-block-column{
		flex-basis:50% !important;
		width:50% !important;
	}

}