/* =============================================================================
   VANTAIGE — HOME PAGE STYLES  v2.2
   Loaded only on front page via vantaige_enqueue_home_styles().
   All layout classes prefixed vhp- (zero collision with Elementor/Hello).

   TABLE OF CONTENTS
   1. FOUC prevention + body background
   2. Tokens + layout
   3. Buttons + badges + orbs
   4. Hero
   5. Section header
   6. AI Tools widget wrapper
   7. CTA card
   8. Blog — Elementor loop dark-theme overrides
   9. Newsletter
   10. Elementor canvas transparency
   11. Responsive
============================================================================= */


/* ─────────────────────────────────────────────────────────────
   1. FOUC PREVENTION
   Injected as first rule so the browser paints dark
   before any stylesheet fully loads.
───────────────────────────────────────────────────────────── */
html, body { background-color: #050608 !important; }

body.home {
    background-color: #050608 !important;
    /* Grid pattern — desktop only (fixed causes GPU compositing on mobile) */
    background-image:
        linear-gradient(to right,  rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.045) 1px, transparent 1px) !important;
    background-size: 52px 52px !important;
    background-attachment: fixed !important;
}


/* ─────────────────────────────────────────────────────────────
   2. TOKENS + LAYOUT
───────────────────────────────────────────────────────────── */
:root {
    --vhp-green:    hsl(145, 80%, 50%);
    --vhp-purple:   hsl(250, 60%, 55%);
    --vhp-bg:       #050608;
    --vhp-card:     hsl(240, 12%, 10%);
    --vhp-border:   hsl(240, 8%, 18%);
    --vhp-muted:    hsl(240, 5%, 55%);
    --vhp-fg:       hsl(0, 0%, 95%);
    --vhp-radius:   0.75rem;
    --vhp-ease:     cubic-bezier(0.16, 1, 0.3, 1);
}

.vhp-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.vhp-gradient-text {
    background-image: linear-gradient(135deg, var(--vhp-green), var(--vhp-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.vhp-accent-text { color: var(--vhp-green); }


/* ─────────────────────────────────────────────────────────────
   3. BUTTONS + BADGES + ORBS
───────────────────────────────────────────────────────────── */

/* Buttons */
.vhp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: inherit;
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: var(--vhp-radius);
    padding: 0.625rem 1.25rem;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s, background 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
    line-height: 1;
}
.vhp-btn--lg { padding: 0.875rem 2rem; font-size: 1rem; }

.vhp-btn--primary {
    background: var(--vhp-green);
    color: #050608;
    border-color: var(--vhp-green);
    box-shadow: 0 0 32px -8px hsla(145, 80%, 50%, 0.5);
    font-weight: 600;
}
.vhp-btn--primary:hover,
.vhp-btn--primary:focus-visible { opacity: 0.88; color: #050608; }

.vhp-btn--outline {
    background: transparent;
    color: var(--vhp-fg);
    border-color: var(--vhp-border);
}
.vhp-btn--outline:hover,
.vhp-btn--outline:focus-visible { background: hsl(240,10%,14%); color: var(--vhp-fg); }

/* Focus rings for accessibility */
.vhp-btn:focus-visible {
    outline: 2px solid var(--vhp-green);
    outline-offset: 3px;
}

/* Badges */
.vhp-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid;
    flex-shrink: 0;
    line-height: 1.4;
}
.vhp-badge--free     { background: hsla(145,80%,50%,0.1); color: var(--vhp-green);  border-color: hsla(145,80%,50%,0.25); }
.vhp-badge--paid     { background: hsla(250,60%,55%,0.1); color: var(--vhp-purple); border-color: hsla(250,60%,55%,0.25); }
.vhp-badge--freemium { background: hsl(240,10%,14%);      color: var(--vhp-muted);  border-color: var(--vhp-border); }

/* Orbs — shared base */
.vhp-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    will-change: opacity; /* promotes to own layer, avoids repaints */
}
.vhp-orb--green  { top: 20%;    left: -10rem;  width: 28rem; height: 28rem; background: hsla(145,80%,50%,0.06); }
.vhp-orb--purple { bottom: 15%; right: -10rem; width: 28rem; height: 28rem; background: hsla(250,60%,55%,0.10); }


/* ─────────────────────────────────────────────────────────────
   4. HERO
───────────────────────────────────────────────────────────── */
.vhp-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 5rem;   /* navbar clearance */
    padding-bottom: 4rem;
    overflow: hidden;
}

