/**
 * Property Engine — suíte editorial (D-200).
 *
 * Uma folha para as quatro superfícies de CONTEÚDO do tema: o índice do blog,
 * qualquer arquivo de CPT que não tenha composição própria, os arquivos de
 * taxonomia e o post individual. Elas compartilham praticamente tudo — cartão,
 * meta, chips, paginação, herói, newsletter —, e mantê-las em folhas separadas
 * foi o que deixou o blog do tema parecendo outro produto.
 *
 * ## De onde vem o desenho
 *
 * Dos modelos aprovados pela dona do produto. Eles nasceram com uma paleta
 * própria (`--pe-*`) idêntica à do tema por coincidência de origem; aqui cada
 * token é religado à cadeia real do produto — `faixa → página → global` — para
 * que o blog obedeça à Central de Aparência como qualquer outra página, em vez
 * de virar uma ilha com cores cravadas (D-183/D-187/D-196).
 *
 * ## Tamanhos de título
 *
 * Herói em 50px e títulos de seção em 42px no teto (D-199). Os modelos já
 * chegaram nesses números; o resto do tema foi alinhado a eles.
 *
 * ## Prefixos
 *
 * `.pty-bl` — arquivos (blog, CPT genérico, taxonomia).
 * `.pty-sp` — post individual.
 * Os componentes compartilhados são declarados para os dois.
 */

/* =====================================================================
 * TOKENS COMPARTILHADOS.
 *
 * O seletor inclui `[data-pty-band]` pela mesma razão do resto do tema: uma
 * propriedade personalizada é resolvida onde é DECLARADA, então sem redeclarar
 * na faixa a personalização por faixa não teria efeito (D-183).
 * ================================================================== */

.pty-bl,
.pty-sp,
.pty-bl [data-pty-band],
.pty-sp [data-pty-band] {
	--ed-brand: var(--pty-brand);
	--ed-brand-ink: var(--pty-brand-ink);
	--ed-brand-soft: var(--pty-brand-wash-2);
	--ed-deep: var(--pty-dark-bg);
	--ed-deep-2: var(--pty-dark-bg-2);
	/* D-208: as mesmas cores, sem escutar o fundo da faixa. Para TEXTO
	   escuro sobre elemento claro — nunca para pintar fundo. */
	--ed-deep-ink: var(--pty-dark-ink);
	--ed-deep-ink-2: var(--pty-dark-ink-2);
	--ed-on-deep: var(--pty-dark-text);
	--ed-on-deep-soft: var(--pty-dark-text-soft);
	--ed-on-deep-line: var(--pty-dark-line);
	--ed-on-deep-fill: var(--pty-dark-fill);

	--ed-bg: var(--pty-band-bg, var(--pty-bg));
	--ed-surface: var(--pty-band-bg, var(--pty-surface));
	--ed-surface-2: var(--pty-surface-strong);
	--ed-card: var(--pty-card-bg, var(--pty-bg));
	--ed-line: var(--pty-border);
	--ed-ink: var(--pty-band-title, var(--pty-text));
	--ed-muted: var(--pty-band-text, var(--pty-text-muted));

	--ed-shadow: 0 18px 50px color-mix(in srgb, var(--pty-shadow-tint) 12%, transparent);
	--ed-shadow-lg: 0 28px 70px color-mix(in srgb, var(--pty-shadow-tint-deep) 18%, transparent);

	--ed-radius: 18px;
	--ed-radius-lg: 30px;
	--ed-ease: cubic-bezier(.22, .8, .22, 1);
	--ed-container: min(var(--pty-container, 1140px), 92vw);
	--ed-narrow: min(760px, 92vw);
	--ed-display: var(--pty-display-font, Georgia, "Times New Roman", serif);
}

[data-theme="dark"] :is(.pty-bl, .pty-sp),
[data-theme="dark"] :is(.pty-bl, .pty-sp) [data-pty-band] {
	--ed-brand-soft: var(--pty-brand-wash-2);
	--ed-card: var(--pty-card-bg, var(--pty-surface));
	--ed-shadow: 0 18px 50px color-mix(in srgb, var(--pty-shadow-tint) 34%, transparent);
	--ed-shadow-lg: 0 28px 70px color-mix(in srgb, var(--pty-shadow-tint-deep) 45%, transparent);
}

/* Declarações de ELEMENTO só no invólucro — nunca no bloco compartilhado com
   `[data-pty-band]`, que pintaria cada faixa com o fundo da página e apagaria
   o degradê do herói (D-185). */
.pty-bl,
.pty-sp {
	color: var(--ed-ink);
	background: var(--ed-bg);
}

.pty-bl__container,
.pty-sp__container { width: var(--ed-container); margin-inline: auto; }

.pty-bl img,
.pty-sp img { display: block; max-width: 100%; }

.pty-bl button, .pty-bl input, .pty-bl select,
.pty-sp button, .pty-sp input, .pty-sp select { font: inherit; }

/* Revelação: só oculta quando há JavaScript, e nunca com movimento reduzido. */
.pty-js .pty-ed-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .7s var(--ed-ease), transform .7s var(--ed-ease);
}
.pty-js .pty-ed-reveal.is-visible { opacity: 1; transform: none; }

/* =====================================================================
 * COMPONENTES COMPARTILHADOS.
 * ================================================================== */

.pty-ed-eyebrow {
	display: flex; align-items: center; gap: 10px; margin: 0;
	color: var(--ed-brand); font-size: max(.74em, var(--pty-font-min, 12px)); font-weight: 800;
	letter-spacing: .14em; text-transform: uppercase; line-height: 1.2;
}
.pty-ed-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }

