/* ============================================================
   MNOP Events – Full community-events page
   ============================================================ */

.mnop-events{
  --mn-red:#d81e31;
  --mn-ink:#414141;
  --mn-muted:#6a6a6a;
  --mn-border:rgba(0,0,0,0.12);
  --mn-shadow:0 8px 18px rgba(0,0,0,0.12);
  --mn-card:#ffffff;
  --mn-peach:#f7e5cf;
  --mn-blush:#f3d3d6;

  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--mn-ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.mnop-events *{
  font-family:inherit;
  box-sizing:border-box;
  -webkit-font-smoothing:inherit;
  -moz-osx-font-smoothing:inherit;
}

/* ── Filter bar ─────────────────────────────────────── */
.mnop-events-filters{
  max-width:1200px;
  margin:0 auto 16px;
  display:-webkit-flex;
  display:flex;
  -webkit-align-items:center;
  align-items:center;
  gap:8px;
  -webkit-flex-wrap:wrap;
  flex-wrap:wrap;
}
/* Gap fallback for older Safari */
@supports not (gap: 8px) {
  .mnop-events-filters > * { margin-right:8px; margin-bottom:4px; }
  .mnop-events-filters > *:last-child { margin-right:0; }
}
.mnop-events-filterLabel{
  font-size:11px;
  font-weight:900;
  letter-spacing:0.10em;
  text-transform:uppercase;
  color:var(--mn-muted);
  margin-right:2px;
}
.mnop-events-filters button.mnop-events-toggle{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  border:1px solid rgba(0,0,0,0.18);
  background:#fff;
  margin:0;
  padding:8px 10px;
  border-radius:999px;
  cursor:pointer;
  font-size:11px;
  font-weight:900;
  letter-spacing:0.10em;
  text-transform:uppercase;
  line-height:1;
  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--mn-ink);
  -webkit-text-fill-color:var(--mn-ink);
  transition:border-color 0.15s, color 0.15s;
}
.mnop-events-filters button.mnop-events-toggle[aria-pressed="true"]{
  border-color:var(--btn-color, var(--mn-red));
  color:var(--btn-color, var(--mn-red));
  -webkit-text-fill-color:var(--btn-color, var(--mn-red));
}
.mnop-events-filters button.mnop-events-toggle:hover,
.mnop-events-filters button.mnop-events-toggle:focus{
  border-color:var(--btn-color, var(--mn-red));
  color:var(--btn-color, var(--mn-red));
  -webkit-text-fill-color:var(--btn-color, var(--mn-red));
  outline:none;
}

/* Colored-text mode: buttons keep their inline text color at all times.
   The [style] selector targets only buttons that have an inline color from PHP. */
.mnop-events-filters.has-colored-text button.mnop-events-toggle[style]{
  color:var(--btn-color, inherit) !important;
  -webkit-text-fill-color:var(--btn-color, inherit) !important;
}
/* Hover/pressed: only border changes when colored-text is on */
.mnop-events-filters.has-colored-text button.mnop-events-toggle[style]:hover,
.mnop-events-filters.has-colored-text button.mnop-events-toggle[style]:focus,
.mnop-events-filters.has-colored-text button.mnop-events-toggle[style][aria-pressed="true"]{
  border-color:var(--btn-color, var(--mn-red));
  color:var(--btn-color, inherit) !important;
  -webkit-text-fill-color:var(--btn-color, inherit) !important;
}
/* SVG inside filter buttons */
.mnop-events-toggle svg{
  vertical-align:-1px;
  margin-right:5px;
}
/* Filter separator */
.mnop-events-filterSep{
  color:rgba(0,0,0,0.25);
  font-size:14px;
  line-height:1;
  user-select:none;
}

/* ── Admission filter row (separate line) ──────────── */
.mnop-events-admRow{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin:8px 0 0;
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}
.mnop-events-admRow--left{
  justify-content:flex-start;
}
.mnop-events-admRow--right{
  justify-content:flex-end;
}
.mnop-events-admRow .mnop-events-filterLabel{
  font-size:11px;
  font-weight:900;
  letter-spacing:0.10em;
  text-transform:uppercase;
  color:#6a6a6a;
  margin-right:2px;
}
.mnop-events-admRow button.mnop-events-toggle{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  border:1px solid rgba(0,0,0,0.18);
  background:#fff;
  margin:0;
  padding:8px 10px;
  border-radius:999px;
  cursor:pointer;
  font-size:11px;
  font-weight:900;
  letter-spacing:0.10em;
  text-transform:uppercase;
  line-height:1;
  font-family:inherit;
  color:#414141;
  transition:border-color 0.15s, color 0.15s;
}
.mnop-events-admRow button.mnop-events-toggle svg{
  vertical-align:-1px;
  margin-right:5px;
}

