/* "Texto + imagens" — o padrão reproduz a seção Nosso espaço da home. */

.dau-espaco {
	display: grid;
	grid-template-columns: var(--dau-cols, 1fr 1fr);
	align-items: var(--dau-vert, center);
	gap: 44px;
}

/* Trocar os lados é só mandar o texto para a segunda coluna: a ordem no HTML
   continua texto-antes-de-imagem, que é a ordem certa de leitura. */
.dau-esp-invertido .dau-esp-txt     { order: 2; }
.dau-esp-invertido .dau-esp-galeria { order: 1; }

/* ------------------------------------------------------------------ texto */

.dau-esp-rot {
	font-family: Nunito, sans-serif;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #C79E02;
	margin: 0 0 10px;
}

.dau-esp-txt h2 {
	font-family: Anton, Impact, sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(26px, 3.4vw, 44px);
	line-height: 1.05;
	color: #241C1B;
	margin: 0 0 14px;
}

.dau-esp-txt h2 em, .dau-esp-txt h2 mark,
.dau-esp-txt p em,  .dau-esp-txt p mark {
	font-style: normal;
	background: none;
	color: #C79E02;
}

.dau-esp-txt p {
	font-family: Nunito, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #6B615F;
	margin: 0 0 18px;
}

.dau-esp-lista {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: grid;
	gap: 10px;
}

.dau-esp-lista li {
	font-family: Nunito, sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #241C1B;
	padding-left: 28px;
	position: relative;
}

/* ✓ por CSS: é decoração, não conteúdo — não deve ser lido nem copiado junto. */
.dau-esp-lista li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 800;
	color: #C79E02;
}

.dau-esp-botao {
	display: inline-block;
	background: #A40609;
	color: #fff;
	font-family: Nunito, sans-serif;
	font-weight: 800;
	font-size: 15px;
	text-decoration: none;
	padding: 13px 24px;
	border-radius: 4px;
}

.dau-esp-botao:hover { filter: brightness(.92); }

.dau-esp-botao:focus-visible,
.dau-esp-galeria a:focus-visible {
	outline: 3px solid #A40609;
	outline-offset: 3px;
}

/* --------------------------------------------------------------- galeria */

.dau-esp-galeria { display: grid; gap: 12px; }

.dau-esp-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px;
	min-height: 0;
}

/* Sem foto: o retângulo hachurado que está na home hoje. Serve de lembrete
   do que falta fotografar — melhor que um buraco branco. */
.dau-esp-vazia {
	border: 1px solid #E4DCD3;
	background: repeating-linear-gradient(45deg, #EFEAE2 0 10px, #E9E2D9 10px 20px);
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	color: #9A928A;
	font: 800 12px/1 Nunito, sans-serif;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-align: center;
	padding: 10px;
}

/* ------------------------------------------------------------- arranjos */

/* Mosaico: a primeira ocupa a linha inteira, o resto se divide em duas.
   É o arranjo que está na home. */
.dau-esp-mosaico .dau-esp-galeria { grid-template-columns: 1fr 1fr; }
.dau-esp-mosaico .dau-esp-img:first-child { grid-column: span 2; aspect-ratio: 16 / 9; }

/* Destaque: uma grande à esquerda ocupando a altura toda, o resto em coluna. */
.dau-esp-destaque .dau-esp-galeria { grid-template-columns: 1.4fr 1fr; }
.dau-esp-destaque .dau-esp-img:first-child { grid-row: 1 / -1; aspect-ratio: 3 / 4; }

/* Grade: todas iguais, duas por linha. */
.dau-esp-grade .dau-esp-galeria { grid-template-columns: 1fr 1fr; }

/* Faixa: todas numa linha só. auto-fit para não quebrar com 5 imagens. */
.dau-esp-faixa .dau-esp-galeria {
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
}

/* Pilha e única: coluna inteira. */
.dau-esp-pilha .dau-esp-galeria,
.dau-esp-unica .dau-esp-galeria { grid-template-columns: 1fr; }
.dau-esp-unica .dau-esp-img { aspect-ratio: 4 / 3; }

/* ----------------------------------------------------------- responsivo */

@media (max-width: 980px) {
	.dau-espaco { grid-template-columns: 1fr; }

	/* Empilhado, a ordem passa a ser escolha do editor — e o padrão é o texto
	   primeiro: quem chega numa seção quer saber do que se trata antes de ver
	   a foto. */
	.dau-esp-txt     { order: 1; }
	.dau-esp-galeria { order: 2; }
	.dau-esp-movel-imagens .dau-esp-txt     { order: 2; }
	.dau-esp-movel-imagens .dau-esp-galeria { order: 1; }

	/* Destaque em coluna estreita vira grade: a imagem alta ficaria enorme. */
	.dau-esp-destaque .dau-esp-galeria { grid-template-columns: 1fr 1fr; }
	.dau-esp-destaque .dau-esp-img:first-child { grid-row: auto; aspect-ratio: 16 / 9; grid-column: span 2; }
}

@media (max-width: 560px) {
	/* Faixa de 3 ou 4 imagens no celular deixa cada uma do tamanho de um selo. */
	.dau-esp-faixa .dau-esp-galeria {
		grid-auto-flow: row;
		grid-template-columns: 1fr 1fr;
	}
}