/* =============================================================================
   Skopje Film Festival — Programme (day tabs + list), page + popup.
   Loaded on the Programme page, or on demand by programme.js before the popup
   opens. BEM, sff-prog prefix. Tokens come from main.css (Paper & Blades).
   ========================================================================== */

.sff-prog{
  --p-red:#d02a37;--p-red-hover:#b8212e;
  --p-ink:var(--sff-ink,#17130F);--p-soft:var(--sff-ink-soft,#4A433A);--p-muted:#6b6259;
  --p-line:#ebe5df;--p-line-2:#ddd6cf;--p-hush:#f5f1ed;--p-bg:#ffffff;
  --p-pad:36px;--p-sticky:16px;
  position:relative;background:var(--p-bg);color:var(--p-ink);font-family:var(--sff-sans,'Caros',system-ui,sans-serif);
  border-radius:22px;text-align:left;
}
.sff-prog [hidden]{display:none!important}
.sff-prog svg{flex-shrink:0}

/* ---- Head ---------------------------------------------------------------- */
.sff-prog__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:28px var(--p-pad) 22px}
.sff-prog__titles{display:flex;flex-direction:column;gap:8px;min-width:0}
.sff-prog__eyebrow{margin:0;display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sff-red-deep,#B8212E)}
.sff-prog__eyebrow-date{white-space:nowrap}
.sff-prog__eyebrow-short{display:none;text-decoration:none;border:0}
.sff-prog__eyebrow-dot{width:10px;height:10px;border-radius:50%;background:var(--sff-red,#ef3a47);flex-shrink:0}
.sff-prog__title{margin:0;font-family:var(--sff-sans,'Caros',system-ui,sans-serif);font-size:clamp(34px,4vw,48px);font-weight:800;letter-spacing:-.025em;line-height:1;color:var(--p-ink)}
.sff-prog__tools{display:flex;align-items:center;gap:10px}
.sff-prog__search{display:flex;align-items:center;gap:10px;width:310px;height:46px;padding:0 16px;border:1px solid var(--p-line-2);border-radius:999px;color:var(--p-muted);background:var(--p-bg);transition:border-color .2s,box-shadow .2s}
.sff-prog__search:focus-within{border-color:var(--p-ink);box-shadow:0 0 0 3px rgba(23,19,15,.08)}
.sff-prog__search svg{width:18px;height:18px}
.sff-prog__search input{flex:1;min-width:0;height:100%;border:0;background:transparent;font:inherit;font-size:14px;color:var(--p-ink);outline:none;-webkit-appearance:none;appearance:none}
.sff-prog__search input::-webkit-search-cancel-button{cursor:pointer}
.sff-prog__icon{width:46px;height:46px;border-radius:50%;border:1px solid var(--p-line-2);background:var(--p-bg);color:var(--p-ink);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;transition:border-color .2s,background-color .2s,color .2s}
.sff-prog__icon:hover{border-color:var(--p-ink)}
.sff-prog__icon svg{width:18px;height:18px}
.sff-prog__icon.is-done{border-color:var(--sff-green-mid,#2A7F69);color:var(--sff-green-mid,#2A7F69)}
.sff-prog__icon--close{display:none;border:0;background:var(--p-ink);color:#fff}
.sff-prog__icon--close:hover{background:#000}
.sff-prog-dialog .sff-prog__icon--close{display:flex}

/* ---- Day tabs ------------------------------------------------------------ */
.sff-prog__days{display:grid;grid-template-columns:repeat(var(--sff-prog-n,6),minmax(140px,1fr));gap:10px;padding:0 var(--p-pad);overflow-x:auto;scrollbar-width:none}
.sff-prog__days::-webkit-scrollbar{display:none}
.sff-prog__day{position:relative;height:96px;border-radius:16px;border:1px solid #e7e1db;background:var(--p-bg);color:var(--p-ink);font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;padding:12px 16px;text-align:left;transition:border-color .2s,background-color .2s,color .2s}
.sff-prog__day:hover{border-color:var(--p-ink)}
.sff-prog__day:focus-visible{outline:3px solid rgba(208,42,55,.35);outline-offset:2px}
.sff-prog__day-wd{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--p-muted)}
.sff-prog__day-wd-short{display:none}
.sff-prog__day-num{display:flex;align-items:baseline;gap:6px;font-size:13px;font-weight:700}
.sff-prog__day-num b{font-size:32px;font-weight:800;line-height:1;letter-spacing:-.02em}
.sff-prog__day-count{font-size:12px;font-weight:500;color:var(--p-muted)}
.sff-prog__day[aria-selected="true"]{background:var(--p-red);border-color:var(--p-red);color:#fff}
.sff-prog__day[aria-selected="true"] .sff-prog__day-wd,
.sff-prog__day[aria-selected="true"] .sff-prog__day-count{color:#ffe3e5}
.sff-prog__day.has-match::after{content:"";position:absolute;top:10px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--sff-yellow,#ffd653);box-shadow:0 0 0 2px var(--p-bg)}

/* ---- Bar: day label + filters -------------------------------------------- */
.sff-prog__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px var(--p-pad);border-bottom:1px solid #eee8e2}
.sff-prog__daylabel{margin:0;font-size:20px;font-weight:800;letter-spacing:-.01em}
.sff-prog__filters{display:flex;align-items:center;gap:8px}
.sff-prog__select-wrap{display:block}
.sff-prog__select{height:44px;padding:0 38px 0 16px;border-radius:999px;border:1px solid var(--p-line-2);background:var(--p-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317130F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/14px;font:inherit;font-size:13px;font-weight:600;color:var(--p-ink);cursor:pointer;-webkit-appearance:none;appearance:none}
.sff-prog__select:focus-visible{outline:3px solid rgba(23,19,15,.15);outline-offset:1px}
.sff-prog__mine{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 8px 0 14px;border-radius:999px;border:1px solid var(--p-line-2);background:var(--p-bg);color:var(--p-ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s}
.sff-prog__mine svg{width:16px;height:16px;fill:none}
.sff-prog__mine-count{min-width:28px;height:28px;padding:0 6px;border-radius:999px;background:#f3efeb;color:var(--p-ink);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.sff-prog__mine[aria-pressed="true"]{background:var(--p-ink);border-color:var(--p-ink);color:#fff}
.sff-prog__mine[aria-pressed="true"] svg{fill:var(--sff-yellow,#ffd653);stroke:var(--sff-yellow,#ffd653)}
.sff-prog__mine[aria-pressed="true"] .sff-prog__mine-count{background:var(--sff-yellow,#ffd653)}

/* ---- List ---------------------------------------------------------------- */
.sff-prog__body{padding:0 var(--p-pad) 16px}
.sff-prog__panel-title{margin:28px 0 4px;font-size:22px;font-weight:800;letter-spacing:-.01em}
.sff-prog.is-ready .sff-prog__panel-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.sff-prog__slot{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;padding:20px 0;border-bottom:1px solid #f0ebe6}
.sff-prog__time{position:sticky;top:var(--p-sticky);align-self:start;display:flex;flex-direction:column;gap:6px}
.sff-prog__time-hm{font-size:32px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.sff-prog__time-count{font-size:12px;font-weight:500;color:var(--p-muted)}
.sff-prog__list{display:flex;flex-direction:column;gap:12px;min-width:0}

.sff-prog__item{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:20px;align-items:center;padding:14px 16px 14px 14px;border:1px solid var(--p-line);border-radius:16px;background:var(--p-bg);transition:border-color .2s}
.sff-prog__item:hover{border-color:var(--p-line-2)}
.sff-prog__poster{width:72px;height:104px;border-radius:10px;overflow:hidden;background:#f1ece6;background:color-mix(in srgb,var(--sff-prog-c,#b3aa9c) 20%,#fff);display:flex;align-items:center;justify-content:center;color:#3a3238}
.sff-prog__poster svg{width:26px;height:26px;opacity:.55}
.sff-prog__poster img,.sff-prog__poster-img{width:100%;height:100%;object-fit:cover;display:block}
.sff-prog__info{display:flex;flex-direction:column;gap:7px;min-width:0}
.sff-prog__tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sff-prog__section{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--p-soft)}
.sff-prog__section i{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.sff-prog__tag{padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;background:var(--p-ink);color:#fff}
.sff-prog__name{margin:0;font-family:var(--sff-sans,'Caros',system-ui,sans-serif);font-size:21px;font-weight:700;letter-spacing:-.01em;line-height:1.2;color:var(--p-ink)}
.sff-prog__name a{color:inherit;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:0 2px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .3s var(--sff-e,ease)}
.sff-prog__name a:hover,.sff-prog__name a:focus-visible{background-size:100% 2px}
.sff-prog__orig{margin-left:4px;font-size:15px;font-weight:500;font-style:italic;color:var(--p-muted)}
.sff-prog__meta{margin:0;font-size:13px;line-height:1.4;color:var(--p-soft)}
.sff-prog__where{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:13px;font-weight:600}
.sff-prog__where span{display:inline-flex;align-items:center;gap:6px}
.sff-prog__where svg{width:16px;height:16px}
.sff-prog__where a.sff-prog__venue{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:underline;text-decoration-color:rgba(23,19,15,.25);text-underline-offset:3px;transition:text-decoration-color .2s,color .2s}
.sff-prog__where a.sff-prog__venue:hover,.sff-prog__where a.sff-prog__venue:focus-visible{color:var(--p-red);text-decoration-color:currentColor}

/* ---- Actions ------------------------------------------------------------- */
.sff-prog__actions{position:relative;display:flex;align-items:center;gap:8px}
.sff-prog__star{width:44px;height:44px;border-radius:50%;border:1px solid var(--p-line-2);background:var(--p-bg);color:var(--p-ink);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;transition:border-color .2s,transform .2s}
.sff-prog__star:hover{border-color:var(--p-ink)}
.sff-prog__star svg{width:18px;height:18px;fill:none}
.sff-prog__star[aria-pressed="true"]{border-color:var(--p-red)}
.sff-prog__star[aria-pressed="true"] svg{fill:var(--p-red);stroke:var(--p-red)}
.sff-prog__star.is-pop{animation:sffProgPop .35s var(--sff-e,ease)}
.sff-prog__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 16px;border-radius:999px;border:1px solid transparent;font:inherit;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.sff-prog__btn svg{width:18px;height:18px}
.sff-prog__btn--line{border-color:var(--p-ink);background:var(--p-bg);color:var(--p-ink)}
.sff-prog__btn--line:hover,.sff-prog__btn--line[aria-expanded="true"]{background:var(--p-ink);color:#fff}
.sff-prog__btn--red{min-width:112px;padding:0 20px;background:var(--p-red);color:#fff;font-weight:700}
.sff-prog__btn--red:hover{background:var(--p-red-hover);color:#fff}
.sff-prog__btn--muted,.sff-prog__btn--note{min-width:112px;padding:0 18px;font-weight:700;cursor:default}
.sff-prog__btn--muted{background:#efebe7;color:var(--p-muted)}
.sff-prog__btn--note{background:#e3f4ef;color:#1f5f4f}
.sff-prog__btn-sm{display:none}

/* ---- Calendar menu ------------------------------------------------------- */
.sff-prog__calmenu{position:absolute;top:calc(100% + 8px);right:0;z-index:20;width:270px;display:flex;flex-direction:column;padding:8px;background:var(--p-bg);border:1px solid #e7e1db;border-radius:14px;box-shadow:0 18px 50px rgba(20,12,16,.18)}
.sff-prog__calmenu.is-up{top:auto;bottom:calc(100% + 8px)}
.sff-prog__calmenu-title{padding:8px 10px 6px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--p-muted)}
.sff-prog__calmenu a{display:flex;align-items:center;gap:12px;height:44px;padding:0 10px;border-radius:10px;color:var(--p-ink);text-decoration:none;font-size:14px;font-weight:600}
.sff-prog__calmenu a:hover,.sff-prog__calmenu a:focus-visible{background:var(--p-hush);outline:none}
.sff-prog__calmenu svg{width:18px;height:18px}

/* ---- Empty / note / toast ------------------------------------------------ */
.sff-prog__empty{margin:0;padding:56px 0;text-align:center;font-size:15px;color:var(--p-soft)}
.sff-prog__empty--filtered{display:flex;flex-direction:column;align-items:center;gap:14px}
.sff-prog__empty--filtered p{margin:0;font-size:18px;font-weight:700;color:var(--p-ink)}
.sff-prog__clear{height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--p-ink);background:var(--p-bg);color:var(--p-ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.sff-prog__clear:hover{background:var(--p-ink);color:#fff}
.sff-prog__note{margin:0;padding:16px var(--p-pad);border-top:1px solid #eee8e2;text-align:center;font-size:13px;color:var(--p-soft)}
.sff-prog__toast{position:fixed;left:50%;bottom:24px;z-index:1001;transform:translate(-50%,16px);padding:11px 18px;border-radius:999px;background:var(--p-ink);color:#fff;font-size:13px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--sff-e,ease)}
.sff-prog__toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---- Programme page ------------------------------------------------------ */
.sff-prog-page{position:relative;z-index:1;padding:8px 0 80px}
.sff-prog-page .sff-prog{--p-sticky:88px;border:1px solid var(--p-line);box-shadow:0 30px 80px -40px rgba(23,19,15,.35)}

/* ---- Popup (<dialog>) ---------------------------------------------------- */
html.sff-prog-lock{overflow:hidden}
.sff-prog-dialog{width:min(1200px,calc(100vw - 48px));max-width:none;height:min(860px,calc(100vh - 48px));height:min(860px,calc(100dvh - 48px));max-height:none;margin:auto;padding:0;border:0;border-radius:22px;background:#fff;color:var(--sff-ink,#17130F);box-shadow:0 40px 120px rgba(0,0,0,.45);overflow:hidden}
.sff-prog-dialog[open]{display:flex;flex-direction:column;animation:sffProgIn .4s var(--sff-e,ease)}
.sff-prog-dialog::backdrop{background:rgba(14,9,11,.68);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.sff-prog-dialog .sff-prog{flex:1;min-height:0;display:flex;flex-direction:column;border-radius:0}
.sff-prog-dialog .sff-prog__head,.sff-prog-dialog .sff-prog__days,.sff-prog-dialog .sff-prog__bar,.sff-prog-dialog .sff-prog__note{flex-shrink:0}
.sff-prog-dialog .sff-prog__body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sff-prog-dialog__state{margin:auto;display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px;text-align:center;font-family:var(--sff-sans,'Caros',system-ui,sans-serif);font-size:15px;color:var(--sff-ink-soft,#4A433A)}
.sff-prog-dialog__spin{width:34px;height:34px;border-radius:50%;border:3px solid #eee8e2;border-top-color:#d02a37;animation:sffProgSpin .8s linear infinite}
.sff-prog-dialog__x{position:absolute;top:16px;right:16px;width:46px;height:46px;border:0;border-radius:50%;background:var(--sff-ink,#17130F);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.sff-prog-dialog__x svg{width:18px;height:18px}

@keyframes sffProgIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@keyframes sffProgSpin{to{transform:rotate(360deg)}}
@keyframes sffProgPop{50%{transform:scale(1.18)}}

/* ---- Tablet -------------------------------------------------------------- */
@media (max-width:1024px){
  .sff-prog{--p-pad:28px}
  .sff-prog__head{flex-wrap:wrap;align-items:flex-start}
  .sff-prog__tools{flex:1 1 100%}
  .sff-prog__search{flex:1;width:auto}
  .sff-prog__item{grid-template-columns:72px minmax(0,1fr)}
  .sff-prog__actions{grid-column:2}
}

/* ---- Phone --------------------------------------------------------------- */
@media (max-width:700px){
  .sff-prog{--p-pad:16px;--p-sticky:0px;border-radius:18px}
  .sff-prog-page{padding:0 0 48px}
  .sff-prog-page .sff-wrap{padding:0 12px}
  .sff-prog-page .sff-prog{--p-sticky:0px}

  .sff-prog__head{display:grid;grid-template-columns:1fr auto auto;grid-template-areas:"t s c" "q q q";align-items:start;gap:12px 8px;padding:18px var(--p-pad) 12px}
  .sff-prog__titles{grid-area:t;gap:6px}
  .sff-prog__eyebrow{font-size:11px}
  .sff-prog__eyebrow-full{display:none}
  .sff-prog__eyebrow-short{display:inline}
  .sff-prog__title{font-size:34px}
  .sff-prog__tools{display:contents}
  .sff-prog__search{grid-area:q;width:auto;height:46px;border:0;border-radius:14px;background:var(--p-hush);padding:0 14px}
  .sff-prog__search input{font-size:16px} /* 16px: no zoom-on-focus on iOS */
  [data-sff-prog-share]{grid-area:s;width:44px;height:44px}
  .sff-prog__icon--close{grid-area:c;width:44px;height:44px}

  .sff-prog__days{grid-template-columns:repeat(var(--sff-prog-n,6),minmax(52px,1fr));gap:6px;padding:0 var(--p-pad) 12px}
  .sff-prog__day{height:68px;padding:0;align-items:center;justify-content:center;gap:4px;text-align:center;border-radius:14px}
  .sff-prog__day-wd{font-size:11px;letter-spacing:.08em}
  .sff-prog__day-wd-long,.sff-prog__day-num span,.sff-prog__day-count{display:none}
  .sff-prog__day-wd-short{display:inline}
  .sff-prog__day-num b{font-size:22px}
  .sff-prog__day.has-match::after{top:6px;right:6px}

  .sff-prog__bar{padding:0 var(--p-pad) 12px}
  .sff-prog__daylabel{display:none}
  .sff-prog__filters{width:100%}
  .sff-prog__mine{order:-1;flex-shrink:0;height:40px}
  .sff-prog__select-wrap{flex:1;min-width:0}
  .sff-prog__select{width:100%;height:40px}

  .sff-prog__body{padding:0 var(--p-pad) 24px}
  .sff-prog__panel-title{margin-top:20px}
  .sff-prog__slot{grid-template-columns:1fr;gap:10px;padding:0 0 6px;border-bottom:0}
  .sff-prog__time{position:sticky;top:var(--p-sticky);z-index:2;flex-direction:row;align-items:center;gap:10px;padding:14px 0 6px;background:var(--p-bg)}
  .sff-prog__time-hm{font-size:22px}
  .sff-prog__time::after{content:"";order:1;flex:1;height:1px;background:#eee8e2}
  .sff-prog__time-count{order:2}

  .sff-prog__item{grid-template-columns:58px minmax(0,1fr);gap:12px;align-items:start;padding:12px}
  .sff-prog__poster{width:58px;height:84px;border-radius:9px}
  .sff-prog__poster svg{width:22px;height:22px}
  .sff-prog__info{gap:4px}
  .sff-prog__section{font-size:10px}
  .sff-prog__name{font-size:17px}
  .sff-prog__orig{display:block;margin:2px 0 0;font-size:13px}
  .sff-prog__meta,.sff-prog__where{font-size:12px}
  .sff-prog__where{gap:4px 10px}
  .sff-prog__where svg{width:14px;height:14px}
  .sff-prog__actions{grid-column:1/-1}
  .sff-prog__star{border-radius:12px}
  .sff-prog__btn{flex:1 1 0;min-width:0;padding:0 10px;border-radius:12px}
  .sff-prog__btn-lg{display:none}
  .sff-prog__btn-sm{display:inline}

  /* Calendar choices become a bottom sheet. */
  .sff-prog__calmenu,.sff-prog__calmenu.is-up{position:fixed;top:auto;bottom:0;left:0;right:0;width:auto;z-index:1000;padding:12px 16px calc(20px + env(safe-area-inset-bottom));border:0;border-radius:22px 22px 0 0;box-shadow:0 0 0 100vmax rgba(14,9,11,.55);gap:8px}
  .sff-prog__calmenu-title{padding:6px 4px 2px;font-size:12px}
  .sff-prog__calmenu a{height:56px;padding:0 14px;border-radius:14px;background:#f7f4f0;font-size:15px}

  .sff-prog__note{padding:14px var(--p-pad)}
  .sff-prog__toast{bottom:calc(20px + env(safe-area-inset-bottom))}

  .sff-prog-dialog{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;margin:0;border-radius:0}
  .sff-prog-dialog .sff-prog{border-radius:0}
}

@media (prefers-reduced-motion:reduce){
  .sff-prog-dialog[open],.sff-prog__star.is-pop{animation:none}
  .sff-prog__toast,.sff-prog__name a{transition:none}
}