/**
 * CrocoLoot — BIG Games–inspired premium hero section (Bricks).
 *
 * Bricks: .brxe-container costuma forçar flex (sou column), o que anula
 * display:grid do nosso inner — por isso usamos grid + !important no inner.
 *
 * Estrutura:
 * Section.croco-big-hero
 *   Container.croco-big-hero__inner (.brxe-container)
 *     .croco-big-hero__content → coluna esquerda (order: 1)
 *     .croco-big-hero__media   → coluna direita (order: 2)
 */

.croco-big-hero {
	--croco-big-hero-bg-0: #e8e4e0;
	--croco-big-hero-bg-1: #e6eaf2;
	--croco-big-hero-text: #14171c;
	--croco-big-hero-muted: #6b7482;
	--croco-big-hero-eyebrow: #ff7a1a;
	--croco-big-hero-cta-green: #39d313;
	--croco-big-hero-cta-green-deep: #2fb30f;
	--croco-big-hero-media-pad: clamp(16px, 1.85vw, 22px);
	--croco-big-hero-media-radius: clamp(28px, 3.6vw, 42px);
	--croco-big-hero-img-radius: clamp(14px, 2vw, 20px);

	position: relative;
	overflow: hidden;
	isolation: isolate;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: none;
	background:
		radial-gradient(
			ellipse 125% 90% at 50% 48%,
			transparent 50%,
			rgb(18 28 52 / 0.055) 100%
		),
		radial-gradient(
			ellipse 72% 58% at 14% 76%,
			rgb(255 145 95 / 0.16) 0%,
			rgb(255 195 150 / 0.07) 40%,
			transparent 70%
		),
		radial-gradient(
			ellipse 78% 62% at 86% 20%,
			rgb(105 140 255 / 0.2) 0%,
			rgb(165 185 255 / 0.09) 42%,
			transparent 66%
		),
		radial-gradient(
			ellipse 92% 78% at 50% 46%,
			rgb(255 255 255 / 0.58) 0%,
			rgb(245 247 252 / 0.32) 38%,
			transparent 68%
		),
		radial-gradient(
			ellipse 68% 92% at 94% 44%,
			rgb(150 175 245 / 0.62) 0%,
			rgb(200 208 242 / 0.34) 44%,
			transparent 64%
		),
		radial-gradient(
			ellipse 65% 82% at 6% 54%,
			rgb(248 230 210 / 0.95) 0%,
			rgb(236 220 200 / 0.45) 48%,
			transparent 66%
		),
		radial-gradient(
			ellipse 55% 55% at 18% 22%,
			rgb(255 255 255 / 0.55) 0%,
			transparent 58%
		),
		linear-gradient(
			118deg,
			#e4dcd4 0%,
			#e6ebf6 34%,
			#d9e3f4 64%,
			#cdd9ef 100%
		);
	color: var(--croco-big-hero-text);
}

/* Largura total: secção Bricks por vezes limita max-width */
#brx-content .croco-big-hero.brxe-section,
.croco-big-hero.brxe-section {
	width: 100% !important;
	max-width: none !important;
}

.croco-big-hero.brxe-section {
	align-items: stretch !important;
}

.croco-big-hero *,
.croco-big-hero *::before,
.croco-big-hero *::after {
	box-sizing: border-box;
}

/* Inner = grelha de 2 colunas no desktop; vencer flex do Bricks */
.croco-big-hero .croco-big-hero__inner,
.croco-big-hero .brxe-container.croco-big-hero__inner {
	display: grid !important;
	grid-template-columns: 1fr !important;
	align-items: center !important;
	justify-items: stretch !important;
	align-content: center !important;
	flex-direction: unset !important;
	flex-wrap: unset !important;
	justify-content: unset !important;
	row-gap: clamp(2.5rem, 5.5vw, 3.75rem) !important;
	column-gap: clamp(2.75rem, 7vw, 5.75rem) !important;
	width: 100% !important;
	max-width: min(100%, 1280px) !important;
	margin-inline: auto !important;
	padding-block: clamp(3.75rem, 7.5vw, 6.75rem) !important;
	padding-inline: clamp(1.25rem, 4.5vw, 3rem) !important;
}

