/* ==========================================================================
   christmas.css: Christmas page. Load after inner.css and mock-extra.css.
   The illustrations are inline SVG in brand colours, so no photos are needed.
   ========================================================================== */

/* Hero illustration panel */
.xm-art{position:relative;background:var(--navy-mid);aspect-ratio:1/1;max-height:560px;overflow:hidden}
.xm-art svg{position:absolute;inset:0;width:100%;height:100%}
.xm-art .tag{position:absolute;left:0;bottom:28px;background:var(--orange-bright);color:var(--on-accent);
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:10px 14px}

/* Date strip in the hero facts */
.xm-dates{display:flex;gap:4px;margin-top:28px;flex-wrap:wrap}
.xm-dates a{display:flex;flex-direction:column;align-items:center;justify-content:center;width:72px;height:80px;background:var(--navy-mid);text-decoration:none;color:var(--paper)}
.xm-dates a:hover{background:var(--orange-bright);color:var(--navy-deep)}
.xm-dates b{font-family:var(--font-display);font-weight:900;font-stretch:70%;font-size:40px;line-height:.9}
.xm-dates span{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-top:4px}

/* Event cards */
.xm-list{display:flex;flex-direction:column;gap:4px;padding-block:24px 0}
.xm-ev{display:grid;grid-template-columns:360px 1fr;background:var(--navy-mid);scroll-margin-top:24px}
.xm-ev>*{min-width:0}
.xm-ev .art{position:relative;background:var(--navy-deep);min-height:360px}
.xm-ev .art svg{position:absolute;inset:0;width:100%;height:100%}
.xm-ev .art .when{position:absolute;left:0;top:0;background:var(--paper);color:var(--navy-deep);padding:10px 14px 12px;display:flex;flex-direction:column;align-items:center;line-height:1}
.xm-ev .art .when small{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.xm-ev .art .when b{font-family:var(--font-display);font-weight:900;font-stretch:70%;font-size:48px;line-height:.9;margin:2px 0}
.xm-ev .body{padding:40px 44px;display:flex;flex-direction:column;gap:14px}
.xm-ev .meta{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
.xm-ev .meta span::before{content:"";display:inline-block;width:8px;height:8px;background:var(--orange-bright);margin-right:8px;vertical-align:1px}
.xm-ev h3{font-family:var(--font-display);font-weight:900;font-stretch:70%;text-transform:uppercase;font-size:clamp(40px,4.6vw,64px);line-height:.92;margin:0}
.xm-ev .lead{font-size:19px;color:var(--paper);margin:0;max-width:34em}
.xm-ev p{margin:0;color:var(--mist);max-width:38em}
.xm-ev ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.xm-ev ul li{border:1px solid var(--navy-line);padding:6px 12px;font-size:14px;color:var(--paper)}
.xm-ev .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.xm-ev .acts .btn{padding:13px 20px}
.xm-ev .acts .link{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-bright);text-decoration:none;padding:0 6px}
.xm-flag{align-self:flex-start;background:var(--orange-bright);color:var(--navy-deep);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:7px 12px}
.xm-flag.paper{background:var(--paper)}

/* Featured (Christmas Day): wide card */
.xm-ev.feature{grid-template-columns:1fr 1fr;background:var(--paper);color:var(--navy-deep)}
.xm-ev.feature .art{background:var(--navy-deep);min-height:440px;border:0}
.xm-ev.feature h3{color:var(--chase-navy)}
.xm-ev.feature .lead{color:var(--chase-navy)}
.xm-ev.feature p{color:var(--slate)}
.xm-ev.feature .meta{color:var(--slate)}
.xm-ev.feature ul li{border-color:#CFCBBE;color:var(--chase-navy)}
.xm-ev.feature .acts .link{color:var(--orange-text)}
.xm-ev.feature .accent{color:var(--chase-orange)}

/* Verse band */
.xm-verse{text-align:center;padding-block:120px}
.xm-verse blockquote{margin:0 auto;max-width:15em;font-family:var(--font-display);font-weight:900;font-stretch:70%;text-transform:uppercase;font-size:clamp(44px,6vw,88px);line-height:.92}
.xm-verse cite{display:block;margin-top:20px;font-style:normal;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-bright)}
.xm-verse svg{width:56px;height:56px;margin:0 auto 24px;display:block}

@media (max-width:860px){
  .xm-art{aspect-ratio:4/3}
  .xm-dates a{width:calc(20% - 4px);height:68px}
  .xm-dates b{font-size:32px}
  .xm-ev,.xm-ev.feature{grid-template-columns:1fr}
  .xm-ev .art{min-height:0;aspect-ratio:4/3}
  .xm-ev.feature .art{min-height:0;aspect-ratio:4/3}
  .xm-ev .body{padding:28px 20px}
  .xm-ev h3{font-size:40px}
  .xm-ev .lead{font-size:17px}
  .xm-verse{padding-block:80px}
}

/* ==========================================================================
   Christmas colour scheme: pine green, berry red, gold and warm cream.
   Applied with <html class="xmas"> on this page only, by overriding the
   brand tokens, so every shared component (header, buttons, tiles, footer)
   turns festive without new CSS. The logo is never recoloured.
   ========================================================================== */
html.xmas{
  --pine:#0F2C23; --pine-mid:#184234; --pine-line:#2B5C48;
  --berry:#B8282C; --berry-deep:#8E1C22; --gold:#E8B54A; --gold-soft:#F5D98E; --cream:#F8F2E4;

  --navy-deep:var(--pine); --navy-mid:var(--pine-mid); --navy-line:var(--pine-line); --chase-navy:var(--pine);
  --orange-bright:var(--gold); --chase-orange:var(--berry); --orange-text:var(--berry-deep);
  --paper:var(--cream); --mist:#CFE1D6; --slate:#4C6559;
  --navy:var(--pine-mid); --orange:var(--gold); --tint:var(--gold); --heading:var(--cream); --font-display:var(--font-body);

  --surface:var(--pine); --surface-raised:var(--pine-mid); --ink:var(--cream); --ink-muted:#CFE1D6;
  --accent:var(--berry); --accent-text:var(--gold); --on-accent:var(--cream); --line:var(--pine-line); --focus:var(--gold);
  background:var(--pine);
}
html.xmas body{background:var(--pine);color:var(--cream)}

/* Buttons: berry red with cream text; outline buttons in cream */
html.xmas .btn{background:var(--berry);color:var(--cream)}
html.xmas .btn:hover{background:var(--berry-deep)}
html.xmas .btn.sec{background:transparent;border-color:var(--cream);color:var(--cream)}
html.xmas .btn.navy{background:var(--pine);border-color:var(--pine);color:var(--cream)}

/* Header gets a festive ribbon stripe underneath */
html.xmas .site-header{box-shadow:none;border-bottom:6px solid transparent;
  border-image:repeating-linear-gradient(90deg,var(--berry) 0 28px,var(--cream) 28px 36px,var(--gold) 36px 64px,var(--cream) 64px 72px) 6}

/* Orange callouts become gold or berry */
html.xmas .xm-art .tag,html.xmas .xm-flag{background:var(--gold);color:var(--pine)}
html.xmas .xm-flag.berry{background:var(--berry);color:var(--cream)}
html.xmas .xm-dates a:hover{background:var(--gold);color:var(--pine)}
html.xmas .xm-ev .meta span::before{background:var(--gold)}
html.xmas .xm-ev .acts .link{color:var(--gold)}

/* Featured Christmas Day card: cream with a berry highlight */
html.xmas .xm-ev.feature{background:var(--cream)}
html.xmas .xm-ev.feature h3,html.xmas .xm-ev.feature .lead{color:var(--pine)}
html.xmas .xm-ev.feature .accent{color:var(--berry)}
html.xmas .xm-ev.feature .acts .link{color:var(--berry-deep)}
html.xmas .xm-ev.feature .btn.sec{border-color:var(--pine);color:var(--pine)}

/* Facts bar: cream with a gold top edge */
html.xmas .ip-facts>div{background:var(--cream);color:var(--pine);border-top-color:var(--gold)}
html.xmas .ip-facts span{color:var(--slate)}

/* Calendar call-out band: berry red, with a scatter of gold stars */
html.xmas .ip-cta .wrap{background:var(--berry) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23E8B54A' opacity='.35'%3E%3Cpath d='M20 10l2 7 7 2-7 2-2 7-2-7-7-2 7-2z'/%3E%3Cpath d='M85 50l1.5 5 5 1.5-5 1.5-1.5 5-1.5-5-5-1.5 5-1.5z'/%3E%3Ccircle cx='60' cy='100' r='2'/%3E%3Ccircle cx='105' cy='15' r='1.5'/%3E%3C/g%3E%3C/svg%3E");color:var(--cream)}
html.xmas .ip-cta .eyebrow{color:var(--gold-soft)}
html.xmas .ip-cta h2{color:var(--cream)}
html.xmas .ip-cta .btn:not(.navy){background:var(--pine);border-color:var(--pine);color:var(--cream)}
html.xmas .ip-more-head a{color:var(--gold)}

/* Tiles: green-tinted gradient */
html.xmas .tile div{background:linear-gradient(transparent,rgba(15,44,35,.94) 55%)}

/* Verse: gold highlight */
html.xmas .xm-verse cite{color:var(--gold)}