/**
 * custom-gutenberg.css
 * -----------------------------------------------------------------------
 * Estilos DIRETOS (CSS puro, sem passar pelo build do Tailwind).
 * Use este arquivo para:
 *   - Sobrescrever a aparência dos blocos nativos do Gutenberg
 *     (core/button, core/quote, core/separator, core/group, etc.)
 *   - Criar classes personalizadas de bloco registradas em
 *     inc/block-styles.php (ex.: .is-style-card, .is-style-outline)
 *   - Qualquer ajuste pontual que não valha a pena virar utilitário Tailwind
 *
 * Este arquivo é carregado tanto no front-end quanto dentro do editor de
 * blocos (via add_editor_style em functions.php), para que o WYSIWYG do
 * Gutenberg reflita fielmente o que aparece no site.
 *
 * As variáveis abaixo espelham a paleta definida em theme.json e em
 * tailwind.config.js — mantenha os valores sincronizados.
 * ----------------------------------------------------------------------- */

:root {
	--dc-color-primary: #a6283c;
	--dc-color-primary-dark: #7a1e2c;
	--dc-color-secondary: #2f4b3c;
	--dc-color-accent: #c9a24b;
	--dc-color-cream: #fffefa;
	--dc-color-ink: #3a332c;

	--dc-font-heading: "Bowlby One", sans-serif;
	--dc-font-body: "Josefin Sans", sans-serif;
}

/* -----------------------------------------------------------------------
 * 0. Container de conteúdo (.container-content, ver src/css/app.css) e o
 *    escape de blocos "Largura larga"/"Largura total" do Gutenberg.
 *    .container-content é mais estreito que o .container-site do header
 *    de propósito — um bloco marcado como "Largura larga" (alignwide) no
 *    editor estica até o tamanho do nav; "Largura total" (alignfull) vai
 *    até a borda da tela, igual o hero.
 * --------------------------------------------------------------------- */

.container-content .alignwide {
	width: 100%;
	max-width: 80rem;
	margin-left: calc(50% - 40rem);
	margin-right: calc(50% - 40rem);
}

.container-content .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Galeria (core/gallery): rompe o container sozinha, 90% da tela (mesma
 * largura do cartão do hero), sem precisar marcar "Largura total" no
 * editor — faz mais sentido pra galeria de fotos já vir assim. */
.container-content .wp-block-gallery {
	width: 90vw;
	max-width: 90vw;
	margin-left: calc(50% - 45vw);
	margin-right: calc(50% - 45vw);
}

@media (max-width: 1280px) {
	/* Abaixo da largura do próprio container "largo" (80rem), não tem o
	 * que escapar — evita esticar além da tela. */
	.container-content .alignwide {
		width: auto;
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}
}

/* -----------------------------------------------------------------------
 * 1. Overrides de blocos nativos do Gutenberg
 * --------------------------------------------------------------------- */

.wp-block-button__link {
	font-family: var(--dc-font-body);
	border-radius: 2px;
	letter-spacing: 0.02em;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--dc-color-primary);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background-color: var(--dc-color-primary-dark);
}

.wp-block-quote {
	border-left: 4px solid var(--dc-color-accent);
	padding-left: 1.5rem;
	font-family: var(--dc-font-heading);
	font-style: italic;
	color: var(--dc-color-secondary);
}

.wp-block-separator {
	border-top: 2px solid var(--dc-color-accent);
	max-width: 120px;
	opacity: 0;
}

.wp-block-pullquote {
	border-top: 3px solid var(--dc-color-primary);
	border-bottom: 3px solid var(--dc-color-primary);
}

/* Tabelas: sem grade, só uma linha dourada embaixo de cada célula/linha
 * — vale pro site inteiro. A cor do texto, cada seção ajusta por conta
 * (ex.: .home-section--bg-image, fundo escuro, usa texto claro).
 *
 * Especificidade reforçada (.wp-block-table.wp-block-table): o CSS do
 * bloco Tabela que o próprio WordPress injeta (wp-block-library) usa
 * seletor do mesmo "peso" (.wp-block-table td/th), então sem isso o
 * resultado dependia da ordem de carregamento — funcionava numa página
 * e não na outra. */
