/* VVZ Redactieportaal 2.7.0 — artikelpagina in één kolom (nieuws, wedstrijdverslag, activiteit).
   Zelfstandig: de plugin bouwt titel, kop, foto, tekst, galerij en links zelf op, onafhankelijk van het thema. */
@font-face{font-family:"VVZ Sans";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"VVZ Sans";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"VVZ Sans";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/inter-latin-700-normal.woff2) format("woff2")}

/* De thematitel verdwijnt: de plugin toont de titel zelf in de kop (article.js vangt afwijkende thema's af). */
.vvz-article-page h1.entry-title:not(.vvz-art-title),
.vvz-article-page h1.wp-block-post-title,
.vvz-hide-title{display:none!important}

.vvz-page,.vvz-page *,.vvz-art,.vvz-art *{box-sizing:border-box}
.vvz-page{
  --g:#0a7c3e; --g-dark:#06502b; --ink:#17281f; --text:#2c4337; --muted:#6b7d72; --line:#e3e8e5;
  display:block; width:100%; max-width:1040px; margin:0 auto 40px; padding:0 16px; text-align:left; color:var(--ink);
  font-family:"VVZ Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.vvz-page--side{display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,320px); gap:clamp(24px,4vw,48px); align-items:start}
.vvz-page-main{min-width:0}
.vvz-page :where(p,blockquote,figure,h1,h2){margin:0; padding:0}
.vvz-page svg{width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* Kop */
.vvz-art{display:block; padding:0 0 26px; border-bottom:1px solid var(--line)}
.vvz-art-bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 16px}
.vvz-art-label{font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--g); line-height:1.3}
.vvz-art-date{display:inline-flex; align-items:center; gap:7px; font-size:13px; line-height:1.3; color:var(--muted)}
.vvz-art-title{margin-top:14px; font-size:clamp(28px,4.4vw,44px); line-height:1.12; font-weight:700; letter-spacing:-.02em; color:var(--ink); overflow-wrap:anywhere; text-align:left}

