/* ============================================================
   «السرديات البصرية» (Visual Narratives) series
   AFAC grant G26-EoCDMP-07, co-funded by the European Union.

   Loaded only on the series page template and on series posts
   (inc/visual-narratives.php), after main.css + content.css.
   Theme tokens and classes from main.css; new classes are vn-.
   Mobile first, theme breakpoints 780px / 880px.
   ============================================================ */
:root{
  --vn-on-pine-2:#D8CDB4;   /* AFAC Arabic name on pine */
  --vn-on-pine-3:#C6BCA2;   /* AFAC English name + disclaimer on pine */
  --vn-en-ink:#6A6154;      /* AFAC English name on paper */
}

/* ---- label row: «سلسلة» ── «تقارير مصوّرة» ---- */
.vn-labels{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.vn-label{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-display);font-weight:600;
  font-size:.76rem;line-height:1.5;letter-spacing:.04em;}
.vn-label--dot{color:var(--crimson);}
.vn-label--dot::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--crimson);}
.vn-label--pine{color:var(--pine-2);}
a.vn-label--dot{transition:color .2s var(--ease);}
a.vn-label--dot:hover{color:var(--crimson-d);}
.vn-rule{flex:none;width:20px;height:1px;background:var(--line-2);}

/* ============ SERIES PAGE ============ */
.vn-hero{display:flex;flex-direction:column;gap:12px;padding-top:26px;}
.vn-title{font-size:var(--t-h1);color:var(--ink);margin:0 0 .2em;}
.vn-intro{max-width:62ch;font-size:var(--t-lead);line-height:1.55;color:var(--ink-2);}
.vn-intro p{margin:0 0 .6em;}
.vn-intro > :last-child{margin-bottom:0;}

.vn-list{margin-top:30px;padding-bottom:56px;}
.vn-shead{align-items:baseline;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--line);}

/* featured card (newest report) */
.vn-feature{display:block;}
.vn-feature .ph{aspect-ratio:16/10!important;} /* miftah_ph() inlines 16/9; phone shows 16/10 */
.vn-feature-body{display:flex;flex-direction:column;gap:8px;padding-top:12px;}
.vn-feature-h{margin:0;font-size:1.4rem;line-height:1.3;color:var(--ink);transition:color .2s var(--ease);}
.vn-feature-dek{margin:0;font-size:.96rem;line-height:1.7;color:var(--ink-2);}
.vn-feature-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-top:4px;}
.vn-cta{font-family:var(--f-display);font-weight:700;font-size:.95rem;color:var(--crimson);}
.vn-feature:hover .vn-feature-h,.vn-feature:focus-visible .vn-feature-h{color:var(--crimson);}

