/* ==========================================================================
   EWP Client SDK — events calendar

   Generated from prototype/calendar.html: demo chrome removed, every class
   prefixed `ewp-ec-`, all custom properties moved off `:root` onto the mount
   element, and the OS dark-mode blocks dropped in favour of an opt-in
   `data-theme="dark"` (Squarespace 7.1 themes sections explicitly and does
   not follow `prefers-color-scheme`).

   Type is inherited, so the site's National (Typekit) face applies here with
   nothing to load. The palette below is EWP's own, taken from the site --
   NOT sampled from the badge artwork. An earlier version of this file
   sampled the badges and drifted a point or two per channel from the real
   brand colours; the site palette is now the single source of truth and the
   badges follow it, not the other way round.
   ========================================================================== */
.ewp-events-calendar {
  /* --- EWP site palette: the source of truth. Named as the site names them,
     so a colour can be checked against the brand without translation. --- */
  --yellow:             #F3C73E;
  --green:              #9BBD3C;
  --red:                #DC6638;
  --blue:               #AAC0D2;
  --offwhite:           #FAF0E6;
  --mediumblue:         #7A8EA3;
  --navy:               #243746;
  --darkgreen:          #404D2E;
  --rollinghillsgreen:  #869646;
  --black:              #313232;
  --brown:              #2E2925;

  /* --- roles: what each colour is FOR here. Every one points at the palette
     above or is a neutral the palette does not name. --- */
  --ground:      var(--offwhite);
  --surface:     #FFFFFF;
  --surface-alt: #F6F2EA;
  --ink:         var(--black);
  --muted:       #6E6B63;
  --line:        #E4DFD5;
  --forest:      var(--darkgreen);
  --lime:        var(--green);
  --lime-soft:   #EDF3DA;
  --gold:        var(--yellow);
  --ember:       var(--red);
  --on-forest:   #FDFBF8;
  /* Days outside the month and the day-list hover. A step off white so it
     reads as "quieter", not as a second colour (2026-09-10). */
  --paper:       #FDFBF8;
  --focus:       var(--darkgreen);
  /* The month grid rule. The review said #000; Kristine settled on the
     palette black (2026-09-10) so the rule matches the type colour. */
  --grid-line:   var(--black);
  --shadow:      0 1px 2px rgba(49,50,50,.05), 0 8px 24px -12px rgba(49,50,50,.16);
}

.ewp-events-calendar[data-theme="dark"] {
  --ground:      #23291B;
  --surface:     #2C3323;
  --surface-alt: #333B29;
  --ink:         #F0EEE6;
  --muted:       #A9AC9B;
  --line:        #414A34;
  --forest:      #8AA85F;
  --lime:        #A8CB49;
  --lime-soft:   #38431F;
  --gold:        #F3C73E;
  --ember:       #E87B50;
  --on-forest:   #1B2014;
  --paper:       #2F3627;
  --focus:       #A8CB49;
  --grid-line:   #6A7558;
  --shadow:      0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
  background: var(--ground);
}

/* --- location theme ------------------------------------------------------
   Column H drives four things at once: the name shown, the address under it,
   this colour, and the badge. One `data-loc` attribute carries all of them,
   so nothing downstream has to know which venue it is drawing.

   These are EWP's OWN attraction colours, referenced from the site palette
   at the top of this file. They are no longer written as literal hex here:
   a venue points at a palette token, so correcting a brand colour in one
   place corrects every venue that uses it.

   Several venues share a colour, which is fine: each has its own badge, and
   the badge is what tells them apart. Colour groups the park into families;
   the icon names the place.

   `--a`      the brand colour. Fills, tints, dots, badge grounds.
   `--a-ink`  the same colour pushed dark enough to be read as text on the
              cream ground. Gold and the pale blue are nowhere near legible at
              14 px; the live site never uses them as type, only as tints, so
              this second token is the price of putting the venue name in its
              own colour.
   `--a-tint` the colour as a light wash, for the fill behind a month-grid
              event and behind a venue pill. Derived, never hand-picked, so
              it cannot drift from `--a`. */
