/*
 * Espacements et habillage propres aux pages service (voir
 * patterns/service-page.php et templates/page-service.html) : même logique
 * que assets/css/homepage.css pour la page d'accueil.
 */
.solea-service-section {
	padding-block: clamp(40px, 6vw, 80px);
}

/*
 * solea/service-hero occupe déjà toute la largeur en "alignfull" (voir ce
 * bloc) et doit rester flush sous le header, comme .solea-home-main pour
 * solea/hero-panels sur l'accueil. Le débordement horizontal causé par
 * l'escape 100vw de ce bloc et de solea/pricing-tabs doit être coupé, mais
 * "overflow-x: hidden" fait de <main> un conteneur défilable au sens du DOM
 * (overflow-y bascule alors sur "auto", cf. spec CSS Overflow) — avec ce
 * contenu précis, ça suffisait à piéger la molette/le clavier : le scroll de
 * la page entière restait bloqué au chargement. "overflow-x: clip" coupe le
 * débordement sans créer de scrollport, donc sans ce risque.
 */
.solea-service-main {
	margin-block-start: 0;
	overflow-x: clip;
}

.solea-service-main + footer {
	margin-block-start: 0;
}

/*
 * Titre de section générique (ex. "L'opérateur du réseau") : soulignement
 * dégradé, même construction que .solea-news-section__heading
 * (assets/css/homepage.css) et .solea-service-showcase__heading
 * (blocks/service-showcase/style.css).
 */
.solea-section-heading {
	position: relative;
	display: inline-block;
	margin: 0 0 24px;
	padding-bottom: 12px;
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--base);
}

.solea-section-heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: min(220px, 70%);
	height: 3px;
	border-radius: 999px;
	background: linear-gradient(-90deg, var(--wp--preset--color--brand-purple) 0%, var(--wp--preset--color--brand-accent-light) 100%);
}

/*
 * Liste d'icônes empilée : le conteneur dessine les liserés entre lignes
 * (même principe que .solea-contact-methods, assets/css/homepage.css) plutôt
 * que chaque solea/card--icon ne porte sa propre bordure. Le fond de la
 * section (#0B0713, voir .solea-service-operator ci-dessous) transparaît
 * dans le gap pour former le liseré, donc pas de fond dédié ici. "height: 100%"
 * + "grid-auto-rows: 1fr" fait grandir les 4 lignes à parts égales pour
 * remplir la colonne (voir .solea-operator-grid, même hauteur que la colonne
 * de gauche).
 */
.solea-icon-grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: 1fr;
	gap: 4px;
	height: 100%;
}

.solea-icon-grid > * {
	margin-block-start: 0 !important;
	background: var(--wp--preset--color--brand-canvas);
}

/*
 * Panneau "L'opérateur du réseau" : deux colonnes à fond brand-canvas
 * flottant sur le fond de page plus sombre (#0B0713, voir img.png), séparées
 * par le même liseré de 4px que .solea-icon-grid.
 */
.solea-service-operator {
	background: #0b0713;
}

@media (max-width: 768px) {
	.solea-service-operator {
		background: var(--wp--preset--color--brand-canvas);
	}
}

/*
 * Les deux wp:column ont chacune "verticalAlignment":"center" (centre leur
 * propre contenu), ce qui les fait aussi s'auto-aligner en hauteur naturelle
 * dans la ligne flex — on force le stretch ici pour que les deux colonnes
 * fassent la même hauteur, quel que soit leur contenu.
 */
.solea-operator-grid.wp-block-columns {
	gap: 4px;
	align-items: stretch;
}

.solea-operator-grid > .wp-block-column {
	align-self: stretch;
}

.solea-operator-intro {
	display: grid;
	gap: 14px;
	align-content: center;
	padding: 36px;
	background: var(--wp--preset--color--brand-canvas);
}

.solea-operator-intro p {
	color: #c6bbd8;
}

.solea-operator-logo img {
	display: block;
	width: auto;
	max-width: 145px;
	height: auto;
	/* Wordmark fourni en sombre, forcé en blanc : même technique que
	 * .solea-service-hero__logo. */
	filter: brightness(0) invert(1);
}

/*
 * Section itinéraire : wp:media-text natif, habillé en carte unique
 * (fond accent + coins arrondis + clip) posée sur le fond canvas de la
 * page, avec l'accroche "Soléa" et les boutons lisibles sur le violet.
 */
.solea-service-itinerary h2,
.solea-service-itinerary p {
	color: var(--wp--preset--color--base);
}

.solea-service-itinerary__eyebrow {
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-accent-light) !important;
}

.solea-itinerary-media-text {
	background: var(--wp--preset--color--brand-accent);
	border-radius: 24px;
	overflow: hidden;
}

.solea-itinerary-media-text .wp-block-media-text__content {
	padding: 56px 48px;
}

.solea-itinerary-media-text .wp-block-media-text__media {
	min-height: 435px;
}

.solea-itinerary-media-text .wp-block-media-text__media img {
	height: 100%;
	object-fit: cover;
}

.solea-service-itinerary .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--brand-purple-dark);
}

.solea-service-itinerary .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--wp--preset--color--brand-lavender);
	color: var(--wp--preset--color--brand-purple-dark);
}

.solea-service-itinerary .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
}