/*
 * Bandeau plein largeur générique pour les gabarits de listing (recherche,
 * archive, 404). Même langage visuel que la bannière FAQ
 * (assets/css/faq.css .solea-faq-banner) : fond violet foncé et motif de
 * points en ::before, dupliqué ici sous un nom générique car ces gabarits
 * n'ont pas de contexte FAQ (pas de solea/faq-breadcrumb, pas de
 * post_type=faq).
 *
 * Pas de "align":"full" dans les templates : ce bloc est un enfant direct de
 * .wp-site-blocks (hors de "main"), donc il occupe déjà 100% de la largeur.
 */
.solea-page-banner {
	position: relative;
	overflow: hidden;
	margin-block-start: 0;
	background: var(--wp--preset--color--brand-purple-dark);
	color: var(--wp--preset--color--base);
	/*
	 * padding-top is larger than the other sides to clear .solea-logo-badge
	 * (site-logo-badge.css), which overhangs below the header by design —
	 * otherwise the badge covers the title on this banner.
	 */
	padding: clamp(110px, 12vw, 160px) clamp(28px, 4.5vw, 56px) clamp(64px, 7vw, 104px);
}

.solea-page-banner::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 520px;
	height: 340px;
	color: var(--wp--preset--color--brand-purple-light);
	opacity: 0.3;
	background-image: radial-gradient(currentColor 1.8px, transparent 1.9px);
	background-size: 13px 13px;
	-webkit-mask-image: radial-gradient(circle at 100% 0%, #000, transparent 70%);
	mask-image: radial-gradient(circle at 100% 0%, #000, transparent 70%);
	pointer-events: none;
}

.solea-page-banner h1,
.solea-page-banner p {
	color: var(--wp--preset--color--base);
}

.solea-post-date {
	gap: 0.4em;
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.95rem;
}

.solea-post-date p {
	margin: 0;
	color: inherit;
	font-size: inherit;
}

/*
 * Variante réduite pour la 404 (pas de grille de résultats en dessous). Le
 * padding-top est plus généreux que le padding-bottom car .solea-logo-badge
 * (site-logo-badge.css) déborde volontairement sous le header — sans cette
 * marge, le badge chevauche le titre juste en dessous.
 */
.solea-page-banner--small {
	padding: clamp(100px, 11vw, 150px) clamp(28px, 4.5vw, 56px) clamp(40px, 5vw, 64px);
}

.solea-page-banner--small::before {
	width: 320px;
	height: 220px;
}

/*
 * Le badge du logo (site-logo-badge.css) repasse en mode statique (ne
 * déborde plus sous le header) à partir de 1179px, donc la marge de
 * dégagement ci-dessus ne se justifie plus au-delà de ce point.
 */
@media (max-width: 1179px) {
	.solea-page-banner {
		padding: clamp(64px, 8vw, 96px) 24px 48px;
	}

	.solea-page-banner--small {
		padding: clamp(64px, 8vw, 96px) 24px 40px;
	}
}