/* ============================================================================
   BOND STREET · EVENTS BLOCK stylesheet (was christmas-whats-on.css)
   Shared by every surface that renders the events module, so nothing in here
   may depend on a page-level class. The original sheet scoped eight rules with
   `.xm-page`, which only /christmas carries; on the homepage those rules simply
   never matched and the date ran into the Book label. Scope is `.xm-wo` alone.
   ========================================================================== */
/* ============================================================================
   /christmas · WHAT'S ON AT BOND STREET — multi-store events block · round 3 (list)
   Replaces section#john-lewis. Loads AFTER bond-fonts.css, bond-system.css and
   christmas-r5.css. Every selector is scoped to .xm-wo; nothing shared is redefined.
   Reused: .xm-field, .kicker, .xm-hl, .xm-scene__cap, .fbar/.fchip, .countline,
   .lnk-ext/.lnk-int, .vh.
   Layout: ONE chronological list. Each event is a full-width row whose height is set by
   its own content only, so there are no gaps between events. Rows sit on the warm field
   with hairline dividers, not in white panels. Breakpoints are container queries on the
   section, so the block responds to the width it is given.
   ========================================================================== */
.xm-wo{--xm-pt:clamp(28px,3.4vw,48px);container:wo/inline-size}
.xm-wo__a{display:block;height:0;scroll-margin-top:calc(var(--nav-h) + 24px - var(--xm-pt))}
.xm-wo__in{max-width:1200px}
.xm-wo .xm-hl--section{font-size:clamp(30px,3.4vw,44px)}
.xm-wo .xm-scene__head{max-width:none}
.xm-wo .xm-scene__cap{margin-top:10px;font-size:16px}
/* filter */
.xm-wo__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;margin:clamp(18px,2vw,26px) 0 clamp(8px,1vw,12px)}
/* D492 - the chip bar hides itself when there is only one store to show, and
   it was the only thing holding the gap between the heading block and the list.
   With it gone the first row sat flush against the caption (measured 0px at
   1440, 900 and 390). This restores the same gap in its absence and changes
   nothing while the bar is visible. */
.xm-wo__bar[hidden] + .xm-wo__list{margin-top:clamp(18px,2vw,26px)}
/* The caption is a single sentence; the inherited 52ch measure broke it mid
   phrase at desktop widths. */
.xm-wo .xm-scene__cap{max-width:68ch}
.xm-wo__bar .fbar{margin-top:0;flex-wrap:wrap}
.xm-wo .fchip{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 16px;font-size:14.5px}
.xm-wo .fchip[hidden]{display:none}
.xm-wo__n{font-weight:500;font-variant-numeric:tabular-nums;color:var(--muted)}
.xm-wo .fchip[aria-pressed="true"] .xm-wo__n{color:rgba(255,255,255,.75)}
.xm-wo .countline{margin:0;color:var(--body);font-weight:500;font-size:15px}
/* list */
/* D492 - EXCEPTION to the design agent's "no white panels" decision, on Guy's
   instruction 24 Oct: seven rows on one flat ecru ground read as undifferentiated.
   The list now sits on a single surface panel, which also matches the dining
   cards further down this page - white on a tinted field is the page's existing
   pattern, so this is a move towards consistency, not away from it. The list
   stays ONE continuous panel with hairline dividers; it is not broken back into
   the per-event cards that were rejected at round 1. */
