/* ==========================================================================
   Lantern Oaks Events — styles ported from activities-events-section-final.html
   Everything is scoped to .loe-events (section) and .loe-modal (popup) so it
   can't leak into, or be overridden by, the theme / Elementor kit styles.
   ========================================================================== */

/* ---------- Design tokens ---------- */
.loe-events,
.loe-modal {
  --ink:#202020; --body:#3c3c3c; --muted:#666666;
  --brand:#a85a29; --brand-dark:#8f4a22; --gold:#e99e56;
  --cocoa:#5c3b33; --deep:#47393b;
  --cream:#f7f4ea; --sand:#f4edde; --band:#f8f8f8;
  --line:#cfcfcf; --hair:#d7ccbe;
  --white:#ffffff;
  --font-display:"Orpheus Pro","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --radius:6px;
  --ease:cubic-bezier(.22,.61,.36,1);

  font-family:var(--font-body);
  color:var(--body);
  font-size:15px;
  line-height:24px;
}

/* ---------- Scoped resets (beat theme + Elementor kit defaults) ---------- */
.loe-events *, .loe-events *::before, .loe-events *::after,
.loe-modal *, .loe-modal *::before, .loe-modal *::after { box-sizing:border-box; }

.loe-events [hidden], .loe-modal [hidden] { display:none !important; }

.loe-events h2, .loe-events h3, .loe-modal h3 {
  margin:0; font-family:var(--font-display); font-weight:400; color:var(--ink);
  text-transform:none; letter-spacing:normal;
}
.loe-events p, .loe-modal p { margin:0; }
.loe-events svg, .loe-modal svg { display:inline-block; vertical-align:middle; flex:none; }

.loe-events button, .loe-modal button {
  font:inherit; color:inherit; background:none; border:0; border-radius:0;
  margin:0; padding:0; min-height:0; width:auto; height:auto;
  line-height:inherit; text-transform:none; letter-spacing:normal;
  box-shadow:none; text-decoration:none; cursor:pointer; white-space:normal;
}
.loe-events :focus-visible, .loe-modal :focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.loe-events :focus:not(:focus-visible), .loe-modal :focus:not(:focus-visible) { outline:none; }

