/* =====================================================================
   Review of Artificial Intelligence in Education (RAIE)
   CSS para destaque das SEÇÕES TEMÁTICAS  —  tema Bootstrap (OJS 3.3)
   ---------------------------------------------------------------------
   Onde aplicar:
   Configurações → Website → Aparência → aba "Configuração"
   → campo "Folha de Estilo do Periódico" (upload deste arquivo .css).
   Depois: limpe o cache (Ctrl+F5).

   Este arquivo mira as CLASSES REAIS do site:
     .issue-toc                → contêiner do sumário
     .issue-toc-section        → cada seção temática
     .issue-toc-section-title  → título da seção (h3)
     .article-summary          → cada artigo
     .article-summary-authors  → autores
     .article-summary-pages    → código/páginas (ex.: e095)
     .article-summary-title    → título do artigo (+ <a>)
     .article-summary-galleys  → área dos botões PDF (a.btn.btn-primary)
     .doiInSummary             → bloco do DOI

   Objetivos:
   • Faixa colorida por seção temática.
   • Cada artigo vira um "card" moderno, com hover.
   • Botões PDF e DOI redesenhados (sem afetar botões do resto do site).
   • Corpo/resumos permanecem JUSTIFICADOS (títulos alinhados à esquerda).

   Paleta: Azul acadêmico (coerente com a identidade atual do site).
   ===================================================================== */

/* ----------------------------------------------------------------
   1. VARIÁVEIS DE TEMA — altere aqui para mudar tudo de uma vez.
---------------------------------------------------------------- */
:root {
  --raie-azul:        #1a3c8f;
  --raie-azul-escuro: #12295f;
  --raie-azul-claro:  #3b5fd1;
  --raie-azul-suave:  #eef2fb;
  --raie-azul-borda:  #d6def2;
  --raie-acento:      #f5a623;
  --raie-texto:       #1f2733;
  --raie-texto-suave: #5a6675;
  --raie-branco:      #ffffff;
  --raie-radius:      14px;
  --raie-radius-sm:   8px;
  --raie-sombra:      0 2px 6px rgba(18, 41, 95, .06);
  --raie-sombra-hover:0 12px 30px rgba(18, 41, 95, .16);
  --raie-transicao:   .22s cubic-bezier(.4, 0, .2, 1);
}

/* ----------------------------------------------------------------
   2. JUSTIFICAÇÃO DO TEXTO  (requisito principal)
   Mantém RESUMOS e CORPO justificados (com hifenização).
   Títulos ficam à esquerda de propósito (justificar título curto
   gera espaçamentos irregulares).
---------------------------------------------------------------- */
.article-summary .article-summary-abstract,
.article-summary .article-summary-abstract p,
.item.abstract,
.item.abstract p,
.article-abstract,
.article-abstract p,
.article-details-abstract,
.article-details-abstract p,
.main_entry .abstract p,
#articleAbstract,
#articleAbstract p,
.article-full-text p {
  text-align: justify !important;
  text-justify: inter-word;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
}

/* Títulos NÃO justificados */
.issue-toc-section-title,
.article-summary-title,
.article-summary-title a {
  text-align: left !important;
}

/* ----------------------------------------------------------------
   3. CONTÊINER DO SUMÁRIO
---------------------------------------------------------------- */
.issue-toc {
  color: var(--raie-texto);
}

/* ----------------------------------------------------------------
   4. SEÇÃO TEMÁTICA  →  título em faixa + artigos em grade de cards
---------------------------------------------------------------- */
.issue-toc-section {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
  margin: 0 0 3rem;
  padding: 0;
}

/* separador sutil entre seções */
.issue-toc-section + .issue-toc-section {
  padding-top: 2rem;
  border-top: 1px solid var(--raie-azul-borda);
}

/* ----- Título da seção: ocupa a linha inteira da grade ----- */
.issue-toc-section-title {
  grid-column: 1 / -1;
  position: relative;
  margin: 0 0 .4rem;
  padding: .85rem 1.1rem .85rem 1.4rem;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .2px;
  color: var(--raie-azul-escuro) !important;
  background: linear-gradient(90deg, var(--raie-azul-suave) 0%, rgba(238, 242, 251, .35) 100%);
  border: 1px solid var(--raie-azul-borda);
  border-left: 6px solid var(--raie-azul);
  border-radius: var(--raie-radius-sm);
  overflow: hidden;
}
.issue-toc-section-title::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.1rem;
  width: 42px;
  height: 3px;
  transform: translateY(-50%);
  background: var(--raie-acento);
  border-radius: 2px;
  opacity: .85;
}
.issue-toc-section-title a {
  color: var(--raie-azul-escuro) !important;
  text-decoration: none;
}

/* ----------------------------------------------------------------
   5. CARD DO ARTIGO  (.article-summary)
---------------------------------------------------------------- */
.article-summary {
  position: relative;
  display: flex !important;
  flex-direction: column;
  height: 100%;
  margin: 0 !important;
  padding: 1.25rem 1.35rem 1.15rem !important;
  background: var(--raie-branco);
  border: 1px solid var(--raie-azul-borda);
  border-radius: var(--raie-radius);
  box-shadow: var(--raie-sombra);
  transition: transform var(--raie-transicao),
              box-shadow var(--raie-transicao),
              border-color var(--raie-transicao);
  overflow: hidden;
}
/* faixa azul no topo, aparece no hover */
.article-summary::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--raie-azul), var(--raie-azul-claro));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--raie-transicao);
}
.article-summary:hover {
  transform: translateY(-4px);
  box-shadow: var(--raie-sombra-hover);
  border-color: var(--raie-azul-claro);
}
.article-summary:hover::before {
  transform: scaleX(1);
}