.wp-block-table.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table.wp-block-table th,
.wp-block-table.wp-block-table td {
	border: none;
	border-bottom: 1px solid var(--dc-color-accent);
	padding: 0.75rem 0.5rem;
}

/* h5: mesma fonte do h2 (Bowlby One), dourada. */
h5 {
	font-family: var(--dc-font-heading);
	font-weight: 400;
	color: var(--dc-color-accent);
	margin-bottom: 0;
	padding-bottom: 10px;
}

/* Embeds de vídeo (Vimeo, YouTube, etc.) — cantos arredondados. O raio
 * vai no wrapper (com overflow:hidden) E no iframe, porque dependendo do
 * navegador só um dos dois clipa o conteúdo de verdade. */
.wp-block-embed.is-type-video .wp-block-embed__wrapper {
	border-radius: 20px;
	overflow: hidden;
}

.wp-block-embed.is-type-video iframe {
	border-radius: 20px;
}

/* -----------------------------------------------------------------------
 * 2. Classes de bloco personalizadas
 *    (registradas com register_block_style em inc/block-styles.php)
 * --------------------------------------------------------------------- */

/* core/button → estilo "Contorno" */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 2px solid var(--dc-color-primary);
	color: var(--dc-color-primary);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--dc-color-primary);
	color: var(--dc-color-cream);
}

/* core/group → estilo "Cartão" */
.wp-block-group.is-style-card {
	background-color: #ffffff;
	border-radius: 8px;
	padding: 2rem;
	box-shadow: 0 4px 20px rgba(32, 26, 21, 0.08);
}

/* core/paragraph → estilo "Destaque" */
.wp-block-paragraph.is-style-lead {
	font-family: var(--dc-font-heading);
	font-size: 1.375rem;
	line-height: 1.5;
	color: var(--dc-color-secondary);
}

/* core/separator → estilo "Ornamento" (divisor temático do restaurante) */
.wp-block-separator.is-style-ornament {
	border: none;
	height: auto;
	text-align: center;
	max-width: 100%;
}

.wp-block-separator.is-style-ornament::before {
	content: "❧";
	display: inline-block;
	font-size: 1.5rem;
	color: var(--dc-color-accent);
}

/* -----------------------------------------------------------------------
 * 3. Classes utilitárias personalizadas disponíveis no editor
 *    (aparecem em "Estilos adicionais de CSS" / atributo className)
 * --------------------------------------------------------------------- */

.dc-eyebrow {
	display: inline-block;
	font-family: var(--dc-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dc-color-accent);
}

.dc-section-title {
	font-family: var(--dc-font-heading);
	color: var(--dc-color-ink);
}

/* -----------------------------------------------------------------------
 * 4. Botão do plugin "Advanced Gutenberg" (.wp-block-advgb-button)
 * -----------------------------------------------------------------------
 * O plugin gera uma classe única por botão (ex.: advgbbtn-56bf012b-...)
 * com CSS próprio injetado à parte, que costuma vencer o nosso por ordem
 * de carregamento — por isso as regras abaixo usam !important nas
 * propriedades que precisam mesmo sobrescrever o plugin. É uma exceção
 * deliberada à regra geral de evitar !important: aqui é a forma confiável
 * de garantir que o botão siga o visual do tema, não o do plugin.
 *
 * Efeito: texto (Bowlby One) sem caixa/borda, com um circulozinho perfeito
 * colado na ponta (via clip-path, não escala de retângulo — fica redondo
 * de verdade, não oval); no hover o círculo cresce por trás do texto até
 * virar uma pílula, como se o texto ganhasse um padding.
 * --------------------------------------------------------------------- */

.wp-block-advgb-button {
	display: inline-block !important;
	margin: 0 !important;
}

/* O seletor é repetido de propósito (.x.x.x): isso NÃO muda quem o CSS
 * seleciona, só aumenta a especificidade. Precisamos disso porque o
 * plugin às vezes gera CSS combinando a classe base + a classe única do
 * botão (ex.: .wp-block-advgb-button_link.advgbbtn-xxxx), que tem mais
 * especificidade que um seletor de 1 classe só — mesmo com !important
 * dos dois lados, o mais específico vence. */
