/* Scoop Events Widget. Logical properties throughout so the Arabic (RTL) site works
   without a separate stylesheet when it is switched on later. */

.sew-events__heading {
    margin: 0 0 12px;
}

.sew-events__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.sew-events--grid .sew-events__list {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.sew-events--list .sew-events__list {
    grid-template-columns: 1fr;
}

.sew-events__item {
    margin: 0;
}

.sew-events__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.04);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease;
}

.sew-events__link:hover,
.sew-events__link:focus-visible {
    background: rgba(0, 0, 0, 0.08);
}

.sew-events__date {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    inline-size: 54px;
    block-size: 54px;
    border-radius: 10px;
    /* Overridden inline per event from EventON's evcal_event_color. */
    background: #222;
    color: #fff;
    line-height: 1.1;
}

.sew-events__day {
    font-size: 22px;
    font-weight: 700;
}

/* The "AUG" line inside the 54px date chip. Distinct from .sew-events__month-heading
   below, which is the "August 2026" section heading on the calendar pages. */
.sew-events__month-label {
    font-size: 11px;
    text-transform: uppercase;
}

.sew-events__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
}

.sew-events__title {
    font-weight: 700;
    /* Long event titles must not blow out a narrow sidebar. */
    overflow-wrap: anywhere;
}

.sew-events__meta,
.sew-events__time {
    font-size: 12px;
    opacity: 0.75;
}

.sew-events__empty {
    opacity: 0.7;
    font-style: italic;
}

@media (prefers-color-scheme: dark) {
    .sew-events__link {
        background: rgba(255, 255, 255, 0.06);
    }
    .sew-events__link:hover,
    .sew-events__link:focus-visible {
        background: rgba(255, 255, 255, 0.12);
    }
}

.sew-events .sew-events__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-block-start: 16px;
    /* The widget owns the space below its own last element. Without this the link ends
       flush with the widget box and whatever follows sits right on top of it. Larger than
       the 16px above because this gap separates the widget from the next section, not
       from its own list. */
    margin-block-end: 24px;
    /* 44px touch target (WCAG 2.5.8); this link measured 18px tall. */
    min-block-size: 44px;
    font-weight: 700;
    font-size: 17px;
    text-decoration: none;
    color: #d92b2b;
    opacity: 1;
}

.sew-events .sew-events__more:hover,
.sew-events .sew-events__more:focus-visible {
    color: #b31f1f;
    text-decoration: underline;
}

.sew-events .sew-events__more-arrow {
    font-size: 1.1em;
    line-height: 1;
}

/* Flip the arrow for RTL (the Arabic site, once it is switched on). */
[dir="rtl"] .sew-events .sew-events__more-arrow {
    transform: scaleX(-1);
}

/* Must come AFTER the base .sew-events__more rules above: same specificity, so source
   order decides. Sitting in the earlier dark-mode block, these lost to the base colour
   and dark mode silently rendered the light red. */
@media (prefers-color-scheme: dark) {
    .sew-events .sew-events__more {
        color: #ff6b6b;
    }
    .sew-events .sew-events__more:hover,
    .sew-events .sew-events__more:focus-visible {
        color: #ff8f8f;
    }
}

/* ---------------------------------------------------------------------------
   Tile layout (layout="tile")

   Replicates EventON's `.eventon_list_event` so the calendar homepage looks
   unchanged after the swap. Every value below was read off the live tiles with
   getComputedStyle rather than eyeballed from a screenshot.

   Appended at the end of the file on purpose: the dark-mode override block
   above is same-specificity, and anything placed before it silently loses.
   --------------------------------------------------------------------------- */