/* grid of the other reports (layout = theme .related-grid) */
.vn-feature + .vn-grid{margin-top:24px;padding-top:32px;border-top:1px solid var(--line);}
.vn-card .lcard-dek{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
.vn-card-date{display:block;padding-top:8px;}
.vn-card:focus-visible .lcard-h{color:var(--crimson);}

/* card hover: cover zooms a touch, title turns crimson (.lcard already does the title) */
.vn-feature .ph-img,.vn-card .ph-img{transition:transform .3s var(--ease);}
.vn-feature:hover .ph-img,.vn-card:hover .ph-img{transform:scale(1.025);}
@media (prefers-reduced-motion:reduce){
  .vn-feature:hover .ph-img,.vn-card:hover .ph-img{transform:none;}
}

.vn-more{display:flex;justify-content:center;padding-top:28px;}
.vn-more .btn{padding:12px 28px;}

/* the pine credit band sits flush on the footer */
.vn-series + .ftr{margin-top:0;border-top:0;}

/* ============ SERIES REPORT (single.php, .vn-report) ============ */
.vn-report{--vn-read:min(760px,100%);}
.vn-report .read{width:var(--vn-read);}
.vn-report .art-crumb{display:flex;margin-bottom:12px;}
.vn-report .art-title{font-size:clamp(1.8rem,4.4vw,2.8rem);line-height:1.28;}

/* poster: the still only, 16:9, no caption / play label / overlay */
.vn-poster{margin-top:22px;margin-bottom:0;padding-inline:0;}
.vn-poster .ph{border-radius:0!important;} /* edge to edge on phone */

/* body: approved larger reading size, series posts only */
.vn-body{padding-top:22px;}
.vn-report .vn-body p{margin:0 0 20px;font-size:1.1rem;line-height:1.9;color:var(--ink);}
.vn-report .vn-body > p:first-of-type{font-size:1.2rem;line-height:1.85;}
.vn-report .vn-body > :last-child{margin-bottom:0;}

/* after the body: video panel + paper credit card, same column */
.vn-after{padding-top:22px;}

.vn-video-panel{margin-inline:calc(var(--gut) * -1);padding:16px;background:var(--pine);}
.vn-video-label{display:inline-flex;align-items:center;gap:6px;margin-bottom:12px;font-family:var(--f-display);
  font-weight:600;font-size:.76rem;line-height:1.5;letter-spacing:.04em;color:var(--paper);}
.vn-video-label::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--gold);}
.vn-video-frame{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:2px;background:#000;}
.vn-video-facade{position:absolute;inset:0;display:block;color:#fff;}
.vn-video-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.vn-video-shade{position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.6),transparent 30%),linear-gradient(to top,rgba(0,0,0,.55),transparent 26%);}
.vn-video-title{position:absolute;inset-block-start:0;inset-inline:0;padding:10px 12px;
  font-family:var(--f-body);font-size:.84rem;line-height:1.5;color:#fff;}
.vn-video-btn{position:absolute;inset:0;margin:auto;display:grid;place-items:center;width:60px;height:60px;
  border-radius:50%;background:var(--crimson);color:#fff;box-shadow:0 6px 22px rgba(0,0,0,.4);
  transition:background .2s var(--ease),transform .2s var(--ease);}
.vn-video-btn svg{display:block;translate:2px 0;} /* optical centre of the triangle */
.vn-video-facade:hover .vn-video-btn,.vn-video-facade:focus-visible .vn-video-btn{background:var(--crimson-d);transform:scale(1.06);}
.vn-video-facade:focus-visible{outline:3px solid var(--gold);outline-offset:-3px;}
.vn-video-iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;}
.vn-video-print{display:none;}
@media (prefers-reduced-motion:reduce){
  .vn-video-facade:hover .vn-video-btn,.vn-video-facade:focus-visible .vn-video-btn{transform:none;}
}

/* related: «المزيد من السرديات البصرية» */
.vn-related .vn-shead{margin-bottom:0;padding-bottom:10px;border-bottom:0;}
.vn-related .shead-all .vn-wide{display:none;}
.vn-related-grid{display:block;}
/* list variant: compact thumbnail row on phone, regular .lcard from 780px */
.vn-card--list{display:grid;grid-template-columns:128px minmax(0,1fr);align-items:center;gap:14px;
  padding-block:14px;border-top:1px solid var(--line);}
.vn-card--list .lcard-body{padding-top:0;}
.vn-card--list .lcard-h{margin:.2em 0 .15em;font-size:1rem;line-height:1.4;}
.vn-card--list .lcard-dek,.vn-card--list .play{display:none;}
.vn-card--list .vn-card-date{padding-top:2px;}

/* ============ CREDIT BLOCK (parts/vn-credit.php) ============ */
.vn-credit{position:relative;overflow:hidden;}
.vn-credit-in{display:flex;flex-direction:column;gap:18px;}
.vn-credit-label{display:inline-flex;align-items:center;align-self:flex-start;gap:6px;font-family:var(--f-display);
  font-weight:600;font-size:.76rem;line-height:1.5;letter-spacing:.04em;}
