/* Navigation-menu carousel: use the exact banner's .wo-card components,
   media crop positions and publication cover rules from wo.css. */
:root{--menu-height:320px;--menu-border:#e7e1e4}
*{box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:transparent}
body{margin:0}
.wo-demo-notice{display:none!important}
.menu-shell{
  height:var(--menu-height);width:100%;min-width:0;display:flex;flex-direction:column;
  overflow:hidden;border:0;border-radius:0;background:transparent;box-shadow:none
}
.menu-stage.wo-cards{
  display:grid;flex:1;min-height:0;min-width:0;overflow:hidden;
  grid-template-columns:repeat(var(--menu-columns,1),minmax(0,1fr));
  gap:10px;padding:0;background:transparent;
}
.menu-stage .wo-card{
  width:100%;height:100%;min-height:0;min-width:0;overflow:hidden;
  border-radius:9px;box-shadow:0 1px 5px rgba(35,20,25,.1);transform:none;
}
.menu-stage .wo-card:hover{transform:none;box-shadow:0 2px 10px rgba(35,20,25,.15)}
.menu-stage .wo-card-media{
  width:100%;min-width:0;min-height:0;flex:1 1 auto;
  /* Fixed height menu: image flexes to the remaining area instead of
     increasing the iframe height. The image itself uses banner crop rules. */
  aspect-ratio:auto;
}
.menu-stage .wo-card-media img{
  width:100%;height:100%;object-fit:cover;
  /* Event Manager focus is supplied as an inline object-position by renderCard. */
}
.menu-stage .wo-card-body{
  flex:0 0 auto;height:108px;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;gap:4px;justify-content:center;
  padding:10px 13px 10px;
  background:var(--wo-accent);color:#fff;
}
.menu-stage .wo-card-title{
  margin:0;color:#fff;font-size:clamp(15px,2vw,19px);
  line-height:1.18;letter-spacing:-.015em;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.menu-stage .wo-card-meta{
  margin:0;color:var(--wo-accent2);font-size:11.8px;line-height:1.3;
  font-weight:600;min-height:0;overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;
}
.menu-stage .wo-card-meta .wo-icon{color:var(--wo-accent2);width:14px;height:14px}
.menu-stage .wo-card-link{
  margin:0;padding:2px 0 0;min-height:0;font-size:12px;
  color:#fff;font-weight:720;line-height:1.2;
}
.menu-stage .wo-date-badge{top:10px;left:10px;min-width:43px;padding:6px 7px}
.menu-stage .wo-date-badge b{font-size:1.12rem}
.menu-stage .wo-date-badge span{font-size:.6rem}
.menu-stage .wo-tag{top:10px;right:10px;font-size:10px}
.menu-stage .wo-magazine-cover img{
  /* The banner already keeps the full magazine cover visible. */
  object-fit:contain;
}
.menu-stage .wo-mailing-cover{
  /* Same special treatment as the main banner so the parish logo is intact. */
  object-fit:contain;
}
.menu-stage .wo-mailing-art .wo-icon{width:42px;height:42px}
.menu-stage .wo-mailing-art{gap:8px;font-size:12px}
.menu-stage .wo-magazine-placeholder{font-size:13px}
.menu-stage .wo-magazine-placeholder .wo-icon{width:36px;height:36px}
.menu-slide{animation:menu-slide-in .35s ease both}
.menu-loading,.menu-unavailable{display:grid;place-items:center;padding:20px;color:var(--wo-muted);
  text-align:center;font-size:13px;line-height:1.5;height:100%}
.menu-sr-only{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes menu-slide-in{from{opacity:.15;transform:translateX(7px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:500px){
  .menu-stage .wo-card-body{height:105px;padding:9px 12px 10px}
  .menu-stage .wo-card-title{font-size:16px}
  .menu-stage .wo-card-meta{font-size:11px}
  .menu-stage .wo-card-link{font-size:11px}
}
@media(max-width:360px){
  .menu-stage .wo-card-body{height:107px}
}
@media(prefers-reduced-motion:reduce){
  .menu-slide{animation:none}
  .menu-dots button:before{transition:none}
}