/*
 * RBTV Tempo PB — bloco de tempo e temperatura.
 *
 * Tokens casados com o resto da página: Montserrat 900 nos números,
 * #0F172A no texto, #FFB703 como destaque, fundo branco e cards com
 * raio de 8px, a mesma medida usada nas colunas da seção.
 */

.rbtv-tempo {
	/* --rbtv-cols é o valor pedido no shortcode; o padrão cobre a ausência dele. */
	--rbtv-tempo-columns: var(--rbtv-cols, 4);
	--rbtv-tempo-gap: 14px;
	--rbtv-tempo-ink: #0f172a;
	--rbtv-tempo-muted: #64748b;
	--rbtv-tempo-line: #e2e8f0;
	--rbtv-tempo-soft: #f8fafc;
	--rbtv-tempo-accent: #ffb703;
	--rbtv-tempo-nav: 38px;

	position: relative;
	display: flex;
	align-items: stretch;
	gap: 8px;
	margin: 0;
	padding: 0;
}

/* Sem overflow o trilho não rola e as setas ficam sem função; o espaço delas
   é devolvido para que os cards ocupem a largura toda. */
.rbtv-tempo:not(.rbtv-tempo--scrollable) .rbtv-tempo__nav {
	display: none;
}

.rbtv-tempo:not(.rbtv-tempo--scrollable) .rbtv-tempo__track {
	scrollbar-width: none;
}

/* ---------------------------------------------------------------- Trilho */

