/* =====================================================================
   Pandot | pagina inicial: carrossel das Ultimas Noticias e a vitrine
   "Novidades do Pandot". So carregado na pagina inicial.
   PHP: pandot-home.php
   ===================================================================== */

.pandot-carrossel, .pandot-vitrine {
	--ph-ouro: #f6d79a;
	--ph-ouro-2: #cfac68;
	--ph-azul: #12303f;
	--ph-noite: #0b1d29;
	--ph-tinta: #3b2a17;
	--ph-tinta-suave: #6b5236;
	--ph-borda: rgba(154, 106, 58, .4);
}

/* ---------------------------------------------------------------------
   Carrossel (sem JavaScript: as noticias ficam umas por baixo das outras)
   A barra "anterior / 1 / 3 / proxima" fica em cima das noticias: assim
   nao muda de lugar quando a noticia seguinte tem outra altura.
   --------------------------------------------------------------------- */
.pandot-carrossel-barra { display: none; }
.pandot-carrossel-pronto .pandot-carrossel-barra { display: grid; }

/* Numeros em Inter: no Cinzel o 1 parece um I */
.pandot-carrossel-contador {
	min-width: 3.4em; text-align: center; white-space: nowrap;
	font: 700 13px/1 var(--pandot-texto-fonte); font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--ph-tinta-suave);
}
.pandot-carrossel-contador b { color: var(--ph-tinta); font-size: 15px; }
.pandot-carrossel-texto svg {
	width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.pandot-carrossel-texto:focus-visible { outline: 2px solid var(--pandot-teal); outline-offset: 2px; }

.pandot-carrossel-pronto .pandot-carrossel-janela { overflow: hidden; transition: height .35s ease; }
.pandot-carrossel-pronto .pandot-carrossel-trilha {
	display: flex; align-items: flex-start; touch-action: pan-y;
	transition: transform .45s cubic-bezier(.2, .75, .25, 1);
}
.pandot-carrossel-pronto .pandot-carrossel-trilha > .pandot-noticia { flex: 0 0 100%; min-width: 0; box-sizing: border-box; }
.pandot-carrossel .pandot-noticia > br:last-child { display: none; }

/* tres colunas: o "1 / 3" fica sempre ao meio, seja qual for a lingua */
.pandot-carrossel-barra {
	grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
	margin: 0 0 12px; padding: 0 0 8px; border-bottom: 1px solid rgba(110, 75, 35, .2);
}
.pandot-carrossel-barra > :first-child { justify-self: start; }
.pandot-carrossel-barra > :last-child { justify-self: end; }
.pandot-carrossel-texto {
	display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 4px 6px; border: 0; border-radius: 4px; background: none; cursor: pointer;
	font: 600 13px/1.2 var(--pandot-texto-fonte); color: var(--pandot-link);
}
.pandot-carrossel-texto:hover:not(:disabled) { color: var(--pandot-link-hover); background: rgba(26, 159, 179, .08); }
.pandot-carrossel-texto:disabled { visibility: hidden; }

/* ---------------------------------------------------------------------
   Vitrine "Novidades do Pandot"
   --------------------------------------------------------------------- */
.pandot-vitrine .BoxContent { padding-bottom: 22px !important; }
#ContentColumn .Content .BoxContent .pandot-vitrine-intro { margin: 0 0 10px; font-size: 14px; color: var(--ph-tinta); }
#ContentColumn .Content .BoxContent .pandot-vitrine-selos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
#ContentColumn .Content .BoxContent .pandot-vitrine-selos li { margin: 0; }
#ContentColumn .Content .BoxContent .pandot-vitrine-admin {
	margin: 12px 0 0; padding: 7px 10px; border: 1px dashed #a3741f; border-radius: 4px;
	background: rgba(246, 215, 154, .35); font-size: 12px; font-weight: 600; color: #6e4a12;
}

.pandot-vitrine-secao { margin: 24px 0 0; }
/* O titulo de cada secao e o separador do tema (pandot-tema.css) */
#ContentColumn .Content .BoxContent .pandot-vitrine-titulo { margin: 0 0 12px; }
#ContentColumn .Content .BoxContent .pandot-vitrine-texto { margin: -4px 0 10px; font-size: 13px; color: var(--ph-tinta-suave); }

