/* 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;
    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;
    color: #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: #fff;
    filter: brightness(1.08);
}

.sew-events__tile-date {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    align-items: flex-start;
    color: #fff;
}

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

.sew-events__tile-day {
    font-family: "Noto Sans", 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: "Noto Sans", arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    color: #fff;
}

.sew-events__tile-title {
    font-family: Poppins, sans-serif;
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 28.8px;
    color: #fff;
    overflow-wrap: anywhere;
}

@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;
}

/* Scrim. The text is always white, and a photo can be any brightness, so legibility
   cannot depend on the image. Sits between the image and the content. */
.sew-events__tile-link--has-image::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .7) 100%);
    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;
}

/* ---------------------------------------------------------------------------
   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;
    padding: 7px 14px;
    border: 1px solid rgba(127, 127, 127, .35);
    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 {
    opacity: .6;
    font-size: 12px;
}

/* ---------------------------------------------------------------------------
   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: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    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% + 8px);
    left: 0;
    right: 0;
    z-index: 60;
    margin: 0;
    padding: 6px;
    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;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
    max-height: 380px;
    overflow-y: auto;
}

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

.sew-search__result-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 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;
}

.sew-search__result-meta {
    font-size: 12.5px;
    opacity: .65;
}