/* ==========================================================================
   Plantão Rock — estilos do tema.

   Tradução do artboard "Plantão Rock - Template WP v2" para classes. Todos
   os valores vêm dos tokens do design system; onde o artboard usava um valor
   cru (130px da miniatura lateral, 70s do ticker), ele está reproduzido tal
   qual, com o porquê ao lado.

   Ordem: base, utilitários, cabeçalho, conteúdo, rodapé, player, responsivo.
   ========================================================================== */

/* ------------------------------------------------- ajustes de contraste */
/*
 * O design system declara, em editorial.css, "contraste AA em todos os
 * pares". O --brand (#E4261D) sobre o fundo da página dá 4,32:1 -- passa para
 * texto grande, reprova para os rótulos de 11px onde ele mais aparece
 * (kicker de categoria, "Últimas" do ticker). O --red-400 do próprio sistema
 * dá 5,26:1 e é visualmente quase idêntico.
 *
 * Então: --brand continua mandando em filete, borda e botão (elemento de
 * interface, onde o piso é 3:1); texto pequeno em vermelho usa --brand-text.
 */
:root {
	--brand-text: var(--red-400);

	/*
	 * Texto claro sobre --brand dá 4,28:1 -- reprova para os 14px do botão.
	 * O --red-600 (que o sistema já usa como estado pressionado) dá 5,69:1.
	 * A borda continua em --brand, então o botão segue lendo como vermelho
	 * da marca.
	 */
	--brand-fill: var(--red-600);
}

/* ------------------------------------------------------------------ base */
body.pr {
	background: var(--bg-page);
	color: var(--text-body);
	font-family: var(--font-body);
}

/* O player fixo ocupa 84px; a folga extra evita que o último elemento da
   página fique escondido atrás dele. */
body.pr-has-player { padding-bottom: 120px; }

img { max-width: 100%; height: auto; }

.pr-wrap {
	max-width: var(--container);
	margin: 0 auto;
	padding-left: clamp(16px, 4vw, 40px);
	padding-right: clamp(16px, 4vw, 40px);
}

.pr-main { padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(24px, 3vw, 40px); }

.pr-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--brand);
	color: var(--text-on-accent);
	padding: 12px 18px;
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
}
.pr-skip:focus { left: 0; }

/* ----------------------------------------------------------- utilitários */
.pr-kicker {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--brand-text);
	text-decoration: none;
}
.pr-kicker:hover { color: var(--highlight); }
.pr-kicker--static { color: var(--brand-text); }
.pr-kicker__mark { color: inherit; }

.pr-label {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-label);
	color: var(--text-faint);
}

.pr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	font-size: var(--text-sm);
	text-transform: uppercase;
	letter-spacing: var(--ls-caps);
	background: var(--brand-fill);
	color: var(--text-on-accent);
	border: var(--border-heavy) solid var(--brand);
	border-radius: var(--radius-sm);
	padding: 12px 22px;
	min-height: var(--touch-target);
	cursor: pointer;
	text-decoration: none;
	transition: filter var(--dur-fast) var(--ease-out);
}
.pr-btn:hover { filter: brightness(1.1); color: var(--text-on-accent); }
.pr-btn--ghost {
	background: none;
	color: var(--bat-bone);
	border-color: var(--border-strong);
}
.pr-btn--ghost:hover { background: var(--surface-raised); color: var(--bat-bone); filter: none; }


/* Link dentro de parágrafo precisa de sublinhado: quem não distingue
   vermelho de cinza não enxerga o link só pela cor (WCAG 1.4.1). */
.pr-radio__blurb a,
.pr-footer__about a,
.pr-archive-head__desc a,
.pr-author-head__bio a,
.pr-404__text a,
.pr-noresults a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Visível só para tecnologia assistiva. Não usa display:none nem
   visibility:hidden, que esconderiam do leitor de tela também. */
.pr-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* O <main> recebe foco pelo link de pular conteúdo; o anel do foco ali é
   ruído, já que o alvo é a região inteira. */
.pr-main:focus { outline: none; }

