/* ========================================================================== AAPS Resource Hub (page 3081) 1) Live-search results panel (injected by assets/js/resource-search.js) 2) Blog loop grid (#resourcesBlogGrid, template 6027): one Loop Grid where the FIRST item is the big card (with excerpt) and items 2–5 are small cards (excerpt hidden), arranged big-left + 2×2-right. The card internals are already styled in template 6027 — this file only adds the search panel chrome and the grid positioning / big-vs-small overrides. ========================================================================== */ /* ── 1. Live search results ────────────────────────────────────────────── */ /* The panel is appended to and positioned (fixed) by JS, so the search form's overflow:hidden pill can't clip it. */ .aaps-rs-results { position: fixed; z-index: 99999; min-width: 280px; background: #fff; border: 1px solid #E9EAEB; border-radius: 16px; box-shadow: 0 12px 32px rgba( 16, 24, 40, .14 ); padding: 8px; max-height: 420px; overflow-y: auto; font-family: 'ABC Diatype Plus Variable Unlicensed Trial', sans-serif; } .aaps-rs-results[hidden] { display: none; } .aaps-rs-item { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: inherit; transition: background-color .15s ease; } .aaps-rs-item + .aaps-rs-item { margin-top: 2px; } .aaps-rs-item.is-active, .aaps-rs-item:hover { background: #F5F5F5; } .aaps-rs-thumb { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: #F0F0F0; display: block; } .aaps-rs-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .aaps-rs-thumb--empty { background: #EFEFEF; } .aaps-rs-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .aaps-rs-title { font-size: 15px; line-height: 1.35; font-weight: 500; color: #181D27; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aaps-rs-type { font-size: 12px; line-height: 1; font-weight: 500; color: #FF9C0A; text-transform: uppercase; letter-spacing: .04em; } .aaps-rs-msg { padding: 18px 12px; text-align: center; color: #717680; font-size: 14px; } @media (max-width: 767px) { .aaps-rs-results { border-radius: 12px; max-height: 60vh; } .aaps-rs-thumb { width: 48px; height: 48px; } .aaps-rs-title { font-size: 14px; } } /* ── 2. Blog loop grid: big-first + small-rest ─────────────────────────── */ /* Element ids inside template 6027 (stable Elementor element classes): .elementor-element-2fc28f7 → card featured-image background container .elementor-element-24d93d5 → card excerpt (text-editor) */ #resourcesBlogGrid .elementor-loop-container.elementor-grid { display: grid !important; grid-template-columns: repeat( 4, 1fr ) !important; grid-auto-flow: row dense; gap: 24px; } /* Default (small cards, items 2–5): hide the excerpt; image stays at the template's designed 201px height. */ #resourcesBlogGrid .e-loop-item .elementor-element-24d93d5 { display: none; } /* First item = big card: spans the left half over two rows, taller image, excerpt visible. */ #resourcesBlogGrid .e-loop-item:first-of-type { grid-column: span 2; grid-row: span 2; } #resourcesBlogGrid .e-loop-item:first-of-type .elementor-element-24d93d5 { display: block; } #resourcesBlogGrid .e-loop-item:first-of-type .elementor-element-2fc28f7 { min-height: 418.67px; } /* Tablet: big card spans the full top row, small cards 2×2 beneath. */ @media (max-width: 1024px) { #resourcesBlogGrid .elementor-loop-container.elementor-grid { grid-template-columns: repeat( 2, 1fr ) !important; } #resourcesBlogGrid .e-loop-item:first-of-type { grid-column: span 2; grid-row: auto; } #resourcesBlogGrid .e-loop-item:first-of-type .elementor-element-2fc28f7 { min-height: 320px; } } /* Mobile: single column, everything stacks; big card keeps its excerpt. */ @media (max-width: 767px) { #resourcesBlogGrid .elementor-loop-container.elementor-grid { grid-template-columns: 1fr !important; } #resourcesBlogGrid .e-loop-item:first-of-type { grid-column: span 1; } #resourcesBlogGrid .e-loop-item:first-of-type .elementor-element-2fc28f7 { min-height: 238.67px; } } /* Hide-when-empty: if the query returns nothing, collapse the grid widget. */ #resourcesBlogGrid .elementor-loop-container.elementor-grid:empty { display: none; }