/* Liste de cartes (accueil) */
.mbg-cards {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.mbg-card {
	background: var(--wp--preset--color--surface, #f6f6f6);
	border: 1px solid var(--wp--preset--color--border, #ececec);
	display: flex;
	flex-direction: column;
}

.mbg-card__media {
	aspect-ratio: 3 / 2;
	display: block;
	position: relative;
}

/* Enveloppe qui rogne la photo (zoom au survol) ; le lien lui-même laisse dépasser les fruits */
.mbg-card__clip {
	display: block;
	inset: 0;
	overflow: hidden;
	position: absolute;
}

.mbg-card__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
	width: 100%;
}

.mbg-card:hover .mbg-card__media img {
	transform: scale(1.04);
}

.mbg-card__title {
	font-size: var(--wp--preset--font-size--large, 1.5rem);
	margin: 1rem 1rem 0.25rem;
	text-align: center;
}

.mbg-card__title a {
	color: inherit;
	text-decoration: none;
}

.mbg-card .wp-block-button {
	margin: auto 1rem 1rem;
	text-align: center;
}

/* Caractéristiques : pastille ronde + icône au-dessus de la valeur (comme l'ancien site) */
.mbg-specs {
	color: #555;
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat(4, 1fr);
	list-style: none;
	margin: 1rem auto;
	max-width: 32rem;
	padding: 0;
	text-align: center;
}

.mbg-spec {
	align-items: center;
	display: flex;
	flex-direction: column;
	font-size: 0.9rem;
	gap: 0.4rem;
	line-height: 1.25;
}

.mbg-spec__icon {
	background: var(--wp--preset--color--border, #ececec) center / 52% no-repeat;
	border-radius: 50%;
	display: block;
	height: 57px;
	width: 57px;
}

.mbg-spec--surface .mbg-spec__icon {
	background-image: url("icons/surface.svg");
}

.mbg-spec--capacite .mbg-spec__icon {
	background-image: url("icons/capacite.svg");
}

.mbg-spec--chambres .mbg-spec__icon {
	background-image: url("icons/chambres.svg");
}

.mbg-spec--sdb .mbg-spec__icon {
	background-image: url("icons/sdb.svg");
}

/* Dans les cartes : un peu plus petit, 4 colonnes serrées */
.mbg-card .mbg-specs {
	gap: 0.25rem;
	margin: 0.75rem 0.75rem 1rem;
	max-width: none;
}

.mbg-card .mbg-spec {
	font-size: 0.78rem;
}

.mbg-card .mbg-spec__icon {
	background-color: #fff;
	height: 48px;
	width: 48px;
}

/* Les trois gîtes en dessin */
.mbg-dessins {
	display: flex;
	align-items: flex-end;
	flex-wrap: nowrap;
	gap: 1.5rem clamp(0.75rem, 5vw, 3.5rem);
	justify-content: center;
	margin: 1.5rem 0;
}

.mbg-dessin {
	margin: 0;
	min-width: 0;
	text-align: center;
}

.mbg-dessin img {
	display: block;
	height: auto;
	margin: 0 auto 0.5rem;
	max-height: 90px;
	max-width: 100%;
	width: auto;
}

.mbg-dessin figcaption {
	color: var(--wp--preset--color--primary, #135461);
	font-family: var(--wp--preset--font-family--bree, inherit);
	font-size: clamp(1rem, 4vw, 1.25rem);
}

/* Bureau : dessins plus grands (le mobile reste inchange) */
@media (min-width: 782px) {
	.mbg-dessins {
		gap: 1.5rem 5rem;
	}

	.mbg-dessin img {
		height: 130px;
		max-height: none;
	}

	.mbg-dessin figcaption {
		font-size: 1.6rem;
	}
}

/* Calendrier Google à la demande (accueil et pages gîte) */
.mbg-gcal iframe {
	border: 1px solid #777;
	display: block;
	height: 400px;
	width: 100%;
}

.mbg-gcal__ph {
	align-items: center;
	background: var(--wp--preset--color--surface, #f6f6f6);
	border: 1px solid var(--wp--preset--color--border, #ececec);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	justify-content: center;
	min-height: 220px;
	padding: 1.5rem;
	text-align: center;
}

.mbg-gcal__ph p {
	color: #555;
	font-size: 0.9rem;
	margin: 0;
	max-width: 36rem;
}

.mbg-gcal__ph button {
	cursor: pointer;
}

/* Bureau : dessins plus grands (le mobile reste inchange) */
@media (min-width: 782px) {
	.mbg-dessins {
		gap: 1.5rem 5rem;
	}

	.mbg-dessin img {
		height: 130px;
		max-height: none;
	}

	.mbg-dessin figcaption {
		font-size: 1.6rem;
	}
}

/* Calendrier Google */
.mbg-calendar iframe {
	border: 1px solid #777;
	height: 400px;
	width: 100%;
}

/* Prix « à partir de » dans la carte d'un gîte */
.mbg-card__price {
	color: var(--wp--preset--color--accent-dark, #b8382c);
	font-family: var(--wp--preset--font-family--bree, inherit);
	font-size: 1.05rem;
	margin: 0.75rem 1rem 1.1rem;
	text-align: center;
}

/* Carte « ensemble » (La Maison du Bonheur) : en premier ; sur toute la largeur en bureau, photo à gauche et texte à droite */
.mbg-card--ensemble {
	grid-column: 1 / -1;
}

@media (min-width: 782px) {
	.mbg-card--ensemble {
		align-items: center;
		column-gap: 0;
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	}

	.mbg-card--ensemble .mbg-card__media {
		aspect-ratio: 3 / 2;
		grid-column: 1;
		grid-row: 1 / span 6;
		height: 100%;
		min-height: 22rem;
	}

	.mbg-card--ensemble > :not(.mbg-card__media) {
		grid-column: 2;
	}

	.mbg-card--ensemble .mbg-card__title {
		font-size: 1.9rem;
	}

	.mbg-card--ensemble .wp-block-button {
		margin-top: 0.5rem;
	}
}

/* Bouton « Plus d'info » des cartes : bleu plein au repos, transparent au survol */
.mbg-card .wp-block-button__link {
	background: var(--wp--preset--color--primary, #135461);
	border-color: var(--wp--preset--color--primary, #135461);
	color: var(--wp--preset--color--base, #fff);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.mbg-card .wp-block-button__link:hover,
.mbg-card .wp-block-button__link:focus-visible {
	background: transparent;
	color: var(--wp--preset--color--primary, #135461);
}

/* Bouton « Réserver à partir de » sous la photo d'une fiche */
.mbg-reserve {
	margin: 1.25rem 0 0;
	text-align: center;
}

.mbg-reserve .wp-block-button {
	margin: 0;
}

.mbg-reserve__note {
	color: #555;
	font-size: 0.9rem;
	margin: 0.6rem 0 0;
}

.mbg-reserve .wp-block-button.mb-btn-tarif .wp-block-button__link {
	display: inline-block;
	font-size: clamp(1rem, 4.6vw, 1.3rem);
	height: auto;
	line-height: 1.25;
	padding: 0.8rem 1.3rem;
	white-space: normal;
}

.mbg-reserve__main {
	display: block;
	font-size: 1.15em;
	letter-spacing: 0.04em;
}

.mbg-reserve__sub {
	display: block;
	font-size: 0.72em;
	letter-spacing: 0.03em;
	margin-top: 0.15em;
	opacity: 0.95;
}

/* Liste d'infos sous le bouton (ménage, taxe de séjour, linge) */
.mbg-reserve__list {
	display: inline-block;
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 0.9rem 0 0;
	padding-left: 1.2rem;
	text-align: left;
}

.mbg-reserve__list li {
	margin: 0.2rem 0;
}
/* Petits fruits en couleur sur les photos des cartes (comme sur l'ancien site) : en bas à droite, débordant un peu sous la photo */
.mbg-fruit {
	bottom: -1.5rem;
	display: block;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
	pointer-events: none;
	position: absolute;
	right: 0.7rem;
}

.mbg-fruit--poire,
.mbg-fruit--pomme,
.mbg-fruit--figue {
	background: center / contain no-repeat;
	height: 5.2rem;
	width: 5.2rem;
}

.mbg-fruit--pomme {
	height: 4.6rem;
	width: 4.6rem;
}

.mbg-fruit--poire {
	background-image: url("icons/fruit-poire.svg");
}

.mbg-fruit--pomme {
	background-image: url("icons/fruit-pomme.svg");
}

.mbg-fruit--figue {
	background-image: url("icons/fruit-figue.svg");
}

/* Sous-titre de la carte « ensemble » : plus petit, en italique */
.mbg-card__sub {
	color: #555;
	font-size: 0.95rem;
	font-style: italic;
	margin: 0 1rem 0.5rem;
	text-align: center;
}

@media (max-width: 781px) {
	.mbg-fruit--poire,
	.mbg-fruit--pomme,
	.mbg-fruit--figue {
		height: 4.4rem;
		width: 4.4rem;
	}

	.mbg-fruit--pomme {
		height: 3.9rem;
		width: 3.9rem;
	}
}
/* Pictos des lieux (piscine, salles) sur la carte « ensemble » : deuxième rangée sous les pictos habituels */
.mbg-spec--piscine .mbg-spec__icon {
	background-image: url("icons/lieu-piscine.svg");
}

.mbg-spec--reception .mbg-spec__icon {
	background-image: url("icons/lieu-reception.svg");
}

.mbg-spec--jeux .mbg-spec__icon {
	background-image: url("icons/lieu-jeux.svg");
}

.mbg-spec--billard .mbg-spec__icon {
	background-image: url("icons/lieu-billard.svg");
}

.mbg-card .mbg-specs--lieux {
	margin-top: 0;
}