/* /events: search, date chips, location filter and event cards (Will, Nov 8, 2026).
   Design: the "Farwell Events Page" canvas, V2. Markup comes from eventsPage() in
   src/lib/cms.ts; behavior from /js/events.js. Breakpoints follow the Webflow CSS:
   992+ desktop (sticky sidebar, card grid), 768-991 iPad (one card per row, image left),
   767 and down phone (image over text). Below 992 the sidebar becomes a full-screen
   Filters panel. */

.fw-ev { --ink: #233926; --mint: #a8dca9; --mint-2: #cdeccc; --mint-3: #e4f4e3; --muted: #4a6650;
  width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px 80px; color: var(--ink);
  font-family: 'Averia Serif Libre', Georgia, serif; box-sizing: border-box; }
.fw-ev *, .fw-ev *::before, .fw-ev *::after { box-sizing: border-box; }
.fw-ev a { color: var(--ink); }
.fw-ev button { font: inherit; color: inherit; }
.fw-ev :focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.fw-events-head.text-wrapper { padding-bottom: 2rem; }
.fw-events-head .header-type { max-width: 18em; }

/* Search */
.fw-search { max-width: 520px; margin: 0 auto 24px; }
.fw-search label, .fw-caps { display: block; font-family: Farwell, Arial, sans-serif; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; }
.fw-search label { margin-bottom: 8px; }
.fw-search input { width: 100%; height: 52px; padding: 0 18px; border: 3px solid var(--ink); border-radius: 0;
  background: #fff; color: var(--ink); font-family: 'Averia Serif Libre', Georgia, serif; font-size: 18px;
  -webkit-appearance: none; appearance: none; }
.fw-search input::placeholder { color: var(--muted); }

/* Date chips */
.fw-chips { display: flex; justify-content: safe center; gap: 10px; overflow-x: auto; padding: 4px 2px 10px;
  margin-bottom: 20px; scrollbar-width: none; }
.fw-chips::-webkit-scrollbar { display: none; }
/* The chip row runs the full width of the site, frame to frame, not the 1240px column (Will,
   Nov 8, 2026): it scrolls edge to edge, and its first chip lines up with the column.
   --frame is .page-wrapper's dark border (Webflow CSS: 1rem, .5rem at 767 and down).
   100vw counts a desktop scrollbar, so the section clips the few px that overflow (clip, not
   hidden: hidden would break the sticky sidebar). */
.section:has(> .fw-ev) { overflow-x: clip; }
.fw-ev { --frame: 1rem; --half: calc(50vw - var(--frame)); }
.fw-ev .fw-chips { margin-left: calc(50% - var(--half)); margin-right: calc(50% - var(--half));
  padding-left: max(20px, calc(var(--half) - 600px)); padding-right: max(20px, calc(var(--half) - 600px)); }
