/*
 * Course calendar (0.1.30, T-0130, DEC-49).
 *
 * Colours, type and component idioms come from the approved homepage: navy #262E4D,
 * deep navy #1A2038, gold #A0895E, gold-ink #7E6531 for small text on light grounds,
 * blue #3F63C9, paper #FBFAF8, cream #F3EEE7, with Cormorant Garamond for display,
 * Jost for labels and Source Sans 3 for body.
 *
 * Two rules this file must never break:
 *   - nothing renders below 12px, and no interactive control is under 44px;
 *   - colour is never the only signal, so nothing here is the sole carrier of
 *     meaning. Every group also has a letter and a word, every availability state is
 *     a word, and a fully booked date has a dashed edge and a hatched ground as well
 *     as a grey tag.
 *
 * The 1000px stacking breakpoint is measured, not chosen: at 768px a seven column
 * month grid gives 99px cells, which breaks course names word by word. That is the
 * same failure that was logged as a blocker on the shop archive.
 */

.aa-cal {
    --aa-cal-navy: #262E4D;
    --aa-cal-navy-deep: #1A2038;
    --aa-cal-navy-900: #12172B;
    --aa-cal-gold: #A0895E;
    --aa-cal-gold-ink: #7E6531;
    --aa-cal-gold-light: #C4AC82;
    --aa-cal-blue: #3F63C9;
    --aa-cal-paper: #FBFAF8;
    --aa-cal-cream: #F3EEE7;
    --aa-cal-white: #FFFFFF;
    --aa-cal-text: #33363F;
    --aa-cal-muted: #6E6B62;
    --aa-cal-border: rgba(38, 46, 77, .10);
    --aa-cal-border-strong: rgba(38, 46, 77, .18);
    --aa-cal-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --aa-cal-sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
    --aa-cal-body: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, sans-serif;
    --aa-cal-max: 1320px;
    --aa-cal-px: clamp(1rem, 4vw, 3rem);
    --aa-cal-radius: 14px;
    --aa-cal-ease: cubic-bezier(.25, 1, .5, 1);
    /* The four group colours. Free events are a deep forest green that sits with the
       navy and gold and clears 4.5:1 on white (measured 7.87:1). */
    --aa-cal-core: #262E4D;
    --aa-cal-spec: #7E6531;
    --aa-cal-path: #3F63C9;
    --aa-cal-free: #245C3B;
    --aa-cal-shadow-1: 0 1px 2px rgba(18, 23, 43, .06);
    --aa-cal-shadow-2: 0 10px 24px rgba(18, 23, 43, .10);
    --aa-cal-shadow-3: 0 18px 44px rgba(18, 23, 43, .14);
    background: var(--aa-cal-paper);
    color: var(--aa-cal-text);
    font-family: var(--aa-cal-body);
    line-height: 1.6;
}

.aa-cal *,
.aa-cal *::before,
.aa-cal *::after { box-sizing: border-box; }

.aa-cal :focus-visible { outline: 3px solid var(--aa-cal-gold-ink); outline-offset: 2px; border-radius: 3px; }

.aa-cal__vh {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
}

.aa-cal__wrap { max-width: var(--aa-cal-max); margin: 0 auto; padding-inline: var(--aa-cal-px); }
.aa-cal [hidden] { display: none !important; }
.aa-cal a { color: inherit; text-decoration: none; }
.aa-cal img, .aa-cal svg { max-width: 100%; }

/* ---------- hero ---------- */