.ewp-events-calendar [data-loc] { --a: var(--muted); --a-ink: var(--muted); }
.ewp-events-calendar [data-loc="zoo"]   { --a: var(--yellow);    --a-ink: #8A6810; }
.ewp-events-calendar [data-loc="hoyt"]  { --a: var(--green);     --a-ink: #5C7A1E; }
.ewp-events-calendar [data-loc="wfc"]   { --a: var(--green);     --a-ink: #5C7A1E; }
.ewp-events-calendar [data-loc="pjg"]   { --a: var(--red);       --a-ink: #B4542B; }
.ewp-events-calendar [data-loc="rose"]  { --a: var(--red);       --a-ink: #B4542B; }
.ewp-events-calendar [data-loc="park"]  { --a: var(--darkgreen); --a-ink: var(--darkgreen); }
.ewp-events-calendar [data-loc="water"] { --a: var(--blue);      --a-ink: #3F6A87; }
/* Derived from whichever `--a` won above, so it is defined once for all seven
   and cannot fall out of step with the brand colour. */
.ewp-events-calendar [data-loc] { --a-tint: color-mix(in srgb, var(--a) 15%, var(--surface)); }
/* Park is the exception, and it has to be. Dark green is so low in chroma that
   a 15% wash of it lands on the same grey as the unknown-venue fallback --
   two different things reading as one colour. Rolling hills green is EWP's own
   lighter green, so the tint stays on-brand and stays green; `--a` is left
   dark so the venue name is still legible as type. */
.ewp-events-calendar [data-loc="park"] { --a-tint: color-mix(in srgb, var(--rollinghillsgreen) 20%, var(--surface)); }
/* On the dark ground every brand colour reads on its own, except forest,
   which is nearly the background. */

.ewp-events-calendar[data-theme="dark"] [data-loc] {
  --a-ink: var(--a);
  /* A light wash of the hue is wrong on a dark ground -- it glows. Mix toward
     the dark surface instead, so the tint reads as a tinted surface. */
  --a-tint: color-mix(in srgb, var(--a) 24%, var(--surface));
}
.ewp-events-calendar[data-theme="dark"] [data-loc="park"] { --a: #8AA85F; --a-ink: #8AA85F; }

/* --- the mount element ---------------------------------------------------
   Everything is scoped to this class. The module never styles `body`, never
   defines a variable on `:root`, and never uses a bare element selector --
   it is sharing a Squarespace page with jQuery and a stack of plugins. */
.ewp-events-calendar *, .ewp-events-calendar *::before, .ewp-events-calendar *::after { box-sizing: border-box; }
/* No ground of its own in the light theme: the embed sits on the Squarespace
   page and takes whatever the page is (2026-09-10). The dark theme paints its
   own ground -- a transparent dark theme would be dark text on a light host. */
.ewp-events-calendar {
  background: transparent;
  color: var(--ink);
  /* National, the site's body face, for everything here. Squarespace sets it
     as `--body-font-font-family` on the page; the fallback keeps the
     standalone prototype on whatever its host uses. Nothing is loaded from
     this folder: the site's Typekit kit already serves the face. */
  font-family: var(--body-font-font-family, inherit);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.ewp-events-calendar :where(a) { color: inherit; }
.ewp-events-calendar :where(button, a, input, select, summary):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
/* Squarespace styles bare h1-h4 with the site's heading face, style and
   case, and those element rules reached the overlay's <h2>, so the overlay
   title was in a different face from the card and row titles, which are
   <h5> and untouched by the platform (2026-09-10). Every heading here takes
   the module's face; weight, size and tracking stay with each component. */
.ewp-events-calendar h1, .ewp-events-calendar h2, .ewp-events-calendar h3,
.ewp-events-calendar h4, .ewp-events-calendar h5, .ewp-events-calendar h6 {
  font-family: inherit;
  font-style: normal;
  text-transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .ewp-events-calendar * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Squarespace styles bare <button> elements site-wide -- rounded corners, a
   shadow, an inset ring, its own type -- and every clickable thing in this
   module is a <button>: each day cell, the view toggle, the month arrows.
   Strip all of that here, in one place, so a cell is a flat box. Layout properties (padding, border,
   background) stay with each component. */
.ewp-events-calendar button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  box-shadow: none;
  text-shadow: none;
  background-image: none;
  border-radius: 0;
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  outline-offset: 0;
}

/* Full width of whatever the host gives us -- on /events that is the
   Squarespace code block, which supplies its own gutter. No cap and no
   horizontal padding here, or the embed sits inset inside that block. */
.ewp-ec-wrap { max-width: none; margin: 0; padding: 44px 0 96px; }

/* --- page head ----------------------------------------------------------- */
.ewp-ec-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
/* A class, not `h1`. The module renders its heading at whatever level the
   embed asks for, because it is nested inside a Squarespace page that already
   has an h1 — and a bare `h1` rule here would restyle that one too. */
.ewp-ec-title {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.08;
  margin: 0 0 12px;
  text-wrap: balance;
}

/* --- controls ------------------------------------------------------------ */
.ewp-ec-monthbar + .ewp-ec-controls { margin-top: 0; }
.ewp-ec-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 22px;
}
.ewp-ec-search {
  flex: 1 1 260px;
  min-width: 0;
  padding: 11px 14px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0;
}
.ewp-ec-search::placeholder { color: var(--muted); }
/* Scoped, like everything else. Unqualified, this rule restyled every
   <select> on the page it was embedded in. */
.ewp-ec-controls select {
  font: inherit;
  font-size: 15px;
  padding: 11px 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0;
}
.ewp-ec-viewtoggle { display: flex; border: 1px solid var(--line); background: var(--surface); }
.ewp-ec-viewtoggle button {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 11px 18px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.ewp-ec-viewtoggle button[aria-pressed="true"] { background: var(--forest); color: var(--on-forest); }

/* --- month nav ----------------------------------------------------------- */
/* `hidden` alone loses to the `display: flex` below, so card view was still
   showing a month it does not page through. */
.ewp-ec-monthbar[hidden] { display: none; }
.ewp-ec-monthbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 2px;
}
.ewp-ec-monthbar .ewp-ec-monthlabel {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0;
}
.ewp-ec-navbtns { display: flex; gap: 6px; }
.ewp-ec-navbtns button {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  font: inherit; font-size: 19px; line-height: 1;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  cursor: pointer;
}
.ewp-ec-navbtns button:hover:not(:disabled) { background: var(--surface-alt); }
.ewp-ec-navbtns button:disabled { opacity: .35; cursor: default; }

/* --- month grid ---------------------------------------------------------- */
/* The grid draws its own top border, so this header carries none -- two
   rules stacked here read as a boxed-in strip. */
.ewp-ec-dow {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
/* Weekdays are spelled out, per review. Both forms ship in the markup and CSS
   picks one: seven full names will not fit a phone, and swapping them in JS
   would mean re-rendering the header on resize. */
.ewp-ec-dow .ewp-ec-dow-s { display: none; }
.ewp-ec-dow span {
  padding: 12px 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
/* Each cell draws its own right and bottom edge; the container draws the top
   and left. That closes the box -- previously the last column and last row
   had nothing drawing their outer edge, which is the "cut off" in the review. */
.ewp-ec-grid { border-top: 1px solid var(--grid-line); border-left: 1px solid var(--grid-line); }
.ewp-ec-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ewp-ec-day {
  position: relative;
  min-height: 132px;
  padding: 8px 8px 10px;
  /* 24px number plus 8px above it plus 8px clear below it, so the filled
     today disc does not touch the first chip (2026-09-10). */
  padding-top: 40px;
  /* Reset first. A <button> arrives with a 2px outset border of its own (and
     Squarespace may add another), which drew a thick grey top and left edge
     inside the 1px grid rule -- the doubled border in the 2026-09-10 review. */
  border: 0;
  border-bottom: 1px solid var(--grid-line);
  border-right: 1px solid var(--grid-line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.ewp-ec-day.ewp-ec-out { background: var(--paper); }
.ewp-ec-day.ewp-ec-out .ewp-ec-daynum { opacity: .38; }
.ewp-ec-day:hover { background: var(--surface-alt); }
.ewp-ec-day.ewp-ec-sel { background: var(--lime-soft); }
.ewp-ec-daynum {
  position: absolute;
  top: 8px; left: 8px;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  width: 24px; height: 24px;
  display: grid; place-items: center;
}
.ewp-ec-day.ewp-ec-today .ewp-ec-daynum { background: var(--forest); color: var(--on-forest); border-radius: 50%; }
/* The venue colour is carried by the chip's own fill, matching the pattern
   the current site uses. This replaces the dot rather than joining it: once
   the whole chip is tinted, a 5px dot of the same hue earns nothing. The dot
   survives only at phone width, where there is no room for a filled block. */
.ewp-ec-chip {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink);
  text-align: left;
  background: var(--a-tint);
  padding: 2px 5px;
}
.ewp-ec-chip:hover { background: color-mix(in srgb, var(--a) 30%, var(--surface)); }
.ewp-ec-chip .ewp-ec-t { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.ewp-ec-chip .ewp-ec-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* No dot at this width -- the fill above is the colour cue. Every event on
   the day is a chip: the cell grows and the row with it. The old three-chip
   cap plus "+N more" hid events for the sake of uniform rows, and at full
   width the rows were short and wide anyway (2026-09-10). */

/* --- venue pill -----------------------------------------------------------
   One component, three homes: card, day list, detail overlay. Square-cornered
   and without the leading dot (2026-09-10): the fill is the same `--a-tint`
   the month-grid chips use, so the pill and the chip for one venue are
   visibly the same colour, and that fill is the whole colour cue. */
.ewp-ec-pill {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  color: var(--ink);
  background: var(--a-tint);
  padding: 6px 10px;
  border-radius: 0;
  white-space: nowrap;
  max-width: 100%;
}

/* --- location badge, or the column-T image that overrides it -------------
   The badge sits on the white, no ground and no border: per review, the icon
   IS the coloured thing, and a tinted box around it was a second, dimmer copy
   of the same colour. It is a square logo and must sit inside its box; a
   photo from column T is a photo and should fill it. Same element, two fits. */
.ewp-ec-tile {
  width: 64px; height: 64px;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.ewp-ec-tile > * { width: 100%; height: 100%; display: block; }
.ewp-ec-tile .ewp-ec-badge-img, .ewp-ec-tile svg { object-fit: contain; }
.ewp-ec-tile .ewp-ec-photo { object-fit: cover; }

/* --- the shared record pieces --------------------------------------------
   Card and day-list row carry the same six things in the same order. What is
   shared is defined once here; the two layouts only place it. */
/* The title is the trigger. A real button so it is one tab stop with the
   title as its name, dressed as the heading text so nothing announces
   "button" visually. The card stretches it over the whole box below. */
.ewp-ec-open {
  font: inherit;
  color: inherit;
  text-align: left;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
/* Card, day-list row and overlay share one when-block (2026-09-10): the full
   date on one line, the time range on the next, same size and weight in all
   three, so the eye finds the same fact in the same shape everywhere. */
.ewp-ec-when {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ewp-ec-when .ewp-ec-tba { color: var(--muted); }
/* The address belongs to the overlay only: it came off the cards and the
   day-list rows in the redesign, where it was the longest line and said the
   least. */
.ewp-ec-addr { font-size: 15px; color: var(--ink); margin: 0; }
/* Plain text, no chip: the review found a boxed price on every card read as
   a button. Weight alone marks it as the answer to "how much". */
.ewp-ec-price { font-size: 17px; font-weight: 600; color: var(--ink); }

/* --- day detail / list --------------------------------------------------- */
.ewp-ec-daylist { margin-top: 40px; }
.ewp-ec-daylist .ewp-ec-daylabel {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
  padding: 0 var(--row-inset);
}
/* Rows are inset a little from the edges so the hover fill does not press
   right up against the time on the left and the price on the right. The day
   label carries the same inset so the text edges still line up. */
.ewp-ec-daylist { --row-inset: 16px; }
/* Badge, then title with the venue pill under it, then the when-block and
   the price on the right: the same order the card reads in, laid out on a
   line. The time column that used to lead the row is gone with the redesign
   (2026-09-10); the date and time now sit together at the right. The
   when-column is fixed-width so the dates share a left edge down the list
   whatever the price beside them says; the widest date is ~215px, and the
   price column is fixed too, since a grid column that grows with its
   content pushes the column before it around. */
.ewp-ec-event {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr 230px 210px;
  gap: 18px 22px;
  align-items: center;
  padding: 22px var(--row-inset);
  border-top: 1px solid var(--line);
}
.ewp-ec-event:last-child { border-bottom: 1px solid var(--line); }
/* The whole row is the trigger, the same way the whole card is: the title
   button's ::after is stretched over the row, so a click on the time, the
   badge or the price opens the overlay too (2026-09-10). */
.ewp-ec-event .ewp-ec-open::after { content: ""; position: absolute; inset: 0; }
.ewp-ec-event:hover { background: var(--paper); }
.ewp-ec-event:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.ewp-ec-event .ewp-ec-open:focus-visible { outline: 0; }
.ewp-ec-event .ewp-ec-body { min-width: 0; }
.ewp-ec-event h5 { font-size: 24px; font-weight: 600; letter-spacing: -.005em; margin: 0 0 8px; line-height: 1.25; }
/* Right edge, where the button used to sit, so the eye that learned to look
   there for the action finds the one fact the row still has to give. */
.ewp-ec-event .ewp-ec-price { text-align: right; min-width: 56px; }
/* Every chip is gone (2026-09-10). Price is plain text, and Column O rides on
   that same line as "$12 · Registration Required" in all three views rather
   than as a chip of its own in the overlay. */
/* One button, one style, per review: "visit event page" and "view registration
   page" are the same kind of act and should not look like different offers.
   Black and white rather than a venue colour -- the venue colour means "which
   part of the park", and reusing it here would say something it does not mean.
   It also sidesteps the contrast problem, since gold and the pale blue cannot
   carry white text. */
.ewp-ec-btn {
  display: inline-block;
  background: var(--ink);
  color: var(--surface);
  font-size: 15px;
  font-weight: 700;
  padding: 11px 22px;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--ink);
}
.ewp-ec-btn:hover {
  background: var(--surface);
  color: var(--ink);
  filter: none;
}

/* --- card view -----------------------------------------------------------
   Six things, top to bottom: badge, date, title, address, venue pill, price.
   Matches the card view this embed replaces, which reads cleaner precisely
   because it carries six elements and leaves the rest to the overlay.
   Four across at desktop and every card in a row the same height -- grid
   stretch does the height, and the price is pushed to the floor so the last
   line lands in the same place on every card. */
.ewp-ec-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }
@media (min-width: 1100px) { .ewp-ec-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ewp-ec-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  box-shadow: var(--shadow);
  transition: box-shadow .15s;
}
/* The whole card is the trigger, but the button inside the title is the only
   tab stop: its ::after is stretched over the card, so a click anywhere lands
   on it. The lift on hover is what says "this opens"; the ring on
   focus-within is the keyboard's version of the same thing, drawn on the
   card box rather than round the words. */
.ewp-ec-card .ewp-ec-open::after { content: ""; position: absolute; inset: 0; }
.ewp-ec-card:hover { box-shadow: 0 1px 2px rgba(49,50,50,.08), 0 14px 32px -12px rgba(49,50,50,.3); }
.ewp-ec-card:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.ewp-ec-card .ewp-ec-open:focus-visible { outline: 0; }
/* The badge sits on the white, top-left, nothing behind it. A photo from
   column T is the exception that keeps a frame: a photo is a photo, and it
   gets a fixed crop so the cards stay a uniform shape. */
.ewp-ec-card .ewp-ec-media { align-self: stretch; display: grid; place-items: start; margin-bottom: 2px; }
.ewp-ec-card .ewp-ec-media > * { display: block; }
.ewp-ec-card .ewp-ec-media .ewp-ec-badge-img, .ewp-ec-card .ewp-ec-media svg { width: 64px; height: 64px; object-fit: contain; }
.ewp-ec-card .ewp-ec-media .ewp-ec-photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* Badge, pill, title, when-block, then the price under a rule that spans the
   card (2026-09-10): the rule is what makes the price read as the card's
   answer rather than as one more line of the stack. */
.ewp-ec-card h5 { font-size: 24px; font-weight: 600; margin: 4px 0 0; line-height: 1.25; text-wrap: balance; }
/* The venue pill drops a step on the card only: at 13px it competed with the
   24px title instead of sitting with the address and when-block as one of
   the card's supporting lines. The day list and overlay keep the shared size. */
.ewp-ec-card .ewp-ec-pill { font-size: 11px; padding: 5px 8px; }
.ewp-ec-card .ewp-ec-price { align-self: stretch; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }

.ewp-ec-empty {
  padding: 52px 20px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line);
}

/* --- event detail overlay -------------------------------------------------
   The module's first fixed-position UI. It lives in a portal appended to
   `body`, not in the mount: Squarespace's fluid engine gives every block a
   z-index of its own, so a fixed element inside the code block is trapped in
   that block's stacking context and the neighbouring text blocks paint over
   it, whatever its z-index. The portal carries `.ewp-events-calendar` and the
   mount's `data-theme` so every token above still reaches the dialog, and
   `display: contents` gives it no box, so it adds nothing to the page flow
   and paints no ground of its own (the dark theme's `background` on the
   class is moot without a box). Squarespace's sticky header and announcement
   bar sit at z-indexes in the thousands and would otherwise cut across the
   panel; this value is above anything the platform ships. */
.ewp-ec-portal { display: contents; }
.ewp-ec-dlg {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(49,50,50,.55);
  animation: ewp-ec-dlg-in .18s ease-out;
}
@keyframes ewp-ec-dlg-in { from { opacity: 0; } }
.ewp-ec-dlg-panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--ink);
  border-radius: 4px;
  box-shadow: var(--shadow), 0 24px 64px -16px rgba(0,0,0,.45);
  overflow: hidden;
}
.ewp-ec-dlg-panel:focus { outline: none; }
/* Header strip: the close button and nothing else, no rule under it. The
   badge used to sit here on its own row; it now sits beside the venue pill
   and title so the panel spends less height before the content (2026-09-10). */
.ewp-ec-dlg-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 8px 0;
}
.ewp-ec-dlg-badge { width: 80px; height: 80px; flex: none; display: grid; place-items: center; overflow: hidden; }
.ewp-ec-dlg-badge > * { width: 100%; height: 100%; display: block; object-fit: contain; }
.ewp-ec-dlg-badge .ewp-ec-photo { object-fit: cover; }
/* Badge left, title and pill stacked to its right, centred on the badge --
   the card's header, one size up. */
.ewp-ec-dlg-lead { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.ewp-ec-dlg-lead > div { min-width: 0; }
.ewp-ec-dlg-lead .ewp-ec-pill { margin-top: 8px; }
.ewp-ec-dlg-close {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  font: inherit; font-size: 28px; line-height: 1;
  color: var(--ink);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.ewp-ec-dlg-close:hover { background: var(--surface-alt); }
/* The body is the only part that scrolls, so the header and the action button
   stay in reach however long the description runs. */
.ewp-ec-dlg-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 44px 8px; }
.ewp-ec-dlg-title {
  font-size: clamp(26px, 3.4vw, 32px);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
/* The facts: when-block left, price right on the same line, address under
   them, no icons (2026-09-10). Same when-block and price as the card, so the
   overlay is the card opened up, not a second design. */
.ewp-ec-dlg-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px 24px;
  align-items: start;
  padding: 0 0 4px;
}
.ewp-ec-dlg-meta .ewp-ec-when { font-size: 17px; }
.ewp-ec-dlg-meta .ewp-ec-dlg-price { font-size: 19px; padding-top: 2px; }
.ewp-ec-dlg-meta .ewp-ec-addr { grid-column: 1 / -1; font-size: 17px; }
/* The description is the one run of prose in the module, so it reads as a
   Squarespace paragraph: the six `--body-font-*` properties the platform sets
   on the page for its own text blocks. The dialog is rendered on `body`, so
   they inherit into it directly. Each carries a fallback, so the standalone
   prototype, which has no Squarespace variables, keeps the previous look;
   the size stays the module's own, since the platform's is a calc against a
   slider value that has no sensible fallback. */
.ewp-ec-dlg-desc {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--body-font-font-family, inherit);
  font-style: var(--body-font-font-style, normal);
  font-weight: var(--body-font-font-weight, 400);
  font-size: 17px;
  line-height: var(--body-font-line-height, 1.5);
  letter-spacing: var(--body-font-letter-spacing, normal);
  text-transform: var(--body-font-text-transform, none);
  color: var(--ink);
}
.ewp-ec-dlg-desc p { margin: 0 0 1em; }
.ewp-ec-dlg-desc p:last-child { margin-bottom: 0; }
.ewp-ec-dlg-foot { flex: none; padding: 16px 44px 44px; }
.ewp-ec-dlg-foot .ewp-ec-btn { display: block; text-align: center; }

@media (max-width: 720px) {
  /* No side padding: the Squarespace section supplies the same gutter as
     the rest of the page's content, so the embed lines up with it. */
  .ewp-ec-wrap { padding: 28px 0 72px; }

  /* Seven columns will not carry a time label at this width -- the label's
     minimum width would push the grid wider than the screen. Days become
     dots; the list underneath carries every detail. The dots stay coloured,
     so location still reads at a glance. */
  .ewp-ec-dow span { padding: 10px 2px; font-size: 11px; letter-spacing: .06em; }
  /* Seven full weekday names do not fit a phone. Swap to the short form. */
  .ewp-ec-dow .ewp-ec-dow-l { display: none; }
  .ewp-ec-dow .ewp-ec-dow-s { display: inline; }
  .ewp-ec-day {
    min-height: 62px;
    padding: 28px 5px 7px;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 4px;
  }
  .ewp-ec-daynum { top: 5px; left: 3px; font-size: 13px; width: 22px; height: 22px; }
  /* Today is a tinted cell here, not a filled disc on the number: the disc
     and the dots underneath fought for a 62px cell. Selected still wins, so
     a tapped today reads as selected (2026-09-10). */
  .ewp-ec-day.ewp-ec-today .ewp-ec-daynum { background: transparent; color: inherit; border-radius: 0; }
  .ewp-ec-day.ewp-ec-today { background: color-mix(in srgb, var(--forest) 12%, var(--surface)); }
  .ewp-ec-day.ewp-ec-today.ewp-ec-sel { background: var(--lime-soft); }
  /* No room for a filled block here, so the chip IS the dot: same token,
     solid rather than washed out, since 6px of a 15% tint is invisible. */
  .ewp-ec-chip {
    flex: none;
    width: 6px; height: 6px;
    overflow: hidden;
    padding: 0;
    border-radius: 50%;
    background: var(--a);
  }
  .ewp-ec-chip .ewp-ec-t, .ewp-ec-chip .ewp-ec-n { display: none; }
  /* A 6px dot is no target; a tap on it selects the day, not the event. */
  .ewp-ec-chip { pointer-events: none; }

  /* Two columns: badge left, everything else stacked beside it in the card's
     order -- title, pill, when-block, price -- so the phone row is the card
     turned sideways. */
  .ewp-ec-event { grid-template-columns: 64px 1fr; gap: 12px 14px; align-items: start; }
  .ewp-ec-event .ewp-ec-tile { grid-row: 1 / span 3; }
  .ewp-ec-event .ewp-ec-body { grid-column: 2; }
  .ewp-ec-event .ewp-ec-when { grid-column: 2; }
  .ewp-ec-event .ewp-ec-price { grid-column: 2; text-align: left; min-width: 0; }
  .ewp-ec-event h5 { font-size: 22px; }
  .ewp-ec-cards { grid-template-columns: 1fr; }

  /* A phone gets a full-screen sheet: no backdrop margin, no radius, the panel
     is the viewport. `dvh` so the address bar collapsing does not leave a gap. */
  .ewp-ec-dlg { padding: 0; }
  .ewp-ec-dlg-panel { max-width: none; height: 100%; max-height: 100dvh; border-radius: 0; }
  .ewp-ec-dlg-lead { gap: 14px; }
  .ewp-ec-dlg-badge { width: 64px; height: 64px; }
  .ewp-ec-dlg-body { padding: 4px 16px 8px; }
  .ewp-ec-dlg-meta { grid-template-columns: 1fr; gap: 12px; }
  .ewp-ec-dlg-meta .ewp-ec-dlg-price { padding-top: 0; }
  .ewp-ec-dlg-foot { padding: 14px 16px 18px; }
}