/*
 * Páginas internas no desenho novo (por enquanto, os cases: single-work.php).
 * Carregado no lugar de style.css e custom.css; ver emiliocapital_inner_assets().
 * Mesmas cores, tipografia e réguas da home (css/home.css).
 */

:root {
	--ec-ink: #111111;
	--ec-ink-2: #333333;
	--ec-muted: #6b6b6b;
	--ec-soft: #f2f2f2;
	--ec-bg: #ffffff;
	--ec-pad: clamp(20px, 2.6vw, 40px);
	--ec-text: 680px;
	--ec-wide: 1040px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body.ec-inner {
	margin: 0;
	background: var(--ec-bg);
}

body.ec-inner {
	color: var(--ec-ink);
	font-family: "DM Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
}

.ec-inner a {
	color: var(--ec-ink);
}

.ec-inner a:hover {
	color: var(--ec-muted);
}

.ec-inner :focus-visible {
	outline: 2px solid var(--ec-ink);
	outline-offset: 3px;
}

.ec-page {
	padding: clamp(20px, 3.2vh, 36px) var(--ec-pad) 0;
}

/* Topo */

.ec-top {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px 32px;
}

.ec-top-name {
	font-size: clamp(18px, 1.6vw, 22px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.005em;
	text-decoration: none;
}

.ec-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

.ec-links a {
	text-decoration: none;
}

/* Abertura do case: título com a frase embaixo, ilustração à direita */

.ec-hero {
	margin-top: clamp(28px, 6vh, 64px);
	padding-top: clamp(14px, 2vh, 20px);
	border-top: 3px solid var(--ec-ink);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(24px, 3.4vw, 56px);
	align-items: start;
}

.ec-hero.has-shot {
	grid-template-columns: minmax(0, 1fr) minmax(260px, 30%);
}

.ec-title {
	margin: 0;
	max-width: 12em;
	font-size: clamp(44px, 6.2vw, 96px);
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: -0.03em;
}

.ec-hero-line {
	margin: clamp(16px, 2.4vh, 28px) 0 0;
	max-width: 22em;
	font-size: clamp(20px, 1.9vw, 28px);
	line-height: 1.25;
	letter-spacing: -0.012em;
	color: var(--ec-ink-2);
}

.ec-hero-shot {
	aspect-ratio: 1200 / 1360;
	background: var(--ec-soft);
	overflow: hidden;
}

.ec-hero-shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Texto do case (vem do editor do WordPress) */

.ec-body {
	margin-top: clamp(36px, 6vh, 72px);
	max-width: var(--ec-wide);
	font-size: 18px;
	line-height: 1.6;
	color: #1d1d1d;
}

.ec-body > * {
	max-width: var(--ec-text);
	margin: 0 0 1.1em;
}

.ec-body a {
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.ec-body .wp-block-spacer {
	display: none;
}

/* Ficha: Role, Context, Duration, Volume, Live */

.ec-body .strong-tag {
	margin: 0;
	padding: 12px 0;
	border-top: 1px solid var(--ec-ink);
	display: grid;
	grid-template-columns: 128px minmax(0, 1fr);
	gap: 4px 20px;
	font-size: 16px;
	line-height: 1.45;
}

.ec-body .strong-tag:empty {
	display: none;
}

.ec-body .strong-tag strong {
	padding-top: 3px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--ec-muted);
}

.ec-body .strong-tag + :not(.strong-tag) {
	margin-top: 0;
	padding-top: clamp(28px, 5vh, 56px);
	border-top: 1px solid var(--ec-ink);
}

.ec-body .strong-tag + .wp-block-spacer + * {
	margin-top: 0;
	padding-top: clamp(28px, 5vh, 56px);
	border-top: 1px solid var(--ec-ink);
}

/* Títulos de seção: a mesma régua de 3px das fileiras da home */

.ec-body h2,
.ec-body h3,
.ec-body h4 {
	margin: clamp(48px, 8vh, 88px) 0 18px;
	padding-top: 14px;
	border-top: 3px solid var(--ec-ink);
	font-size: clamp(26px, 2.4vw, 34px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.018em;
	color: var(--ec-ink);
}

.ec-body .strong-tag + h4,
.ec-body .strong-tag + h2 {
	border-top-width: 3px;
}

/* Figuras: mais largas que o texto */

.ec-body figure {
	max-width: var(--ec-wide);
	margin: clamp(28px, 5vh, 48px) 0;
	float: none !important;
	padding: 0 !important;
}

.ec-body figure img {
	display: block;
	max-width: 100%;
	width: auto !important;
	height: auto !important;
}

.ec-body figure.full-width img,
.ec-body figure.fig-big img {
	width: 100% !important;
}

.ec-body figcaption {
	max-width: var(--ec-text);
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--ec-muted);
}

/* Listas, citação e separador */

.ec-body ul,
.ec-body ol {
	padding-left: 1.2em;
}

.ec-body li + li {
	margin-top: 0.35em;
}

.ec-body blockquote {
	margin: clamp(28px, 4vh, 40px) 0;
	padding: 2px 0 2px 20px;
	border-left: 3px solid var(--ec-ink);
	font-size: clamp(20px, 1.8vw, 24px);
	line-height: 1.35;
}

.ec-body blockquote p {
	margin: 0;
}

.ec-body hr {
	margin: clamp(48px, 8vh, 80px) 0;
	border: 0;
	border-top: 1px solid var(--ec-ink);
}

/* Avaliação a) e b) do case Evaluating: lado a lado, embaixo da figura */

.ec-body .evaluation {
	float: left;
	width: calc(50% - 8px);
	max-width: none !important;
	margin: 0 0 clamp(28px, 4vh, 40px) !important;
	padding: 16px 18px !important;
	background: var(--ec-soft) !important;
	font-size: 15px !important;
	line-height: 1.5;
}

.ec-body .evaluation + .evaluation {
	margin-left: 16px !important;
}

.ec-body .evaluation + .evaluation + * {
	clear: both;
}

.ec-body h2 strong,
.ec-body h3 strong,
.ec-body h4 strong {
	font-weight: inherit;
}

/* More work: os outros cases com o mesmo card da home */

.ec-more {
	margin-top: clamp(64px, 12vh, 140px);
	padding-top: clamp(10px, 1.4vh, 14px);
	border-top: 3px solid var(--ec-ink);
}

.ec-more-title {
	margin: 0 0 clamp(12px, 2vh, 18px);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--ec-muted);
}

.ec-more-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	max-width: 1120px;
}