.sew-events--tile .sew-events__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sew-events--tile .sew-events__tile {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sew-events__tile-link {
    display: flex;
    flex-direction: row;
    gap: 10px;
    min-height: 208px;
    padding: 30px;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    /* Set inline per tile by Sew_Renderer::tile_ink(), which picks whichever of #111 /
       #fff has more contrast against that event's own fill. Hardcoding white here put
       240 of 342 homepage tiles under the AA floor, the worst at 1.48:1. */
    color: var(--tile-ink, #fff);
    background-color: #444; /* fallback when an event has no evcal_event_color */
}

.sew-events__tile-link:hover,
.sew-events__tile-link:focus-visible {
    text-decoration: none;
    color: var(--tile-ink, #fff);
    /* Lightening a light fill on hover pushes it further from its dark ink. Darkening
       is the safe direction for both inks, and reads as a press either way. */
    filter: brightness(0.94);
}

.sew-events__tile-date {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    align-items: flex-start;
    color: var(--tile-ink, #fff);
}

.sew-events__tile-weekday,
.sew-events__tile-month {
    font-family: "Fira Sans", system-ui, arial, sans-serif;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.2;
}

.sew-events__tile-day {
    font-family: "Fira Sans", system-ui, arial, sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 33px;
}

.sew-events__tile-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.sew-events__tile-city,
.sew-events__tile-venue {
    font-family: "Fira Sans", system-ui, arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    color: var(--tile-ink, #fff);
}

.sew-events__tile-title {
    font-family: Poppins, sans-serif;
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 28.8px;
    color: var(--tile-ink, #fff);
    /* break-word, not anywhere: `anywhere` split real titles mid-word ("GOUBI/K" then
       "HORDA"). This only breaks a word that cannot fit on a line of its own. */
    overflow-wrap: break-word;
}

@media (max-width: 900px) {
    .sew-events--tile .sew-events__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .sew-events--tile .sew-events__list {
        grid-template-columns: minmax(0, 1fr);
    }
    .sew-events__tile-link {
        padding: 20px;
        min-height: 0;
    }
    .sew-events__tile-title {
        font-size: 20px;
        line-height: 24px;
    }
}

/* Tile refinements.

   The date column and body column already share the same box top; what read as the date
   sitting "higher" was line-height. The weekday line box is 13.2px while the city line box
   is 19.2px, so "THU" hugged the top of its box while the city sat centred in a taller one.
   Matching the two line boxes puts the first lines on the same optical line. */
.sew-events__tile-weekday {
    line-height: 19.2px;
}

.sew-events__tile-link {
    gap: 26px;
}

/* Venue pin, replacing EventON's <i class="fa fa-location-pin">, whose font we no longer
   load on this page. */
.sew-events__tile-venue {
    display: flex;
    align-items: center;
    gap: 5px;
}

.sew-events__pin {
    width: 9px;
    height: 12px;
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   Image tiles

   EventON paints the featured image as an inline background-image. We use a real <img>
   instead so it can be lazy-loaded and carry srcset (a month view is ~80 tiles). The
   event colour stays on the tile underneath, so there is something to look at while the
   image loads and if it 404s.
   --------------------------------------------------------------------------- */
.sew-events__tile-link {
    position: relative;
}

.sew-events__tile-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    z-index: 0;
}

/* Image tile: the text is laid out EXACTLY like the solid tile (date column left, city / title /
   venue right, same sizes and clamps); only the colour changes.

   Placement (_scoop_tile_place, sei_tile_finish()): per breakpoint a scale --s, an object-position
   --x / --y (fractions) and a scrim end --e, set inline as --sd/--xd/--yd/--ed (desktop) and
   --sm/--xm/--ym/--em (phone). The <img> box is the picture box times --s, shifted by
   (1 - s) x position: the same crop as transform: scale() with a matching origin, but the layout
   width is the drawn width, so sizes="auto" asks for the right srcset candidate.

   Scrim: black, solid to (end - 20%), transparent at the end (~58%, lower under a tall title).
   Strength from _scoop_tile_scrim: white text >= 4.5:1 (title 3:1) at the 95th percentile of the
   final crop's text area. The solid-colour tile (no image) is untouched by everything below. */
.sew-events__tile-link--has-image {
    --scrim: .42;
    --s: var(--sd, 1);
    --x: var(--xd, .5);
    --y: var(--yd, .5);
    --e: var(--ed, .58);
    color: #fff;
}

@media (max-width: 600px) {
    .sew-events__tile-link--has-image {
        --s: var(--sm, 1);
        --x: var(--xm, .5);
        --y: var(--ym, .5);
        --e: var(--em, .58);
    }
}

.sew-events__tile-link--scrim-medium { --scrim: .6; }
.sew-events__tile-link--scrim-strong { --scrim: .8; }

.sew-events__tile-link--has-image .sew-events__tile-img {
    inset: auto;
    left: calc((1 - var(--s)) * var(--x) * 100%);
    top: calc((1 - var(--s)) * var(--y) * 100%);
    width: calc(var(--s) * 100%);
    height: calc(var(--s) * 100%);
    max-width: none;
    object-position: calc(var(--x) * 100%) calc(var(--y) * 100%);
    border-radius: 0;
}

/* Editor flip (_scoop_tile_flip): the picture only is mirrored, never the text. The crop inside the box is unchanged;
   the box itself moves to its mirror position, (1 - s) x (1 - x), so tile point t shows what t' = 1 - t showed. */
.sew-events__tile-link--has-image.sew-events__tile-link--flip .sew-events__tile-img {
    left: calc((1 - var(--s)) * (1 - var(--x)) * 100%);
    transform: scaleX(-1);
}

.sew-events__tile-link--has-image::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    /* 2026-10-18 owner decision: no scrim over the photo; legibility comes from the text shadow below, and
       tiles too bright for that (_scoop_tile_scrim = strong) render as the solid colour tile instead. */
    background: none;
    z-index: 1;
}

.sew-events__tile-link--has-image .sew-events__tile-date,
.sew-events__tile-link--has-image .sew-events__tile-body {
    position: relative;
    z-index: 2;
}

.sew-events__tile-link--has-image .sew-events__tile-date,
.sew-events__tile-link--has-image .sew-events__tile-weekday,
.sew-events__tile-link--has-image .sew-events__tile-day,
.sew-events__tile-link--has-image .sew-events__tile-month,
.sew-events__tile-link--has-image .sew-events__tile-time,
.sew-events__tile-link--has-image .sew-events__tile-title,
.sew-events__tile-link--has-image .sew-events__tile-city,
.sew-events__tile-link--has-image .sew-events__tile-venue {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.75), 0 0 10px rgba(0,0,0,.55), 0 0 22px rgba(0,0,0,.35);
}

/* _scoop_tile_scrim = dark: a light, even photo keeps its image; the text takes the colour tiles' dark ink
   (Sew_Renderer::tile_ink) on a light halo of the same strength as the shadow above. Layout is untouched. */
.sew-events__tile-link--ink-dark .sew-events__tile-date,
.sew-events__tile-link--ink-dark .sew-events__tile-weekday,
.sew-events__tile-link--ink-dark .sew-events__tile-day,
.sew-events__tile-link--ink-dark .sew-events__tile-month,
.sew-events__tile-link--ink-dark .sew-events__tile-time,
.sew-events__tile-link--ink-dark .sew-events__tile-title,
.sew-events__tile-link--ink-dark .sew-events__tile-city,
.sew-events__tile-link--ink-dark .sew-events__tile-venue {
    color: #0d0d0d;
    text-shadow: 0 1px 2px rgba(255,255,255,.7), 0 0 10px rgba(255,255,255,.5), 0 0 22px rgba(255,255,255,.3);
}

/* Film tiles too bright for the text shadow alone (scrim strong, or not measured yet): black at --scrim, solid to 80% of the tile
   and clear at 90%, so the venue line (to ~81% on desktop) sits under it too; sei_tile_film_ink() measures exactly this.
   Film rows only (Seelp_Cinema::film_row sets film_scrim). */
.sew-events__tile-link--has-image.sew-events__tile-link--film-scrim { --e: .9; }
.sew-events__tile-link--has-image.sew-events__tile-link--film-scrim::after {
    background: linear-gradient(rgba(0,0,0,var(--scrim)) 80%, rgba(0,0,0,0) 90%);
}

/* No side mode (owner, 2026-10-18): a face that needs room is outpainted upward instead (sei_tile_outpaint). */

/* ---------------------------------------------------------------------------
   Month headings and month nav
   --------------------------------------------------------------------------- */
.sew-events__month-heading {
    margin: 32px 0 16px;
    font-size: 22px;
    line-height: 1.2;
}

.sew-events__month-heading:first-child {
    margin-top: 0;
}

.sew-events__months ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.sew-events__month-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* 44px minimum touch height (WCAG 2.5.8); this was 32px. */
    min-block-size: 44px;
    padding: 0 15px;
    /* Was rgba(127,127,127,.35) = 2.12:1 on white, under the 3:1 floor for a UI
       component boundary: the site's only filter control had an edge you could
       barely see. Same grey, full strength. */
    border: 1px solid #767676;
    border-radius: 999px;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.sew-events__month-link:hover,
.sew-events__month-link:focus-visible {
    text-decoration: none;
    border-color: currentColor;
}

.sew-events__month-link.is-current {
    background: #111;
    border-color: #111;
    color: #fff;
}

.sew-events__month-count {
    /* An opacity haircut on already-mid-grey text landed these at 3.23:1. The counts
       are the entire reason the pill is useful, so they cannot be the part that fails
       AA. #767676 is the lightest grey that clears 4.5:1 on white. */
    color: #767676;
    font-size: 12px;
}

.sew-events__month-link.is-current .sew-events__month-count {
    color: rgba(255, 255, 255, 0.82);
}

@media (prefers-color-scheme: dark) {
    .sew-events__month-count {
        color: #a8a8a8;
    }
}

/* ---------------------------------------------------------------------------
   Search
   --------------------------------------------------------------------------- */
.sew-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 520px;
}

/* 10px matches the city buttons, the closest equivalent control on this site. Measured
   siblings: hero CTA 3px, city buttons 10px, event tiles 20px - a 999px pill was the
   only one on the page. */
.sew-search__input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    padding: 12px 44px 12px 18px;
    border: 1px solid rgba(127, 127, 127, .35);
    border-radius: 10px;
    background: #fff;
    color: #111;
    font-size: 15px;
    line-height: 1.3;
}

.sew-search__input:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.sew-search__submit {
    position: absolute;
    right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px touch target (WCAG 2.5.8); the glyph inside stays 15px. */
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #555;
    cursor: pointer;
}

.sew-search__submit svg {
    width: 15px;
    height: 15px;
}

/* In the site header the search shares a flex row with the logo, the nav and the CTA, so
   it has to yield rather than hold 520px and squeeze the nav off its own left edge. */
.sew-search--compact {
    flex: 0 1 300px;
    max-width: 300px;
}

.sew-search--hero {
    max-width: 620px;
    margin: 0 auto;
}

.sew-search--hero .sew-search__input {
    padding: 16px 52px 16px 22px;
    font-size: 17px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}

/* Results dropdown */
.sew-search__results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 60;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: #fff;
    color: #111;
    /* Follows the input's 10px rather than sitting rounder than the thing it hangs off. */
    border-radius: 10px;
    /* A shadow alone left it floating with no edge over pale page sections. */
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .2);
    /* Rows are not a fixed height - a two-line title is ~76px against ~58px - so no
       max-height can land on a row boundary. The sticky footer below is what stops a
       clipped row reading as a rendering fault: the list visibly continues under a
       fixed edge instead of just stopping. */
    max-height: 360px;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* The scrollbar is part of this component, not the browser's. */
    scrollbar-width: thin;
    scrollbar-color: #c4c4c4 transparent;
}