.vn-credit-label::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;}
.vn-credit-logos{display:flex;flex-direction:column;align-items:flex-start;gap:16px;}
.vn-credit-afac{display:flex;flex-direction:column;align-items:flex-start;gap:2px;}
/* never stretch a logo: fixed height, auto width, no flex/max-width squeeze.
   EU lockup heights are set so the blue flag alone (418x278 of the 448x480
   lockup, ~93% x 58%) is at least as wide and tall as the AFAC logo beside it. */
.vn-logo-afac{display:block;flex:none;align-self:flex-start;width:auto;max-width:none;height:40px;margin-bottom:7px;}
.vn-logo-eu{display:block;flex:none;align-self:flex-start;width:auto;max-width:none;height:88px;}
.vn-credit-name{font-family:var(--f-body);font-size:.84rem;line-height:1.6;}
.vn-credit-name-en{align-self:flex-start;font-family:var(--f-latin);font-size:.75rem;line-height:1.5;}
.vn-credit-sep{display:block;align-self:stretch;height:1px;}
.vn-credit-ack,.vn-credit-disclaimer{margin:0;max-width:78ch;font-family:var(--f-body);}
.vn-credit-disclaimer{padding-top:14px;border-top:1px solid;}

/* pine: series page, full-bleed band above the footer */
.vn-credit--pine{background:var(--pine);}
.vn-credit--pine .vn-band{height:34px;background:url("../images/vn/kufiya-tile.png") repeat-x center/auto 34px;}
.vn-credit--pine .vn-credit-in{gap:22px;padding-top:22px;padding-bottom:32px;}
.vn-credit--pine .vn-credit-label{color:var(--paper);}
.vn-credit--pine .vn-credit-label::before{background:var(--gold);}
.vn-credit--pine .vn-credit-logos{gap:18px;}
.vn-credit--pine .vn-credit-afac{gap:3px;}
.vn-credit--pine .vn-logo-afac{height:44px;margin-bottom:6px;}
.vn-credit--pine .vn-logo-eu{height:96px;}
.vn-credit--pine .vn-credit-name{color:var(--vn-on-pine-2);}
.vn-credit--pine .vn-credit-name-en{color:var(--vn-on-pine-3);}
.vn-credit--pine .vn-credit-sep{background:rgba(241,233,216,.2);}
.vn-credit--pine .vn-credit-ack{font-size:.9rem;line-height:1.72;color:var(--paper);}
.vn-credit--pine .vn-credit-disclaimer{padding-top:16px;font-size:.825rem;line-height:1.72;color:var(--vn-on-pine-3);
  border-top-color:rgba(241,233,216,.18);}

/* paper: report page, card in the report column */
.vn-credit--paper{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:3px;}
.vn-credit--paper .vn-band{height:36px;background:url("../images/vn/tatreez-tile.png") repeat-x center/auto 36px;}
.vn-credit--paper .vn-credit-in{padding:18px 18px 22px;}
.vn-credit--paper .vn-credit-label{color:var(--crimson);}
.vn-credit--paper .vn-credit-label::before{background:var(--crimson);}
.vn-credit--paper .vn-credit-name{color:var(--ink-2);}
.vn-credit--paper .vn-credit-name-en{color:var(--vn-en-ink);}
.vn-credit--paper .vn-credit-sep{background:var(--line);}
.vn-credit--paper .vn-credit-ack{font-size:.94rem;line-height:1.75;color:var(--ink);}
.vn-credit--paper .vn-credit-disclaimer{font-size:.825rem;line-height:1.75;color:var(--ink-2);border-top-color:var(--line);}

