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

.vhf-front-wrap{
  display:grid;
  gap: var(--vhf-gap,20px);
  align-items:stretch;
  grid-template-columns: 3fr 2fr;
}
.vhf-front-cta-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--vhf-gap,20px);
  height:100%;
}
.vhf-cta{
  position:relative; border-radius:14px; overflow:hidden;
  background:#e9eef9; color:#fff; box-shadow:0 8px 22px rgba(0,0,0,.08);
  min-height:0;
}
.vhf-cta .vhf-cta-bg{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.02); }
.vhf-cta .vhf-cta-overlay{ position:absolute; inset:0; background:var(--vhf-blue); opacity:.55; }
.vhf-cta .vhf-cta-label{
  position:relative; z-index:2; display:block; text-align:center;
  font-weight:900; text-transform:uppercase; padding:12px 14px;
  border-top:4px solid rgba(255,255,255,.35); text-shadow:0 2px 16px rgba(0,0,0,.45);
  font-size:clamp(14px,1.3vw,19px);
}

.vhf-front-latest .vhf-latest-inline{ height:100%; position:relative; }
.vhf-front-latest .vhf-latest-imgwrap{
  height:100%; margin-bottom:0; border-radius:14px; overflow:hidden; position:relative;
}
.vhf-front-latest .vhf-latest-img{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:14px;
}
.vhf-front-latest .vhf-latest-imgwrap::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.60) 0%, rgba(0,0,0,0) 60%);
}
.vhf-front-latest .vhf-latest-title{
  position:absolute; left:18px; right:18px; bottom:18px;
  margin:0; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.55);
  line-height:1.15; font-weight:800; letter-spacing:.2px;
  font-size:clamp(20px,1.6vw,30px); max-width:92%;
}
.vhf-front-latest .vhf-latest-title.vhf-color{ color:#fff; }

@media (max-width:980px){
  .vhf-front-wrap{ grid-template-columns:1fr; }
  .vhf-front-cta-grid{ grid-template-rows: initial; height:auto; }
}

.vhf-hold-menu{
  display:grid;
  gap: var(--gap,18px);
  grid-template-columns: repeat(var(--cols-m,2), minmax(0,1fr));
}
@media (min-width:700px){
  .vhf-hold-menu{ grid-template-columns: repeat(var(--cols-t,3), minmax(0,1fr)); }
}
@media (min-width:1100px){
  .vhf-hold-menu{ grid-template-columns: repeat(var(--cols-d,4), minmax(0,1fr)); }
}

.vhf-hold-item{
  position:relative;
  display:flex; align-items:flex-end; justify-content:center;
  min-height:150px; padding:14px 16px; border-radius:14px;
  text-decoration:none; color:#fff; background:#e9eef9;
  box-shadow:0 8px 22px rgba(0,0,0,.08); overflow:hidden;
  font-weight:900; text-transform:uppercase; letter-spacing:.6px; text-align:center;
}
.vhf-hold-bg{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.02); }
.vhf-hold-overlay{ position:absolute; inset:0; background:var(--vhf-blue); opacity:var(--overlay,.55); }
.vhf-hold-label{ position:relative; z-index:2; text-shadow:0 2px 16px rgba(0,0,0,.45); font-size:clamp(14px,1.3vw,18px); }
/* === Ens højde: venstre billede og højre 2x2 fliser === */

/* Sørg for at child-kolonner strækkes */
.vhf-front-wrap{
  align-items: stretch;
  /* hvis du vil have 2:1 i stedet for 3:2, kan du bytte til 2fr 1fr */
  /* grid-template-columns: 2fr 1fr; */
}

/* Venstre kolonne (seneste nyhed) skal fylde hele højden */
.vhf-front-latest{
  height: 100%;
}

/* Højre kolonne (flise-grid) skal fylde hele højden,
   og rækkerne skal dele højden ligeligt */
.vhf-front-cta-grid{
  height: 100%;
  grid-template-rows: repeat(2, 1fr);
  /* ekstra sikkerhed hvis noget child presser højden */
  min-height: 0;
}

/* Hver flise fylder sin celle helt */
.vhf-cta{
  height: 100%;
  display: flex;
  align-items: flex-end; /* så labelen kan stå nede som nu */
  min-height: 0;
}

/* Sikrer at baggrundsbilledet altid dækker uden at strække */
.vhf-cta .vhf-cta-bg{
  background-size: cover;
  background-position: center;
}

/* Seneste nyheds billede skal også dække korrekt */
.vhf-front-latest .vhf-latest-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* --- ENS HØJDE PÅ HELT SIKKER MÅDE --- */
/* Justér samlet højde ét sted */
.vhf-front-wrap{ --vhf-hero-h: clamp(540px, 52vw, 660px); }

/* VENSTRE (seneste nyhed) – fast højde */
.vhf-front-latest,
.vhf-front-latest .vhf-latest-inline,
.vhf-front-latest .vhf-latest-imgwrap{
  height: var(--vhf-hero-h);
  min-height: 0;
}
.vhf-front-latest .vhf-latest-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* HØJRE (2x2 fliser) – fast samme højde */
.vhf-front-cta-grid{
  height: var(--vhf-hero-h);
  min-height: 0;
  grid-template-rows: 1fr 1fr;       /* to lige rækker */
  padding: 0 !important;             /* neutraliser evt. Elementor kolonne-padding */
}

/* Hver flise fylder sin celle 100% */
.vhf-cta{
  height: 100%;
  display: flex;
  align-items: flex-end;
  min-height: 0;
}
.vhf-cta .vhf-cta-bg{
  background-size: cover;
  background-position: center;
}

/* RESPONSIVT: drop fast højde på mobil */
@media (max-width: 980px){
  .vhf-front-wrap{ --vhf-hero-h: auto; }
  .vhf-front-latest,
  .vhf-front-latest .vhf-latest-inline,
  .vhf-front-latest .vhf-latest-imgwrap,
  .vhf-front-cta-grid{
    height: auto;
    min-height: 0;
  }
  .vhf-front-cta-grid{ grid-template-rows: initial; }
}