.ec-tile {
	text-decoration: none;
}

.ec-case {
	display: flex;
	flex-direction: column;
	background: var(--ec-soft);
}

.ec-shot {
	aspect-ratio: 1200 / 1360;
	overflow: hidden;
}

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

.ec-case-text {
	padding: 18px;
}

.ec-case-title {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ec-case .ec-mark {
	flex: 0 0 auto;
	width: 30px;
	height: auto;
}

.ec-tname {
	margin: 0;
	font-size: 24px;
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: -0.015em;
}

.ec-tile:hover .ec-tname {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

.ec-line {
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.35;
	color: var(--ec-ink-2);
}

.ec-meta {
	margin: 12px 0 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

/* Rodapé */

.ec-bottom {
	margin-top: clamp(48px, 8vh, 96px);
	padding: 14px 0 clamp(24px, 4vh, 40px);
	border-top: 3px solid var(--ec-ink);
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px 40px;
}

.ec-archive h2 {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--ec-muted);
}

.ec-archive-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	font-size: 15px;
}

.ec-email {
	font-size: clamp(17px, 1.6vw, 21px);
	letter-spacing: -0.005em;
}

/* Computador: o texto começa na mesma linha em que a grade da home começa,
   e o título fica pendurado à esquerda */

@media (min-width: 1100px) {
	.ec-body {
		margin-left: calc(min(31%, 480px) + clamp(28px, 3.4vw, 56px));
	}
}

/* Seta de voltar: presa no canto de baixo à esquerda enquanto a página rola,
   e para logo acima do rodapé. O trilho tem altura zero, então não ocupa espaço. */

.ec-back-rail {
	--ec-back: 50px;
	position: sticky;
	bottom: calc(clamp(20px, 3.2vh, 32px) + var(--ec-back) + 24px);
	z-index: 10;
	height: 0;
}

/* Espaço entre o conteúdo e o rodapé, onde a seta pousa no fim da página */
.ec-back-rail + .ec-bottom {
	margin-top: calc(var(--ec-back, 50px) + 48px);
}

.ec-back {
	position: absolute;
	left: 0;
	top: 24px;
	display: block;
	width: var(--ec-back);
	height: var(--ec-back);
	color: var(--ec-ink);
}

.ec-back svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.ec-inner a.ec-back:hover {
	color: var(--ec-muted);
}

/* Barra do admin do WordPress */

.admin-bar .ec-page {
	min-height: calc(100vh - 32px);
}

/* Celular */

@media (max-width: 760px) {
	.ec-back-rail {
		--ec-back: 44px;
	}

	.ec-more-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ec-hero.has-shot {
		grid-template-columns: minmax(0, 1fr);
	}

	.ec-hero-shot {
		order: -1;
	}

	.ec-body {
		font-size: 17px;
	}

	.ec-body .strong-tag {
		grid-template-columns: minmax(0, 1fr);
	}

	.ec-body .evaluation {
		float: none;
		width: auto;
	}

	.ec-body .evaluation + .evaluation {
		margin-left: 0 !important;
	}
}

/* Peças de case (desde o case do Tramo, 17/10/2026). Vêm do editor como HTML:
   .ec-lede o primeiro parágrafo maior; .ec-pair duas figuras lado a lado (.ec-phones para telas de celular);
   .ec-steps uma lista numerada com figuras pequenas; .ec-timeline datas com o que mudou em cada uma. */

.ec-body .ec-lede {
	font-size: clamp(20px, 1.8vw, 24px);
	line-height: 1.4;
	letter-spacing: -0.008em;
	color: var(--ec-ink);
}

.ec-body figcaption b {
	margin-right: 4px;
	font-weight: 700;
	color: var(--ec-ink);
}

.ec-body .ec-pair,
.ec-body .ec-steps,
.ec-body .ec-timeline {
	max-width: var(--ec-wide);
	margin: clamp(28px, 5vh, 48px) 0;
}

.ec-body .ec-pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	align-items: start;
}

