/* events.css — /events (events.php) and its share images (events.js).
   The three card styles are LOCKED (his call, 2026-11-01, mockup
   docs/events-mock): A poster, B ticket, C story. B is the page; all three
   are what «اشتراک» renders. Every card is a self-contained poster: date,
   title, full Finnish title, place, price and the iranian.fi brand, because
   readers share by screenshot. Javan only for the site's own headings (page, section), never bold; an event's title is Vazirmatn (.tt, his rule 2026-11-02). */

.evp{--ev-bg:#0f0d18;--ev-ink:#f3efe6;--ev-mut:#a9a3b8;--ev-gold:#e7c873;--ev-line:rgba(255,255,255,.12);
  max-width:1180px;margin:0 auto;padding:26px 16px 50px;color:var(--ev-ink);font-size:16px;line-height:1.7}
.evp .jv,.ev-x .jv{font-family:Javan,Vazirmatn,system-ui,sans-serif;font-weight:400;font-synthesis:none}
.tt{font-family:Vazirmatn,system-ui,sans-serif;font-weight:700}
.evp .ltr,.ev-x .ltr{direction:ltr;unicode-bidi:isolate}
/* the shell styles #appMain h1 in Vazirmatn 800; the title is Javan, never bold */
#appMain .evp h1,.evp h1{font-family:Javan,Vazirmatn,system-ui,sans-serif;font-weight:400;font-synthesis:none;font-size:36px;line-height:1.3;margin:0 0 4px}
/* the ticket notches are bites out of the paper: the page ground, #appMain */
.evp .cb{--notch:var(--notch-pg,#1c1b20)}
.evp-sub{color:var(--ev-mut);margin:0 0 18px}

/* filters: days, then cities and two quick tags */
.evp-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none;margin:0 -16px;padding-inline:16px}
.evp-chips::-webkit-scrollbar{display:none}
.evp-chip{flex:0 0 auto;border:1px solid var(--ev-line);border-radius:999px;padding:7px 16px;font:inherit;font-size:15px;font-weight:700;color:var(--ev-ink);background:rgba(255,255,255,.04);cursor:pointer;line-height:1.4}
.evp-chip.on{background:var(--ev-gold);color:#1b1505;border-color:var(--ev-gold)}
.evp-chip small{display:block;font-size:13px;font-weight:600;opacity:.75;text-align:center}
.evp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;margin-top:14px}
.evp-item{display:flex;flex-direction:column;gap:8px;min-width:0}
.evp-item[hidden]{display:none}
.evp-act{display:flex;gap:8px}
.evp-act button,.evp-act a{flex:1;border:1px solid var(--ev-line);border-radius:12px;background:rgba(255,255,255,.05);color:var(--ev-ink);font:inherit;font-size:15px;font-weight:800;padding:8px 10px;cursor:pointer;text-align:center;text-decoration:none}
.evp-act .sh{background:var(--ev-gold);color:#1b1505;border-color:var(--ev-gold)}
.evp-none{border:1px dashed var(--ev-line);border-radius:16px;padding:22px;text-align:center;color:var(--ev-mut)}
.evp-src{margin-top:30px;font-size:14px;color:var(--ev-mut)}
.ev-brand{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:800;letter-spacing:.2px;direction:ltr}
.ev-brand img{width:20px;height:20px;border-radius:50%}
.nopic{background-image:linear-gradient(135deg,#3a1f5c,#b23a1e)!important}

/* ── A: poster ──────────────────────────────────────────────────────────── */
.ca{position:relative;width:100%;aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:#222 center/cover;color:#fff;isolation:isolate;font-family:Vazirmatn,system-ui,sans-serif;line-height:1.7}
.ca::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 42%,rgba(8,6,16,.92) 78%);z-index:-1}
.ca .dt{position:absolute;top:14px;inset-inline-start:14px;background:#fff;color:#111;border-radius:14px;padding:6px 12px 7px;text-align:center;line-height:1.1;min-width:64px}
.ca .dt b{display:block;font-size:30px;font-weight:900}
.ca .dt span{font-size:13px;font-weight:800}
.ca .px{position:absolute;top:14px;inset-inline-end:14px;background:#e7c873;color:#1b1505;border-radius:999px;padding:4px 12px;font-size:14px;font-weight:900}
.ca .bd{position:absolute;inset-inline:0;bottom:0;padding:16px 18px 14px}
.ca .ct{display:inline-block;font-size:13px;font-weight:800;background:rgba(255,255,255,.18);border-radius:999px;padding:2px 10px;margin-bottom:6px}
.ca h3{font-size:22px;line-height:1.45;margin:0 0 2px}
.ca .fi{font-size:14px;opacity:.85;margin:0 0 8px;text-align:right}
.ca .mt{font-size:14.5px;font-weight:700;display:flex;gap:10px;flex-wrap:wrap}
.ca .ft{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.2)}
.ca .ft .go{font-size:13.5px;font-weight:800;color:#e7c873}

/* ── B: ticket (the page) ───────────────────────────────────────────────── */
.cb{position:relative;width:100%;background:#f6f1e4;color:#1d1a14;border-radius:20px;overflow:hidden;font-family:Vazirmatn,system-ui,sans-serif;line-height:1.7;--notch:#0f0d18}
.cb .im{aspect-ratio:16/10;background:#ccc center/cover;margin:10px 10px 0;border-radius:14px}
.cb .cut{position:relative;height:26px}
.cb .cut::before{content:"";position:absolute;inset-inline:22px;top:50%;border-top:2px dashed rgba(29,26,20,.25)}
.cb .cut i{position:absolute;top:0;width:26px;height:26px;border-radius:50%;background:var(--notch)}
.cb .cut i:first-child{right:-13px}.cb .cut i:last-child{left:-13px}
.cb .lo{display:grid;grid-template-columns:76px 1fr;padding:0 16px 14px;gap:14px}
.cb .stub{border-inline-end:2px dashed rgba(29,26,20,.2);padding-inline-end:12px;text-align:center;line-height:1.15}
.cb .stub b{display:block;font-size:38px;font-weight:900;color:#b23a1e}
.cb .stub span{display:block;font-size:13px;font-weight:800}
.cb .stub em{display:block;font-style:normal;font-size:15px;font-weight:900;margin-top:6px}
.cb .ct{font-size:13px;font-weight:800;color:#8a6a12}
.cb h3,.cb .h3{display:block;font-size:18px;line-height:1.5;margin:0}
.cb .fi{font-size:13.5px;color:#6d6656;margin:0 0 6px;text-align:right}
.cb .mt{font-size:14.5px;font-weight:600}
.cb .ft{display:flex;justify-content:space-between;align-items:center;background:#1d1a14;color:#f6f1e4;padding:9px 16px}
.cb .ft .px{background:#e7c873;color:#1b1505;border-radius:999px;padding:1px 10px;font-weight:900;font-size:14px}
button.cb{border:0;padding:0;text-align:inherit;font:inherit;cursor:pointer;display:block}

/* ── C: story ───────────────────────────────────────────────────────────── */
.cc{position:relative;width:100%;aspect-ratio:9/16;border-radius:24px;overflow:hidden;color:#fff;isolation:isolate;padding:16px;display:flex;flex-direction:column;font-family:Vazirmatn,system-ui,sans-serif;line-height:1.7;background:#1a1626}
.cc .bg{position:absolute;inset:-30px;background:#333 center/cover;filter:blur(28px) saturate(1.4) brightness(.55);z-index:-1}
.cc .top{display:flex;justify-content:space-between;align-items:center}
.cc .pill{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:3px 12px;font-size:13px;font-weight:800}
.cc .im{margin:14px 0 0;aspect-ratio:1/1;border-radius:18px;background:#444 center/cover;border:3px solid rgba(255,255,255,.85)}
.cc h3{font-size:21px;line-height:1.45;margin:14px 0 0;text-align:center}
.cc .fi{font-size:13.5px;opacity:.85;text-align:center;margin:2px 0 0}
.cc .gl{margin:auto 0 0;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:10px 14px;display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font-size:14.5px}
.cc .gl dt{opacity:.75;font-weight:700}.cc .gl dd{margin:0;font-weight:800}
.cc .gl dd.px{color:#e7c873}

/* ── the two overlays: details and share. ✕, backdrop and Esc close them ── */
.ev-x{position:fixed;inset:0;z-index:2000;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.6);color:#f3efe6;font-size:16px;line-height:1.75}
.ev-x[hidden]{display:none}
.ev-x .sh-in{position:relative;width:min(560px,100%);max-height:92svh;overflow-y:auto;background:#17142a;border-radius:20px 20px 0 0;padding:18px 16px 22px}
@media (min-width:700px){.ev-x{align-items:center}.ev-x .sh-in{border-radius:20px}}
.ev-x .xx{position:absolute;top:10px;inset-inline-end:10px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;font-size:18px;cursor:pointer}
.ev-x h2{font-size:24px;line-height:1.45;margin:4px 0 0;padding-inline-end:44px}
.ev-x .fi{color:#a9a3b8;font-size:15px;font-weight:700;text-align:right;margin:2px 0 10px}
.ev-x .pic{aspect-ratio:16/10;border-radius:14px;background:#333 center/cover;margin:0 0 12px}
.ev-x dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:12px 0;font-size:15px}
.ev-x dt{color:#a9a3b8;font-weight:800}.ev-x dd{margin:0;overflow-wrap:anywhere}
.ev-x .why{border-inline-start:3px solid #e7c873;padding-inline-start:10px;font-size:15px}
.ev-x .btns{display:flex;gap:10px;margin-top:16px}
.ev-x .btns a,.ev-x .btns button{flex:1;border-radius:12px;padding:10px;font:inherit;font-weight:800;text-align:center;text-decoration:none;cursor:pointer;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#f3efe6}
.ev-x .btns .pri{background:#e7c873;color:#1b1505;border-color:#e7c873}
.ev-x .picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 6px}
.ev-x .pick{min-width:0;border:2px solid transparent;border-radius:16px;padding:6px;background:rgba(255,255,255,.04);cursor:pointer;font:inherit;color:inherit}
.ev-x .pick.on{border-color:#e7c873}
.ev-x .pick .lbl{display:block;text-align:center;font-weight:800;font-size:14px;margin-top:4px}
.ev-x .pick .mini{display:block;width:100%;overflow:hidden;position:relative}
.ev-x .pick .mini>*{width:360px;transform-origin:top right;pointer-events:none}
.ev-x .msg{min-height:1.7em;font-size:14.5px;color:#a9a3b8;text-align:center;margin-top:8px}
/* where a share image is drawn: off screen, at its real size */
.ev-stage{position:fixed;top:0;left:-10000px;width:360px;--notch:#0f0d18}

/* a card is a link to the event's own page */
a.cb{display:block;text-decoration:none;color:#1d1a14}
a.cb:hover h3,a.cb:hover .h3{text-decoration:underline}

/* ── one event (event.php) ──────────────────────────────────────────────── */
.evp-back{display:inline-block;color:var(--ev-mut);text-decoration:none;font-weight:700;margin:0 0 14px}
.evp-back:hover{color:var(--ev-ink)}
.ev1{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:820px){.ev1{grid-template-columns:1fr;gap:16px}}
.ev1-pic{position:relative;aspect-ratio:4/3;border-radius:22px;background:#2a2638 center/cover;overflow:hidden}
.ev1-date{position:absolute;top:14px;inset-inline-start:14px;background:#fff;color:#111;border-radius:14px;padding:6px 14px 8px;text-align:center;line-height:1.1}
.ev1-date b{display:block;font-size:34px;font-weight:900}
.ev1-date span{font-size:14px;font-weight:800}
.ev1-chips{display:flex;gap:8px;flex-wrap:wrap}
.ev1-chips span{border:1px solid var(--ev-line);border-radius:999px;padding:2px 12px;font-size:14px;font-weight:800;color:var(--ev-mut)}
.ev1-chips .free{background:#e7c873;border-color:#e7c873;color:#1b1505}
#appMain .ev1 h1,.ev1 h1{font-family:Vazirmatn,system-ui,sans-serif;font-weight:800;font-size:27px;line-height:1.45;margin:10px 0 2px}
.ev1-fi{font-size:16px;font-weight:700;color:var(--ev-mut);text-align:right;margin:0 0 12px}
.ev1-over{border:1px solid #b23a1e;color:#f0b3a3;border-radius:12px;padding:8px 12px;font-weight:800}
.ev1-d{font-size:16.5px;line-height:1.95;margin:0 0 6px}
.ev1-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:14px 0;padding:14px 16px;border:1px solid var(--ev-line);border-radius:16px;font-size:15.5px}
.ev1-dl dt{color:var(--ev-mut);font-weight:800}
.ev1-dl dd{margin:0;overflow-wrap:anywhere}
.ev1-more{display:block;font-size:14px;color:var(--ev-mut);margin-top:2px}
.ev1-why{border-inline-start:3px solid #e7c873;padding-inline-start:12px;font-size:15.5px}
.ev1-btns{display:flex;gap:10px;margin-top:16px}
.ev1-btns a,.ev1-btns button{flex:1;border-radius:14px;padding:12px;font:inherit;font-weight:800;text-align:center;text-decoration:none;cursor:pointer;border:1px solid var(--ev-line);background:rgba(255,255,255,.06);color:var(--ev-ink)}
.ev1-btns .pri{background:#e7c873;color:#1b1505;border-color:#e7c873}
.ev1-src{font-size:14px;color:var(--ev-mut);margin-top:12px}
#appMain .evp-h2,.evp-h2{font-family:Javan,Vazirmatn,system-ui,sans-serif;font-weight:400;font-synthesis:none;font-size:26px;margin:40px 0 4px}