/* Cabeçalho da tela de produto — dicarvalho/obra-ficha.
   ------------------------------------------------------------------------
   Geometria literal de design/Producto.dc.html (seção "Producto hero"). Este
   arquivo vive em assets/css/ e NÃO no diretório do bloco porque o canvas do
   editor não carrega o style.css do tema — só o que passa por
   add_editor_style(). Mesmo arranjo de blocos-responsivo.css: um arquivo,
   dois caminhos, sem duplicar regra. */
.dc-obra-ficha {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 12%, transparent);
}

.dc-obra-ficha__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 88vh;
	padding: 50px 20px 20px 48px;
	overflow: hidden;
	background: var(--wp--preset--color--superficie-3, #0f0e0b);
}

.dc-obra-ficha__imagem {
	display: block;
	margin-left: 14px;
	max-width: calc(100% - 14px);
	max-height: 74vh;
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
}

/* Sticky: a ficha acompanha enquanto a obra rola. `align-self: start` é o que
   faz o sticky valer dentro de um grid — sem ele o item estica na altura da
   linha e nunca há o que grudar. */
.dc-obra-ficha__coluna {
	position: sticky;
	top: 0;
	align-self: start;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 150px 48px 70px;
}

.dc-obra-ficha__eyebrow {
	margin-bottom: 22px;
	font-size: 12px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acento, #c9a86a);
}

.dc-obra-ficha__titulo {
	margin: 0 0 26px;
	font-family: var(--wp--preset--font-family--familia-2, "Cormorant Garamond", serif);
	font-weight: 300;
	font-size: clamp(42px, 4vw, 68px);
	line-height: 1.04;
}

/* O bloco virou <div> porque o campo ACF devolve HTML já formatado pelo wpautop
   — ver o comentário no render.php. A tipografia continua aqui; o espaçamento
   ENTRE parágrafos vai na regra do <p> abaixo, e o último perde a margem para o
   `margin-bottom: 34px` do container continuar valendo sozinho. */
.dc-obra-ficha__descripcion {
	margin: 0 0 34px;
	max-width: 440px;
	font-size: 15px;
	line-height: 1.85;
	color: color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 70%, transparent);
}

.dc-obra-ficha__descripcion p {
	margin: 0 0 1em;
}

.dc-obra-ficha__descripcion p:last-child {
	margin-bottom: 0;
}

.dc-obra-ficha__ficha {
	display: flex;
	flex-direction: column;
	margin-bottom: 34px;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 14%, transparent);
}

.dc-obra-ficha__linha {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 16px 2px;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 14%, transparent);
	font-size: 13.5px;
}

.dc-obra-ficha__rotulo {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 50%, transparent);
}

.dc-obra-ficha__valor--estado {
	color: var(--wp--preset--color--acento, #c9a86a);
}

.dc-obra-ficha__precio {
	margin-bottom: 28px;
	font-family: var(--wp--preset--font-family--familia-2, "Cormorant Garamond", serif);
	font-size: 44px;
	line-height: 1;
}

/* Os 480px do design cabiam em COMPRAR + CONSULTAR OBRA. O rotulo novo da
   cliente — "Quiero adquirir esta obra", 25 caracteres em caixa alta com
   0.2em de tracking — nao cabe: os dois botoes se espremiam e cada um quebrava
   o rotulo em duas linhas. */
.dc-obra-ficha__acciones {
	display: flex;
	gap: 12px;
	max-width: 600px;
}

.dc-obra-ficha__comprar,
.dc-obra-ficha__consultar,
.dc-obra-ficha__vendido {
	display: block;
	flex: 1 1 auto;
	text-align: center;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	/* Rotulo em uma linha so. Sem isto, o proximo rotulo comprido volta a
	   quebrar no meio do botao em silencio, e so se descobre olhando. */
	white-space: nowrap;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.dc-obra-ficha__comprar {
	padding: 18px 40px;
	background: var(--wp--preset--color--acento, #c9a86a);
	color: var(--wp--preset--color--base, #0b0a08);
	font-weight: 600;
}

.dc-obra-ficha__comprar:hover,
.dc-obra-ficha__comprar:focus-visible {
	background: var(--wp--preset--color--contraste, #ede6d8);
	color: var(--wp--preset--color--base, #0b0a08);
}

.dc-obra-ficha__consultar {
	padding: 17px 40px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--acento, #c9a86a) 50%, transparent);
	color: var(--wp--preset--color--acento, #c9a86a);
}

.dc-obra-ficha__consultar:hover,
.dc-obra-ficha__consultar:focus-visible {
	border-color: var(--wp--preset--color--acento, #c9a86a);
	background: color-mix(in srgb, var(--wp--preset--color--acento, #c9a86a) 12%, transparent);
}

/* Vendido não é link: é um estado. Sem cursor de mão, sem hover. */
.dc-obra-ficha__vendido {
	padding: 18px 40px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 22%, transparent);
	color: color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 45%, transparent);
	cursor: default;
}

/* Corte em 1120px, e nao 782px: blocos-responsivo.css forca
   `grid-template-columns: 1fr !important` em `[class*="dicarvalho-"]` a partir
   de 1120px, e o wrapper deste bloco (`wp-block-dicarvalho-obra-ficha`) casa
   com esse seletor. Ate 2026-07-30 este arquivo cortava em 782px: entre 783 e
   1119 a ficha ja empilhava por causa do !important, mas continuava com o
   padding, o `min-height: 88vh` e o `position: sticky` de desktop — um iPad em
   paisagem via a obra como uma faixa preta de 862px. Empilhado, o sticky nao
   sai sozinho: o `position: static !important` de blocos-responsivo.css so
   atinge o wrapper (`[class*="dicarvalho-"]`), nunca `.dc-obra-ficha__coluna`
   — por isso o `position: static` abaixo continua necessario aqui. */
@media (max-width: 1120px) {
	.dc-obra-ficha {
		grid-template-columns: 1fr;
	}

	.dc-obra-ficha__media {
		min-height: 0;
		padding: 24px 20px;
	}

	.dc-obra-ficha__imagem {
		margin-left: 0;
		max-width: 100%;
		max-height: 60vh;
	}

	.dc-obra-ficha__coluna {
		position: static;
		padding: 40px 20px 56px;
	}

	.dc-obra-ficha__acciones {
		flex-direction: column;
	}

	/* Empilhados, os botoes ja tem a largura da coluna e nao disputam espaco
	   entre si — aqui o `nowrap` deixa de proteger e passa a atrapalhar: num
	   telefone estreito o rotulo longo transbordaria para fora da tela em vez
	   de quebrar. Duas linhas dentro de um botao de largura cheia nao incomodam
	   ninguem; barra de rolagem horizontal, sim. */
	.dc-obra-ficha__comprar,
	.dc-obra-ficha__consultar,
	.dc-obra-ficha__vendido {
		white-space: normal;
	}
}