/* ══════════════════════════════════════════════════════════════
   Bloco B2B — "Linha Industrial Supramel" (.b2b-banner*)

   Vivia dentro do home.css, de quando o bloco só existia na home.
   Hoje ele fecha também as páginas de categoria, e carregar as ~2000
   linhas do home.css inteiro só por causa dele não se justifica — foi
   exatamente o que deixou o bloco sem estilo na Cera de Abelha, a
   única categoria fora da lista de páginas que recebem home.css.

   Marcação em template-parts/sections/section-b2b-banner.php.
   Depende só das variáveis de global.css — nada do home.css.
   ══════════════════════════════════════════════════════════════ */

/* O verde vive no cartão, não na secção: assim o banner fica contido
   e arredondado, com o fundo da página respirando à volta. */
.b2b-banner-section {
	position: relative;
	padding: var(--supramel-space-2xl) 0;
}

.b2b-banner {
	position: relative;
	z-index: 1;
	display: grid;
	/* Colunas iguais: com a arte quadrada, cada ponto de largura que a media
	   ganha vira altura, e e' a altura que fecha a folga contra o texto. */
	grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
	align-items: center;
	gap: 3rem;
	padding: 4rem 3.5rem;
	border-radius: 2rem;
	overflow: hidden;
	background:
		radial-gradient(circle at top left, rgba(246, 242, 238, 0.1), transparent 24%),
		radial-gradient(circle at right center, rgba(210, 169, 63, 0.18), transparent 26%),
		linear-gradient(135deg, #015e2d 0%, #168048 58%, #0f6f3d 100%);
	box-shadow: 0 24px 60px rgba(1, 94, 45, 0.18);
}

.b2b-banner::before,
.b2b-banner::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.b2b-banner::before {
	width: 320px;
	height: 320px;
	top: -120px;
	right: -110px;
	background: rgba(246, 242, 238, 0.07);
}

.b2b-banner::after {
	width: 420px;
	height: 420px;
	bottom: -210px;
	left: -160px;
	background: rgba(210, 169, 63, 0.12);
}

.b2b-banner__content {
	position: relative;
	z-index: 1;
	max-width: 36rem;
}

.b2b-banner__media {
	position: relative;
	z-index: 1;
}

.b2b-banner__eyebrow {
	display: inline-block;
	margin-bottom: 0.85rem;
	padding: 0.4rem 0.8rem;
	border: 1px solid rgba(246, 242, 238, 0.28);
	border-radius: 999px;
	background: rgba(246, 242, 238, 0.08);
	color: #f6f2ee;
	font-family: var(--supramel-font-heading);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.b2b-banner__title {
	margin: 0;
	color: #f6f2ee !important;
	font-family: var(--supramel-font-heading);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.15;
}

.b2b-banner__text {
	margin: 1rem 0 0;
	color: rgba(246, 242, 238, 0.92);
	font-family: var(--supramel-font-body);
	font-size: 1rem;
	line-height: 1.65;
}

.b2b-banner__highlights {
	display: grid;
	gap: 0.65rem;
	margin: 1.4rem 0 0;
	padding: 0;
	list-style: none;
}

.b2b-banner__highlights li {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	color: #f6f2ee;
	font-weight: 600;
}

.b2b-banner__highlights li::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #d2a93f;
	box-shadow: 0 0 0 6px rgba(210, 169, 63, 0.14);
	flex-shrink: 0;
}

.b2b-banner__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	margin-top: 1.8rem;
	padding: 0.95rem 1.5rem;
	border-radius: 999px;
	background: var(--supramel-color-highlight);
	color: var(--supramel-color-on-highlight) !important;
	font-family: var(--supramel-font-heading);
	font-size: var(--supramel-text-btn-size);
	font-weight: var(--supramel-text-btn-weight);
	line-height: var(--supramel-text-btn-line-height);
	letter-spacing: var(--supramel-text-btn-letter-spacing);
	text-transform: var(--supramel-text-btn-transform);
	text-decoration: none;
	box-shadow: 0 8px 20px rgba(36, 50, 58, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.b2b-banner__cta:hover {
	background: var(--supramel-color-highlight-hover);
	color: var(--supramel-color-on-highlight) !important;
	transform: translateY(-1px);
	box-shadow: var(--supramel-shadow-button-soft);
}

.b2b-banner__media {
	position: relative;
}

/* A arte segue o formato definido aqui em vez da proporção do ficheiro: numa
   coluna de ~490px, um JPG panorâmico rendia ~200px de altura contra os ~560px
   da coluna de texto e deixava metade do cartão verde vazia. Quadrado, o
   media encosta em cima e em baixo. Trocar --b2b-media-ratio muda o formato;
   --b2b-media-position reenquadra o recorte (ex.: "20% 50%" puxa a arte para
   a esquerda) enquanto a imagem não estiver no mesmo formato do shell. */
.b2b-banner__image-shell {
	position: relative;
	aspect-ratio: var(--b2b-media-ratio, 1 / 1);
	padding: 1.1rem;
	border: 1px solid rgba(246, 242, 238, 0.16);
	border-radius: 2rem;
	background: linear-gradient(180deg, rgba(246, 242, 238, 0.12), rgba(246, 242, 238, 0.05));
	box-shadow: 0 28px 60px rgba(10, 35, 21, 0.22);
	backdrop-filter: blur(3px);
}

.b2b-banner__image-shell::after {
	content: "";
	position: absolute;
	inset: auto 8% -18px 8%;
	height: 28px;
	border-radius: 50%;
	background: rgba(3, 23, 13, 0.25);
	filter: blur(12px);
}

.b2b-banner__image {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 1.35rem;
	object-fit: cover;
	object-position: var(--b2b-media-position, 50% 50%);
}

@media (max-width: 900px) {
	.b2b-banner {
		grid-template-columns: 1fr;
		gap: 2rem;
		padding: 3rem 2.5rem;
	}

	.b2b-banner__content {
		max-width: none;
	}

	.b2b-banner__title {
		font-size: 28px;
	}

	/* Empilhado, o quadrado passaria a medir a largura toda do cartão e
	   viraria um bloco de ~600px de altura sozinho. */
	.b2b-banner__image-shell {
		max-width: 420px;
		margin-inline: auto;
	}
}

@media (max-width: 767px) {
	.b2b-banner {
		padding: 2.25rem 1.5rem;
		gap: 1.5rem;
		border-radius: 1.5rem;
	}

	.b2b-banner__eyebrow {
		font-size: 0.72rem;
	}

	.b2b-banner__title {
		font-size: 24px;
	}

	.b2b-banner__text {
		font-size: 0.95rem;
	}

	.b2b-banner__cta {
		width: 100%;
	}

	.b2b-banner__image-shell {
		padding: 0.8rem;
		border-radius: 1.4rem;
	}

	.b2b-banner__image {
		border-radius: 1rem;
	}
}