/* ==========================================================================
   LIGAS ACADÊMICAS — visual editorial (/liga-academica/)
   --------------------------------------------------------------------------
   O QUE FAZ: estiliza o cabeçalho editorial e a grade de cards das ligas.
   ESCOPO: tudo prefixado por "#conteudo.editorial-page .ligas-editorial".
   - O wrapper .ligas-editorial garante que nada vaze pro resto do tema.
   - O prefixo #conteudo.editorial-page eleva a especificidade o suficiente
     pra vencer o CSS editorial global (page-content-editorial.css), que
     mira h1/p/a dentro de .col-lg-9. Esta folha é carregada DEPOIS dele.
   ========================================================================== */

/* Tokens locais: paleta e fontes, escopados no wrapper (não viram globais). */
#conteudo.editorial-page .ligas-editorial{
  --gold:#C49A20;
  --cream:#faf9f6;
  --ink:#111;
  --muted:#6b6b6b;
  --line:#e5e2dc;
  padding:8px 0 48px;
  font-family:'Inter',sans-serif;
  color:var(--ink);
  line-height:1.65;
}

/* --------------------------------------------------------------------------
   CABEÇALHO EDITORIAL: olho-de-texto (eyebrow) + título + introdução.
   -------------------------------------------------------------------------- */
#conteudo.editorial-page .ligas-editorial .main-head{
  margin-bottom:32px;
}
#conteudo.editorial-page .ligas-editorial .main-head .eyebrow{
  font-family:'Bebas Neue',sans-serif;
  font-size:12px;
  letter-spacing:.22em;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:12px;
}
/* Tracinho decorativo antes do eyebrow. */
#conteudo.editorial-page .ligas-editorial .main-head .eyebrow::before{
  content:'';
  width:24px;
  height:1px;
  background:var(--gold);
}
#conteudo.editorial-page .ligas-editorial .main-head h1{
  font-family:'Playfair Display',serif;
  font-size:40px;
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.05;
  color:#000;
  margin-bottom:14px;
}
/* Palavra em itálico dourado dentro do título. */
#conteudo.editorial-page .ligas-editorial .main-head h1 em{
  font-style:italic;
  color:var(--gold);
}
#conteudo.editorial-page .ligas-editorial .main-head p{
  font-size:15px;
  color:#444;
  max-width:680px;
  line-height:1.7;
}

/* --------------------------------------------------------------------------
   GRADE DE CARDS: duas colunas que viram uma no mobile.
   -------------------------------------------------------------------------- */
#conteudo.editorial-page .ligas-editorial .ligas{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

/* --------------------------------------------------------------------------
   CARD DA LIGA: moldura branca com hover que eleva e destaca a borda.
   -------------------------------------------------------------------------- */
#conteudo.editorial-page .ligas-editorial .liga{
  background:#fff;
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  transition:transform .2s,box-shadow .2s,border-color .2s;
  overflow:hidden;
}
#conteudo.editorial-page .ligas-editorial .liga:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(0,0,0,.1);
  border-color:var(--gold);
}

/* Faixa superior com o selo/logo da liga. */
#conteudo.editorial-page .ligas-editorial .liga .logo-wrap{
  padding:30px 28px 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--cream);
  border-bottom:1px solid var(--line);
  min-height:140px;
}
/* Círculo escuro que emoldura a logo (ou a sigla, no fallback). */
#conteudo.editorial-page .ligas-editorial .liga .logo{
  width:104px;
  height:104px;
  border-radius:50%;
  background:linear-gradient(135deg,#1a1a1a,#000);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gold);
  font-family:'Bebas Neue',sans-serif;
  text-align:center;
  padding:10px;
  line-height:1.3;
  overflow:hidden;
}
/* Logo real encaixada no círculo. */
#conteudo.editorial-page .ligas-editorial .liga .logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:50%;
}
/* Fallback quando a liga não tem imagem: mostra a sigla dentro do círculo. */
#conteudo.editorial-page .ligas-editorial .liga .logo .logo-fallback{
  font-size:18px;
  letter-spacing:.08em;
}

/* Corpo textual do card. */
#conteudo.editorial-page .ligas-editorial .liga .body{
  padding:26px 28px;
  display:flex;
  flex-direction:column;
  flex:1;
}
#conteudo.editorial-page .ligas-editorial .liga .sigla{
  font-family:'Playfair Display',serif;
  font-size:32px;
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.05;
  color:#000;
  margin-bottom:10px;
}
#conteudo.editorial-page .ligas-editorial .liga .nome{
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:16px;
}
/* Linha do ano de fundação. */
#conteudo.editorial-page .ligas-editorial .liga .meta-top{
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:16px;
  flex-wrap:wrap;
}
#conteudo.editorial-page .ligas-editorial .liga .ano{
  font-family:'Bebas Neue',sans-serif;
  font-size:14px;
  letter-spacing:.18em;
  color:var(--gold);
}
/* Divisor entre o cabeçalho do card e os dados. */
#conteudo.editorial-page .ligas-editorial .liga .divisor{
  height:1px;
  background:var(--ink);
  margin-bottom:18px;
}

/* Cada par rótulo/valor (professor, presidente, contato). */
#conteudo.editorial-page .ligas-editorial .liga .row{
  margin-bottom:13px;
}
#conteudo.editorial-page .ligas-editorial .liga .row:last-child{
  margin-bottom:0;
}
#conteudo.editorial-page .ligas-editorial .liga .row .k{
  font-family:'Bebas Neue',sans-serif;
  font-size:10px;
  letter-spacing:.2em;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:3px;
}
#conteudo.editorial-page .ligas-editorial .liga .row .v{
  font-size:13.5px;
  color:#222;
  line-height:1.5;
}
/* Valor com e-mail(s): quebra palavras longas e estiliza eventuais links. */
#conteudo.editorial-page .ligas-editorial .liga .row .v.mail{
  word-break:break-word;
}
#conteudo.editorial-page .ligas-editorial .liga .row .v.mail a{
  border-bottom:1px solid var(--line);
}
#conteudo.editorial-page .ligas-editorial .liga .row .v.mail a:hover{
  border-color:var(--gold);
  color:var(--gold);
}

/* --------------------------------------------------------------------------
   SIDEBAR DA COPEX: empilha cada link em sua própria linha.
   A CSS editorial deixa os .menu-lateral como inline-block (largura natural),
   contando com um wrapper flex-column. Aqui esse wrapper é o .menu-copex, que
   reproduz o comportamento (coluna, alinhada à esquerda) pros links não
   ficarem lado a lado. Escopo restrito a esta página (CSS só carrega aqui).
   -------------------------------------------------------------------------- */
#conteudo.editorial-page .sidebar .menu-copex{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
}

/* --------------------------------------------------------------------------
   RESPONSIVO: reduz o título e colapsa a grade em telas estreitas.
   -------------------------------------------------------------------------- */
@media(max-width:1024px){
  #conteudo.editorial-page .ligas-editorial .main-head h1{font-size:30px;}
}
@media(max-width:600px){
  #conteudo.editorial-page .ligas-editorial .ligas{grid-template-columns:1fr;}
}