.loe-sr-only {
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- Custom (uploaded) category icons ----------
   Sized relative to the text next to them, so they match the built-in
   icons in the chip, the card tag and the popup tag. */
.loe-events .loe-cicon, .loe-modal .loe-cicon {
  display:inline-block; flex:none; width:1.15em; height:1.15em; vertical-align:middle;
  background-color:currentColor;
  -webkit-mask:var(--loe-icon) center / contain no-repeat;
          mask:var(--loe-icon) center / contain no-repeat;
}
.loe-events img.loe-cicon, .loe-modal img.loe-cicon {
  background:none; -webkit-mask:none; mask:none;
  object-fit:contain; max-width:none; border-radius:0; margin:0; padding:0; border:0;
}

/* ---------- Optional heading (shortcode eyebrow/title/intro) ---------- */
.loe-events .section-head { max-width:720px; margin:0 auto 32px; text-align:center; }
.loe-events .eyebrow {
  font-family:var(--font-display); font-weight:500; font-size:18px; line-height:24px;
  letter-spacing:2.66px; text-transform:uppercase; color:var(--brand); margin:0 0 10px;
}
.loe-events .section-head h2 { font-size:45px; line-height:56px; }
.loe-events .section-intro { color:var(--muted); margin-top:14px; font-size:17px; line-height:28px; }

/* ---------- Controls: view toggle + filter chips ---------- */
.loe-events .controls {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:50px;
}

.loe-events .view-toggle { display:inline-flex; border:1px solid var(--line); border-radius:0px; overflow:hidden; }
.loe-events .view-toggle button,
.loe-events .view-toggle button:hover,
.loe-events .view-toggle button:focus {
  padding:11px 20px; font-size:16px; font-weight:500; letter-spacing:.6px; text-transform:uppercase;
  color:var(--body); background:var(--white); border:0;
}
.loe-events .view-toggle button + button { border-left:1px solid var(--line); }
.loe-events .view-toggle button:hover:not([aria-pressed="true"]) { background:var(--cream); }
.loe-events .view-toggle button[aria-pressed="true"],
.loe-events .view-toggle button[aria-pressed="true"]:hover,
.loe-events .view-toggle button[aria-pressed="true"]:focus { background:var(--brand); color:var(--white); }

.loe-events .filters { display:flex; flex-wrap:wrap; gap:8px; }
.loe-events button.chip,
.loe-events button.chip:hover,
.loe-events button.chip:focus {
  display:inline-flex; align-items:center; gap:7px; padding: 14px;
  border:1px solid var(--line); border-radius:0px; background:var(--white);
  font-size:16px; line-height:18px; font-weight:500; color:var(--body);
  transition:border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.loe-events button.chip svg { width:14px; height:14px; }
.loe-events button.chip:hover { border-color:var(--cat-color, var(--brand)); }
.loe-events button.chip[data-cat="all"] { --cat-color:var(--brand); }
.loe-events button.chip[aria-pressed="true"],
.loe-events button.chip[aria-pressed="true"]:hover,
.loe-events button.chip[aria-pressed="true"]:focus {
  background:var(--cat-color, var(--brand)); border-color:var(--cat-color, var(--brand)); color:#fff;
}

/* ---------- List view ---------- */
.loe-events .event-list { display:flex; flex-direction:column; gap:14px; }
.loe-events .event-card {
  display:grid; grid-template-columns:84px 1fr auto; gap:22px; align-items:center;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.loe-events .event-card:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(16,24,40,.08); }

.loe-events .event-date { text-align:center; }
.loe-events .event-date .mon { display:block; font-size:16px; line-height:16px; letter-spacing:1.4px; text-transform:uppercase; color:var(--brand); font-weight:600; }
.loe-events .event-date .day { display:block; font-family:var(--font-display); font-size:45px; line-height:1; color:var(--ink); margin: 10px 0; }
.loe-events .event-date .dow { display:block; font-size:16px; line-height:16px; color:var(--muted); margin-top:3px; }

.loe-events .event-body h3 { font-size:30px; line-height:1.1; margin-bottom:18px; }
.loe-events .event-meta { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:10px; }
.loe-events .event-meta > span { display:inline-flex; align-items:center; gap:6px; font-size:14px; line-height:18px; color:var(--muted); }
.loe-events .event-meta svg { width:13px; height:13px; color:var(--brand); }
.loe-events .event-meta .event-tag {
  gap:5px; font-size:14px; font-weight:500; letter-spacing:.4px; text-transform:uppercase;
  color:#656565;
}
.loe-events .event-meta .event-tag svg { width:12px; height:12px; color:inherit; }
.loe-events .event-desc { font-size:13.5px; line-height:20px; color:var(--body); max-width:56ch; }

.loe-events .event-cta { align-self:center; }
.loe-events button.event-cta-btn,
.loe-events button.event-cta-btn:hover,
.loe-events button.event-cta-btn:focus {
  display:inline-flex; align-items:center; gap:8px; padding:0; background:none; border:0;
  font-size:16px; font-weight:500; letter-spacing:.4px; text-transform:uppercase;
  color:var(--brand); text-decoration:underline; text-underline-offset:4px; white-space:nowrap;
}
.loe-events button.event-cta-btn:hover { color:var(--brand-dark); }
.loe-events button.event-cta-btn svg { width:13px; height:13px; }

.loe-events .empty-state {
  text-align:center; padding:56px 24px; border:1px dashed var(--line);
  border-radius:var(--radius); color:var(--muted); background:var(--white);
}
.loe-events .empty-state svg { display:block; width:34px; height:34px; margin:0 auto 14px; color:var(--line); }
.loe-events .empty-state p { font-size:14px; }

/* ---------- Month view ---------- */
.loe-events .month-nav { display:flex; align-items:center; justify-content:center; gap:20px; margin-bottom:24px; }
.loe-events .month-nav button,
.loe-events .month-nav button:hover,
.loe-events .month-nav button:focus {
  width:38px; height:38px; border:1px solid var(--line); border-radius:50%;
  display:grid; place-items:center; color:var(--body); background:transparent;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.loe-events .month-nav button:hover:not(:disabled) { border-color:var(--brand); color:var(--brand); }
.loe-events .month-nav button:disabled { opacity:.35; cursor:default; }
.loe-events .month-nav svg { width:16px; height:16px; }
.loe-events .month-nav h3 { font-size:22px; line-height:28px; min-width:220px; text-align:center; }

.loe-events .calendar {
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  display:grid; grid-template-columns:repeat(7, 1fr); background:var(--white);
}
.loe-events .calendar__dow {
  background:var(--cream); padding:10px 4px; text-align:center; font-size:11px; line-height:16px;
  font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--brand);
}
.loe-events .calendar__day,
.loe-events button.calendar__day,
.loe-events button.calendar__day:focus {
  min-height:88px; border:0; border-top:1px solid var(--hair); border-left:1px solid var(--hair); border-radius:0;
  padding:8px; text-align:left; background:var(--white); color:var(--ink); position:relative;
  display:flex; flex-direction:column; align-items:flex-start; gap:5px; width:100%;
}
.loe-events .calendar__day:nth-child(7n+1) { border-left:0; }
.loe-events .calendar__day.is-empty { background:var(--band); }
.loe-events .calendar__day .num { font-size:13px; line-height:18px; font-weight:500; color:var(--ink); }
.loe-events .calendar__day.is-today .num {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; background:var(--ink); color:#fff; border-radius:50%;
}
.loe-events button.calendar__day.has-events { cursor:pointer; }
.loe-events button.calendar__day.has-events:hover { background:var(--cream); color:var(--ink); }
.loe-events button.calendar__day[aria-selected="true"],
.loe-events button.calendar__day[aria-selected="true"]:hover { background:var(--cream); box-shadow:inset 0 0 0 2px var(--brand); }
.loe-events .day-dots { display:flex; flex-wrap:wrap; gap:3px; margin-top:auto; }
.loe-events .day-dots span { width:7px; height:7px; border-radius:50%; background:var(--dot-color, var(--brand)); }
.loe-events .day-dots span[data-dim="true"] { opacity:.2; }

.loe-events .day-detail { margin-top:24px; }
.loe-events .day-detail__head { font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:12px; }
.loe-events .day-detail__head strong { color:var(--ink); }

/* ---------- Detail popup ---------- */
html.loe-modal-open { overflow:hidden; }

.loe-modal {
  position:fixed; inset:0; z-index:99999; background:rgba(32,26,22,.72);
  display:none; align-items:center; justify-content:center; padding:28px;
  opacity:0; transition:opacity .25s var(--ease);
}
.loe-modal[data-open="true"] { display:flex; }
.loe-modal[data-visible="true"] { opacity:1; }

.loe-modal .modal__panel {
  position:relative; z-index:1; background:var(--band); border-radius:4px; overflow:hidden;
  width:100%; max-width:726px; max-height:min(920px, 92vh); display:flex; flex-direction:column;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
  transform:translateY(14px); opacity:0; transition:transform .25s var(--ease), opacity .25s var(--ease);
}
.loe-modal[data-visible="true"] .modal__panel { transform:translateY(0); opacity:1; }
.loe-modal .modal__panel[data-anim="out"] { opacity:.35; transform:scale(.98); }

/* Photo: 3:2 like the Figma frame (726 × ~484) */
.loe-modal .modal__media { position:relative; aspect-ratio:3/2; flex:none; background:var(--hair); }
.loe-modal .modal__media.is-empty { aspect-ratio:auto; height:84px; background:var(--cream); }
.loe-modal .modal__media img { width:100%; height:100%; object-fit:cover; display:block; max-width:none; border-radius:0; }

/* Category tag: white label, bottom-left of the photo */
.loe-modal .modal__tag {
  position:absolute; left:32px; bottom:32px; display:inline-flex; align-items:center; gap:6px;
  background:var(--white); color:var(--tag-color, var(--brand)); padding:7px 12px; border-radius:0;
  font-size:12px; line-height:16px; font-weight:500; letter-spacing:.9px; text-transform:uppercase;
}
.loe-modal .modal__media.is-empty .modal__tag { bottom:auto; top:26px; }
.loe-modal .modal__tag svg { width:14px; height:14px; }

/* Close: white circle, dark × (top-right of the photo) */
.loe-modal button.modal__close,
.loe-modal button.modal__close:focus {
  position:absolute; top:22px; right:22px; width:34px; height:34px; border-radius:50%;
  background:var(--white); color:var(--ink); display:grid; place-items:center;
  box-shadow:0 2px 8px rgba(0,0,0,.18); transition:transform .2s var(--ease);
}
.loe-modal button.modal__close:hover { background:var(--white); color:var(--brand); transform:scale(1.06); }
.loe-modal .modal__close svg { width:14px; height:14px; }

/* Body */
.loe-modal .modal__body { padding:40px 32px 32px; overflow-y:auto; background:var(--band); }
.loe-modal .modal__meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-bottom:16px; }
.loe-modal .modal__meta span { display:inline-flex; align-items:center; gap:6px; font-size:14px; line-height:20px; color:var(--muted); }
.loe-modal .modal__meta span:first-child { text-transform:uppercase; letter-spacing:.4px; } /* SEPTEMBER 19, 2026 */
.loe-modal .modal__meta svg { width:15px; height:15px; color:var(--brand); }
.loe-modal .modal__body h3 { font-size:30px; line-height:38px; margin-bottom:12px; }
.loe-modal .modal__desc { font-size:17px; line-height:28px; color:var(--body); margin-bottom:28px; max-width:62ch; }

/* "Good to know" note */
.loe-modal .modal__know {
  display:flex; gap:10px; align-items:center; background:#f1e5de; border-radius:0;
  padding:14px 18px; font-size:14px; line-height:20px; color:var(--body); margin-bottom:20px;
}
.loe-modal .modal__know svg { width:16px; height:16px; color:var(--brand); }

/* RSVP button */
.loe-modal a.modal__rsvp,
.loe-modal a.modal__rsvp:visited {
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  background:var(--brand); color:#fff; min-height:52px; padding:0 20px; font-size:14px; font-weight:500;
  letter-spacing:1.2px; text-transform:uppercase; text-decoration:none; border-radius:0;
  transition:background-color .2s var(--ease);
}
.loe-modal a.modal__rsvp:hover, .loe-modal a.modal__rsvp:focus { background:var(--brand-dark); color:#fff; }
.loe-modal .modal__rsvp svg { width:16px; height:16px; transition:transform .2s var(--ease); }
.loe-modal a.modal__rsvp:hover svg { transform:translateX(3px); }

.loe-modal button.modal__nav,
.loe-modal button.modal__nav:focus {
  position:absolute; top:50%; z-index:2; transform:translateY(-50%); width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.5); color:#fff;
  display:grid; place-items:center;
}
.loe-modal button.modal__nav:hover { background:rgba(255,255,255,.28); color:#fff; }
.loe-modal .modal__nav svg { width:19px; height:19px; }
.loe-modal .modal__nav--prev { left:6px; }
.loe-modal .modal__nav--next { right:6px; }
.loe-modal .modal__counter {
  position:absolute; left:0; right:0; bottom:14px; text-align:center; font-size:12px;
  letter-spacing:.4px; color:rgba(255,255,255,.85);
}

/* ---------- Responsive ---------- */
@media (max-width:820px) {
.loe-events .view-toggle button, .loe-events .view-toggle button:hover, .loe-events .view-toggle button:focus{font-size: 14px;}
.loe-events button.chip, .loe-events button.chip:hover, .loe-events button.chip:focus{font-size: 14px;}
.loe-events .event-date .day{margin: 0;}
.loe-events .event-date{display: flex; justify-content: center; align-items: center; gap: 10px;}
  .loe-events .event-card { grid-template-columns:64px 1fr; grid-template-rows:auto auto; display: flex; flex-direction: column; align-items: flex-start;}
  .loe-events .event-cta { grid-column:2; justify-self:start; align-self: start;}
  .loe-events .calendar__day, .loe-events button.calendar__day { min-height:64px; }
}
@media (max-width:640px) {
  .loe-modal { padding:0; }
  .loe-modal .modal__panel { max-width:none; max-height:100%; height:100%; border-radius:0; }
  .loe-modal .modal__body { padding:28px 20px 84px; }
  .loe-modal .modal__tag { left:20px; bottom:20px; }
  .loe-modal .modal__body h3 { font-size:26px; line-height:32px; }
  .loe-modal .modal__desc { font-size:16px; line-height:26px; }
  .loe-modal button.modal__nav,
  .loe-modal button.modal__nav:focus {
    width:40px; height:40px; top:auto; bottom:16px; transform:none;
    background:var(--ink); border-color:var(--ink);
  }
  .loe-modal button.modal__nav:hover { background:var(--cocoa); }
  .loe-modal .modal__nav--prev { left:16px; }
  .loe-modal .modal__nav--next { right:16px; }
  .loe-modal .modal__counter { bottom:26px; color:var(--muted); pointer-events:none; z-index:2; }
}
@media (max-width:600px) {
.loe-events button.event-cta-btn, .loe-events button.event-cta-btn:hover, .loe-events button.event-cta-btn:focus{font-size: 14px;}
.loe-events .event-body h3{font-size: 24px;}
  .loe-events .controls { flex-direction:column; align-items:stretch; margin-bottom: 30px;}
  .loe-events .view-toggle { align-self:flex-start; }
  .loe-events .month-nav h3 { min-width:0; font-size:18px; }
  .loe-events .calendar__day .num { font-size:11px; }
  .loe-events .event-date .day { font-size:26px; }
  .loe-events .section-head h2 { font-size:34px; line-height:42px; }
}
@media (prefers-reduced-motion:reduce) {
  .loe-events *, .loe-modal, .loe-modal * { transition-duration:.001ms !important; }
}