.sew-search__results::-webkit-scrollbar {
    width: 8px;
}

.sew-search__results::-webkit-scrollbar-thumb {
    background: #c4c4c4;
    border-radius: 999px;
}

/* Hairline between results. Eight titles with nothing between them read as one block
   of text; the rule is what makes them countable. */
.sew-search__result + .sew-search__result {
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}

/* The last row: where the full result set lives. Always present, so the bottom of the
   list is a destination rather than an arbitrary cut. */
.sew-search__all {
    /* Sticky, so the way out of the list is always on screen: it used to scroll off the
       bottom, which left the eighth result looking like the end of the world. The shadow
       is what tells you results pass underneath it. */
    position: sticky;
    bottom: -4px;
    margin-top: 4px;
    padding-bottom: 4px;
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 -8px 12px -8px rgba(0, 0, 0, 0.18);
}

.sew-search__all a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 7px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--se-red-ink, #e00000);
    text-decoration: none;
}

.sew-search__all a:hover,
.sew-search__all a:focus-visible {
    background: rgba(0, 0, 0, 0.05);
    text-decoration: none;
}

.sew-search__results[hidden] {
    display: none;
}

.sew-search__result-link {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 10px 12px;
    border-radius: 7px;
    text-decoration: none;
    color: inherit;
}