.wp-block-advgb-button_link.wp-block-advgb-button_link.wp-block-advgb-button_link {
	position: relative !important;
	isolation: isolate;
	display: inline-flex !important;
	align-items: center !important;
	/* Padding simétrico (esquerda = direita): sem isso, o fundo que cresce
	 * no hover (ver ::before) vai direto até a borda do texto, sem respiro. */
	padding: 1.1em 1.6em !important;
	margin: 1.50em 0 0.75em !important;
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 999px !important;
	font-family: var(--dc-font-heading) !important;
	font-weight: 400 !important;
	font-size: 1.3rem !important;
	line-height: 1.2 !important;
	letter-spacing: 0.01em !important;
	color: #f1d495 !important;
	text-decoration: none !important;
	text-transform: none !important;
	text-shadow: none !important;
	transition: color 0.45s ease;
}

.wp-block-advgb-button_link span {
	position: relative;
	z-index: 1;
}

.wp-block-advgb-button_link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 999px;
	background-color: #f1d495;
	/* Círculo pequeno e perfeito (raio fixo, não depende da proporção da
	 * caixa) colado na ponta direita; no hover o raio cresce mantendo o
	 * mesmo centro, então ele "infla" a partir dali até cobrir tudo. */
	clip-path: circle(0.55em at calc(100% - 1em) 50%);
	transition: clip-path 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}

.wp-block-advgb-button_link.wp-block-advgb-button_link:hover,
.wp-block-advgb-button_link.wp-block-advgb-button_link:focus-visible {
	color: #ffffff !important;
}

.wp-block-advgb-button_link:hover::before,
.wp-block-advgb-button_link:focus-visible::before {
	clip-path: circle(150% at calc(100% - 1em) 50%);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-advgb-button_link::before {
		transition: none;
	}
}

/* -----------------------------------------------------------------------
 * 5. Classes personalizadas criadas no editor (Gutenberg)
 * -----------------------------------------------------------------------
 * big-header       → título com linha pequena + palavra em destaque
 *                     grande (o <strong> vira bloco e assume o tamanho
 *                     grande).
 * big-header-medium → mesma estrutura do big-header, só que com o
 *                     destaque num tamanho menor — pra títulos de seção
 *                     que não precisam da escala "hero". Funciona em
 *                     qualquer tag (ex.: h2), não só <p>.
 * time-line         → linha do tempo minimalista: bloco de Colunas com
 *                     h2 (ano) + p (texto) em cada coluna; uma linha
 *                     fina conecta uma bolinha acima de cada ano. No
 *                     mobile a linha vira vertical, à esquerda.
 * image-prom        → imagem com parallax + giro bem sutil no scroll
 *                     (ver assets/js/content-effects.js); se a imagem
 *                     tiver legenda (figcaption), ela aparece ao lado,
 *                     não embaixo.
 * image-circle-top  → igual image-prom (mesmo suporte a legenda ao
 *                     lado), mas com topo em arco (border-radius 100%)
 *                     e base com cantos mais suaves; movimentação mais
 *                     simples no scroll — só translação vertical leve,
 *                     sem giro.
 * tow-colluns          → texto em 2 colunas no desktop, 1 coluna no mobile.
 * carrossel-slide-modern → layout nativo do bloco Colunas, dentro de
 *                          um container do tamanho do .container-site
 *                          (nav), não do .container-content padrão.
 *                          Tipo/peso de fonte + espaçamento equilibrado
 *                          no título/número/texto, fade-in escalonado
 *                          ao entrar na tela, e clique na imagem abre
 *                          modal com navegação — ver
 *                          assets/js/carrossel-slide.js e
 *                          assets/css/carrossel-modal.css.
 *                          Vai no bloco de Colunas do editor.
 * --------------------------------------------------------------------- */

.big-header {
	font-family: var(--dc-font-body);
	font-weight: 400;
	font-size: 1.25rem;
	color: var(--dc-color-secondary);
	margin-bottom: 0.5rem;
}

