/* The Zimbabwe cohort run-up films — the same treatment as the masterclass
   series, because it is the one that works: the presenter's face large enough
   to recognise, a gold ring, and a locked state that shows the date rather than
   hiding the film.

   It is a dark strip wherever it sits. On the film page that matches the page;
   on the learner dashboard it deliberately does not, so the series reads as a
   thing of its own rather than another row of module cards. */

.zwr { background:linear-gradient(180deg,#123528 0%,#0B2019 100%);
  border-radius:20px; padding:34px 28px 30px; margin:0 auto; }
.zwr__head { margin:0 0 22px; }
.zwr__eyebrow { display:block; font-size:.7rem; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:#D4AF37; margin-bottom:9px; }
.zwr__head h3 { color:#fff; font-size:1.3em; margin:0 0 6px; line-height:1.25; text-wrap:balance; }
.zwr__head p { color:#A9C2B4; margin:0; font-size:.94em; line-height:1.6; max-width:62ch; }

.zwr__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:20px; }

.zwr__c { display:block; text-decoration:none; text-align:center; color:#EAF2EC;
  background:linear-gradient(180deg,#16402F 0%,#0E2A20 100%);
  border:1.5px solid rgba(212,175,55,.22); border-radius:20px; padding:26px 18px 22px;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.zwr__c:hover { transform:translateY(-3px); border-color:rgba(212,175,55,.65);
  box-shadow:0 18px 40px rgba(0,0,0,.35); }
.zwr__c.is-now { border-color:#D4AF37; box-shadow:0 0 0 3px rgba(212,175,55,.16); }

.zwr__face-wrap { display:block; position:relative; width:112px; height:112px; margin:0 auto 18px; }
.zwr__face-wrap::before { content:''; position:absolute; inset:-5px; border-radius:50%;
  background:conic-gradient(from 210deg, rgba(212,175,55,.85), rgba(212,175,55,.08) 45%, rgba(212,175,55,.85)); }
.zwr__face { position:relative; width:112px; height:112px; border-radius:50%; object-fit:cover;
  object-position:50% 14%; border:4px solid #0E2A20; background:#0A1A12; display:block; }
.zwr__no { position:absolute; left:50%; bottom:-9px; transform:translateX(-50%);
  background:#D4AF37; color:#08180F; font-size:.62rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; border-radius:999px; padding:4px 11px; white-space:nowrap; }

.zwr__who { display:block; font-size:.66rem; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:#D4AF37; margin:20px 0 7px; }
.zwr__t { display:block; font-size:1.02em; font-weight:700; line-height:1.35; color:#fff; margin-bottom:7px; }
.zwr__d { display:block; font-size:.82em; color:#A9C2B4; line-height:1.55; margin-bottom:13px; }
.zwr__when { display:block; font-size:.8em; color:#A9C2B4; border-top:1px solid rgba(255,255,255,.12);
  padding-top:11px; width:100%; }
.zwr__when b { color:#D4AF37; font-weight:700; }

/* Locked: the face greys out and the date replaces the link. The film is still
   visible — knowing what is coming is most of the point of a series. */
.zwr__c.is-locked { background:#0A1A12; border-style:dashed; border-color:rgba(255,255,255,.12); cursor:default; }
.zwr__c.is-locked:hover { transform:none; box-shadow:none; border-color:rgba(255,255,255,.12); }
.zwr__c.is-locked .zwr__face { filter:grayscale(1) brightness(.5); }
.zwr__c.is-locked .zwr__face-wrap::before { background:rgba(255,255,255,.12); }
.zwr__c.is-locked .zwr__no { background:rgba(255,255,255,.14); color:#CFE0D6; }
.zwr__c.is-locked .zwr__t { color:#B9CCC0; }
.zwr__c.is-locked .zwr__who { color:#8FA79A; }
.zwr__c.is-locked .zwr__d { color:#8FA79A; }

/* Watched already: a quiet tick, so coming back to one is obviously allowed. */
.zwr__seen { display:inline-block; margin-left:6px; color:#74C69D; font-weight:700; }

/* The full-page gate, when somebody opens a film before its date. */
.zwr-lock { display:flex; align-items:center; justify-content:center; text-align:center;
  flex-direction:column; gap:14px; min-height:52vh; padding:40px 20px; color:#EAF2EC; }
.zwr-lock h2 { color:#fff; font-size:1.6em; margin:0; text-wrap:balance; }
.zwr-lock p { color:#A9C2B4; max-width:52ch; line-height:1.7; margin:0; }
.zwr-lock__when { font-size:.72rem; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:#D4AF37; }

@media (max-width:640px) {
  .zwr { padding:26px 16px 24px; border-radius:16px; }
  .zwr__grid { gap:14px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
  .zwr__c { padding:20px 12px 18px; border-radius:16px; }
  .zwr__face-wrap, .zwr__face { width:84px; height:84px; }
  .zwr__t { font-size:.94em; }
  .zwr__d { display:none; }
}