/* ==========================================================================
   OD Agenda Calendar v1.6.0 (clean + cards with date badge)
   ========================================================================== */

/* Base layout */
.od-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  --brand-yellow:#DDA738;
  --brand-dark:#303943;
  --brand-teal:#127C6B;
  --surface:#fff;
  --muted:#F3F4F6;
  --shadow:0 8px 30px rgba(0,0,0,.06);
}
@media (min-width:900px) {
  .od-layout:not(.od-layout--overlay) {
    grid-template-columns:1.2fr .8fr;
    align-items:start;
  }
}

/* Calendar shell */
.od-agenda-wrapper {
  background:var(--surface);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:12px 12px 14px;
  position:relative;
  overflow:hidden;
}
.od-brand-head {
  margin:-12px -12px 10px;
  padding:12px;
  background:#FFD949;
  color:#1b1b1b;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  border-bottom-left-radius:20px;
  border-bottom-right-radius:20px;
}
.od-brand-head .od-head-title { font-weight:800 }
.od-brand-head .od-nav {
  display:flex;
  align-items:center;
  gap:10px;
  background:#FFD949;
  padding:6px 8px;
  border-radius:999px;
}
.od-brand-head .od-title {
  font-weight:800;
  color:#1F1542;
  background:transparent;
  padding:4px 10px;
  border-radius:999px;
  border:0;
  white-space:nowrap;
}
.od-brand-head .od-prev,
.od-brand-head .od-next {
  background:#FFD949;
  border:0;
  border-radius:999px;
  padding:5px 12px;
  cursor:pointer;
  box-shadow:0 0 0 rgba(0,0,0,0.05);
  touch-action:manipulation;
}

