/* ====== Base / Layout ====== */
.stelr-eb { --sidebar-w: 140px; --gutter: 16px; --accent:#dc2f2f; --muted:#a8abad; --ink:#233347; --ink2:#3d5066; }
.stelr-eb, .stelr-eb * { box-sizing: border-box; }
.stelr-eb a { color: inherit; text-decoration: none; }

/* Default: map hidden → 2 columns; when .map-visible → 3 columns */
#stelr-eb-layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  gap: var(--gutter);
  align-items: start;
}
#stelr-eb-layout.map-visible { grid-template-columns: var(--sidebar-w) 1fr 36%; }

/* ====== Date “wheel” (fixed & vertically centered) ====== */
.stelr-eb .stelr-eb-date-index{
  position: sticky;
  top: calc(50vh - 240px); /* vertical center lock */
  height: 480px;           /* fixed column height so it stays centered */
  overflow: hidden;        /* we render only a handful of items sized with spacing */
  padding-left: 4px;
  border-right: 1px solid #eee;
}
.stelr-eb .stelr-eb-date-index .d{
  display: grid; justify-items: center; gap: 4px;
  padding: 28px 0; cursor: pointer;
  color: #cbd5e1; transition: color .2s ease, transform .2s ease;
}
.stelr-eb .stelr-eb-date-index .d .dow{ font-size: 13px; color:#9aa7b5; }
.stelr-eb .stelr-eb-date-index .d .day{ font-size: 86px; line-height:.9; color:#e5e7eb; }
.stelr-eb .stelr-eb-date-index .d .month{ font-size: 12px; text-transform: capitalize; color:#cbd5e1; }
.stelr-eb .stelr-eb-date-index .d:hover{ transform: scale(1.02); }
.stelr-eb .stelr-eb-date-index .d.active{ color:#1f344a; }
.stelr-eb .stelr-eb-date-index .d.active .day{ color: var(--accent); }
.stelr-eb .stelr-eb-date-index .d.active .dow{ color:#1f344a; }
.stelr-eb .stelr-eb-date-index .d.active .month{ color:#64748b; }

/* ====== Filters (ensure button is visible) ====== */
.stelr-eb .stelr-eb-filters{
  position: sticky; top: 0; z-index: 10;
  background:#fff; padding:10px; border-bottom:1px solid #eee;
  display:grid; grid-template-columns: 1fr 140px 140px 1fr 1fr auto; gap:8px;
}
.stelr-eb .stelr-eb-filters input,
.stelr-eb .stelr-eb-filters select,
.stelr-eb .stelr-eb-filters button{
  border:1px solid #e2e8f0; border-radius:6px; padding:8px 10px; font-size:14px;
  background:#fff;
}
.stelr-eb .stelr-eb-filters .stelr-eb-toggle-map{
  background:#f7fafc; font-weight:600; display:inline-block; visibility:visible;
}

/* ====== Day heading ====== */
.stelr-eb .stelr-eb-day-heading{
  text-align:center; font-weight:700; color:var(--ink);
  margin: 18px 0 6px; position:relative; font-size:34px;
}
.stelr-eb .stelr-eb-day-heading::before,
.stelr-eb .stelr-eb-day-heading::after{
  content:""; height:2px; background:#e5e7eb; position:absolute; top:50%; width:30%;
}
.stelr-eb .stelr-eb-day-heading::before{ left:0; }
.stelr-eb .stelr-eb-day-heading::after{ right:0; }

/* ====== LIST cards (match reference) ====== */
.stelr-eb .stelr-eb-cards{ display:grid; gap:14px; }
.stelr-eb .eb-card{
  display:grid; grid-template-columns: 160px 1fr 140px; align-items:center;
  background:#f6f8fa; border:1px solid #edf1f5; border-radius:8px;
  padding:18px 16px; gap:16px; transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.stelr-eb .eb-card:hover{ transform: translateY(-1px); box-shadow:0 2px 10px rgba(15,23,42,.08); background:#fff; }

.stelr-eb .eb-card .date{ text-align:left; color:#6b859f; }
.stelr-eb .eb-card .date .dow{ font-size:18px; font-weight:600; }
.stelr-eb .eb-card .date .line2{ display:flex; align-items:baseline; gap:10px; margin-top:4px; }
.stelr-eb .eb-card .date .day-big{ font-size:42px; font-weight:800; color:#d23a31; line-height:1; }
.stelr-eb .eb-card .date .year{ font-size:26px; font-weight:700; color:#29445e; }
.stelr-eb .eb-card .date .month{ font-size:16px; color:#9aa7b5; margin-top:4px; }

.stelr-eb .eb-card .title{ font-size:20px; font-weight:800; color:#1f344a; }
.stelr-eb .eb-card .org{ color:#d22f2f; font-weight:700; margin-top:4px; }
.stelr-eb .eb-card .tags{ color:#6b7280; font-size:13px; margin-top:8px; }

.stelr-eb .eb-card .mode{
  justify-self:end; color:#111827; font-size:12px;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:18px; border:1px solid #e5e7eb; background:#fff;
}

/* ====== MAP column — hidden by default ====== */
.stelr-eb .stelr-eb-map-wrap{ display:none; }
#stelr-eb-layout.map-visible .stelr-eb-map-wrap{
  display:block; position:sticky; top:80px; height:calc(100vh - 100px);
}
#stelr-eb-map{ width:100%; height:100%; border:1px solid #e5e7eb; border-radius:8px; }

/* Loader */
.stelr-eb .stelr-eb-loader{ text-align:center; padding:16px; color:#64748b; }

/* Lightbox */
.stelr-eb .stelr-eb-lightbox{ position:fixed; inset:0; z-index:999999; display:none; }
.stelr-eb .stelr-eb-lightbox.is-open{ display:block; }
.stelr-eb .stelr-eb-lightbox-bg{ position:absolute; inset:0; background:rgba(15,23,42,.62); opacity:0; transition:opacity .3s ease; }
.stelr-eb .stelr-eb-lightbox.is-open .stelr-eb-lightbox-bg{ opacity:1; }
.stelr-eb .stelr-eb-lightbox-panel{
  position:absolute; inset:auto 6% 6% 6%; top:6%;
  background:#fff; border-radius:10px; box-shadow:0 12px 40px rgba(0,0,0,.25);
  opacity:0; transform:scale(.98); transition:opacity .3s ease, transform .3s ease;
  display:flex; flex-direction:column;
}
.stelr-eb .stelr-eb-lightbox.is-open .stelr-eb-lightbox-panel{ opacity:1; transform:scale(1); }
.stelr-eb .stelr-eb-lightbox-close{
  position:absolute; right:12px; top:8px; background:#fff; border:1px solid #e5e7eb;
  border-radius:50%; width:34px; height:34px; font-size:20px; line-height:30px; cursor:pointer; z-index:2;
}
.stelr-eb .stelr-eb-iframe{ width:100%; height:100%; border:0; border-radius:10px; }

/* Responsive */
@media (max-width:1100px){
  #stelr-eb-layout.map-visible{ grid-template-columns: var(--sidebar-w) 1fr; }
  #stelr-eb-layout .stelr-eb-map-wrap{ grid-column:1/-1; height:420px; position:relative; top:0; }
}
@media (max-width:760px){
  .stelr-eb { --sidebar-w: 72px; }
  .stelr-eb .stelr-eb-filters{ grid-template-columns: 1fr 1fr; }
  .stelr-eb .eb-card{ grid-template-columns: 130px 1fr; }
  .stelr-eb .eb-card .mode{ display:none; }
}

/* === v1.0.10 — Date index, mobile strip, and visual tweaks === */

/* Requested visual tweaks */
.stelr-eb .stelr-eb-day-heading {
  font-weight: 800;
  color: #dc2f2f;
  font-size: 20px;
}
.stelr-eb .stelr-eb-day-heading::before,
.stelr-eb .stelr-eb-day-heading::after {
  height: 2px;
  background: #dc2f2f;
}
.stelr-eb .eb-card {
  background: #f7f7f7;
  border: 0;
  border-radius: 0;
}
.stelr-eb .stelr-eb-cards { gap: 6px; }
.mode, .tags { display: none !important; }
.stelr-eb .eb-card .date .month { font-size: 14px; margin-top: 0; }
.stelr-eb .eb-card .date .dow { font-size: 14px; font-weight: 400; color: #9aa7b5; }
.stelr-eb .eb-card .date .line2 { gap: 12px; }
.stelr-eb .eb-card .date .day-big { font-size: 26px; font-weight: 600; line-height: 1; }
.stelr-eb .eb-card .date .year { font-size: 26px; font-weight: 600; line-height: 1; }
.stelr-eb .eb-card .org { color: #d22f2f; font-weight: 700; margin-top: 0; }

/* Prevent clipped dates; allow scrolling if index is taller than viewport */
.stelr-eb .stelr-eb-date-index {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.stelr-eb .stelr-eb-date-index .d {
  padding: 28px 0;
  min-height: 140px;
  overflow: visible;
}
.stelr-eb .stelr-eb-date-index .d .day { line-height: 1; }

/* Mobile: horizontal date index above the list */
@media (max-width: 767px) {
  .stelr-eb {
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 12px;
  }
  .stelr-eb .stelr-eb-date-index {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: visible;
    white-space: nowrap;
    border-bottom: 1px solid #eee;
    padding: 8px 8px 10px;
    scroll-snap-type: x mandatory;
    height: auto;
    position: static;
  }
  .stelr-eb .stelr-eb-date-index .d {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-height: auto;
    padding: 10px 14px;
    scroll-snap-align: start;
    border-radius: 8px;
    background: transparent;
  }
  .stelr-eb .stelr-eb-date-index .d .day { font-size: 28px; }
}

/* === v1.0.11 fixes === */
/* 1) Hide legacy single heading to avoid duplicate first heading */
.stelr-eb #stelr-eb-day-heading{ display:none !important; }

/* 2) Mobile/tablet: stack layout; calendar strip gets its own full-width row */
@media (max-width: 991px){
  #stelr-eb-layout{ display: grid; grid-template-columns: 1fr !important; gap: 12px; }
  #stelr-eb-layout .stelr-eb-map-wrap{ grid-column: 1 / -1; }
}

/* Horizontal date strip full width on mobile; cards stack */
@media (max-width: 767px){
  .stelr-eb .stelr-eb-date-index{
    display:flex;
    width:100%;
    gap:12px;
    overflow-x:auto;
    overflow-y:visible;
    white-space:nowrap;
    border-right: none;
    border-bottom:1px solid #eee;
    padding: 8px 8px 10px;
    scroll-snap-type:x mandatory;
    position: static;
    height:auto;
  }
  .stelr-eb .stelr-eb-date-index .d{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    min-height:auto;
    padding:10px 14px;
    scroll-snap-align:start;
    border-radius:8px;
    background:transparent;
  }

  .stelr-eb .stelr-eb-cards{ gap:10px; }
  .stelr-eb .eb-card{ grid-template-columns: 1fr !important; align-items:start; }
  .stelr-eb .eb-card .date{ margin-bottom:8px; }
}