/* ==========================================================================
   Vedinorge Hero – Elementor widget
   Responsive: scales proportionally from 1536×618 design down to mobile.
   ========================================================================== */

.vh-hero-wrap{
  --vh-ink: #1F3A2E;
  --vh-orange: #E98A2B;
  --vh-cream: #F2EADB;
  --vh-design-w: 1536;
  --vh-design-h: 618;

  width:100%;
  font-family: 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--vh-ink);
  -webkit-font-smoothing: antialiased;
}

.vh-hero{
  position:relative;
  width:100%;
  aspect-ratio: var(--vh-design-w) / var(--vh-design-h);
  overflow:hidden;
  background: var(--vh-cream);
  line-height:0;

  /* container query unit fallback: use cqw if supported, else vw  */
  container-type: inline-size;
}

/* Sizing root: every child uses these custom props for fluid scale */
.vh-hero{
  --u: 1cqw;                  /* fluid pixel unit ~ 1% of container width */
}
@supports not (width: 1cqw){
  .vh-hero{ --u: calc(100vw / var(--vh-design-w) * 1px * (1536/100)); }
  /* fallback approximate: 1% of viewport width */
  .vh-hero{ --u: 1vw; }
}

/* --- Background photo (right side) --- */
.vh-photo{
  position:absolute;
  top:0; right:0; bottom:0;
  width: calc(1100 * var(--u) / 15.36);   /* 1100/1536 * 100% */
  width: calc(71.6%);
  height:100%;
  object-fit:cover;
  user-select:none;
  -webkit-user-drag:none;
}

/* Cream-to-transparent fade over the left edge of the photo */
.vh-fade{
  position:absolute;
  top:0; bottom:0;
  left: 28.4%;            /* 436/1536 */
  width: 380px;
  max-width: 30%;
  background: linear-gradient(to right,
    var(--vh-cream) 0%,
    rgba(242,234,219,.85) 35%,
    rgba(242,234,219,0) 100%);
  z-index:2;
  pointer-events:none;
}