/* Filtering behaviour */
.mnop-card.is-type-hidden{ display:none !important; }

/* ── 2-across grid (default) ───────────────────────── */
.mnop-events-grid{
  max-width:1200px;
  margin:0 auto;
  display:-ms-grid;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  -webkit-align-items:stretch;
  align-items:stretch;
}
/* ── Single-column layout ─────────────────────────── */
.mnop-layout-1col .mnop-events-grid{
  grid-template-columns:1fr;
}
@media (max-width:720px){
  .mnop-events-grid{ grid-template-columns:1fr; }

  /* Tighten filter pills on mobile to reduce wrapping */
  .mnop-events-filters{
    gap:5px;
  }
  .mnop-events-filters button.mnop-events-toggle{
    padding:6px 8px;
    font-size:10px;
    letter-spacing:0.06em;
  }

  /* Admission row on mobile */
  .mnop-events-admRow{
    gap:5px;
  }
  .mnop-events-admRow button.mnop-events-toggle{
    padding:6px 8px;
    font-size:10px;
    letter-spacing:0.06em;
  }

  /* Compact button + admission pill so they fit on one line */
  .mnop-actions{
    gap:6px;
    flex-wrap:nowrap;
  }
  .mnop-events a.mnop-btn{
    padding:10px 12px;
    font-size:11px;
    letter-spacing:1px;
  }
  .mnop-admission-pill,
  .mnop-type-pill{
    font-size:9px;
    padding:3px 7px;
    gap:3px;
    letter-spacing:0.06em;
  }
  .mnop-admission-pill svg{
    width:12px;
    height:12px;
  }
}

/* ── Card shell ─────────────────────────────────────── */
.mnop-card{
  background:var(--mn-card);
  border:0 solid var(--mn-border);
  box-shadow:var(--mn-shadow);
  display:-webkit-flex;
  display:flex;
  height:100%;
  border-radius:10px;
  overflow:hidden;
  scroll-margin-top:100px;  /* offset for fixed header when jumping from summary bar */
}

