/* ==========================================================================
   DOCUMENTOS.CSS
   FMN® — Federação Moçambicana de Natação

   RESPONSABILIDADES:
   - Estrutura da página de documentos
   - Breadcrumbs
   - Área de conteúdo
   - Categorias de documentos
   - Lista de documentos
   - Ações de download
   - Responsividade específica da página

   DEPENDÊNCIAS:
   - variables.css
   - reset.css
   - typography.css

   NÃO RESPONSABILIDADES:
   - Reset global
   - Fontes
   - Tipografia global
   - Design tokens
   - Header
   - Footer
   ========================================================================== */

/* ==========================================================================
   1. PÁGINA
   ========================================================================== */

/* ==========================================================================
   4. PESO TIPOGRÁFICO
   ========================================================================== */

.font-bold {
  font-weight: var(--fw-bold);
}

/* ==========================================================================
   5. CONTAINER PRINCIPAL
   ========================================================================== */

.content-card {
  width: 100%;
  max-width: var(--container);

  margin-inline: auto;

  padding: var(--space-12) var(--space-16);

  background-color: var(--card-background);

  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);

  box-shadow: var(--card-shadow);
}

/* ==========================================================================
   7. LISTA DE DOCUMENTOS
   ========================================================================== */

.document-list {
  list-style: none;
}

/* ==========================================================================
   8. ITEM DO DOCUMENTO
   ========================================================================== */

.document-item {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: var(--space-6);

  padding-block: var(--space-5);

  border-bottom: 1px solid var(--color-border);
}

.document-item:last-child {
  border-bottom: 0;
}

/* ==========================================================================
   10. BOTÃO DE DOWNLOAD
   ========================================================================== */

.download-button {
  display: inline-flex;
  flex-shrink: 0;

  align-items: center;
  justify-content: center;

  color: var(--color-text);

  transition:
    color var(--transition-fast),
    transform var(--transition-fast);
}

.download-button:hover,
.download-button:focus-visible {
  color: var(--color-primary);
}

.download-button:hover {
  transform: translateY(1px);
}

/* ==========================================================================
   11. ÍCONE DE DOWNLOAD
   ========================================================================== */

.icon-download {
  width: 20px;
  height: 20px;

  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   12. TABLET / MOBILE
   ========================================================================== */

@media (max-width: 768px) {
  .content-card {
    padding: var(--space-8) var(--space-5);
  }

  .document-category-title {
    margin-bottom: var(--space-8);
  }

  .document-item {
    padding-block: var(--space-4);
  }

  .document-text {
    padding-inline-end: var(--space-4);
    font-size: var(--fs-small);
  }
}

/* ==========================================================================
   13. TELAS PEQUENAS
   ========================================================================== */

@media (max-width: 480px) {
  .content-card {
    padding-inline: var(--space-4);
  }

  .document-item {
    gap: var(--space-4);
  }

  .icon-download {
    width: 18px;
    height: 18px;
  }
}

/* ==========================================================================
   FIM DO DOCUMENTOS.CSS
   ========================================================================== */