.hp-archive-grid {
padding: var(--section-py) 0;
}
.archive-grid-header {
text-align: center;
margin-bottom: 3rem;
}
.archive-grid-header h1 {
font-family: var(--font-heading);
font-size: clamp(1.75rem, 3.5vw, 2.4rem);
font-weight: 800;
color: var(--color-dark);
}
.archive-grid-description {
color: var(--color-dark-mid);
max-width: 720px;
margin: 3rem auto 0;
}
.archive-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 2rem;
}
.archive-card {
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--color-white);
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.archive-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.archive-card-link {
display: block;
color: inherit;
text-decoration: none;
}
.archive-card-thumb {
aspect-ratio: 4 / 3;
overflow: hidden;
}
.archive-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.archive-card-title {
font-family: var(--font-heading);
font-size: 1.05rem;
font-weight: 700;
color: var(--color-dark);
padding: 1rem 1.25rem;
margin: 0;
}
.archive-grid-empty {
text-align: center;
color: var(--color-dark-mid);
}
.hp-archive-grid .pagination,
.hp-archive-grid .navigation.pagination {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 3rem;
}
.hp-archive-grid .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
height: 2.5rem;
padding: 0 0.75rem;
border-radius: var(--radius-lg);
background: var(--color-white);
color: var(--color-dark);
text-decoration: none;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.hp-archive-grid .page-numbers.current {
background: var(--color-brand);
color: var(--color-white);
}
@media (max-width: 640px) {
.archive-grid {
grid-template-columns: 1fr;
}
}