/**
 * @file
 * Styles for OJS Current Issue block.
 * 
 * This file uses shared CSS variables from ojs-shared-variables.css
 * to maintain consistent styling across all OJS templates.
 */

/* Container do bloco */
.ojs-current-issue-block {
  margin: var(--ojs-spacing-md) 0;
}

/* Cabeçalho do volume atual */
.current-issue-header {
  background: var(--ojs-bg-secondary);
  border: 1px solid var(--ojs-border-primary);
  border-radius: var(--ojs-radius-lg);
  padding: var(--ojs-spacing-lg);
  margin-bottom: var(--ojs-spacing-xl);
}

.issue-title {
  margin: 0 0 var(--ojs-spacing-md) 0;
  font-size: var(--ojs-font-size-2xl);
  font-weight: var(--ojs-font-weight-semibold);
  color: var(--ojs-primary);
}

.issue-title a {
  color: var(--ojs-primary);
  text-decoration: none;
  transition: color var(--ojs-transition-normal);
}

.issue-title a:hover {
  color: var(--ojs-primary-hover);
  text-decoration: underline;
}

.issue-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ojs-spacing-md);
  margin-bottom: var(--ojs-spacing-md);
}

.issue-meta span {
  background: var(--ojs-border-primary);
  color: var(--ojs-text-secondary);
  padding: var(--ojs-spacing-xs) var(--ojs-spacing-sm);
  border-radius: var(--ojs-radius-full);
  font-size: var(--ojs-font-size-sm);
  font-weight: var(--ojs-font-weight-medium);
}

.issue-description {
  color: var(--ojs-text-tertiary);
  line-height: var(--ojs-line-height-relaxed);
}

/* Lista de artigos */
.current-issue-articles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ojs-spacing-lg);
}

/* Volume do current issue */
.current-volume {
  text-align: center;
  font-size: var(--ojs-font-size-base);
  font-weight: var(--ojs-font-weight-medium);
  color: var(--ojs-text-tertiary);
  margin-bottom: var(--ojs-spacing-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: 100%;
  display: block;
}

.current-volume span {
  display: inline-block;
  text-align: center;
}

.articles-title {
  margin: 0 0 var(--ojs-spacing-lg) 0;
  font-size: var(--ojs-font-size-3xl);
  font-weight: var(--ojs-font-weight-semibold);
  color: var(--ojs-secondary);
  padding-bottom: var(--ojs-spacing-sm);
  width: 100%; /* Garante que o título ocupe toda a largura */
  text-align: center;
}

/* Item do artigo - flex basis para 4 por linha */
.article-item {
  background: var(--ojs-bg-tertiary);
  border: 1px solid var(--ojs-border-primary);
  border-radius: var(--ojs-radius-lg);
  padding: var(--ojs-spacing-lg);
  box-shadow: var(--ojs-shadow-md);
  transition: all var(--ojs-transition-normal);
  flex: 1 1 calc(25% - 1.125rem); /* 4 itens por linha com gap */
  min-width: 280px; /* Largura mínima para evitar itens muito estreitos */
  display: flex;
  flex-direction: column;
}

.article-item:hover {
  box-shadow: var(--ojs-shadow-lg);
  transform: translateY(-1px);
}

/* Data de publicação */
.article-date {
  font-size: var(--ojs-font-size-sm);
  color: var(--ojs-text-tertiary);
  font-weight: var(--ojs-font-weight-medium);
  margin-bottom: var(--ojs-spacing-sm);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* Cabeçalho do artigo */
.article-header {
  margin-bottom: var(--ojs-spacing-md);
}

.article-title {
  margin: 0 0 var(--ojs-spacing-sm) 0;
  font-size: var(--ojs-font-size-lg);
  font-weight: var(--ojs-font-weight-semibold);
  line-height: var(--ojs-line-height-normal);
  color: var(--ojs-secondary);
}

.article-subtitle {
  margin: 0;
  font-size: var(--ojs-font-size-base);
  font-weight: var(--ojs-font-weight-normal);
  color: var(--ojs-text-tertiary);
  font-style: italic;
}

/* Autores (sem label) */
.article-authors {
  margin-bottom: var(--ojs-spacing-lg);
  flex-grow: 1;
}

.authors {
  color: var(--ojs-text-secondary);
  font-size: var(--ojs-font-size-sm);
  line-height: var(--ojs-line-height-relaxed);
}

/* Botão de ação do artigo */
.article-actions {
  margin-top: auto; /* Empurra para o final do container flex */
  padding-top: var(--ojs-spacing-md);
}

/* Estado quando não há artigos */
.no-articles {
  text-align: center;
  padding: var(--ojs-spacing-xl);
  color: var(--ojs-text-tertiary);
  background: var(--ojs-bg-quaternary);
  border: 1px solid var(--ojs-border-primary);
  border-radius: var(--ojs-radius-lg);
}

.no-articles p {
  margin: 0;
  font-size: var(--ojs-font-size-base);
}

/* Responsividade */
/* Desktop grande - 4 itens por linha */
@media (min-width: 1200px) {
  .article-item {
    flex: 1 1 calc(25% - 1.125rem);
  }
}

/* Desktop médio - 3 itens por linha */
@media (max-width: 1199px) and (min-width: 992px) {
  .article-item {
    flex: 1 1 calc(33.333% - 1rem);
  }
}

/* Tablet - 2 itens por linha */
@media (max-width: 991px) and (min-width: 769px) {
  .article-item {
    flex: 1 1 calc(50% - 0.75rem);
  }
  
  .current-issue-articles {
    gap: var(--ojs-spacing-md);
  }
}

/* Mobile - 1 item por linha */
@media (max-width: 768px) {
  .current-issue-header {
    padding: var(--ojs-spacing-md);
  }
  
  .issue-title {
    font-size: var(--ojs-font-size-xl);
  }
  
  .issue-meta {
    flex-direction: column;
    gap: var(--ojs-spacing-sm);
  }
  
  .current-issue-articles {
    gap: var(--ojs-spacing-md);
  }
  
  .article-item {
    flex: 1 1 100%;
    padding: var(--ojs-spacing-md);
    min-width: unset;
  }
  
  .article-link-btn {
    padding: var(--ojs-spacing-sm) var(--ojs-spacing-lg);
    font-size: var(--ojs-font-size-xs);
  }
}

/* Mobile pequeno - ajustes adicionais */
@media (max-width: 480px) {
  .current-issue-articles {
    gap: var(--ojs-spacing-sm);
  }
  
  .article-item {
    padding: var(--ojs-spacing-sm);
  }
  
  .article-title {
    font-size: var(--ojs-font-size-base);
  }
  
  .article-link-btn {
    padding: var(--ojs-spacing-sm) var(--ojs-spacing-md);
    font-size: var(--ojs-font-size-xs);
  }
}

/* Melhorias para acessibilidade */
.article-link-btn:focus {
  outline: var(--ojs-focus-ring);
  outline-offset: var(--ojs-focus-offset);
  border-radius: var(--ojs-radius-sm);
}

/* Animações suaves */
.article-item {
  animation: ojsFadeInUp var(--ojs-transition-slow) ease-out;
}

/* Stagger animation para múltiplos artigos */
.article-item:nth-child(1) { animation-delay: 0.1s; }
.article-item:nth-child(2) { animation-delay: 0.2s; }
.article-item:nth-child(3) { animation-delay: 0.3s; }
.article-item:nth-child(4) { animation-delay: 0.4s; }
.article-item:nth-child(5) { animation-delay: 0.5s; }