/* ============ DESKTOP ============ */
@media (min-width:780px){
  .vn-labels{gap:11px;}
  .vn-hero{gap:16px;padding-top:46px;}
  .vn-list{margin-top:50px;padding-bottom:96px;}
  .vn-shead{margin-bottom:24px;padding-bottom:13px;}

  /* report */
  .vn-poster{padding-inline:var(--gut);}
  .vn-poster .ph{border-radius:var(--radius)!important;}
  .vn-body{padding-top:30px;}
  .vn-report .vn-body p{margin-bottom:26px;font-size:1.25rem;line-height:1.95;}
  .vn-report .vn-body > p:first-of-type{font-size:1.4rem;line-height:1.85;}
  .vn-after{padding-top:36px;}
  .vn-video-panel{margin-inline:0;padding:22px;border-radius:3px;}
  .vn-video-label{margin-bottom:14px;}
  .vn-video-title{padding:14px 18px;font-size:.96rem;}
  .vn-video-btn{width:72px;height:72px;}
  .vn-video-btn svg{width:32px;height:32px;}

  .vn-related .vn-shead{margin-bottom:24px;padding-bottom:13px;border-bottom:1px solid var(--line);}
  .vn-related .shead-all .vn-wide{display:inline;}
  .vn-related .shead-all .vn-narrow{display:none;}
  .vn-related-grid{display:grid;}
  .vn-card--list{display:block;padding-block:0;border-top:0;}
  .vn-card--list .lcard-body{padding-top:12px;}
  .vn-card--list .lcard-h{margin:.28em 0 .3em;font-size:1.18rem;line-height:1.32;}
  .vn-card--list .lcard-dek{display:-webkit-box;}
  .vn-card--list .play{display:inline-flex;}
  .vn-card--list .vn-card-date{padding-top:8px;}

  /* credit: logos in a row, separator turns vertical */
  .vn-credit-logos{flex-direction:row;align-items:flex-end;gap:36px;}
  .vn-credit-sep{width:1px;height:auto;}
  .vn-credit--pine .vn-band{height:52px;background-size:auto 52px;}
  .vn-credit--pine .vn-credit-in{gap:30px;padding-top:30px;padding-bottom:48px;}
  .vn-credit--pine .vn-credit-logos{gap:44px;}
  .vn-credit--pine .vn-logo-afac{height:52px;margin-bottom:9px;}
  .vn-credit--pine .vn-logo-eu{height:114px;}
  .vn-credit--pine .vn-credit-ack{font-size:.96rem;}
  .vn-credit--pine .vn-credit-disclaimer{padding-top:20px;font-size:.9rem;}
  .vn-credit--paper{margin-top:34px;}
  .vn-credit--paper .vn-band{height:48px;background-size:auto 48px;}
  .vn-credit--paper .vn-credit-in{gap:20px;padding:20px 28px 26px;}
  .vn-credit--paper .vn-logo-afac{height:44px;margin-bottom:8px;}
  .vn-credit--paper .vn-logo-eu{height:96px;}
  .vn-credit--paper .vn-credit-ack{font-size:.96rem;}
  .vn-credit--paper .vn-credit-disclaimer{padding-top:16px;font-size:.84rem;}
}
@media (min-width:880px){
  .vn-feature{display:grid;grid-template-columns:7fr 5fr;align-items:center;gap:36px;}
  .vn-feature .ph{aspect-ratio:16/9!important;}
  .vn-feature-body{gap:12px;padding-top:0;}
  .vn-feature-h{font-size:1.9rem;}
  .vn-feature-dek{font-size:1.08rem;line-height:1.75;}
}

/* ============ PRINT (the «تحميل PDF» button) ============ */
@media print{
  .vn-poster .ph{border-radius:4px!important;}
  .vn-after{padding-top:2mm!important;}
  /* the player can't print: one line with the watch URL instead */
  .vn-video-panel{display:none!important;}
  .vn-video-print{display:block!important;margin:0 0 4mm!important;font-family:var(--f-body);font-size:9.5pt;color:#211C17;}
  /* the credit block always prints, logos included */
  .vn-credit{break-inside:avoid;page-break-inside:avoid;margin-top:3mm!important;}
  .vn-credit-logos{flex-direction:row;align-items:flex-end;gap:8mm;}
  .vn-credit-sep{width:1px;height:auto;}
  .vn-credit--paper .vn-logo-afac{height:40px;}
  .vn-credit--paper .vn-logo-eu{height:88px;}
  .vn-credit-ack{font-size:10pt!important;}
  .vn-credit-disclaimer{font-size:8.5pt!important;}
}