/*
 * Espacements et habillage propres aux sections de la page d'accueil
 * (voir patterns/homepage.php) : chaque section utilise le même wrapper
 * ".solea-home-section" pour un rythme vertical cohérent, et la colonne de
 * contact reprend le fond violet de la maquette pour que les icônes de
 * solea/contact-method (pensées pour un fond sombre) restent lisibles.
 */
.solea-home-section {
	padding-block: clamp(40px, 6vw, 80px);
}

/*
 * Section "Nos actualités" : fond sombre (m2A Fond de page) posé via
 * l'attribut natif backgroundColor du groupe, pour que .solea-post-card
 * (violet) ressorte comme dans la maquette de référence (img.png).
 * Le titre porte une classe "solea-" pour échapper à la règle générique
 * h2 d'assets/css/native-typography.css (majuscules + lavande) : ici on
 * veut la casse d'origine, en blanc, avec un soulignement dégradé propre
 * à cette section.
 */
h2.solea-news-section__heading {
	position: relative;
	display: inline-block;
	margin: 0 0 32px;
	padding-bottom: 12px;
	font-family: var(--wp--preset--font-family--corsa-grotesk);
	font-size: 3.25rem !important;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--base);
}

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

/*
 * Core's global styles give every direct child of `.wp-site-blocks` a
 * margin-block-start equal to the theme's block-gap, via the zero-specificity
 * `:where(.wp-site-blocks) > *` selector (see templates/front-page.html: the
 * <main> wrapper is one such child, sitting right after the header template
 * part). Every other template wants that gap; this one doesn't, because
 * solea/hero-panels is meant to sit flush under the header.
 */
.solea-home-main {
	margin-block-start: 0;
}

/*
 * Same block-gap quirk as above, at the other end of the page: the footer
 * template part is also a direct child of `.wp-site-blocks`, so it gets that
 * margin-block-start too — visible as a stray gap between the (dark, flush)
 * .solea-partners-section and the footer. Scoped to `.solea-home-main`'s own
 * next sibling so only the front page's footer loses the gap, not every
 * template's.
 */
.solea-home-main + footer {
	margin-block-start: 0;
}

.solea-home-contact-column {
	position: relative;
	z-index: 0;
	overflow: hidden;
	background: var(--wp--preset--color--brand-accent);
	color: var(--wp--preset--color--base);
	border-radius: 32px;
	padding: clamp(28px, 5vw, 48px);
}

/*
 * Dotted texture in the card's bottom-right corner, matching the reference
 * (img.png): a small radial-gradient dot repeated as a tile, faded out via a
 * mask so it reads as a soft decoration rather than a hard-edged rectangle.
 * z-index: -1 (on the position:relative card below) keeps it behind the
 * heading/paragraph/rows instead of painting over them, since an absolutely
 * positioned box would otherwise stack above static in-flow text.
 */
.solea-home-contact-column::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: -10px;
	bottom: -10px;
	width: 220px;
	height: 180px;
	background-image: radial-gradient(var(--wp--preset--color--brand-purple-light) 1.7px, transparent 1.8px);
	background-size: 12px 12px;
	-webkit-mask-image: radial-gradient(circle at 100% 100%, #000 0%, transparent 68%);
	mask-image: radial-gradient(circle at 100% 100%, #000 0%, transparent 68%);
	opacity: 0.45;
}

.solea-home-contact-column h2,
.solea-home-contact-column p {
	position: relative;
	color: var(--wp--preset--color--base);
}

.solea-home-contact-column h2 {
	margin-bottom: 20px;
}

.solea-home-contact-column p {
	margin-bottom: 0;
	color: rgba(255, 255, 255, 0.82);
}

/*
 * Wraps the two solea/contact-method rows: the 2px gap over a translucent
 * white background is what reads as the thin divider line between rows in
 * the reference, rather than a border on each row.
 */
.solea-contact-methods {
	position: relative;
	display: grid;
	gap: 2px;
	margin-top: 24px;
	border-radius: 20px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.22);
}

