/* --oe-col: this page's content column; the shared top bar row (common/header.php) takes the same width. */
:root{--oe-col:1120px}
:root{
  --ev-navy:#101530; --ev-gold:#ecaf18; --ev-gold-ink:#b47713;
  --ev-cream:#f7f2e9; --ev-ground:#f7f2e9; --ev-card:#ffffff;
  --ev-line:#e4ddcf; --ev-line2:#efe9dd;
  --ev-ink:#1b2333; --ev-muted:#6b7280; --ev-faint:#9aa2ad;
}
*{box-sizing:border-box}
body{font-family:'Source Sans 3',system-ui,sans-serif;background:var(--ev-ground);color:var(--ev-ink);margin:0}

.ev{background:var(--ev-ground)}
.ev-wrap{max-width:1120px;margin:0 auto;padding:22px 20px 48px}

/* ---- page head + toolbar ---- */
.ev-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 22px;flex-wrap:wrap;margin:6px 0 18px}
.ev-head-titles{min-width:0}
.ev-head h1{margin:0 0 2px;font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:30px;line-height:1.2;letter-spacing:-.02em;color:var(--ev-navy)}
/* Mirror discover's .dv-head h1 / restaurants' .guide-title exactly: 30px, 24px at ≥851px. */
@media (min-width:851px){ .ev-head h1{font-size:24px} }
@media (max-width:680px){ .ev-head h1{font-size:24px} }
.ev-head p{margin:0;font-size:15px;color:var(--ev-muted);max-width:60ch}
.ev-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* segmented List / Calendar toggle — squared, grey-bordered, like the guide's
   view toggle but smaller. */
