/* Grille des projets (page « Projekte ») : une carte = photo, nom, une ligne
   grise. Deux par ligne, une sur téléphone. Toute la carte est un seul lien,
   celui du titre, étendu à la carte par son ::after. */

.projets-avavera .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 64px 40px;
	margin: 48px 0 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 768px) {
	.projets-avavera .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
		margin-top: 32px;
	}
}

.projets-avavera .wp-block-post {
	position: relative;
	margin: 0;
}

.projets-avavera .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: #eef1f4;
}
.projets-avavera .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s cubic-bezier(.2, .6, .2, 1);
}
.projets-avavera .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

.projets-avavera .wp-block-post-title {
	margin: 20px 0 4px;
	font: 400 clamp(20px, calc(.6vw + 15px), 26px) / 1.3 "Open Sans", sans-serif;
	/* La typographie globale de Stackable impose 2.5em !important aux h2 des
	   blocs WordPress sous 767 px. */
	font-size: clamp(20px, calc(.6vw + 15px), 26px) !important;
	color: #1e293b;
}
.projets-avavera .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}
.projets-avavera .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.projets-avavera .wp-block-post:hover .wp-block-post-title a,
.projets-avavera .wp-block-post-title a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.projets-avavera .wp-block-post-excerpt,
.projets-avavera .wp-block-post-excerpt__excerpt {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #64748b;
}

/* Page d'un projet, sur téléphone. Les deux classes se posent dans
   « Erweitert → Zusätzliche CSS-Klasse(n) » du bloc Columns concerné, une
   fois sur la page-modèle : les projets dupliqués en héritent.
   Sélecteurs à trois classes : Stackable écrit ses propres règles en
   !important, à deux classes, après cette feuille. */

@media (max-width: 767px) {
	/* projet-fiche : Projekttyp, Standort, System, Jahr. Quatre colonnes sur
	   ordinateur ; sur téléphone aussi, en petit, comme une fiche technique
	   sous la photo : libellé gris au-dessus, valeur dessous, sans l'icône,
	   qui prendrait un quart de la largeur. */
	.projet-fiche.stk-block-columns.stk-block {
		padding-top: 28px !important;
		padding-bottom: 28px !important;
	}
	.projet-fiche > .stk-row.stk-block-content {
		display: grid !important;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0 12px !important;
	}
	.projet-fiche .stk-block-icon-label .stk-block-icon {
		display: none !important;
	}
	.projet-fiche .stk-block-column .stk-block-icon-label {
		margin-bottom: 0 !important;
	}
	.projet-fiche .stk-block-heading .stk-block-heading__text {
		font-size: 11.5px !important;
		line-height: 1.3 !important;
		color: #64748b !important;
	}
	.projet-fiche .stk-block-text .stk-block-text__text {
		margin-top: 4px !important;
		font-size: 13px !important;
		line-height: 1.35 !important;
		hyphens: auto;
		overflow-wrap: anywhere;
	}

	/* projet-galerie : les photos gardent leurs proportions au lieu d'être
	   rognées à 450 px de haut. */
	.projet-galerie .stk-block-image .stk-img-wrapper {
		height: auto !important;
	}
	.projet-galerie .stk-block-image .stk-img-wrapper img {
		height: auto !important;
	}
}