.ec-body .ec-pair.ec-phones {
	max-width: 660px;
}

.ec-body .ec-pair figure,
.ec-body .ec-steps figure,
.ec-body .ec-timeline figure {
	margin: 0;
}

.ec-body .ec-pair img,
.ec-body .ec-steps img,
.ec-body .ec-timeline img {
	width: 100% !important;
	border: 1px solid #e2e2e2;
}

.ec-body .ec-steps {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 36px 24px;
}

.ec-body .ec-steps li {
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid var(--ec-ink);
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	gap: 10px 12px;
	align-content: start;
}

.ec-body .ec-n {
	font-size: 26px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.ec-body .ec-steps p {
	margin: 0;
	font-size: 16.5px;
	line-height: 1.45;
	color: var(--ec-ink);
}

.ec-body .ec-steps figure {
	grid-column: 2;
}

.ec-body .ec-timeline {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px 20px;
}

.ec-body .ec-timeline li {
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid var(--ec-ink);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ec-body .ec-timeline time {
	font-size: 26px;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.ec-body .ec-timeline b {
	font-size: 15px;
	font-weight: 600;
}

.ec-body .ec-timeline p {
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
	color: var(--ec-muted);
}

.ec-body .ec-timeline figure {
	margin-top: 8px;
}

@media (max-width: 760px) {
	.ec-body .ec-steps {
		grid-template-columns: minmax(0, 1fr);
	}

	.ec-body .ec-timeline {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}