/* --------------------------------------------------------- LiveBadge ---- */
.pr-live {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--red-900);
	color: var(--bat-paper);
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--ls-label);
	padding: 4px 10px 4px 8px;
	border-radius: var(--radius-xs);
	border: 1px solid var(--red-600);
	white-space: nowrap;
}
.pr-live__dot {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--live);
	display: inline-flex;
	flex: 0 0 auto;
}
.pr-live__pulse {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--live);
	animation: pr-live-pulse 1.6s var(--ease-out) infinite;
}
@keyframes pr-live-pulse {
	0%   { transform: scale(1);   opacity: 0.7; }
	70%  { transform: scale(2.6); opacity: 0; }
	100% { opacity: 0; }
}

/* ------------------------------------------------------- barra utilitária */
.pr-utility { border-bottom: 1px solid var(--border-hairline); }
.pr-utility__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-top: 6px;
	padding-bottom: 6px;
}
.pr-utility__date {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: var(--ls-caps);
	color: var(--text-faint);
	text-transform: uppercase;
}
.pr-utility__radio {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: var(--touch-target);
	text-decoration: none;
	color: var(--text-muted);
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	/* A chamada da rádio nunca quebra: partida em duas ou três linhas ela
	   deixa de parecer um botão. Quem cede espaço é a data, que encurta. */
	white-space: nowrap;
}
.pr-utility__date-short { display: none; }
.pr-utility__radio:hover { color: var(--highlight); }

/* ---------------------------------------------------------------- masthead */
.pr-masthead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	flex-wrap: wrap;
	padding-top: 20px;
	padding-bottom: 14px;
}
.pr-masthead__brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.pr-masthead__logo { height: clamp(64px, 8vw, 86px); width: auto; }
.pr-masthead__wordmark {
	height: clamp(54px, 6.8vw, 72px);
	width: auto;
	border-left: 1px solid var(--border-hairline);
	padding-left: 14px;
}
.pr-masthead__actions { display: flex; align-items: center; gap: 6px; }

.pr-btn-ghost,
.pr-btn-menu {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: var(--touch-target);
	background: none;
	border: none;
	cursor: pointer;
	color: var(--text-muted);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	padding: 0 10px;
}
.pr-btn-ghost:hover { color: var(--bat-bone); }
.pr-btn-ghost__icon { font-size: 17px; }
.pr-btn-menu {
	justify-content: center;
	min-width: var(--touch-target);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-sm);
	color: var(--text-body);
	font-size: 20px;
	padding: 0;
	display: none; /* só aparece no mobile */
}
.pr-btn-menu:hover { background: var(--surface-raised); }

.pr-searchbar {
	border-bottom: 1px solid var(--border-hairline);
	padding: var(--space-4) 0;
	background: var(--surface-sunken);
}

/* ------------------------------------------------------------- navegação */
.pr-nav {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(12, 10, 9, 0.92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-top: 1px solid var(--border-hairline);
	border-bottom: 1px solid var(--border-hairline);
}
.pr-nav__inner {
	display: flex;
	gap: 2px;
	overflow-x: auto;
	scrollbar-width: none;
	/* Com muitos itens a faixa rola na horizontal, como no artboard. A
	   máscara na ponta direita faz o corte ler como "tem mais aqui" em vez
	   de texto quebrado. */
	-webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent 100%);
	mask-image: linear-gradient(to right, black calc(100% - 40px), transparent 100%);
}
.pr-nav__inner::-webkit-scrollbar { display: none; }
.pr-nav__item {
	border-bottom: 3px solid transparent;
	white-space: nowrap;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold);
	font-size: var(--text-sm);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--text-muted);
	padding: 0 14px;
	text-decoration: none;
}
.pr-nav__item:hover { color: var(--bat-bone); }
.pr-nav__item.is-current { border-bottom-color: var(--brand); color: var(--text-strong); }