/* Wedstrijdverslag: uitslag */
.vvz-art-score{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:clamp(12px,3vw,28px); margin-top:26px; padding:20px clamp(10px,3vw,24px); border-radius:14px; background:#f3f8f5}
.vvz-art-team{font-size:clamp(16px,2.6vw,22px); line-height:1.25; font-weight:700; color:var(--ink); overflow-wrap:anywhere}
.vvz-art-team--home{text-align:right}
.vvz-art-team--away{text-align:left}
.vvz-art-result{display:inline-flex; align-items:center; gap:14px; font-size:clamp(40px,7vw,60px); line-height:1.1; font-weight:700; letter-spacing:-.02em; color:var(--g); white-space:nowrap; font-variant-numeric:tabular-nums}
.vvz-art-result i{font-style:normal; font-weight:400; color:#b3c6ba}

/* Smallere kolom (staande foto): iets compacter scorebord */
.vvz-page--side .vvz-art-score{gap:clamp(8px,1.6vw,18px); padding-left:14px; padding-right:14px}
.vvz-page--side .vvz-art-team{font-size:clamp(15px,1.8vw,19px)}
.vvz-page--side .vvz-art-result{font-size:clamp(36px,5vw,48px); gap:10px}

/* Activiteit */
.vvz-art-info{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px 12px; margin-top:24px; padding:18px clamp(10px,3vw,24px); border-radius:14px; background:#f3f8f5}
.vvz-art-info-item{display:flex; align-items:flex-start; gap:12px}
.vvz-art-info-ico{display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:50%; border:1px solid #d6e3db; background:#fff; color:var(--g)}
.vvz-art-info-ico svg{width:20px; height:20px}
.vvz-art-info-item b{display:block; margin:0 0 3px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.vvz-art-info-item div>span{display:block; font-size:16px; line-height:1.4; font-weight:600; color:var(--ink); overflow-wrap:anywhere}
.vvz-art-cta{margin-top:16px}
.vvz-page a.vvz-art-button{display:inline-flex; align-items:center; gap:10px; padding:11px 20px; border:2px solid var(--g); border-radius:8px; background:transparent; color:var(--g)!important; font-size:16px; font-weight:700; line-height:1.2; text-decoration:none!important; transition:background .15s,color .15s}
.vvz-page a.vvz-art-button:hover,.vvz-page a.vvz-art-button:focus-visible{background:var(--g); color:#fff!important}

/* Inleiding en quote */
.vvz-art-lead{margin-top:24px; max-width:760px; font-size:clamp(18px,2.2vw,21px); line-height:1.55; font-weight:600; color:#1f3a2c}
.vvz-art-quote{margin-top:20px; max-width:760px; padding:0 0 0 20px; border:0; border-left:3px solid var(--g); font-size:clamp(16px,2vw,18px); line-height:1.6; font-style:italic; color:#355645}

/* Hoofdfoto */
.vvz-photo img{display:block; width:100%; height:auto; border-radius:12px}
.vvz-photo--wide{margin-top:28px}
.vvz-page-aside{position:sticky; top:24px}

/* Berichttekst: groter en prettig leesbaar */
.vvz-body{margin-top:28px; font-size:clamp(17px,1.5vw,18px); line-height:1.75; color:var(--text)}
.vvz-body>*{max-width:760px}
.vvz-body :where(p,ul,ol){margin:0 0 1.15em}
.vvz-body :where(h2,h3){margin:1.6em 0 .6em; line-height:1.25; color:var(--ink)}
.vvz-body a{color:var(--g-dark); text-underline-offset:3px}
.vvz-body img{max-width:100%; height:auto; border-radius:10px}
.vvz-body>.vvz-gallery,.vvz-body>.wp-block-gallery{max-width:none}

/* Fotogalerij: gelijke tegels */
.vvz-gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; margin:32px 0 8px}
.vvz-gallery-item{display:block; aspect-ratio:4/3; overflow:hidden; border-radius:10px; background:#eef3f0; line-height:0}
.vvz-gallery-img{display:block; width:100%; height:100%; object-fit:cover; border-radius:0!important; transition:transform .25s ease}
.vvz-gallery-item:hover .vvz-gallery-img,.vvz-gallery-item:focus-visible .vvz-gallery-img{transform:scale(1.04)}
.vvz-gallery-item:focus-visible{outline:3px solid var(--g); outline-offset:2px}

/* Lightbox */
.vvz-lb{position:fixed; inset:0; z-index:999999; display:none; align-items:center; justify-content:center; background:rgba(8,20,13,.92)}
.vvz-lb.is-open{display:flex}
.vvz-lb img{max-width:min(94vw,1400px); max-height:88vh; width:auto; height:auto; border-radius:6px; box-shadow:0 10px 40px rgba(0,0,0,.5)}
.vvz-lb button{position:absolute; border:0; background:rgba(255,255,255,.12); color:#fff; width:46px; height:46px; border-radius:50%; font-size:24px; line-height:1; cursor:pointer}
.vvz-lb button:hover,.vvz-lb button:focus-visible{background:rgba(255,255,255,.28)}
.vvz-lb-close{top:16px; right:16px}
.vvz-lb-prev{left:16px; top:50%; transform:translateY(-50%)}
.vvz-lb-next{right:16px; top:50%; transform:translateY(-50%)}
.vvz-lb-count{position:absolute; bottom:16px; left:0; right:0; text-align:center; color:#cfe3d6; font:13px "VVZ Sans",system-ui,sans-serif}

/* Gerelateerde links */
.vvz-related-links{max-width:760px; margin:36px 0 0; padding:20px clamp(16px,3vw,24px); border:1px solid #d3e6da; border-left:4px solid #0a7c3e; border-radius:12px; background:#f6fbf8; text-align:left}
.vvz-related-links h2{margin:0 0 12px; color:#06502b; font-size:1.2rem; line-height:1.3}
.vvz-related-links ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.vvz-related-links li{display:flex; flex-wrap:wrap; align-items:center; gap:4px 11px; margin:0; padding:0}
.vvz-related-link-icon{display:inline-flex; flex:0 0 72px; min-width:72px; min-height:26px; align-items:center; justify-content:center; border-radius:999px; background:#dff4e8; color:#087a43; font-size:10px; font-weight:700; letter-spacing:.06em}
.vvz-related-links a{color:#0b5e35; text-decoration:underline; text-underline-offset:3px; font-weight:600}
.vvz-related-links a:hover{color:#0a7c3e}
.vvz-related-link-type{color:#557466; font-size:.92em}

@media(max-width:820px){
  .vvz-page--side{grid-template-columns:1fr; gap:24px}
  .vvz-page-aside{position:static}
}
@media(max-width:640px){
  .vvz-page{padding:0 12px; margin-bottom:28px}
  .vvz-art{padding-bottom:22px}
  .vvz-art-score{grid-template-columns:1fr; justify-items:center; gap:6px; padding:18px 12px}
  .vvz-art-team--home,.vvz-art-team--away{text-align:center}
  .vvz-art-team--home{order:1}
  .vvz-art-result{order:2}
  .vvz-art-team--away{order:3}
  .vvz-art-info{grid-template-columns:1fr}
  .vvz-gallery{grid-template-columns:repeat(2,1fr); gap:8px}
  .vvz-related-links li{align-items:flex-start}
  .vvz-lb button{width:40px; height:40px}
}