.blog-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}
.blog-search-intro { max-width: 760px; margin: 16px auto 24px; }
.blog-search-intro h2 { font-size: clamp(1.65rem, 3vw, 2.25rem); line-height: 1.25; text-wrap: balance; }
.blog-search-intro p { max-width: 600px; margin: 0 auto; color: #555; }
.blog-search { max-width: 760px; margin: 0 auto 36px; }
.blog-search-controls { display: flex; align-items: center; gap: 8px; padding: 8px; background: #fbfbfc; border: 1px solid #dedede; border-radius: 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, .04); }
.blog-search-controls:focus-within { border-color: #c4161c; box-shadow: 0 0 0 3px rgba(196, 22, 28, .1); }
.blog-search-field { flex: 1; min-width: 0; position: relative; }
.blog-search-field > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #c4161c; pointer-events: none; }
.blog-search-field input.form-control { width: 100%; min-height: 52px; padding-left: 44px; border: 0; background: transparent; box-shadow: none; }
.blog-search-controls > button { min-height: 52px; padding: 12px 28px; border-radius: 9px; flex-shrink: 0; }
.blog-search-helper { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
.blog-search-clear { border: 0; background: transparent; padding: 4px; color: #c4161c; font-size: .875rem; text-decoration: underline; text-underline-offset: 3px; }
#blog-search-status { min-height: 1.5em; }
@media (max-width: 575.98px) {
    .blog-search-intro { margin-top: 8px; }
    .blog-search-controls { flex-wrap: wrap; }
    .blog-search-field { flex-basis: 100%; }
    .blog-search-controls > button { width: 100%; }
}
.blog-search-empty { padding: 32px 20px; text-align: center; background: #fbfbfc; border: 1px solid #dedede; border-radius: 12px; }
.blog-pagination a,
.blog-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-decoration: none;
}
.blog-pagination [aria-current="page"],
.blog-pagination a:hover {
    color: #fff;
    background: var(--bs-primary, #c4161c);
    border-color: var(--bs-primary, #c4161c);
}
.blog-pagination a:focus-visible {
    outline: 3px solid #003a66;
    outline-offset: 3px;
}