/* Articles, media frames, share bar and the gallery viewer.
   Self-contained (not Tailwind) because the site's Tailwind CSS is pre-built. */

/* ── Media frame: the WHOLE image is always visible, on a blurred copy of
   itself so portrait, square and wide pictures all sit neatly ─────────── */
.vz-frame { position: relative; overflow: hidden; background: #0b1220; display: flex;
  align-items: center; justify-content: center; isolation: isolate; }
.vz-frame::before { content: ""; position: absolute; inset: -40px; z-index: -1; background-image: var(--vz-img);
  background-size: cover; background-position: center; filter: blur(30px) saturate(1.15) brightness(.55);
  transform: scale(1.1); }
.vz-frame > img, .vz-frame > video { display: block; max-width: 100%; height: auto; object-fit: contain; }
.vz-frame--hero { border-radius: 1rem; min-height: 240px; box-shadow: 0 20px 45px -20px rgba(15, 23, 42, .45); }
.vz-frame--hero > img, .vz-frame--hero > video { max-height: 72vh; width: auto; }
.vz-frame--card { aspect-ratio: 16 / 10; }
.vz-frame--card > img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s ease; }
.vz-frame--wide { aspect-ratio: 21 / 9; }
a:hover .vz-frame--card > img, .vz-card:hover .vz-frame--card > img { transform: scale(1.03); }
.vz-figcaption { margin-top: .6rem; font-size: .875rem; color: #6b7280; text-align: center; }

/* ── Article page ────────────────────────────────────────────────────── */
.vz-article-page { background: #f8fafc; padding: 2.5rem 1rem 4rem; }
.vz-article-head { max-width: 46rem; margin: 0 auto 2rem; text-align: center; }
.vz-eyebrow { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #1d4ed8; background: #dbeafe; border-radius: 999px; padding: .3rem .8rem; margin-bottom: 1rem; text-decoration: none; }
.vz-article-title { font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.15; font-weight: 800; color: #0f172a; margin: 0 0 1rem; }
.vz-standfirst { font-size: 1.2rem; line-height: 1.6; color: #475569; margin: 0 auto 1.5rem; max-width: 40rem; }
.vz-byline { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem 1.25rem;
  color: #64748b; font-size: .9rem; }
.vz-avatar { width: 2.5rem; height: 2.5rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; background: linear-gradient(135deg, #1d4ed8, #059669); }
.vz-byline strong { color: #0f172a; font-weight: 600; }
.vz-hero { max-width: 64rem; margin: 0 auto 2.5rem; }
.vz-article-body { max-width: 46rem; margin: 0 auto; background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem;
  padding: clamp(1.25rem, 4vw, 3rem); box-shadow: 0 10px 30px -18px rgba(15, 23, 42, .25); }
.vz-section { max-width: 46rem; margin: 1.5rem auto 0; }
.vz-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #e2e8f0; }
.vz-tag { font-size: .85rem; color: #334155; background: #f1f5f9; border-radius: 999px; padding: .3rem .8rem; text-decoration: none; }
.vz-tag:hover { background: #e2e8f0; }
.vz-pager { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 46rem; margin: 1.5rem auto 0; }
@media (min-width: 768px) { .vz-pager { grid-template-columns: 1fr 1fr; } }
.vz-pager a { display: block; background: #fff; border: 1px solid #e2e8f0; border-radius: .9rem; padding: 1rem 1.25rem;
  text-decoration: none; transition: box-shadow .2s, border-color .2s; }
.vz-pager a:hover { border-color: #93c5fd; box-shadow: 0 8px 20px -12px rgba(29, 78, 216, .4); }
.vz-pager small { display: block; color: #64748b; font-size: .8rem; margin-bottom: .2rem; }
.vz-pager span { color: #0f172a; font-weight: 600; }
.vz-pager .next { text-align: right; }
.vz-back { display: inline-flex; align-items: center; gap: .4rem; color: #1d4ed8; text-decoration: none; font-weight: 500;
  margin-bottom: 1.5rem; }

/* ── Share bar ───────────────────────────────────────────────────────── */
.vz-share { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.vz-share__label { font-size: .85rem; font-weight: 600; color: #334155; margin-right: .25rem; }
.vz-share__btn { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid #e2e8f0; background: #fff;
  color: #1e293b; border-radius: 999px; padding: .45rem .9rem; font-size: .85rem; font-weight: 500; cursor: pointer;
  text-decoration: none; transition: background .15s, border-color .15s, color .15s; line-height: 1; }
.vz-share__btn svg { width: 1rem; height: 1rem; flex: none; }
.vz-share__btn:hover { border-color: currentColor; }
.vz-share__btn[data-share="whatsapp"] { color: #128c47; }
.vz-share__btn[data-share="facebook"] { color: #1877f2; }
.vz-share__btn[data-share="x"] { color: #0f172a; }
.vz-share__btn[data-share="linkedin"] { color: #0a66c2; }
.vz-share__btn[data-share="email"], .vz-share__btn[data-share="copy"], .vz-share__btn[data-share="download"] { color: #475569; }
.vz-share__btn[data-share="native"] { color: #fff; background: #1d4ed8; border-color: #1d4ed8; }
.vz-share__btn.is-done { color: #059669; border-color: #059669; }
.vz-share--dark .vz-share__label { color: #cbd5e1; }
.vz-share--dark .vz-share__btn { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: #f1f5f9; }
.vz-share--dark .vz-share__btn:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4); }

/* ── Gallery grid cards ──────────────────────────────────────────────── */
.vz-gallery { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.vz-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; overflow: hidden; display: flex;
  flex-direction: column; text-align: left; cursor: pointer; padding: 0; font: inherit; color: inherit;
  transition: box-shadow .2s, transform .2s; }
.vz-card:hover, .vz-card:focus-visible { box-shadow: 0 16px 30px -16px rgba(15, 23, 42, .35); transform: translateY(-2px); outline: none; }
.vz-card__media { position: relative; }
.vz-card__badge { position: absolute; top: .75rem; left: .75rem; color: #fff; font-size: .72rem; font-weight: 700;
  border-radius: 999px; padding: .25rem .65rem; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); }
.vz-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.vz-card__play span { background: rgba(255, 255, 255, .92); border-radius: 999px; width: 3.5rem; height: 3.5rem;
  display: flex; align-items: center; justify-content: center; color: #dc2626; }
.vz-card__body { padding: 1rem 1.1rem 1.2rem; }
.vz-card__title { font-weight: 700; color: #0f172a; margin: 0 0 .35rem; font-size: 1.02rem; line-height: 1.35; }
.vz-card__text { color: #475569; font-size: .88rem; line-height: 1.5; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vz-card__meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; font-size: .78rem; }
.vz-chip { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .2rem .6rem;
  background: #f1f5f9; color: #334155; }
.vz-chip--impact { background: #ecfdf5; color: #047857; font-weight: 600; }

/* ── Gallery viewer (lightbox) ───────────────────────────────────────── */
.vz-lb { position: fixed; inset: 0; z-index: 1000; background: rgba(3, 7, 18, .96); display: none; color: #e2e8f0; }
.vz-lb.is-open { display: grid; grid-template-rows: auto 1fr auto; }
@media (min-width: 1024px) {
  .vz-lb.is-open { grid-template-columns: 1fr 380px; grid-template-rows: auto 1fr; }
  .vz-lb__top { grid-column: 1 / -1; }
  .vz-lb__panel { grid-row: 2; grid-column: 2; border-left: 1px solid rgba(255, 255, 255, .08); }
}
.vz-lb__top { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; gap: 1rem; }
.vz-lb__counter { font-size: .85rem; color: #94a3b8; }
.vz-lb__icon { background: rgba(255, 255, 255, .08); border: 0; color: #f8fafc; width: 2.75rem; height: 2.75rem;
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.vz-lb__icon:hover { background: rgba(255, 255, 255, .18); }
.vz-lb__icon svg { width: 1.4rem; height: 1.4rem; }
.vz-lb__stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0;
  padding: 0 3.75rem; overflow: hidden; touch-action: pan-y; }
.vz-lb__stage img, .vz-lb__stage video { max-width: 100%; max-height: calc(100vh - 9rem); object-fit: contain;
  border-radius: .5rem; box-shadow: 0 25px 60px rgba(0, 0, 0, .55); transition: opacity .2s; }
@media (min-width: 1024px) { .vz-lb__stage img, .vz-lb__stage video { max-height: calc(100vh - 6rem); } }
.vz-lb__stage.is-loading img { opacity: .25; }
.vz-lb__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.vz-lb__nav--prev { left: .6rem; } .vz-lb__nav--next { right: .6rem; }
.vz-lb__panel { overflow-y: auto; padding: 1.25rem 1.25rem 1.75rem; background: rgba(15, 23, 42, .6); max-height: 42vh; }
@media (min-width: 1024px) { .vz-lb__panel { max-height: none; } }
.vz-lb__title { font-size: 1.3rem; font-weight: 700; color: #fff; margin: .5rem 0 .6rem; line-height: 1.3; }
.vz-lb__caption { color: #cbd5e1; line-height: 1.6; font-size: .95rem; margin: 0 0 1rem; white-space: pre-line; }
.vz-lb__meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; font-size: .8rem; }
.vz-lb__meta .vz-chip { background: rgba(255, 255, 255, .08); color: #e2e8f0; }
.vz-lb__meta .vz-chip--impact { background: rgba(16, 185, 129, .18); color: #6ee7b7; }
.vz-lb__more { display: inline-block; margin-top: 1.25rem; color: #93c5fd; font-size: .9rem; }
.vz-lb-open { overflow: hidden; }

@media print { .vz-share, .vz-pager, .vz-back { display: none !important; } .vz-article-page { background: #fff; padding: 0; }
  .vz-article-body { border: 0; box-shadow: none; padding: 0; } }
@media (max-width: 640px) {
  .vz-lb__stage { padding: 0 .35rem; }
  .vz-lb__nav { background: rgba(0, 0, 0, .45); }
  .vz-lb__stage img, .vz-lb__stage video { max-height: 52vh; }
}