/* Inline grid — fades to transparent at bottom to blend into tools section */
.vhp-hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right,  rgba(255,255,255,0.055) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.055) 1px, transparent 1px);
    background-size: 52px 52px;
    -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
    mask-image:         linear-gradient(to bottom, black 55%, transparent 100%);
    pointer-events: none;
}

.vhp-hero .vhp-container { position: relative; z-index: 2; }
.vhp-hero__content { max-width: 50rem; }

.vhp-hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    border: 1px solid hsla(145,80%,50%,0.25);
    background: hsla(145,80%,50%,0.06);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--vhp-green);
    letter-spacing: 0.03em;
}

.vhp-hero__title {
    font-size: clamp(2.75rem, 6.5vw, 5rem);
    margin-bottom: 1.5rem;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--vhp-fg);
}

.vhp-hero__desc {
    max-width: 34rem;
    font-size: 1.125rem;
    color: var(--vhp-muted);
    margin-bottom: 2.25rem;
    line-height: 1.75;
}

.vhp-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 3rem; }

.vhp-hero__stats { display: flex; flex-wrap: wrap; gap: 1.75rem; }
.vhp-hero__stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--vhp-muted);
}
.vhp-hero__stat svg { color: var(--vhp-green); flex-shrink: 0; }


/* ─────────────────────────────────────────────────────────────
   5. SECTION HEADER (shared)
───────────────────────────────────────────────────────────── */
.vhp-section-header { text-align: center; margin-bottom: 3.5rem; }
.vhp-section-header h2 {
    font-size: clamp(1.75rem, 4vw, 2.625rem);
    margin-bottom: 0.5rem;
    color: var(--vhp-fg);
    letter-spacing: -0.02em;
}
.vhp-section-header p { color: var(--vhp-muted); font-size: 1rem; }


/* ─────────────────────────────────────────────────────────────
   6. AI TOOLS WIDGET WRAPPER
   No internal card styles — we don't own the widget markup.
   Just ensures surrounding chrome is dark and Elementor
   containers don't inject white backgrounds.
───────────────────────────────────────────────────────────── */
.vhp-tools { padding: 6rem 0; position: relative; z-index: 1; }

.vhp-tools__widget-wrap { background: transparent; }

/* Prevent Elementor from whiting out its own container bg */
.vhp-tools__widget-wrap .e-con,
.vhp-tools__widget-wrap .elementor-section,
.vhp-tools__widget-wrap .elementor-container { background: transparent !important; }

.vhp-tools__more { text-align: center; margin-top: 3rem; }
.vhp-tools__more a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--vhp-green);
    text-decoration: none;
    transition: gap 0.2s var(--vhp-ease);
}
.vhp-tools__more a:hover { gap: 0.75rem; }


/* ─────────────────────────────────────────────────────────────
   7. CTA CARD
───────────────────────────────────────────────────────────── */
.vhp-cta { padding: 6rem 0; position: relative; z-index: 1; }

.vhp-cta__card {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    border: 1px solid var(--vhp-border);
    background: var(--vhp-card);
    padding: 3.5rem;
}

/* CTA orbs */
.vhp-orb--cta-green  { top: -6rem;    right: -6rem;  width: 18rem; height: 18rem; background: hsla(145,80%,50%,0.12); }
.vhp-orb--cta-purple { bottom: -6rem; left: -6rem;   width: 18rem; height: 18rem; background: hsla(250,60%,55%,0.12); }

.vhp-cta__inner {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 3rem;
    align-items: center;
}
@media (min-width: 1024px) { .vhp-cta__inner { grid-template-columns: 1fr 1fr; } }

.vhp-cta__title {
    font-size: clamp(1.625rem, 3.5vw, 2.5rem);
    margin-bottom: 1.125rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--vhp-fg);
}
.vhp-cta__desc { color: var(--vhp-muted); line-height: 1.75; margin-bottom: 2rem; }

.vhp-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.vhp-benefit {
    padding: 1.25rem;
    border-radius: var(--vhp-radius);
    border: 1px solid var(--vhp-border);
    background: hsla(240,10%,14%,0.6);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: border-color 0.25s;
}
.vhp-benefit:hover { border-color: hsla(145,80%,50%,0.25); }
.vhp-benefit__icon { color: var(--vhp-green); display: flex; }
.vhp-benefit p { font-size: 0.875rem; font-weight: 500; color: var(--vhp-fg); line-height: 1.4; margin: 0; }