.pty-ed-section { padding: clamp(58px, 7vw, 96px) 0; }
.pty-ed-section--soft { background: var(--ed-surface); }

.pty-ed-section-title {
	max-width: 780px; margin: .85rem 0 0;
	font-family: var(--ed-display);
	/* D-199: teto de 42px nos títulos que não são o H1 da página. */
	font-size: calc(clamp(1.75em, 3.6vw, 2.625em) * var(--pty-title-scale, 1));
	font-weight: 400; line-height: 1.04; letter-spacing: -.045em;
	text-wrap: balance;
}

.pty-ed-section-copy {
	max-width: 680px; margin: 1rem 0 0;
	color: var(--ed-muted); font-size: 1em; line-height: 1.78;
}

/* -------------------------------------------------------------- Botões. */

.pty-ed-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 46px; padding: 0 20px;
	border: 1px solid transparent; border-radius: 999px;
	font-size: max(.82em, var(--pty-font-min, 12px)); font-weight: 800; text-decoration: none; cursor: pointer;
	transition: transform .24s var(--ed-ease), background .2s ease, border-color .2s ease;
}
.pty-ed-btn:hover { transform: translateY(-2px); }
.pty-ed-btn svg { width: 16px; height: 16px; }

.pty-ed-btn--brand { background: var(--pty-cta-bg, var(--ed-brand)); color: var(--pty-cta-text, var(--ed-brand-ink)); }
.pty-ed-btn--brand:hover { background: var(--pty-cta-bg-hover, var(--pty-brand-hover)); }
.pty-ed-btn--ghost { border-color: var(--ed-line); background: var(--ed-card); color: var(--ed-ink); }
.pty-ed-btn--ghost:hover { border-color: var(--ed-brand); color: var(--ed-brand); }
.pty-ed-btn--light { background: var(--ed-on-deep); color: var(--ed-deep-ink-2); }
.pty-ed-btn--ghost-light { border-color: var(--ed-on-deep-line); background: var(--ed-on-deep-fill); color: var(--ed-on-deep); }

/* --------------------------------------------------------- Trilha (breadcrumb). */

/* A trilha estrutural é a MESMA do resto do tema (`property_engine_breadcrumbs`);
   aqui ela só recebe a roupa editorial. Reescrevê-la nestes templates daria dois
   lugares para manter a mesma navegação — e um deles ficaria para trás. */
.pty-ed-breadcrumb,
.pty-bl .pty-breadcrumbs,
.pty-sp .pty-breadcrumbs {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	min-height: 54px; color: var(--ed-muted); font-size: max(.86em, var(--pty-font-min, 12px));
}
.pty-ed-breadcrumb a,
.pty-bl .pty-breadcrumbs a,
.pty-sp .pty-breadcrumbs a { color: inherit; text-decoration: none; }
.pty-ed-breadcrumb a:hover,
.pty-bl .pty-breadcrumbs a:hover,
.pty-sp .pty-breadcrumbs a:hover { color: var(--ed-brand); }
.pty-ed-breadcrumb svg { width: 12px; height: 12px; flex: none; opacity: .7; }
.pty-bl .pty-breadcrumbs__sep,
.pty-sp .pty-breadcrumbs__sep { opacity: .5; }
.pty-bl .pty-breadcrumbs [aria-current="page"],
.pty-sp .pty-breadcrumbs [aria-current="page"] { color: var(--ed-ink); }
.pty-ed-breadcrumb__wrap { border-bottom: 1px solid var(--ed-line); background: var(--ed-bg); }

/* ---------------------------------------------------------------- Chips. */

.pty-ed-chips {
	display: flex; gap: 8px; overflow-x: auto; padding: 2px;
	scrollbar-width: none; -ms-overflow-style: none;
}
.pty-ed-chips::-webkit-scrollbar { display: none; }

.pty-ed-chip {
	flex: none; display: inline-flex; align-items: center; gap: 7px;
	min-height: 38px; padding: 0 15px;
	border: 1px solid var(--ed-line); border-radius: 999px;
	background: var(--ed-card); color: var(--ed-muted);
	font-size: max(.78em, var(--pty-font-min, 12px)); font-weight: 700; text-decoration: none; white-space: nowrap;
	transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.pty-ed-chip:hover { border-color: var(--ed-brand); color: var(--ed-brand); }
.pty-ed-chip.is-active { border-color: transparent; background: var(--ed-brand); color: var(--ed-brand-ink); }
.pty-ed-chip__count { opacity: .65; font-weight: 600; }

/* ----------------------------------------------------------------- Meta. */

.pty-ed-meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
	color: var(--ed-muted); font-size: max(.74em, var(--pty-font-min, 12px));
}
.pty-ed-meta__sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .55; }

/* ---------------------------------------------------------------- Cartão. */

.pty-ed-grid {
	display: grid;
	grid-template-columns: repeat(var(--ed-cols, 3), minmax(0, 1fr));
	gap: 20px;
	margin: 0; padding: 0; list-style: none;
}

.pty-ed-card {
	position: relative; display: flex; flex-direction: column; overflow: hidden;
	border: 1px solid var(--pty-card-border, var(--ed-line));
	border-radius: 22px; background: var(--ed-card);
	transition: transform .3s var(--ed-ease), border-color .25s ease, box-shadow .3s ease;
}
.pty-ed-card:hover {
	transform: translateY(-6px);
	border-color: var(--pty-card-hover-border, color-mix(in srgb, var(--ed-brand) 38%, var(--ed-line)));
	box-shadow: var(--ed-shadow);
}