/* Weekdays + grid */
.od-weekdays,.od-days {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:10px;
}
.od-weekdays {
  font-weight:700;
  color:var(--brand-dark);
  opacity:.8;
}
.od-days { margin-top:6px }
.od-day {
  background:#fff;
  border:1px solid #EEF1FF;
  border-radius:16px;
  padding:12px;
  min-height:64px;
  position:relative;
  cursor:pointer;
  transition:transform .06s ease,box-shadow .2s ease,outline .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.od-day:active { transform:scale(.98) }
.od-day.has-events {
  background:linear-gradient(180deg,#F9FBFF,#FFFFFF);
  border-color:#DCE6FF;
}
.od-day .od-num { font-weight:800; font-size:.95rem; color:var(--brand-dark) }
.od-day .od-dots {
  position:absolute; bottom:8px; left:12px;
  display:flex; gap:5px;
}
.od-dot {
  width:7px; height:7px; border-radius:50%;
  background:#c7d7ff; opacity:.9;
}
.od-dot:nth-child(2){ background:#bad3c0 }
.od-dot:nth-child(3){ background:#ffd6a0 }

/* Selected day */
.od-day.od-active {
  outline:2px solid var(--brand-teal);
  box-shadow:0 0 0 4px rgba(18,124,107,.08);
}

/* Month empty */
.od-month-empty {
  text-align:center;
  background:#fff;
  border:1px dashed #e5e7eb;
  padding:14px;
  border-radius:14px;
  margin-top:10px;
}
.od-cta {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  border-radius:16px;
  background:var(--brand-teal);
  color:#fff;
  text-decoration:none;
  font-weight:800;
  box-shadow:0 6px 18px rgba(18,124,107,.18);
}

/* Sidepanel */
.od-sidepanel {
  background:var(--surface);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:14px;
  position:sticky;
  top:8px;
  max-height:calc(100vh - 16px);
  overflow:auto;
}
.od-pillbar {
  display:flex; gap:10px; margin-bottom:10px;
  overflow:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.od-pillbar::-webkit-scrollbar{ display:none }
.od-pill {
  appearance:none;
  border:1px solid #E5E7EB;
  background:#fff;
  color:var(--brand-dark);
  border-radius:999px;
  padding:8px 14px;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
  touch-action:manipulation;
}
.od-pill--active { background:var(--brand-dark); color:#fff; border-color:var(--brand-dark) }
.od-features { margin:4px 0 12px 18px; color:var(--brand-dark) }
.od-side-empty { text-align:left; color:#6b7280; padding:6px 0 10px }
.od-side-date { font-weight:900; font-size:1.05rem; margin:4px 0 6px; display:none; color:var(--brand-dark) }
.od-side-list .od-item {
  padding:12px 0;
  border-top:1px solid #f0f2f7;
  display:flex; gap:12px; align-items:center;
}
.od-item .od-time { font-weight:800; width:72px; flex:0 0 72px; color:var(--brand-dark) }
.od-item .od-title a {
  font-weight:800;
  text-decoration:none;
  color:var(--brand-dark);
  word-break:break-word;
  overflow-wrap:anywhere;
}
.od-item .od-title a:hover { text-decoration:underline }
.od-item .od-badge {
  margin-left:auto; font-size:.75rem;
  background:#F6F7FB;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid #E5E7EB;
  color:var(--brand-dark);
}

/* Overlay (mobile) */
.od-overlay[hidden]{ display:none!important }
.od-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  display:flex; align-items:flex-end; justify-content:center;
  padding:0; z-index:9999;
}
.od-overlay-inner {
  background:#fff;
  width:100%; max-width:720px;
  max-height:calc(100dvh - 16px);
  border-top-left-radius:20px; border-top-right-radius:20px;
  box-shadow:var(--shadow);
  padding:12px 16px 16px;
  overflow:auto;
  padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px));
}
@supports not (max-height:100dvh){ .od-overlay-inner{ max-height:90vh } }
.od-close {
  float:right; background:#f2f2f2;
  border:0; border-radius:10px;
  padding:10px 12px; cursor:pointer;
  touch-action:manipulation;
}
.od-overlay-date {
  font-weight:900; font-size:1.05rem;
  margin:6px 0 8px; color:var(--brand-dark);
}
.od-overlay .od-pillbar { margin:4px 0 8px }
.od-overlay-list .od-item {
  padding:10px 0;
  border-top:1px solid #eee;
  display:flex; gap:12px; align-items:center;
}
.od-overlay .od-cta { display:inline-flex; margin-top:8px }

/* Prevent scroll when overlay open */
html.od-lock, body.od-lock { overflow:hidden; position:fixed; width:100% }

/* ==========================================================================
   Soonest Grid Cards
   ========================================================================== */
.od-soonest-grid {
  display:grid;
  gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
.od-card {
  display:flex; flex-direction:column;
  background:#fff;
  border-radius:22px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  overflow:hidden;
  text-decoration:none; color:inherit;
}
.od-card-top { position:relative }
.od-card-media {
  position:relative;
  aspect-ratio:16/9;
  border-top-left-radius:22px; border-top-right-radius:22px;
  overflow:hidden;
  background-size:cover;
  background-position:center;
}
.od-card-media .od-card-img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
}
/* Date badge */
.od-card-date {
  position:absolute; top:10px; right:10px;
  background:var(--brand-yellow);
  color:#1F1542;
  border-radius:14px;
  padding:6px 10px;
  font-weight:800;
  line-height:1.1;
  box-shadow:0 6px 18px rgba(0,0,0,.14);
  display:flex; flex-direction:column;
  align-items:flex-end; gap:2px;
}
.od-card-date__d { font-size:.95rem }
.od-card-date__t { font-size:.8rem; opacity:.95 }
/* Body */
.od-card-body { padding:16px 18px 18px }
.od-card-subtitle {
  color:#6b7280; font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-style:italic;
  margin-bottom:6px;
}
.od-card-title {
  margin:0 0 10px;
  line-height:1.2;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--brand-dark);
  font-size:1.18rem;
}
.od-card-meta {
  display:flex; gap:14px; flex-wrap:wrap;
  font-size:.9rem;
}
.od-ico {
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; color:var(--brand-teal);
}
.od-ico:before {
  content:""; width:16px; height:16px;
  display:inline-block;
  background-size:16px 16px; background-repeat:no-repeat;
}
.od-ico--clock:before {
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><circle cx="8" cy="8" r="7" fill="none" stroke="%23127C6B" stroke-width="2"/><path d="M8 4v4l3 2" stroke="%23127C6B" stroke-width="2" fill="none" stroke-linecap="round"/></svg>');
}
.od-ico--stops:before {
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><circle cx="3" cy="8" r="2" fill="%23127C6B"/><circle cx="13" cy="8" r="2" fill="%23127C6B"/><path d="M5 8h6" stroke="%23127C6B" stroke-width="2" fill="none" stroke-linecap="round"/></svg>');
}

/* ==========================================================================
   Responsive tweaks
   ========================================================================== */
@media(max-width:899px){
  .od-sidepanel{ display:none }
  .od-agenda-wrapper{ padding:10px; margin-left:auto; margin-right:auto; max-width:480px }
  .od-day{ min-height:64px; padding:12px }
  .od-item .od-time{ width:64px; flex-basis:64px }
  .od-brand-head{ grid-template-columns:40px 1fr 40px; gap:8px; padding:8px 10px }
  .od-brand-head .od-title{ font-size:1rem; background:transparent; border:0; padding:0; text-align:right; justify-self:end }
  .od-brand-head .od-prev,.od-brand-head .od-next{ width:34px; height:34px; padding:0 }
  .od-day{ min-height:52px; padding:9px; border-radius:12px }
  .od-day .od-num{ font-size:.9rem }
  .od-day .od-dots .od-dot:nth-child(n+2){ display:none }
  .od-day .od-dots{ left:9px; bottom:7px }
  .od-card-title{ font-size:1.06rem }
}
@media(max-width:480px){
  .od-brand-head{ grid-template-columns:44px 1fr 44px; padding:10px 12px }
  .od-brand-head .od-prev,.od-brand-head .od-next{ width:40px; height:40px }
  .od-day{ min-height:56px; border-radius:14px; padding:10px }
  .od-card-media{ max-height:180px }
}
@media(max-width:420px){
  .od-agenda-wrapper{ max-width:360px }
  .od-brand-head .od-title{ font-size:.86rem }
  .od-brand-head .od-prev,.od-brand-head .od-next{ width:32px; height:32px }
  .od-day{ min-height:48px; padding:8px }
}