@media (min-width: 960px) {
	.croco-big-hero .croco-big-hero__inner,
	.croco-big-hero .brxe-container.croco-big-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr) !important;
		min-height: clamp(26rem, 58vh, 36rem) !important;
	}
}

/* Texto sempre à esquerda, mídia à direita (mesmo se ordem no DOM variar) */
.croco-big-hero .croco-big-hero__content {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: center !important;
	min-width: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	position: relative;
	z-index: 1;
	order: 1 !important;
	grid-column: 1 / -1;
}

.croco-big-hero .croco-big-hero__media {
	order: 2 !important;
	grid-column: 1 / -1;
}

@media (min-width: 960px) {
	.croco-big-hero .croco-big-hero__content {
		grid-column: 1 / 2 !important;
		justify-self: start !important;
		align-self: center !important;
		max-width: min(100%, 42rem) !important;
		padding-right: clamp(0.75rem, 2.75vw, 2.75rem) !important;
		margin-block: auto !important;
	}

	.croco-big-hero .croco-big-hero__media {
		grid-column: 2 / 3 !important;
		justify-self: end !important;
		align-self: center !important;
	}
}

.croco-big-hero .croco-big-hero__eyebrow {
	margin: 0 0 clamp(1rem, 1.6vw, 1.25rem);
	font-size: clamp(0.75rem, 0.55vw + 0.65rem, 0.9375rem);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--croco-big-hero-eyebrow);
}

.croco-big-hero .croco-big-hero__title {
	margin: 0 0 clamp(1.15rem, 2.2vw, 1.65rem);
	max-width: min(100%, 22ch);
	font-size: clamp(3.1rem, 1.5rem + 5vw, 5.25rem);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.048em;
	color: var(--croco-big-hero-text);
}

.croco-big-hero .croco-big-hero__lead {
	display: block;
	margin: 0 0 clamp(2.1rem, 3.5vw, 2.75rem);
	max-width: min(100%, 34rem);
	font-size: clamp(1.12rem, 0.45vw + 1.02rem, 1.375rem);
	font-weight: 500;
	line-height: 1.75;
	letter-spacing: -0.015em;
	color: var(--croco-big-hero-muted);
	opacity: 0.97;
}

/* Botões em fila (vencer flex-column de wrappers Bricks nos CTAs) */
.croco-big-hero .croco-big-hero__actions {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 1rem 1.125rem !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.croco-big-hero .croco-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
	min-height: 58px !important;
	padding: 0 clamp(1.65rem, 3vw, 2.25rem) !important;
	border-radius: 999px;
	border: none;
	font-size: clamp(0.92rem, 0.32vw + 0.86rem, 1.05rem);
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		transform 0.2s ease,
		box-shadow 0.26s ease,
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease,
		filter 0.2s ease;
}

/* Primário BIG: verde + glow (alinhado ao screenshot / marca Croco hero) */
.croco-big-hero .croco-btn--primary {
	background: linear-gradient(
		175deg,
		var(--croco-btn-primary-highlight) 0%,
		var(--croco-btn-primary-mid) 45%,
		var(--croco-btn-primary-deep) 100%
	) !important;
	color: var(--croco-btn-primary-text) !important;
	box-shadow:
		0 1px 0 rgb(255 255 255 / 0.35) inset,
		0 18px 40px rgb(47 179 15 / 0.38),
		0 0 40px rgb(57 211 19 / 0.45),
		0 0 72px rgb(57 211 19 / 0.22) !important;
	filter: saturate(1.05);
}

.croco-big-hero .croco-btn--primary:hover {
	transform: translateY(-2px);
	filter: brightness(1.04) saturate(1.08);
	box-shadow:
		0 1px 0 rgb(255 255 255 / 0.42) inset,
		0 24px 52px rgb(47 179 15 / 0.42),
		0 0 48px rgb(57 211 19 / 0.55),
		0 0 88px rgb(57 211 19 / 0.28) !important;
	color: var(--croco-btn-primary-text) !important;
}