/* ─────────────────────────────────────────────────────────────
   8. BLOG — Elementor Loop Grid dark-theme overrides
   ─────────────────────────────────────────────────────────────
   SCOPE: all rules inside .vhp-blog__loop-wrap
   These only fire on the homepage. The same loop item templates
   (20228, 20195, 7199) remain unaffected on /blog archive.

   IMPORTANT: These overrides are a CSS-only dark-mode shim for
   templates that have hardcoded white/black values. For a clean
   permanent fix, also update those values directly in each
   Elementor loop item template (see previous conversation for
   exact element IDs and values).
───────────────────────────────────────────────────────────── */
.vhp-blog {
    padding: 6rem 0;
    border-top: 1px solid hsla(240,8%,18%,0.6);
    position: relative;
    z-index: 1;
}

.vhp-blog__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}
.vhp-blog__header h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: 0.375rem;
    color: var(--vhp-fg);
    letter-spacing: -0.02em;
}
.vhp-blog__header p { color: var(--vhp-muted); }

.vhp-blog__all-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--vhp-green);
    text-decoration: none;
    flex-shrink: 0;
    transition: gap 0.2s var(--vhp-ease);
}
.vhp-blog__all-link:hover { gap: 0.65rem; }

.vhp-blog__mobile-more { text-align: center; margin-top: 2rem; }
@media (min-width: 640px) { .vhp-blog__mobile-more { display: none; } }

.vhp-blog__loop-wrap { position: relative; }

/* Loop outer container bg */
.vhp-blog__loop-wrap .elementor-loop-container,
.vhp-blog__loop-wrap .elementor-widget-loop-grid,
.vhp-blog__loop-wrap .elementor-widget-container { background: transparent !important; }

/* Green top accent bar on every card — homepage-only enhancement */
.vhp-blog__loop-wrap .e-loop-item { position: relative; }
.vhp-blog__loop-wrap .e-loop-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--vhp-green), var(--vhp-purple));
    z-index: 10;
    border-radius: 0.75rem 0.75rem 0 0;
    pointer-events: none;
}

/* ── Template 20228: featured + secondary cards ── */
.vhp-blog__loop-wrap .elementor-20228 .elementor-element.elementor-element-69834f49,
.vhp-blog__loop-wrap .elementor-20228 .elementor-element.elementor-element-69834f49:not(.elementor-motion-effects-element-type-background) {
    background-color: var(--vhp-card) !important;
    border-color: var(--vhp-border) !important;
    border-radius: 0.75rem !important;
}
.vhp-blog__loop-wrap .elementor-20228 .elementor-element.elementor-element-69834f49:hover {
    border-color: hsla(145,80%,50%,0.3) !important;
    box-shadow: 0 0 50px -15px hsla(145,80%,50%,0.18) !important;
}
/* Image overflow clip for zoom effect */
.vhp-blog__loop-wrap .elementor-20228 .elementor-element-6e53aef3 { overflow: hidden !important; }
.vhp-blog__loop-wrap .elementor-20228 .elementor-element-55cfe253 img { transition: transform 0.4s var(--vhp-ease) !important; }
.vhp-blog__loop-wrap .elementor-20228 .elementor-element.elementor-element-69834f49:hover .elementor-element-55cfe253 img {
    transform: scale(1.04) !important;
}
/* Title */
.vhp-blog__loop-wrap .elementor-20228 .elementor-element.elementor-element-6bcdb420 .elementor-heading-title,
.vhp-blog__loop-wrap .elementor-20228 .elementor-element.elementor-element-6bcdb420 .elementor-heading-title a {
    color: var(--vhp-fg) !important;
    transition: color 0.2s !important;
}
.vhp-blog__loop-wrap .elementor-20228 .elementor-element.elementor-element-69834f49:hover .elementor-element-6bcdb420 .elementor-heading-title a {
    color: var(--vhp-green) !important;
}
/* Excerpt */
.vhp-blog__loop-wrap .elementor-20228 .elementor-element.elementor-element-163aa18a .elementor-widget-container {
    color: var(--vhp-muted) !important;
}
/* Meta: date */
.vhp-blog__loop-wrap .elementor-20228 .elementor-post-info__item,
.vhp-blog__loop-wrap .elementor-20228 .elementor-post-info__item--type-date time,
.vhp-blog__loop-wrap .elementor-20228 .elementor-post-info__item--type-date a { color: var(--vhp-muted) !important; }
/* Meta: category */
.vhp-blog__loop-wrap .elementor-20228 .elementor-post-info__terms-list a { color: var(--vhp-green) !important; }

