.btw-guide-listing { overflow: hidden; background: #fff; }
.btw-guide-listing *, .btw-guide-listing *::before, .btw-guide-listing *::after { box-sizing: border-box; }

.guide-listing-hero { padding: 104px 0 125px; background: linear-gradient(135deg, #f7fbfd 0%, #e9f6fc 58%, #dff2fa 100%); text-align: center; }
.guide-listing-hero__inner { max-width: 850px; }
.guide-listing-hero h1 { margin: 0 0 24px; color: var(--willow-navy); font-size: clamp(48px, 6vw, 76px); line-height: .99; letter-spacing: -.055em; }
.guide-listing-hero h1 br { display: block !important; }
.guide-listing-hero__inner > p:not(.btw-eyebrow) { max-width: 680px; margin: 0 auto; color: #526a7e; font-size: 18px; line-height: 1.7; }

.guide-search-section { position: relative; z-index: 2; margin-top: -54px; }
.guide-search { padding: 28px 32px 30px; border: 1px solid var(--willow-border); border-radius: 10px; background: #fff; box-shadow: 0 18px 50px rgba(17,47,79,.1); }
.guide-search label { display: block; margin: 0 0 12px; color: var(--willow-navy); font-family: "Red Hat Display", sans-serif; font-size: 15px; font-weight: 800; }
.guide-search__row { display: grid; grid-template-columns: 1fr auto; }
.guide-search input { width: 100%; height: 60px; padding: 0 22px; border: 1px solid #cadbe5; border-right: 0; border-radius: 7px 0 0 7px; outline: none; background: #fbfdfe; color: var(--willow-navy); font-size: 16px; transition: border-color .2s, box-shadow .2s; }
.guide-search input:focus { position: relative; z-index: 1; border-color: var(--willow-blue); box-shadow: 0 0 0 3px rgba(51,151,205,.13); }
.guide-search input::placeholder { color: #8495a2; }
.guide-search button { display: flex; min-width: 138px; height: 60px; align-items: center; justify-content: center; gap: 9px; padding: 0 24px; border: 1px solid var(--willow-blue); border-radius: 0 7px 7px 0; background: var(--willow-blue); color: #fff; font-family: "Red Hat Display", sans-serif; font-size: 15px; font-weight: 800; cursor: pointer; transition: background .2s, border-color .2s; }
.guide-search button:hover { border-color: var(--willow-blue-dark); background: var(--willow-blue-dark); }
.guide-search button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2; }

.guide-results { padding-top: 96px; }
.guide-results__heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 38px; }
.guide-results__heading h2 { margin: 0; color: var(--willow-navy); font-size: clamp(34px, 4vw, 52px); line-height: 1.08; letter-spacing: -.035em; }
.guide-results__heading > .btw-text-link { margin-bottom: 7px; }

.guide-list { display: grid; gap: 20px; }
.guide-row-card { display: grid; grid-template-columns: 270px 1fr; min-height: 218px; overflow: hidden; border: 1px solid var(--willow-border); border-radius: 9px; background: #fff; box-shadow: 0 10px 34px rgba(17,47,79,.045); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.guide-row-card:hover { transform: translateY(-3px); border-color: #b7d9e9; box-shadow: 0 18px 42px rgba(17,47,79,.09); }
.guide-row-card__image { display: block; min-height: 218px; overflow: hidden; background: var(--willow-pale); }
.guide-row-card__image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .45s ease; }
.guide-row-card:hover .guide-row-card__image img { transform: scale(1.035); }
.guide-row-card__body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 30px 36px; }
.guide-row-card__category { margin: 0 0 9px; color: var(--willow-blue-dark); font-size: 12px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.guide-row-card h3 { margin: 0 0 10px; font-size: clamp(22px, 2.2vw, 29px); line-height: 1.16; letter-spacing: -.025em; }
.guide-row-card h3 a { color: var(--willow-navy); text-decoration: none; }
.guide-row-card__excerpt { max-width: 760px; margin: 0 0 14px; color: var(--willow-muted); font-size: 14px; line-height: 1.65; }
.guide-row-card .btw-text-link { font-size: 13px; }

.guide-empty { padding: 72px 24px; border: 1px solid var(--willow-border); border-radius: 9px; background: var(--willow-pale); text-align: center; }
.guide-empty > span { display: grid; width: 54px; height: 54px; place-items: center; margin: 0 auto 20px; border-radius: 50%; background: #fff; color: var(--willow-blue-dark); font-size: 23px; font-weight: 850; }
.guide-empty h3 { margin: 0 0 8px; font-size: 28px; }
.guide-empty p { margin: 0 0 24px; color: var(--willow-muted); }
.guide-pagination { margin-top: 46px; text-align: center; }
.guide-pagination nav { display: flex; justify-content: center; }
.guide-pagination .pagination { gap: 7px; margin: 0; }
.guide-pagination .page-link { display: grid; min-width: 42px; height: 42px; place-items: center; padding: 0 12px; border: 1px solid var(--willow-border); border-radius: 50% !important; color: var(--willow-navy); }
.guide-pagination .active .page-link { border-color: var(--willow-blue); background: var(--willow-blue); color: #fff; }
.guide-listing-cta { background: var(--willow-pale); }

@media (max-width: 820px) {
    .guide-listing-hero { padding: 82px 0 108px; }
    .guide-row-card { grid-template-columns: 220px 1fr; }
    .guide-row-card__body { padding: 26px 28px; }
}

@media (max-width: 680px) {
    .guide-listing-hero { padding: 72px 0 104px; text-align: left; }
    .guide-listing-hero h1 { font-size: 43px; }
    .guide-listing-hero__inner > p:not(.btw-eyebrow) { font-size: 16px; line-height: 1.6; }
    .guide-search-section { margin-top: -42px; }
    .guide-search { padding: 20px; }
    .guide-search__row { grid-template-columns: 1fr 58px; }
    .guide-search input { height: 56px; padding: 0 16px; }
    .guide-search button { min-width: 58px; width: 58px; height: 56px; padding: 0; }
    .guide-search button span { display: none; }
    .guide-results { padding-top: 72px; }
    .guide-results__heading { align-items: flex-start; flex-direction: column; gap: 14px; margin-bottom: 28px; }
    .guide-row-card { grid-template-columns: 1fr; }
    .guide-row-card__image { min-height: 205px; aspect-ratio: 16 / 9; }
    .guide-row-card__body { padding: 25px 22px 27px; }
    .guide-row-card h3 { font-size: 24px; }
    .guide-row-card__excerpt { font-size: 14px; }
}