/*
 * 🇬🇧 ENGLISH
 * BLOG ARCHIVE COMPONENT
 * Implementing custom variables referring to tokens and structural hierarchy
 *
 * 🇧🇷 PORTUGUÊS BRASILEIRO
 * COMPONENTE DE ARQUIVO DO BLOG
 * Implementando variáveis personalizadas referenciando tokens e hierarquia estrutural
 * 
 * 🇵🇹 PORTUGUÊS
 * COMPONENTE DE FICHEIRO DO BLOGUE
 * Implementação de variáveis personalizadas referentes a tokens e hierarquia estrutural
*/

/* -------------------------------------------------------------------------- */
/* 🇬🇧   Blog archive header
/* 🇧🇷🇵🇹 Cabeçalho do arquivo do blog
/* -------------------------------------------------------------------------- */
.blog-archive-header
{
  background: var(--blog-header-bg);
  border-bottom: 1px solid var(--blog-header-border);
  padding: 80px 0 60px 0;
}

.blog-archive-title
{
  color: var(--blog-title-color);
  font-family: var(--lusitana);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  margin-bottom: 20px;
  text-align: center;
  text-transform: uppercase;
}

.blog-archive-description
{
  color: var(--blog-description-color);
  font-family: var(--barlow);
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 60ch;
}

/* -------------------------------------------------------------------------- */
/* 🇬🇧 Blog posts section
/* 🇧🇷 Seção de posts do blog
/* 🇵🇹 Seção de conteúdos do blogue
/* -------------------------------------------------------------------------- */
.blog-archive-section
{
  display: grid;
  background: var(--blog-section-bg);
  justify-content: center;
  padding: 80px 0;
}

/* -------------------------------------------------------------------------- */
/* 🇬🇧 Blog posts grid layout
/* 🇧🇷 Layout da grade de posts do blog
/* 🇵🇹 Modelo da grade de conteúdos do blogue
/* -------------------------------------------------------------------------- */
.blog-posts-grid
{
  display: grid;
  gap: var(--blog-grid-gap);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  margin-bottom: 60px;
}

/* -------------------------------------------------------------------------- */
/* 🇬🇧 Individual post card
/* 🇧🇷 Cartão de post individual
/* 🇵🇹 Cartão de conteúdo individual
/* -------------------------------------------------------------------------- */
.blog-post-item
{
  background: var(--blog-card-bg);
  border-radius: var(--blog-card-radius);
  box-shadow: var(--blog-card-shadow);
  overflow: hidden;
  transition: transform var(--transition-speed) var(--transition-ease),
              box-shadow var(--transition-speed) var(--transition-ease);
}

.blog-post-item:hover
{
  box-shadow: var(--blog-card-shadow-hover);
  transform: translateY(-4px);
}

.blog-post-link
{
  display: block;
  text-decoration: none;
}

/* -------------------------------------------------------------------------- */
/* 🇬🇧 Post visual with a featured image
/* 🇧🇷 Visual do post com uma imagem destacada
/* 🇵🇹 Visual do conteúdo com uma imagem em destaque
/* -------------------------------------------------------------------------- */
.blog-post-visual
{
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: var(--blog-image-height);
  overflow: hidden;
  position: relative;
  width: 100%;
}

.blog-post-overlay
{
  background: var(--blog-post-overlay);
  inset: 0;
  opacity: 0;
  position: absolute;
  transition: opacity var(--transition-speed) var(--transition-ease);
}

.blog-post-item:hover .blog-post-overlay
{
  opacity: 1;
}

/* -------------------------------------------------------------------------- */
/* 🇬🇧 Post content area
/* 🇧🇷 Área de conteúdo do post
/* 🇵🇹 Área de conteúdo da publicação
/* -------------------------------------------------------------------------- */
.blog-post-content
{
  padding: 30px;
}

.blog-post-meta
{
  align-items: center;
  color: var(--blog-post-meta-color);
  display: flex;
  font-family: var(--barlow);
  font-size: 0.9rem;
  gap: 10px;
  letter-spacing: 0.05em;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.blog-post-date,
.blog-post-author
{
  font-weight: 600;
}

.blog-post-title
{
  color: var(--blog-post-title-color);
  font-family: var(--lusitana);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 20px;
  text-transform: uppercase;
  transition: color var(--transition-speed) var(--transition-ease);
}

.blog-post-item:hover .blog-post-title
{
  color: var(--blog-post-title-hover);
}

.blog-post-excerpt
{
  color: var(--blog-post-text-color);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

.blog-post-read-more
{
  color: var(--blog-readmore-color);
  display: inline-block;
  font-family: var(--barlow);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: transform var(--transition-speed) var(--transition-ease);
}

.blog-post-item:hover .blog-post-read-more
{
  transform: translateX(4px);
}

/* -------------------------------------------------------------------------- */
/* 🇬🇧   Pagination navigation
/* 🇧🇷🇵🇹 Navegação de paginação
/* -------------------------------------------------------------------------- */
.blog-pagination
{
  border-top: 1px solid var(--blog-header-border);
  margin-top: 60px;
  padding-top: 40px;
}

.pagination-wrapper
{
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.pagination-prev a,
.pagination-next a
{
  align-items: center;
  background: var(--blog-pagination-bg);
  border: 1px solid var(--blog-pagination-border);
  border-radius: 8px;
  color: var(--blog-pagination-text);
  display: inline-flex;
  font-family: var(--barlow);
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 12px 24px;
  text-decoration: none;
  text-transform: uppercase;
  transition: all var(--transition-speed) var(--transition-ease);
}

.pagination-prev a:hover,
.pagination-next a:hover
{
  background: var(--blog-pagination-active-bg);
  border-color: var(--blog-pagination-active-bg);
  box-shadow: var(--shadow-elevation-sm);
  color: var(--palette-white);
  transform: translateY(-2px);
}

.pagination-numbers
{
  align-items: center;
  display: flex;
  gap: 10px;
}

.pagination-numbers .page-numbers
{
  align-items: center;
  background: var(--blog-pagination-bg);
  border: 1px solid var(--blog-pagination-border);
  border-radius: 8px;
  color: var(--blog-pagination-text);
  display: inline-flex;
  font-family: var(--barlow);
  font-weight: 700;
  height: 44px;
  justify-content: center;
  min-width: 44px;
  padding: 0 12px;
  text-decoration: none;
  transition: all var(--transition-speed) var(--transition-ease);
}

.pagination-numbers .page-numbers:hover
{
  border-color: var(--blog-pagination-hover-border);
  color: var(--blog-pagination-hover-text);
}

.pagination-numbers .page-numbers.current
{
  background: var(--blog-pagination-active-bg);
  border-color: var(--blog-pagination-active-bg);
  color: var(--palette-white);
}

.pagination-numbers .dots
{
  color: var(--blog-post-meta-color);
  padding: 0 8px;
}

/* -------------------------------------------------------------------------- */
/* 🇬🇧 No posts state
/* 🇧🇷 Estado sem posts
/* 🇵🇹 Estado sem conteúdos
/* -------------------------------------------------------------------------- */
.blog-no-posts
{
  padding: 80px 0;
  text-align: center;
}

.blog-no-posts p
{
  color: var(--blog-description-color);
  font-family: var(--barlow);
  font-size: 1.2rem;
}