/* =====================================================================
   BLOG VX - blog listing (home.php). Loaded only on is_home()
   ===================================================================== */

/* ---------- BLOG ROOT: HERO SEARCH ---------- */
/* Figma 2163:681 | hero = shared page hero, blocks 48% | search 614×55, white, radius 10, pad 20, icon 24, gap 20, placeholder 18 #DADADA -3% | text→search 30 | dropdown: my design (no scroll, max 6 results) */
:root{--vx-bsearch-w:614px;--vx-bsearch-h:55px;--vx-bsearch-radius:10px;--vx-bsearch-gap:30px;--vx-bsearch-pad:20px;--vx-bsearch-ph:#DADADA;--vx-bsearch-text:#1E1E1E;--vx-bsearch-panel-bg:#0F0F0F;--vx-bsearch-border:rgba(247,247,247,.15);--vx-bsearch-hover:rgba(140,0,200,.18);--vx-bsearch-mark:var(--vx-lilac);--vx-bsearch-thumb-bg:#2E2E2E}

/* ---------- HERO SEARCH ---------- */
.vx-blog-hero{position:relative;z-index:5}
.vx-bsearch{position:relative;z-index:10;width:min(100%,var(--vx-bsearch-w));margin:var(--vx-bsearch-gap) auto 0;text-align:left}
.vx-bsearch__box{display:flex;align-items:center;gap:var(--vx-bsearch-pad);box-sizing:border-box;height:var(--vx-bsearch-h);padding:0 var(--vx-bsearch-pad);background:var(--vx-white);border-radius:var(--vx-bsearch-radius);transition:box-shadow var(--vx-dur) var(--vx-ease)}
.vx-bsearch__box:focus-within{box-shadow:0 0 0 3px rgba(140,0,200,.45)}
.vx-bsearch__icon{display:block;flex:none;width:24px;height:24px}
.vx .vx-bsearch__input{flex:1;min-width:0;height:100%;margin:0;padding:0;background:none;border:0;border-radius:0;outline:0;box-shadow:none;-webkit-appearance:none;appearance:none;font:inherit;font-size:var(--vx-fs-body);letter-spacing:-0.03em;color:var(--vx-bsearch-text)}
.vx-bsearch__input::placeholder{color:var(--vx-bsearch-ph);opacity:1}
.vx-bsearch__input::-webkit-search-cancel-button,.vx-bsearch__input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.vx-bsearch.is-loading .vx-bsearch__icon{animation:vx-bsearch-pulse .7s ease-in-out infinite alternate}
@keyframes vx-bsearch-pulse{to{opacity:.3}}

/* ---------- DROPDOWN (floats over the content below, no scroll) ---------- */
.vx-bsearch__panel{position:absolute;top:calc(100% + 8px);right:0;left:0;z-index:10;box-sizing:border-box;padding:var(--vx-space-12);background:var(--vx-bsearch-panel-bg);border:1px solid var(--vx-bsearch-border);border-radius:var(--vx-bsearch-radius);box-shadow:0 24px 48px rgba(0,0,0,.55)}
.vx-bsearch__panel[hidden]{display:none}
.vx .vx-bsearch__heading{margin:var(--vx-space-4) var(--vx-space-8) var(--vx-space-8);font-size:var(--vx-fs-label);font-weight:var(--vx-fw-semibold);line-height:1.5;letter-spacing:.04em;text-transform:uppercase;color:var(--vx-white-70)}
.vx-bsearch__list{margin:0;padding:0;list-style:none}
.vx-bsearch__item a{display:flex;align-items:center;gap:var(--vx-space-12);padding:var(--vx-space-8);border-radius:var(--vx-radius-action);color:var(--vx-white);text-decoration:none;transition:background var(--vx-dur) var(--vx-ease)}
.vx-bsearch__item img,.vx-bsearch__ph{display:block;flex:none;width:64px;height:48px;border-radius:6px;object-fit:cover;background:var(--vx-bsearch-thumb-bg)}
.vx-bsearch__meta{display:flex;flex-direction:column;min-width:0}
.vx-bsearch__title{display:-webkit-box;overflow:hidden;font-size:var(--vx-fs-compact);line-height:1.35;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.vx-bsearch__title mark{background:none;color:var(--vx-bsearch-mark);font-weight:var(--vx-fw-semibold)}
.vx-bsearch__sub{margin-top:2px;font-size:var(--vx-fs-label);color:var(--vx-white-70)}
.vx-bsearch__item.is-active a,.vx-bsearch__item a:focus-visible{background:var(--vx-bsearch-hover)}
.vx-bsearch__topics:empty{display:none}
.vx-bsearch__topics{margin-top:var(--vx-space-8);padding-top:var(--vx-space-8);border-top:1px solid var(--vx-bsearch-border)}
.vx-bsearch__chips{display:flex;flex-wrap:wrap;gap:var(--vx-space-8);padding:0 var(--vx-space-8) var(--vx-space-4)}
.vx-bsearch__chip{padding:6px 12px;border:1px solid var(--vx-border-brand);border-radius:var(--vx-radius-pill);font-size:var(--vx-fs-label);color:var(--vx-white);text-decoration:none;transition:background var(--vx-dur) var(--vx-ease)}
.vx-bsearch__all{display:block;margin-top:var(--vx-space-8);padding:var(--vx-space-12) var(--vx-space-8) var(--vx-space-4);border-top:1px solid var(--vx-bsearch-border);font-size:var(--vx-fs-compact);color:var(--vx-accent);text-decoration:none}
.vx-bsearch__all[hidden]{display:none}

/* HERO SEARCH: hover (mouse only) */
@media (hover:hover){
.vx-bsearch__item a:hover{background:var(--vx-bsearch-hover)}
.vx-bsearch__chip:hover{background:var(--vx-violet-900)}
.vx-bsearch__all:hover{text-decoration:underline}
}

/* ---------- BLOG ROOT: LATEST POSTS ---------- */
/* Figma 2423:2291 | full container 1380 = 670fr + gap 30 + 665fr | lead: image 670×346 r9, title 25.7 SemiBold, excerpt 14.5/24, tag | side: image 367×259 r11 + text 268 (title 22/30 Regular, excerpt 14.5/25, tag at bottom) | wide: image 670×294 + text 632 (title 25.7, long excerpt) | tag: white pill, #56007B 14.5 SemiBold | image bg rgba(18,18,18,.6) | hover: my values */
:root{--vx-blog-latest-w:var(--vx-container);--vx-blog-gap:30px;--vx-blog-media-bg:rgba(18,18,18,.6);--vx-blog-radius:9px;--vx-blog-radius-sm:11px;--vx-blog-title-fs:clamp(1.25rem,1.1311rem + .5284vw,1.6067rem);--vx-blog-title-sm-fs:clamp(1.1875rem,1.125rem + .2778vw,1.375rem);--vx-blog-text-fs:.9038rem;--vx-blog-tag-color:#56007B;--vx-blog-zoom:1.04}

/* ---------- BLOG CARD (mobile: image on top) ---------- */
.vx-blog-latest__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--vx-blog-gap);max-width:var(--vx-blog-latest-w);margin-inline:auto}
.vx-bcard{position:relative;display:flex;flex-direction:column;gap:var(--vx-space-20);min-width:0}
.vx-bcard__media{position:relative;flex:none;aspect-ratio:670 / 346;overflow:hidden;background:var(--vx-blog-media-bg);border-radius:var(--vx-blog-radius)}
.vx-bcard__img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--vx-ease)}
.vx-bcard__body{display:flex;flex:1;flex-direction:column;align-items:flex-start;min-width:0}
.vx .vx-bcard__title{display:-webkit-box;overflow:hidden;margin:0;font-size:var(--vx-blog-title-fs);font-weight:var(--vx-fw-semibold);line-height:1.36;letter-spacing:-0.03em;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-wrap:wrap}
.vx-bcard__link{color:var(--vx-white);text-decoration:none;transition:color var(--vx-dur) var(--vx-ease)}
.vx-bcard__link::after{content:"";position:absolute;inset:0;z-index:1}
.vx-bcard__link:focus-visible{outline:none}
.vx-bcard:focus-within{outline:2px solid var(--vx-focus);outline-offset:4px;border-radius:var(--vx-blog-radius)}
.vx .vx-bcard__excerpt{display:-webkit-box;overflow:hidden;margin:var(--vx-space-8) 0 0;font-size:var(--vx-blog-text-fs);line-height:1.667;letter-spacing:-0.03em;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-wrap:wrap}
.vx-bcard__tag{display:inline-flex;margin-top:var(--vx-space-16);padding:2px 12px;background:var(--vx-white);border-radius:var(--vx-radius-pill);font-size:var(--vx-blog-text-fs);font-weight:var(--vx-fw-semibold);line-height:1.667;letter-spacing:.01em;color:var(--vx-blog-tag-color)}