.pty-ed-card__link { position: absolute; inset: 0; z-index: 2; }
.pty-ed-card__link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.pty-ed-card__media {
	position: relative; overflow: hidden;
	aspect-ratio: 16 / 10; background: var(--ed-surface);
}
.pty-ed-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ed-ease); }
.pty-ed-card:hover .pty-ed-card__media img { transform: scale(1.05); }

/* Sem imagem destacada o cartão não pode virar um buraco branco: a marca
   desenha um padrão discreto, do mesmo jeito que as cenas de preenchimento
   fazem no resto do tema. */
.pty-ed-card__media--empty {
	background:
		radial-gradient(circle at 78% 22%, color-mix(in srgb, var(--ed-brand) 16%, transparent), transparent 55%),
		linear-gradient(135deg, var(--ed-surface), var(--ed-surface-2));
}

.pty-ed-card__body { display: flex; flex: 1; flex-direction: column; padding: 21px; }

.pty-ed-card__kicker {
	display: flex; align-items: center; justify-content: space-between; gap: 15px;
	color: var(--ed-muted); font-size: max(.68em, var(--pty-font-min, 12px)); font-weight: 800;
	letter-spacing: .1em; text-transform: uppercase;
}
.pty-ed-card__kicker strong { color: var(--ed-brand); font-weight: 800; }

.pty-ed-card__title {
	margin: 12px 0 0; color: var(--ed-ink);
	font-family: var(--ed-display); font-size: 1.2em; font-weight: 400;
	line-height: 1.22; letter-spacing: -.018em;
}
.pty-ed-card:hover .pty-ed-card__title { color: var(--ed-brand); }

.pty-ed-card__excerpt { margin: 11px 0 0; color: var(--ed-muted); font-size: max(.84em, var(--pty-font-min, 12px)); line-height: 1.65; }
.pty-ed-card .pty-ed-meta { margin-top: auto; padding-top: 20px; }

/* ------------------------------------------------------------ Paginação. */

.pty-ed-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 7px; margin-top: 46px; }
.pty-ed-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px; padding: 0 12px;
	border: 1px solid var(--ed-line); border-radius: 12px;
	background: var(--ed-card); color: var(--ed-muted);
	font-size: max(.82em, var(--pty-font-min, 12px)); font-weight: 700; text-decoration: none;
	transition: border-color .2s ease, color .2s ease;
}
.pty-ed-pagination .page-numbers:hover { border-color: var(--ed-brand); color: var(--ed-brand); }
.pty-ed-pagination .page-numbers.current { border-color: transparent; background: var(--ed-brand); color: var(--ed-brand-ink); }
.pty-ed-pagination .dots { border: 0; background: none; min-width: auto; }

/* ----------------------------------------------------------- Estado vazio. */

.pty-ed-empty {
	padding: clamp(46px, 6vw, 76px) 26px; text-align: center;
	border: 1px dashed var(--ed-line); border-radius: var(--ed-radius-lg);
	background: var(--pty-empty-bg, var(--ed-surface));
}
.pty-ed-empty__title { margin: 12px 0 0; font-family: var(--ed-display); font-size: 1.6em; font-weight: 400; }
.pty-ed-empty p { margin: 10px auto 0; max-width: 34rem; color: var(--ed-muted); }


/* =====================================================================
 * ARQUIVOS — blog, CPT genérico e taxonomia (`.pty-bl`).
 * ================================================================== */

.pty-bl-hero {
	position: relative; isolation: isolate; overflow: hidden;
	color: var(--ed-on-deep);
	background: linear-gradient(115deg, var(--ed-deep) 0%, color-mix(in srgb, var(--ed-deep-2) 78%, transparent) 52%, color-mix(in srgb, var(--ed-deep-2) 42%, transparent) 100%);
}

/* A foto entra por trás do degradê, nunca no lugar dele: sem imagem o herói
   continua legível, com imagem o texto continua legível. */
.pty-bl-hero__media {
	position: absolute; inset: 0; z-index: -1;
	background-size: cover; background-position: center 48%;
}
.pty-bl-hero__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(115deg,
		color-mix(in srgb, var(--ed-deep) 94%, transparent) 0%,
		color-mix(in srgb, var(--ed-deep) 84%, transparent) 46%,
		color-mix(in srgb, var(--ed-deep) 58%, transparent) 100%);
	opacity: var(--pty-band-overlay-strength, 100%);
}

.pty-bl-hero::after {
	content: ""; position: absolute; right: -150px; top: -180px;
	width: 520px; aspect-ratio: 1; border-radius: 50%;
	border: 1px solid var(--ed-on-deep-line);
	box-shadow: 0 0 0 88px color-mix(in srgb, var(--ed-on-deep) 2.5%, transparent),
	            0 0 0 176px color-mix(in srgb, var(--ed-on-deep) 1.8%, transparent);
	pointer-events: none;
}

.pty-bl-hero__grid {
	position: relative; z-index: 2;
	display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
	gap: clamp(40px, 7vw, 92px); align-items: center;
	min-height: 480px; padding: clamp(64px, 8vw, 86px) 0;
}
.pty-bl-hero--plain .pty-bl-hero__grid { grid-template-columns: 1fr; min-height: 380px; }

