/**
 * What's On — the events calendar.
 *
 * Built on the incumbent T-VINE world: Poppins body, Playfair Display for
 * display type, #e93314 red, #292929 dark, #bcd532 lime, 2px radii. Scoped
 * under .wo-* so it cannot reach the rest of the theme.
 */

:root {
    --wo-red: #e93314;
    --wo-ink: #292929;
    --wo-lime: #bcd532;
    --wo-line: #e2dfda;
    --wo-muted: #6b6560;
}

/* -------------------------------------------------------------- masthead */

/* The calendar introduces itself, and the one action an organiser came for
   sits beside the title rather than at the foot of the page. */
.wo-masthead {
    /* The theme's .breadcrumbs-header above this is float:left and never
       cleared. A flex container establishes its own formatting context, so
       rather than overlapping the float the way a plain block does, it shrinks
       out of its way — which collapsed the masthead's contents to zero width
       against the right edge. Clearing is the fix; it is needed on every block
       this stylesheet puts directly after the breadcrumbs. */
    clear: both;
    background: var(--wo-ink);
    color: #fff;
    padding: 30px 0 32px;
    margin-bottom: 26px;
    /* A lime hairline, picked up from the theme, so the band reads as T-VINE
       rather than as a generic dark hero. */
    border-bottom: 3px solid var(--wo-lime);
}

.wo-masthead__inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    text-align: left;
}

.wo-masthead__text { min-width: 0; }

.wo-masthead__kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--wo-lime);
    margin: 0 0 6px;
}

.wo-masthead__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.9rem, 1.3rem + 2.3vw, 3rem);
    line-height: 1.05;
    color: #fff;
    margin: 0 0 8px;
    text-align: left;
}

.wo-masthead__lede {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
    max-width: 54ch;
    margin: 0;
}

.wo-masthead__cta {
    flex: 0 0 auto;
    padding: 12px 24px;
    border-radius: 3px;
    background: var(--wo-red);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.wo-masthead__cta:hover { background: #fff; color: var(--wo-ink); }

/* The theme pads every <section> generously at the top; under the masthead
   that read as a gap rather than as breathing room. */
.wo-section {
    clear: both;
    padding-top: 6px;
    padding-bottom: 40px;
}

/* ----------------------------------------------------------------- chips */

/* Browse by interest. A visible row beats a select for discovery: the reader
   can see what kinds of thing are on without opening anything. */
.wo-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 24px;
}

.wo-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border: 1px solid var(--wo-line);
    border-radius: 100px;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: var(--wo-ink);
}

.wo-chip:hover { border-color: var(--wo-ink); color: var(--wo-ink); }

.wo-chip.is-current {
    background: var(--wo-red);
    border-color: var(--wo-red);
    color: #fff;
}

.wo-chip__count {
    font-size: 11px;
    font-weight: 700;
    color: var(--wo-muted);
    font-variant-numeric: tabular-nums;
}

.wo-chip.is-current .wo-chip__count { color: rgba(255, 255, 255, .8); }

/* --------------------------------------------------------- result count */

.wo-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--wo-muted);
    text-align: left;
    margin: 0 0 4px;
}

.wo-pagination { margin-top: 30px; }

/* --------------------------------------------------------------- filters */

.wo-filters {
    background: #faf9f7;
    border: 1px solid var(--wo-line);
    border-radius: 3px;
    padding: 18px 20px;
    margin-bottom: 26px;
}

.wo-filters__row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}

.wo-field { flex: 1 1 180px; min-width: 0; }

.wo-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--wo-muted);
    margin-bottom: 5px;
}

.wo-field input,
.wo-field select {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--wo-line);
    border-radius: 3px;
    background: #fff;
    font: inherit;
    font-size: 14px;
    color: var(--wo-ink);
}

.wo-field input:focus,
.wo-field select:focus {
    outline: none;
    border-color: var(--wo-red);
}

.wo-filters__actions { display: flex; gap: 8px; flex: 0 0 auto; }