/* --- Brush + optional headline overlay --- */
.vh-brush{
  position:absolute;
  left:0;
  top: 4.85%;                   /* 30/618 */
  width: 58.6%;                 /* 900/1536 */
  z-index:3;
  line-height:0;
}
.vh-brush > img{
  display:block;
  width:100%;
  height:auto;
  user-select:none;
  -webkit-user-drag:none;
}
.vh-headline{
  position:absolute;
  left:6.6%;                    /* relative to .vh-brush */
  top:18%;
  right:14%;
  color:#fff;
  font-family:'Anton','Barlow Condensed', Impact, sans-serif;
  line-height:.94;
  text-transform:uppercase;
}
.vh-headline h1{
  margin:0;
  font-size: 5.2cqw;            /* fluid */
  font-weight:400;
  letter-spacing:.005em;
}
.vh-headline .vh-row1{display:block;color:#fff}
.vh-headline .vh-row2{display:block;color:var(--vh-ink);margin-top:.16em}
.vh-headline .vh-tagline{
  margin-top:.6em;
  font-family:'Barlow Condensed', system-ui, sans-serif;
  font-weight:800;
  font-size:1.45cqw;
  letter-spacing:.06em;
  color:#fff;
  line-height:1.1;
}

/* --- Quality circle --- */
.vh-quality{
  position:absolute;
  left:62.5%;                    /* 960/1536 */
  top:11.3%;                     /* 70/618 */
  width:15%;                     /* 230/1536 */
  aspect-ratio:1/1;
  background:var(--vh-ink);
  color:#fff;
  border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  z-index:6;
  box-shadow:0 .8cqw 2cqw rgba(0,0,0,.35);
  line-height:1.15;
  padding:0 1cqw;
  box-sizing:border-box;
}
.vh-quality .vh-leaves{margin-bottom:.4cqw;width:3.6cqw;line-height:0}
.vh-quality .vh-leaves svg{display:block;width:100%;height:auto}
.vh-quality .vh-q1{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:800;font-size:1.3cqw;letter-spacing:.06em;
}
.vh-quality .vh-q2{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:800;font-size:1.7cqw;letter-spacing:.04em;
  color:var(--vh-orange);line-height:1.05;margin-top:.4cqw;
}

/* --- Trust badges row --- */
.vh-trust{
  position:absolute;
  left:3.9%;                    /* 60/1536 */
  top:53.4%;                    /* 330/618 */
  display:flex;
  z-index:5;
  line-height:normal;
}
.vh-trust-item{
  width:13cqw;
  display:flex;flex-direction:column;align-items:center;gap:.9cqw;
  color:var(--vh-ink);
  text-align:center;
  position:relative;
  padding:0 .5cqw;
}
.vh-trust-item + .vh-trust-item::before{
  content:"";
  position:absolute;left:0;top:8%;bottom:8%;width:1px;
  background:rgba(31,58,46,.3);
}
.vh-trust-item .vh-circle{
  width:4.2cqw;height:4.2cqw;border-radius:50%;
  background:var(--vh-ink);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.vh-trust-item .vh-circle svg,
.vh-trust-item .vh-circle i{font-size:2cqw;width:2cqw;height:2cqw}
.vh-trust-item .vh-circle svg path,
.vh-trust-item .vh-circle svg circle{stroke:currentColor;fill:none}
.vh-trust-item .vh-circle i{display:flex;align-items:center;justify-content:center}
.vh-label{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:800;
  font-size:1.3cqw;
  letter-spacing:.06em;
  line-height:1.15;
  text-transform:uppercase;
  white-space:nowrap;
}

/* --- Bottom CTA brush --- */
.vh-cta{
  position:absolute;
  left:0;
  bottom:2.9%;                  /* 18/618 */
  width:49.5%;                  /* 760/1536 */
  z-index:5;
  line-height:0;
  display:block;
}
.vh-cta > img{
  display:block;width:100%;height:auto;
  user-select:none;-webkit-user-drag:none;
}

/* --- Norwegian flag pill --- */
.vh-flag-pill{
  position:absolute;
  right:3.9%;
  bottom:4.85%;                /* 30/618 */
  background:var(--vh-ink);
  color:#fff;
  border-radius:1cqw;
  padding:0 1.4cqw;
  height:4.8cqw;
  display:flex;align-items:center;gap:1cqw;
  z-index:5;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:800;
  font-size:1.3cqw;
  letter-spacing:.04em;
  line-height:1.15;
  text-transform:uppercase;
  white-space:nowrap;
}
.vh-flag{
  width:2.7cqw;height:1.95cqw;border-radius:.2cqw;overflow:hidden;
  background:#BA0C2F;position:relative;flex-shrink:0;
}
.vh-flag::before{content:"";position:absolute;left:36%;top:0;bottom:0;width:14%;background:#fff}
.vh-flag::after {content:"";position:absolute;top:36%;left:0;right:0;height:28%;background:#fff}
.vh-flag-text{display:block}

/* ==========================================================================
   Responsive — Tablet (≤ 1024px)
   The design squeezes naturally via cqw. Below this width we start nudging.
   ========================================================================== */
@media (max-width: 1024px){
  .vh-hero{
    --vh-design-h: 720;            /* allow a little extra height */
  }
  .vh-trust{ top: 48%; }
  .vh-label{ font-size: 1.8cqw; }
  .vh-quality{ left:60%; }
}

/* ==========================================================================
   Responsive — Mobile (≤ 720px)
   Switch to a stacked vertical layout: photo on top, brush+badges below.
   ========================================================================== */
@media (max-width: 720px){
  .vh-hero{
    aspect-ratio:auto;
    height:auto;
    min-height: 540px;
    padding-bottom: 24px;
    display:block;
    container-type: normal;
  }
  .vh-hero{ --u: 1vw; }

  .vh-photo{
    position:relative;
    width:100%;
    height: 56vw;
    max-height: 320px;
    object-position:center 40%;
  }
  .vh-fade{ display:none; }

  .vh-brush{
    position:relative;
    width:100%;
    margin-top:-6vw;
    top:auto; left:auto;
    z-index:4;
  }
  .vh-brush > img{ width:120%; max-width:none; margin-left:-10%; }

  .vh-headline{
    font-size:7vw;
    left:8%; right:8%; top:18%;
  }
  .vh-headline h1{ font-size:8.5vw; }
  .vh-headline .vh-tagline{ font-size:3.4vw; }

  .vh-quality{
    position:absolute;
    width: 26vw;
    left:auto; right:4vw;
    top:42vw;
    box-shadow:0 6px 16px rgba(0,0,0,.35);
    padding:0 3vw;
  }
  .vh-quality .vh-q1{ font-size:3vw; }
  .vh-quality .vh-q2{ font-size:3.8vw; }
  .vh-quality .vh-leaves{ width:8vw }

  .vh-trust{
    position:relative;
    top:auto; left:auto;
    margin:20px 4% 0;
    justify-content:space-between;
    width:92%;
  }
  .vh-trust-item{ width:30%; gap:8px; padding:0 }
  .vh-trust-item .vh-circle{ width:48px; height:48px; }
  .vh-trust-item .vh-circle svg,
  .vh-trust-item .vh-circle i{ width:22px; height:22px; font-size:18px; }
  .vh-label{ font-size:13px; line-height:1.15; white-space:normal; }
  .vh-trust-item + .vh-trust-item::before{ display:none; }

  .vh-cta{
    position:relative;
    width: 96%;
    margin: 16px auto 0;
    left:auto; bottom:auto;
    display:block;
  }
  .vh-cta > img{ width:100%; }

  .vh-flag-pill{
    position:relative;
    right:auto; bottom:auto;
    margin: 16px auto 0;
    width: max-content;
    height:auto;
    padding: 10px 16px;
    border-radius: 10px;
    font-size:14px;
    gap:10px;
  }
  .vh-flag{ width:28px; height:20px; border-radius:2px; }
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print{
  .vh-hero{ break-inside: avoid; }
}