.big-header strong {
	display: block;
	font-family: var(--dc-font-heading);
	font-style: normal;
	font-weight: 400;
	font-size: clamp(2.75rem, 7vw, 5.5rem);
	line-height: .85;
	letter-spacing: 0.01em;
	color: var(--dc-color-ink);
}

.big-header-medium {
	font-family: var(--dc-font-body);
	font-weight: 400;
	font-size: 1.25rem;
	color: var(--dc-color-secondary);
	margin-bottom: 0.5rem;
}

.big-header-medium strong {
	display: block;
	font-family: var(--dc-font-heading);
	font-style: normal;
	font-weight: 400;
	font-size: clamp(1.75rem, 4.5vw, 3.25rem);
	line-height: .9;
	letter-spacing: 0.01em;
	color: var(--dc-color-ink);
}

/*
 * time-line: linha do tempo minimalista sobre o bloco de Colunas
 * nativo (h2 = ano, p = texto, por coluna). Uma linha fina (::before
 * no container) conecta uma bolinha (::before em cada coluna) acima de
 * cada ano. No mobile a orientação inverte: linha vertical à esquerda,
 * colunas uma embaixo da outra.
 */
.time-line {
	position: relative;
	margin-top: 4rem;
	margin-bottom: 4rem;
	padding-top: 2.5rem;
}

.time-line::before {
	content: "";
	position: absolute;
	top: 0.3rem;
	left: 0;
	right: 0;
	height: 1px;
	background-color: var(--dc-color-accent);
	opacity: 0.4;
}

.time-line > .wp-block-column {
	position: relative;
	text-align: center;
}

.time-line > .wp-block-column::before {
	content: "";
	position: absolute;
	top: -2.5rem;
	left: 50%;
	width: 0.6rem;
	height: 0.6rem;
	transform: translateX(-50%);
	border-radius: 50%;
	background-color: var(--dc-color-accent);
}

.time-line h2 {
	font-family: var(--dc-font-heading);
	font-weight: 400;
	font-size: 1.75rem;
	color: var(--dc-color-primary);
	margin: 0 0 0.5rem;
}

.time-line p {
	font-family: var(--dc-font-body);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--dc-color-ink);
	opacity: 0.75;
	max-width: 14rem;
	margin: 0 auto;
}

@media (max-width: 767px) {
	.time-line {
		display: flex !important;
		flex-direction: column;
		gap: 2.5rem;
		padding-top: 0;
		padding-left: 1.5rem;
	}

	.time-line::before {
		top: 0;
		bottom: 0;
		left: 0.25rem;
		right: auto;
		width: 1px;
		height: auto;
	}

	.time-line > .wp-block-column {
		text-align: left;
	}

	.time-line > .wp-block-column::before {
		top: 0.4rem;
		left: -1.5rem;
		transform: none;
	}

	.time-line p {
		margin: 0;
		max-width: none;
	}
}

/*
 * image-prom pode estar tanto direto num bloco de Imagem (figure.wp-block-image)
 * quanto — mais comum no editor — num bloco de Grupo que envolve a imagem
 * (div.wp-block-group.image-prom > figure.wp-block-image > img). Por isso os
 * seletores abaixo são só ".image-prom ..." (descendente), não exigem que a
 * classe esteja no mesmo elemento que "wp-block-image".
 */
.image-prom {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2rem;
}

.image-prom img {
	flex: 1 1 60%;
	max-width: 100%;
	border-radius: 20px;
	overflow: hidden;
	transform: scale(1.02);
	transition: opacity 0.6s ease;
	will-change: transform;
}

.image-prom figcaption {
	flex: 1 1 220px;
	font-family: var(--dc-font-heading);
	font-size: 1.25rem;
	font-style: italic;
	line-height: 1.4;
	color: var(--dc-color-secondary);
	text-align: left;
}

/* image-circle-top segue a mesma lógica de seletor "descendente" do
 * image-prom (pode estar no bloco de Grupo ou direto no de Imagem). */
.image-circle-top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2rem;
}

.image-circle-top img {
	flex: 1 1 60%;
	max-width: 100%;
	border-radius: 20% 20% 10px 10px;
	overflow: hidden;
	transition: opacity 0.6s ease;
	will-change: transform;
}

