/*
Theme Name: Ateliê
Description: Tema de blocos para portfólio de arquitetura. Leve, sem page builder, focado em imagem grande e tipografia.
Author: 
Version: 0.1.5
Requires at least: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: atelier
Tags: block-theme, full-site-editing, portfolio, one-column
*/

/* ---------------------------------------------------------------
   Quase todo o visual vive em theme.json. Aqui ficam só as coisas
   que theme.json não consegue expressar: hover, transições e grid.
   --------------------------------------------------------------- */

/* Rótulos em caixa alta (ficha técnica, categorias) */
.atelier-label {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
}

/* Cartões de projeto: imagem cresce devagar no hover */
.atelier-card figure,
.atelier-card .wp-block-post-featured-image {
	overflow: hidden;
	margin-bottom: var(--wp--preset--spacing--30);
}

.atelier-card img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.atelier-card:hover img {
	transform: scale(1.03);
}

.atelier-card .wp-block-post-title a {
	text-decoration: none;
}

.atelier-card:hover .wp-block-post-title a {
	color: var(--wp--preset--color--accent);
}

/* Ficha técnica do projeto: rótulo + valor em duas colunas */
.atelier-ficha {
	display: grid;
	grid-template-columns: minmax(6rem, 9rem) 1fr;
	gap: 0.35rem var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: var(--wp--preset--spacing--30);
}

.atelier-ficha dt {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
	margin: 0;
}

.atelier-ficha dd {
	margin: 0;
}

@media (max-width: 600px) {
	.atelier-ficha {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}

	.atelier-ficha dd {
		margin-bottom: var(--wp--preset--spacing--20);
	}
}

/* Galerias dentro do projeto respiram mais */
.wp-block-gallery {
	margin-block: var(--wp--preset--spacing--60);
}

/* Legenda de imagem discreta */
figcaption {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
	text-align: left;
}

/* Filtro de categorias no arquivo de projetos */
.atelier-filtros {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	list-style: none;
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--50);
}

.atelier-filtros a {
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid transparent;
}

.atelier-filtros a:hover,
.atelier-filtros .is-active a {
	border-bottom-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}

/* Acessibilidade: foco sempre visível */
:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* Respeita quem pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
	.atelier-card img {
		transition: none;
	}

	.atelier-card:hover img {
		transform: none;
	}
}

/* ---------------------------------------------------------------
   Grade editorial do portfólio.

   O que faz um site de arquitetura parecer template é a grade de
   cartões perfeitamente alinhados, todos do mesmo tamanho. Aqui a
   segunda coluna desce meia altura, criando o desalinho proposital
   que estúdios bons usam. É só CSS — ela continua usando o Loop de
   Consulta normal no editor, sem saber que isso existe.
   --------------------------------------------------------------- */

.atelier-projetos .wp-block-post-template {
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

@media (min-width: 782px) {
	.atelier-projetos .wp-block-post:nth-child(even) {
		margin-top: var(--wp--preset--spacing--70);
	}

	/* Puxa a coluna de volta para o topo no início de cada nova dupla,
	   senão a página vai ficando torta a cada linha. */
	.atelier-projetos .wp-block-post:nth-child(even) + .wp-block-post {
		margin-top: calc(var(--wp--preset--spacing--70) * -1);
	}
}

/* Cabeçalho de seção: rótulo pequeno + título, alinhados pela base */
.atelier-secao {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--50);
}

/* Passos do processo, numerados pelo CSS */
.atelier-passos {
	counter-reset: passo;
}

.atelier-passos > .wp-block-column::before {
	counter-increment: passo;
	content: counter(passo, decimal-leading-zero);
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent);
	margin-bottom: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--20);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* Capa do projeto ocupa a tela toda, sem margem nenhuma */
.atelier-capa img {
	width: 100%;
	height: min(78vh, 900px);
	object-fit: cover;
	display: block;
}

/* Navegação entre projetos no rodapé da obra */
.atelier-navprojeto {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: var(--wp--preset--spacing--40);
}

.atelier-navprojeto a {
	text-decoration: none;
}

/* Cabeçalho fixo discreto, sem sombra e sem "efeito".
   A cor de fundo vem do próprio bloco (verde da marca), não daqui —
   senão esta regra venceria a do editor por ordem de carregamento e
   ela não conseguiria trocar a cor do header pelo painel. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
}

/* ---------------------------------------------------------------
   Superfícies no verde da marca (topo e rodapé).

   O verde do logo é escuro o bastante para reprovar o cinza de texto
   secundário em contraste (3,3:1). Nessas duas faixas, e só nelas,
   o texto apagado usa o tom mais fechado.
   --------------------------------------------------------------- */