.wo-btn {
    padding: 10px 18px;
    border: 0;
    border-radius: 3px;
    background: var(--wo-red);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.wo-btn:hover { background: #c4290f; color: #fff; }

.wo-btn--ghost {
    background: none;
    border: 1px solid var(--wo-line);
    color: var(--wo-muted);
}

.wo-btn--ghost:hover { background: #fff; color: var(--wo-ink); }

/* Quick date ranges. Readers look for "this weekend" far more often than for
   a particular date, so these sit above the rest of the filters. */
.wo-when {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.wo-when a {
    padding: 7px 14px;
    border: 1px solid var(--wo-line);
    border-radius: 100px;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: var(--wo-muted);
}

.wo-when a:hover { border-color: #bdb7b0; color: var(--wo-ink); }

.wo-when a.is-current {
    background: var(--wo-ink);
    border-color: var(--wo-ink);
    color: #fff;
}

/* ------------------------------------------------------------------ list */

.wo-day {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 30px 0 14px;
}

.wo-day:first-child { margin-top: 0; }

.wo-day h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.32rem;
    margin: 0;
    color: var(--wo-ink);
    white-space: nowrap;
}

.wo-day__rule {
    flex: 1;
    height: 1px;
    background: var(--wo-line);
}

.wo-event {
    display: flex;
    gap: 18px;
    padding: 18px;
    margin-bottom: 12px;
    border: 1px solid var(--wo-line);
    border-radius: 4px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.wo-event:hover {
    border-color: #cfc9c1;
    box-shadow: 0 2px 10px rgba(41, 41, 41, .07);
}

/* Featured rows are marked by a rule down the leading edge rather than a
   different background: the badge already says "featured", and two signals
   competing made the list look striped. */
.wo-event--featured { border-left: 3px solid var(--wo-lime); }

.wo-event__media {
    position: relative;
    display: block;
    flex: 0 0 200px;
    max-width: 200px;
    /* Not stretched to the row height: the date stamp is anchored to the
       bottom of this box, and a stretched box would drop it below the
       picture it is meant to sit on. */
    align-self: flex-start;
}

.wo-event__media img {
    display: block;
    width: 100%;
    /* Fixed ratio so a row of listings does not jump about with whatever
       crop an organiser happened to upload. */
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 3px;
    max-width: 100%;
}

.wo-event__media--empty {
    display: flex;
    aspect-ratio: 16 / 10;
    background: #f1efec;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b5aea6;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.wo-event__body { flex: 1 1 auto; min-width: 0; }

.wo-event__when {
    font-size: 13px;
    font-weight: 600;
    color: var(--wo-red);
    margin: 0 0 4px;
    font-variant-numeric: tabular-nums;
}

/* The theme centres headings inside .content, which leaves the title floating
   away from the meta line beneath it. Every heading in this component is set
   explicitly rather than relying on what the theme happens to do. */
.wo-event__title,
.wo-card__title,
.wo-day h2,
.wo-strip__head h2,
.wo-empty h3 {
    text-align: left;
}

.wo-event__title {
    font-size: 1.06rem;
    line-height: 1.35;
    margin: 0 0 6px;
}

.wo-event__title a { color: var(--wo-ink); }
.wo-event__title a:hover { color: var(--wo-red); }

.wo-event__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 13px;
    color: var(--wo-muted);
    margin: 0 0 6px;
}

.wo-event__summary {
    font-size: 14px;
    line-height: 1.6;
    color: var(--wo-muted);
    margin: 0;
    /* Two lines, so every row in the list is the same shape regardless of how
       much an organiser wrote. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wo-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 2px;
    background: #f1efec;
    font-size: 11px;
    font-weight: 600;
    color: var(--wo-muted);
}

.wo-tag--featured {
    background: var(--wo-lime);
    color: #2c3405;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.wo-tag--free {
    background: #e8f3d6;
    color: #40560a;
}

.wo-tag--editorial {
    background: #fdf1ee;
    color: #a3260e;
}

.wo-empty {
    padding: 40px 20px;
    text-align: center;
    border: 1px dashed var(--wo-line);
    border-radius: 3px;
    color: var(--wo-muted);
}

.wo-empty h3 {
    font-family: 'Playfair Display', Georgia, serif;
    margin: 0 0 8px;
    color: var(--wo-ink);
}

/* The date as a stamp on the image, so a row lifted out of the day-grouped
   list still says when it is. */
.wo-event__stamp {
    position: absolute;
    left: 8px;
    bottom: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 42px;
    padding: 5px 7px 6px;
    border-radius: 3px;
    background: rgba(41, 41, 41, .92);
    color: #fff;
    line-height: 1;
}

.wo-event__stamp-day {
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.wo-event__stamp-month {
    margin-top: 3px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--wo-lime);
}

.wo-event__where {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    color: var(--wo-muted);
    text-align: left;
    margin: 0 0 6px;
}

.wo-event__where i { color: #b5aea6; font-size: 12px; }

/* ----------------------------------------------------------- event page */

/* The theme sets text-align:center on <body>, so every block here states its
   own alignment rather than inheriting a centred page. */
.wo-hero,
.wo-hero h1,
.wo-body,
.wo-detail th,
.wo-detail td,
.wo-sell,
.wo-sell h4,
.wo-sell ul,
.wo-sell li,
.wo-sell p {
    text-align: left;
}

/* The "list your event" page: one price, one list of what it includes. */
.wo-sell__price {
    font-size: 38px;
    font-weight: 600;
    margin: 0;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.wo-sell__unit {
    color: var(--wo-muted);
    margin: 2px 0 20px;
}

.wo-sell ul {
    font-size: 15px;
    line-height: 1.9;
    padding-left: 20px;
    margin-bottom: 24px;
}

.wo-hero__when {
    font-size: 15px;
    font-weight: 600;
    color: var(--wo-red);
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}

/* The event description. 65–75ch keeps it readable rather than running the
   full width of the column. */
.wo-body {
    font-size: 15px;
    line-height: 1.75;
    max-width: 68ch;
    margin-bottom: 26px;
}

.wo-hero h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.5rem);
    line-height: 1.15;
    margin: 0 0 12px;
    text-wrap: balance;
}

.wo-detail {
    width: 100%;
    border: 1px solid var(--wo-line);
    border-radius: 3px;
    font-size: 14px;
    margin-bottom: 22px;
}

.wo-detail th,
.wo-detail td {
    padding: 11px 14px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid var(--wo-line);
}

.wo-detail tr:first-child th,
.wo-detail tr:first-child td { border-top: 0; }

.wo-detail th {
    width: 32%;
    background: #faf9f7;
    color: var(--wo-muted);
    font-weight: 600;
}

.wo-cta {
    display: inline-block;
    padding: 13px 26px;
    border-radius: 3px;
    background: var(--wo-red);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.wo-cta:hover { background: #c4290f; color: #fff; }

/* The lead image, full container width above the two columns. An event is
   sold on its picture; at article width it reproduced at postcard size. */
.wo-figure { clear: both; margin-bottom: 26px; }

.wo-figure img {
    display: block;
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    border-radius: 4px;
}

/* The description is rich text now, and the theme's reset flattens it: every
   heading is font-size:100%, every element is font-weight:inherit (so <strong>
   stops being strong) and lists lose their markers. The whole of it has to be
   put back, scoped to this block so the reset still governs everywhere else. */
.wo-body h1,
.wo-body h2,
.wo-body h3,
.wo-body h4,
.wo-body h5,
.wo-body h6 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    line-height: 1.25;
    color: var(--wo-ink);
    text-align: left;
    margin: 26px 0 10px;
}

.wo-body > :first-child { margin-top: 0; }

.wo-body h1 { font-size: 1.7rem; }
.wo-body h2 { font-size: 1.42rem; }
.wo-body h3 { font-size: 1.22rem; }
.wo-body h4 { font-size: 1.08rem; }
.wo-body h5,
.wo-body h6 { font-size: 1rem; }

.wo-body p { margin: 0 0 14px; }

.wo-body strong,
.wo-body b { font-weight: 700; }

.wo-body em,
.wo-body i { font-style: italic; }

.wo-body u { text-decoration: underline; }
.wo-body s,
.wo-body strike { text-decoration: line-through; }

.wo-body ul,
.wo-body ol {
    margin: 0 0 16px;
    padding-left: 22px;
}

.wo-body ul { list-style: disc; }
.wo-body ol { list-style: decimal; }
.wo-body li { margin-bottom: 5px; }

/* A nested list gets the second-level marker, as it would anywhere else. */
.wo-body ul ul { list-style: circle; margin-bottom: 0; }
.wo-body ol ol { list-style: lower-alpha; margin-bottom: 0; }

.wo-body a {
    color: var(--wo-red);
    text-decoration: underline;
}

.wo-body a:hover { color: #c4290f; }

.wo-body blockquote {
    margin: 0 0 18px;
    padding: 2px 0 2px 18px;
    border-left: 3px solid var(--wo-lime);
    color: var(--wo-muted);
    font-style: italic;
}

.wo-body hr {
    height: 1px;
    border: 0;
    background: var(--wo-line);
    margin: 22px 0;
}

.wo-body img {
    max-width: 100%;
    height: auto;
    border-radius: 3px;
}

.wo-body figure { margin: 0 0 18px; }

.wo-body figcaption {
    font-size: 13px;
    color: var(--wo-muted);
    margin-top: 6px;
}

/* A table pasted into the editor scrolls rather than widening the column. */
.wo-body .table,
.wo-body figure.table { overflow-x: auto; }

.wo-body table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 18px;
}

.wo-body th,
.wo-body td {
    border: 1px solid var(--wo-line);
    padding: 8px 10px;
    text-align: left;
}

.wo-body th { background: #faf9f7; font-weight: 700; }

.wo-body code {
    background: #f4f2ef;
    border-radius: 2px;
    padding: 1px 5px;
    font-family: 'Courier New', Courier, monospace;
    font-size: .92em;
}

.wo-body pre {
    background: #f4f2ef;
    border-radius: 3px;
    padding: 14px 16px;
    overflow-x: auto;
    margin-bottom: 18px;
}

.wo-body pre code { background: none; padding: 0; }

.wo-hero__lede {
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--wo-muted);
    text-align: left;
    max-width: 62ch;
    margin: 0 0 12px;
}

.wo-hero .wo-event__meta { margin-bottom: 20px; }

.wo-hero .wo-tag { text-decoration: none; }
.wo-hero a.wo-tag:hover { background: var(--wo-ink); color: #fff; }

/* The sidebar column. Sticky so the ticket button stays in reach through a
   long description instead of scrolling away at the top of the page. */
.wo-aside {
    position: sticky;
    top: 20px;
}

.wo-aside .wo-cta {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 16px;
}

.wo-detail__map {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--wo-red);
}

.wo-box {
    border: 1px solid var(--wo-line);
    border-radius: 4px;
    padding: 16px 18px;
    margin-bottom: 16px;
    text-align: left;
}

.wo-box h5 {
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    margin: 0 0 8px;
    color: var(--wo-ink);
}

.wo-box p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--wo-muted);
    text-align: left;
    margin: 0 0 8px;
}

.wo-box p:last-child { margin-bottom: 0; }

.wo-box__links a {
    display: inline-block;
    margin: 0 12px 4px 0;
    font-weight: 600;
    color: var(--wo-red);
}

.wo-box--sell { background: #faf9f7; }
.wo-box--sell a { font-weight: 600; color: var(--wo-red); }

/* The free editorial write-up, pulled out of the description flow so the
   article and the calendar entry visibly point at each other. */
.wo-writeup {
    border-left: 3px solid var(--wo-red);
    background: #fdf1ee;
    border-radius: 0 4px 4px 0;
    padding: 16px 20px;
    margin: 0 0 26px;
    text-align: left;
}

.wo-writeup__kicker {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #a3260e;
    text-align: left;
    margin: 0 0 4px;
}

.wo-writeup__link {
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    margin: 0;
}

.wo-writeup__link a { color: var(--wo-ink); }
.wo-writeup__link a:hover { color: var(--wo-red); }

.wo-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 26px;
}

.wo-gallery img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 3px;
}

/* Share. Native intents only — no third-party script, so nothing here tracks
   the reader before they click. */
.wo-share {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--wo-line);
}

.wo-share__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--wo-muted);
    margin-right: 4px;
}

.wo-share a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--wo-line);
    border-radius: 50%;
    color: var(--wo-muted);
    font-size: 14px;
}

