/* It's FOSS — Events directory styles
   All selectors are scoped under #iff-events so nothing leaks into Rinne
   and Rinne can't bleed into the app. Colors consume Rinne's custom
   properties where sensible (with fallbacks) so the page blends with the
   theme and follows its dark mode automatically. Dark overrides for the
   app-specific accents (coupon/shadows) are keyed to Rinne's
   html[data-color-scheme='dark'] attribute. */

#iff-events{
  /* Blend with Rinne: fall back to sensible values when run standalone */
  --iff-text: var(--color-text, #16241f);
  --iff-dim:  var(--color-neutral, #5b6b64);
  --iff-bg:   var(--color-bg, #ffffff);
  --iff-surface: var(--color-bg-acc, #f6f8f7);
  --iff-surface-2:#eef2f0;
  --iff-border: var(--color-border, #e3e9e6);
  /* App-specific accents (not from theme) */
  --iff-a:#0d9488; --iff-b:#2563eb;
  --iff-gradient:linear-gradient(135deg,#0d9488 0%,#2563eb 100%);
  --iff-coupon-bg:#fef3c7; --iff-coupon-text:#92500e; --iff-coupon-border:#f59e0b;
  --iff-live:#dc2626;
  --iff-radius:14px; --iff-radius-sm:9px;
  --iff-shadow:0 1px 2px rgba(16,36,31,.06),0 8px 24px -12px rgba(16,36,31,.14);

  color:var(--iff-text);
  font-family:inherit;           /* inherit Rinne's fonts */
  line-height:1.5;
}
html[data-color-scheme='dark'] #iff-events{
  --iff-surface-2:#1c2a24;
  --iff-coupon-bg:rgba(245,158,11,.12); --iff-coupon-text:#fbbf24;
  --iff-coupon-border:rgba(245,158,11,.45);
  --iff-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -12px rgba(0,0,0,.6);
}

#iff-events *{box-sizing:border-box}
#iff-events a{color:inherit;text-decoration:none}
#iff-events .iff-wrap{max-width:1160px;margin:0 auto;padding:0 20px}

/* Header */
#iff-events .iff-head{padding:36px 0 8px}
#iff-events .iff-kicker{display:inline-flex;align-items:center;gap:8px;font-size:13px;
  font-weight:600;color:var(--iff-a);margin-bottom:14px}
#iff-events .iff-kicker .iff-dot{width:7px;height:7px;border-radius:50%;background:var(--iff-gradient)}
#iff-events h1.iff-title{font-size:clamp(28px,5vw,44px);line-height:1.05;letter-spacing:-.02em;
  font-weight:800;margin:0 0 12px;color:var(--iff-text)}
#iff-events .iff-lede{font-size:17px;color:var(--iff-dim);max-width:60ch;margin:0}

/* Section heads */
#iff-events .iff-sec-head{display:flex;align-items:baseline;justify-content:space-between;margin:32px 0 14px}
#iff-events .iff-sec-head h2{font-size:15px;font-weight:700;margin:0;color:var(--iff-text)}
#iff-events .iff-sec-head .iff-count{font-size:13px;color:var(--iff-dim)}

/* Featured rail */
#iff-events .iff-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,1fr);
  gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 12px;margin:0 -4px;scrollbar-width:thin}
#iff-events .iff-rail>*{scroll-snap-align:start}
@media(min-width:900px){#iff-events .iff-rail{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible}}

/* Toolbar */
#iff-events .iff-toolbar{position:sticky;top:0;z-index:20;background:var(--iff-bg);
  border-bottom:1px solid var(--iff-border);padding:12px 0;margin-top:24px}
#iff-events .iff-toolbar-inner{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
#iff-events .iff-search{flex:1 1 240px;min-width:180px;position:relative;display:block}
#iff-events .iff-search input{display:block;width:100%;padding:10px 12px 10px 36px;border:1px solid var(--iff-border);
  background:var(--iff-surface);color:var(--iff-text);border-radius:var(--iff-radius-sm);font-size:14px;font-family:inherit}
#iff-events .iff-search svg{position:absolute;left:11px;top:0;bottom:0;margin:auto 0;
  width:16px;height:16px;color:var(--iff-dim)}
#iff-events select.iff-filter{padding:9px 30px 9px 12px;border:1px solid var(--iff-border);
  background:var(--iff-surface);color:var(--iff-text);border-radius:var(--iff-radius-sm);font-size:14px;
  font-family:inherit;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6b64' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center}
#iff-events .iff-clear{margin-left:auto;font-size:13px;color:var(--iff-b);background:none;border:none;
  cursor:pointer;font-family:inherit;padding:6px}
#iff-events .iff-clear[hidden]{display:none}

/* Grid */
#iff-events .iff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin:22px 0 60px}

/* Card */
#iff-events .iff-card{display:flex;flex-direction:column;background:var(--iff-surface);
  border:1px solid var(--iff-border);border-radius:var(--iff-radius);overflow:hidden;
  box-shadow:var(--iff-shadow);transition:transform .15s ease}