/* BLOG CARD: hover (mouse only) */
@media (hover:hover){
.vx-bcard:hover .vx-bcard__img{transform:scale(var(--vx-blog-zoom))}
.vx-bcard:hover .vx-bcard__link{color:var(--vx-accent)}
}

/* BLOG CARD: tablet+, side + wide cards = image left, text right */
@media (min-width:1024px){
.vx-bcard--side,.vx-bcard--wide{display:grid;align-items:stretch;column-gap:var(--vx-blog-gap)}
.vx-bcard--side{grid-template-columns:minmax(0,367fr) minmax(0,268fr)}
.vx-bcard--wide{grid-template-columns:minmax(0,670fr) minmax(0,632fr)}
.vx-bcard--side .vx-bcard__media,.vx-bcard--wide .vx-bcard__media{align-self:start;width:100%;min-width:0}
.vx-bcard--side .vx-bcard__media{aspect-ratio:367 / 259;border-radius:var(--vx-blog-radius-sm)}
.vx-bcard--wide .vx-bcard__media{aspect-ratio:670 / 294}
.vx .vx-bcard--side .vx-bcard__title{font-size:var(--vx-blog-title-sm-fs);font-weight:var(--vx-fw-regular);line-height:1.364}
.vx .vx-bcard--side .vx-bcard__excerpt{margin-top:var(--vx-space-20);line-height:1.73;-webkit-line-clamp:4}
.vx .vx-bcard--wide .vx-bcard__excerpt{margin-top:var(--vx-space-20);line-height:1.73;-webkit-line-clamp:7}
.vx-bcard--side .vx-bcard__tag,.vx-bcard--wide .vx-bcard__tag{margin-top:auto}
.vx-bcard--side .vx-bcard__excerpt,.vx-bcard--wide .vx-bcard__excerpt{margin-bottom:var(--vx-space-16)}
.vx-blog-latest__grid{grid-template-columns:minmax(0,670fr) minmax(0,665fr);grid-template-areas:"lead s1" "lead s2" "wide wide"}
.vx-blog-latest__grid > .vx-bcard--lead{grid-area:lead}
.vx-blog-latest__grid > .vx-bcard--side:nth-child(2){grid-area:s1}
.vx-blog-latest__grid > .vx-bcard--side:nth-child(3){grid-area:s2}
.vx-blog-latest__grid > .vx-bcard--wide{grid-area:wide}
.vx-bcard--lead{gap:var(--vx-blog-gap)}
}


