/**
 * Seções da home (patterns em patterns/).
 * Carregado só quando uma seção .fc-secao aparece (ver inc/assets.php).
 */

/* ---------- Fotos ---------- */

.fc-foto {
	margin: 0;
}

.fc-foto img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--raio);
}

/* ---------- Curiosidade (desenho ocupa a coluna inteira, sem respiro) ---------- */

.fc-curiosidade__desenho {
	margin: 0;
	height: 100%;
}

.fc-curiosidade__desenho img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 781.98px) {

	.fc-curiosidade__desenho {
		height: 320px;
	}
}

/* ---------- Hero (foto no tamanho real, com degradê pro fundo sólido) ---------- */

.fc-hero__foto {
	position: relative;
	margin: 0;
}

.fc-hero__foto-img {
	display: block;
	width: 100%;
	height: auto;
}

.fc-hero__degrade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 45%;
	background: linear-gradient(to bottom, transparent, var(--wp--preset--color--preto));
	pointer-events: none;
}

.fc-hero__foto-conteudo {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
}

@media (max-width: 781.98px) {

	/* A foto (bem larga) rende baixa demais no celular pro texto caber sem estourar por cima.
	Altura um pouco maior que o mínimo necessário: sobra foto visível acima do título. */
	.fc-hero__foto {
		min-height: 540px;
	}

	.fc-hero__foto-img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* No mobile as colunas empilham: o truque de "subir a cesta" (desktop) cobriria o texto acima. */
	.fc-hero__cesta {
		margin-top: var(--wp--preset--spacing--40) !important;
		margin-bottom: 0 !important;
	}
}

/* ---------- Ícones (máscara: a cor vem de currentColor) ---------- */

.fc-icone {
	display: block;
	width: 3.5rem;
	height: 3.5rem;
	background-color: currentcolor;
	-webkit-mask: var(--fc-icone) center / contain no-repeat;
	mask: var(--fc-icone) center / contain no-repeat;
}

.fc-icone--olho {
	--fc-icone: url(../icons/olho.svg);
}

.fc-icone--frasco {
	--fc-icone: url(../icons/frasco.svg);
}

.fc-icone--pilha {
	--fc-icone: url(../icons/pilha.svg);
}

.fc-icone--cadeado {
	--fc-icone: url(../icons/cadeado.svg);
}

.fc-icone--pilulas {
	--fc-icone: url(../icons/pilulas.svg);
}

.fc-icone--mao {
	--fc-icone: url(../icons/mao.svg);
}

.fc-icone--alerta {
	--fc-icone: url(../icons/alerta.svg);
}

/* Faixa de ícones em xadrez amarelo/preto. */
.fc-faixa-icones {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	border-radius: var(--wp--custom--raio);
	overflow: hidden;
}

.fc-faixa-icones__item {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	background: var(--wp--preset--color--amarelo);
	color: var(--wp--preset--color--preto);
}

.fc-faixa-icones__item:nth-child(even) {
	background: var(--wp--preset--color--preto);
	color: var(--wp--preset--color--amarelo);
}

.fc-faixa-icones .fc-icone {
	width: 55%;
	height: 55%;
}

/* ---------- Contraste (capa) ---------- */

.fc-contraste__banner .is-layout-flex {
	align-items: center;
}