.aa-cal__hero {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(135deg, var(--aa-cal-navy-900) 0%, var(--aa-cal-navy) 58%, #2E3557 100%);
}
.aa-cal__hero::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--aa-cal-gold), transparent);
}
.aa-cal__hero-in { position: relative; display: grid; gap: 1.75rem; padding-block: clamp(2rem, 5vw, 3.75rem); }
.aa-cal__kicker {
    display: inline-flex; align-items: center; gap: .6rem;
    font-family: var(--aa-cal-sans); font-size: .75rem; font-weight: 600;
    letter-spacing: .2em; text-transform: uppercase; color: var(--aa-cal-gold-light);
}
.aa-cal__kicker::before { content: ""; width: 26px; height: 1px; background: var(--aa-cal-gold); }
.aa-cal__hero h1 {
    margin: .7rem 0 0; font-family: var(--aa-cal-serif); font-weight: 500;
    line-height: 1.04; font-size: clamp(2.1rem, 5.4vw, 3.6rem); color: #fff;
}
.aa-cal__lede { margin: .75rem 0 0; max-width: 56ch; color: #CFD3E0; font-size: clamp(1rem, 1.4vw, 1.1rem); }
/* 0.2.15 (T-0215, client edit V2, Lara: "can we not make this text come all the way across?"): with the staff setting
   "Full width" (the default) the line runs the width of the content; "Contained" keeps the 56ch measure above. */
.aa-cal__hero-in--full .aa-cal__lede { max-width: none; }
.aa-cal__stats { display: flex; flex-wrap: wrap; gap: .75rem; }
.aa-cal__stat {
    flex: 1 1 11rem; min-width: 0; padding: .85rem 1rem; border-radius: 12px;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
}
.aa-cal__stat-n { display: block; font-family: var(--aa-cal-serif); font-size: clamp(1.4rem, 2.8vw, 1.9rem); line-height: 1.05; color: #fff; }
.aa-cal__stat-l {
    display: block; margin-top: .15rem; font-family: var(--aa-cal-sans); font-size: .75rem;
    font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--aa-cal-gold-light);
}

/* ---------- toolbar ---------- */

/*
 * 0.1.40 (T-0140, DEC-85 and DEC-79): the toolbar pinned at `top: 0`, which is the exact DEC-79 defect.
 *
 * The Elementor site header is `position: fixed`, `z-index: 99` and 77px tall, so a bar pinned at 0 is painted,
 * pinned and INVISIBLE underneath it. This is the same failure that was fixed on the anchor bar in 0.1.38, and
 * unlike the anchor bar's admin-bar half it was broken for EVERYONE, signed in and signed out alike, on
 * /course-calendar/, which is the route the new header links to and the one the owner asked for by name.
 *
 * 96px is not a new constant: it is the same --aa-head-offset the programme surface uses, so the toolbar lines
 * up with the anchor bar rather than introducing a third number. The token is READ rather than inlined so that
 * if programme.css is ever enqueued on this route the two cannot disagree; on this route today it resolves to
 * the 96px fallback, which is the same value, and that is asserted in the suite rather than assumed.
 *
 * THE ADMIN-BAR BLOCK BELOW IS A VERBATIM COPY of the canonical one in programme.css, and it has to be here.
 * functions.php enqueues this stylesheet with `array()`, no dependency on programme.css, and the calendar is
 * not a WooCommerce surface, so Theme::isDynamicSurface() is false and programme.css never loads on this route.
 * Without its own declaration var(--aa-admin-bar-h, 0px) would resolve to the 0px FALLBACK at every width and
 * the signed-in half of this fix would silently do nothing. Values read from WordPress core's own
 * wp-includes/css/admin-bar.css and re-confirmed against a WordPress 7.1 tree, which is what staging runs:
 * 32px fixed, 46px at max-width 782px, and `position: absolute` at max-width 600px, where the bar scrolls away
 * and displaces nothing, which is why the term returns to ZERO there rather than staying at 46px.
 * Equal specificity, so the 600px rule must stay AFTER the 782px rule. Do not reorder them.
 */
:root { --aa-admin-bar-h: 0px; }

body.admin-bar { --aa-admin-bar-h: 32px; }

@media screen and (max-width: 782px) {
    body.admin-bar { --aa-admin-bar-h: 46px; }
}

@media screen and (max-width: 600px) {
    body.admin-bar { --aa-admin-bar-h: 0px; }
}

.aa-cal__toolbar { position: sticky; top: calc(var(--aa-head-offset, 96px) + var(--aa-admin-bar-h, 0px)); z-index: 30; background: var(--aa-cal-paper); border-bottom: 1px solid var(--aa-cal-border); }
.aa-cal__toolbar-in { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding-block: .7rem; }
.aa-cal__seg {
    display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px;
    background: var(--aa-cal-white); border: 1px solid var(--aa-cal-border-strong); box-shadow: var(--aa-cal-shadow-1);
}
.aa-cal__seg a {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: 44px; padding: .4rem .95rem; border-radius: 999px;
    font-family: var(--aa-cal-sans); font-size: .78rem; font-weight: 600;
    letter-spacing: .09em; text-transform: uppercase; color: var(--aa-cal-navy);
    transition: background .25s var(--aa-cal-ease), color .25s var(--aa-cal-ease);
}
.aa-cal__seg a:hover { background: var(--aa-cal-cream); color: var(--aa-cal-gold-ink); }
.aa-cal__seg a[aria-current="page"] { background: var(--aa-cal-navy); color: #fff; box-shadow: var(--aa-cal-shadow-1); }
.aa-cal__pnav { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.aa-cal__step {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    min-height: 44px; min-width: 44px; padding: .5rem .8rem;
    border: 1px solid var(--aa-cal-border-strong); border-radius: 8px; background: var(--aa-cal-white);
    font-family: var(--aa-cal-sans); font-size: .78rem; font-weight: 600; color: var(--aa-cal-navy);
    transition: background .2s var(--aa-cal-ease), border-color .2s var(--aa-cal-ease), color .2s var(--aa-cal-ease);
}
.aa-cal__step:hover { background: var(--aa-cal-navy); border-color: var(--aa-cal-navy); color: #fff; }
.aa-cal__step--now { border-color: var(--aa-cal-gold); color: var(--aa-cal-gold-ink); }
.aa-cal__step--now:hover { background: var(--aa-cal-gold-ink); border-color: var(--aa-cal-gold-ink); color: #fff; }
/* At the horizon edge the control is inert text, never a link into an error. */
.aa-cal__step--off { color: var(--aa-cal-muted); background: transparent; border-style: dashed; cursor: default; }
.aa-cal__step--off:hover { background: transparent; border-color: var(--aa-cal-border-strong); color: var(--aa-cal-muted); }

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

.aa-cal__filters { background: var(--aa-cal-paper); border-bottom: 1px solid var(--aa-cal-border); }
.aa-cal__filters-in { padding-block: 1.1rem; }
.aa-cal__fcard {
    padding: 1.1rem; border-radius: var(--aa-cal-radius);
    background: var(--aa-cal-white); border: 1px solid var(--aa-cal-border); box-shadow: var(--aa-cal-shadow-1);
}
.aa-cal__fcard fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.aa-cal__fcard legend {
    margin-bottom: .75rem; padding: 0; font-family: var(--aa-cal-sans); font-size: .75rem;
    font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--aa-cal-gold-ink);
}
.aa-cal__fgrid {
    display: grid; gap: .85rem; align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.aa-cal__field { display: grid; gap: .3rem; min-width: 0; }
.aa-cal__field label { font-family: var(--aa-cal-sans); font-size: .76rem; font-weight: 600; color: var(--aa-cal-navy); }
.aa-cal__field select {
    min-height: 44px; width: 100%; padding: .5rem .6rem; font: inherit; color: inherit;
    border: 1px solid var(--aa-cal-border-strong); border-radius: 8px; background: var(--aa-cal-white);
}
.aa-cal__field select:hover { border-color: var(--aa-cal-gold); }
/* 0.2.17 (T-0217, F29b): Apply and Clear filters were .6rem (10 px) apart, under the 12 px the site keeps between
   buttons; .75rem is the calendar's own gap for button rows (toolbar, stats). */
.aa-cal__fbtns { display: flex; gap: .75rem; flex-wrap: wrap; grid-column: 1 / -1; }
.aa-cal__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 44px; padding: .7rem 1.3rem; border-radius: 6px; cursor: pointer;
    font-family: var(--aa-cal-sans); font-weight: 600; font-size: .76rem;
    letter-spacing: .1em; text-transform: uppercase;
    border: 1px solid var(--aa-cal-navy); background: var(--aa-cal-navy); color: #fff;
    transition: background .25s var(--aa-cal-ease), color .25s var(--aa-cal-ease), transform .25s var(--aa-cal-ease), box-shadow .25s var(--aa-cal-ease);
}
.aa-cal__lede a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.55); }
.aa-cal__lede a:hover { text-decoration-color: currentColor; }
/* 0.1.94 (V6 W12.3): the Kit's button rule (.elementor-kit-6 button) gave the <button> Arial 17px and 20px 40px
   padding, so Apply filters did not match Clear filters. The calendar's own button style wins inside the calendar. */
.aa-cal button.aa-cal__btn {
    padding: .7rem 1.3rem; border-radius: 6px; font-family: var(--aa-cal-sans); font-weight: 600; font-size: .76rem;
    line-height: 1.2; letter-spacing: .1em; text-transform: uppercase;
    border: 1px solid var(--aa-cal-navy); background: var(--aa-cal-navy); color: #fff;
}
.aa-cal button.aa-cal__btn:hover, .aa-cal button.aa-cal__btn:focus-visible { background: var(--aa-cal-gold); border-color: var(--aa-cal-gold); color: #fff; }
.aa-cal__btn:hover { background: var(--aa-cal-gold); border-color: var(--aa-cal-gold); color: #fff; transform: translateY(-2px); box-shadow: var(--aa-cal-shadow-2); }
.aa-cal__btn--ghost { background: transparent; color: var(--aa-cal-navy); }
.aa-cal__btn--ghost:hover { background: var(--aa-cal-navy); border-color: var(--aa-cal-navy); color: #fff; }
.aa-cal__applied { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .9rem; }
.aa-cal__applied-label {
    font-family: var(--aa-cal-sans); font-size: .75rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--aa-cal-muted);
}
.aa-cal__chip {
    display: inline-flex; align-items: center; gap: .45rem; min-height: 36px; padding: .25rem .7rem;
    border: 1px solid var(--aa-cal-border-strong); border-radius: 999px;
    background: var(--aa-cal-white); font-size: .84rem; transition: background .2s var(--aa-cal-ease);
}
.aa-cal__chip span[aria-hidden] { font-size: 1rem; line-height: 1; color: var(--aa-cal-gold-ink); }
.aa-cal__chip:hover { background: var(--aa-cal-cream); }
.aa-cal__count { margin: .85rem 0 0; font-family: var(--aa-cal-sans); font-size: .92rem; color: var(--aa-cal-muted); }
.aa-cal__count b { color: var(--aa-cal-navy); font-weight: 600; }

/* ---------- views ---------- */

.aa-cal__view { padding-block: clamp(1.25rem, 3.5vw, 2.5rem); }
.aa-cal__period { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.aa-cal__period h2 {
    margin: 0; font-family: var(--aa-cal-serif); font-weight: 500; color: var(--aa-cal-navy);
    font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.1;
}
.aa-cal__period h2:focus { outline: none; }
.aa-cal__period-sub {
    font-family: var(--aa-cal-sans); font-size: .8rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--aa-cal-gold-ink);
}
.aa-cal__viewnote {
    margin: 0 0 .9rem; padding: .55rem .75rem; font-size: .86rem; color: var(--aa-cal-muted);
    background: var(--aa-cal-cream); border-left: 3px solid var(--aa-cal-gold); border-radius: 6px;
    overflow-wrap: anywhere;
}
/* With script running, only the current view shows and the "this view has its own
   address" note is redundant. With script off, all three views render one after
   another and every note stays. */
.aa-cal-js .aa-cal__viewnote { display: none; }
.aa-cal-js .aa-cal__view:not([data-aa-current]):not(.aa-cal__view--note) { display: none; }
.aa-cal-js .aa-cal__view[data-aa-current] { animation: aa-cal-fade .32s var(--aa-cal-ease); }
@keyframes aa-cal-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- the grids ---------- */

.aa-cal__table {
    /* 0.2.11 (T-0211): margin 0, the theme base gave every table a 15px bottom margin under the grid. */
    width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; table-layout: fixed;
    background: var(--aa-cal-white); border: 1px solid var(--aa-cal-border-strong);
    border-radius: var(--aa-cal-radius); overflow: hidden; box-shadow: var(--aa-cal-shadow-2);
}
.aa-cal__table th {
    padding: .7rem .55rem; text-align: left; background: var(--aa-cal-navy); color: #CFD3E0;
    font-family: var(--aa-cal-sans); font-size: .75rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
}
.aa-cal__table th abbr { text-decoration: none; border: 0; }
.aa-cal__table td {
    vertical-align: top; height: 152px; padding: .5rem;
    border-bottom: 1px solid var(--aa-cal-border); border-right: 1px solid var(--aa-cal-border);
}
.aa-cal__table tr td:last-child { border-right: 0; }
.aa-cal__table tr:last-child td { border-bottom: 0; }

.aa-cal__day--we { background: #FCFBF9; }
.aa-cal__day--out { background: #F7F5F1; }
/* 0.2.5 (T-0205, QA H.axe color-contrast, 33 cells): the day numbers outside the month and "No dates" were #B3AFA6 and
   #B4B0A7, 2.0:1 to 2.2:1. They take the calendar's muted text colour, #6E6B62: 4.9:1 on the out-of-month background
   #F7F5F1, 5.3:1 on white. The month's own days stay navy, so the two still read apart. */
.aa-cal__day--out .aa-cal__daynum { color: var(--aa-cal-muted); font-weight: 500; }
.aa-cal__day--today {
    background: linear-gradient(180deg, rgba(160, 137, 94, .13), rgba(160, 137, 94, .03));
    box-shadow: inset 0 0 0 2px var(--aa-cal-gold);
}
.aa-cal__dayhead { display: flex; align-items: center; gap: .4rem; min-height: 26px; margin-bottom: .4rem; }
.aa-cal__daynum { font-family: var(--aa-cal-sans); font-size: .88rem; font-weight: 600; color: var(--aa-cal-navy); }
.aa-cal__day--today .aa-cal__daynum {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; height: 26px; border-radius: 999px; background: var(--aa-cal-gold-ink); color: #fff;
}
.aa-cal__todaytag {
    font-family: var(--aa-cal-sans); font-size: .75rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--aa-cal-gold-ink);
}
.aa-cal__daycount {
    margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 .35rem; border-radius: 999px;
    background: var(--aa-cal-cream); font-family: var(--aa-cal-sans); font-size: .75rem;
    font-weight: 600; color: var(--aa-cal-muted);
}
.aa-cal__dayfull { display: none; }
.aa-cal__none { font-family: var(--aa-cal-sans); font-size: .75rem; color: var(--aa-cal-muted); }
/* 0.2.11 (T-0211, owner feedback 2026-10-17): CAUSE of a card running past its day cell (week view, the fully booked
   Polynucleotides card on 17 October at 1440): the entries grid had an auto column, so it grew to the card's widest
   unbreakable line, a "SPECIALIST TRAINING" tag that could not wrap (white-space: nowrap), and the card spilled into the
   next day. FIX: the column is minmax(0, 1fr), so a card is never wider than its cell, and inside a card tags and names
   wrap (below). */
.aa-cal__entries { display: grid; grid-template-columns: minmax(0, 1fr); gap: .3rem; }

/* ---------- one entry ---------- */

.aa-cal__ev {
    display: block; position: relative; padding: .4rem .5rem; border-radius: 8px;
    background: var(--aa-cal-white); border: 1px solid var(--aa-cal-border);
    border-left: 4px solid var(--aa-cal-g, var(--aa-cal-navy)); box-shadow: var(--aa-cal-shadow-1);
    transition: transform .2s var(--aa-cal-ease), box-shadow .2s var(--aa-cal-ease), border-color .2s var(--aa-cal-ease), background .2s var(--aa-cal-ease);
}
.aa-cal__ev--core { --aa-cal-g: var(--aa-cal-core); --aa-cal-g-tint: rgba(38, 46, 77, .06); }
.aa-cal__ev--spec { --aa-cal-g: var(--aa-cal-spec); --aa-cal-g-tint: rgba(160, 137, 94, .12); }
.aa-cal__ev--path { --aa-cal-g: var(--aa-cal-path); --aa-cal-g-tint: rgba(63, 99, 201, .08); }
.aa-cal__ev--free { --aa-cal-g: var(--aa-cal-free); --aa-cal-g-tint: rgba(36, 92, 59, .09); }
.aa-cal__ev:hover {
    transform: translateY(-2px); box-shadow: var(--aa-cal-shadow-2);
    background: var(--aa-cal-g-tint, var(--aa-cal-cream)); border-color: var(--aa-cal-g, var(--aa-cal-navy));
}
.aa-cal__ev-head { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.aa-cal__glyph {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 18px; height: 18px; border-radius: 5px; background: var(--aa-cal-g, var(--aa-cal-navy));
    color: #fff; font-family: var(--aa-cal-sans); font-size: .75rem; font-weight: 600; line-height: 1;
}
.aa-cal__glyph--sm { width: 16px; height: 16px; border-radius: 4px; }
.aa-cal__ev-time {
    display: inline-flex; align-items: center; gap: .25rem; flex-wrap: wrap;
    font-family: var(--aa-cal-sans); font-size: .75rem; font-weight: 600;
    letter-spacing: .03em; color: var(--aa-cal-gold-ink);
}
.aa-cal__tl { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--aa-cal-muted); }
.aa-cal__tsep { display: inline-block; width: 3px; height: 3px; margin: 0 .1rem; border-radius: 50%; background: var(--aa-cal-gold); }
.aa-cal__ev-time--tbc { color: var(--aa-cal-muted); }
.aa-cal__ev-name {
    display: block; margin: .15rem 0 .05rem; font-family: var(--aa-cal-sans); font-size: .83rem;
    font-weight: 600; color: var(--aa-cal-navy); line-height: 1.25; overflow-wrap: anywhere;
    hyphens: auto; /* 0.2.11 (T-0211): a long word in a narrow cell breaks with a hyphen (the page is lang en-GB) */
}
.aa-cal__table--month .aa-cal__ev-name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.aa-cal__table--month .aa-cal__ev-price { display: inline; }
.aa-cal__table--month .aa-cal__ev-price::before { content: "\00b7"; margin: 0 .3rem; color: var(--aa-cal-gold); }
.aa-cal__ev-arrow { margin-right: .2rem; font-weight: 400; color: var(--aa-cal-g, var(--aa-cal-navy)); }
.aa-cal__ev-meta { display: block; font-size: .75rem; color: var(--aa-cal-muted); overflow-wrap: anywhere; }
.aa-cal__ev-price { display: block; font-weight: 600; color: var(--aa-cal-text); }
.aa-cal__ev-price--free { color: var(--aa-cal-free); }
.aa-cal__vat, .aa-cal__ev-price small {
    font-family: var(--aa-cal-sans); font-size: .75rem; font-weight: 600;
    letter-spacing: .06em; color: var(--aa-cal-muted);
}
.aa-cal__ev-state {
    display: inline-block; margin-top: .2rem; padding: .1rem .45rem; border: 1px solid; border-radius: 999px;
    font-family: var(--aa-cal-sans); font-size: .75rem; font-weight: 600; letter-spacing: .06em;
}
.aa-cal__ev-state--available { color: #245C3B; border-color: rgba(36, 92, 59, .32); background: rgba(36, 92, 59, .07); }
.aa-cal__ev-state--few { color: var(--aa-cal-gold-ink); border-color: rgba(126, 101, 49, .45); background: rgba(160, 137, 94, .14); }
/* 0.2.14 (T-0214, E2E MED-1): "Bookings closed" wears the fully booked look; it cannot be booked either. */
.aa-cal__ev-state--full, .aa-cal__ev-state--closed { color: #55524B; border-color: #C2BCB1; background: #EDEAE4; }
.aa-cal__ev-state--open { color: var(--aa-cal-text); border-color: var(--aa-cal-border-strong); background: var(--aa-cal-white); }

/* Day two of a run: same colour, same letter, same link, no price, no seat count. */
.aa-cal__ev--cont { background: var(--aa-cal-g-tint, var(--aa-cal-cream)); border-left-style: double; border-left-width: 5px; }
.aa-cal__ev--cont .aa-cal__ev-name { color: #4A4E63; }
.aa-cal__ev--cont:hover { background: var(--aa-cal-white); }

/* Beyond the three-per-cell cap: present in the markup, shown on the day list. */
.aa-cal__ev--of { display: none; }

/* Fully booked, without relying on colour. */
.aa-cal__ev--full, .aa-cal__ev--closed {
    --aa-cal-g: #9A958B;
    border-style: dashed; border-left-style: solid;
    background-image: repeating-linear-gradient(135deg, rgba(38, 46, 77, .035) 0 6px, transparent 6px 12px);
}
.aa-cal__ev--full .aa-cal__ev-name, .aa-cal__ev--closed .aa-cal__ev-name { color: #55524B; }
.aa-cal__ev--full .aa-cal__ev-time, .aa-cal__ev--closed .aa-cal__ev-time { color: var(--aa-cal-muted); }
.aa-cal__ev--full:hover, .aa-cal__ev--closed:hover { background-color: #F6F4F0; }

.aa-cal__more {
    display: inline-block; margin-top: .4rem; padding-bottom: 1px;
    font-family: var(--aa-cal-sans); font-size: .76rem; font-weight: 600;
    color: var(--aa-cal-navy); border-bottom: 1px solid var(--aa-cal-gold);
}
.aa-cal__more:hover { color: var(--aa-cal-gold-ink); }

/* ---------- tags ---------- */

.aa-cal__tag {
    display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .5rem;
    border: 1px solid; border-radius: 999px; white-space: nowrap;
    font-family: var(--aa-cal-sans); font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
}
.aa-cal__tag--core { --aa-cal-tag-ink: var(--aa-cal-core); color: var(--aa-cal-core); border-color: rgba(38, 46, 77, .35); background: rgba(38, 46, 77, .06); }
.aa-cal__tag--spec { --aa-cal-tag-ink: var(--aa-cal-spec); color: var(--aa-cal-spec); border-color: rgba(126, 101, 49, .4); background: rgba(160, 137, 94, .12); }
.aa-cal__tag--path { --aa-cal-tag-ink: var(--aa-cal-path); color: var(--aa-cal-path); border-color: rgba(63, 99, 201, .35); background: rgba(63, 99, 201, .08); }
.aa-cal__tag--free { --aa-cal-tag-ink: var(--aa-cal-free); color: var(--aa-cal-free); border-color: rgba(36, 92, 59, .4); background: rgba(36, 92, 59, .08); }
.aa-cal__tag--online { color: var(--aa-cal-path); border-color: rgba(63, 99, 201, .35); background: var(--aa-cal-white); }
.aa-cal__tag--span { color: var(--aa-cal-text); border-color: var(--aa-cal-border-strong); background: var(--aa-cal-white); }
.aa-cal__tag--available { color: #245C3B; border-color: rgba(36, 92, 59, .32); background: rgba(36, 92, 59, .07); }
.aa-cal__tag--few { color: var(--aa-cal-gold-ink); border-color: rgba(126, 101, 49, .45); background: rgba(160, 137, 94, .14); }
.aa-cal__tag--full, .aa-cal__tag--closed { color: #55524B; border-color: #C2BCB1; background: #EDEAE4; }
.aa-cal__tag--open { color: var(--aa-cal-text); border-color: var(--aa-cal-border-strong); background: var(--aa-cal-white); }
/* 0.2.16 (T-0216, TASKS F28b, owner 21 Oct): the course-type letter showed as an empty white box. CAUSE: this rule set
   `background: currentColor` and `color: #fff` together, and currentColor is the element's OWN colour, so the box was
   white and so was its letter. FIX: each course-type tag names its ink (--aa-cal-tag-ink) and the letter box is drawn in
   it, white letter on the group colour, exactly like the key's swatches (.aa-cal__legend-sw--*). */
.aa-cal__tag .aa-cal__glyph { background: var(--aa-cal-tag-ink, var(--aa-cal-navy)); color: #fff; }

/* ---------- week ---------- */

.aa-cal__wkhead { background: var(--aa-cal-navy); }
.aa-cal__wkhead-dow { display: block; font-size: .75rem; letter-spacing: .16em; }
.aa-cal__wkhead-d { display: block; font-family: var(--aa-cal-serif); font-size: 1.6rem; line-height: 1.1; color: #fff; text-transform: none; letter-spacing: 0; }
.aa-cal__wkhead-mon { display: block; font-size: .75rem; letter-spacing: .14em; color: var(--aa-cal-gold-light); }
.aa-cal__wkhead--today { background: var(--aa-cal-gold-ink); }
.aa-cal__wkhead--today .aa-cal__wkhead-mon { color: #fff; }
.aa-cal__table--week td { height: auto; min-height: 240px; }
.aa-cal__ev--wk { padding: .6rem .65rem; }
.aa-cal__ev--wk .aa-cal__ev-name { font-size: .88rem; margin: .3rem 0 .2rem; }
.aa-cal__ev--wk .aa-cal__ev-price { font-size: .9rem; margin-top: .2rem; }
.aa-cal__ev-tags { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .45rem; }
/* 0.2.11 (T-0211): a tag inside a card wraps onto a second line when the cell is narrow (legend tags stay on one line). */
.aa-cal__ev .aa-cal__tag { max-width: 100%; white-space: normal; border-radius: 10px; }

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

.aa-cal__monthgroup { margin-bottom: 2.25rem; }
.aa-cal__mh {
    display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
    margin: 0 0 1rem; padding-bottom: .55rem; border-bottom: 1px solid var(--aa-cal-border-strong);
    font-family: var(--aa-cal-serif); font-weight: 500; color: var(--aa-cal-navy);
    font-size: clamp(1.4rem, 2.6vw, 1.75rem);
}
.aa-cal__mn {
    font-family: var(--aa-cal-sans); font-size: .75rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--aa-cal-gold-ink);
}
/* 0.2.15 (T-0215, client edit V5): one row per date in Lara's order, as columns: date, course (name, course type,
   times), location, places, price and the button. Each cell carries its own small label, so the stacked phone layout
   reads the same as the columns. */
.aa-cal__lrow {
    display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 9.5rem 10rem 9rem 11.5rem; gap: 1.25rem; align-items: center;
    margin-bottom: .7rem; padding: 1rem 1.15rem; border-radius: var(--aa-cal-radius);
    background: var(--aa-cal-white); border: 1px solid var(--aa-cal-border);
    border-left: 4px solid var(--aa-cal-g, var(--aa-cal-navy)); box-shadow: var(--aa-cal-shadow-1);
    transition: transform .2s var(--aa-cal-ease), box-shadow .2s var(--aa-cal-ease), border-color .2s var(--aa-cal-ease);
}
.aa-cal__lrow--core { --aa-cal-g: var(--aa-cal-core); }
.aa-cal__lrow--spec { --aa-cal-g: var(--aa-cal-spec); }
.aa-cal__lrow--path { --aa-cal-g: var(--aa-cal-path); }
.aa-cal__lrow--free { --aa-cal-g: var(--aa-cal-free); }
.aa-cal__lrow:hover { box-shadow: var(--aa-cal-shadow-3); border-color: var(--aa-cal-g, var(--aa-cal-navy)); }
.aa-cal__lrow--full, .aa-cal__lrow--closed {
    --aa-cal-g: #9A958B;
    border-style: dashed; border-left-style: solid;
    background-image: repeating-linear-gradient(135deg, rgba(38, 46, 77, .03) 0 7px, transparent 7px 14px);
}
.aa-cal__ldate { font-family: var(--aa-cal-sans); text-align: center; padding-right: 1rem; border-right: 1px solid var(--aa-cal-border); }
.aa-cal__ldow { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--aa-cal-muted); }
.aa-cal__ld { display: block; font-family: var(--aa-cal-serif); font-size: 2.2rem; line-height: 1.02; color: var(--aa-cal-navy); }
.aa-cal__ld2 { font-size: 1.4rem; color: var(--aa-cal-muted); }
.aa-cal__lmon { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--aa-cal-gold-ink); }
.aa-cal__lbody { min-width: 0; }
.aa-cal__lname {
    display: block; font-family: var(--aa-cal-serif); font-size: clamp(1.15rem, 2vw, 1.4rem);
    color: var(--aa-cal-navy); line-height: 1.2; overflow-wrap: anywhere;
}
.aa-cal__lmeta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .25rem; font-size: .92rem; color: var(--aa-cal-muted); }
.aa-cal__lt { display: inline-flex; align-items: center; gap: .3rem; }
.aa-cal__lt--tbc { color: var(--aa-cal-muted); }
.aa-cal__lsep { flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--aa-cal-gold); }
.aa-cal__ltags { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
.aa-cal__lright { display: grid; gap: .45rem; justify-items: end; text-align: right; }
.aa-cal__lcell { display: grid; gap: .3rem; justify-items: start; min-width: 0; }
.aa-cal__lk {
    font-family: var(--aa-cal-sans); font-size: .75rem; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--aa-cal-muted);
}
.aa-cal__lv { font-size: 1rem; color: var(--aa-cal-text); overflow-wrap: anywhere; }
.aa-cal__lbody .aa-cal__ltags { margin-top: .45rem; }
.aa-cal__lname { text-decoration: none; }
/* 0.2.16 (T-0216, QA 21 Oct, C.tap; owner: "fix any other problems", no visible change): a text link under 44 px tall
   gets a transparent hit area above and below its text (a pseudo-element on the link, so nothing on the page moves). */
.aa-cal a.aa-cal__lname, .aa-cal a.aa-cal__reviews-all { position: relative; }
.aa-cal a.aa-cal__lname::after, .aa-cal a.aa-cal__reviews-all::after { content: ""; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px; }
.aa-cal__lname:hover { text-decoration: underline; text-decoration-color: var(--aa-cal-gold); text-underline-offset: 4px; }
/* 0.2.15 (T-0215): `.aa-cal a.` because the calendar's own `.aa-cal a { color: inherit }` (0,1,1) outranks a bare class,
   which printed the button's words in body grey on navy (live check 21 Oct). */
.aa-cal a.aa-cal__book {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .6rem 1.1rem;
    border-radius: 6px; border: 1px solid var(--aa-cal-navy); background: var(--aa-cal-navy); color: #fff;
    font-family: var(--aa-cal-sans); font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    text-align: center; text-decoration: none; white-space: normal;
    transition: background .25s var(--aa-cal-ease), border-color .25s var(--aa-cal-ease);
}
.aa-cal a.aa-cal__book:hover, .aa-cal a.aa-cal__book:focus-visible { background: var(--aa-cal-gold-ink); border-color: var(--aa-cal-gold-ink); color: #fff; }
.aa-cal__lright .aa-cal__wait { white-space: normal; text-align: right; }
.aa-cal__price-big { font-family: var(--aa-cal-serif); font-size: 1.5rem; line-height: 1; color: var(--aa-cal-navy); white-space: nowrap; }
.aa-cal__price-big small {
    margin-left: .25rem; font-family: var(--aa-cal-sans); font-size: .75rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--aa-cal-muted);
}
.aa-cal__go, .aa-cal__wait {
    padding-bottom: 2px; white-space: nowrap; border-bottom: 1px solid var(--aa-cal-gold);
    font-family: var(--aa-cal-sans); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.aa-cal__go { color: var(--aa-cal-navy); }
.aa-cal__wait { color: var(--aa-cal-gold-ink); }
.aa-cal__lrow:hover .aa-cal__go { color: var(--aa-cal-gold-ink); }
/* 0.2.2 (T-0202): a fully booked row is not one link; its course name links to the course and its
   "Speak to an Advisor about this date" label links to Contact. Each shows that it is a link on hover. */
.aa-cal__lrow--closed a.aa-cal__lname:hover, .aa-cal__lrow--full a.aa-cal__lname:hover { text-decoration: underline; text-decoration-color: var(--aa-cal-gold); text-underline-offset: 4px; }
.aa-cal__lrow--closed a.aa-cal__wait:hover, .aa-cal__lrow--full a.aa-cal__wait:hover { color: var(--aa-cal-navy); }

/* ---------- empty, legend, horizon ---------- */

.aa-cal__empty {
    display: grid; gap: .5rem; justify-items: start; max-width: 48rem;
    padding: clamp(1.4rem, 4vw, 2.25rem); border-radius: var(--aa-cal-radius);
    background: var(--aa-cal-white); border: 1px solid var(--aa-cal-border-strong); box-shadow: var(--aa-cal-shadow-1);
}
.aa-cal__empty-mark {
    position: relative; width: 52px; height: 52px; margin-bottom: .4rem;
    border-radius: 12px; border: 2px solid var(--aa-cal-border-strong); background: var(--aa-cal-cream);
}
.aa-cal__empty-mark::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 13px; background: var(--aa-cal-navy); border-radius: 9px 9px 0 0; }
.aa-cal__empty-mark::after { content: ""; position: absolute; left: 11px; right: 11px; top: 26px; height: 2px; background: var(--aa-cal-gold); box-shadow: 0 8px 0 var(--aa-cal-border-strong); }
.aa-cal__empty h3 { margin: 0; font-family: var(--aa-cal-serif); font-weight: 500; color: var(--aa-cal-navy); font-size: clamp(1.35rem, 3vw, 1.75rem); }
.aa-cal__empty p { margin: 0; max-width: 52ch; color: var(--aa-cal-muted); }
.aa-cal__empty .aa-cal__fbtns { margin-top: .9rem; }

/* 0.2.11 (T-0211, owner feedback 2026-10-17): the box sat 81px below the grid (the view's own bottom padding, a 25.6px
   margin and the table's 15px margin) and directly on the footer. Now the gap above is the view's bottom padding
   alone, and the block after the views ends with the hero's section spacing before the footer. The box is as wide as
   the empty-state and horizon boxes allow for its tag row (52rem), and the note fills it, so the text lines up with
   the tags instead of stopping at half width. */
.aa-cal__afterviews { padding-bottom: clamp(2rem, 5vw, 3.75rem); }
.aa-cal__legend {
    display: grid; gap: .85rem; max-width: 52rem; margin-top: 0; padding: clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.1rem, 2.5vw, 1.75rem);
    border-radius: var(--aa-cal-radius); background: var(--aa-cal-white); border: 1px solid var(--aa-cal-border);
}
.aa-cal__legend h2 {
    margin: 0; font-family: var(--aa-cal-sans); font-size: .75rem; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase; color: var(--aa-cal-gold-ink);
}
.aa-cal__legend-row { display: flex; gap: .6rem 1rem; flex-wrap: wrap; }
.aa-cal__legend-i { display: inline-flex; align-items: center; gap: .45rem; font-size: .86rem; color: var(--aa-cal-text); }
.aa-cal__legend-sw {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 18px; height: 18px; border-radius: 5px; color: #fff;
    font-family: var(--aa-cal-sans); font-size: .75rem; font-weight: 600;
}
.aa-cal__legend-sw--core { background: var(--aa-cal-core); }
.aa-cal__legend-sw--spec { background: var(--aa-cal-spec); }
.aa-cal__legend-sw--path { background: var(--aa-cal-path); }
.aa-cal__legend-sw--free { background: var(--aa-cal-free); }
.aa-cal__legend-note { margin: 0; font-size: 1rem; color: var(--aa-cal-muted); } /* 0.2.5 (T-0205, QA C.tap): body copy 16px (was 13.76px) */
/* 0.2.15 (T-0215, client edit V7, Lara: "this is aligned beside and I don't know why"): with the staff setting "Full width"
   (the default) the box runs the width of the content; "Contained" keeps the 52rem box above. */
.aa-cal__legend--full { max-width: none; }

/* 0.2.15 (T-0215, client edit V6): the reviews band under the calendar. Three real rated reviews (CalendarReviews). */
.aa-cal__reviews { padding-block: clamp(2rem, 5vw, 3.5rem); background: var(--aa-cal-white); border-top: 1px solid var(--aa-cal-border); }
.aa-cal__reviews-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.aa-cal__reviews h2 { margin: 0; font-family: var(--aa-cal-serif); font-weight: 500; color: var(--aa-cal-navy); font-size: clamp(1.6rem, 3vw, 2.1rem); }
.aa-cal a.aa-cal__reviews-all {
    font-family: var(--aa-cal-sans); font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--aa-cal-navy); text-decoration: none; border-bottom: 1px solid var(--aa-cal-gold); padding-bottom: 2px;
}
.aa-cal a.aa-cal__reviews-all:hover { color: var(--aa-cal-gold-ink); }
/* 0.2.16 (T-0216, QA C.orphan): three reviews, so one column on a phone and three from 768 px. auto-fit gave 2 + 1 at 768. */
.aa-cal__reviews-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .aa-cal__reviews-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.aa-cal__review figure {
    display: grid; gap: .6rem; align-content: start; height: 100%; margin: 0; padding: 1.25rem 1.35rem;
    border-radius: var(--aa-cal-radius); background: var(--aa-cal-paper); border: 1px solid var(--aa-cal-border);
}
.aa-cal__stars { margin: 0; color: var(--aa-cal-gold-ink); letter-spacing: .15em; font-size: 1rem; }
.aa-cal__review blockquote { margin: 0; }
.aa-cal__review blockquote p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--aa-cal-text); }
.aa-cal__review figcaption { font-family: var(--aa-cal-sans); font-size: .86rem; font-weight: 600; color: var(--aa-cal-navy); }
.aa-cal__review figcaption span { display: block; margin-top: .15rem; font-weight: 400; color: var(--aa-cal-muted); }

/* 0.2.15 (T-0215, client edit V8): the closing band, "Speak to an Advisor for help or information about booking your
   training course", with the Advisor button. */
.aa-cal__closing { background: var(--aa-cal-navy); color: #fff; }
.aa-cal__closing-in {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap;
    padding-block: clamp(1.75rem, 4vw, 2.75rem);
}
.aa-cal__closing p { margin: 0; max-width: 48rem; font-family: var(--aa-cal-serif); font-size: clamp(1.35rem, 2.6vw, 1.75rem); line-height: 1.3; color: #fff; }
.aa-cal a.aa-cal__btn--gold { background: var(--aa-cal-gold-ink); border-color: var(--aa-cal-gold-ink); color: #fff; text-decoration: none; }
.aa-cal__closing a.aa-cal__btn--gold:hover, .aa-cal__closing a.aa-cal__btn--gold:focus-visible { background: #fff; border-color: #fff; color: var(--aa-cal-navy); }

.aa-cal__horizon {
    max-width: 48rem; padding: 1rem 1.15rem; font-size: .92rem;
    background: var(--aa-cal-cream); border: 1px solid var(--aa-cal-border-strong); border-radius: var(--aa-cal-radius);
}
.aa-cal__horizon b {
    display: block; margin-bottom: .3rem; font-family: var(--aa-cal-sans); font-size: .75rem;
    letter-spacing: .14em; text-transform: uppercase; color: var(--aa-cal-gold-ink);
}

/* ---------- responsive ----------
   At 768px a seven column month grid gives 99px cells, which breaks course names
   word by word. Below 1000px the grid becomes a list of day cards carrying exactly
   the same data, and days with no dates are hidden. */

@media (max-width: 1180px) {
    .aa-cal__table td { height: 138px; }
}

@media (max-width: 1000px) {
    .aa-cal__table,
    .aa-cal__table thead,
    .aa-cal__table tbody,
    .aa-cal__table tr,
    .aa-cal__table th,
    .aa-cal__table td { display: block; }
    .aa-cal__table { border: 0; background: transparent; overflow: visible; box-shadow: none; }
    .aa-cal__table thead { display: none; }
    .aa-cal__table td {
        height: auto; margin-bottom: .6rem; padding: .85rem;
        border: 1px solid var(--aa-cal-border); border-radius: 12px;
        background: var(--aa-cal-white); box-shadow: var(--aa-cal-shadow-1);
    }
    /* An out-of-month cell is hidden here UNLESS it carries a continuation, or a run
       that crosses a month boundary would disappear on a phone. */
    .aa-cal__table td.aa-cal__day--empty,
    .aa-cal__table td.aa-cal__day--out:not(.aa-cal__day--out-has) { display: none; }
    /*
     * 0.1.42 (T-0142, A11Y): the rule above hides cells, and a week with no dates at all therefore
     * left a row with no cells in it. month.php marks such a week, and the row goes with its cells.
     */
    .aa-cal__table tr.aa-cal__week--empty { display: none; }
    .aa-cal__day--today { box-shadow: inset 0 0 0 2px var(--aa-cal-gold), var(--aa-cal-shadow-1); }
    .aa-cal__dayhead { display: none; }
    .aa-cal__dayfull {
        display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem;
        padding-bottom: .5rem; border-bottom: 1px solid var(--aa-cal-border);
        font-family: var(--aa-cal-sans); font-size: .8rem; font-weight: 600;
        letter-spacing: .1em; text-transform: uppercase; color: var(--aa-cal-gold-ink);
    }
    .aa-cal__day--today .aa-cal__dayfull::after {
        content: "Today"; padding: .1rem .5rem; border-radius: 999px;
        background: var(--aa-cal-gold-ink); color: #fff; font-size: .75rem;
    }
    .aa-cal__ev { padding: .65rem .75rem; }
    .aa-cal__ev-name, .aa-cal__ev--wk .aa-cal__ev-name { font-size: .95rem; }
    .aa-cal__pnav { margin-left: 0; flex-basis: 100%; }
    .aa-cal__seg { flex: 1 1 auto; }
    .aa-cal__fsum {
        display: flex; align-items: center; justify-content: space-between; gap: .5rem;
        min-height: 44px; cursor: pointer; list-style: none;
        font-family: var(--aa-cal-sans); font-size: .78rem; font-weight: 600;
        letter-spacing: .1em; text-transform: uppercase; color: var(--aa-cal-navy);
    }
    .aa-cal__fsum::-webkit-details-marker { display: none; }
    .aa-cal__fsum::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--aa-cal-gold-ink); }
    .aa-cal__fdrop[open] .aa-cal__fsum::after { content: "\2212"; }
    /* The summary carries the label at this width, so the fieldset legend would print
       the same words twice. It stays in the DOM for semantics. */
    .aa-cal__fcard legend {
        position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
}

/* Above the stacking breakpoint the panel is always open and needs no disclosure. */
@media (min-width: 1001px) {
    .aa-cal__fsum { display: none; }
}

/* 0.2.15 (T-0215, V5): below 1180px the row keeps date and course on the first line, then location, places and price as
   three cells, then the button across the row. */
@media (max-width: 1180px) {
    .aa-cal__lrow { grid-template-columns: 5rem repeat(3, minmax(0, 1fr)); gap: .9rem 1.25rem; }
    .aa-cal__lbody { grid-column: 2 / -1; }
    .aa-cal__lloc { grid-column: 2; }
    .aa-cal__lright {
        grid-column: 2 / -1; justify-items: start; text-align: left;
        padding-top: .7rem; border-top: 1px solid var(--aa-cal-border);
    }
    .aa-cal__lright .aa-cal__wait { text-align: left; }
}

@media (max-width: 820px) {
    .aa-cal__lrow { grid-template-columns: 4.5rem repeat(3, minmax(0, 1fr)); gap: .8rem 1rem; }
    .aa-cal__ld { font-size: 1.8rem; }
}

@media (max-width: 560px) {
    /* Four full width cards filled the whole first screen on a phone. */
    .aa-cal__stat { flex: 1 1 calc(50% - .4rem); padding: .7rem .85rem; }
    .aa-cal__stat-n { font-size: 1.35rem; }
    .aa-cal__btn { width: 100%; }
    .aa-cal__fbtns { flex-direction: column; align-items: stretch; }
    .aa-cal__seg { width: 100%; justify-content: space-between; }
    .aa-cal__seg a { flex: 1 1 0; justify-content: center; padding: .4rem .5rem; }
    .aa-cal__step { flex: 1 1 auto; }
}

/* 0.2.15 (T-0215, V5): on a phone the row stacks in Lara's order: date, course, then location, places and price as
   labelled pairs, then the button at full width. */
@media (max-width: 560px) {
    .aa-cal__lrow { grid-template-columns: 1fr 1fr; gap: .7rem 1rem; }
    .aa-cal__ldate {
        grid-column: 1 / -1; display: flex; gap: .5rem; align-items: baseline; text-align: left;
        padding: 0 0 .55rem; border-right: 0; border-bottom: 1px solid var(--aa-cal-border);
    }
    .aa-cal__ld { font-size: 1.5rem; }
    .aa-cal__lbody, .aa-cal__lloc { grid-column: 1 / -1; }
    .aa-cal__lright { grid-column: 1 / -1; justify-items: stretch; }
    .aa-cal a.aa-cal__book { width: 100%; }
    .aa-cal__closing-in .aa-cal__btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .aa-cal *,
    .aa-cal *::before,
    .aa-cal *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
    .aa-cal__ev:hover, .aa-cal__lrow:hover, .aa-cal__btn:hover { transform: none; }
}