/* =========================================================
   CrocoLoot — Hero Premium Oficial (workflow: Bricks → CSS mínimo → refinamento no editor)

   ------------------------------------------------------------------
   ESTRUTURA IDEAL NO BRICKS (1 Section, 1 Container, 2 blocos filhos)
   ------------------------------------------------------------------

   Section
     └─ CSS class no elemento Section:  croco-hero-premium
        (padding de secção, fundo base e largura vêm daqui; gradientes finos no Bricks)

     └─ Container  (único filho directo da Section para o grid)
          └─ CSS class:  croco-hero__grid
             Dois filhos directos (ordem: texto → mídia):

          ├─ Div (Block)
          │    └─ CSS class:  croco-hero-copy
          │         [opcional] Div.croco-hero-brand → Image (marca secundária)
          │         Text / Heading  → classe  hero-eyebrow  (rótulo pequeno)
          │         Heading  → H1 (tamanho / peso no Bricks)
          │         Text     → parágrafo lead (estilo no Bricks)
          │         Div      → classe  croco-hero-cta-row
          │              └─ Button, Button (cores / sombras no Bricks)

          └─ Div (Block)
               └─ CSS class:  croco-hero-media
                    └─ Image ou Video (raio e overflow aqui; sombra extra no Bricks)

   Notas:
   • O grid assume estes dois blocos como filhos directos do Container com .croco-hero__grid.
   • Sem .croco-hero__grid: o primeiro .brxe-container dentro da Section ainda entra em grid (legado).
   • Compat home: 2.ª secção de #brx-content sem classe na Section (legado).

   ------------------------------------------------------------------
   MAPA DE CLASSES (contrato estável)
   ------------------------------------------------------------------
   croco-hero-premium   — Section (âncora de todos os estilos globais da hero)
   croco-hero__grid     — Container (duas colunas em desktop)
   croco-hero-copy      — Coluna texto
   croco-hero-media     — Coluna imagem / vídeo
   croco-hero-brand     — Logo opcional acima do texto
   hero-eyebrow         — Rótulo superior (estilo no Bricks)
   croco-hero-cta-row   — Fila de CTAs (só layout flex; botões no Bricks)

========================================================= */

:root {
	--croco-hero-bg-0: #f4f6f9;
	--croco-hero-bg-1: #ebeef3;
	--croco-hero-text: #0f1218;
	--croco-hero-edge: rgba(12, 16, 22, 0.06);
	--croco-hero-accent: var(--croco-brand-accent, #e85c1a);
	--croco-hero-radius: clamp(1rem, 2vw, 1.5rem);
}

/* Shell: só base espacial + fundo simples (gradientes ricos → Bricks) */
body.home #brx-content > .brxe-section:nth-child(2):not(.croco-big-hero),
body.home #brx-content > section:nth-child(2):not(.croco-big-hero),
#brx-content > .brxe-section.croco-hero-premium,
#brx-content > section.croco-hero-premium {
	box-sizing: border-box;
	color: var(--croco-hero-text);
	padding-block: clamp(2.5rem, 6vw, 5rem);
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
	border-bottom: 1px solid var(--croco-hero-edge);
	background: linear-gradient(180deg, var(--croco-hero-bg-0), var(--croco-hero-bg-1));
}

body.home #brx-content > .brxe-section:nth-child(2):not(.croco-big-hero) .brxe-container:first-of-type,
body.home #brx-content > section:nth-child(2):not(.croco-big-hero) .brxe-container:first-of-type,
body.home #brx-content > .brxe-section:nth-child(2):not(.croco-big-hero) .croco-hero__grid,
body.home #brx-content > section:nth-child(2):not(.croco-big-hero) .croco-hero__grid,
#brx-content > .brxe-section.croco-hero-premium .brxe-container:first-of-type,
#brx-content > section.croco-hero-premium .brxe-container:first-of-type,
#brx-content > .brxe-section.croco-hero-premium .croco-hero__grid,
#brx-content > section.croco-hero-premium .croco-hero__grid {
	box-sizing: border-box;
	width: 100%;
	max-width: min(76rem, 100%);
	margin-inline: auto;
	align-items: center;
	gap: clamp(1.75rem, 4vw, 3rem);
}

@media (min-width: 992px) {
	body.home #brx-content > .brxe-section:nth-child(2):not(.croco-big-hero) .brxe-container:first-of-type,
	body.home #brx-content > section:nth-child(2):not(.croco-big-hero) .brxe-container:first-of-type,
	body.home #brx-content > .brxe-section:nth-child(2):not(.croco-big-hero) .croco-hero__grid,
	body.home #brx-content > section:nth-child(2):not(.croco-big-hero) .croco-hero__grid,
	#brx-content > .brxe-section.croco-hero-premium .brxe-container:first-of-type,
	#brx-content > section.croco-hero-premium .brxe-container:first-of-type,
	#brx-content > .brxe-section.croco-hero-premium .croco-hero__grid,
	#brx-content > section.croco-hero-premium .croco-hero__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: clamp(2rem, 4vw, 3.5rem);
		row-gap: clamp(1.5rem, 3vw, 2rem);
		align-items: center;
	}
}