/* Destaques: o primeiro deitado, os outros em duas colunas */
.pandot-destaques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pandot-destaque {
	display: flex; flex-direction: column; min-width: 0; overflow: hidden;
	background: rgba(255, 250, 238, .62); border: 1px solid var(--ph-borda); border-radius: 6px;
	box-shadow: 0 1px 3px rgba(60, 35, 10, .14);
}
.pandot-destaque-grande { grid-column: 1 / -1; flex-direction: row; }
.pandot-destaque-grande .pandot-midia { flex: 0 0 57%; border-bottom: 0; border-right: 1px solid rgba(207, 172, 104, .6); }
.pandot-destaque-corpo { display: flex; flex: 1; flex-direction: column; gap: 7px; padding: 12px 14px 13px; }
.pandot-destaque-grande .pandot-destaque-corpo { justify-content: center; padding: 18px 20px; }
#ContentColumn .Content .BoxContent .pandot-destaque-nome {
	display: flex; align-items: center; gap: 10px; margin: 0;
	font: 700 16px/1.2 var(--pandot-titulo); color: var(--ph-tinta);
}
#ContentColumn .Content .BoxContent .pandot-destaque-grande .pandot-destaque-nome { font-size: 21px; }
.pandot-destaque-icone {
	flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; box-sizing: border-box;
	border: 1px solid rgba(207, 172, 104, .8); border-radius: 7px; color: var(--ph-ouro);
	background: linear-gradient(#1f4558, #0f2837);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 3px rgba(60, 35, 10, .3);
}
.pandot-destaque-icone svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#ContentColumn .Content .BoxContent .pandot-destaque-texto { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ph-tinta); }
#ContentColumn .Content .BoxContent .pandot-destaque-grande .pandot-destaque-texto { font-size: 14px; }
#ContentColumn .Content .BoxContent .pandot-destaque-cmd { margin: auto 0 0; padding-top: 2px; }

/* Ecra do sistema (video, GIF ou o icone), com moldura de placa do jogo */
.pandot-midia {
	position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--ph-noite);
	border-bottom: 1px solid rgba(207, 172, 104, .6);
}
.pandot-midia img, .pandot-midia video {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.pandot-midia::after {
	content: ""; position: absolute; inset: 6px; pointer-events: none;
	border: 1px solid rgba(207, 172, 104, .4); border-radius: 3px;
	box-shadow: inset 0 0 18px rgba(0, 0, 0, .35);
}
.pandot-midia-vazia {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
	background:
		radial-gradient(ellipse 55% 62% at 50% 46%, rgba(232, 207, 150, .2), transparent 72%),
		repeating-linear-gradient(45deg, rgba(255, 255, 255, .028) 0 2px, transparent 2px 11px),
		linear-gradient(160deg, #1d4a5c, #0f2836 58%, #0a1b26);
}
.pandot-midia-icone {
	width: 24%; max-width: 92px; height: auto; aspect-ratio: 1;
	fill: none; stroke: var(--ph-ouro); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: .78;
	filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .45));
}
.pandot-midia-gif {
	display: flex; flex-direction: column; align-items: center; gap: 3px;
	font: 700 15px/1 var(--pandot-titulo); letter-spacing: .06em; color: var(--ph-ouro);
}
.pandot-midia-gif small { font: 600 11px/1.2 var(--pandot-texto-fonte); letter-spacing: 0; color: rgba(240, 230, 210, .75); }