.ev-toggle{display:inline-flex;height:36px;background:#fff;border:1.5px solid #d3ccbf;border-radius:8px;overflow:hidden}
.ev-toggle-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--ev-navy);font:700 11px 'Source Sans 3',sans-serif;text-transform:uppercase;letter-spacing:.06em;padding:0 12px;border-radius:0;cursor:pointer;transition:background .12s,color .12s}
.ev-toggle-btn + .ev-toggle-btn{border-left:1.5px solid #d3ccbf}
.ev-toggle-btn svg{width:14px;height:14px;opacity:.85}
.ev-toggle-btn:hover{background:var(--ev-cream)}
.ev-toggle-btn.is-on{background:var(--ev-gold);color:var(--ev-navy)}
.ev-toggle-btn.is-on:hover{background:var(--ev-gold)}
.ev-toggle-btn.is-on svg{opacity:1}

/* month filter pill (list view only) — squared chip, uppercase, gold icon + caret (matches the guide, smaller) */
.month-filter{position:relative;flex-shrink:0}
.pill-btn{display:flex;align-items:center;gap:6px;height:36px;padding:0 11px;border-radius:8px;border:1.5px solid #d3ccbf;background:#fff;color:var(--ev-navy);font:700 11px 'Source Sans 3',sans-serif;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;outline:none;white-space:nowrap}
.pill-btn:hover{border-color:#b9b1a1}
.pill-btn > svg:first-child{flex-shrink:0;stroke:var(--ev-gold);opacity:1;width:14px;height:14px}
.pill-btn-chevron{width:6px;height:6px;flex-shrink:0;margin:-3px 0 0 2px;border:0;border-right:2px solid #8a8a8a;border-bottom:2px solid #8a8a8a;transform:rotate(45deg);background:none}
.pill-dropdown-list{display:none;position:absolute;top:calc(100% + 6px);right:0;min-width:170px;background:#fff;border:1px solid var(--ev-line);border-radius:10px;box-shadow:0 10px 28px rgba(16,21,48,.14);z-index:500;overflow:hidden}
.pill-dropdown-list.open{display:block}
.pill-dropdown-item{padding:10px 15px;font:400 14px 'Source Sans 3',sans-serif;color:var(--ev-ink);cursor:pointer}
.pill-dropdown-item:hover{background:var(--ev-cream)}
.pill-dropdown-item.active{color:var(--ev-navy);font-weight:600}

/* ---- list view ---- */
.event-list{background:var(--ev-card);border:1px solid var(--ev-line);border-radius:16px;overflow:hidden;box-shadow:0 1px 3px rgba(16,21,48,.05)}
.ev-empty{padding:48px 20px;text-align:center;color:var(--ev-muted);font-size:15px}
.month-header{padding:10px 18px;background:var(--ev-navy);border-left:4px solid var(--ev-gold);font-family:'DM Sans',sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#fff}
.event-list > .month-header:first-child{border-top:none}
.event-card{display:flex;border-top:1px solid var(--ev-line2)}
.month-header + .event-card{border-top:none}
.event-card:hover{background:#fdfbf6}
.event-date-block{position:relative;overflow:hidden;width:152px;min-width:152px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--ev-card);border-right:1px solid var(--ev-line2);padding:12px 6px;flex-shrink:0;text-align:center}
/* The event's artwork, behind the date. The wash is light enough to let the photo
   through and the type carries its own shadow, which is what holds the date
   legible on a bright image rather than the wash alone. */
.event-date-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
.event-date-block.has-art::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(16,21,48,.42) 0%,rgba(16,21,48,.56) 100%)}
.event-date-block > div{position:relative;z-index:2}
.has-art .event-month{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6),0 0 10px rgba(0,0,0,.35)}
.has-art .event-day{color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.55),0 0 14px rgba(0,0,0,.4)}
.has-art .event-dow{color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(0,0,0,.6),0 0 10px rgba(0,0,0,.35)}
.has-art .event-multiday{background:rgba(16,21,48,.62);color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:0 1px 5px rgba(0,0,0,.35)}
.event-month{font-family:'DM Sans',sans-serif;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ev-gold-ink)}
.event-day{font-family:'DM Sans',sans-serif;font-size:28px;font-weight:800;line-height:1;color:var(--ev-navy)}
.event-dow{font-size:10px;color:var(--ev-faint);text-transform:uppercase;letter-spacing:.07em;margin-top:1px}
.event-multiday{font-size:9px;font-weight:700;color:var(--ev-gold-ink);text-transform:uppercase;letter-spacing:.05em;background:#fbf1d6;padding:2px 6px;border-radius:10px;margin-top:6px}
.event-body{flex:1;padding:12px 16px;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px}
.event-name{font-family:'DM Sans',sans-serif;font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--ev-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.event-meta{font-size:11px;color:var(--ev-faint);text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden}
.meta-dot{color:#d3cdbf}
.now{color:var(--ev-gold-ink);font-weight:700}
.event-desc{font-size:14px;color:#55606a;line-height:1.5;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.event-footer{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px}
.event-location{font-size:12px;color:var(--ev-faint);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:60px}
/* Action buttons: navy rounded squares with white glyphs (like the guide's card buttons). */
.elink,.cal-btn{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:var(--ev-navy);cursor:pointer;border-radius:8px;position:relative;text-decoration:none;flex-shrink:0;transition:background .15s}
.elink:hover,.cal-btn:hover{background:#03306f}
.elink svg,.cal-btn svg{width:18px;height:18px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block;stroke:#fff}
.cal-wrap{position:relative;display:inline-block;flex-shrink:0}
/* The actions always sit at the right end of the row: with no location line to
   take up the slack they would otherwise start at the left. */
.event-footer .cal-wrap{margin-left:auto}
.cal-dropdown{display:none;position:absolute;bottom:100%;right:0;background:#fff;border:1px solid var(--ev-line);border-radius:10px;box-shadow:0 8px 22px rgba(16,21,48,.14);z-index:10;min-width:168px;margin-bottom:6px;overflow:hidden}
.cal-dropdown a{display:block;padding:9px 14px;font-size:13px;color:var(--ev-ink);text-decoration:none;white-space:nowrap}
.cal-dropdown a:hover{background:var(--ev-cream)}
.cal-wrap.open .cal-dropdown{display:block}
/* A passport campaign's event: a text link to the campaign page under the actions. */
.event-pplink{align-self:flex-end;display:inline-flex;align-items:center;gap:3px;margin-top:4px;font:700 13px 'DM Sans',sans-serif;color:var(--ev-navy);text-decoration:none}
.event-pplink svg{width:14px;height:14px;flex-shrink:0;transition:transform .15s}
.event-pplink:hover{text-decoration:underline}
.event-pplink:hover svg{transform:translateX(2px)}
.ev-pop-pplink{display:flex;width:fit-content;margin-top:12px}

/* ---- calendar view ---- */
.ev-cal{background:var(--ev-card);border:1px solid var(--ev-line);border-radius:16px;overflow:hidden;box-shadow:0 1px 3px rgba(16,21,48,.05)}
.ev-cal-bar{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--ev-line2)}
.ev-cal-title{margin:0;font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:21px;color:var(--ev-navy);min-width:180px}
.ev-cal-nav{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--ev-line);background:#fff;border-radius:9px;color:var(--ev-navy);cursor:pointer;transition:border-color .12s,background .12s}
.ev-cal-nav svg{width:18px;height:18px}
.ev-cal-nav:hover:not(:disabled){border-color:var(--ev-navy);background:var(--ev-cream)}
.ev-cal-nav:disabled{opacity:.32;cursor:default}
.ev-cal-today{margin-left:auto;border:1.5px solid var(--ev-line);background:#fff;color:var(--ev-navy);font:600 13px 'Source Sans 3',sans-serif;padding:7px 15px;border-radius:20px;cursor:pointer}
.ev-cal-today:hover{border-color:var(--ev-navy);background:var(--ev-cream)}
.ev-cal-dows{display:grid;grid-template-columns:repeat(7,1fr);background:var(--ev-cream);border-bottom:1px solid var(--ev-line2)}
.ev-cal-dows span{padding:8px 6px;text-align:center;font:700 11px 'DM Sans',sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--ev-muted)}
.ev-cal-grid{display:block}
.ev-week{position:relative;display:grid;grid-template-columns:repeat(7,1fr)}
.ev-day{border-right:1px solid var(--ev-line2);border-bottom:1px solid var(--ev-line2);min-height:calc(88px + var(--lanes,1) * 25px);padding:0;position:relative;background:#fff}
.ev-day:nth-child(7n){border-right:none}
.ev-day.other{background:#fbf8f2}
.ev-day.other .ev-daynum{color:var(--ev-faint)}
.ev-daynum{position:absolute;top:5px;right:7px;font:600 12.5px 'Source Sans 3',sans-serif;color:var(--ev-muted);z-index:1;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center}
.ev-day.today{background:#fdf3cf}
.ev-day.today .ev-daynum{color:var(--ev-navy);font-weight:800}
/* lane overlay: 7 columns aligned to the day cells; segment bars grid-placed */
.ev-lanes{position:absolute;top:28px;left:3px;right:3px;bottom:4px;display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:22px;column-gap:3px;row-gap:3px;pointer-events:none}
.ev-seg{pointer-events:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:5px;font:700 11.5px 'Source Sans 3',sans-serif;line-height:22px;padding:0 8px;cursor:pointer;color:#fff;background:var(--ev-navy)}
.ev-seg:hover{filter:brightness(1.06)}
.ev-seg.contL{border-top-left-radius:0;border-bottom-left-radius:0}
.ev-seg.contR{border-top-right-radius:0;border-bottom-right-radius:0}
.ev-cal-empty{padding:40px 20px;text-align:center;color:var(--ev-muted);font-size:15px}

/* ---- event popover ---- */
.ev-pop{position:fixed;z-index:2000;max-width:320px;width:calc(100vw - 32px);background:#fff;border:1px solid var(--ev-line);border-radius:14px;box-shadow:0 16px 44px rgba(16,21,48,.24);padding:16px 16px 14px}
.ev-pop-accent{height:4px;border-radius:3px;margin:-4px -4px 11px;background:var(--ev-navy)}
.ev-pop-img{width:100%;height:130px;object-fit:cover;display:block;border-radius:10px;margin:0 0 11px}
.ev-pop h3{margin:0 0 5px;font-family:'DM Sans',sans-serif;font-weight:800;font-size:17px;color:var(--ev-navy);line-height:1.2}
.ev-pop .ev-pop-when{font-size:13px;color:var(--ev-gold-ink);font-weight:700;margin:0 0 3px}
.ev-pop .ev-pop-meta{font-size:12.5px;color:var(--ev-muted);margin:0 0 8px}
.ev-pop .ev-pop-desc{font-size:13.5px;color:#55606a;line-height:1.5;margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ev-pop-actions{display:flex;flex-wrap:wrap;gap:8px}
.ev-pop-actions a{font:600 13px 'Source Sans 3',sans-serif;text-decoration:none;border-radius:20px;padding:7px 13px}
.ev-pop-more{background:var(--ev-navy);color:#fff}
.ev-pop-more:hover{background:#1a2445}
.ev-pop-cal{background:var(--ev-cream);color:var(--ev-navy);border:1px solid var(--ev-line)}
.ev-pop-cal:hover{background:#efe7d8}
.ev-pop-x{position:absolute;top:9px;right:9px;width:28px;height:28px;border:0;background:transparent;color:var(--ev-muted);cursor:pointer;border-radius:7px;display:inline-flex;align-items:center;justify-content:center}
.ev-pop-x:hover{background:var(--ev-cream);color:var(--ev-navy)}
.ev-pop-x svg{width:18px;height:18px}

/* ---- responsive ---- */
@media (max-width:760px){
  .event-date-block{width:112px;min-width:112px}
  .ev-wrap{padding:16px 12px 40px}
  .ev-head p{font-size:14px}
  .ev-toolbar{width:100%;justify-content:space-between}
}
@media (max-width:560px){
  .event-date-block{width:86px;min-width:86px;padding:10px 6px}
  .event-day{font-size:24px}
  .event-name{font-size:15px}
  .event-desc{-webkit-line-clamp:2}
  .ev-cal-title{font-size:18px;min-width:0}
  .ev-cal-bar{padding:12px 10px;gap:7px}
  .ev-cal-dows span{padding:6px 2px;font-size:10px}
  .ev-day{min-height:calc(64px + var(--lanes,1) * 20px)}
  .ev-daynum{font-size:11px;top:3px;right:4px;width:18px;height:18px}
  .ev-lanes{top:22px;left:2px;right:2px;grid-auto-rows:17px;column-gap:2px;row-gap:2px}
  .ev-seg{font-size:10px;line-height:17px;padding:0 4px;border-radius:4px}
}

/* ---- passport campaign stamp ----
   A campaign's own event wears a small round stamp in the campaign ink, pressed
   over the right edge of the artwork and leaking into the text column. The date
   block clips its photo (overflow:hidden), so the stamp hangs off the card, not
   the block. It sits over the photo and its wash (z 0 and 1) but under every
   word: the date type (z 2) and the text column (z 2) print on top of it. */
.event-card.has-ppstamp{position:relative}
.event-card.has-ppstamp .event-body{position:relative;z-index:2}
.ev-ppstamp{--st-size:66px;position:absolute;z-index:1;left:calc(152px - var(--st-size) * .7);bottom:8px;width:var(--st-size);height:var(--st-size);
  color:var(--st-ink,#101530);transform:rotate(-10deg);pointer-events:none;border-radius:50%;
  filter:drop-shadow(0 1px 2px rgba(8,11,28,.35))}
.ev-ppstamp svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.ev-ppstamp-paper{fill:rgba(255,253,248,.8);stroke:none}
.ev-ppstamp svg g,.ev-ppstamp svg text{opacity:.94}
.ev-ppstamp-mk{position:absolute;inset:31%;display:grid;place-items:center;color:inherit;font-size:calc(var(--st-size) * .3);line-height:1;opacity:.94}
.ev-ppstamp-ico{width:100%;height:100%;display:block}
/* In the calendar popover: over the photo's bottom right corner, into the text under it. */
.ev-pop.has-ppstamp .ev-ppstamp{--st-size:62px;left:auto;right:12px;bottom:auto;top:115px}
.ev-pop.has-ppstamp.no-img .ev-ppstamp{top:40px}
.ev-pop.has-ppstamp h3{padding-right:60px}
.ev-pop.has-ppstamp.no-img .ev-pop-when,.ev-pop.has-ppstamp.no-img .ev-pop-meta{padding-right:60px}
@media (max-width:760px){
  .ev-ppstamp{--st-size:60px;left:calc(112px - var(--st-size) * .68)}
}
@media (max-width:560px){
  .ev-ppstamp{--st-size:56px;left:calc(86px - var(--st-size) * .6);bottom:5px}
}