/**
 * @file
 * Listagem de Revistas de Direito.
 *
 * Sem altura fixa e sem overflow: a página usa apenas a rolagem principal do
 * navegador, com carregamento incremental (RI01/RI07).
 *
 * Alto contraste: as regras usam `html.high-contrast` como ancestral em vez de
 * uma classe por elemento. O toggle do tema aplica as classes uma única vez, no
 * clique, então linhas trazidas depois pelo scroll infinito nunca as
 * receberiam.
 */

/* Container ---------------------------------------------------------------- */

.pge-revistas {
  width: 100%;
  margin-top: 1.5rem;
}

/* Consulta por volume.
 *
 * O formulário exposto não tem wrapper .form--inline: os filhos diretos do
 * <form> são o .js-form-item do select e o .form-actions do botão. O submit
 * ainda vem com btn-block/form-control do Bootstrap, que o esticam para 100%;
 * o layout abaixo controla a largura explicitamente em cada faixa. */

.pge-revistas__consulta {
  margin-bottom: 1.5rem;
}

.pge-revistas__consulta .views-exposed-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}

.pge-revistas__consulta .js-form-item,
.pge-revistas__consulta .form-actions {
  margin: 0;
}

.pge-revistas__consulta .form-select {
  height: 48px;
  max-width: 100%;
  border: 1px solid #ced4da;
  border-radius: 5px;
  color: #495057;
  padding: 0 2rem 0 0.75rem;
}

.pge-revistas__consulta .form-submit {
  height: 48px;
  min-width: 7rem;
  max-width: 100%;
  padding: 0 1.5rem;
  background: #005a92;
  color: #fff;
  border: 1px solid #005a92;
  border-radius: 10px;
  font-size: 1rem;
  line-height: 1.5;
}

.pge-revistas__consulta .form-submit:hover,
.pge-revistas__consulta .form-submit:focus {
  background: #004a78;
  border-color: #004a78;
}

/* Precede a consulta, então o respiro maior fica no bloco de baixo. */
.pge-revistas__header {
  margin-bottom: 1rem;
}

.pge-revistas .todas-revistas a {
  display: inline-block;
  font-size: 1rem;
  color: #005a92;
  border: 1px solid #005a92;
  border-radius: 10px;
  padding: 0.5rem 0.8rem;
  text-decoration: none;
  background: #fff;
}

.pge-revistas .todas-revistas a:hover,
.pge-revistas .todas-revistas a:focus {
  background: #005a92;
  color: #fff;
}

.pge-revistas__vazio {
  margin: 2rem 0;
  font-size: 1rem;
  color: #333;
}

/* Bloco do volume ---------------------------------------------------------- */

.pge-volume-titulo {
  font-size: 1.125rem;
  font-weight: 700;
  color: #005a92;
  margin: 2rem 0 0;
  padding: 0 0 0.5rem;
}

.pge-revistas .views-row[data-volume-tid] {
  /*
  border-left: 1px solid #d9d9d9;
  border-right: 1px solid #d9d9d9;
  */
  border-bottom: 1px solid #ececec;
  background: #fff;
  padding: 1rem;
}

.pge-revistas .views-row.is-bloco-inicio {
  /* border-top: 1px solid #d9d9d9; */
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.pge-revistas .views-row.is-bloco-fim {
  border-bottom: 1px solid #d9d9d9;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  margin-bottom: 0.5rem;
}

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

.pge-pub-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pge-pub-card__capa img {
  display: block;
  width: 80px;
  height: auto;
  max-width: 100%;
  border-radius: 4px;
}

.pge-pub-card__conteudo {
  min-width: 0;
}

/* Tags uma abaixo da outra, cada uma com a largura do próprio conteúdo. */
.pge-pub-card__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  margin: 0 0 0.5rem;
}

.pge-pub-card__ano,
.pge-pub-card__volume {
  display: inline-block;
  max-width: 100%;
  font-size: 0.8125rem;
  line-height: 1.4;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  background: #eef4f8;
  color: #005a92;
  overflow-wrap: break-word;
}