/* ---------------------------------------------------------------- ticker */
.pr-ticker { border-bottom: 1px solid var(--border-hairline); overflow: hidden; }
.pr-ticker__inner { display: flex; align-items: stretch; overflow: hidden; }
.pr-ticker__label {
	flex-shrink: 0;
	/* O container é flex: o espaço do HTML entre o ícone e a palavra vira
	   item anônimo em branco e é descartado. O respiro vem do gap. */
	gap: var(--space-2);
	color: var(--brand-text);
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	display: flex;
	align-items: center;
	padding: 10px 14px 10px 0;
	background: var(--bg-page);
	z-index: 1;
	border-right: 3px solid var(--brand);
}
.pr-ticker__viewport {
	overflow: hidden;
	flex: 1;
	display: flex;
	align-items: center;
	/* As pontas somem em vez de cortar a manchete no meio. */
	-webkit-mask-image: linear-gradient(to right, transparent 0, black 32px, black calc(100% - 32px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, black 32px, black calc(100% - 32px), transparent 100%);
}
.pr-ticker__track {
	display: flex;
	gap: 56px;
	white-space: nowrap;
	padding-left: 32px;
	/* 70s para a volta completa: rápido o bastante para parecer vivo, lento
	   o bastante para dar tempo de ler. A lista é duplicada no HTML, então
	   -50% fecha o laço sem emenda. */
	animation: pr-ticker 70s linear infinite;
}
.pr-ticker:hover .pr-ticker__track,
.pr-ticker__track:focus-within { animation-play-state: paused; }
@keyframes pr-ticker {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.pr-ticker__item { font-size: var(--text-xs); color: var(--text-muted); text-decoration: none; }
.pr-ticker__item:hover { color: var(--highlight); }

.pr-ticker__toggle {
	flex-shrink: 0;
	order: 3;
	min-width: var(--touch-target);
	min-height: var(--touch-target);
	background: none;
	border: none;
	cursor: pointer;
	color: var(--text-faint);
	font-size: var(--text-2xs);
	line-height: 1;
	padding: 0 0 0 10px;
}
.pr-ticker__toggle:hover { color: var(--highlight); }

/* Pausa pelo botão: vale para todo mundo, inclusive quem não usa mouse. */
.pr-ticker.is-paused .pr-ticker__track { animation-play-state: paused; }

/* ----------------------------------------------------------------- cards */
.pr-card { min-width: 0; }
.pr-card__media { display: block; text-decoration: none; }
.pr-card__img {
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	display: block;
	background: var(--surface-raised);
}
.pr-card__img--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	color: var(--bat-slate);
}
.pr-card__title {
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	color: var(--text-strong);
	margin: 6px 0 8px;
}
.pr-card__title a { color: inherit; text-decoration: none; }
.pr-card__title a:hover { color: var(--highlight); }
.pr-card__excerpt { margin: 0 0 10px; color: var(--text-muted); line-height: var(--lh-normal); }
.pr-card__meta {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	color: var(--text-faint);
}

/* hero — o destaque da home */
.pr-card--hero .pr-card__img { margin-bottom: 16px; }
.pr-card--hero .pr-card__title {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 2.3vw, 2rem);
	margin: 10px 0;
	text-wrap: balance;
}
.pr-card--hero .pr-card__excerpt { font-size: var(--text-lg); }

/* side — lista à direita do hero, miniatura de 130px à direita do texto */
.pr-card--side {
	display: grid;
	grid-template-columns: 1fr 130px;
	gap: var(--space-4);
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--border-hairline);
	align-items: start;
}
.pr-card--side .pr-card__media { order: 2; }
.pr-card--side .pr-card__body { order: 1; }
.pr-card--side .pr-card__img { width: 130px; height: 82px; aspect-ratio: auto; }
.pr-card--side .pr-card__title { font-size: var(--text-lg); }

/* grid — cartões de "As Últimas do Rock" e relacionados */
.pr-card--grid .pr-card__img { margin-bottom: 12px; }
.pr-card--grid .pr-card__title { font-size: var(--text-md); margin: 0 0 8px; }

/* list — linhas do arquivo de categoria */
.pr-card--list {
	display: grid;
	grid-template-columns: minmax(110px, 190px) 1fr;
	gap: 18px;
	padding: 20px 0;
	border-bottom: 1px solid var(--border-hairline);
	align-items: start;
}
.pr-card--list .pr-card__img { aspect-ratio: 2 / 1.1; }
.pr-card--list .pr-card__title { font-size: var(--text-lg); margin: 0 0 8px; }
.pr-card--list .pr-card__excerpt { font-size: var(--text-sm); margin-bottom: 8px; }

/* compact — agenda e resultados de busca */
.pr-card--compact {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--border-hairline);
	align-items: start;
}
.pr-card--compact .pr-card__img { width: 110px; height: 66px; aspect-ratio: auto; }
.pr-card--compact .pr-card__title { font-size: var(--text-md); margin: 6px 0; }