/* ── Left "calendar" column ─────────────────────────── */
.mnop-date{
  width:92px;
  -webkit-flex:0 0 92px;
  flex:0 0 92px;
  display:-webkit-flex;
  display:flex;
  -webkit-flex-direction:column;
  flex-direction:column;
  -webkit-align-items:center;
  align-items:center;
  -webkit-justify-content:center;
  justify-content:center;
  text-align:center;
  padding:12px 6px;
  background:linear-gradient(180deg,#f7e5cf 0%,#f3d3d6 100%);
}

.mn-month{
  margin:0 0 6px 0;
  font-weight:700;
  letter-spacing:1.4px;
  font-size:13px;
  text-transform:uppercase;
  line-height:1;
  color:var(--mn-date-month, #7a7a7a);
}
.mn-day{
  margin:0 0 8px 0;
  font-weight:800;
  font-size:44px;
  line-height:0.95;
  color:var(--mn-date-day, #5a5a5a);
}
.mn-time{
  margin:0;
  font-size:12px;
  font-weight:700;
  color:var(--mn-date-time, #7a7a7a);
  line-height:1.2;
}

/* ── Body ───────────────────────────────────────────── */
.mnop-body{
  padding:16px 18px;
  display:-webkit-flex;
  display:flex;
  -webkit-flex-direction:column;
  flex-direction:column;
  gap:10px;
  -webkit-flex:1 1 auto;
  flex:1 1 auto;
  min-width:0;
}

/* ── Type pill ─────────────────────────────────────── */
.mnop-type-pill{
  display:inline-flex;
  -webkit-inline-flex:inline-flex;
  align-items:center;
  gap:3px;
  -webkit-align-self:flex-start;
  align-self:flex-start;
  padding:4px 9px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--pill-color, rgba(0,0,0,0.12));
  color:var(--pill-color, var(--mn-muted));
  -webkit-text-fill-color:var(--pill-color, var(--mn-muted));
  font-size:10px;
  font-weight:900;
  letter-spacing:0.10em;
  text-transform:uppercase;
  white-space:nowrap;
  line-height:1;
}
.mnop-type-pill svg{
  flex-shrink:0;
}

/* ── Pills row (category + admission grouped at top of card) ── */
.mnop-pills-row{
  display:flex;
  -webkit-display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
  margin-bottom:2px;
}
.mnop-pills-row .mnop-admission-pill{
  margin-left:0;
}

.mnop-title{
  margin:0;
  font-size:24px;
  font-weight:400;
  line-height:1.25;
  letter-spacing:0.12em;
  text-transform:uppercase;
}

.mnop-sub{
  margin:0;
  font-size:16px;
  line-height:1.55;
  font-weight:400;
  letter-spacing:0.08em;
  color:var(--mn-muted);
}
.mnop-map-link{
  display:inline-flex;
  align-items:center;
  gap:3px;
  margin-left:6px;
  color:var(--mn-muted);
  text-decoration:none;
  vertical-align:middle;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  transition:color 0.15s;
}
.mnop-map-link:hover{
  color:var(--mn-red, #d81e31);
}

/* Description — now a <div> wrapping WP content <p> tags */
.mnop-desc{
  margin:0;
  font-size:16px;
  line-height:1.55;
  font-weight:400;
  letter-spacing:0.08em;
}
.mnop-desc p{
  margin:0 0 1em 0;
  font-size:inherit;
  line-height:inherit;
  font-weight:inherit;
  letter-spacing:inherit;
}
.mnop-desc p:last-child{ margin-bottom:0; }
.mnop-desc a{ color:var(--mn-red); }

.mnop-actions{
  margin-top:auto;
  padding-top:6px;
  display:-webkit-flex;
  display:flex;
  -webkit-align-items:center;
  align-items:center;
  gap:10px;
  -webkit-flex-wrap:wrap;
  flex-wrap:wrap;
}

/* ── Admission badge ───────────────────────────────── */
.mnop-admission-pill{
  display:-webkit-inline-flex;
  display:inline-flex;
  -webkit-align-items:center;
  align-items:center;
  gap:3px;
  padding:4px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  letter-spacing:0.10em;
  text-transform:uppercase;
  white-space:nowrap;
  line-height:1;
  border:1px solid currentColor;
  background:transparent;
}
.mnop-admission-pill svg{
  flex-shrink:0;
}
/* Icon-only mode: hide text, tighten padding */
.mnop-admission-pill.is-icon-only{
  gap:0;
  padding:4px 6px;
}
/* Multiple pills side-by-side */
.mnop-actions .mnop-admission-pill + .mnop-admission-pill{
  margin-left:4px;
}

/* ── Buttons ────────────────────────────────────────── */
.mnop-events a.mnop-btn,
.mnop-events a.mnop-btn:link,
.mnop-events a.mnop-btn:visited{
  display:inline-block;
  padding:12px 16px;
  background:var(--mn-red);
  border:1px solid var(--mn-red);
  border-radius:0;
  color:#ffffff;
  -webkit-text-fill-color:#ffffff;
  font-size:12px;
  font-weight:600;
  letter-spacing:1.3px;
  text-transform:uppercase;
  text-decoration:none;
  line-height:1;
}
.mnop-events a.mnop-btn:hover,
.mnop-events a.mnop-btn:focus{
  background:transparent;
  color:var(--mn-red);
  -webkit-text-fill-color:var(--mn-red);
  text-decoration:none;
}

/* ── Auto-hide helper ───────────────────────────────── */
.is-hidden{ display:none !important; }

/* ── Performance stack ──────────────────────────────── */
.mnop-date.is-perf{
  -webkit-justify-content:center;
  justify-content:center;
  padding-top:12px;
  padding-bottom:12px;
}
.mn-perf-stack{
  width:100%;
  display:-webkit-flex;
  display:flex;
  -webkit-flex-direction:column;
  flex-direction:column;
  gap:25px;
  -webkit-align-items:center;
  align-items:center;
}
.mn-perf-item{ width:100%; text-align:center; }
.mn-perf-item .mn-month{ margin:0 0 6px 0; }
.mn-perf-item .mn-day{ margin:0 0 8px 0; font-size:34px; line-height:0.95; }
.mn-perf-item .mn-time{ margin:0; }

/* ── Tag cards ──────────────────────────────────────── */
.mnop-date.is-tag{
  -webkit-justify-content:center;
  justify-content:center;
  padding-top:12px;
  padding-bottom:12px;
}
.mn-tag{
  margin:0 0 10px 0;
  font-weight:800;
  font-size:30px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:var(--mn-date-day, #5a5a5a);
}
.mn-tag span{
  display:block;
  font-size:20px;
  line-height:1;
  font-weight:800;
}
.mn-tag-sub{
  margin:0;
  font-size:12px;
  font-weight:700;
  color:var(--mn-date-time, #7a7a7a);
  line-height:1.2;
}