:root{ --vhf-blue:#273583; }

/* --- Shared --- */
.vhf-latest{ position:relative; margin:0 0 1.4rem; }
.vhf-latest .vhf-latest-title{ margin:0; line-height:1.1; font-weight:800; }
.vhf-color{ color: var(--vhf-blue); }
.vhf-latest .vhf-latest-excerpt{ margin:.25rem 0 0; }
.vhf-latest .vhf-latest-link{ text-decoration:none; color:inherit; display:block; }

/* --- IMG version (default) --- */
.vhf-latest-inline{ max-width:100%; }
.vhf-latest-inline .vhf-latest-imgwrap{ margin-bottom: .75rem; }
.vhf-latest-inline .vhf-latest-img{ width:100%; height:auto; border-radius:12px; display:block; }
.vhf-latest-inline .vhf-latest-title{ font-size: clamp(22px, 2vw, 34px); }
.vhf-latest-inline .vhf-latest-readmore{ display:inline-block; margin-top:.5rem; font-weight:700; color:var(--vhf-blue); text-decoration:underline; }

/* --- BG hero version (optional) --- */
.vhf-latest-bg{ border-radius:14px; overflow:hidden; background:#e9eef9; box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.vhf-latest-bg .vhf-latest-link{ position:relative; color:#fff; }
.vhf-latest-bg .vhf-latest-bgimg{ position:absolute; inset:0; background-position:center center; background-size:cover; transform:scale(1.02); }
.vhf-latest-bg .vhf-latest-overlay{ position:absolute; inset:0; background: var(--vhf-blue); pointer-events:none; }
.vhf-latest-bg .vhf-latest-inner{ position:relative; z-index:2; display:flex; flex-direction:column; gap:.5rem; height:100%; width:100%; padding: clamp(14px, 2.4vw, 28px); justify-content:flex-end; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.vhf-latest-bg .vhf-latest-title{ font-size: clamp(22px, 2.4vw, 34px); }

/* Aspect ratios for BG version */
.vhf-ratio-auto   { aspect-ratio:auto; min-height:320px; }
.vhf-ratio-16x9   { aspect-ratio:16/9; }
.vhf-ratio-4x3    { aspect-ratio:4/3; }
.vhf-ratio-21x9   { aspect-ratio:21/9; }

/* Alignment for BG version */
.vhf-align-left  .vhf-latest-inner{ align-items:flex-start; text-align:left; }
.vhf-align-center .vhf-latest-inner{ align-items:center; text-align:center; }
.vhf-align-right .vhf-latest-inner{ align-items:flex-end; text-align:right; }