/* Moraira.info – Events Month Calendar (additive) */

.events-calendar .cal-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:8px;
}

.events-calendar .cal-dow{
  font-size:12px;
  color:var(--muted);
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:center;
  padding:6px 0;
}

.events-calendar .cal-cell{
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
  border-radius:12px;
  background:color-mix(in oklab, var(--surface) 92%, transparent);
  min-height:96px;
  padding:8px;
  position:relative;
}

.events-calendar .cal-cell.is-out{
  opacity:.55;
}

.events-calendar .cal-day{
  font-weight:800;
  font-size:12px;
  color:var(--muted);
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:6px;
}

.events-calendar .cal-events{
  display:grid;
  gap:6px;
}

.events-calendar .cal-evt{
  width:100%;
  text-align:left;
  padding:7px 8px;
  border-radius:10px;
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
  background:var(--bg);
  color:var(--text);
  cursor:pointer;
  font-size:13px;
  line-height:1.25;
}

.events-calendar .cal-evt:hover{
  background:color-mix(in oklab, var(--surface) 70%, transparent);
}

.events-calendar .cal-evt small{
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-top:3px;
}

.events-calendar .cal-empty{
  color:var(--muted);
  font-size:13px;
  padding:10px 0;
}

/* Modal */
.cal-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:none;
  z-index:1000;
}
.cal-modal-backdrop.open{display:block;}

.cal-modal{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:min(720px, calc(100% - 28px));
  max-height:calc(100% - 28px);
  overflow:auto;
  background:var(--bg);
  color:var(--text);
  border:1px solid color-mix(in oklab, var(--text) 12%, transparent);
  border-radius:16px;
  box-shadow:0 18px 40px rgba(0,0,0,.22);
  padding:14px;
  display:none;
  z-index:1001;
}
.cal-modal.open{display:block;}

.cal-modal .cal-modal-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.cal-modal .cal-modal-title{
  margin:0;
  font-size:18px;
  line-height:1.25;
}

.cal-modal .cal-modal-meta{
  margin:8px 0 0;
  color:var(--muted);
  font-size:13px;
}

.cal-modal .cal-modal-body{
  margin-top:12px;
  color:var(--text);
  white-space:pre-wrap;
}

.cal-modal .cal-modal-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

.cal-modal .cal-close{
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
  background:transparent;
  color:var(--text);
  border-radius:999px;
  padding:8px 10px;
  cursor:pointer;
  font-weight:700;
}
/* Mobile UX improvements (additive) */
@media (max-width: 720px){
  .events-calendar .cal-dow{display:none;}
  .events-calendar .cal-grid{grid-template-columns:1fr;gap:10px;}
  .events-calendar .cal-cell{min-height:auto;padding:10px 10px 12px;}
  .events-calendar .cal-cell.is-out{display:none;}
  .events-calendar .cal-day{font-size:14px;color:var(--text);margin-bottom:8px;}
  .events-calendar .cal-evt{padding:10px 12px;font-size:14px;min-height:44px;border-radius:12px;}
  .events-calendar .cal-evt small{font-size:13px;}
}

@media (max-width: 520px){
  .events-calendar [data-cal-prev],
  .events-calendar [data-cal-next]{min-width:44px;min-height:44px;}
  .events-calendar [data-cal-month]{min-width:120px;text-align:center;}

  .cal-modal{left:0;right:0;top:auto;bottom:0;transform:none;width:100%;max-height:85vh;border-radius:18px 18px 0 0;
            padding:14px 14px calc(14px + env(safe-area-inset-bottom));}
  .cal-modal .cal-modal-actions{flex-direction:column;}
  .cal-modal .cal-modal-actions .btn{width:100%;justify-content:center;}
  .cal-modal .cal-close{min-height:44px;}
}