/* /events/: events and classes for kids. Loaded after deals.css: the cards are Deals cards (image slot,
   10px top bar in the theme's playground colour, disclosure, Checked line, one button, the room-based
   layouts and no lone card on a last row). This file places the event's own lines in the Deals card's
   grid areas (organiser in "offer", title in "provider", facts in "title", price in "ends"), so every
   Deals layout, thumbnail, wide card and lone-card rule applies unchanged, and the title reads first. */
.ev-intro{margin:0 0 var(--space-block)}
.ev-intro h1{font-size:2.125rem;line-height:1.1;margin:0 0 var(--space-3)}
.ev-intro p{max-width:62ch}

/* Filters: native selects laid out by the room the form has (a size container, so the A+ control and a
   larger root font both count): one column under 16em, two to 28em, three to 56em, then six in a row. */
.ev-filter-box{container:ev-filters/inline-size}
.ev-filters{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-3);margin:0 0 var(--space-3)}
@container ev-filters (min-width:16em){.ev-filters{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container ev-filters (min-width:28em){.ev-filters{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container ev-filters (min-width:56em){.ev-filters{grid-template-columns:repeat(6,minmax(0,1fr))}}
.ev-filter{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.ev-filter label{font:800 .875rem/1.3 var(--font-head);color:var(--ink)}
.ev-filter select,.ev-filter input{width:100%;min-width:0;min-height:44px}
.ev-filter-date:not([hidden]){display:block;margin-top:var(--space-1)}
.ev-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-4);margin:0 0 var(--space-1)}
.ev-count{margin:0;font:800 1rem/1.3 var(--font-head);color:var(--ink)}
.ev-order{margin:0 0 var(--space-block);font-size:.9375rem;color:var(--muted)}

.ev-section{margin:0 0 var(--space-section)}
.ev-section h2{font-size:1.75rem;margin:0 0 var(--space-heading-after)}

/* The card's own lines, in the Deals grid areas. */
.ev-card .ev-org{grid-area:offer;order:1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) 8px;margin-top:var(--space-4);margin-bottom:0;font:800 .875rem/1.3 var(--font-head);color:var(--muted)}
.ev-card .ev-org .dot{display:inline-block;flex:0 0 auto;width:12px;height:12px;border-radius:var(--radius-btn);background:var(--c,var(--brand));border:2px solid var(--outline)}
.ev-org-name{flex:1 1 5.5em;min-width:0}
.ev-card h3{grid-area:provider;order:2;font:800 1.1875rem/1.3 var(--font-head);letter-spacing:-.01em;margin-top:var(--space-1);margin-bottom:0;overflow-wrap:anywhere}
.ev-facts{grid-area:title;order:3;margin-top:var(--space-2)}
.ev-facts p{margin:0;font-size:.9375rem;line-height:1.4;color:var(--ink);overflow-wrap:anywhere}
.ev-facts p+p{margin-top:2px}
.ev-when strong{font-weight:800}
.ev-code strong{font-weight:800;letter-spacing:.04em}
.ev-card .ev-price{grid-area:ends;order:4;margin-top:var(--space-2);margin-bottom:0;font:900 1.25rem/1.2 var(--font-head);color:var(--ink);font-variant-numeric:tabular-nums}
@container deal-group (max-width:27.99em){
  .ev-card .ev-org{margin-top:var(--space-3)}
  .ev-card h3{font-size:1.0625rem}
}
@container deal-group (min-width:16em) and (max-width:27.99em){
  :root:not([data-text-size="2"]):not([data-text-size="3"]) .ev-card .ev-org{margin-top:0}
}
@container deal-group (min-width:28em){
  .ev-card .ev-org{margin-top:var(--space-4)}
}

.ev-empty,.ev-none{margin:0 0 var(--space-section)}
.ev-empty p,.ev-none p{margin:0 0 var(--space-3);font-weight:700}
/* Few listings (render-events.js FEW): no filters, no Clear filters, a line that more are coming.
   None left: only the "Nothing is listed right now" box. */
.ev-more{display:none}
.ev-page.ev-few .ev-filter-box,.ev-page.ev-few #ev-clear{display:none}
.ev-page.ev-few .ev-order{margin-bottom:var(--space-1)}
.ev-page.ev-few .ev-more{display:block;margin:0 0 var(--space-block);font-size:.9375rem;color:var(--muted)}
.ev-page.ev-none-left .ev-bar,.ev-page.ev-none-left .ev-order,.ev-page.ev-none-left .ev-more{display:none}
.ev-organisers{margin:var(--space-section) 0 0;padding-top:var(--space-block);border-top:3px dotted var(--outline)}
.ev-organisers h2{font-size:1.25rem;margin:0 0 var(--space-2)}
.ev-organisers p{max-width:62ch;margin:0}

@media(min-width:760px){
  .ev-intro h1{font-size:3rem}
  .ev-section h2{font-size:2rem}
}

/* Without JavaScript the selects still filter: each choice hides the cards it rules out. With the
   script (.ev-js) the controller does it instead, adds This weekend and Pick a date, and keeps the URL. */
.ev-page:not(.ev-js) .ev-filter-box:has(#ev-age option[value="0-2"]:checked)~#ev-results .ev-card:not([data-ages~="0-2"]),
.ev-page:not(.ev-js) .ev-filter-box:has(#ev-age option[value="3-6"]:checked)~#ev-results .ev-card:not([data-ages~="3-6"]),
.ev-page:not(.ev-js) .ev-filter-box:has(#ev-age option[value="7-12"]:checked)~#ev-results .ev-card:not([data-ages~="7-12"]),
.ev-page:not(.ev-js) .ev-filter-box:has(#ev-area option[value="central"]:checked)~#ev-results .ev-card:not([data-areas~="central"]),
.ev-page:not(.ev-js) .ev-filter-box:has(#ev-area option[value="north"]:checked)~#ev-results .ev-card:not([data-areas~="north"]),
.ev-page:not(.ev-js) .ev-filter-box:has(#ev-area option[value="north-east"]:checked)~#ev-results .ev-card:not([data-areas~="north-east"]),
.ev-page:not(.ev-js) .ev-filter-box:has(#ev-area option[value="east"]:checked)~#ev-results .ev-card:not([data-areas~="east"]),
.ev-page:not(.ev-js) .ev-filter-box:has(#ev-area option[value="west"]:checked)~#ev-results .ev-card:not([data-areas~="west"]),
.ev-page:not(.ev-js) .ev-filter-box:has(#ev-area option[value="online"]:checked)~#ev-results .ev-card:not([data-areas~="online"]),
.ev-page:not(.ev-js) .ev-filter-box:has(#ev-when option[value="holidays"]:checked)~#ev-results .ev-card:not([data-holidays]),
.ev-page:not(.ev-js) .ev-filter-box:has(#ev-price option[value="free"]:checked)~#ev-results .ev-card:not([data-price="free"]),
.ev-page:not(.ev-js) .ev-filter-box:has(#ev-price option[value="paid"]:checked)~#ev-results .ev-card:not([data-price="paid"]),
.ev-page:not(.ev-js) .ev-filter-box:has(#ev-setting option[value="indoor"]:checked)~#ev-results .ev-card[data-setting="outdoor"],
.ev-page:not(.ev-js) .ev-filter-box:has(#ev-setting option[value="outdoor"]:checked)~#ev-results .ev-card[data-setting="indoor"],
.ev-page:not(.ev-js) .ev-filter-box:has(#ev-type option[value="event"]:checked)~#ev-results .ev-section[data-kind="class"],
.ev-page:not(.ev-js) .ev-filter-box:has(#ev-type option[value="class"]:checked)~#ev-results .ev-section[data-kind="event"]{display:none}