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

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

/* Grid responsivo para os cards */
.archives-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--ojs-spacing-lg);
  margin: var(--ojs-spacing-md) 0;
}

/* Responsividade para diferentes tamanhos de tela */
@media (min-width: 576px) {
  .archives-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

@media (min-width: 768px) {
  .archives-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .archives-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .archives-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Card individual */
.archive-card {
  background: var(--ojs-bg-tertiary);
  border: 1px solid var(--ojs-border-primary);
  border-radius: var(--ojs-radius-lg);
  box-shadow: var(--ojs-shadow-md);
  transition: all var(--ojs-transition-normal);
  overflow: hidden;
}

.archive-card:hover {
  box-shadow: var(--ojs-shadow-lg);
  transform: translateY(-2px);
}

/* Conteúdo do card */
.archive-card-content {
  padding: var(--ojs-spacing-lg);
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Data de publicação */
.archive-date {
  margin-bottom: var(--ojs-spacing-sm);
}

.published-date {
  font-size: var(--ojs-font-size-sm);
  color: var(--ojs-text-tertiary);
  font-weight: var(--ojs-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Título do volume */
.archive-title {
  margin-bottom: var(--ojs-spacing-md);
  flex-grow: 1;
}

.archive-title-link {
  color: var(--ojs-primary);
  text-decoration: none;
  font-size: var(--ojs-font-size-lg);
  font-weight: var(--ojs-font-weight-semibold);
  line-height: var(--ojs-line-height-normal);
  display: block;
  transition: color var(--ojs-transition-normal);
}

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

.archive-title-text {
  color: var(--ojs-text-primary);
  font-size: var(--ojs-font-size-lg);
  font-weight: var(--ojs-font-weight-semibold);
  line-height: var(--ojs-line-height-normal);
  display: block;
}

/* Informações do volume */
.archive-volume-info {
  margin-bottom: var(--ojs-spacing-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ojs-spacing-sm);
}

.volume-number,
.issue-number {
  background: var(--ojs-bg-light);
  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-xs);
  font-weight: var(--ojs-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

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

.btn {
  display: inline-block;
  background: var(--ojs-bg-tertiary);
  color: var(--ojs-secondary);
  text-decoration: none;
  padding: var(--ojs-spacing-sm) var(--ojs-spacing-lg);
  border-radius: var(--ojs-radius-md);
  font-weight: var(--ojs-font-weight-semibold);
  font-size: var(--ojs-font-size-sm);
  text-align: center;
  transition: all var(--ojs-transition-normal);
  border: 2px solid var(--ojs-secondary);
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
}

.btn:hover {
  background: var(--ojs-secondary-light);
  border-color: var(--ojs-secondary);
  color: var(--ojs-secondary);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(36, 149, 151, 0.3);
}

.btn:focus {
  outline: var(--ojs-focus-ring);
  outline-offset: var(--ojs-focus-offset);
  background: var(--ojs-secondary-light);
  border-color: var(--ojs-secondary);
}

.btn-primary {
  background: var(--ojs-bg-tertiary);
  color: var(--ojs-secondary);
  border: 2px solid var(--ojs-secondary);
}

.btn-primary:hover {
  background: var(--ojs-secondary-light);
  border-color: var(--ojs-secondary);
  color: var(--ojs-secondary);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(36, 149, 151, 0.3);
}

.btn-primary:focus {
  outline: var(--ojs-focus-ring);
  outline-offset: var(--ojs-focus-offset);
  background: var(--ojs-secondary-light);
  border-color: var(--ojs-secondary);
}

.btn-sm {
  padding: var(--ojs-spacing-xs) var(--ojs-spacing-sm);
  font-size: var(--ojs-font-size-xs);
}

/* Estado quando não há volumes */
.no-archives {
  text-align: center;
  padding: var(--ojs-spacing-xl);
  color: var(--ojs-text-tertiary);
}

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

/* Melhorias para acessibilidade */
.archive-card:focus-within {
  outline: var(--ojs-focus-ring);
  outline-offset: var(--ojs-focus-offset);
}

.archive-title-link:focus {
  outline: var(--ojs-focus-ring);
  outline-offset: var(--ojs-focus-offset);
  border-radius: var(--ojs-radius-sm);
}

.btn:focus {
  outline: var(--ojs-focus-ring);
  outline-offset: var(--ojs-focus-offset);
}

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

/* Stagger animation para múltiplos cards */
.archive-card:nth-child(1) { animation-delay: 0.1s; }
.archive-card:nth-child(2) { animation-delay: 0.2s; }
.archive-card:nth-child(3) { animation-delay: 0.3s; }
.archive-card:nth-child(4) { animation-delay: 0.4s; }
.archive-card:nth-child(5) { animation-delay: 0.5s; }
.archive-card:nth-child(6) { animation-delay: 0.6s; }
.archive-card:nth-child(7) { animation-delay: 0.7s; }
.archive-card:nth-child(8) { animation-delay: 0.8s; }