/* No cliente e site: icone, nome e uma linha */
#ContentColumn .Content .BoxContent .pandot-vitrine-lista {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin: 0; padding: 0; list-style: none;
}
#ContentColumn .Content .BoxContent .pandot-vitrine-lista-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#ContentColumn .Content .BoxContent .pandot-vitrine-lista li { margin: 0; }
.pandot-vitrine-item { display: flex; align-items: flex-start; gap: 10px; }
.pandot-vitrine-item-icone {
	flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; box-sizing: border-box;
	border: 1px solid rgba(26, 159, 179, .45); border-radius: 50%; color: var(--pandot-teal-escuro); background: rgba(26, 159, 179, .1);
}
.pandot-vitrine-item-icone svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pandot-vitrine-item-texto { min-width: 0; font-size: 12.5px; line-height: 1.5; color: var(--ph-tinta-suave); }
.pandot-vitrine-item-texto b { display: block; margin: 1px 0 1px; font-size: 13.5px; color: var(--ph-tinta); }

/* Tibia 15.25: os sistemas em selos */
#ContentColumn .Content .BoxContent .pandot-vitrine-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
#ContentColumn .Content .BoxContent .pandot-vitrine-chips li { margin: 0; }
.pandot-vitrine-chip {
	display: inline-flex; align-items: center; gap: 7px; height: 27px; padding: 0 11px 0 10px; box-sizing: border-box;
	border: 1px solid rgba(154, 106, 58, .38); border-radius: 14px; background: rgba(255, 250, 238, .72);
	font: 600 12px/1 var(--pandot-texto-fonte); color: var(--ph-tinta); white-space: nowrap;
}
.pandot-vitrine-chip::before {
	content: ""; flex: none; width: 5px; height: 5px; transform: rotate(45deg); background: var(--ph-ouro-2);
}
.pandot-vitrine-chip-forte {
	border-color: rgba(207, 172, 104, .85); color: #f6ecd6;
	background: linear-gradient(#1f4558, #12303f);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.pandot-vitrine-chip-forte::before { background: var(--ph-ouro); }

.pandot-vitrine-acoes {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
	margin: 26px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(110, 75, 35, .2);
}
#ContentColumn .Content .pandot-vitrine-acoes .pandot-botao { width: auto; min-width: 176px; height: 36px; margin: 0; padding: 0 18px; font-size: 12.5px; }
.pandot-vitrine-acoes .pandot-botao svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Os cartoes entram em sequencia quando a vitrine aparece (uma vez) */
@media (prefers-reduced-motion: no-preference) {
	.pandot-destaques-espera .pandot-destaque { opacity: 0; transform: translateY(14px); }
	.pandot-destaques-entra .pandot-destaque {
		animation: pandot-destaque-entra .55s cubic-bezier(.2, .75, .25, 1) both;
		animation-delay: calc(var(--i, 0) * 70ms);
	}
	@keyframes pandot-destaque-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
@media print {
	.pandot-destaques-espera .pandot-destaque { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.pandot-carrossel-pronto .pandot-carrossel-trilha, .pandot-carrossel-pronto .pandot-carrossel-janela { transition: none; }
}

/* ---------------------------------------------------------------------
   Telemovel e tablet
   --------------------------------------------------------------------- */
@media (max-width: 1023px) {
	.pandot-destaque-grande { flex-direction: column; }
	.pandot-destaque-grande .pandot-midia { flex: none; border-right: 0; border-bottom: 1px solid rgba(207, 172, 104, .6); }
	.pandot-destaque-grande .pandot-destaque-corpo { padding: 13px 14px 14px; }
	#ContentColumn .Content .BoxContent .pandot-destaque-grande .pandot-destaque-nome { font-size: 19px; }
}
@media (max-width: 640px) {
	.pandot-destaques { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	/* sem video nem GIF, o ecra do sistema e mais baixo no telemovel */
	.pandot-midia-vazia { aspect-ratio: 5 / 2; }
	.pandot-midia-icone { width: 15%; }
	#ContentColumn .Content .BoxContent .pandot-vitrine-lista,
	#ContentColumn .Content .BoxContent .pandot-vitrine-lista-3 { grid-template-columns: minmax(0, 1fr); }
	.pandot-carrossel-texto span { display: none; }
	.pandot-carrossel-texto { padding: 6px 10px; }
	.pandot-carrossel-texto svg { width: 20px; height: 20px; }
	#ContentColumn .Content .pandot-vitrine-acoes .pandot-botao { flex: 1 1 100%; }
}