.pge-pub-card__titulo {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  overflow-wrap: break-word;
}

.pge-pub-card__titulo a {
  color: #005a92;
  text-decoration: none;
}

.pge-pub-card__titulo a:hover,
.pge-pub-card__titulo a:focus {
  text-decoration: underline;
}

.pge-pub-card__subtitulo {
  font-size: 0.875rem;
  color: #444;
  margin: 0;
  overflow-wrap: break-word;
}

/* Pager do scroll infinito ------------------------------------------------- */

.pge-revistas .views-infinite-scroll-content-wrapper {
  display: block;
}

.pge-revistas .pager__item {
  list-style: none;
}

.pge-revistas .pager {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0 0;
  padding: 0;
}

/* Responsivo --------------------------------------------------------------- */

/* Pequenos (celulares): até 375px.
 * Consulta empilhada em largura total e capa acima do texto. Nada de largura
 * fixa: o CSS anterior usava 23rem (368px) e estourava a viewport de 320px. */
@media (max-width: 375.98px) {
  .pge-revistas__consulta .views-exposed-form {
    display: block;
  }

  .pge-revistas__consulta .js-form-item,
  .pge-revistas__consulta .form-actions,
  .pge-revistas__consulta .form-select,
  .pge-revistas__consulta .form-submit,
  .pge-revistas .todas-revistas a {
    display: block;
    width: 100%;
  }

  .pge-revistas__consulta .form-actions {
    margin-top: 0.75rem;
  }

  .pge-revistas .todas-revistas a {
    text-align: center;
  }

  .pge-volume-titulo {
    font-size: 1rem;
  }

  .pge-revistas .views-row[data-volume-tid] {
    padding: 0.875rem;
  }
}

/* Médios (tablets e pequenos laptops): 376px a 850px.
 * Select e botão lado a lado; o select ocupa o espaço restante. */
@media (min-width: 376px) and (max-width: 850px) {
  .pge-pub-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
  }

  /* Cresce com a tela, mas com teto: sem ele o select chegaria a ~700px em
     850px e cairia de volta para 298px em 851px. */
  .pge-revistas__consulta .js-form-item {
    flex: 1 1 12rem;
    min-width: 0;
    max-width: 340px;
  }

  .pge-revistas__consulta .form-select {
    width: 100%;
  }
}

/* Grandes (desktops e laptops maiores): 851px a 1440px. */
@media (min-width: 851px) and (max-width: 1440px) {
  .pge-pub-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .pge-revistas .views-row[data-volume-tid] {
    padding: 1rem 1.5rem;
  }

  .pge-revistas__consulta .form-select {
    width: 298px;
  }
}

/* Extra grandes (monitores de alta resolução): acima de 1440px. */
@media (min-width: 1441px) {
  .pge-pub-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
  }

  .pge-pub-card__capa img {
    width: 100px;
  }

  .pge-revistas .views-row[data-volume-tid] {
    padding: 1.25rem 2rem;
  }

  .pge-revistas__consulta .form-select {
    width: 340px;
  }
}

/* Alto contraste ----------------------------------------------------------- */

html.high-contrast .pge-revistas,
html.high-contrast .pge-revistas .views-row[data-volume-tid] {
  background: #000 !important;
}

html.high-contrast .pge-revistas .views-row[data-volume-tid] {
  border-color: #fff !important;
}

html.high-contrast .pge-volume-titulo,
html.high-contrast .pge-pub-card__titulo a,
html.high-contrast .pge-pub-card__subtitulo,
html.high-contrast .pge-revistas__vazio {
  color: #fff !important;
}

html.high-contrast .pge-pub-card__ano,
html.high-contrast .pge-pub-card__volume {
  background: #fff !important;
  color: #000 !important;
  font-weight: 700;
}

html.high-contrast .pge-pub-card__capa img {
  border: 1px solid #fff;
}

html.high-contrast .pge-revistas .todas-revistas a,
html.high-contrast .pge-revistas .pager a {
  background: #fff !important;
  color: #000 !important;
  border-color: #fff !important;
  font-weight: 700;
}