/* ── Template 20195: sidebar/alternate card ── */
.vhp-blog__loop-wrap .elementor-20195 .elementor-element.elementor-element-22de70c5 {
    background-color: var(--vhp-card) !important;
    border: 1px solid var(--vhp-border) !important;
    border-radius: 0.75rem !important;
    overflow: hidden;
    transition: border-color 0.25s !important;
}
.vhp-blog__loop-wrap .elementor-20195 .elementor-element.elementor-element-22de70c5:hover {
    border-color: hsla(145,80%,50%,0.3) !important;
}
.vhp-blog__loop-wrap .elementor-20195 .elementor-element.elementor-element-5d4b8937 .elementor-heading-title,
.vhp-blog__loop-wrap .elementor-20195 .elementor-element.elementor-element-5d4b8937 .elementor-heading-title a {
    color: var(--vhp-fg) !important;
    transition: color 0.2s !important;
}
.vhp-blog__loop-wrap .elementor-20195 .elementor-element.elementor-element-22de70c5:hover .elementor-element-5d4b8937 .elementor-heading-title a {
    color: var(--vhp-green) !important;
}
.vhp-blog__loop-wrap .elementor-20195 .elementor-post-info__item,
.vhp-blog__loop-wrap .elementor-20195 .elementor-post-info__item--type-date time,
.vhp-blog__loop-wrap .elementor-20195 .elementor-post-info__item--type-date a,
.vhp-blog__loop-wrap .elementor-20195 .elementor-post-info__terms-list-item { color: var(--vhp-muted) !important; }
.vhp-blog__loop-wrap .elementor-20195 .elementor-post-info__terms-list a { color: var(--vhp-green) !important; }

/* ── Template 7199: default fallback cards ── */
.vhp-blog__loop-wrap .elementor-7199 .elementor-element.elementor-element-44a2f19 {
    background-color: var(--vhp-card) !important;
    border: 1px solid var(--vhp-border) !important;
    border-radius: 0.75rem !important;
    overflow: hidden;
    transition: border-color 0.25s !important;
}
.vhp-blog__loop-wrap .elementor-7199 .elementor-element.elementor-element-44a2f19:hover {
    border-color: hsla(145,80%,50%,0.3) !important;
}
.vhp-blog__loop-wrap .elementor-7199 .elementor-element.elementor-element-29e2d0f .elementor-heading-title {
    color: var(--vhp-fg) !important;
    transition: color 0.2s !important;
}
.vhp-blog__loop-wrap .elementor-7199 .elementor-element.elementor-element-44a2f19:hover .elementor-element-29e2d0f .elementor-heading-title {
    color: var(--vhp-green) !important;
}
.vhp-blog__loop-wrap .elementor-7199 .elementor-post-info__item,
.vhp-blog__loop-wrap .elementor-7199 .elementor-post-info__item--type-date time,
.vhp-blog__loop-wrap .elementor-7199 .elementor-post-info__item--type-date a { color: var(--vhp-muted) !important; }


/* ─────────────────────────────────────────────────────────────
   9. NEWSLETTER
───────────────────────────────────────────────────────────── */
.vhp-newsletter {
    padding: 6rem 0;
    border-top: 1px solid hsla(240,8%,18%,0.6);
    position: relative;
    z-index: 1;
}
.vhp-newsletter__inner { max-width: 38rem; margin: 0 auto; text-align: center; }

.vhp-newsletter__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    border: 1px solid hsla(145,80%,50%,0.25);
    background: hsla(145,80%,50%,0.06);
    color: var(--vhp-green);
}
.vhp-newsletter__inner h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 0.75rem;
    color: var(--vhp-fg);
    letter-spacing: -0.02em;
}
.vhp-newsletter__inner > p { color: var(--vhp-muted); margin-bottom: 2rem; line-height: 1.7; }

.vhp-newsletter__form-wrap { display: flex; gap: 0.75rem; max-width: 28rem; margin: 0 auto; }

.vhp-newsletter__input {
    flex: 1;
    padding: 0.7rem 1rem;
    border-radius: var(--vhp-radius);
    border: 1px solid var(--vhp-border);
    background: hsl(240,10%,14%);
    color: var(--vhp-fg);
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
    min-width: 0;
}
.vhp-newsletter__input::placeholder { color: var(--vhp-muted); }
.vhp-newsletter__input:focus { border-color: var(--vhp-green); }

.vhp-newsletter__fine { font-size: 0.75rem; color: var(--vhp-muted); margin-top: 0.875rem; }

/* Visually hidden label (accessible) */
.screen-reader-text {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}