.xm-wo__list{list-style:none;margin:0;padding:0 clamp(16px,2vw,28px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.xm-wo__list>li:first-child .wo-r{border-top:0}
.xm-wo__list>li[hidden]{display:none}
.wo-r{display:grid;grid-template-columns:128px minmax(0,1fr) 300px;grid-template-areas:"pic head book" "pic ben book";grid-template-rows:auto 1fr;column-gap:32px;align-items:start;padding:24px 0;border-top:1px solid var(--line-strong)}
.wo-r__pic{grid-area:pic;margin:0;aspect-ratio:3/2;border-radius:var(--r-sm);overflow:hidden;background:var(--surface-alt)}
.wo-r__pic img{display:block;width:100%;height:100%;object-fit:cover}
.wo-r__head{grid-area:head;min-width:0}
.wo-r__ben{grid-area:ben;min-width:0}
.wo-r__book{grid-area:book;min-width:0}
.wo-r__store{margin:0;font-size:13px;font-weight:var(--fw-bold);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);line-height:1.3}
.wo-r__store span{color:var(--muted)}
.wo-r__nm{font-family:var(--font-sans);font-weight:600;font-size:20px;line-height:1.25;color:var(--ink);margin:6px 0 0;text-wrap:balance}
.wo-r__pr{margin:8px 0 0;font-size:16px;font-weight:700;line-height:1.4;color:var(--ink)}
.wo-r__t{margin:2px 0 0;font-size:16px;line-height:1.5;color:var(--body);max-width:60ch;text-wrap:pretty}
.wo-r__mem{margin:6px 0 0;font-size:15px;line-height:1.45;font-weight:500;color:var(--ink)}
.wo-r__ses{list-style:none;margin:0;padding:0}
.wo-r__ses li+li{border-top:1px solid var(--line)}
.xm-wo .wo-r__ses a{display:flex;align-items:center;gap:12px;min-height:44px;padding:5px 0;font-size:16px;font-weight:500;line-height:1.35;color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums}
.wo-r__ses li:first-child a{padding-top:0}
.wo-r__d{flex:1;min-width:0}
.wo-r__b{flex:none;font-weight:700;font-size:15px}
.xm-wo .wo-r__ses a.lnk-ext::after{margin-left:-6px;width:.8em;height:.8em;opacity:.55;flex:none}
.xm-wo .wo-r__ses a:hover{color:var(--accent)}
.xm-wo .wo-r__ses a:hover .wo-r__b{text-decoration:underline;text-underline-offset:3px}
.xm-wo .wo-r__ses a:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}
/* mid widths: dates move under the details, beside the thumbnail column */
@container wo (max-width:899px){
  .wo-r{grid-template-columns:112px minmax(0,1fr);grid-template-areas:"pic head" "pic ben" "pic book";grid-template-rows:auto auto auto;column-gap:24px}
  .wo-r__book{margin-top:12px}
  .wo-r__ses li:first-child a{padding-top:5px}
  .wo-r__ses{border-top:1px solid var(--line)}
}
/* phones: thumbnail, store, title and price at the top; benefit and dates full width below */
@container wo (max-width:639px){
  .wo-r{grid-template-columns:88px minmax(0,1fr);grid-template-areas:"pic head" "ben ben" "book book";column-gap:16px;padding:20px 0}
  .wo-r__nm{font-size:18px}
  .wo-r__pr{margin-top:6px}
  .wo-r__ben{margin-top:10px}
  .xm-wo__n{display:none}
  .xm-wo .fchip{padding:0 14px}
}
/* John Lewis general note (qualified wording, as supplied) */
.xm-wo__note{margin:16px 0 0;font-size:15px;line-height:1.55;color:var(--body);max-width:80ch}
.xm-wo__note[hidden],.xm-wo__offer[hidden]{display:none}
.xm-wo__note a.lnk-ext{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.xm-wo__note a.lnk-ext:hover{color:var(--accent)}
/* The Cotswold Company gift with purchase: an offer, not an event. One outlined strip. */
.xm-wo__offer{margin-top:clamp(20px,2.4vw,28px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:8px clamp(20px,3vw,40px);align-items:center;border:1px solid var(--line-strong);border-radius:var(--r-md);padding:18px 22px}
.xm-wo__offer .kicker{margin:0 0 4px}
.xm-wo__offer h3{font-family:var(--font-sans);font-weight:600;font-size:18px;line-height:1.3;color:var(--ink);margin:0;text-wrap:balance}
.xm-wo__offer p.t{margin:0;font-size:16px;line-height:1.5;color:var(--body);text-wrap:pretty}
.xm-wo__offer .lnk-int{display:inline-block;margin-top:6px;font-weight:600;font-size:15px}
@container wo (max-width:760px){.xm-wo__offer{grid-template-columns:1fr}}

/* round 3 polish */
.xm-wo .countline{white-space:nowrap}
.xm-wo__note a.lnk-ext{white-space:nowrap}