/*
 * "Encontre um clã" da Home — card único: clã (painel grande, esquerda, é ele que gira)
 * + jogo do clã (direita, acompanha). Invertido em 28/10/2026 a pedido do Joel: a seção é do clã.
 * Markup: resources/views/publico/partes/jogo-do-cla.blade.php · JS: public/js/jogo-do-cla.js
 */

/* Largura da seção = a do bloco de notícias da 1ª seção da Home (1405 px, 15 px de respiro nas bordas). */
.pg-8460 .pg-element.pg-2fbee66{
  --content-width:1405px;
  padding-left:15px;
  padding-right:15px;
}

.pg-8460 .pg-element.pg-2fbee66 > .pg-bloco-inner{
  max-width:min(100%,1405px);
}

/* Texto embaixo do título: duas linhas equilibradas (sem palavra sozinha na 2ª). */
.pg-8460 .pg-element.pg-2fbee66 .pg-c8cebcf p{
  max-width:1140px;
  margin-inline:auto;
  text-wrap:balance;
}

.pg-jc{
  --pg-jc-vermelho:#ef1d27;
  position:relative;
  z-index:2; /* acima da camada escura (::before) do fundo da seção */
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,2fr); /* clã 60% · jogo 40% */
  gap:16px;
  margin-top:10px;
  font-family:Roboto,Arial,Helvetica,sans-serif;
  color:#f6f6f6;
  text-align:left;
}

.pg-jc *{box-sizing:border-box}

/* O CSS da Home tem img{height:auto} mais forte que as regras daqui. */
.pg-jc .pg-jc-cla__capa img,
.pg-jc .pg-jc-jogo__capa img,
.pg-jc .pg-jc-cla__emblema img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
}
.pg-jc button,.pg-jc a{font:inherit}

/* troca de slide: as fotos apagam um pouco e voltam */
.pg-jc-cla__capa img,
.pg-jc-jogo__capa img,
.pg-jc-cla__emblema img{transition:opacity .24s ease}
.pg-jc.is-trocando .pg-jc-cla__capa img,
.pg-jc.is-trocando .pg-jc-jogo__capa img,
.pg-jc.is-trocando .pg-jc-cla__emblema img{opacity:.4}

/* ---------- painéis ---------- */

.pg-jc-cla,
.pg-jc-jogo{
  border:1px solid rgba(255,255,255,.25);
  background:rgba(10,10,12,.88);
  box-shadow:0 14px 32px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.03);
  border-radius:5px;
  overflow:hidden;
}

/* =========================================================
   CLÃ (esquerda)
   ========================================================= */

.pg-jc-cla{
  padding:6px;
  display:flex;
  flex-direction:column;
}

/* capa do clã inteira (1070×400), sem corte — o texto do banner aparece todo */
.pg-jc-cla__capa{
  aspect-ratio:1070/400;
  position:relative;
  overflow:hidden;
  border-radius:3px;
  background:#0b0b0d;
}

.pg-jc-cla__capa img{
  position:absolute;
  inset:0;
  object-fit:cover;
  display:block;
}

.pg-jc-cla__capa::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(0deg,rgba(0,0,0,.55) 0%,transparent 28%);
}

/* ---------- setas ---------- */

.pg-jc-seta{
  position:absolute;
  top:50%;
  z-index:5;
  width:44px;
  height:44px;
  margin-top:-22px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(10,10,12,.72);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  backdrop-filter:blur(5px);
  transition:.2s ease;
}

.pg-jc-seta:hover{
  background:var(--pg-jc-vermelho);
  border-color:#ff424a;
}

.pg-jc-seta svg{
  width:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
}

.pg-jc-seta--esq{left:12px}
.pg-jc-seta--dir{right:12px}

/* ---------- emblema + dados + botões ---------- */

.pg-jc-cla__info{
  flex:1;
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  column-gap:22px;
  row-gap:14px;
  align-items:center;
  padding:12px 14px 8px;
}

/* Moldura do emblema na cor da bandeira do clã (clans.cor_bandeira → ClanBandeiras):
   anel metálico (claro → cor → escuro → cor) com brilho da mesma cor em volta. */