/* --------------------------------------------------------------- seções */
.pr-section { margin-top: clamp(36px, 4vw, 56px); padding-top: 18px; }
.pr-section--brand { border-top: 3px solid var(--brand); }
.pr-section--amber { border-top: 3px solid var(--highlight); }
.pr-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-5);
}
.pr-section__title {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	color: var(--text-strong);
	text-transform: uppercase;
	letter-spacing: var(--ls-poster);
	margin: 0 0 var(--space-2);
}
.pr-section__more {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--text-faint);
	text-decoration: none;
	padding: 10px 0;
	white-space: nowrap;
}
.pr-section__more:hover { color: var(--highlight); }

.pr-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: clamp(20px, 2.5vw, 32px);
}
.pr-grid--3 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-5); }
.pr-grid--author { margin-top: 28px; }

.pr-list { display: flex; flex-direction: column; max-width: 860px; }
.pr-list--compact { max-width: none; }

/* ------------------------------------------------------------ home layout */
.pr-home-top,
.pr-home-bottom {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(24px, 3.5vw, 44px);
	align-items: start;
}
.pr-home-bottom { margin-top: clamp(36px, 4vw, 56px); }
.pr-home-bottom > .pr-section { margin-top: 0; }
.pr-home-side { display: flex; flex-direction: column; }

.pr-radio__now {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-2);
}
.pr-radio__title {
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	font-size: var(--text-xl);
	color: var(--text-strong);
	margin: 0;
}
.pr-radio__artist { margin: 4px 0 0; color: var(--text-muted); }
.pr-radio .pr-btn { margin-top: var(--space-3); }
.pr-radio__blurb {
	color: var(--text-faint);
	font-size: var(--text-sm);
	line-height: var(--lh-normal);
	margin: var(--space-4) 0 0;
}

/* --------------------------------------------------------------- matéria */
.pr-article { max-width: 780px; margin: 0 auto; }
.pr-article__title {
	font-family: var(--font-display);
	font-size: var(--text-display);
	line-height: var(--lh-tight);
	color: var(--text-strong);
	margin: 8px 0 16px;
	text-wrap: balance;
}
.pr-byline { justify-content: flex-start; gap: 18px; flex-wrap: wrap; }
.pr-byline a { color: var(--text-muted); text-decoration: underline; }
.pr-byline a:hover { color: var(--highlight); }
.pr-article__figure { margin: var(--space-5) 0; }
.pr-article__img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; display: block; }
/* A medida de leitura de .mfm-prose é 68ch; dentro da coluna de 780px ela
   já fica confortável, então soltamos o limite para a imagem ocupar a
   largura inteira do artigo. */
.pr-article__body { max-width: none; }
.pr-related { max-width: 780px; margin-left: auto; margin-right: auto; }

.pr-tags { margin-top: var(--space-5); display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pr-tags a {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-caps);
	color: var(--text-muted);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-pill);
	padding: 6px 12px;
	text-decoration: none;
}
.pr-tags a:hover { color: var(--highlight); border-color: var(--highlight); }

/* --------------------------------------------------- video incorporado */
/*
 * As materias usam muito embed do YouTube. O WordPress reserva a proporcao
 * com ::before, mas nao estiliza o iframe -- sem isto ele sai com a largura
 * fixa do provedor e estoura a coluna de leitura no celular.
 */
.pr-article__body .wp-block-embed { margin: var(--space-5) 0; }
.pr-article__body .wp-block-embed__wrapper { position: relative; }
.pr-article__body .wp-embed-aspect-16-9 .wp-block-embed__wrapper { aspect-ratio: 16 / 9; }
.pr-article__body .wp-embed-aspect-4-3 .wp-block-embed__wrapper  { aspect-ratio: 4 / 3; }
.pr-article__body .wp-block-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: var(--radius-md);
	background: var(--surface-raised);
}

/*
 * Quando o embed nao resolve (provedor fora do ar, ou HTTP externo
 * bloqueado), o WordPress deixa a caixa com a proporcao reservada e so a URL
 * dentro -- um retangulo vazio gigante no meio do texto. Sem iframe, a caixa
 * encolhe e a URL vira um link legivel.
 */
.pr-article__body .wp-block-embed__wrapper:not(:has(iframe)) {
	aspect-ratio: auto;
	padding: var(--space-4);
	border: 1px dashed var(--border-hairline);
	border-radius: var(--radius-md);
	word-break: break-all;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--text-faint);
}