.fw-chip { flex: none; min-height: 46px; padding: 0 20px; display: inline-flex; align-items: center; gap: 8px;
  border: 3px solid var(--ink); border-radius: 999px; background: transparent; cursor: pointer; white-space: nowrap;
  font-family: Farwell, Arial, sans-serif !important; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.fw-chip:hover { background: var(--mint-2); }
.fw-chip[aria-pressed="true"] { background: var(--ink); color: #fff !important; }
.fw-chip.fw-open-filters { display: none; background: #fff; }
.fw-pill-hold { display: contents; }
.fw-chip svg { flex: none; }

/* Layout */
.fw-layout { display: flex; align-items: flex-start; gap: 40px; }
.fw-results { flex: 1; min-width: 0; }

/* Location filter (desktop sidebar) */
.fw-filters { position: sticky; top: 24px; flex: 0 0 300px; max-height: calc(100vh - 48px); overflow-y: auto;
  background: #fff; border: 3px solid var(--ink); padding: 20px 14px 18px 20px; }
.fw-panel-head, .fw-panel-dates, .fw-panel-foot { display: none; }
.fw-loc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; padding-right: 6px; }
.fw-loc-head h2 { margin: 0; font-family: Farwell, Arial, sans-serif; font-weight: 400; font-size: 16px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.fw-link-btn { border: 0; background: none; padding: 6px 0; font-size: 15px; text-decoration: underline; cursor: pointer;
  font-family: 'Averia Serif Libre', Georgia, serif !important; }
.fw-tree, .fw-tree ul { list-style: none; margin: 0; padding: 0; }
.fw-tree ul { padding-left: 22px; }
.fw-all > ul { padding-left: 0; }
.fw-tree ul[hidden] { display: none; }
.fw-all { padding-bottom: 6px; margin-bottom: 4px; border-bottom: 2px solid var(--mint-3); }
.fw-row { display: flex; align-items: center; gap: 4px; min-height: 38px; }
.fw-row label { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; min-height: 38px; cursor: pointer; margin: 0; font-weight: 400; }
.fw-name { font-size: 16px; line-height: 1.25; }
.fw-area > .fw-row .fw-name, .fw-all > .fw-row .fw-name { font-family: Farwell, Arial, sans-serif; font-size: 14px;
  letter-spacing: .08em; text-transform: uppercase; }
.fw-count { margin-left: auto; font-size: 14px; color: var(--muted); }
.fw-box { position: relative; display: block; width: 18px; height: 18px; flex: none; }
.fw-check { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 18px; height: 18px; margin: 0;
  border: 1.5px solid #8ba68f; border-radius: 4px; background: #fff; cursor: pointer; }
.fw-check:hover { border-color: var(--ink); }
.fw-check:checked { background: var(--mint); border-color: #6d9a72; }
.fw-check:indeterminate { background: var(--mint-3); border-color: #6d9a72; }
.fw-box svg { position: absolute; inset: 0; pointer-events: none; display: none; }
.fw-check:checked ~ .fw-tick { display: block; }
.fw-check:indeterminate ~ .fw-dash { display: block; }
.fw-caret { width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: none; cursor: pointer; }
.fw-caret:hover { background: var(--mint-3); }
.fw-caret svg { transition: transform .15s ease; }
.fw-caret[aria-expanded="true"] svg { transform: rotate(180deg); }
.fw-caret-spacer { width: 36px; flex: none; }

/* Cards: every card the same size */
.fw-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px; }
.fw-cards > li { display: flex; }
.fw-cards > li[hidden] { display: none; }
.fw-card { width: 100%; height: 418px; display: flex; flex-direction: column; background: #fff; border: 3px solid var(--ink);
  transition: box-shadow .15s ease; }
.fw-card:hover { box-shadow: 0 8px 0 var(--ink); }
.fw-img { position: relative; height: 160px; flex: none; border-bottom: 3px solid var(--ink); background: var(--mint-2); }
.fw-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fw-badge { position: absolute; left: 0; top: 0; width: 60px; padding: 7px 0 6px; background: var(--ink); color: #fff;
  text-align: center; font-family: Farwell, Arial, sans-serif; line-height: 1; }
.fw-badge-m { display: block; font-size: 12px; letter-spacing: .08em; }
.fw-badge-d { display: block; margin-top: 4px; font-family: Chillion, Georgia, serif; font-size: 26px; }
.fw-text { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 14px 16px; }
.fw-loc { margin: 0 0 4px; font-family: Farwell, Arial, sans-serif; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.fw-title { margin: 0 0 10px; font-family: Chillion, Georgia, serif; font-weight: 400; font-size: 21px; line-height: 1.15;
  height: 48px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--ink); }
.fw-title a { text-decoration: none; }
.fw-title a:hover { text-decoration: underline; }
.fw-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 15px; line-height: 1.3; }
.fw-meta li { display: flex; gap: 8px; align-items: center; min-width: 0; }
.fw-meta svg { flex: none; }
.fw-date span { font-family: Farwell, Arial, sans-serif; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.fw-place { align-items: flex-start !important; height: 40px; }
.fw-place svg { margin-top: 2px; }
.fw-place a { text-decoration: underline; text-decoration-color: #8ba68f; text-underline-offset: 3px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fw-place a:hover { text-decoration-color: var(--ink); }
.fw-tba { color: var(--muted); }
.fw-more { margin-top: auto; padding-top: 10px; border-top: 2px solid var(--mint); display: flex; align-items: center;
  justify-content: space-between; gap: 8px; font-size: 15px; text-decoration: none; }
.fw-more span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-more:hover span { text-decoration: underline; }

.fw-none { background: #fff; border: 3px solid var(--ink); padding: 40px 24px; text-align: center; }
.fw-none p { margin: 0 0 20px; font-size: 21px; line-height: 1.35; }
.fw-btn { min-height: 48px; padding: 0 24px; border: 3px solid var(--ink); background: var(--ink); color: #fff !important; cursor: pointer;
  font-family: Farwell, Arial, sans-serif !important; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.fw-note { margin: 36px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); text-align: center; }

/* iPad and phone: Filters pill + full-screen panel */
@media screen and (max-width: 991px) {
  .fw-chip.fw-open-filters { display: inline-flex; }
  /* The Filters pill stays put at the row's left edge while the dates scroll under it. Its
     square mint holder covers the 20px gutter and the pill's rounded corners (a box-shadow
     follows the rounded ends and lets chip corners show). */
  .fw-pill-hold { display: flex; flex: none; position: sticky; left: -20px; z-index: 1; margin-left: -20px;
    padding: 0 10px 0 20px; background: var(--mint); }
  .fw-filters { display: none; }
  .fw-filters.is-open { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 2000; max-height: none;
    border: 0; padding: 0; overflow-y: auto; }
  .fw-filters.is-open .fw-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 20px 14px 24px; border-bottom: 3px solid var(--ink); }
  .fw-panel-head h2 { margin: 0; font-family: Chillion, Georgia, serif; font-weight: 400; font-size: 30px; color: var(--ink); }
  .fw-close { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 0; background: none; cursor: pointer; }
  .fw-filters.is-open .fw-panel-dates { display: block; padding: 24px 24px 8px; }
  .fw-panel-dates .fw-caps { margin-bottom: 14px; font-size: 15px; }
  .fw-panel-dates .fw-chip-list { display: flex; flex-wrap: wrap; gap: 10px; }
  .fw-filters.is-open .fw-loc-body { flex: 1; padding: 16px 24px 32px; }
  .fw-filters.is-open .fw-loc-head .fw-link-btn { display: none; }
  .fw-filters.is-open .fw-row, .fw-filters.is-open .fw-row label { min-height: 44px; }
  .fw-filters.is-open .fw-caret, .fw-filters.is-open .fw-caret-spacer { width: 44px; height: 44px; }
  .fw-filters.is-open .fw-panel-foot { display: flex; position: sticky; bottom: 0; align-items: center; justify-content: space-between;
    gap: 16px; padding: 14px 24px; background: #fff; border-top: 3px solid var(--ink); }
  .fw-panel-foot .fw-link-btn { font-size: 17px; min-height: 48px; }
  .fw-panel-foot .fw-btn { flex: 1; max-width: 360px; min-height: 52px; }
  html.fw-noscroll, html.fw-noscroll body { overflow: hidden; }
}

/* iPad: one card per row, image left */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .fw-cards { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .fw-card { height: 202px; flex-direction: row; }
  .fw-img { width: 248px; height: auto; border-bottom: 0; border-right: 3px solid var(--ink); }
  .fw-badge { width: 56px; }
  .fw-badge-d { font-size: 24px; }
  .fw-text { padding: 12px 18px; }
  .fw-loc { margin-bottom: 2px; }
  .fw-title { height: auto; margin-bottom: 8px; display: block; white-space: nowrap; text-overflow: ellipsis; }
  .fw-meta { gap: 4px; }
  .fw-place { height: auto; align-items: center !important; }
  .fw-place svg { margin-top: 0; }
  .fw-place a { display: block; white-space: nowrap; text-overflow: ellipsis; }
  .fw-more { padding-top: 8px; }
}

/* Phone: image over text */
@media screen and (max-width: 767px) {
  .fw-ev { padding: 0 16px 64px; }
  .fw-cards { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .fw-card { height: 396px; }
  .fw-img { height: 168px; }
  .fw-badge { width: 56px; }
  .fw-badge-d { font-size: 24px; }
  .fw-text { padding: 12px 16px; }
  .fw-title { margin-bottom: 8px; }
  .fw-meta { gap: 4px; }
  .fw-chips { justify-content: flex-start; }
}

@media screen and (max-width: 767px) { .fw-ev { --frame: .5rem; } }