.croco-big-hero .croco-btn--secondary {
	background: var(--croco-btn-secondary-bg) !important;
	color: var(--croco-btn-secondary-text) !important;
	border: 1px solid var(--croco-btn-secondary-border-color) !important;
	box-shadow:
		0 1px 0 rgb(255 255 255 / 0.98) inset,
		0 12px 32px rgb(20 24 31 / 0.09),
		0 4px 12px rgb(20 24 31 / 0.04) !important;
}

.croco-big-hero .croco-btn--secondary:hover {
	transform: translateY(-2px);
	border-color: rgb(20 24 31 / 0.12) !important;
	box-shadow:
		0 1px 0 rgb(255 255 255 / 1) inset,
		0 18px 44px rgb(20 24 31 / 0.12),
		0 0 36px rgb(255 255 255 / 0.5) !important;
	color: var(--croco-btn-secondary-text) !important;
}

.croco-big-hero .croco-big-hero__media {
	position: relative;
	z-index: 1;
	overflow: hidden;
	width: 100%;
	max-width: min(100%, 560px);
	margin-inline: auto;
	padding: var(--croco-big-hero-media-pad);
	border-radius: var(--croco-big-hero-media-radius);
	background: #f6f8fd;
	box-shadow:
		0 1px 0 rgb(255 255 255 / 1) inset,
		inset 0 0 0 1px rgb(255 255 255 / 0.88),
		0 0 0 1px rgb(15 23 42 / 0.085),
		0 1px 3px rgb(15 23 42 / 0.1),
		0 6px 18px rgb(15 23 42 / 0.08),
		0 18px 48px rgb(15 23 42 / 0.12),
		0 36px 88px rgb(15 23 42 / 0.14),
		0 56px 130px rgb(22 32 58 / 0.12);
}

@media (min-width: 960px) {
	.croco-big-hero .croco-big-hero__media {
		width: 100%;
		max-width: min(100%, 500px);
		margin-inline: 0;
	}
}

/*
 * Imagem no cartão: HTML do Bricks ou shortcode [croco_media_frame].
 * data-croco-media-variant permite variantes futuras sem mudar markup geral.
 */
.croco-big-hero .croco-big-hero__image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: var(--croco-big-hero-img-radius);
	aspect-ratio: 21 / 9;
	object-fit: cover !important;
	object-position: center center;
	background: linear-gradient(180deg, #dde5f2 0%, #cdd8e8 100%);
}

.croco-big-hero .croco-big-hero__image[data-croco-media-variant='big_hero'] {
	flex-shrink: 0;
	aspect-ratio: 2.05 / 1;
	object-fit: cover !important;
	object-position: center center;
}

/*
 * Arte / mascote / logo (fundo próprio): sem crop, contain, caixa mais alta que o
 * banner para preencher melhor a moldura num layout em duas colunas.
 */
.croco-big-hero .croco-big-hero__image[data-croco-media-variant='big_hero_art'] {
	flex-shrink: 0;
	display: block;
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	aspect-ratio: 5 / 6;
	max-height: min(100%, clamp(300px, 52vh, 480px));
	object-fit: contain !important;
	object-position: center center;
	background:
		radial-gradient(
			ellipse 88% 80% at 50% 42%,
			rgb(255 255 255 / 0.82) 0%,
			rgb(232 238 248 / 0.92) 48%,
			rgb(210 220 235 / 1) 100%
		),
		linear-gradient(165deg, #e4eaf4 0%, #d5dfea 55%, #c8d4e4 100%);
}

@media (max-width: 959px) {
	.croco-big-hero .croco-big-hero__title {
		max-width: 100%;
	}

	.croco-big-hero .croco-big-hero__image[data-croco-media-variant='big_hero_art'] {
		aspect-ratio: 1 / 1;
		max-height: min(100%, clamp(260px, 56vw, 400px));
	}

	.croco-big-hero .croco-big-hero__image,
	.croco-big-hero .croco-big-hero__image[data-croco-media-variant='big_hero'] {
		aspect-ratio: 2.05 / 1;
	}
}

/* Mobile muito estreito: empilhar botões sem partir o grid da secção */
@media (max-width: 380px) {
	.croco-big-hero .croco-big-hero__actions {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.croco-big-hero .croco-btn {
		width: 100%;
		justify-content: center;
	}
}