#iff-events .iff-card:hover{transform:translateY(-3px)}
#iff-events .iff-card:focus-visible{outline:2px solid var(--iff-b);outline-offset:2px}
#iff-events .iff-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--iff-surface-2)}
#iff-events .iff-media img{width:100%;height:100%;object-fit:cover;display:block}
#iff-events .iff-media.fallback{background:var(--iff-gradient);display:flex;align-items:center;
  justify-content:center;padding:16px;text-align:center}
#iff-events .iff-media.fallback::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 22% 18%,rgba(255,255,255,.22),transparent 45%)}
#iff-events .iff-media.fallback .iff-fname{position:relative;color:#fff;font-weight:800;font-size:18px;
  letter-spacing:-.01em;line-height:1.2;text-shadow:0 1px 12px rgba(0,0,0,.18)}
#iff-events .iff-over{position:absolute;top:10px;left:10px;right:10px;display:flex;
  justify-content:space-between;gap:8px;pointer-events:none}
#iff-events .iff-badge{font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;
  background:rgba(15,22,19,.72);color:#fff;backdrop-filter:blur(3px)}
#iff-events .iff-badge.mode-online{background:rgba(37,99,235,.9)}
#iff-events .iff-badge.mode-hybrid{background:rgba(13,148,136,.92)}
#iff-events .iff-badge.featured{background:var(--iff-gradient)}
#iff-events .iff-badge.live{background:var(--iff-live);animation:iff-pulse 1.8s infinite}
@keyframes iff-pulse{0%,100%{opacity:1}50%{opacity:.55}}

#iff-events .iff-body{padding:14px 15px 15px;display:flex;flex-direction:column;gap:9px;flex:1}
#iff-events .iff-cats{display:flex;gap:6px;flex-wrap:wrap}
#iff-events .iff-cat{font-size:11px;font-weight:600;color:var(--iff-a);
  background:color-mix(in srgb,var(--iff-a) 10%,transparent);padding:3px 8px;border-radius:6px}
html[data-color-scheme='dark'] #iff-events .iff-cat{background:color-mix(in srgb,var(--iff-a) 18%,transparent)}
#iff-events .iff-name{font-size:16.5px;font-weight:700;line-height:1.25;letter-spacing:-.01em;margin:0;color:var(--iff-text)}
#iff-events .iff-meta{font-size:13.5px;color:var(--iff-dim);display:flex;flex-direction:column;gap:3px}
#iff-events .iff-meta .iff-row{display:flex;align-items:center;gap:7px}
#iff-events .iff-meta svg{width:14px;height:14px;flex:none;opacity:.8;vertical-align:middle}
#iff-events .iff-when{color:var(--iff-text);font-weight:600}
#iff-events .iff-rel{font-weight:600;color:var(--iff-b)}
#iff-events .iff-rel.soon{color:#c2410c}
#iff-events .iff-foot{margin-top:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:4px}
#iff-events .iff-price{font-size:13.5px;font-weight:700;color:var(--iff-text)}
#iff-events .iff-price.free{color:var(--iff-a)}
#iff-events .iff-coupon{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  background:var(--iff-coupon-bg);color:var(--iff-coupon-text);border:1px dashed var(--iff-coupon-border);
  padding:4px 9px;border-radius:7px}
#iff-events .iff-coupon .iff-tag{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
#iff-events .iff-cfp{font-size:12px;color:var(--iff-dim)}
#iff-events .iff-cfp b{color:var(--iff-text)}

#iff-events .iff-empty{grid-column:1/-1;text-align:center;padding:70px 20px;color:var(--iff-dim)}
#iff-events .iff-empty h3{color:var(--iff-text);margin:0 0 6px}
#iff-events .iff-loading{grid-column:1/-1;text-align:center;padding:70px 20px;color:var(--iff-dim)}

/* Just-concluded */
#iff-events .iff-concluded .iff-card{opacity:.72;filter:grayscale(.35)}
#iff-events .iff-concluded .iff-badge.just{background:#64748b}

@media (prefers-reduced-motion:reduce){
  #iff-events .iff-card{transition:none}
  #iff-events .iff-badge.live{animation:none}
}

/* Contact CTA */
#iff-events .iff-contact{display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  margin:16px 0 0;font-size:14px;color:var(--iff-dim)}
#iff-events .iff-contact-btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;
  font-weight:700;color:#fff;background:var(--iff-gradient);padding:8px 14px;border-radius:999px;
  transition:transform .15s ease,opacity .15s ease}
#iff-events .iff-contact-btn:hover{transform:translateY(-1px);opacity:.95}
#iff-events .iff-contact-btn:focus-visible{outline:2px solid var(--iff-b);outline-offset:2px}
@media (prefers-reduced-motion:reduce){#iff-events .iff-contact-btn{transition:none}}