/* Neutraliza as margens negativas do .row do Bootstrap dentro do card */
.article-summary > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-items: baseline;
}
.article-summary > .row > .col,
.article-summary > .row > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

/* Autores */
.article-summary-authors {
  font-size: .86rem;
  font-weight: 600;
  color: var(--raie-texto-suave);
  line-height: 1.4;
  text-align: left !important;
}

/* Código/páginas (ex.: e095) → pílula */
.article-summary-pages {
  display: inline-block;
  padding: .12rem .55rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--raie-azul);
  background: var(--raie-azul-suave);
  border-radius: 999px;
  white-space: nowrap;
}

/* Título do artigo */
.article-summary-title {
  margin: .55rem 0 .35rem;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.35;
}
.article-summary-title a {
  color: var(--raie-azul-escuro) !important;
  text-decoration: none;
  transition: color var(--raie-transicao);
}
.article-summary-title a:hover,
.article-summary-title a:focus {
  color: var(--raie-azul-claro) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ----------------------------------------------------------------
   6. BOTÕES DE PDF  (a.btn dentro de .article-summary-galleys)
   Escopo restrito à listagem — NÃO altera outros botões do site.
---------------------------------------------------------------- */
.article-summary-galleys {
  margin-top: auto;            /* empurra os botões para a base do card */
  padding-top: .85rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.article-summary-galleys .btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0 !important;
  padding: .42rem .95rem !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  letter-spacing: .3px;
  text-transform: uppercase;
  line-height: 1.2 !important;
  color: var(--raie-branco) !important;
  background: var(--raie-azul) !important;
  background-image: none !important;
  border: 1px solid var(--raie-azul) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: background var(--raie-transicao),
              transform var(--raie-transicao),
              box-shadow var(--raie-transicao);
}
/* ícone de documento antes do rótulo */
.article-summary-galleys .btn::before {
  content: "";
  width: 13px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M320 464a16 16 0 0 0 16-16V160H240a24 24 0 0 1-24-24V40H64a16 16 0 0 0-16 16v392a16 16 0 0 0 16 16zM0 56A56 56 0 0 1 56 0h172.1a48 48 0 0 1 33.9 14.1L369.9 122a48 48 0 0 1 14.1 33.9V448a56 56 0 0 1-56 56H56a56 56 0 0 1-56-56z'/%3E%3C/svg%3E");
          mask: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M320 464a16 16 0 0 0 16-16V160H240a24 24 0 0 1-24-24V40H64a16 16 0 0 0-16 16v392a16 16 0 0 0 16 16zM0 56A56 56 0 0 1 56 0h172.1a48 48 0 0 1 33.9 14.1L369.9 122a48 48 0 0 1 14.1 33.9V448a56 56 0 0 1-56 56H56a56 56 0 0 1-56-56z'/%3E%3C/svg%3E");
  flex: 0 0 auto;
}
.article-summary-galleys .btn:hover,
.article-summary-galleys .btn:focus {
  background: var(--raie-azul-escuro) !important;
  color: var(--raie-branco) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(18, 41, 95, .25) !important;
}
/* galé(s) de idioma alternativo → estilo "outline" p/ diferenciar do 1º PDF */
.article-summary-galleys a.btn ~ a.btn {
  color: var(--raie-azul) !important;
  background: var(--raie-branco) !important;
  border: 1px solid var(--raie-azul) !important;
}
.article-summary-galleys a.btn ~ a.btn:hover,
.article-summary-galleys a.btn ~ a.btn:focus {
  color: var(--raie-branco) !important;
  background: var(--raie-azul) !important;
}

/* ----------------------------------------------------------------
   7. DOI  (.doiInSummary  →  <strong>DOI:</strong> + <a>)
---------------------------------------------------------------- */
.doiInSummary {
  margin: .75rem 0 0 !important;
  padding: .55rem .7rem;
  font-size: .8rem;
  background: var(--raie-azul-suave);
  border: 1px dashed var(--raie-azul-borda);
  border-radius: var(--raie-radius-sm);
  word-break: break-word;
  line-height: 1.45;
}
.doiInSummary strong {
  color: var(--raie-azul-escuro);
  margin-right: .3rem;
}
.doiInSummary a {
  color: var(--raie-azul-claro) !important;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--raie-transicao);
}
.doiInSummary a:hover,
.doiInSummary a:focus {
  border-bottom-color: var(--raie-azul-claro);
}

/* ----------------------------------------------------------------
   8. RESPONSIVIDADE
---------------------------------------------------------------- */
@media (max-width: 767px) {
  .issue-toc-section {
    grid-template-columns: 1fr;   /* 1 card por linha no celular */
    gap: 1.1rem;
  }
  .issue-toc-section-title {
    font-size: 1.18rem;
    padding: .7rem .9rem .7rem 1.1rem;
  }
  .article-summary {
    padding: 1.05rem 1.1rem !important;
  }
}

/* ----------------------------------------------------------------
   9. ACESSIBILIDADE
---------------------------------------------------------------- */
.article-summary a:focus-visible,
.article-summary-galleys .btn:focus-visible,
.doiInSummary a:focus-visible {
  outline: 3px solid var(--raie-acento);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .article-summary,
  .article-summary::before,
  .article-summary-galleys .btn {
    transition: none !important;
  }
  .article-summary:hover {
    transform: none;
  }
}