.wo-share a:hover {
    background: var(--wo-ink);
    border-color: var(--wo-ink);
    color: #fff;
}

.wo-related { margin-top: 36px; }

/* -------------------------------------------------------- homepage strip */

.wo-strip {
    background: #faf9f7;
    border-top: 3px solid var(--wo-red);
    padding: 26px 0 28px;
    margin-bottom: 26px;
}

.wo-strip__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.wo-strip__head h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.5rem;
    margin: 0;
}

.wo-strip__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.wo-card {
    background: #fff;
    border: 1px solid var(--wo-line);
    border-radius: 3px;
    overflow: hidden;
}

.wo-card img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.wo-card__body { padding: 12px 14px 14px; }

.wo-card__when {
    font-size: 12px;
    font-weight: 600;
    color: var(--wo-red);
    margin: 0 0 4px;
    font-variant-numeric: tabular-nums;
}

.wo-card__title {
    font-size: 14px;
    line-height: 1.4;
    margin: 0 0 4px;
}

.wo-card__title a { color: var(--wo-ink); }
.wo-card__title a:hover { color: var(--wo-red); }

.wo-card__where {
    font-size: 12px;
    color: var(--wo-muted);
    margin: 0;
}

/* -------------------------------------------------- browser surfaces */

.wo-filters ::selection,
.wo-event ::selection { background: #fbd9d1; color: var(--wo-ink); }

.wo-filters input { caret-color: var(--wo-red); }

/* ------------------------------------------------------------ responsive */

@media (max-width: 991px) {
    .wo-strip__grid { grid-template-columns: repeat(2, 1fr); }

    /* The sidebar stacks under the article at this width, so sticking it to
       the viewport would pin it to the bottom of the page. */
    .wo-aside { position: static; }

    .wo-event__media { flex-basis: 160px; max-width: 160px; }
}

@media (max-width: 767px) {
    .wo-filters { padding: 14px; }
    .wo-filters__row { flex-direction: column; align-items: stretch; }
    /* flex-basis is the main size, so once the row becomes a column the
       180px basis the fields carry stops being a minimum width and becomes a
       180px height — three fields with a hole under each of them. */
    .wo-field { flex: 0 0 auto; }
    .wo-filters__actions { flex-direction: row; }
    .wo-filters__actions .wo-btn { flex: 1; }

    /* iOS zooms the page when a focused field is under 16px. */
    .wo-field input, .wo-field select { font-size: 16px; }

    .wo-event { gap: 12px; padding: 12px; }
    .wo-event__media { flex-basis: 108px; max-width: 108px; }
    .wo-event__summary { display: none; }
    .wo-event__stamp { left: 5px; bottom: 5px; min-width: 34px; padding: 4px 5px 5px; }
    /* At this size the stamp covers the placeholder's own wordmark, so the two
       overlapped into nonsense. The date is the useful half; the label goes. */
    .wo-event__media--empty { font-size: 0; }
    .wo-event__stamp-day { font-size: 14px; }
    .wo-day h2 { font-size: 1.12rem; white-space: normal; }

    /* The masthead stacks: at this width the CTA beside a wrapping headline
       left both of them squeezed. */
    .wo-masthead { padding: 22px 0 24px; margin-bottom: 20px; }
    .wo-masthead__inner { flex-direction: column; align-items: stretch; gap: 16px; }
    .wo-masthead__cta { text-align: center; }

    /* Horizontal scroll rather than four rows of wrapped chips. */
    .wo-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .wo-chips::-webkit-scrollbar { display: none; }
    .wo-chip { flex: 0 0 auto; }

    .wo-figure img { max-height: 260px; }
    .wo-gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 479px) {
    .wo-strip__grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- sidebar What's On widget */

/* Lives in the page sidebar between Popular Tags and Follow Us. The theme's
   .widget-title is a flex row here so the "See all" link can sit opposite the
   heading rather than under it. */
.sw-whats-on .widget-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.wo-widget__all {
    font-size: 12px;
    font-weight: 600;
    color: var(--wo-red);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}

.wo-widget__all:hover { color: #c4290f; }

.wo-widget {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wo-widget__item + .wo-widget__item { border-top: 1px solid #f0eeeb; }

.wo-widget__link {
    display: flex;
    gap: 11px;
    padding: 11px 0;
    text-align: left;
    color: inherit;
}

.wo-widget__item:first-child .wo-widget__link { padding-top: 2px; }

.wo-widget__media {
    flex: 0 0 72px;
    max-width: 72px;
}

.wo-widget__media img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 3px;
}

/* No photo: the date itself becomes the thumbnail, which is the more useful
   thing to show in a calendar list anyway. */
.wo-widget__media--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    border-radius: 3px;
    background: var(--wo-ink);
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.wo-widget__media--empty small {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .75;
    margin-top: 3px;
}

.wo-widget__body {
    flex: 1 1 auto;
    min-width: 0;
}

.wo-widget__when,
.wo-widget__title,
.wo-widget__where { display: block; }

.wo-widget__when {
    font-size: 11px;
    font-weight: 700;
    color: var(--wo-red);
    letter-spacing: .02em;
    margin-bottom: 2px;
    font-variant-numeric: tabular-nums;
    /* One line: a multi-day run can produce a long label and it must not push
       the title out of the box. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wo-widget__title {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--wo-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wo-widget__link:hover .wo-widget__title { color: var(--wo-red); }

.wo-widget__where {
    font-size: 11.5px;
    color: var(--wo-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wo-widget__cta {
    display: block;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--wo-line);
    font-size: 12px;
    font-weight: 600;
    color: var(--wo-muted);
    text-align: left;
}

.wo-widget__cta:hover { color: var(--wo-red); }