.sew-search__result.is-active .sew-search__result-link,
.sew-search__result-link:hover,
.sew-search__result-link:focus-visible {
    background: rgba(127, 127, 127, .14);
    text-decoration: none;
}

.sew-search__result-title {
    font-size: 15px;
    line-height: 1.25;
}

/* A real colour, not opacity on #111: #6b6b6b is 5.7:1 on white and does not change
   when the row is highlighted. */
.sew-search__result-meta {
    font-size: 12.5px;
    color: #6b6b6b;
}

/* ---------------------------------------------------------------------------
   Start time on the tile

   The one field a "what is on tonight" calendar was not printing. Sits at the
   foot of the date column so the whole when-block reads top to bottom:
   weekday / day / month / time.
   --------------------------------------------------------------------------- */
.sew-events__tile-time {
    font-family: "Fira Sans", system-ui, arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    margin-block-start: 6px;
    white-space: nowrap;
}

/* Tonight and tomorrow are the two days someone is actually choosing between, so
   the weekday slot names them instead of saying "THU". No colour change: the ink
   is already the maximum-contrast choice for this tile, and a red would land on
   45 different fills. Weight and tracking carry it instead. */
.sew-events__tile-date.is-imminent .sew-events__tile-weekday {
    font-weight: 800;
    letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------------------
   Filter pills (full listing pages)
   --------------------------------------------------------------------------- */
.sew-events__filters {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-block-end: 28px;
}

/* Label | options. The label is a fixed column so the three rows line up. */
.sew-events__filter {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.sew-events__filter-label {
    flex: 0 0 auto;
    min-inline-size: 48px;
    font-family: Poppins, system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* Was opacity 0.62 over the body ink: 3.4:1 at 11px. #666 is the same grey family
       at 5.7:1 on white. */
    color: #666;
}

/* Centred on the first row of 44px pills. */
.sew-events__filter > .sew-events__filter-label {
    line-height: 44px;
}

/* The phone disclosure. Wide screens never need it: their options are always shown. */
.sew-events__filter-toggle {
    display: none;
}

.sew-events__filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1 1 auto;
    min-inline-size: 0;
}

.sew-events__filter-list,
.sew-events__filter-tail {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The tail opens on its own full-width line under the row and wraps there, so the
   "N more" control stays where it was clicked. Hidden only where :has() exists; an
   older browser shows every city rather than none. */
.sew-events__filter-tail {
    flex-basis: 100%;
    /* Dashed like the "N more" pill that opened it, so the tail reads as its contents. */
    padding-block-start: 10px;
    border-block-start: 1px dashed #767676;
}

.sew-events__filter-options:has(.sew-events__filter-more:not([open])) > .sew-events__filter-tail {
    display: none;
}

/* Date jumps under the month pills: navigation inside the month, not a filter, so a
   lighter, shorter pill (36px - still well over the 24px target) and no counts. */
.sew-events__filter-jumps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex-basis: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sew-events__filter-link.sew-events__filter-link--jump {
    min-block-size: 36px;
    padding: 0 13px;
    font-size: 13px;
}

/* Where you are in the month, not a selection: outlined, so the black month pill above
   stays the one filled "current" in the row. */
.sew-events__filter-link.sew-events__filter-link--jump.is-current {
    /* Three classes: must beat .sew-events__filter-link.is-current, which comes later. */
    background: transparent;
    border: 2px solid #111;
    color: inherit;
    font-weight: 700;
}

.sew-events__filter-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* 44px minimum touch height, per WCAG 2.5.8. The month pills next to these were
       32px and the city buttons 39px, so nothing in this family met it. */
    min-block-size: 44px;
    padding: 0 15px;
    /* rgba(127,127,127,.35) measured 2.12:1 on white, under the 3:1 floor for a UI
       component boundary. This is the same grey at full strength. */
    border: 1px solid #767676;
    border-radius: 999px;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.sew-events__filter-link:hover,
.sew-events__filter-link:focus-visible {
    text-decoration: none;
    border-color: currentColor;
}

.sew-events__filter-link.is-current {
    background: #111;
    border-color: #111;
    color: #fff;
}

/* #767676 is the lightest grey that still clears 4.5:1 on white. The count is the
   whole reason the pill is useful, so it cannot be the part that fails. */
.sew-events__filter-count {
    font-size: 12px;
    color: #767676;
}

.sew-events__filter-link.is-current .sew-events__filter-count {
    color: rgba(255, 255, 255, 0.82);
}

@media (prefers-color-scheme: dark) {
    .sew-events__filter-count {
        color: #a8a8a8;
    }
}

/* The "See All X Events" links written into the page content sit in their own <p>,
   OUTSIDE any .sew-events wrapper, so the `.sew-events .sew-events__more` rule above
   never matched them and they stayed 18px tall. Box properties belong on the class
   itself; the colour rules above keep their descendant scope. */
a.sew-events__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-block-size: 44px;
}

/* "N more", and the phone summaries: same pill, dashed for "there is more here". */
.sew-events__filter-more > summary,
.sew-events__filter-toggle > summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-block-size: 44px;
	padding: 0 15px;
	border: 1px dashed #767676;
	border-radius: 999px;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	list-style: none;
	white-space: nowrap;
}

