/*
  VS News Studio – Frontend styling
  Netjes, modern, en vooral: consistent.
  (De wereld is chaotisch genoeg zonder dubbele class-namen in je CSS.)
*/

/* ========= Design tokens (scoped, zodat je theme niet gaat huilen) ========= */
.vs-news,
.vs-mag,
.vsn-single-wrap,
.vs-single{
  --vs-max: 1100px;
  --vs-pad: 16px;
  --vs-bg: #ffffff;
  --vs-bg-soft: #f8fafc;
  --vs-border: #e5e7eb;
  --vs-text: #0f172a;
  --vs-muted: #64748b;
  --vs-shadow: 0 10px 30px rgba(15, 23, 42, .08);
  --vs-shadow-sm: 0 6px 18px rgba(15, 23, 42, .06);
  --vs-radius: 16px;
  --vs-radius-sm: 12px;
  --vs-radius-xs: 10px;
  --vs-accent: #e11d48; /* roodachtig, past bij je screenshots */
  --vs-link: #2563eb;
}

/* ========= Container ========= */
.vsn-container,
.vs-news{
  max-width: var(--vs-max);
  margin: 0 auto;
  padding: 0 var(--vs-pad);
}

/* Kleine reset binnen de plugin */
.vs-news a,
.vs-mag a,
.vsn-single-wrap a,
.vs-single a{ text-decoration: none; }

.vs-news h1,.vs-news h2,.vs-news h3,.vs-news h4,
.vs-mag h1,.vs-mag h2,.vs-mag h3,.vs-mag h4,
.vsn-single-wrap h1,.vsn-single-wrap h2,.vsn-single-wrap h3,.vsn-single-wrap h4,
.vs-single h1,.vs-single h2,.vs-single h3,.vs-single h4{
  color: var(--vs-text);
  line-height: 1.15;
}

/* ========= MAGAZINE LAYOUT ========= */
.vs-mag{ color: var(--vs-text); }

.vs-mag-top{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
  margin: 10px 0 26px;
}

.vs-mag-hero{
  overflow: hidden;
  border-radius: var(--vs-radius);
  box-shadow: var(--vs-shadow);
  background: var(--vs-bg);
}

.vs-mag-hero a{ display: block; color: inherit; }

.vs-mag-hero-img{ position: relative; height: 340px; }
.vs-mag-hero-img img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* subtiele overlay voor leesbaarheid */
.vs-mag-hero-img::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,23,42,0) 52%, rgba(15,23,42,.55) 100%);
}

.vs-mag-hero-bar{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  z-index: 1;
}