.pty-bl-hero .pty-ed-eyebrow { color: color-mix(in srgb, var(--ed-on-deep) 72%, var(--ed-brand)); }
/* Sobre o fundo escuro do herói a trilha precisa da cor clara: a regra geral
   dela usa a cor de texto secundário da página, que aqui some no fundo. */
.pty-bl-hero .pty-breadcrumbs { min-height: 0; margin-bottom: 18px; color: color-mix(in srgb, var(--ed-on-deep) 62%, transparent); font-size: max(.82em, var(--pty-font-min, 12px)); }
.pty-bl-hero .pty-breadcrumbs a:hover,
.pty-bl-hero .pty-breadcrumbs [aria-current="page"] { color: var(--ed-on-deep); }

/* Cor explícita: a regra global de `h1` do tema pinta todo título com a cor de
   texto da página, e sobre o fundo escuro do herói isso deixava o título
   azul-escuro num fundo azul-escuro — literalmente invisível. */
.pty-bl-hero__title {
	color: var(--ed-on-deep);
	max-width: 760px; margin: 18px 0 0;
	font-family: var(--ed-display); font-weight: 400;
	/* D-199: 50px é o teto do H1 de página. */
	font-size: var(--pty-title-fixed, calc(clamp(2em, 4.2vw, 3.125em) * var(--pty-title-scale, 1)));
	line-height: 1.02; letter-spacing: -.045em; text-wrap: balance;
}

.pty-bl-hero__lead {
	max-width: 620px; margin: 22px 0 0;
	color: var(--ed-on-deep-soft); font-size: 1.02em; line-height: 1.8;
}
.pty-bl-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Cartões inclinados do herói: puro enfeite, e por isso escondidos de quem
   usa leitor de tela e desligados com movimento reduzido. */
.pty-bl-hero__visual { position: relative; min-height: 380px; }
.pty-bl-hero__card {
	position: absolute; overflow: hidden;
	border: 1px solid var(--ed-on-deep-line); border-radius: 26px;
	background: var(--ed-deep-2);
	box-shadow: 0 28px 70px color-mix(in srgb, #000 32%, transparent);
	transform: perspective(900px) rotateY(-4deg) rotateX(2deg);
}
.pty-bl-hero__card img { width: 100%; height: 100%; object-fit: cover; }
.pty-bl-hero__card--main  { inset: 0 18% 22% 0; }
.pty-bl-hero__card--small { inset: 46% 0 0 34%; }

/* -------------------------------------------------------------- Barra. */

.pty-bl-toolbar { position: relative; z-index: 5; margin-top: -32px; }

.pty-bl-toolbar__shell {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
	padding: 13px; border: 1px solid var(--pty-filters-border, var(--ed-line));
	border-radius: 22px; background: var(--pty-filters-bg, var(--ed-card));
	box-shadow: var(--ed-shadow);
}

.pty-bl-search { position: relative; }
.pty-bl-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ed-muted); }
.pty-bl-search input {
	width: 100%; height: 48px; padding: 0 18px 0 46px;
	border: 1px solid var(--ed-line); border-radius: 14px;
	background: var(--ed-bg); color: var(--ed-ink); outline: 0;
}
.pty-bl-search input:focus-visible {
	border-color: var(--ed-brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ed-brand) 16%, transparent);
}

/* ------------------------------------------------------- Post em destaque. */

.pty-bl-feature {
	position: relative; overflow: hidden;
	display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	border: 1px solid var(--pty-card-border, var(--ed-line));
	border-radius: var(--ed-radius-lg); background: var(--ed-card);
	box-shadow: var(--ed-shadow); margin-bottom: 26px;
	transition: transform .32s var(--ed-ease), box-shadow .32s ease, border-color .32s ease;
}
.pty-bl-feature:hover {
	transform: translateY(-4px); box-shadow: var(--ed-shadow-lg);
	border-color: color-mix(in srgb, var(--ed-brand) 34%, var(--ed-line));
}
.pty-bl-feature__media { position: relative; overflow: hidden; min-height: 320px; }
.pty-bl-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ed-ease); }
.pty-bl-feature:hover .pty-bl-feature__media img { transform: scale(1.04); }
.pty-bl-feature__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(26px, 4vw, 48px); }
.pty-bl-feature__title {
	margin: 16px 0 0; color: var(--ed-ink);
	font-family: var(--ed-display); font-weight: 400;
	font-size: calc(clamp(1.5em, 2.4vw, 2.125em) * var(--pty-title-scale, 1));
	line-height: 1.05; letter-spacing: -.04em; text-wrap: balance;
}
.pty-bl-feature__excerpt { margin: 14px 0 0; color: var(--ed-muted); line-height: 1.75; }
.pty-bl-feature .pty-ed-meta { margin-top: 24px; }
.pty-bl-feature__link { position: absolute; inset: 0; z-index: 2; }

/* ------------------------------------------------------- Faixa de tópicos. */

.pty-bl-topics {
	display: grid; grid-template-columns: repeat(var(--ed-topic-cols, 4), minmax(0, 1fr));
	border: 1px solid var(--ed-line); border-radius: 24px;
	overflow: hidden; background: var(--ed-card);
	margin: 0; padding: 0; list-style: none;
}
.pty-bl-topic {
	position: relative; padding: 24px;
	border-right: 1px solid var(--ed-line);
	transition: background .25s ease;
}
.pty-bl-topic:last-child { border-right: 0; }
.pty-bl-topic:hover { background: var(--ed-surface); }
.pty-bl-topic__num { display: block; color: var(--ed-brand); font-size: max(.72em, var(--pty-font-min, 12px)); font-weight: 800; letter-spacing: .12em; }
.pty-bl-topic__name { display: block; margin-top: 9px; color: var(--ed-ink); font-family: var(--ed-display); font-size: 1.12em; line-height: 1.2; text-decoration: none; }
.pty-bl-topic__count { display: block; margin-top: 7px; color: var(--ed-muted); font-size: max(.78em, var(--pty-font-min, 12px)); }
.pty-bl-topic a::after { content: ""; position: absolute; inset: 0; }