/*
 * Core gives every direct child of a group a margin-block-start equal to the
 * theme's block-gap (see .solea-home-main above) — that stacks on top of this
 * grid's own 2px `gap`, turning the divider into a thick band. The rows here
 * are two solea/contact-method blocks with no gap of their own intended.
 */
.solea-contact-methods > * {
	margin-block-start: 0 !important;
}

/*
 * "Je veux…" quick-links bar: a thin gradient rule flush with the section's
 * own top/bottom edges (outside the padding-block from .solea-home-section)
 * echoes the reference design's section-boundary hairlines without adding
 * extra markup. The top rule runs edge-to-edge; the bottom one is inset,
 * matching the reference measurements exactly.
 */
.solea-quick-links {
	position: relative;
}

.solea-quick-links::before,
.solea-quick-links::after {
	content: "";
	position: absolute;
	height: 1px;
	background: linear-gradient(90deg, rgba(122, 59, 234, 0) 0%, var(--wp--preset--color--brand-purple-light) 35%, var(--wp--preset--color--brand-accent-light) 65%, rgba(196, 169, 255, 0) 100%);
}

.solea-quick-links::before {
	top: 0;
	left: 0;
	right: 0;
}

.solea-quick-links::after {
	bottom: 0;
	left: 48px;
	right: 48px;
}

.solea-quick-links__label {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-accent-light) !important;
}

.solea-quick-links__cta {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 700;
}

.solea-quick-links__link,
.solea-quick-links__cta a {
	color: white!important;
	text-decoration: none!important;
}

.solea-quick-links__link:hover,
.solea-quick-links__cta a:hover {
	color: var(--wp--preset--color--brand-accent-light) !important;
	text-decoration: underline;
}

@media (max-width: 768px) {
	.solea-quick-links {
		flex-wrap: wrap;
	}
}

@media (max-width: 640px) {
	h2.solea-news-section__heading {
		font-size: 2.25rem !important;
	}
}

/*
 * Section "Nos partenaires" : même fond sombre (m2A Fond de page) que
 * .solea-news-section, avec en plus un halo radial violet (m2A Accent) posé
 * en pseudo-élément pour reprendre le dégradé de la maquette de référence
 * (img.png). Le libellé n'est pas un vrai titre dans la maquette — c'est une
 * petite étiquette majuscule au-dessus d'un texte atténué — d'où les classes
 * "solea-" dédiées qui échappent aux styles h2/p par défaut de
 * native-typography.css.
 */
.solea-partners-section {
	position: relative;
	overflow: hidden;
}

.solea-partners-section::before {
	content: "";
	position: absolute;
	top: 0;
	left: 48px;
	right: 48px;
	height: 1px;
	background: linear-gradient(90deg, rgba(122, 59, 234, 0) 0%, var(--wp--preset--color--brand-purple-light) 35%, var(--wp--preset--color--brand-accent-light) 65%, rgba(196, 169, 255, 0) 100%);
	pointer-events: none;
}

.solea-partners-section::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(80% 140% at 50% 120%, rgba(122, 59, 234, 0.42) 0%, rgba(18, 11, 34, 0) 70%);
	pointer-events: none;
}

.solea-partners-section__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
	align-items: center;
	gap: 32px 48px;
}

.solea-partners-section__inner > * {
	margin-block-start: 0 !important;
}

.solea-partners-section__intro {
	display: grid;
	gap: 8px;
}

.solea-partners-section__intro > * {
	margin-block-start: 0 !important;
}

.solea-partners-section__label {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-accent-light);
}

.solea-partners-section__description {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--wp--preset--color--brand-muted);
}

.solea-partners-section__logos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	align-items: stretch;
	gap: 10px;
	width: 100%;
}

.solea-partners-section__logos > * {
	margin-block-start: 0 !important;
}

@media (max-width: 768px) {
	.solea-partners-section__inner {
		grid-template-columns: 1fr;
	}
}