.vs-mag-hero-bar h2{
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vs-mag-read{
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  opacity: .95;
  white-space: nowrap;
}

.vs-mag-side{ display: flex; flex-direction: column; gap: 14px; }

.vs-mag-mini{
  background: var(--vs-bg);
  border: 1px solid var(--vs-border);
  border-radius: var(--vs-radius-sm);
  box-shadow: var(--vs-shadow-sm);
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.vs-mag-mini a{ display: grid; grid-template-columns: 120px 1fr; gap: 12px; color: inherit; }

.vs-mag-mini-thumb img{
  width: 120px;
  height: 96px;
  object-fit: cover;
  display: block;
}

.vs-mag-mini-body{ padding: 10px 12px 10px 0; }
.vs-mag-mini-body h4{
  margin: 0;
  font-size: 1rem;
  font-weight: 750;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vs-mag-mini-body .vs-mag-read{ color: var(--vs-link); margin-top: 6px; display: inline-block; }

.vs-mag-mini:hover{ transform: translateY(-1px); box-shadow: var(--vs-shadow); background: var(--vs-bg-soft); }

/* Zie ook */
.vs-mag-seealso{ margin-top: 8px; }
.vs-mag-seealso h3{
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--vs-accent);
}

.vs-list-cards,
.vsn-list-cards{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.vs-list-card,
.vsn-list-card{
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: 12px;
  background: var(--vs-bg);
  border: 1px solid var(--vs-border);
  border-radius: var(--vs-radius-sm);
  box-shadow: var(--vs-shadow-sm);
  padding: 10px 12px;
  color: inherit;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.vs-list-card .thumb img,
.vsn-list-card .thumb img{
  width: 72px;
  height: 54px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}


/* ========= Missing image placeholders ========= */
.vs-thumb,
.vs-mini-thumb,
.vsn-list-card .thumb,
.vs-mag-hero-img,
.vs-mag-mini-thumb{
  overflow: hidden;
}

.vs-thumb.is-noimg,
.vs-mini-thumb.is-noimg,
.vsn-list-card .thumb.is-noimg,
.vs-mag-hero-img.is-noimg,
.vs-mag-mini-thumb.is-noimg{
  position: relative;
  background:
    radial-gradient(900px 450px at 20% 20%, rgba(37, 99, 235, .18), transparent 60%),
    radial-gradient(700px 380px at 80% 30%, rgba(225, 29, 72, .14), transparent 55%),
    linear-gradient(180deg, rgba(15, 23, 42, .06), rgba(15, 23, 42, .02));
  border: 1px dashed rgba(15, 23, 42, .18);
}

.vsn-list-card .thumb.is-noimg{
  width: 72px;
  height: 54px;
  border-radius: 10px;
}

/* List cards zonder afbeelding: maak 'm compact (geen lege thumbnail-kolom) */
.vs-list-card.is-noimg,
.vsn-list-card.is-noimg{
  grid-template-columns: 1fr auto;
}

.vs-list-card.is-noimg .thumb,
.vsn-list-card.is-noimg .thumb{
  display: none;
}

.vs-mini-thumb.is-noimg{
  width: 92px;
  height: 92px;
  border-radius: 14px;
  display: inline-block;
}

/* grid layout thumb placeholder (als je grid gebruikt) */
.vs-thumb.is-noimg{
  aspect-ratio: 16 / 9;
  border-radius: 14px;
}

/* images inside thumbs */

.vs-mini-thumb img{
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

.vs-thumb img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}

/* magazine thumbs hebben al hun eigen sizing via bestaande CSS */

.vs-list-card .txt strong,
.vsn-list-card .txt strong{
  display: block;
  font-weight: 750;
  line-height: 1.2;
}

.vs-list-card .txt em,
.vsn-list-card .txt em{
  display: block;
  font-style: normal;
  color: var(--vs-muted);
  font-size: .85rem;
  margin-top: 2px;
}

.vs-list-card .arrow,
.vsn-list-card .arrow{
  color: var(--vs-link);
  font-weight: 900;
  opacity: .9;
}

.vs-list-card:hover,
.vsn-list-card:hover{
  transform: translateY(-1px);
  box-shadow: var(--vs-shadow);
  background: var(--vs-bg-soft);
}

/* Pagination */
.vs-mag-pagination ul,
.vs-pagination ul{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.vs-mag-pagination a, .vs-mag-pagination span,
.vs-pagination a, .vs-pagination span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--vs-border);
  border-radius: 12px;
  background: var(--vs-bg);
  color: var(--vs-text);
}

.vs-mag-pagination .current,
.vs-pagination .current{
  border-color: rgba(225,29,72,.35);
  box-shadow: 0 0 0 3px rgba(225,29,72,.12);
  font-weight: 800;
}

/* ========= SINGLE (plugin template: vsn-*) ========= */
.vsn-single-wrap{ 
  margin: 28px auto; 
  color: var(--vs-text);
  /* iets smaller dan de algemene container, leest rustiger */
  max-width: 980px;
}

/* Houd content/metadata mooi gecentreerd onder de hero */
.vsn-single-meta,
.vsn-single-card,
.vsn-single-seealso{
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.vsn-single-hero{
  position: relative;
  border-radius: var(--vs-radius);
  overflow: hidden;
  box-shadow: var(--vs-shadow);
  background: var(--vs-bg);
  margin: 6px 0 14px;
}

.vsn-single-hero img{ width: 100%; height: 380px; object-fit: cover; display: block; }

/* Geen titel-overlay meer: afbeelding is puur beeld (en dus altijd mooi leesbaar erboven/eronder). */
.vsn-single-hero::after{ display:none; }

.vsn-single-title{
  margin: 0;
  font-size: clamp(1.55rem, 1.1rem + 1.4vw, 2.15rem);
  font-weight: 900;
  color: var(--vs-text);
  text-shadow: none;
}

.vsn-single-dek{
  margin: 8px 0 0;
  max-width: 70ch;
  font-size: 1.02rem;
  line-height: 1.55;
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
}

.vsn-single-dek--plain{
  color: var(--vs-muted);
  text-shadow: none;
  margin-top: 10px;
}

.vsn-single-head{ margin: 12px 0; }

.vsn-single-meta,
.vs-single-meta{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 16px;
  color: var(--vs-muted);
}

/* Meta als "pills" zodat het minder los oogt */
.vsn-single-meta time{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,.9);
  background: var(--vs-bg);
  font-size: 13px;
}

.vsn-single-meta .vsn-dot{ display:none; }

.vsn-dot{ opacity: .6; }

.vsn-btn,
.vs-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--vs-border);
  border-radius: 12px;
  padding: 9px 12px;
  background: var(--vs-bg);
  color: var(--vs-text);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.vsn-btn:hover,
.vs-btn:hover{ transform: translateY(-1px); box-shadow: var(--vs-shadow-sm); background: var(--vs-bg-soft); }

.vsn-btn--primary{ background: var(--vs-link); color: #fff; border-color: var(--vs-link); }
.vsn-btn--primary:hover{ background: var(--vs-link); }

.vsn-single-card,
.vs-single{
  background: var(--vs-bg);
  border: 1px solid var(--vs-border);
  border-radius: var(--vs-radius);
  box-shadow: var(--vs-shadow-sm);
  overflow: hidden;
}

.vsn-single-content{
  padding: 16px 18px 6px;
  font-size: 1.06rem;
  line-height: 1.75;
}

.vsn-single-content p{ margin: 0 0 1em; }
.vsn-single-content h2{ margin: 1.25em 0 .45em; font-size: 1.35rem; }
.vsn-single-content h3{ margin: 1.15em 0 .45em; font-size: 1.15rem; }
.vsn-single-content hr{ border: 0; border-top: 1px solid rgba(226,232,240,.9); margin: 1.5em 0; }

.vsn-single-content blockquote{
  margin: 1.1em 0;
  padding: 12px 14px;
  border-left: 4px solid rgba(225,29,72,.35);
  background: var(--vs-bg-soft);
  border-radius: 12px;
  color: rgba(15,23,42,.86);
}

.vsn-single-content a{ color: var(--vs-link); }
.vsn-single-content a:hover{ text-decoration: underline; }
.vsn-single-content img{ max-width: 100%; height: auto; border-radius: 12px; }
.vsn-single-content ul, .vsn-single-content ol{ margin: 0 0 1em 1.25em; }

/* Share block (onder artikel) */
.vsn-share-block,
.vs-share-block{
  margin: 26px 0 0;
  padding: 18px 18px;
  border-radius: var(--vs-radius);
  background: linear-gradient(180deg, rgba(15,23,42,.03), rgba(15,23,42,.01));
  border: 1px solid rgba(15,23,42,.08);
}

.vsn-share-summary,
.vs-share-summary{
  font-size: 15px;
  line-height: 1.6;
  color: #334155;
  margin: 0 0 12px;
}

.vsn-share-summary p,
.vs-share-summary p{ margin: 0; }

.vsn-share-actions,
.vs-share-actions{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.vsn-share-label,
.vs-share-label{
  font-size: 13px;
  font-weight: 700;
  opacity: .75;
  margin-right: 2px;
}

.vsn-share-btn,
.vs-share-btn{
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.15);
  background: rgba(255,255,255,.7);
  color: inherit;
  cursor: pointer;
}

.vsn-share-btn:hover,
.vs-share-btn:hover{
  background: rgba(15,23,42,.05);
}

.vsn-share-copied,
.vs-share-copied{
  font-size: 12px;
  font-weight: 700;
  opacity: .7;
}

.vsn-single-nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(226,232,240,.8);
}

.vsn-single-seealso{ margin: 22px 0; }
.vsn-single-seealso h3{ margin: 0 0 12px; font-weight: 900; color: var(--vs-accent); }

/* ========= SINGLE (inject via the_content: vs-*) ========= */
.vs-single{ margin: 18px 0; }

.vs-single-hero{ position: relative; overflow: hidden; border-radius: var(--vs-radius); box-shadow: var(--vs-shadow); }
.vs-single-hero img{ width: 100%; height: 380px; object-fit: cover; display: block; }

.vs-single-head{ margin: 14px 0; }
.vs-single-title{ margin: 0; font-size: 1.9rem; font-weight: 900; color: var(--vs-text); }

.vs-single-content{ padding: 16px 0 0; line-height: 1.75; }
.vs-single-content p{ margin: 0 0 1em; }

/* ========= Responsiveness ========= */
@media (max-width: 900px){
  .vs-mag-top{ grid-template-columns: 1fr; }
  .vs-mag-hero-img{ height: 260px; }
  .vsn-single-hero img,
  .vs-single-hero img{ height: 240px; }
  .vs-mag-mini a{ grid-template-columns: 96px 1fr; }
  .vs-mag-mini-thumb img{ width: 96px; height: 78px; }
}