.blog-search-section { padding: clamp(2.5rem, 5vw, 4.5rem) 0 0; }
.blog-search-panel { display: grid; grid-template-columns: minmax(220px, .78fr) minmax(0, 1.8fr); gap: 2rem; align-items: center; padding: clamp(1.4rem, 3vw, 2.4rem); border: 1px solid rgba(72, 135, 239, .16); border-radius: 1.25rem; background: linear-gradient(112deg, #f6f9ff 0%, #fff8f5 100%); box-shadow: 0 16px 38px rgba(38, 66, 113, .08); }
.blog-search-copy h2 { margin: 0; color: #273650; font-size: clamp(1.55rem, 2.4vw, 2.3rem); }
.blog-search-control { position: relative; display: flex; align-items: center; min-height: 4.5rem; border: 1px solid #c6d9fc; border-radius: .9rem; background: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.blog-search-control:focus-within { border-color: #4887ef; box-shadow: 0 0 0 .25rem rgba(72, 135, 239, .16); }
.blog-search-control > .fa { margin-left: 1.35rem; color: #4887ef; font-size: 1.25rem; }
.blog-search-control input { width: 100%; min-width: 0; min-height: 4.4rem; padding: .8rem 3rem .8rem 1rem; border: 0; outline: 0; color: #233450; font-size: 1rem; background: transparent; }
.blog-search-control input::placeholder { color: #8190a8; opacity: 1; }
.blog-search-status { position: absolute; right: 1rem; color: #65758f; font-size: .8rem; pointer-events: none; }
.blog-search-results { position: absolute; z-index: 20; top: calc(100% + .65rem); right: 0; left: 0; max-height: min(28rem, 65vh); overflow: auto; border: 1px solid #dbe6f9; border-radius: .9rem; background: #fff; box-shadow: 0 18px 45px rgba(25, 51, 90, .18); }
.blog-search-result { display: block; padding: 1rem 1.25rem; color: #243550; text-decoration: none; border-bottom: 1px solid #edf1f7; }
.blog-search-result:last-child { border-bottom: 0; }
.blog-search-result:hover, .blog-search-result:focus-visible { color: #1c4ea0; background: #f4f8ff; outline: 0; }
.blog-search-result small { display: block; margin-bottom: .25rem; color: #4887ef; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.blog-search-result strong { display: block; margin-bottom: .3rem; font-size: 1.05rem; }
.blog-search-result span { display: -webkit-box; overflow: hidden; color: #61708a; font-size: .9rem; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.blog-search-empty { padding: 1rem 1.25rem; color: #61708a; }
@media (max-width: 767px) { .blog-search-section { padding-top: 2rem; } .blog-search-panel { grid-template-columns: 1fr; gap: 1.2rem; } .blog-search-control input { font-size: .94rem; } }