/* ------------------------------------------------------------ Newsletter. */

.pty-bl-news {
	position: relative; overflow: hidden;
	padding: clamp(34px, 6vw, 64px); border-radius: var(--ed-radius-lg);
	background: linear-gradient(135deg, var(--ed-deep-2), var(--ed-deep));
	color: var(--ed-on-deep);
}
.pty-bl-news::after {
	content: ""; position: absolute; right: -90px; top: -110px;
	width: 340px; aspect-ratio: 1; border-radius: 50%;
	border: 1px solid var(--ed-on-deep-line); pointer-events: none;
}
.pty-bl-news__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 54px); align-items: center; }
.pty-bl-news .pty-ed-eyebrow { color: color-mix(in srgb, var(--ed-on-deep) 72%, var(--ed-brand)); }
.pty-bl-news__title { color: var(--ed-on-deep); margin: 14px 0 0; font-family: var(--ed-display); font-weight: 400; font-size: calc(clamp(1.55em, 2.6vw, 2.125em) * var(--pty-title-scale, 1)); line-height: 1.06; letter-spacing: -.04em; }
.pty-bl-news__copy { margin: 14px 0 0; color: var(--ed-on-deep-soft); line-height: 1.75; }

/* ------------------------------------------- Painel de estatística (taxonomia). */

/* Também é a coluna direita do herói de taxonomia, e lá o fundo é escuro —
   os mesmos tokens `on-deep` servem aos dois usos. */
.pty-bl-hero .pty-bl-stat { align-self: center; justify-self: end; width: min(100%, 360px); }

.pty-bl-stat {
	padding: 24px; border: 1px solid var(--ed-on-deep-line); border-radius: 24px;
	background: var(--ed-on-deep-fill); backdrop-filter: blur(10px); color: var(--ed-on-deep);
}
.pty-bl-stat__top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.pty-bl-stat__value { font-family: var(--ed-display); font-size: 2.4em; line-height: 1; }
.pty-bl-stat__label { color: var(--ed-on-deep-soft); font-size: max(.78em, var(--pty-font-min, 12px)); }
.pty-bl-stat__bar { height: 5px; margin-top: 18px; border-radius: 999px; overflow: hidden; background: var(--ed-on-deep-line); }
.pty-bl-stat__bar span { display: block; height: 100%; border-radius: inherit; background: var(--ed-brand); }
.pty-bl-stat__foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; color: var(--ed-on-deep-soft); font-size: max(.74em, var(--pty-font-min, 12px)); }

/* --------------------------------------------------------- Responsividade. */

@media (max-width: 1080px) {
	.pty-bl-hero__grid { grid-template-columns: 1fr; gap: 40px; min-height: 0; }
	/* Os cartões inclinados são enfeite e somem; o resumo do termo é dado e
	   fica, agora em largura cheia abaixo do título. */
	.pty-bl-hero__visual { display: none; }
	.pty-bl-hero .pty-bl-stat { justify-self: stretch; width: 100%; }
	.pty-ed-grid { --ed-cols: 2; }
	.pty-bl-topics { --ed-topic-cols: 2; }
	.pty-bl-topic:nth-child(2n) { border-right: 0; }
	.pty-bl-topic { border-bottom: 1px solid var(--ed-line); }
	.pty-bl-feature { grid-template-columns: 1fr; }
	.pty-bl-feature__media { min-height: 240px; }
	.pty-bl-news__grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
	.pty-ed-grid { --ed-cols: 1; }
	.pty-bl-topics { --ed-topic-cols: 1; }
	.pty-bl-topic { border-right: 0; }
	.pty-bl-toolbar { margin-top: -24px; }
	.pty-bl-toolbar__shell { grid-template-columns: 1fr; }
	.pty-bl-hero::after { display: none; }
	.pty-ed-section { padding: 52px 0; }
}

@media (prefers-reduced-motion: reduce) {
	.pty-bl-hero__card { transform: none; }
	.pty-ed-card, .pty-ed-card__media img,
	.pty-bl-feature, .pty-bl-feature__media img { transition: none; }
	.pty-ed-card:hover, .pty-bl-feature:hover { transform: none; }
	.pty-ed-card:hover .pty-ed-card__media img,
	.pty-bl-feature:hover .pty-bl-feature__media img { transform: none; }
}


/* =====================================================================
 * POST INDIVIDUAL (`.pty-sp`).
 * ================================================================== */

/* Barra de progresso da leitura. Fica no topo, acima de tudo, e some por
   completo com movimento reduzido — é decoração de rolagem. */
.pty-sp-progress {
	position: fixed; top: 0; left: 0; z-index: 10001;
	width: 0; height: 3px; background: var(--pty-brand);
	transition: width .1s linear;
}

/* O herói do post é a imagem destacada em tela cheia com o texto ancorado no
   rodapé dela — não uma foto solta acima do título. O véu é duplo: um gradiente
   horizontal segura o contraste do lado do texto e deixa a foto respirar à
   direita; um vertical apoia a base. Sem foto, sobra o gradiente da marca. */