/* ----------------------------------------------------- arquivos e autor */
.pr-archive-head {
	border-bottom: 3px solid var(--brand);
	padding-bottom: 14px;
	margin-bottom: var(--space-2);
}
.pr-archive-head__title {
	font-family: var(--font-display);
	font-size: var(--text-title);
	color: var(--text-strong);
	text-transform: uppercase;
	margin: 6px 0 4px;
	line-height: var(--lh-tight);
}
.pr-archive-head__count {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--text-faint);
	margin: 0;
}
.pr-archive-head__desc { color: var(--text-muted); margin-top: var(--space-3); }

.pr-author-head {
	display: flex;
	gap: var(--space-5);
	align-items: center;
	border-bottom: 3px solid var(--brand);
	padding-bottom: 22px;
	flex-wrap: wrap;
}
.pr-author-head__avatar {
	width: 76px;
	height: 76px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--brand-quiet);
	border: var(--border-heavy) solid var(--brand);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-size: var(--text-xl);
	color: var(--bat-paper);
}
.pr-author-head__name {
	font-family: var(--font-display);
	font-size: var(--text-title);
	color: var(--text-strong);
	margin: 4px 0;
	line-height: var(--lh-tight);
}
.pr-author-head__meta { margin: 0; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.pr-author-head__bio { margin: var(--space-3) 0 0; color: var(--text-muted); max-width: var(--container-text); }

.pr-empty { color: var(--text-muted); padding: 32px 0; }

/* ----------------------------------------------------------------- busca */
.pr-search-page { max-width: var(--container-text); margin: 0 auto; }
.pr-page-title {
	font-family: var(--font-display);
	font-size: var(--text-title);
	color: var(--text-strong);
	text-transform: uppercase;
	margin: 0 0 18px;
	line-height: var(--lh-tight);
}
.pr-search__label {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: var(--space-2);
}
.pr-search__row { display: flex; gap: var(--space-2); }
.pr-search__input {
	flex: 1;
	min-width: 0;
	background: var(--surface-input);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
	color: var(--bat-bone);
	font-family: var(--font-body);
	font-size: var(--text-lg);
	padding: 14px 18px;
	min-height: 52px;
}
.pr-search__status {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--text-faint);
	margin: 14px 0 20px;
}
.pr-noresults {
	text-align: center;
	padding: 48px 20px;
	border: 1px dashed var(--border-hairline);
	border-radius: var(--radius-lg);
}
.pr-noresults__bat { font-size: 36px; margin-bottom: 10px; }
.pr-noresults p { color: var(--text-muted); margin: 0; }

/* ------------------------------------------------------------------- 404 */
.pr-404 { text-align: center; padding: clamp(48px, 8vw, 110px) clamp(16px, 4vw, 40px); }
.pr-404__bat { font-size: 52px; margin-bottom: var(--space-2); }
.pr-404__code {
	font-family: var(--font-display);
	font-size: var(--text-hero);
	color: var(--brand);
	margin: 0;
	line-height: var(--lh-tight);
}
.pr-404__title {
	font-family: var(--font-display);
	font-size: var(--text-title);
	color: var(--text-strong);
	text-transform: uppercase;
	margin: 12px 0 10px;
	line-height: var(--lh-snug);
}
.pr-404__text { color: var(--text-muted); max-width: 440px; margin: 0 auto 28px; line-height: var(--lh-normal); }
.pr-404__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ------------------------------------------------------------- paginação */
.pr .navigation.pagination { margin-top: var(--space-7); }
.pr .nav-links { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.pr .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--touch-target);
	min-height: var(--touch-target);
	padding: 0 12px;
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-sm);
	color: var(--text-muted);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	text-decoration: none;
}
.pr .page-numbers:hover { color: var(--highlight); border-color: var(--highlight); }
.pr .page-numbers.current { background: var(--brand-fill); border-color: var(--brand); color: var(--text-on-accent); }

/* ---------------------------------------------------------------- rodapé */
.pr-footer { border-top: 1px solid var(--border-hairline); margin-top: 56px; }
.pr-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--space-6);
	padding-top: 36px;
	padding-bottom: 36px;
}
.pr-footer__logo { height: 48px; width: auto; margin-bottom: var(--space-3); display: block; }
.pr-footer__about {
	color: var(--text-faint);
	font-size: var(--text-sm);
	line-height: var(--lh-normal);
	margin: 0;
	max-width: 380px;
}
.pr-footer__links { display: flex; flex-direction: column; gap: 10px; margin-top: var(--space-3); }
.pr-footer__links a,
.pr-footer__links li a {
	color: var(--text-muted);
	text-decoration: none;
	font-size: var(--text-sm);
}
.pr-footer__links a:hover { color: var(--highlight); }
.pr-footer__links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pr-footer__legal {
	border-top: 1px solid var(--border-hairline);
	padding: 14px clamp(16px, 4vw, 40px);
	text-align: center;
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	color: var(--text-faint);
}