.pg-jc-cla__emblema{
  --c:var(--pg-jc-cor,#b3141c);
  width:150px;
  height:150px;
  padding:6px;
  border-radius:50%;
  background:conic-gradient(from 210deg,
    color-mix(in srgb,var(--c) 45%,#fff) 0%,
    var(--c) 22%,
    color-mix(in srgb,var(--c) 55%,#000) 50%,
    var(--c) 78%,
    color-mix(in srgb,var(--c) 45%,#fff) 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.28),
    0 0 18px color-mix(in srgb,var(--c) 65%,transparent),
    0 6px 16px rgba(0,0,0,.45);
  transition:background .3s ease,box-shadow .3s ease;
}

.pg-jc-cla__emblema img{
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  display:block;
  border-radius:50%;
  border:2px solid rgba(0,0,0,.75);
  background:#0b0b0d;
}

/* lema do clã, embaixo do nome (no lugar do antigo "CLÃ EM DESTAQUE") */
.pg-jc-cla__lema{
  display:block;
  margin:2px 0 9px;
  color:#ffc94a;
  font-size:15px;
  font-weight:700;
  font-style:italic;
  letter-spacing:.01em;
}

.pg-jc-cla__lema[hidden]{display:none}

.pg-jc .pg-jc-cla__dados h3{
  margin:0 0 2px;
  color:#fff;
  font-family:inherit;
  font-size:28px;
  font-weight:700;
  line-height:1.15;
}

.pg-jc-cla__meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  color:#a9a9ae;
  font-size:12px;
}

.pg-jc-cla__meta span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.pg-jc-cla__meta b{font-weight:500}

.pg-jc-cla__meta svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
}

.pg-jc-cla__meta i{
  width:1px;
  height:15px;
  background:rgba(255,255,255,.2);
}

.pg-jc .pg-jc-cla__dados p{
  margin:10px 0 0;
  color:#c9c9cc;
  font-size:15px;
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* emblema no alto, alinhado com o nome; embaixo dele o status, na linha dos botões */
.pg-jc-cla__emblema{align-self:start}

/* selo ATIVO / INATIVO — o mesmo da página do clã (livewire/clans/show) */
.pg-jc-status{
  width:150px;          /* mesma largura do emblema */
  height:46px;          /* mesma altura dos botões VER CLÃ / DIVULGAR CLÃ */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 13px;
  border:1px solid #8a8a8a;
  border-radius:6px;
  background:linear-gradient(180deg,#5c5c5c,#3f3f3f);
  color:#fff;
  font-size:14px;
  font-weight:600;
  line-height:1;
  text-transform:uppercase;
}

.pg-jc-status.is-ativo{
  border-color:#3fd06a;
  background:linear-gradient(180deg,#22b14c,#178a39);
  box-shadow:0 0 12px rgba(34,177,76,.35);
}

.pg-jc-cla__acoes{
  display:flex;
  gap:12px;
}

.pg-jc-cla__acoes .pg-jc-botao{
  flex:1;
  min-width:0;
  padding:0 12px;
  gap:8px;
}

/* ---------- botões ---------- */

.pg-jc .pg-jc-botao{
  height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 22px;
  line-height:1;
  border:1px solid rgba(255,255,255,.65);
  color:#fff;
  text-decoration:none;
  font-size:14px;
  font-weight:900;
  letter-spacing:.01em;
  border-radius:4px;
  white-space:nowrap;
  transition:.18s ease;
}

.pg-jc .pg-jc-botao:hover{color:#fff}

.pg-jc-botao--vermelho{
  border-color:#ff424a !important;
  background:linear-gradient(180deg,#e91d25 0%,#a90b11 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 16px rgba(231,25,35,.24);
}

.pg-jc-botao--vermelho:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
}

.pg-jc-botao--escuro{background:rgba(17,17,20,.78)}
.pg-jc-botao--escuro:hover{background:rgba(37,37,42,.92)}

.pg-jc .pg-jc-botao svg{
  width:20px;
  height:20px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  display:block;
}

.pg-jc .pg-jc-botao__pessoas svg{
  fill:currentColor;
  stroke:none;
}

.pg-jc-botao__pessoas,
.pg-jc-botao__megafone{display:flex}

/* seta › desenhada (o caractere da fonte ficava abaixo da linha do texto) */
.pg-jc .pg-jc-botao svg.pg-jc-botao__seta{
  width:14px;
  height:14px;
  stroke-width:2.6;
  margin-left:2px;
}

/* =========================================================
   JOGO (direita)
   ========================================================= */

.pg-jc-jogo{
  padding:6px 6px 14px; /* mesma margem do painel do clã: as duas imagens alinham no topo */
  display:flex;
  flex-direction:column;
}

/* capa do jogo sempre 16:9 (image_single 960×540), inteira */
.pg-jc-jogo__capa{
  flex:none;
  aspect-ratio:16/9;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.3);
  border-radius:5px;
  background:#0b0b0d;
}

.pg-jc-jogo__capa img{
  position:absolute;
  inset:0;
  object-fit:cover;
  display:block;
}

/* nome → estilo → plataformas → resumo → botão; o botão desce até o pé do painel */
.pg-jc-jogo__info{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px 8px 0;
}

.pg-jc .pg-jc-jogo__info h4{
  margin:0;
  color:#fff;
  font-family:inherit;
  font-size:22px;
  font-weight:700;
  line-height:1.15;
}

.pg-jc .pg-jc-jogo__info p{
  margin:0;
  color:#c9c9cc;
  font-size:14px;
  line-height:1.45;
}

/* "cartazinhos" iguais aos da página do jogo: estilo (contorno) e plataforma (vermelho) */
.pg-jc-jogo__chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.pg-jc-jogo__chips:empty{display:none}

.pg-jc-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 8px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:4px;
  color:#e4e4e7;
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  line-height:1.3;
}

.pg-jc-chip--plataforma{
  border-color:rgba(239,29,39,.6);
  background:rgba(239,29,39,.2);
  color:#fff;
  font-weight:700;
}

.pg-jc .pg-jc-chip img{
  width:14px !important;
  height:14px !important;
  object-fit:contain;
}

.pg-jc-jogo__info .pg-jc-botao{
  width:100%;
  margin-top:auto;
}

/* =========================================================
   ALTURA FIXA — o card não pode encolher/esticar entre um clã e outro
   (senão a seção inteira muda de altura e o fundo "pula"). Cada linha de
   texto variável reserva o seu espaço máximo:
   ========================================================= */

/* nome do clã: sempre 1 linha */
.pg-jc .pg-jc-cla__dados h3{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* lema: 1 linha, e o espaço fica guardado mesmo quando o clã não tem lema */
.pg-jc-cla__lema{
  min-height:1.45em;
  line-height:1.45;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pg-jc-cla__lema[hidden]{display:block;visibility:hidden}

/* plataforma | jogo: 1 linha */
.pg-jc-cla__meta{flex-wrap:nowrap;white-space:nowrap}

/* resumo do clã: espaço de 3 linhas sempre, mesmo com 1 linha de texto */
.pg-jc .pg-jc-cla__dados p{min-height:calc(15px * 1.45 * 3)}

/* jogo: nome em 1 linha, cada fileira de cartazinhos em 1 linha, resumo em 3 */
.pg-jc .pg-jc-jogo__info h4{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pg-jc-jogo__chips{
  flex-wrap:nowrap;
  overflow:hidden;
  min-height:22px;
}

.pg-jc-jogo__chips:empty{display:flex}

.pg-jc-chip{flex:none}

.pg-jc .pg-jc-jogo__info p{
  min-height:calc(14px * 1.45 * 3);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* =========================================================
   TABLET E CELULAR
   ========================================================= */

@media(max-width:1024px){
  .pg-jc{grid-template-columns:1fr}
}

@media(max-width:767px){
  .pg-jc-cla__info{
    grid-template-columns:96px minmax(0,1fr);
    gap:14px;
  }

  .pg-jc-cla__emblema{width:96px;height:96px;padding:5px}
  .pg-jc-status{width:96px}
  .pg-jc .pg-jc-cla__dados h3{font-size:22px}

  .pg-jc-cla__acoes{grid-column:1/-1}

  .pg-jc-seta{width:36px;height:36px;margin-top:-18px}
  .pg-jc-seta--esq{left:8px}
  .pg-jc-seta--dir{right:8px}

}

@media(max-width:480px){
  .pg-jc-cla__acoes{flex-direction:column}
}