.pty-sp-hero {
	position: relative; isolation: isolate; overflow: hidden;
	display: grid; align-items: end; padding: 0;
	color: var(--ed-on-deep);
	background: linear-gradient(160deg, var(--ed-deep), var(--ed-deep-2));
}
/* A altura de capa só existe quando há capa: sem foto, 560px de gradiente
   liso seriam um vazio empurrando o texto para fora da primeira dobra. */
.pty-sp-hero--media { min-height: 560px; }
.pty-sp-hero:not(.pty-sp-hero--media) .pty-sp-hero__header { padding-block: clamp(52px, 6vw, 74px) clamp(46px, 6vw, 68px); }

.pty-sp-hero::after {
	content: ""; position: absolute; inset: auto 0 0; height: 1px;
	background: var(--ed-on-deep-line);
}
.pty-sp-hero__backdrop { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center 48%; }
.pty-sp-hero__shade {
	position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(90deg,
			color-mix(in srgb, var(--ed-deep) 94%, transparent) 0%,
			color-mix(in srgb, var(--ed-deep) 84%, transparent) 46%,
			color-mix(in srgb, var(--ed-deep) 50%, transparent) 74%,
			color-mix(in srgb, var(--ed-deep) 26%, transparent) 100%),
		linear-gradient(0deg,
			color-mix(in srgb, var(--ed-deep) 72%, transparent) 0%,
			color-mix(in srgb, var(--ed-deep) 12%, transparent) 54%,
			color-mix(in srgb, var(--ed-deep) 20%, transparent) 100%);
	opacity: var(--pty-band-overlay-strength, 100%);
}
.pty-sp-hero .pty-sp__container { position: relative; z-index: 1; }

.pty-sp-hero__header { max-width: 900px; padding: clamp(64px, 8vw, 88px) 0 clamp(62px, 10vw, 112px); }
.pty-sp-hero .pty-ed-eyebrow { color: color-mix(in srgb, var(--ed-on-deep) 78%, transparent); }
.pty-sp-hero__title {
	max-width: 880px; margin: 15px 0 0; color: var(--ed-on-deep);
	font-family: var(--ed-display); font-weight: 400;
	font-size: var(--pty-title-fixed, calc(clamp(2.35em, 4.25vw, 3.125em) * var(--pty-title-scale, 1)));
	line-height: 1.02; letter-spacing: -.045em; text-wrap: balance;
	text-shadow: 0 3px 24px color-mix(in srgb, #000 22%, transparent);
}
.pty-sp-deck { max-width: 790px; margin: 16px 0 0; color: var(--ed-on-deep-soft); font-size: 1em; line-height: 1.72; }

.pty-sp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px; color: var(--ed-on-deep-soft); font-size: max(.78em, var(--pty-font-min, 12px)); }
.pty-sp-author-pill { display: inline-flex; align-items: center; gap: 10px; }
.pty-sp-author-pill img,
.pty-sp-author-pill .pty-sp-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.pty-sp-avatar {
	display: grid; place-items: center;
	border: 1px solid var(--ed-on-deep-line);
	background: var(--ed-on-deep-fill); color: var(--ed-on-deep);
	font-size: max(.74em, var(--pty-font-min, 12px)); font-weight: 900;
}
.pty-sp-author-pill > span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.pty-sp-author-pill strong { color: var(--ed-on-deep); font-size: max(.95em, var(--pty-font-min, 12px)); font-weight: 750; }
.pty-sp-author-pill small { font-size: max(.84em, var(--pty-font-min, 12px)); opacity: .78; }
.pty-sp-meta__copy { display: inline-flex; flex-wrap: wrap; gap: 5px; align-items: baseline; }
.pty-sp-meta .pty-ed-meta__sep {
	width: 1px; height: 28px; border-radius: 0;
	background: var(--ed-on-deep-line); opacity: 1;
}

/* A trilha estrutural fica FORA do herói, numa faixa clara logo abaixo: sobre
   a foto ela competiria com o título, e é informação de navegação, não de capa. */
.pty-sp-crumbs { padding: 17px 0 0; background: var(--ed-bg); }
.pty-sp-crumbs .pty-breadcrumbs { min-height: 0; margin: 0; font-size: max(.875em, var(--pty-font-min, 12px)); line-height: 1.45; }

/* ---------------------------------------------------------- Composição. */

/* Duas colunas reais: o conteúdo recebe o espaço do antigo trilho de
   compartilhamento. Em todas as larguras, o grid não cria uma coluna vazia. */
.pty-sp-shell {
  display: grid;
  grid-template-columns: minmax(0, 242px) minmax(0, 1fr);
  justify-content: center;
  gap: clamp(24px, 3.3vw, 44px);
  align-items: start;
  padding: clamp(34px, 4vw, 42px) 0 clamp(56px, 8vw, 96px);
}
.pty-sp-shell--no-toc { grid-template-columns: minmax(0, 1fr); }
.pty-sp-shell--no-toc .pty-sp-prose { margin-inline: auto; width: 100%; }

/* Sticky no próprio aside, nunca no filho: mantém o deslocamento ao longo
   de toda a altura do grid, como o índice das políticas. */
.pty-sp-aside {
  position: sticky;
  top: var(--pty-content-toc-top, 104px);
  align-self: start;
  min-width: 0;
  max-height: calc(100vh - var(--pty-content-toc-top, 104px) - 18px);
  max-height: calc(100dvh - var(--pty-content-toc-top, 104px) - 18px);
}
/* Índice editorial: reproduz o padrão LIMPO das políticas individuais.
   Sticky fica no ASIDE acima; o índice não deve parecer um cartão. */