.sew-events__filter-more > summary::-webkit-details-marker,
.sew-events__filter-toggle > summary::-webkit-details-marker {
	display: none;
}

.sew-events__filter-more > summary:hover,
.sew-events__filter-toggle > summary:hover,
.sew-events__filters summary:focus-visible {
	border-color: currentColor;
}

/* Summaries are not links, so the theme's a:focus-visible ring never reached them; and
   that rule's 4px radius squared off the pills it did reach. */
.sew-events__filters summary:focus-visible,
.sew-events__filters a:focus-visible {
	outline: 2px solid var(--se-red, #d92b2b);
	outline-offset: 2px;
	border-radius: 999px;
}

.sew-events__chevron {
	flex: 0 0 auto;
	transition: transform 0.15s ease-out;
}

@media (prefers-reduced-motion: reduce) {
	.sew-events__chevron {
		transition: none;
	}
}

/* Announces "12 more events loaded" to screen readers; nothing to see. */
.sew-events__status {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

details[open] > summary > .sew-events__chevron {
	transform: rotate(180deg);
}

/* 900px, the same point at which the tile grid drops to two columns: below it the three
   rows of wrapped pills ran to six or more lines before the first event. */
@media (max-width: 900px) {
	.sew-events__filters {
		gap: 8px;
		margin-block-end: 24px;
	}

	/* One full-width line per axis: "WHERE  Dubai  v". Its options open below it. */
	.sew-events__filter {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.sew-events__filter > .sew-events__filter-label {
		display: none;
	}

	.sew-events__filter-toggle {
		display: block;
	}

	.sew-events__filter-toggle > summary {
		display: flex;
		gap: 10px;
		padding: 0 18px;
		border-style: solid;
	}

	.sew-events__filter-toggle .sew-events__filter-label {
		min-inline-size: 48px;
	}

	.sew-events__filter-value {
		overflow: hidden;
		text-overflow: ellipsis;
		font-weight: 700;
	}

	.sew-events__filter-toggle .sew-events__chevron {
		margin-inline-start: auto;
	}

	/* A narrowed listing reads as narrowed before the panel is opened. */
	.sew-events__filter-toggle.is-set > summary {
		background: #111;
		border-color: #111;
		color: #fff;
	}

	.sew-events__filter-toggle.is-set .sew-events__filter-label {
		color: rgba(255, 255, 255, 0.82);
	}

	.sew-events__filter:has(> .sew-events__filter-toggle:not([open])) > .sew-events__filter-options {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   Chunked month ([scoop_events chunk="N"]): the "N more" / "Earlier" links

   No dark-mode variant on purpose: chunking is calendar-only, and the calendar
   theme paints a white page in both schemes.
   --------------------------------------------------------------------------- */
.sew-events__pager {
	display: flex;
	justify-content: center;
	margin: 32px 0 8px;
}

.sew-events__pager--earlier {
	justify-content: flex-start;
	margin: 0 0 20px;
}

.sew-events__pager-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-block-size: 44px;
	padding: 0 22px;
	border: 1px solid #767676;
	border-radius: 999px;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

/* The listing's one forward action: heavier than a filter pill, same family. */
.sew-events__pager-link--next {
	min-block-size: 52px;
	padding: 0 32px;
	border: 2px solid #111;
	font-family: Poppins, system-ui, sans-serif;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #111;
}

.sew-events__pager-link:hover,
.sew-events__pager-link:focus-visible {
	text-decoration: none;
	border-color: currentColor;
}

.sew-events__pager-link--next:hover,
.sew-events__pager-link--next:focus-visible {
	background: #111;
	color: #fff;
}

.sew-events__pager-link:focus-visible {
	outline: 2px solid var(--se-red, #d92b2b);
	outline-offset: 2px;
	border-radius: 999px;
}

.sew-events__pager-link[aria-disabled="true"] {
	opacity: 0.6;
	cursor: progress;
}

/* ---------------------------------------------------------------------------
   Uniform grid tiles

   min-height let every tile size to its own title, so a grid row was a ragged
   run of different heights and a four-line title made one tile twice its
   neighbour. Fixed height + a clamped title means one tile shape everywhere,
   and an over-long name ends in an ellipsis instead of pushing the box.

   The heights match the carousel tiers in the theme (240px), so the grid and
   the "This Week" rows above it read as the same component.
   --------------------------------------------------------------------------- */
.sew-events--tile .sew-events__tile-link {
	height: 240px;
	min-height: 0;
	align-items: flex-start;
}

.sew-events--tile .sew-events__tile-body {
	/* Without this the clamped children can still push the flex item taller. */
	overflow: hidden;
}

/* Ellipsis, not a hard cut: -webkit-line-clamp is the only cross-browser way to
   get "…" on a multi-line box. Supported everywhere this site is used. */
.sew-events--tile .sew-events__tile-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}

/* City and venue are single facts; wrapping them to two lines steals a title
   line and makes the tile heights that much harder to keep honest. */
.sew-events--tile .sew-events__tile-city {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sew-events--tile .sew-events__tile-venue {
	overflow: hidden;
}

.sew-events--tile .sew-events__tile-venue,
.sew-events--tile .sew-events__tile-venue span {
	min-width: 0;
}

.sew-events--tile .sew-events__tile-venue {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	align-items: unset;
}

/* The pin is a flex child of the venue line; inside a -webkit-box it needs to
   sit inline with the text instead. */
.sew-events--tile .sew-events__pin {
	display: inline-block;
	vertical-align: -1px;
	margin-inline-end: 4px;
}

@media (max-width: 900px) {
	/* 2-up here, so tiles are WIDER than the 3-up desktop grid and titles wrap
	   less - the extra height the carousel needs at this width would be void. */
	.sew-events--tile .sew-events__tile-link {
		height: 240px;
	}
}

@media (max-width: 600px) {
	.sew-events--tile .sew-events__tile-link {
		height: 200px;
	}
	.sew-events--tile .sew-events__tile-title {
		-webkit-line-clamp: 3;
	}
}

/* ---------------------------------------------------------------------------
   Empty state

   Was one italic grey line above 350px of white. A visitor here has already
   told us what they wanted; this gives them somewhere to go instead.
   --------------------------------------------------------------------------- */
.sew-events__nothing {
	margin-block-end: 28px;
}

.sew-events__nothing .sew-events__empty {
	font-size: 19px;
	font-style: normal;
	font-weight: 700;
	opacity: 1;
	margin: 0 0 18px;
}

.sew-events__nothing-label {
	margin: 0 0 8px;
	font-family: Poppins, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #767676;
}

.sew-events__suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.sew-events__suggestion {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-block-size: 44px;
	padding: 0 15px;
	border: 1px solid #767676;
	border-radius: 999px;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.sew-events__suggestion:hover,
.sew-events__suggestion:focus-visible {
	background: #111;
	border-color: #111;
	color: #fff;
	text-decoration: none;
}

.sew-events__suggestion:hover .sew-events__filter-count,
.sew-events__suggestion:focus-visible .sew-events__filter-count {
	color: rgba(255, 255, 255, 0.82);
}

/* Typeahead busy state. The search button doubles as the spinner rather than
   adding a second control: the glyph is already exactly where the eye is. */
.sew-search.is-loading .sew-search__submit svg {
	animation: sew-spin 0.7s linear infinite;
	transform-origin: 50% 50%;
	opacity: 0.6;
}

@keyframes sew-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.sew-search.is-loading .sew-search__submit svg {
		animation: none;
		/* Motion is the signal; without it, opacity has to carry it alone. */
		opacity: 0.4;
	}
}

/* ---------------------------------------------------------------------------
   Offscreen tiles

   The homepage renders ~220 tiles and /full-calendar/ 114, none of them images -
   so the cost is layout and paint, not bytes, and lazy-LOADING would buy nothing.
   content-visibility lets the browser skip both for anything offscreen while
   leaving the markup fully present for search engines, Ctrl+F and the AI crawlers
   this site is optimised for.

   contain-intrinsic-size must match the real tile height or the scrollbar jumps
   as tiles are realised; these mirror the fixed heights set above.
   --------------------------------------------------------------------------- */
.sew-events--tile .sew-events__tile {
	content-visibility: auto;
	contain-intrinsic-size: auto 240px;
}

@media (max-width: 600px) {
	.sew-events--tile .sew-events__tile {
		contain-intrinsic-size: auto 200px;
	}
}

/* Event status (EventON _status). Cancelled and postponed get a label in the tile body;
   cancelled is also desaturated so it does not read as bookable. Rescheduled has no tile
   treatment: the date already moved. The pill carries its own fill and ink, so contrast is
   the same on any event colour and over any photo: #9b1c1c on #fff = 8.3:1,
   #6b3f00 on #ffe28a = 7.2:1. */
.sew-events__tile-status {
    align-self: flex-start;
    max-width: 100%;
    margin-bottom: 4px;
    padding: 3px 10px;
    border: 1px solid rgba(0, 0, 0, .35);
    border-radius: 999px;
    font-family: "Fira Sans", system-ui, arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: #fff;
    color: #9b1c1c;
}

.sew-events__tile-status--postponed {
    background: #ffe28a;
    color: #6b3f00;
}

/* Category on the city line ("Dubai · Music"). */
.sew-events__tile-dot { opacity: .7; margin: 0 2px; }

/* Editor tags (post_tag, e.g. ADE) on the tile. A rounded rectangle, not a pill (owner, 2026-10-22);
   Scoop amber with the theme's dark ink (#0d0d0d on #e39d1c is 9.6:1). */
.sew-events__tile-tag {
    align-self: flex-start;
    max-width: 100%;
    margin-bottom: 4px;
    padding: 3px 8px;
    border: 1px solid rgba(0, 0, 0, .35); /* keeps the edge on an orange tile, where amber-on-orange would melt */
    border-radius: 4px;
    font-family: "Fira Sans", system-ui, arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: #e39d1c;
    color: #0d0d0d;
}

/* A tag with a logo mark (term meta, e.g. ADE's yellow tag) shows the mark alone, at the label's height. */
.sew-events__tile-tag--logo {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    line-height: 0;
}

.sew-events__tile-tag--logo svg {
    display: block;
    width: 28px;
    height: 28px;
}

.sew-events__tile.is-cancelled .sew-events__tile-link {
    filter: grayscale(.9) brightness(.97);
}

.sew-events__tile.is-cancelled .sew-events__tile-link:hover,
.sew-events__tile.is-cancelled .sew-events__tile-link:focus-visible {
    filter: grayscale(.9) brightness(.9);
}

.sew-events__tile.is-cancelled .sew-events__tile-title {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

/* Event NAMES display in capitals (owner, 2026-10-20) however they are stored: the data is being
   converted to normal case and the look must not change. Event names only: venue and city
   names are left alone, and <title>/meta/og/JSON-LD keep the stored case (CSS cannot touch them). */
.sew-events__title,
.sew-events__tile-title,
.sew-search__result-title {
	text-transform: uppercase;
}