/* =========================================================
   VNN verhalen: kaarten, verhaalrijen, uitgelicht, nieuwste
   artikelen en de speelse laag (golven, reveal, hover).
   Bouwt voort op de --vnn- en --vnnh-tokens uit de Soledad
   custom CSS.
   ========================================================= */

:root{
  --vnns-ink:var(--vnnh-ink,#1d2a3a);
  --vnns-ink-soft:var(--vnnh-ink-soft,#5b6879);
  --vnns-radius:var(--vnnh-radius,14px);
  --vnns-shadow:var(--vnnh-shadow,0 4px 16px rgba(0,30,96,.06));
  --vnns-shadow-hover:var(--vnnh-shadow-hover,0 14px 30px rgba(0,30,96,.13));
  --vnns-accent:var(--vnn-orange,#ff4b00);
  --vnns-blue:var(--vnn-blue,#001e60);
  --vnns-ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Kaart ---------- */

.vnns-card{
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:var(--vnns-radius);
  background:#fff;
  box-shadow:var(--vnns-shadow);
  color:var(--vnns-ink);
  text-decoration:none;
  transition:transform .35s var(--vnns-ease),box-shadow .35s var(--vnns-ease);
}
.vnns-card:hover,
.vnns-card:focus-visible{
  transform:translateY(-4px) rotate(-.4deg);
  box-shadow:var(--vnns-shadow-hover);
  color:var(--vnns-ink);
}
.vnns-card:focus-visible{outline:3px solid var(--vnns-accent);outline-offset:3px}

.vnns-card__media{
  display:block;
  overflow:hidden;
  aspect-ratio:4/3;
  background:linear-gradient(135deg,#dbe6f3,#f3f6f9);
}
.vnns-card .vnns-card__img{
  display:block;
  width:100%;
  height:100%;
  margin:0;
  object-fit:cover;
  transition:transform .8s var(--vnns-ease);
}
.vnns-card:hover .vnns-card__img{transform:scale(1.07)}

.vnns-card__body{
  display:flex;
  flex:1;
  flex-direction:column;
  gap:.35rem;
  padding:1rem 1.1rem 1.2rem;
}
.vnns-card__label{
  color:var(--vnns-accent);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.vnns-card__title{
  font-size:1.08rem;
  font-weight:700;
  line-height:1.3;
}
.vnns-card__text{
  display:-webkit-box;
  overflow:hidden;
  color:var(--vnns-ink-soft);
  font-size:.92rem;
  line-height:1.5;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}
.vnns-card__date{
  margin-top:auto;
  padding-top:.35rem;
  color:var(--vnns-ink-soft);
  font-size:.8rem;
}

/* Grote kaart: beeld met tekst eroverheen. */
.vnns-card--lead{min-height:420px;color:#fff}
.vnns-card--lead .vnns-card__media{position:absolute;inset:0;aspect-ratio:auto}
.vnns-card--lead::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,20,60,0) 30%,rgba(0,20,60,.82) 100%);
}
.vnns-card--lead .vnns-card__body{position:relative;z-index:1;justify-content:flex-end;padding:1.6rem}
.vnns-card--lead .vnns-card__label{color:#ffd2bd}
.vnns-card--lead .vnns-card__title{font-size:clamp(1.35rem,2.4vw,1.8rem)}
.vnns-card--lead .vnns-card__text{color:rgba(255,255,255,.88);-webkit-line-clamp:3}
.vnns-card--lead:hover,.vnns-card--lead:focus-visible{color:#fff}

/* ---------- Verhaalrij ---------- */

.vnns-rail-wrap{position:relative;margin-top:1.5rem}
.vnns-rail{
  display:grid;
  grid-auto-columns:min(78%,290px);
  grid-auto-flow:column;
  gap:20px;
  margin:0 -12px;
  padding:12px 12px 22px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-padding:12px;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  scrollbar-color:#c9d4e2 transparent;
}
.vnns-rail > .vnns-card{scroll-snap-align:start}
.vnns-rail:focus-visible{outline:2px solid var(--vnns-accent);outline-offset:2px;border-radius:var(--vnns-radius)}

/* Zachte rand rechts: er is meer. */
.vnns-rail-wrap::after{
  content:"";
  position:absolute;
  top:0;
  right:-12px;
  bottom:22px;
  width:48px;
  background:linear-gradient(90deg,transparent,var(--vnns-fade,#fff));
  pointer-events:none;
  transition:opacity .3s;
}
.vnns-rail-wrap.is-end::after{opacity:0}
.vnn-home-band--soft{--vnns-fade:var(--vnnh-band-soft,#f3f6f9)}
.vnn-home-band--sand{--vnns-fade:var(--vnnh-band-sand,#fcf6eb)}

.vnns-rail-nav{
  position:absolute;
  top:-3.6rem;
  right:0;
  display:flex;
  gap:.5rem;
}
.vnns-rail-nav[hidden]{display:none}
.vnns-rail-btn{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid var(--vnnh-hairline,#e2e8f0);
  border-radius:50%;
  background:#fff;
  color:var(--vnns-blue);
  cursor:pointer;
  transition:background .2s,color .2s,transform .2s,opacity .2s;
}
.vnns-rail-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vnns-rail-btn:hover:not(:disabled){background:var(--vnns-blue);color:#fff;transform:scale(1.06)}
.vnns-rail-btn:disabled{opacity:.35;cursor:default}

/* ---------- Uitgelicht ---------- */

.vnns-feature{
  display:grid;
  grid-template-columns:1.35fr 1fr 1fr;
  grid-template-rows:auto auto;
  gap:20px;
  margin-top:1.5rem;
}
.vnns-feature > .vnns-card--lead{grid-row:span 2}
.vnns-feature > .vnns-card--rail .vnns-card__media{aspect-ratio:16/10}
.vnns-feature > .vnns-card--rail .vnns-card__text{-webkit-line-clamp:2}

/* ---------- Nieuwste artikelen ---------- */

.vnns-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin-top:1.5rem;
}
.vnns-grid .vnns-card__media{aspect-ratio:16/10}

/* ---------- Sectiekop met onderwerp ---------- */

:is(.entry-content,.penci-entry-content) .vnns-topic-head{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:.25rem;
  max-width:760px;
  padding-right:110px;
}
:is(.entry-content,.penci-entry-content) .vnns-topic-head h2{margin:0}
:is(.entry-content,.penci-entry-content) .vnns-topic-head p{margin:.6rem 0 0;color:var(--vnns-ink-soft);font-size:1.02rem;line-height:1.65}
:is(.entry-content,.penci-entry-content) .vnns-topic-head .vnns-kicker{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin:0 0 .4rem;
  color:var(--vnns-accent);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.vnns-kicker svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:is(.entry-content,.penci-entry-content) .vnns-topic-more{margin-top:.4rem}
:is(.entry-content,.penci-entry-content) .vnns-topic-more a{
  color:var(--vnns-blue);
  font-weight:700;
  text-decoration:none;
  border-bottom:2px solid var(--vnns-accent);
}
:is(.entry-content,.penci-entry-content) .vnns-topic-more a:hover{color:var(--vnns-accent)}

/* ---------- Onderwerpchips ---------- */

:is(.entry-content,.penci-entry-content) .vnns-chips{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin:1.25rem 0 0;
  padding:0;
  list-style:none;
}
:is(.entry-content,.penci-entry-content) .vnns-chips li{margin:0;padding:0;list-style:none}
:is(.entry-content,.penci-entry-content) .vnns-chips li::before{display:none}
:is(.entry-content,.penci-entry-content) .vnns-chips a{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.55rem 1rem;
  border:1px solid var(--vnnh-hairline,#e2e8f0);
  border-radius:999px;
  background:#fff;
  color:var(--vnns-blue);
  font-size:.92rem;
  font-weight:600;
  text-decoration:none;
  transition:transform .25s var(--vnns-ease),background .2s,color .2s,border-color .2s;
}
.vnns-chips a span{font-size:1.1rem;line-height:1}
:is(.entry-content,.penci-entry-content) .vnns-chips a:hover{
  transform:translateY(-2px);
  border-color:var(--vnns-blue);
  background:var(--vnns-blue);
  color:#fff;
}

/* ---------- Golfranden aan de banden ---------- */

:is(.entry-content,.penci-entry-content) .vnn-home-band.vnns-wavy{position:relative}
:is(.entry-content,.penci-entry-content) .vnn-home-band.vnns-wavy::before{
  content:"";
  position:absolute;
  top:-23px;
  left:0;
  right:0;
  height:24px;
  background:inherit;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24'%3E%3Cpath d='M0 14 C40 2 80 2 120 14 S200 26 240 14 V24 H0Z'/%3E%3C/svg%3E") 0 0/240px 24px repeat-x;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24'%3E%3Cpath d='M0 14 C40 2 80 2 120 14 S200 26 240 14 V24 H0Z'/%3E%3C/svg%3E") 0 0/240px 24px repeat-x;
  pointer-events:none;
}

/* Hero: heel langzaam inzoomen, zoals een camera die over het fjord kijkt. */
:is(.entry-content,.penci-entry-content) .vnn-home-hero .wp-block-cover__image-background{
  animation:vnnsKen 28s ease-out both;
  transform-origin:62% 48%;
}
@keyframes vnnsKen{from{transform:scale(1.12)}to{transform:scale(1)}}

.vnn-home-hero .vnn-home-hero__inner > *{animation:vnnsRise .9s var(--vnns-ease) both}
.vnn-home-hero .vnn-home-hero__inner > :nth-child(2){animation-delay:.12s}
.vnn-home-hero .vnn-home-hero__inner > :nth-child(3){animation-delay:.24s}
.vnn-home-hero .vnn-home-hero__inner > :nth-child(4){animation-delay:.36s}
@keyframes vnnsRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- Reveal bij scrollen ---------- */

.vnn-js [data-vnn-reveal]:not(.is-in){
  opacity:0;
  transform:translateY(26px);
}
.vnn-js [data-vnn-reveal]{
  transition:opacity .7s var(--vnns-ease),transform .7s var(--vnns-ease),box-shadow .35s var(--vnns-ease);
  transition-delay:calc(min(var(--i,0),6) * 80ms);
}
.vnn-js [data-vnn-reveal].is-in:hover{transition-delay:0s}

/* ---------- Responsief ---------- */

@media (max-width:900px){
  .vnns-feature{grid-template-columns:1fr 1fr}
  .vnns-feature > .vnns-card--lead{grid-column:1/-1;grid-row:auto;min-height:340px}
  .vnns-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  :is(.entry-content,.penci-entry-content) .vnns-topic-head{padding-right:0}
  .vnns-rail-nav{display:none}
  .vnns-feature{grid-template-columns:1fr}
  .vnns-grid{grid-template-columns:1fr}
  .vnns-card--lead{min-height:300px}
}

/* ---------- Minder beweging ---------- */

@media (prefers-reduced-motion:reduce){
  .vnns-card,.vnns-card .vnns-card__img,.vnns-chips a,.vnns-rail-btn,.vnno-card,.vnno-cta svg{transition:none}
  .vnns-card:hover,.vnns-card:focus-visible{transform:none}
  .vnns-card:hover .vnns-card__img{transform:none}
  .vnno-card:hover{transform:none}
  :is(.entry-content,.penci-entry-content) .vnn-home-band.vnns-wavy::before,
  :is(.entry-content,.penci-entry-content) .vnn-home-hero .wp-block-cover__image-background,
  .vnn-home-hero .vnn-home-hero__inner > *{animation:none}
  .vnn-js [data-vnn-reveal]:not(.is-in){opacity:1;transform:none}
}

/* ---------- Aanbiederskaart (vnn_offer) ---------- */
/* Vervangt de vc_row/vc_column-blokken met logo, tekst en knop
   op de type-reis-pagina's. */

:is(.entry-content,.penci-entry-content) .vnno-group{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin:1.5rem 0 2rem;
}
:is(.entry-content,.penci-entry-content) .vnno-card{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:0;
  overflow:hidden;
  border:1px solid var(--vnnh-hairline,#e2e8f0);
  border-radius:var(--vnns-radius,14px);
  background:#fff;
  box-shadow:var(--vnns-shadow,0 4px 16px rgba(0,30,96,.06));
  transition:box-shadow .3s var(--vnns-ease,ease),transform .3s var(--vnns-ease,ease);
}
:is(.entry-content,.penci-entry-content) .vnno-card:hover{
  box-shadow:var(--vnns-shadow-hover,0 14px 30px rgba(0,30,96,.13));
  transform:translateY(-2px);
}
:is(.entry-content,.penci-entry-content) .vnno-media{
  display:block;
  background:var(--vnnh-band-soft,#f3f6f9);
}
:is(.entry-content,.penci-entry-content) .vnno-img{
  display:block;
  width:100%;
  height:100%;
  margin:0;
  object-fit:contain;
  padding:14px;
  box-sizing:border-box;
}
:is(.entry-content,.penci-entry-content) .vnno-body{
  padding:1.1rem 1.3rem;
}
:is(.entry-content,.penci-entry-content) .vnno-title{
  margin:0 0 .5rem;
  color:var(--vnns-ink,#1d2a3a);
  font-size:1.08rem;
}
:is(.entry-content,.penci-entry-content) .vnno-text{
  color:var(--vnns-ink-soft,#5b6879);
  font-size:.95rem;
  line-height:1.6;
}
:is(.entry-content,.penci-entry-content) .vnno-text p{margin:0 0 .6rem}
:is(.entry-content,.penci-entry-content) .vnno-text p:last-child{margin-bottom:0}
:is(.entry-content,.penci-entry-content) .vnno-text a{color:var(--vnns-blue,#001e60);font-weight:600}
:is(.entry-content,.penci-entry-content) .vnno-cta{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  margin-top:.7rem;
  color:var(--vnns-accent,#ff4b00);
  font-weight:700;
  font-size:.92rem;
  text-decoration:none;
}
:is(.entry-content,.penci-entry-content) .vnno-cta svg{
  width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .25s var(--vnns-ease,ease);
}
:is(.entry-content,.penci-entry-content) .vnno-card:hover .vnno-cta svg{transform:translateX(4px)}

@media (max-width:600px){
  :is(.entry-content,.penci-entry-content) .vnno-card{grid-template-columns:1fr}
  :is(.entry-content,.penci-entry-content) .vnno-media{aspect-ratio:16/9}
  :is(.entry-content,.penci-entry-content) .vnno-img{padding:0;object-fit:cover}
}

/* ---------- Archiefkop (categoriepagina's zoals /type-reis/) ---------- */

.penci-category-description-inner .vnns-topic-head{padding-right:0;max-width:none}
.penci-category-description-inner .vnns-topic-head p{max-width:700px}

/* Grote kaart: tekstkleur vastzetten tegen de linkkleur van het thema. */
:is(.entry-content,.penci-entry-content) a.vnns-card--lead,
:is(.entry-content,.penci-entry-content) a.vnns-card--lead .vnns-card__title{color:#fff}
:is(.entry-content,.penci-entry-content) a.vnns-card--lead .vnns-card__text{color:rgba(255,255,255,.9)}
:is(.entry-content,.penci-entry-content) a.vnns-card--lead .vnns-card__label{color:#ffd2bd}
:is(.entry-content,.penci-entry-content) a.vnns-card--lead::after{background:linear-gradient(180deg,rgba(0,20,60,0) 25%,rgba(0,20,60,.88) 100%)}