/* Article discovery. Scoped to the article index. */
.blog-search { padding: 25px 28px 22px; margin: 0 0 24px; border: 1px solid #d5e1e5; border-top: 3px solid #387f89; border-radius: 5px; background: #f8fafb; }
.blog-search > label { display: block; margin-bottom: 12px; color: #2c4b57; font-size: 17px; font-weight: 700; }
.blog-search__row { display: flex; align-items: stretch; gap: 12px; }
.blog-search__input { position: relative; min-width: 0; flex: 1; }
.blog-search__input > i { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: #738e98; pointer-events: none; }
.blog-search input[type=search] { width: 100%; min-height: 54px; padding: 12px 17px 12px 45px; border: 1px solid #b9ccd3; border-radius: 4px; background: #fff; color: #294653; font: inherit; font-size: 16px; }
.blog-search input[type=search]:focus-visible { outline: 3px solid #a9ced8; outline-offset: 2px; border-color: #387f89; }
.blog-search button { flex-shrink: 0; min-width: 130px; border: 0; cursor: pointer; }
.blog-search #article-search-hint { font-size: 13px; color: #6a7e88; line-height: 1.9; margin: 12px 0; }
.blog-search__suggestions, .blog-search__filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.blog-search__suggestions > span { color: #71838c; font-size: 12px; margin-right: 4px; }
.blog-search__suggestions > a, .blog-search__filters > a { display: inline-flex; align-items: center; gap: 9px; padding: 5px 12px; border-radius: 3px; background: #eaf1f3; color: #3a6471; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.blog-search__suggestions > a:hover, .blog-search__filters > a:hover { background: #dbe9ed; color: #214e60; }
.blog-search__filters { margin-top: 15px; }
.blog-search__filters > .blog-search__reset { background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.blog-index-meta > span { overflow-wrap: anywhere; }
.blog-search-empty { grid-column: 1 / -1; padding: 35px 28px; background: #f6f9fa; border: 1px solid #dce6ea; border-radius: 4px; }
.blog-search-empty h2 { font-size: 19px; color: #294653; line-height: 1.8; }
.blog-search-empty p { font-size: 15px; line-height: 1.9; margin: 12px 0 22px; color: #647985; }
.blog-index .blog-card-thumb { aspect-ratio: 16 / 9; border-radius: 4px; background: #f4f3ee; }
.blog-index .blog-card-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 600px) {
  .blog-search { padding: 20px 17px; }
  .blog-search__row { flex-direction: column; gap: 10px; }
  .blog-search button { min-height: 48px; width: 100%; }
  .blog-search__suggestions { gap: 7px; }
  .blog-search__suggestions > span { width: 100%; }
  .blog-search-empty { padding: 25px 20px; }
}