.has-brand-background-color .atelier-label {
	color: var(--wp--preset--color--contrast-3);
}

/* O sálvia forte também reprova sobre o verde: no menu do topo o item
   ativo se marca com a régua embaixo, não com cor. */
.site-header .wp-block-navigation a:hover,
.site-header .wp-block-navigation .current-menu-item a {
	box-shadow: inset 0 -1px 0 0 var(--wp--preset--color--contrast);
}

/* O logo é PNG com transparência e assume a cor do fundo atrás dele,
   então precisa de folga para não encostar na régua do header. */
.site-header .wp-block-site-logo img {
	display: block;
}

/* ===============================================================
   PÁGINA "EM OBRAS"

   Só entra em cena no modelo Em obras. Nada aqui afeta o site normal.
   =============================================================== */

.atelier-obras {
	min-height: 70vh;
	background-image:
		linear-gradient(var(--wp--preset--color--base-2) 1px, transparent 1px),
		linear-gradient(90deg, var(--wp--preset--color--base-2) 1px, transparent 1px);
	background-size: 32px 32px;
}

/* rótulo com a luz de obra piscando */
.atelier-canteiro {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.atelier-canteiro::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	animation: atelier-pisca 2.4s ease-in-out infinite;
}

@keyframes atelier-pisca {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.25; }
}

/* ---- medição: régua de escala, o preenchido é o que já foi feito ---- */

.atelier-medicao { margin-block: var(--wp--preset--spacing--40); }

.atelier-medicao-topo {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
	margin-bottom: 0.6rem;
}

.atelier-regua {
	position: relative;
	height: 22px;
	border-bottom: 1px solid var(--wp--preset--color--contrast);
	background-image: repeating-linear-gradient(
		90deg,
		var(--wp--preset--color--line) 0 1px,
		transparent 1px 10%
	);
	background-position: bottom;
	background-size: 100% 8px;
	background-repeat: no-repeat;
}

.atelier-regua::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 8px;
	width: var(--atelier-pct, 35%);
	background: var(--wp--preset--color--brand);
	border-bottom: 2px solid var(--wp--preset--color--accent);
	animation: atelier-mede 2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes atelier-mede {
	from { width: 0; }
	to { width: var(--atelier-pct, 35%); }
}

/* ---- a planta que se levanta ---- */

.atelier-prancheta { width: 100%; height: auto; }

.atelier-prancheta .traco,
.atelier-prancheta .cota {
	fill: none;
	stroke: var(--wp--preset--color--contrast);
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: atelier-desenha 13s ease-in-out infinite;
}

.atelier-prancheta .fino {
	stroke-width: 0.9;
	stroke: var(--wp--preset--color--contrast-2);
}

.atelier-prancheta .cota {
	stroke-width: 0.8;
	stroke: var(--wp--preset--color--accent);
}

.atelier-prancheta .chao { stroke-width: 2; }

@keyframes atelier-desenha {
	0%, 4%    { stroke-dashoffset: 1; }
	20%       { stroke-dashoffset: 0; }
	88%       { stroke-dashoffset: 0; }
	96%, 100% { stroke-dashoffset: 1; }
}

/* ordem da obra: chão, guindaste, andaime, fundação, paredes, telhado, esquadrias */
.atelier-prancheta .d1 { animation-delay: 0s; }
.atelier-prancheta .d2 { animation-delay: 0.35s; }
.atelier-prancheta .d3 { animation-delay: 0.7s; }
.atelier-prancheta .d4 { animation-delay: 1.05s; }
.atelier-prancheta .d5 { animation-delay: 1.4s; }
.atelier-prancheta .d6 { animation-delay: 1.75s; }
.atelier-prancheta .d7 { animation-delay: 2.1s; }
.atelier-prancheta .d8 { animation-delay: 2.45s; }

.atelier-cota-rotulo {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	letter-spacing: 0.12em;
	fill: var(--wp--preset--color--accent);
	text-transform: uppercase;
}

.atelier-gancho { animation: atelier-ica 5.5s ease-in-out infinite; }

@keyframes atelier-ica {
	0%, 100% { transform: translateY(0); }
	45%, 55% { transform: translateY(34px); }
}

@media (prefers-reduced-motion: reduce) {
	.atelier-prancheta .traco,
	.atelier-prancheta .cota {
		animation: none;
		stroke-dashoffset: 0;
	}

	.atelier-gancho,
	.atelier-canteiro::before,
	.atelier-regua::after {
		animation: none;
	}
}