/* ==========================================================================
   Bloco de portal na home + botões de rolagem no celular (v4.1)
   Todas as cores saem dos tokens de base.css — nenhum hexadecimal aqui.
   ========================================================================== */

.portal { padding: 2rem 0 1rem; }

.portal__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

/* ---------------- faixa ---------------- */

.portal-faixa__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid hsl(var(--border));
}

.portal-faixa__title {
	margin: 0;
	font-family: "Sora", sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: .5rem;
}

/* Filete na cor do site — mesma marca visual da sidebar. */
.portal-faixa__title::before {
	content: "";
	width: 4px;
	height: 1.1rem;
	border-radius: 9999px;
	background: hsl(var(--primary));
}

/* Trilho: o scroll é NATIVO. O JS só liga as setas — sem ele, o dedo e o
   teclado continuam rolando. */
.portal-faixa__track {
	list-style: none;
	margin: 0;
	padding: 0 0 .5rem;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(240px, 1fr);
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	overscroll-behavior-x: contain;
}

.portal-faixa__track::-webkit-scrollbar { height: 6px; }
.portal-faixa__track::-webkit-scrollbar-thumb {
	background: hsl(var(--border));
	border-radius: 9999px;
}

.portal-faixa__item { scroll-snap-align: start; }

@media (min-width: 768px) {
	.portal-faixa__track { grid-auto-columns: minmax(260px, 1fr); }
}

/* ---------------- card ---------------- */

.portal-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
	border: 1px solid hsl(var(--border) / .7);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: hsl(var(--card));
	transition: border-color .15s ease, transform .15s ease;
}

.portal-card:hover {
	border-color: hsl(var(--primary) / .5);
	transform: translateY(-2px);
}

.portal-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: hsl(var(--muted));
}

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

.portal-card__tipo {
	position: absolute;
	left: .625rem;
	top: .625rem;
	padding: .125rem .5rem;
	border-radius: 9999px;
	font-size: .6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	background: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
}

.portal-card__body {
	display: flex;
	flex-direction: column;
	gap: .375rem;
	padding: .875rem;
}

.portal-card__title {
	font-family: "Sora", sans-serif;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.35;
	color: hsl(var(--foreground));
}

.portal-card:hover .portal-card__title { color: hsl(var(--primary)); }

.portal-card__meta {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .75rem;
	color: hsl(var(--muted-foreground));
}

.portal-card__nota {
	font-weight: 700;
	color: hsl(var(--accent-amber));
}

/* ==========================================================================
   Botões de rolagem (celular)
   ========================================================================== */

.rolagem {
	position: fixed;
	right: .875rem;
	bottom: 1.25rem;
	z-index: 35;
	display: none;
	flex-direction: column;
	gap: .5rem;
}

/* Só no celular: no desktop a rolagem com mouse e teclado já resolve, e os
   botões roubariam espaço do conteúdo. */
@media (max-width: 767px) {
	.rolagem.is-visivel { display: flex; }
}

.rolagem__btn {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border: 1px solid hsl(var(--border));
	border-radius: 9999px;
	background: hsl(var(--background) / .92);
	backdrop-filter: blur(8px);
	color: hsl(var(--foreground));
	cursor: pointer;
	box-shadow: 0 2px 10px hsl(var(--foreground) / .12);
}

.rolagem__btn:active { transform: scale(.94); }

.rolagem__btn:focus-visible {
	outline: 2px solid hsl(var(--primary));
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.portal-card { transition: none; }
	.portal-card:hover { transform: none; }
	.rolagem__btn:active { transform: none; }
}

/* ==========================================================================
   v4.4 — navegação por assunto (home)
   As abas da seção de reviews FILTRAM, mas são <button> e não levam a lugar
   nenhum. Estes são links de verdade, com o volume de cada assunto.
   ========================================================================== */

.home-assuntos { margin-top: 3rem; }

.home-assuntos__titulo {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.home-assuntos__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.home-assuntos__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.home-assuntos__item:hover {
  color: hsl(var(--primary));
  border-color: hsl(var(--primary));
}

.home-assuntos__num {
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: hsl(var(--muted-foreground));
}

.home-assuntos__item.is-todos {
  color: hsl(var(--primary-foreground));
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
}

.home-assuntos__item.is-todos svg { width: 0.95rem; height: 0.95rem; }

.home-newsletter { margin-top: 3rem; }

@media (prefers-reduced-motion: reduce) {
  .home-assuntos__item { transition: none; }
}