/*
 * practice-areas.css — F10.3 (Atuação Profissional).
 * Compartilhado pela página-mãe Atuação e pelas 5 páginas de área
 * (/atuacao/<area>/). Reaproveita os tokens canônicos de marca — nenhuma
 * cor nova é inventada; só uma distinção sutil de acento por área via os
 * tokens já existentes (--jj-green, --jj-terra, --jj-gold).
 */

/* Evidências verificáveis (mesmo padrão de lista de assets/css/impact.css,
   sem duplicar a regra — arquivos diferentes carregam em páginas diferentes). */
.jj-practice-evidence {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--jj-space-4, 1.25rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.jj-practice-evidence article {
	height: 100%;
	padding: 1.5rem;
}

.jj-practice-evidence time {
	color: var(--jj-color-text-muted);
}

/* Distinção sutil por área: uma linha de acento no cabeçalho, sem
   fragmentar a marca (mesma paleta verde/creme/terracota de sempre). */
.jj-practice-area .jj-path-header,
.jj-atuacao .jj-brand-page__hero {
	border-top: 4px solid var(--jj-color-primary);
}

.jj-practice-area--engenharia .jj-path-header { border-top-color: var(--jj-color-accent); }
.jj-practice-area--tecnologia .jj-path-header { border-top-color: var(--jj-gold); }
.jj-practice-area--pesquisa .jj-path-header { border-top-color: var(--jj-green-2); }
.jj-practice-area--produtos .jj-path-header { border-top-color: var(--jj-color-accent-strong); }

@media (max-width: 30rem) {
	.jj-practice-evidence article {
		padding: 1.1rem;
	}
}

@media print {
	.jj-practice-evidence article {
		break-inside: avoid;
		box-shadow: none;
	}
}

/* Evolução 2.0 das cinco áreas profissionais — autoria: gerado-com-Codex. */
.jj-practice-area-v2 {
	--jj-practice-accent: var(--jj-green);
	--jj-practice-highlight: var(--jj-gold);
	--jj-practice-panel: var(--jj-green-dark);
	background: var(--jj-color-background);
}
.jj-practice-area--engenharia { --jj-practice-accent: var(--jj-terra); --jj-practice-panel: #4a2a21; }
.jj-practice-area--tecnologia { --jj-practice-accent: var(--jj-gold); --jj-practice-panel: #283f36; }
.jj-practice-area--pesquisa { --jj-practice-accent: var(--jj-green-2); --jj-practice-panel: #263e4a; }
.jj-practice-area--produtos { --jj-practice-accent: var(--jj-terra-ink); --jj-practice-panel: #3e3029; }

.jj-practice-v2__hero {
	position: relative;
	overflow: hidden;
	padding: clamp(4rem, 8vw, 7rem) 0 0;
	background:
		radial-gradient(circle at 92% 5%, color-mix(in srgb, var(--jj-practice-accent) 18%, transparent), transparent 25%),
		linear-gradient(135deg, var(--jj-color-surface-2), var(--jj-color-surface-1));
	border-top: 4px solid var(--jj-practice-accent);
	border-bottom: 1px solid var(--jj-color-border);
}
.jj-practice-v2__breadcrumbs { display: flex; align-items: center; gap: .6rem; margin-bottom: clamp(2.8rem, 6vw, 5rem); color: var(--jj-color-text-muted); font-size: .78rem; }
.jj-practice-v2__breadcrumbs a { color: var(--jj-color-primary); text-decoration: underline; text-underline-offset: .2rem; }
.jj-practice-v2__hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(19rem, .64fr); gap: clamp(2rem, 8vw, 7rem); align-items: center; padding-bottom: clamp(4rem, 8vw, 7rem); }
.jj-practice-v2__hero-copy h1 { max-width: 12ch; margin: .65rem 0 1.5rem; font: 500 clamp(3.4rem, 6.6vw, 6.5rem)/.98 var(--jj-font-display); letter-spacing: -.045em; }
.jj-practice-v2__lead { max-width: 44rem; color: var(--jj-color-text-muted); font-size: clamp(1.08rem, 1.7vw, 1.32rem); line-height: 1.7; }
.jj-practice-v2__hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.3rem; margin-top: 2rem; }
.jj-practice-v2__hero-actions .jj-button { background: var(--jj-practice-panel); }
.jj-practice-v2__panel { position: relative; min-height: 28rem; overflow: hidden; padding: clamp(2rem, 4vw, 3.2rem); display: flex; flex-direction: column; justify-content: flex-end; background: var(--jj-practice-panel); color: #fff; box-shadow: 1rem 1rem 0 var(--jj-shadow-offset); }
.jj-practice-v2__panel:before, .jj-practice-v2__panel:after { content: ""; position: absolute; border: 1px solid color-mix(in srgb, var(--jj-practice-highlight) 55%, transparent); border-radius: 50%; }
.jj-practice-v2__panel:before { width: 17rem; height: 17rem; right: -5rem; top: -6rem; }
.jj-practice-v2__panel:after { width: 10rem; height: 10rem; right: -1.5rem; top: -2.5rem; }
.jj-practice-v2__number { position: absolute; top: 1.5rem; left: 2rem; color: var(--jj-practice-highlight); font: 500 clamp(3.5rem, 7vw, 6rem)/1 var(--jj-font-display); }
.jj-practice-v2__panel .jj-kicker { color: var(--jj-practice-highlight); }
.jj-practice-v2__panel ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: .8rem 0 1.4rem; padding: 0; border-block: 1px solid rgba(255,255,255,.17); }
.jj-practice-v2__panel li { min-width: 0; padding: 1rem .35rem; border-right: 1px solid rgba(255,255,255,.17); }
.jj-practice-v2__panel li:last-child { border-right: 0; }
.jj-practice-v2__panel li span, .jj-practice-v2__panel li strong { display: block; }
.jj-practice-v2__panel li span { margin-bottom: .45rem; color: var(--jj-practice-highlight); font: .82rem var(--jj-font-display); }
.jj-practice-v2__panel li strong { overflow-wrap: normal; font-size: .72rem; line-height: 1.35; letter-spacing: -.01em; }
.jj-practice-v2__panel-note { margin: 0; color: #c8d3ce; font-size: .82rem; line-height: 1.65; }

.jj-practice-v2__areas { padding: 1rem 0; display: flex; align-items: center; gap: 1.5rem; border-top: 1px solid var(--jj-color-border); }
.jj-practice-v2__areas>span { flex: none; color: var(--jj-color-text-muted); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.jj-practice-v2__areas>div { display: flex; gap: .45rem; overflow: auto; padding: .2rem; }
.jj-practice-v2__areas a { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.6rem; white-space: nowrap; padding: .55rem .75rem; border: 1px solid var(--jj-color-border); border-radius: 99px; background: var(--jj-color-surface-1); color: var(--jj-color-text); font-size: .72rem; font-weight: 700; }
.jj-practice-v2__areas a small { color: var(--jj-color-text-muted); }
.jj-practice-v2__areas a[aria-current="page"] { border-color: var(--jj-practice-accent); background: var(--jj-practice-panel); color: #fff; }
.jj-practice-v2__areas a[aria-current="page"] small { color: var(--jj-practice-highlight); }

.jj-practice-v2__body { padding-block: 0; }
.jj-practice-v2__body>.jj-container--wide { gap: 0; }
.jj-practice-v2__editorial { max-width: 58rem; margin: 0 auto; padding: clamp(4rem, 8vw, 7rem) 0; font-size: 1.05rem; line-height: 1.8; }
.jj-practice-v2__body>.jj-container--wide>.jj-stack { gap: 0; counter-reset: jj-practice-section; }
.jj-practice-v2__section { position: relative; counter-increment: jj-practice-section; padding: clamp(4rem, 7vw, 6rem) 0 clamp(4rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem); border-top: 1px solid var(--jj-color-border); }
.jj-practice-v2__section:before { content: counter(jj-practice-section, decimal-leading-zero); position: absolute; left: 0; top: clamp(4.2rem, 7.3vw, 6.2rem); color: var(--jj-practice-accent); font: 500 1.15rem/1 var(--jj-font-display); }
.jj-practice-v2__section .jj-section-heading { display: grid; grid-template-columns: minmax(0, .75fr) minmax(15rem, .4fr); gap: 1rem 3rem; align-items: end; margin-bottom: 1.8rem; }
.jj-practice-v2__section .jj-section-heading .jj-kicker { grid-column: 1/-1; }
.jj-practice-v2__section .jj-section-heading h2 { max-width: 18ch; margin: 0; font: 500 clamp(2.25rem, 4vw, 3.75rem)/1.05 var(--jj-font-display); letter-spacing: -.03em; }
.jj-practice-v2__section .jj-section-heading>p:last-child { margin: 0; color: var(--jj-color-text-muted); line-height: 1.65; }
.jj-practice-v2__section .jj-empty-state { position: relative; overflow: hidden; min-height: 9rem; padding: 2rem 2rem 2rem 5.5rem; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border: 1px dashed var(--jj-color-border); border-left: 4px solid var(--jj-practice-accent); border-radius: .75rem; background: var(--jj-color-surface-1); text-align: left; }
.jj-practice-v2__section .jj-empty-state:before { content: "○"; position: absolute; left: 1.6rem; top: 50%; transform: translateY(-50%); color: var(--jj-practice-accent); font: 2.3rem var(--jj-font-display); }
.jj-practice-v2__section .jj-empty-state p { max-width: 65ch; color: var(--jj-color-text-muted); line-height: 1.65; }
.jj-practice-v2__section .jj-empty-state .jj-link { margin-top: .7rem; }
.jj-practice-v2__bridge { margin: 0; padding: 1.2rem 1.4rem; border-left: 3px solid var(--jj-practice-accent); background: var(--jj-color-surface-2); color: var(--jj-color-text-muted); line-height: 1.65; }
.jj-practice-v2__bridge a { color: var(--jj-color-primary); font-weight: 700; text-decoration: underline; text-underline-offset: .22rem; }
.jj-practice-v2__cta { margin: clamp(4rem, 7vw, 6rem) 0; padding: clamp(2rem, 5vw, 4rem); border: 0; border-radius: 0; background: linear-gradient(125deg, var(--jj-practice-panel), color-mix(in srgb, var(--jj-practice-panel) 82%, #000)); color: #fff; box-shadow: 1rem 1rem 0 var(--jj-shadow-offset); }
.jj-practice-v2__cta .jj-kicker { color: var(--jj-practice-accent); }
.jj-practice-v2__cta h2 { max-width: 18ch; margin: .4rem 0; font: 500 clamp(2.2rem, 4vw, 3.6rem)/1.08 var(--jj-font-display); }
.jj-practice-v2__cta p { max-width: 44rem; color: #c8d3ce; }
.jj-practice-v2__cta .jj-button { width: max-content; background: var(--jj-practice-accent); color: #172019; }
.jj-practice-area-v2 .jj-next-step, .jj-practice-area-v2 [aria-labelledby="jj-next-step-h"] { margin-bottom: clamp(4rem, 7vw, 6rem); padding: 1.5rem 0 0; border-top: 1px solid var(--jj-color-border); }
.jj-practice-area-v2 [id] { scroll-margin-top: 6rem; }

@media (max-width: 62rem) {
	.jj-practice-v2__hero-grid { grid-template-columns: 1fr; }
	.jj-practice-v2__panel { max-width: 47rem; }
	.jj-practice-v2__areas { align-items: flex-start; flex-direction: column; }
	.jj-practice-v2__section .jj-section-heading { grid-template-columns: 1fr; }
	.jj-practice-v2__section .jj-section-heading .jj-kicker { grid-column: auto; }
}
@media (max-width: 40rem) {
	.jj-practice-v2__hero-copy h1 { font-size: clamp(3rem, 15vw, 4.6rem); }
	.jj-practice-v2__panel { min-height: 25rem; padding: 1.5rem; box-shadow: .65rem .65rem 0 var(--jj-shadow-offset); }
	.jj-practice-v2__number { left: 1.5rem; }
	.jj-practice-v2__panel ol { grid-template-columns: 1fr; border-bottom: 0; }
	.jj-practice-v2__panel li { display: flex; align-items: center; gap: .7rem; padding: .7rem 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.17); }
	.jj-practice-v2__panel li span { margin: 0; }
	.jj-practice-v2__hero-actions { align-items: flex-start; flex-direction: column; }
	.jj-practice-v2__section { padding-left: 0; padding-top: 5.5rem; }
	.jj-practice-v2__section:before { top: 3.3rem; }
	.jj-practice-v2__section .jj-empty-state { padding: 4.3rem 1.3rem 1.5rem; }
	.jj-practice-v2__section .jj-empty-state:before { left: 1.3rem; top: 1.2rem; transform: none; }
	.jj-practice-v2__cta { box-shadow: .65rem .65rem 0 var(--jj-shadow-offset); }
	.jj-practice-v2__cta .jj-button { width: 100%; }
}
@media print {
	.jj-practice-v2__hero { padding: 1.5rem 0; }
	.jj-practice-v2__panel, .jj-practice-v2__areas, .jj-practice-v2__hero-actions, .jj-practice-v2__cta { display: none; }
	.jj-practice-v2__hero-grid { display: block; padding: 0; }
	.jj-practice-v2__section { padding: 1.5rem 0; break-inside: avoid; }
	.jj-practice-v2__section:before { display: none; }
}