/* ---------- BLOG ROOT: ALL POSTS GRID + PAGINATION ---------- */
/* Figma 2423:2292 | title 43/54.8 SemiBold -6%, centered | title→grid 62 | 3 cols × 440, gap 30 / 50 | card image 440×243 r9.7, title 21.3/29 Regular, excerpt 14/24.2, tag | divider 2px #3B3B3B, 40 below cards | pager: Previous / Next 14 + arrow 24, numbers 35×35 r5, active #9000CE, gap 8 | page 2+ opens at the grid (scroll-margin keeps it clear of the sticky header) */
:root{--vx-blog-all-title-fs:clamp(1.75rem,1.4375rem + 1.3889vw,2.6875rem);--vx-blog-all-gap:clamp(2rem,1.375rem + 2.7778vw,3.875rem);--vx-blog-all-col-gap:30px;--vx-blog-all-row-gap:clamp(2rem,1.75rem + 1.1111vw,3.125rem);--vx-pager-line:#3B3B3B;--vx-pager-mt:40px;--vx-pager-num:35px;--vx-pager-radius:5px;--vx-pager-active:#9000CE;--vx-pager-fs:.875rem}

/* ---------- ALL POSTS GRID ---------- */
#vx-blog-all{scroll-margin-top:calc(var(--vx-header-h) + 24px)}
.vx .vx-blog-all__title{margin:0;font-size:var(--vx-blog-all-title-fs);font-weight:var(--vx-fw-semibold);line-height:1.274;letter-spacing:-0.06em;text-align:center}
.vx-blog-all__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--vx-blog-all-row-gap) var(--vx-blog-all-col-gap);margin-top:var(--vx-blog-all-gap)}
.vx-bcard--grid .vx-bcard__media{aspect-ratio:440 / 243;border-radius:9.7px}
.vx .vx-bcard--grid .vx-bcard__title{font-size:var(--vx-blog-title-sm-fs);font-weight:var(--vx-fw-regular);line-height:1.364}
.vx .vx-bcard--grid .vx-bcard__excerpt{margin-top:var(--vx-space-12);line-height:1.73;-webkit-line-clamp:3}
.vx-bcard--grid .vx-bcard__tag{margin-top:auto}
.vx-bcard--grid .vx-bcard__excerpt{margin-bottom:var(--vx-space-16)}