.pty-sp-toc {
  position: static;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.pty-sp-toc__title {
  display: block;
  margin: 0 0 14px;
  color: var(--ed-brand);
  font-size: max(.68em, var(--pty-font-min, 12px));
  line-height: 1.4;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pty-sp-toc nav {
  min-width: 0;
  max-height: calc(100vh - var(--pty-content-toc-top, 104px) - 65px);
  max-height: calc(100dvh - var(--pty-content-toc-top, 104px) - 65px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.pty-sp-toc a {
  display: block;
  padding: 9px 0 9px 14px;
  border: 0;
  border-inline-start: 2px solid var(--ed-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ed-muted);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 400;
  text-decoration: none;
  overflow-wrap: break-word;
  transition: color .2s ease, border-color .2s ease;
}
.pty-sp-toc a:hover,
.pty-sp-toc a.is-active,
.pty-sp-toc a[aria-current="location"] {
  color: var(--ed-ink);
  border-inline-start-color: var(--ed-brand);
  background: transparent;
}
.pty-sp-toc a:focus-visible {
  color: var(--ed-ink);
  border-inline-start-color: var(--ed-brand);
  outline: 2px solid var(--ed-brand);
  outline-offset: 2px;
}

/* --------------------------------------------------------------- Prosa. */

.pty-sp-prose { min-width: 0; max-width: 760px; }
.pty-sp-prose > * { margin: 0 0 20px; }
.pty-sp-prose p { color: color-mix(in srgb, var(--ed-ink) 88%, var(--ed-muted)); font-size: 1.04em; line-height: 1.86; }
/* A entrada do texto é maior que o corpo: é o degrau que separa a abertura do
   resto e dá ao leitor um ponto de partida claro. */
.pty-sp-prose > p:first-child { font-size: 1.18em; line-height: 1.78; }
.pty-sp-prose h2 {
	scroll-margin-top: 115px; margin: 56px 0 16px;
	font-family: var(--ed-display); font-weight: 400;
	font-size: calc(clamp(1.75em, 2.8vw, 2.25em) * var(--pty-title-scale, 1));
	line-height: 1.12; letter-spacing: -.035em; text-wrap: balance;
}
.pty-sp-prose h3 { scroll-margin-top: 115px; margin: 40px 0 13px; font-size: min(1.6em, 42px); line-height: 1.32; }
.pty-sp-prose h4 { margin: 26px 0 10px; font-size: 1.06em; }
.pty-sp-prose ul, .pty-sp-prose ol { padding-left: 22px; }
.pty-sp-prose li { margin: 8px 0; color: color-mix(in srgb, var(--ed-ink) 88%, var(--ed-muted)); line-height: 1.75; }
/* Só os links escritos no texto ganham a cor e o sublinhado de link: qualquer
   componente do tema dentro da prosa (um botão, a caixa do autor) já tem cor
   própria, e esta regra, sendo mais específica, a atropelava. */
.pty-sp-prose a:not([class]) { color: var(--pty-brand-fg); text-decoration: underline; text-underline-offset: .18em; }
.pty-sp-prose .pty-ed-btn { text-decoration: none; }
.pty-sp-prose .pty-ed-btn--brand { color: var(--pty-cta-text, var(--ed-brand-ink)); }
.pty-sp-prose img { border-radius: var(--ed-radius); }
.pty-sp-prose figure { margin: 30px 0; }
.pty-sp-prose figcaption { margin-top: 10px; color: var(--ed-muted); font-size: max(.82em, var(--pty-font-min, 12px)); }
.pty-sp-prose blockquote {
	margin: 32px 0; padding: 4px 0 4px 22px;
	border-left: 3px solid var(--ed-brand);
	color: var(--ed-ink); font-family: var(--ed-display); font-size: 1.24em; line-height: 1.5;
}
.pty-sp-prose table { width: 100%; border-collapse: collapse; font-size: max(.9em, var(--pty-font-min, 12px)); }
.pty-sp-prose th, .pty-sp-prose td { padding: 10px 12px; border: 1px solid var(--ed-line); text-align: left; }
.pty-sp-prose th { background: var(--ed-surface); font-weight: 700; }

/* Tabela larga não pode empurrar a página: rola dentro do próprio contêiner. */
.pty-sp-prose .pty-sp-scroll { overflow-x: auto; }

.pty-sp-summary {
	padding: 24px 26px; margin-bottom: 38px;
	border: 1px solid color-mix(in srgb, var(--ed-brand) 25%, var(--ed-line));
	border-radius: 22px;
	background: linear-gradient(120deg, var(--pty-brand-wash), var(--ed-card));
}
.pty-sp-summary small { display: block; color: var(--ed-brand); font-size: max(.68em, var(--pty-font-min, 12px)); font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.pty-sp-summary p { margin: 8px 0 0; color: var(--ed-ink); font-size: .98em; line-height: 1.72; }

.pty-sp-callout {
	margin: 34px 0; padding: 22px 24px;
	border-left: 4px solid var(--ed-brand); border-radius: 0 18px 18px 0;
	background: var(--ed-surface);
}
.pty-sp-callout strong { display: block; margin-bottom: 6px; color: var(--ed-ink); }
.pty-sp-callout p { margin: 0; color: var(--ed-muted); font-size: max(.94em, var(--pty-font-min, 12px)); }

.pty-sp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--ed-line); }
.pty-sp-tag {
	display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px;
	border: 1px solid var(--ed-line); border-radius: 999px;
	color: var(--ed-muted); font-size: max(.76em, var(--pty-font-min, 12px)); font-weight: 700; text-decoration: none;
}
.pty-sp-tag:hover { border-color: var(--ed-brand); color: var(--ed-brand); }

/* --------------------------------------------------------- Caixa do autor. */

.pty-sp-author {
	display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start;
	margin-top: 46px; padding: 26px;
	border: 1px solid var(--ed-line); border-radius: 24px; background: var(--ed-surface);
}
.pty-sp-author__photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
/* O avatar de iniciais é o mesmo componente do herói, mas aqui o fundo é claro:
   sem estas duas linhas as iniciais saíam brancas sobre branco. */
.pty-sp-author .pty-sp-avatar {
	border-color: transparent; background: var(--ed-brand);
	color: var(--pty-brand-ink, #fff); font-size: 1.1em;
}
.pty-sp-author__name { margin: 0; font-family: var(--ed-display); font-size: 1.16em; font-weight: 400; }
/* O nome leva o próprio nome de classe: assim ele fica de fora de
   `.pty-sp-prose a:not([class])` e não herda o sublinhado de link do texto. */
.pty-sp-author__link { color: inherit; text-decoration: none; }
.pty-sp-author__link:hover { color: var(--ed-brand); }
.pty-sp-author__role { margin: 4px 0 0; color: var(--ed-brand); font-size: max(.74em, var(--pty-font-min, 12px)); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pty-sp-author__bio { margin: 12px 0 0; color: var(--ed-muted); font-size: max(.9em, var(--pty-font-min, 12px)); line-height: 1.7; }

/* Aviso de "link copiado". */
.pty-sp-toast {
	position: fixed; left: 50%; bottom: 24px; z-index: 10200;
	padding: 11px 16px; border-radius: 999px;
	background: var(--ed-deep-2); color: var(--ed-on-deep);
	font-size: max(.8em, var(--pty-font-min, 12px)); box-shadow: var(--ed-shadow);
	opacity: 0; transform: translate(-50%, 18px); pointer-events: none;
	transition: opacity .25s ease, transform .25s var(--ed-ease);
}
.pty-sp-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------ Relacionados. */

.pty-sp-related { padding: clamp(52px, 7vw, 88px) 0; background: var(--ed-surface); }
.pty-sp-related__head { margin-bottom: 30px; }
.pty-sp-related__head .pty-ed-section-title { margin-top: 12px; }

/* Paginação interna do post (`<!--nextpage-->`) e comentários: herdam os
   componentes gerais do tema, aqui só ganham o respiro da composição. */
.pty-sp-pagelinks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; font-size: max(.86em, var(--pty-font-min, 12px)); }
.pty-sp-comments { padding-bottom: clamp(48px, 7vw, 86px); }

/* --------------------------------------------------------- Responsividade. */

@media (max-width: 1080px) {
  .pty-sp-shell,
  .pty-sp-shell--no-toc { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  /* Ecrã estreito: índice antes do artigo, sem sticky ou clipping interno. */
  .pty-sp-aside { position: static; top: auto; max-height: none; }
  .pty-sp-toc { padding: 0; }
  .pty-sp-toc nav { max-height: none; overflow: visible; display: grid; grid-template-columns: 1fr 1fr; }
  .pty-sp-prose { max-width: none; }
}

@media (max-width: 680px) {
	.pty-sp-toc nav { grid-template-columns: 1fr; }
	.pty-sp-author { grid-template-columns: 1fr; }
	.pty-sp-author__photo { width: 56px; height: 56px; }
	.pty-sp-hero--media { min-height: 510px; }
	.pty-sp-hero__shade {
		background:
			linear-gradient(90deg, color-mix(in srgb, var(--ed-deep) 94%, transparent), color-mix(in srgb, var(--ed-deep) 68%, transparent)),
			linear-gradient(0deg, color-mix(in srgb, var(--ed-deep) 70%, transparent), transparent 60%);
	}
	.pty-sp-deck { font-size: max(.96em, var(--pty-font-min, 12px)); line-height: 1.65; }
	.pty-sp-meta { gap: 10px; margin-top: 20px; }
	.pty-sp-meta .pty-ed-meta__sep { display: none; }
	.pty-sp-crumbs { padding-top: 14px; }
	.pty-sp-prose > p:first-child { font-size: 1.08em; }
	.pty-sp-prose h2 { margin-top: 42px; }
}

@media (prefers-reduced-motion: reduce) {
	.pty-sp-progress { display: none; }
	.pty-sp-toast { transition: none; }
}

/* A composição reutilizável dos singles editoriais inclui glossário/notícias/guias. */
.pty-ed-single, .pty-ed-term { max-width: var(--pty-container,1140px); }
.pty-ed-single > :not(.pty-content-single-shell), .pty-ed-term > :not(.pty-content-single-shell) { max-width: 800px; }
.pty-content-single-shell { width:100%; }
.pty-content-single-shell .pty-sp-prose { width:100%; }
/* O wrapper de conteúdo não deve cortar o scroll dos asides. */
.pty-sp, .pty-ed-single, .pty-ed-term { overflow-x:clip; }
@media (max-width:1080px) {
 .pty-content-single-shell, .pty-content-single-shell.pty-sp-shell--no-toc { grid-template-columns:minmax(0,1fr); }
}