/* Away Consultants — cartes */
.awc-grid {
	--awc-teal: #1d5a4b;
	--awc-purple: #7a3191;
	--awc-card: #f3efe4;
	--awc-photo-bg: #fbf8f1;
	display: grid;
	/*
	 * 4 colonnes au maximum, 3 quand les cartes auraient moins de 232 px.
	 * On se fie à la largeur réelle de la grille, pas à celle de l'écran :
	 * ça reste juste peu importe la largeur de la rangée Divi.
	 */
	grid-template-columns: repeat(auto-fill, minmax(max(232px, calc((100% - 72px) / 4)), 1fr));
	gap: 24px;
	margin: 0 0 2em;
}
@media (max-width: 1024px) {
	.awc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 680px) {
	.awc-grid { grid-template-columns: 1fr; gap: 20px; }
	.awc-grid .awc-card { padding: 28px 24px; border-radius: 28px; }
}

.awc-card {
	container-type: inline-size;
	background: var(--awc-card);
	border-radius: 32px;
	padding: 30px 24px;
}

/* Carte étroite : photo au-dessus. Carte large : photo à gauche (comme la maquette). */
.awc-inner { display: flex; flex-direction: column; gap: 20px; }
@container (min-width: 460px) {
	.awc-inner { flex-direction: row; gap: 36px; }
}

.awc-grid .awc-photo {
	flex: 0 0 100px;
	box-sizing: border-box;
	width: 100px !important;
	height: 100px !important;
	max-width: 100px;
	max-height: 100px;
	padding: 0;
	border-radius: 50%;
	overflow: hidden;
	background: var(--awc-photo-bg);
	display: flex;
	align-items: center;
	justify-content: center;
}
.awc-grid .awc-photo img {
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
	margin: 0;
	border-radius: 0;
}
.awc-initials {
	color: var(--awc-teal);
	font-size: 30px;
	font-weight: 700;
}

.awc-body { min-width: 0; color: var(--awc-teal); font-family: "Atkinson Hyperlegible", sans-serif; font-size: 16px; line-height: 18px; }

.awc-grid .awc-name {
	margin: 0 0 16px;
	padding: 0;
	color: var(--awc-teal);
	font-size: 23px;
	line-height: 1.2;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
}
.awc-name span { display: block; }

.awc-loc {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 12px;
}
.awc-pin { flex: 0 0 auto; color: var(--awc-teal); margin-top: -2px; width: 22px; height: 22px; }
.awc-loc p { margin: 0; font-size: 16px; line-height: 18px; color: var(--awc-teal); }
.awc-loc p span { display: block; }

.awc-grid ul.awc-langs,
.awc-grid ul.awc-tags {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}
.awc-langs { gap: 6px 16px; margin-bottom: 16px !important; }
.awc-langs li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	background: transparent;
	color: var(--awc-teal);
	font-size: 16px;
	line-height: 18px;
}
.awc-flag {
	width: auto !important;
	height: 14px !important;
	border-radius: 2px;
	margin: 0 !important;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

/*
 * Plusieurs colonnes : les cartes d'une même rangée partagent leurs lignes (subgrid),
 * donc les qualités commencent à la même hauteur peu importe le nombre de langues.
 * Une carte ne peut pas être à la fois un subgrid et un conteneur (@container) :
 * le conteneur ne sert qu'en une colonne, où il n'y a rien à aligner.
 */
@supports (grid-template-rows: subgrid) {
	@media (min-width: 681px) {
		.awc-grid .awc-card {
			container-type: normal;
			display: grid;
			grid-row: span 5;
			grid-template-rows: subgrid;
			row-gap: 0;
		}
		.awc-grid .awc-inner,
		.awc-grid .awc-body { display: contents; }
		.awc-grid .awc-photo { grid-row: 1; margin-bottom: 20px; }
		.awc-grid .awc-name { grid-row: 2; }
		.awc-grid .awc-loc { grid-row: 3; }
		.awc-grid ul.awc-langs { grid-row: 4; }
		.awc-grid ul.awc-tags { grid-row: 5; align-self: start; }
		/* display: contents retire .awc-body : on remet sa police sur ses enfants. */
		.awc-grid .awc-card { color: var(--awc-teal); font-family: "Atkinson Hyperlegible", sans-serif; font-size: 16px; line-height: 18px; }
	}
}

/* Cartes en attente du bouton « Voir plus » (le display: grid ci-dessus l'emporterait sur hidden). */
.awc-grid .awc-card[hidden] { display: none !important; }

.awc-more-wrap {
	display: flex;
	justify-content: center;
	margin: 0 0 2em;
}
/*
 * Le look vient de la classe btn-fleche du thème. :where() garde ces réglages
 * à priorité zéro : le style du thème l'emporte toujours.
 */
:where(.awc-more) {
	cursor: pointer;
	font-family: inherit;
}

.awc-tags { gap: 12px 14px; }
.awc-tags li {
	margin: 0;
	padding: 5px 14px;
	border-radius: 999px;
	background: var(--awc-purple);
	color: #fff;
	font-size: 16px;
	line-height: 18px;
}

/* Portable : cartes plus étroites, on resserre pour garder chaque qualité sur une seule ligne. */
@media (min-width: 1025px) and (max-width: 1400px) {
	.awc-grid .awc-card { padding: 30px 18px; }
	.awc-grid .awc-tags li { padding: 5px 10px; }
}