.fnv-blogs { background: var(--fnv-surface); color: var(--fnv-ink); }
.fnv-blogs__hero {
padding: 56px 0 40px;
border-bottom: 2px solid var(--fnv-ink);
background: var(--fnv-surface);
}
.fnv-blogs__kicker {
display: inline-block;
margin: 0 0 16px;
padding: 5px 12px;
font-size: .8125rem;
font-weight: 800;
color: var(--fnv-surface);
background: var(--fnv-ink);
}
.fnv-blogs__title {
margin: 0 0 14px;
font-size: clamp(1.9rem, 4vw, 3rem);
line-height: 1.45;
color: var(--fnv-ink);
}
.fnv-blogs__intro {
margin: 0;
max-width: var(--fnv-measure);
color: var(--fnv-ink-muted);
}
.fnv-blogs__stats {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
margin: 20px 0 0;
padding: 0;
list-style: none;
font-size: .875rem;
font-weight: 700;
color: var(--fnv-ink-3);
}
.fnv-blogs__stats li { min-width: 0; }
.fnv-blogs__body {
padding: 40px 0 72px;
background: var(--fnv-n-25);
}
.fnv-blogs__partner { margin-bottom: 32px; }
.fnv-blogs__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 32px;
}
.fnv-blogs__chip {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 6px 14px;
border: 2px solid var(--fnv-ink);
background: var(--fnv-surface);
color: var(--fnv-ink);
font-size: .875rem;
font-weight: 800;
text-decoration: none;
white-space: nowrap;
}
.fnv-blogs .fnv-blogs__chip:hover,
.fnv-blogs .fnv-blogs__chip:focus-visible { background: var(--fnv-grid); color: var(--fnv-ink); }
.fnv-blogs .fnv-blogs__chip[aria-current="page"] { background: var(--fnv-ink); color: var(--fnv-surface); }
.fnv-blogs__chip-n {
font-size: .8125rem;
font-weight: 700;
opacity: .75;
}
.fnv-blogs__h2 {
margin: 0 0 20px;
padding-bottom: 10px;
border-bottom: 2px solid var(--fnv-ink);
font-size: 1.35rem;
color: var(--fnv-ink);
}
.fnv-blogs__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 14px;
margin: 0 0 12px;
font-size: .8125rem;
font-weight: 700;
color: var(--fnv-ink-3);
}
.fnv-blogs__tag {
padding: 2px 10px;
background: var(--fnv-ink);
color: var(--fnv-surface);
font-weight: 800;
}
.fnv-blogs__cat { color: var(--fnv-ink); font-weight: 800; }
.fnv-blogs__featured {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
margin-bottom: 32px;
border: 2px solid var(--fnv-ink);
background: var(--fnv-surface);
}
.fnv-blogs__featured-media {
margin: 0;
overflow: hidden;
border-inline-start: 2px solid var(--fnv-ink);
order: 2;
}
.fnv-blogs__featured-body {
display: flex;
flex-direction: column;
min-width: 0;
padding: 32px 32px 28px;
order: 1;
}
.fnv-blogs__featured-title {
margin: 0 0 12px;
font-size: clamp(1.35rem, 2.3vw, 1.9rem);
line-height: 1.4;
}
.fnv-blogs__excerpt {
flex: 1;
margin: 0 0 20px;
color: var(--fnv-ink-muted);
}
.fnv-blogs__img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: center;
background: var(--fnv-grid);
}
.fnv-blogs__featured-media .fnv-blogs__img { height: 100%; min-height: 100%; }
.fnv-blogs__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
gap: 24px;
margin: 0;
padding: 0;
list-style: none;
}
.fnv-blogs__card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
border: 2px solid var(--fnv-ink);
background: var(--fnv-surface);
}
.fnv-blogs__card-media {
margin: 0;
overflow: hidden;
border-bottom: 2px solid var(--fnv-ink);
}
.fnv-blogs__card-body {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
padding: 18px 18px 16px;
}
.fnv-blogs__card-title {
margin: 0 0 8px;
font-size: 1.1rem;
line-height: 1.5;
}
.fnv-blogs__card-excerpt {
flex: 1;
margin: 0 0 14px;
color: var(--fnv-ink-muted);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.fnv-blogs .fnv-blogs__link { color: var(--fnv-ink); text-decoration: none; }
.fnv-blogs__link::after { content: ""; position: absolute; inset: 0; }
.fnv-blogs .fnv-blogs__link:focus-visible { outline: none; }
.fnv-blogs__card:focus-within,
.fnv-blogs__featured:focus-within { outline: 3px solid var(--fnv-ink); outline-offset: 2px; }
.fnv-blogs .fnv-blogs__card:hover .fnv-blogs__link,
.fnv-blogs .fnv-blogs__featured:hover .fnv-blogs__link { text-decoration: underline; text-underline-offset: 4px; }
.fnv-blogs__more {
width: fit-content;
padding-bottom: 2px;
border-bottom: 2px solid var(--fnv-ink);
font-size: .875rem;
font-weight: 900;
color: var(--fnv-ink);
}
.fnv-blogs__btn {
display: inline-flex;
align-items: center;
gap: 8px;
width: fit-content;
min-height: 44px;
padding: 10px 22px;
border: 2px solid var(--fnv-ink);
background: var(--fnv-ink);
color: var(--fnv-surface);
font-size: .9375rem;
font-weight: 900;
text-decoration: none;
}
.fnv-blogs .fnv-blogs__btn:hover,
.fnv-blogs .fnv-blogs__btn:focus-visible { background: var(--fnv-surface); color: var(--fnv-ink); }
.fnv-blogs__empty {
padding: 48px 24px;
border: 2px solid var(--fnv-ink);
background: var(--fnv-surface);
text-align: center;
}
.fnv-blogs__empty h3 { margin: 0 0 8px; font-size: 1.25rem; color: var(--fnv-ink); }
.fnv-blogs__empty p { margin: 0 auto 20px; max-width: var(--fnv-measure); color: var(--fnv-ink-muted); }
.fnv-blogs__empty .fnv-blogs__btn { margin-inline: auto; }
.fnv-blogs__pages { display: flex; justify-content: center; margin-top: 40px; }
.fnv-blogs__pages .pagination { gap: 6px; flex-wrap: wrap; }
.fnv-blogs .fnv-blogs__pages .pagination .page-item .page-link {
min-width: 44px;
height: 44px;
border: 2px solid var(--fnv-ink);
border-radius: 0;
background: var(--fnv-surface);
color: var(--fnv-ink);
font-size: .875rem;
font-weight: 700;
}
.fnv-blogs .fnv-blogs__pages .pagination .page-item .page-link:hover { background: var(--fnv-grid); border-color: var(--fnv-ink); color: var(--fnv-ink); }
.fnv-blogs .fnv-blogs__pages .pagination .page-item.active .page-link { background: var(--fnv-ink); border-color: var(--fnv-ink); color: var(--fnv-surface); }
.fnv-blogs .fnv-blogs__pages .pagination .page-item.disabled .page-link { border-color: var(--fnv-n-200); color: var(--fnv-ink-3); }
.fnv-blog-cta {
margin-top: 48px;
padding: 28px;
border: 2px solid var(--fnv-ink);
background: var(--fnv-surface);
}
.fnv-blog-cta__title { margin: 0 0 8px; font-size: 1.35rem; color: var(--fnv-ink); }
.fnv-blog-cta__text { margin: 0 0 18px; max-width: var(--fnv-measure-wide); color: var(--fnv-ink-muted); }
.fnv-blog-cta__note { margin: 10px 0 0; font-size: .875rem; font-weight: 700; color: var(--fnv-ink-3); }
@media (max-width: 991px) {
.fnv-blogs__featured { grid-template-columns: minmax(0, 1fr); }
.fnv-blogs__featured-media { order: 0; border-inline-start: 0; border-bottom: 2px solid var(--fnv-ink); }
.fnv-blogs__featured-media .fnv-blogs__img { height: auto; }
.fnv-blogs__featured-body { padding: 22px 18px; }
}
@media (max-width: 575px) {
.fnv-blogs__hero { padding: 36px 0 28px; }
.fnv-blogs__chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.fnv-blog-cta { padding: 20px 16px; }
}
@media (prefers-reduced-motion: no-preference) {
.fnv-blogs__img { transition: transform .4s ease; }
.fnv-blogs__card:hover .fnv-blogs__img,
.fnv-blogs__featured:hover .fnv-blogs__img { transform: scale(1.03); }
.fnv-blogs__chip,
.fnv-blogs__btn { transition: background-color .18s ease, color .18s ease; }
}