body.home #brx-content > .brxe-section:nth-child(2):not(.croco-big-hero) .croco-hero-copy,
body.home #brx-content > section:nth-child(2):not(.croco-big-hero) .croco-hero-copy,
#brx-content > .brxe-section.croco-hero-premium .croco-hero-copy,
#brx-content > section.croco-hero-premium .croco-hero-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(0.5rem, 1.2vw, 0.85rem);
	max-width: min(36rem, 100%);
}

@media (min-width: 992px) {
	body.home #brx-content > .brxe-section:nth-child(2):not(.croco-big-hero) .croco-hero-media,
	body.home #brx-content > section:nth-child(2):not(.croco-big-hero) .croco-hero-media,
	#brx-content > .brxe-section.croco-hero-premium .croco-hero-media,
	#brx-content > section.croco-hero-premium .croco-hero-media {
		justify-self: stretch;
		align-self: center;
	}
}

body.home #brx-content > .brxe-section:nth-child(2):not(.croco-big-hero) .croco-hero-brand,
body.home #brx-content > section:nth-child(2):not(.croco-big-hero) .croco-hero-brand,
#brx-content > .brxe-section.croco-hero-premium .croco-hero-brand,
#brx-content > section.croco-hero-premium .croco-hero-brand {
	margin-bottom: clamp(0.5rem, 1.5vw, 1rem);
	max-width: 11rem;
}

body.home #brx-content > .brxe-section:nth-child(2):not(.croco-big-hero) .croco-hero-brand img,
body.home #brx-content > section:nth-child(2):not(.croco-big-hero) .croco-hero-brand img,
#brx-content > .brxe-section.croco-hero-premium .croco-hero-brand img,
#brx-content > section.croco-hero-premium .croco-hero-brand img {
	display: block;
	width: 100%;
	height: auto;
}

/* Só cor de acento para o eyebrow; tamanho / tracking no Bricks */
body.home #brx-content > .brxe-section:nth-child(2):not(.croco-big-hero) .hero-eyebrow,
body.home #brx-content > section:nth-child(2):not(.croco-big-hero) .hero-eyebrow,
#brx-content > .brxe-section.croco-hero-premium .hero-eyebrow,
#brx-content > section.croco-hero-premium .hero-eyebrow {
	color: var(--croco-hero-accent);
}

/* Mídia: raio + clip (sombra / ring no Bricks) */
body.home #brx-content > .brxe-section:nth-child(2):not(.croco-big-hero) .brxe-image :where(img, picture img),
body.home #brx-content > section:nth-child(2):not(.croco-big-hero) .brxe-image :where(img, picture img),
#brx-content > .brxe-section.croco-hero-premium .brxe-image :where(img, picture img),
#brx-content > section.croco-hero-premium .brxe-image :where(img, picture img),
body.home #brx-content > .brxe-section:nth-child(2):not(.croco-big-hero) .brxe-video :where(video, iframe),
body.home #brx-content > section:nth-child(2):not(.croco-big-hero) .brxe-video :where(video, iframe),
#brx-content > .brxe-section.croco-hero-premium .brxe-video :where(video, iframe),
#brx-content > section.croco-hero-premium .brxe-video :where(video, iframe) {
	border-radius: var(--croco-hero-radius);
}

body.home #brx-content > .brxe-section:nth-child(2):not(.croco-big-hero) :where(.brxe-image, .brxe-video),
body.home #brx-content > section:nth-child(2):not(.croco-big-hero) :where(.brxe-image, .brxe-video),
#brx-content > .brxe-section.croco-hero-premium :where(.brxe-image, .brxe-video),
#brx-content > section.croco-hero-premium :where(.brxe-image, .brxe-video) {
	border-radius: var(--croco-hero-radius);
	overflow: hidden;
}

/* Fila de CTAs: só organização; estilo dos botões no Bricks */
body.home #brx-content > .brxe-section:nth-child(2):not(.croco-big-hero) .croco-hero-cta-row,
body.home #brx-content > section:nth-child(2):not(.croco-big-hero) .croco-hero-cta-row,
#brx-content > .brxe-section.croco-hero-premium .croco-hero-cta-row,
#brx-content > section.croco-hero-premium .croco-hero-cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin-top: 0.35rem;
}