/* ─────────────────────────────────────────────────────────────
   10. ELEMENTOR CANVAS TRANSPARENCY
   Prevents Hello Elementor and Elementor's own wrappers
   from painting a white background behind our sections.
───────────────────────────────────────────────────────────── */
body.home .site-main,
body.home .page-content,
body.home .entry-content,
body.home .elementor-section-wrap,
body.home main#main,
body.home .e-con { background: transparent !important; }


/* ─────────────────────────────────────────────────────────────
   11. RESPONSIVE
───────────────────────────────────────────────────────────── */

/* Disable fixed background on mobile — avoids GPU compositing cost */
@media (max-width: 768px) {
    body.home { background-attachment: scroll !important; }
    .vhp-hero { padding-top: 6rem; min-height: auto; }
    .vhp-cta__card { padding: 2rem 1.5rem; }
    .vhp-benefits { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
}

@media (max-width: 480px) {
    .vhp-benefits { grid-template-columns: 1fr; }
    .vhp-hero__stats { gap: 1rem; }
    .vhp-hero__actions { flex-direction: column; }
    .vhp-hero__actions .vhp-btn { width: 100%; justify-content: center; }
    .vhp-newsletter__form-wrap { flex-direction: column; }
}

/* Reduce orb intensity on low-end devices */
@media (prefers-reduced-motion: reduce) {
    .vhp-orb { display: none; }
    .vhp-hero__grid { display: none; }
}


/* ─────────────────────────────────────────────────────────────
   BLOG — native WP_Query layout (replaces Elementor loop)
───────────────────────────────────────────────────────────── */
.vhp-blog__grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .vhp-blog__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
    .vhp-blog__grid { grid-template-columns: 3fr 2fr; }
}

/* Featured column — stacks 2 large cards vertically */
.vhp-blog__featured {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Sidebar column — stacks compact cards vertically */
.vhp-blog__sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Base card */
.vhp-post-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--vhp-radius);
    border: 1px solid var(--vhp-border);
    background: var(--vhp-card);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.25s, transform 0.25s var(--vhp-ease), box-shadow 0.25s;
    position: relative;
}
.vhp-post-card::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--vhp-green), var(--vhp-purple));
    flex-shrink: 0;
}
.vhp-post-card:hover {
    border-color: hsla(145,80%,50%,0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 40px -12px rgba(0,0,0,0.5);
}

/* Thumbnail */
.vhp-post-card__thumb { overflow: hidden; flex-shrink: 0; }
.vhp-post-card__thumb img {
    width: 100%;
    display: block;
    transition: transform 0.4s var(--vhp-ease);
    object-fit: cover;
}
.vhp-post-card:hover .vhp-post-card__thumb img { transform: scale(1.04); }

/* Featured card — larger thumb */
.vhp-post-card--featured .vhp-post-card__thumb img { height: 240px; }

/* Compact card — horizontal layout with small thumb */
.vhp-post-card--compact {
    flex-direction: row;
    align-items: stretch;
}
.vhp-post-card--compact::before {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
}
.vhp-post-card--compact .vhp-post-card__thumb {
    width: 110px;
    flex-shrink: 0;
}
.vhp-post-card--compact .vhp-post-card__thumb img {
    height: 100%;
    width: 110px;
    min-height: 90px;
}

/* Body */
.vhp-post-card__body {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}
.vhp-post-card--featured .vhp-post-card__body { padding: 1.5rem; gap: 0.6rem; }
.vhp-post-card--compact .vhp-post-card__body { padding: 0.875rem; }

.vhp-post-card__cat {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--vhp-green);
}
.vhp-post-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--vhp-fg);
    line-height: 1.35;
    transition: color 0.2s;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vhp-post-card--featured .vhp-post-card__title { font-size: 1.2rem; -webkit-line-clamp: 2; }
.vhp-post-card--compact .vhp-post-card__title { font-size: 0.9rem; -webkit-line-clamp: 2; }
.vhp-post-card:hover .vhp-post-card__title { color: var(--vhp-green); }

.vhp-post-card__excerpt {
    font-size: 0.875rem;
    color: var(--vhp-muted);
    line-height: 1.6;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vhp-post-card__meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--vhp-muted);
    margin-top: auto;
    padding-top: 0.5rem;
}
.vhp-post-card__meta svg { flex-shrink: 0; }

@media (max-width: 480px) {
    .vhp-post-card--compact { flex-direction: column; }
    .vhp-post-card--compact .vhp-post-card__thumb { width: 100%; }
    .vhp-post-card--compact .vhp-post-card__thumb img { width: 100%; height: 160px; }
}