.image-circle-top figcaption {
	flex: 1 1 220px;
	font-family: var(--dc-font-heading);
	font-size: 1.25rem;
	font-style: italic;
	line-height: 1.4;
	color: var(--dc-color-secondary);
	text-align: left;
}

@media (prefers-reduced-motion: reduce) {
	.image-circle-top img {
		transform: none !important;
	}
}

.tow-colluns {
	column-count: 2;
	column-gap: 2.5rem;
}

/* Sem isso, uma imagem que caísse bem na quebra entre as duas colunas
 * ficava partida ao meio (metade no fim de uma coluna, metade no
 * início da outra) — break-inside:avoid-column força ela (e o
 * parágrafo) a pular inteira pra coluna seguinte em vez de rachar. */
.tow-colluns p,
.tow-colluns figure,
.tow-colluns img {
	break-inside: avoid-column;
}

.tow-colluns p {
	margin: 0 0 1.25rem;
}

.tow-colluns p:last-child {
	margin-bottom: 0;
}

.tow-colluns figure {
	margin: 1.5rem 0;
}

.tow-colluns img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
}

@media (max-width: 767px) {
	.tow-colluns {
		column-count: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.image-prom img {
		transform: none !important;
	}
}

/*
 * carrossel-slide-modern: layout nativo do bloco Colunas do Gutenberg,
 * só que dentro de um container um pouco mais largo (do tamanho do
 * .container-site do header/nav, não o .container-content padrão —
 * por isso o :has() na seção que envolve o bloco). Fora isso: tipo e
 * peso de fonte no título/número/texto, espaçamento equilibrado entre
 * os elementos de cada item e entre as colunas, e um fade-in suave e
 * escalonado (com um toque de aleatoriedade) quando o bloco entra na
 * tela — ver assets/js/carrossel-slide.js.
 */
.home-section:has(.carrossel-slide-modern) {
	max-width: 80rem;
}

.carrossel-slide-modern {
	margin-top: 4rem;
	margin-bottom: 4rem;
	column-gap: 3.5rem;
	row-gap: 4rem;
}

.carrossel-slide-modern figure {
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
	cursor: zoom-in;
}


.carrossel-slide-modern .wp-block-group > * {
	margin-top: 0;
	margin-bottom: 0.75rem;
}

.carrossel-slide-modern .wp-block-group > *:last-child {
	margin-bottom: 0;
}

.carrossel-slide-modern h4 {
	font-family: var(--dc-font-body);
	font-weight: 600;
}

.carrossel-slide-modern h4 strong {
	font-family: var(--dc-font-heading);
	font-weight: 400;
	color: var(--dc-color-primary);
}

.carrossel-slide-modern p {
	font-family: var(--dc-font-body);
	font-weight: 400;
}

/* No mobile (colunas empilhadas em 1), a imagem de cada item fica
 * sempre por último — no editor a ordem de figure/h4/p varia item a
 * item (às vezes a foto vem antes, às vezes depois), o que ficava
 * inconsistente empilhado. `order` reorganiza só visualmente, sem
 * mexer no HTML. Também trava a altura da imagem numa proporção fixa
 * — sem isso, cada foto (retrato/paisagem) saía com uma altura bem
 * diferente da vizinha. */
@media (max-width: 767px) {
	.carrossel-slide-modern .wp-block-group {
		display: flex;
		flex-direction: column;
	}

	.carrossel-slide-modern .wp-block-group h4,
	.carrossel-slide-modern .wp-block-group p {
		order: 1;
	}

	.carrossel-slide-modern .wp-block-group figure {
		order: 2;
		margin-top: 0.75rem;
	}

	.carrossel-slide-modern .wp-block-group figure img {
		width: 100%;
		aspect-ratio: 4 / 3;
		object-fit: cover;
		border-radius: 10px;
	}
}

/* Fade-in escalonado: cada coluna começa invisível/levemente deslocada
 * e o JS adiciona .is-revealed com um transition-delay aleatório
 * (--reveal-delay) quando o bloco entra na tela — dá a sensação de
 * "acender" uma depois da outra, sem ordem mecânica. */
.carrossel-slide-modern > .wp-block-column {
	opacity: 0;
	transform: translateY(1.25rem);
	transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: var(--reveal-delay, 0s);
}

.carrossel-slide-modern > .wp-block-column.is-revealed {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.carrossel-slide-modern > .wp-block-column {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Imagens do carrossel abrem no modal — ver assets/js/carrossel-slide.js
 * e assets/css/carrossel-modal.css. */

/* -----------------------------------------------------------------------
 * home-section--bg-image
 * -----------------------------------------------------------------------
 * Seção da home cuja página (ver template-parts/home-section.php) tem
 * imagem destacada: ela vira fundo em parallax, do mesmo tamanho/cantos
 * do cartão do hero slider (90vw, cantos arredondados), com um escurecido
 * por cima pra destacar o texto. O conteúdo fica no tamanho do container
 * do nav (.container-site, 80rem), não no .container-content padrão.
 * --------------------------------------------------------------------- */

.home-section--bg-image {
	position: relative;
	z-index: 0;
	max-width: 80rem;
	padding-top: 6rem;
	padding-bottom: 6rem;
	color: var(--dc-color-cream);
}

.home-section--bg-image .home-section__bg {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: -2;
	width: 90vw;
	height: calc(100vh - 80px);
	transform: translateX(-50%);
	border-radius: 28px;
	overflow: hidden;
	background-color: var(--dc-color-ink);
}

/* Sem z-index: dentro do próprio contexto de empilhamento do
 * .home-section__bg, um valor negativo aqui ficaria ATRÁS da <img>
 * (que não é posicionada), e o escurecido sumia. Sem z-index (auto),
 * ele empilha depois da imagem normalmente — é o que queremos. */
.home-section--bg-image .home-section__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(26, 17, 20, 0.5);
}

.home-section--bg-image .home-section__bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-section--bg-image .big-header {
	color: rgba(201, 162, 75, 0.75);
}

.home-section--bg-image .big-header strong {
	color: var(--dc-color-accent);
	font-size: clamp(1.375rem, 3.5vw, 2.75rem);
}

/* No mobile, o esquema "imagem de fundo cobrindo a seção toda + texto
 * sobreposto por cima" não cabe: o texto (título + descrição + tabela
 * de horários inteira) é alto demais pra caber dentro de uma imagem
 * com altura fixa — o que sobrava escorria pra fora da foto, caindo
 * no fundo creme da página, onde o texto claro (pensado pra ficar
 * sobre a foto escurecida) ficava ilegível. Por isso aqui o esquema
 * muda de verdade: a imagem vira um bloco normal (não mais fundo
 * absoluto), com altura própria (aspect-ratio, não mais calc(100vh)),
 * e o texto flui normalmente ABAIXO dela — pra isso continuar legível
 * mesmo sem estar "em cima" da foto, a seção toda ganha um fundo
 * escuro sólido (em vez de depender só do escurecido da imagem). */
@media (max-width: 640px) {
	.home-section--bg-image {
		padding: 2rem 1.25rem 2.5rem;
		background-color: var(--dc-color-ink);
		border-radius: 20px;
	}

	.home-section--bg-image .home-section__bg {
		position: relative;
		top: auto;
		left: auto;
		z-index: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
		transform: none;
		margin: 0 0 2rem;
		border-radius: 14px;
	}

	.home-section--bg-image .big-header {
		margin-bottom: 1.5rem;
	}

	.home-section--bg-image p {
		margin-bottom: 1.5rem;
	}

	.home-section--bg-image .wp-block-table {
		margin-top: 0.5rem;
	}
}

/* A cor do texto da tabela nessa seção (fundo escurecido) é a única
 * coisa específica daqui — o resto do estilo (sem grade, borda
 * dourada) é global, ver .wp-block-table em "1. Overrides de blocos
 * nativos do Gutenberg". */
.home-section--bg-image .wp-block-table th,
.home-section--bg-image .wp-block-table td {
	color: var(--dc-color-cream);
}

/* -----------------------------------------------------------------------
 * Adicione novas customizações de blocos/componentes do Gutenberg abaixo.
 * --------------------------------------------------------------------- */