.rbtv-tempo__track {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: stretch;
	gap: var(--rbtv-tempo-gap);
	margin: 0;
	padding: 0 0 4px;
	list-style: none;

	overflow-x: auto;
	overflow-y: hidden;

	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;

	/* Sem isto o overflow horizontal do trilho aparece como scrollbar da página
	   em alguns navegadores, empurrando o layout do site inteiro. */
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

.rbtv-tempo__track::-webkit-scrollbar {
	height: 6px;
}

.rbtv-tempo__track::-webkit-scrollbar-track {
	background: var(--rbtv-tempo-soft);
	border-radius: 3px;
}

.rbtv-tempo__track::-webkit-scrollbar-thumb {
	background: var(--rbtv-tempo-line);
	border-radius: 3px;
}

/* Foco no trilho: outline em vez de nada, sem deslocar o layout. */
.rbtv-tempo__track:focus-visible {
	outline: 2px solid var(--rbtv-tempo-accent);
	outline-offset: 3px;
	border-radius: 8px;
}

/* ----------------------------------------------------------------- Setas */

.rbtv-tempo__nav {
	flex: 0 0 auto;
	align-self: center;
	width: var(--rbtv-tempo-nav);
	height: var(--rbtv-tempo-nav);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	border: 1px solid var(--rbtv-tempo-line);
	border-radius: 50%;
	background: #ffffff;
	color: var(--rbtv-tempo-ink);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.rbtv-tempo__nav svg {
	width: 18px;
	height: 18px;
}

.rbtv-tempo__nav:hover:not(:disabled) {
	background: var(--rbtv-tempo-ink);
	border-color: var(--rbtv-tempo-ink);
	color: #ffffff;
}

.rbtv-tempo__nav:disabled {
	opacity: 0.35;
	cursor: default;
}

.rbtv-tempo__nav:focus-visible {
	outline: 2px solid var(--rbtv-tempo-accent);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ Card */

.rbtv-tempo__card {
	flex: 0 0 calc((100% - (var(--rbtv-tempo-columns) - 1) * var(--rbtv-tempo-gap)) / var(--rbtv-tempo-columns));
	scroll-snap-align: start;

	background: #ffffff;
	border: 1px solid var(--rbtv-tempo-line);
	border-radius: 8px;
	padding: 14px 16px 12px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rbtv-tempo__card:hover {
	border-color: #cbd5e1;
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

/* Tablet: duas colunas por página. */
@media (max-width: 1024px) {
	.rbtv-tempo {
		--rbtv-tempo-columns: 2;
	}
}

/* Mobile: um card por página. */
@media (max-width: 767px) {
	.rbtv-tempo {
		--rbtv-tempo-columns: 1;
		--rbtv-tempo-nav: 32px;
	}

	.rbtv-tempo__nav {
		display: none;
	}
}

/* Faixa de cor da condição, no topo do card. */
.rbtv-tempo__card::before {
	content: "";
	display: block;
	height: 3px;
	margin: -14px -16px 0;
	border-radius: 8px 8px 0 0;
	background: var(--rbtv-tempo-soft);
	flex: 0 0 auto;
}

.rbtv-tempo__card--sunny::before  { background: #f59e0b; }
.rbtv-tempo__card--cloudy::before { background: #94a3b8; }
.rbtv-tempo__card--rain::before   { background: #0b66c4; }
.rbtv-tempo__card--fog::before    { background: #64748b; }
.rbtv-tempo__card--snow::before   { background: #38bdf8; }
.rbtv-tempo__card--storm::before  { background: #9333ea; }

/* --------------------------------------------------------- Cabeçalho */

.rbtv-tempo__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.rbtv-tempo__city {
	margin: 0;
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--rbtv-tempo-ink);
}

.rbtv-tempo__icon {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	color: var(--rbtv-tempo-ink);
}

.rbtv-tempo__card--sunny  .rbtv-tempo__icon { color: #f59e0b; }
.rbtv-tempo__card--rain   .rbtv-tempo__icon { color: #0b66c4; }
.rbtv-tempo__card--storm  .rbtv-tempo__icon { color: #9333ea; }
.rbtv-tempo__card--fog    .rbtv-tempo__icon { color: #64748b; }
.rbtv-tempo__card--snow   .rbtv-tempo__icon { color: #38bdf8; }

/* ------------------------------------------- Temperatura e condição */

/* Temperatura e condição dividem a mesma linha. O par se lê como uma unidade
   e o card perde uma faixa inteira de altura. */
.rbtv-tempo__nowline {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}

.rbtv-tempo__temp {
	margin: 0;
	font-family: "Montserrat", sans-serif;
	font-size: 30px;
	font-weight: 900;
	line-height: 1;
	color: var(--rbtv-tempo-ink);
	display: flex;
	align-items: flex-start;
	flex: 0 0 auto;
}

.rbtv-tempo__unit {
	font-size: 13px;
	font-weight: 800;
	margin-left: 2px;
	color: var(--rbtv-tempo-muted);
}

.rbtv-tempo__condition {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--rbtv-tempo-muted);
	/* min-width:0 com quebra livre: o pior rótulo do mapeamento WMO quase
	   estoura a largura do card, e um dia mais longo não pode quebrar o grid. */
	min-width: 0;
	overflow-wrap: break-word;
}

/* Máxima e mínima. */
.rbtv-tempo__range {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	padding: 5px 9px;
	background: var(--rbtv-tempo-soft);
	border-radius: 6px;
	align-self: flex-start;
}

.rbtv-tempo__max { color: #b45309; }
.rbtv-tempo__min { color: #0b66c4; }
.rbtv-tempo__sep { color: var(--rbtv-tempo-line); }

/* ---------------------------------------------------------- Métricas */

.rbtv-tempo__meta {
	margin: 0;
	padding: 8px 0 0;
	border-top: 1px solid var(--rbtv-tempo-line);
	display: flex;
	justify-content: space-between;
	gap: 6px;
}

.rbtv-tempo__metaitem {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.rbtv-tempo__metaitem dt {
	margin: 0;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rbtv-tempo-muted);
}

.rbtv-tempo__metaitem dd {
	margin: 0;
	font-size: 12px;
	font-weight: 800;
	color: var(--rbtv-tempo-ink);
	white-space: nowrap;
}

/* --------------------------------------------------- Mini-previsão */

.rbtv-tempo__forecast {
	margin: 0;
	padding: 8px 0 0;
	border-top: 1px solid var(--rbtv-tempo-line);
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.rbtv-tempo__day {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
}

.rbtv-tempo__dayname {
	flex: 0 0 30px;
	font-weight: 800;
	color: var(--rbtv-tempo-ink);
}

.rbtv-tempo__day .rbtv-tempo__icon {
	width: 15px;
	height: 15px;
	color: var(--rbtv-tempo-muted);
	flex: 0 0 auto;
}

.rbtv-tempo__daytemp {
	margin-left: auto;
	font-weight: 800;
	color: var(--rbtv-tempo-ink);
	font-variant-numeric: tabular-nums;
}

.rbtv-tempo__daymin {
	color: var(--rbtv-tempo-muted);
	font-weight: 600;
	margin-left: 5px;
}

/* --------------------------------------------- Aviso e atribuição */

.rbtv-tempo__notice {
	margin: 14px 0 0;
	padding: 10px 12px;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	color: #92400e;
}

.rbtv-tempo__credit {
	margin: 12px 0 0;
	font-size: 11px;
	color: var(--rbtv-tempo-muted);
}

.rbtv-tempo__credit a {
	color: inherit;
}

/* ------------------------------------------------------- Acessibilidade */

/* Sob movimento reduzido o autoplay nem chega a iniciar, porque o JS consulta
   a mesma preferência. Aqui fica o resto: sem transição de cor e sem rolagem
   suave no trilho. */
@media (prefers-reduced-motion: reduce) {
	.rbtv-tempo__card,
	.rbtv-tempo__nav {
		transition: none;
	}

	.rbtv-tempo__track {
		scroll-behavior: auto;
	}
}

@media (prefers-contrast: more) {
	.rbtv-tempo__card {
		border-width: 2px;
	}

	.rbtv-tempo__nav {
		border-width: 2px;
	}

	.rbtv-tempo__city,
	.rbtv-tempo__temp,
	.rbtv-tempo__daytemp,
	.rbtv-tempo__metaitem dd {
		color: #000000;
	}
}