/* ---------------------------------------------------------------- player */
.pr-player {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: var(--space-4);
	height: var(--player-h);
	padding: 0 var(--space-5);
	background: linear-gradient(180deg, var(--bat-ash), var(--bat-coal));
	border-top: var(--border-heavy) solid var(--brand);
	box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.5);
}
.pr-player__play {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--brand);
	color: var(--bat-paper);
	border: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	cursor: pointer;
	box-shadow: var(--glow-red);
	transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.pr-player__play:hover { filter: brightness(1.12); }
.pr-player__play:active { transform: scale(0.92); }
.pr-player__cover {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--bat-smoke);
	display: flex;
	align-items: center;
	justify-content: center;
}
.pr-player__cover img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.pr-player__info { flex: 1; min-width: 0; }
.pr-player__nowline { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 3px; }
.pr-player__track {
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold);
	font-size: var(--text-lg);
	color: var(--text-strong);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pr-player__artist { color: var(--text-faint); font-weight: var(--fw-regular); }
.pr-player__side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pr-player__show { font-size: var(--text-xs); color: var(--text-muted); }
.pr-player__volume { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-2); width: 130px; }
.pr-player__volume input { flex: 1; min-width: 0; accent-color: var(--highlight); cursor: pointer; }

/* Equalizador: parado enquanto não toca, animado quando toca. */
.pr-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.pr-eq i { width: 3px; height: 3px; background: var(--highlight); border-radius: 1px; }
.pr-player.is-playing .pr-eq i { animation: pr-eq 0.9s ease-in-out infinite alternate; }
.pr-player.is-playing .pr-eq i:nth-child(1) { animation-delay: 0s; }
.pr-player.is-playing .pr-eq i:nth-child(2) { animation-delay: 0.12s; }
.pr-player.is-playing .pr-eq i:nth-child(3) { animation-delay: 0.24s; }
.pr-player.is-playing .pr-eq i:nth-child(4) { animation-delay: 0.36s; }
.pr-player.is-playing .pr-eq i:nth-child(5) { animation-delay: 0.48s; }
@keyframes pr-eq { from { height: 2px; } to { height: 12px; } }

/* ----------------------------------------------------------- responsivo */
@media (max-width: 900px) {
	.pr-player__volume { display: none; }
}

@media (max-width: 620px) {
	/* "domingo, 13 de setembro de 2026" não cabe ao lado do selo AO VIVO. */
	.pr-utility__date-long { display: none; }
	.pr-utility__date-short { display: inline; }
}

@media (max-width: 760px) {
	.pr-btn-menu { display: flex; }

	/* No mobile a navegação vira lista vertical, escondida até o toque no
	   botão. Continua no DOM na mesma ordem — o botão só alterna a classe. */
	.pr-nav { position: static; }
	.pr-nav__inner { display: none; flex-direction: column; padding-top: var(--space-2); padding-bottom: var(--space-3); }
	.pr-nav.is-open .pr-nav__inner { display: flex; }
	.pr-nav__item {
		border-bottom: 1px solid var(--border-hairline);
		border-left: 3px solid transparent;
		font-size: var(--text-md);
	}
	.pr-nav__item.is-current { border-left-color: var(--brand); border-bottom-color: var(--border-hairline); }

	.pr-card--side { grid-template-columns: 1fr 110px; }
	.pr-card--side .pr-card__img { width: 110px; height: 70px; }
	.pr-card--list { grid-template-columns: 110px 1fr; gap: 14px; }

	.pr-player__side { display: none; }
	.pr-player { gap: var(--space-3); padding: 0 var(--space-4); }
	.pr-player__cover { display: none; }
}

@media (max-width: 420px) {
	.pr-masthead__wordmark { border-left: none; padding-left: 0; }
	.pr-card--compact { grid-template-columns: 90px 1fr; }
	.pr-card--compact .pr-card__img { width: 90px; height: 54px; }
}