.fc-contraste__lado {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* position:absolute (em vez de height:100%) garante que o texto fique preso ao
topo/rodapé da foto mesmo quando a altura da caixa vem de min-height, não de
aspect-ratio — um height:100% comum não resolve de forma confiável nesse caso. */
.fc-contraste__lado .wp-block-cover__inner-container {
	position: absolute;
	inset: 0;
	height: auto;
}

@media (max-width: 781.98px) {

	/* No mobile o aspect-ratio:9/7 (do editor) força uma altura curta demais pro
	texto, o que faz o navegador tentar alargar a caixa além da coluna. Deixa a
	altura livre (o texto define) e a foto cobre no espaço que sobrar. */
	.fc-contraste__lado {
		aspect-ratio: auto !important;
		min-height: 320px;
	}
}

@media (max-width: 599.98px) {

	/* Marca em cima, ícones somem pra caber (o texto já vem embutido na marca). */
	.fc-contraste__banner .is-layout-flex {
		flex-direction: column;
	}

	.fc-contraste__logo {
		width: 300px !important;
	}

	.fc-contraste__logo img {
		width: 300px !important;
	}

	.fc-contraste__trio {
		display: none;
	}
}

/* ---------- Placeholder de bloco (até a Fase 4/5) ---------- */

.fc-placeholder-bloco {
	border: 2px dashed currentcolor;
	border-radius: var(--wp--custom--raio);
	padding: 2rem;
	text-align: center;
}

/* ---------- Cards ---------- */

.fc-card .fc-icone {
	margin-bottom: var(--wp--preset--spacing--20);
}

@media (min-width: 600px) {

	.fc-lista-colunas {
		columns: 2;
		column-gap: 2rem;
	}

	.fc-lista-colunas > li {
		break-inside: avoid;
	}

	.fc-lista-colunas > li:first-child {
		margin-top: 0;
	}
}

/* ---------- Informe-se (cards ao lado da foto, dentro de #campanha) ---------- */

/* Força 2 colunas: o grid automático do bloco (minimumColumnWidth) cabia 3 na largura dessa coluna. */
.fc-informe {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (max-width: 781.98px) {

	/* Um card por linha no mobile (a coluna do texto já ocupa a largura toda). */
	.fc-informe {
		grid-template-columns: 1fr !important;
	}
}

.fc-informe__card p {
	margin: 0;
}

.fc-informe__card p:last-child {
	flex: 1;
}

.fc-informe__card a {
	color: inherit;
	text-decoration: none;
}

.fc-informe__card a:focus-visible {
	outline-offset: 3px;
}

/* Círculo decorativo em volta do rosto na foto do médico. */
.fc-campanha__circulo {
	margin: 0;
	pointer-events: none;
}

/* ---------- Rede de cuidado ---------- */

/* Força 5 colunas: o grid automático (minimumColumnWidth) sobrava espaço pra uma 6ª coluna vazia. */
.fc-rede__cards {
	grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

@media (max-width: 781.98px) {

	.fc-rede__cards {
		grid-template-columns: 1fr !important;
	}
}

.fc-compartilhe__linha > .wp-block-group {
	min-width: 0;
}

.fc-compartilhe__coluna {
	flex-shrink: 0;
}

.fc-compartilhe__siga {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1rem;
	color: var(--wp--preset--color--branco);
}

.fc-compartilhe__siga-texto {
	color: var(--wp--preset--color--cinza-claro);
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 781.98px) {

	.fc-compartilhe__linha {
		flex-wrap: wrap !important;
	}
}

.fc-rede__bolinha {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--wp--preset--color--amarelo);
}

/* ---------- Pilhas ---------- */

.fc-pilhas__foto {
	min-height: 460px;
}

/* ---------- Prevenção ---------- */

.fc-prevencao__icones {
	margin: 0;
}

.fc-prevencao__icones img {
	display: block;
	width: 100%;
	height: auto;
}

.fc-fecho {
	display: inline-block;
	padding: 0.5em 0.9em;
	border-radius: var(--wp--custom--raio);
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
}

/* ---------- Página de manutenção ---------- */

.fc-manutencao {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.fc-manutencao__logo {
	text-align: center;
}

.fc-manutencao__logo img {
	display: inline-block;
	width: min(240px, 55vw) !important;
	height: auto !important;
}

/* Rodapé "Realização" abaixo das colunas. */
.fc-manutencao__colunas {
	margin-bottom: 0;
}

/* Faixa tracejada centralizada sob o título. */
.fc-manutencao hr.fc-manutencao__faixa.fc-manutencao__faixa {
	background-position: center;
}

/* ---------- Emergência ---------- */

.fc-emergencia__foto {
	margin: 0;
}

.fc-emergencia__foto img {
	display: block;
	width: 100%;
	height: 420px;
	object-fit: cover;
	object-position: center bottom;
}

@media (max-width: 781.98px) {

	.fc-emergencia__foto img {
		height: 200px;
	}
}

.fc-telefone .wp-block-button__link {
	min-height: 64px;
	padding-inline: 1.75rem;
	font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
}

@media (max-width: 599.98px) {

	.fc-telefones {
		flex-direction: column;
		align-items: stretch;
	}

	.fc-telefones .wp-block-button,
	.fc-telefones .wp-block-button__link {
		width: 100%;
	}
}