/* ---------- PAGINATION ---------- */
.vx-pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--vx-space-12);margin-top:var(--vx-pager-mt);padding-top:32px;border-top:2px solid var(--vx-pager-line)}
.vx-pager__side--end{display:flex;justify-content:flex-end}
.vx-pager__step{display:inline-flex;align-items:center;gap:5px;min-height:44px;font-size:var(--vx-pager-fs);line-height:1.73;letter-spacing:-0.03em;color:var(--vx-white);text-decoration:none;transition:color var(--vx-dur) var(--vx-ease)}
.vx-pager__arrow{display:block;width:24px;height:24px;transition:transform var(--vx-dur) var(--vx-ease)}
.vx-pager__arrow--prev{transform:scaleX(-1)}
.vx-pager__nums{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}
.vx-pager__nums .page-numbers{display:flex;align-items:center;justify-content:center;min-width:var(--vx-pager-num);height:var(--vx-pager-num);padding:0 4px;box-sizing:border-box;border-radius:var(--vx-pager-radius);font-size:var(--vx-pager-fs);line-height:1;color:var(--vx-white);text-decoration:none;transition:background var(--vx-dur) var(--vx-ease)}
.vx-pager__nums .page-numbers.current{background:var(--vx-pager-active)}
.vx-pager__nums .page-numbers.dots{min-width:15px;letter-spacing:.17em}

/* PAGINATION: hover (mouse only) */
@media (hover:hover){
.vx-pager__nums a.page-numbers:hover{background:var(--vx-violet-900)}
.vx-pager__step:hover{color:var(--vx-accent)}
.vx-pager__step:hover .vx-pager__arrow{transform:translateX(3px)}
.vx-pager__step:hover .vx-pager__arrow--prev{transform:scaleX(-1) translateX(3px)}
}

/* GRID: 2 columns on tablet */
@media (min-width:768px){
.vx-blog-all__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* GRID: 3 columns (as in Figma) */
@media (min-width:1024px){
.vx-blog-all__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* PAGINATION: small screens, Previous / Next on their own row */
@media (max-width:599px){
.vx-pager{grid-template-columns:1fr 1fr;grid-template-areas:"nums nums" "prev next"}
.vx-pager__nums{grid-area:nums}
.vx-pager__side{grid-area:prev}
.vx-pager__side--end{grid-area:next}
}