/*
 * AMA India — MEC Futuristic Calendar & List Views
 * CSS classes: .hmc (calendar)  .hml (list)
 * Mirrors the HADNow Events ModernViews layout.
 * Version: 2.18.0 (tracks the theme version — cache-busting uses
 *          AMAINDIATS_CHILD_VERSION, this header is documentation)
 */

/* ── AMA colour tokens ───────────────────────────────────────
   --ama-navy / -maroon / -cream / -border / -text / -muted are declared once,
   on `body`, in style.css. They used to be declared here too, and again under
   an --ams-* alias in the other MEC sheet: three copies of six tokens, of which
   only one ever loaded on a given page. See the note in style.css for why they
   sit on `body` rather than :root. Do not redeclare them here. */

/* ── Events / mec_category archive header (AMA_MEC_Views::maybe_render_archive) ── */
.ama-mec-archive-main { max-width: 1240px; margin: 0 auto; padding: 40px 24px 72px; }
.ama-mec-archive-head { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--ama-border, #d6cfc4); }
.ama-mec-archive-head__eyebrow {
    margin: 0 0 6px; font-size: 0.75rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ama-maroon, #8a3a2a);
}
.ama-mec-archive-head__title {
    margin: 0; font-family: var(--font-serif, Georgia, serif);
    font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--ama-navy, #1a2744);
}
.ama-mec-archive-head__desc { margin: 10px 0 0; max-width: 720px; font-size: 0.9375rem; line-height: 1.7; color: var(--ama-muted, #534c45); }
.ama-mec-archive-head__toggle { margin: 14px 0 0; font-size: 0.8125rem; }
.ama-mec-archive-head__toggle a {
    display: inline-block; color: var(--ama-navy, #1a2744); font-weight: 600; text-decoration: none;
    border: 1.5px solid var(--ama-border, #d6cfc4); border-radius: 999px; padding: 5px 16px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ama-mec-archive-head__toggle a:hover { background: var(--ama-navy, #1a2744); color: #fff; border-color: var(--ama-navy, #1a2744); }

/* ══════════════════════════════════════════════════════════════
   FUTURISTIC CALENDAR VIEW  (.hmc)
   ══════════════════════════════════════════════════════════════ */
/* FIX #3: ensure the widget never overflows its Elementor column */
.hmc { font-family: inherit; max-width: 100%; width: 100%; box-sizing: border-box; }

/* Header */
.hmc__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; flex-wrap: wrap; gap: 16px; }
.hmc__eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ama-muted); margin-bottom: 6px; }
.hmc__month-title { font-size: clamp(1.95rem, calc(1.3591rem + 2.5212vw), 3.25rem); font-weight: 900; line-height: 1; margin: 0; color: var(--ama-text); }
.hmc__month-word { font-style: normal; }
.hmc__year-italic { font-style: italic; color: var(--ama-maroon); }
.hmc__header-right { text-align: right; }
.hmc__count-label { font-size: 0.75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ama-muted); }
.hmc__count-num { font-size: 2.25rem; font-weight: 800; color: var(--ama-text); line-height: 1.1; }
.hmc__count-breakdown { font-size: 0.75rem; color: var(--ama-muted); margin-top: 4px; }
.hmc__count-item { color: var(--cat-text, var(--cat-color, var(--ama-muted))); }

/* Toolbar */
.hmc__toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; padding: 14px 16px; background: #fff; border: 1px solid #e8e2d9; border-radius: 6px; }
.hmc__nav-group { display: flex; gap: 6px; }
.hmc__nav-btn { padding: 7px 14px; border: 1px solid var(--ama-border); border-radius: 4px; background: #fff; cursor: pointer; font-size: 0.8125rem; font-family: inherit; font-weight: 600; color: var(--ama-text); transition: background .12s; }
.hmc__nav-btn:hover { background: var(--ama-cream); }
.hmc__today-btn { background: var(--ama-navy); color: #fff; border-color: var(--ama-navy); }
.hmc__today-btn:hover { opacity: .88; }
.hmc__cat-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.hmc__cat-pill.hmc__cat-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; min-height: 44px; border: 2px solid var(--cat-color, var(--ama-navy)); border-radius: 4px; background: #fff; cursor: pointer; font-size: 0.75rem; font-weight: 700; color: var(--ama-text); font-family: inherit; transition: background .12s, color .12s; }
/* Active fills with the CATEGORY colour, not navy — selecting a pill used to
   discard the colour the border and swatch had been advertising. Falls back to
   navy for a category with no colour set. The ALL pill overrides this below.

   SPECIFICITY: the base class is repeated (.hmc__cat-pill.hmc__cat-pill--active,
   = 0-2-0) rather than used once (0-1-0). These pills are <button>s rendered
   inside an Elementor container, where the parent theme / ElementsKit style
   buttons with container-scoped selectors such as
   `.elementor-widget-container button:hover` (0-2-1) — those outrank a single
   class and were repainting the pill. Repeating the class beats them without
   resorting to !important, which would be unoverridable from the Customizer.

   The RESTING rule needs the same treatment, and for a while did not have it:
   the active and hover states were doubled while the base stayed at 0-1-0, so
   Elementor's own kit rule

       .elementor-kit-25 button { background: var(--e-global-color-accent) }   (0-1-1)

   won, and every unselected pill rendered in Accent red instead of white with
   --ama-text. It still passed contrast, so nothing flagged it — the tell was
   that the ALL pill looked right (its rule is already doubled) while its
   neighbours did not, and that --cat-color was being ignored entirely. */
.hmc__cat-pill.hmc__cat-pill--active { background: var(--cat-color, var(--ama-navy)); color: var(--cat-ink, #fff); border-color: var(--cat-color, var(--ama-navy)); }
/* Hover/focus were never defined here, so whatever the parent theme does to
   button:hover leaked straight through. Pin them to the pill's own colours. */
.hmc__cat-pill:hover, .hmc__cat-pill:focus { background: #fff; color: var(--ama-text); border-color: var(--cat-color, var(--ama-navy)); }
.hmc__cat-pill.hmc__cat-pill--active:hover, .hmc__cat-pill.hmc__cat-pill--active:focus { background: var(--cat-color, var(--ama-navy)); color: var(--cat-ink, #fff); border-color: var(--cat-color, var(--ama-navy)); }
/* Swatch shows the CATEGORY colour. (It previously used currentColor, i.e. the
   pill's text colour, so it never reflected the category.) On the active pill
   the filled background would swallow the swatch, so it goes white there. */
.hmc__cat-pill-swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--cat-color, var(--ama-navy)); flex-shrink: 0; }
.hmc__cat-pill.hmc__cat-pill--active .hmc__cat-pill-swatch { background: #fff; }

/* Body: grid + side panel */
/* Right panel width is set per-widget via the inline --hmc-panel-w custom
   property (Elementor "Right Panel Width" control); falls back to 35%. Collapses
   to a single column below 1024px (see media query). */
.hmc__body { display: grid; grid-template-columns: 1fr var(--hmc-panel-w, 35%); gap: 16px; align-items: start; }

/* Calendar grid — FIX #3: prevent cells from overflowing their column */
.hmc__grid-wrap { border: 1px solid #e8e2d9; border-radius: 6px; overflow: hidden; background: #fff; width: 100%; min-width: 0; }
.hmc__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); width: 100%; }
/* role="row" wrappers are ARIA-only; display:contents keeps them out of the visual grid */
.hmc__grid > [role="row"] { display: contents; }
.hmc__dh { padding: 8px 4px; text-align: center; font-size: 0.75rem; font-weight: 700; color: var(--ama-muted); background: #faf8f5; border-bottom: 1px solid #e8e2d9; min-width: 0; overflow: hidden; }
.hmc__cell { min-height: 90px; padding: 6px 4px; border-right: 1px solid #f0ece6; border-bottom: 1px solid #f0ece6; vertical-align: top; cursor: pointer; transition: background .1s; min-width: 0; }
.hmc__cell:nth-child(7n) { border-right: none; }
.hmc__cell:hover { background: #faf8f5; }
.hmc__cell--blank { background: #fafafa; cursor: default; }
.hmc__cell--today { background: #fff8f0; }
.hmc__cell--selected { background: #e8edf5; border: 1px solid var(--ama-navy); }
.hmc__cell--wknd { background: #f9f7f4; }
.hmc__cell-num { font-size: 0.8125rem; font-weight: 700; color: var(--ama-text); display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
/* WCAG: #bfb8af on the light cell was ~1.8:1 (fails AA). --ama-muted (#534c45)
   is ~4.7:1 and passes AA for this small label. */
.hmc__wknd-label { font-size: 0.75rem; font-weight: 700; color: var(--ama-muted, #534c45); letter-spacing: .06em; }

/* Event pills */
.hmc__pill { display: flex; flex-wrap: wrap; gap: 1px 4px; align-items: flex-start; border-radius: 3px; padding: 2px 5px; margin-bottom: 2px; color: var(--cat-ink, #fff); font-size: 0.75rem; line-height: 1.3; cursor: pointer; overflow: hidden; background: var(--cat-color, var(--ama-navy)); }
.hmc__pill--multi { background: #fff !important; border: 2px solid var(--cat-color, var(--ama-navy)); color: var(--cat-text, var(--cat-color, var(--ama-navy))) !important; }
/* Events beyond the per-day cap are in the DOM but hidden, so a category filter
   can reveal one that sits 4th or lower. JS sets inline display when filtering. */
.hmc__pill--extra { display: none; }
.hmc__pill-time { font-weight: 700; flex-shrink: 0; }
/* Wraps rather than truncating, but with three guards — the naive version of
   this shattered titles down one character per line in narrow columns.

   `overflow-wrap: break-word`, NOT `anywhere`: they look identical until the
   element is a flex item, because `anywhere` also drops the min-content width
   to a single character, so flex is free to squeeze the label to 1ch. That is
   what produced the "C o m p r e h" column.

   `min-width: 8ch` stops flex shrinking it below a readable measure at all;
   when that no longer fits, the pill's flex-wrap drops the label onto its own
   line under the time instead of crushing it.

   Clamped to two lines so a cell with three events cannot grow without bound —
   titles are already capped at four words in PHP, so two lines is nearly always
   the whole title. */
.hmc__pill-label {
  flex: 1 1 auto;
  min-width: 8ch;
  white-space: normal;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hmc__overflow { font-size: 0.75rem; color: var(--ama-navy); font-weight: 700; cursor: pointer; margin-top: 2px; }
.hmc__overflow:hover { text-decoration: underline; }

/* Side panel */
.hmc__panel { background: #fff; border: 1px solid #e8e2d9; border-radius: 6px; overflow: hidden; position: sticky; top: 20px; }
.hmc__panel-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: #faf8f5; border-bottom: 1px solid #e8e2d9; font-size: 0.75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ama-muted); }
.hmc__panel-date { padding: 12px 14px; border-bottom: 1px solid #e8e2d9; display: flex; align-items: center; gap: 10px; }
.hmc__panel-date-num { font-size: clamp(1.8rem, calc(1.2545rem + 2.3273vw), 3rem); font-weight: 900; color: var(--ama-text); line-height: 1; }
/* Month stacked ABOVE weekday, beside the numeral. */
.hmc__panel-date-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.hmc__panel-date-month { font-size: 0.75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ama-muted); }
.hmc__panel-date-day { font-size: 1.125rem; font-style: italic; color: var(--ama-maroon); }
/* Count keeps the small-caps treatment it had in the strip that used to sit
   above; margin-left:auto pins it to the right of the same row. */
.hmc__panel-date .hmc__panel-count {
    margin-left: auto; flex-shrink: 0; align-self: center;
    font-size: 0.75rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ama-muted); white-space: nowrap;
}
/* Scrollable panel: the HTML element must have tabindex="0" for keyboard scroll access (WCAG 2.1.1) */
.hmc__panel-events { padding: 10px 14px; max-height: 400px; overflow-y: auto; }
.hmc__panel-event { padding: 12px 0; border-bottom: 1px solid #f0ece6; }
.hmc__panel-event:last-child { border-bottom: none; }
.hmc__panel-cat { font-size: 0.75rem; font-weight: 700; letter-spacing: .08em; margin-bottom: 3px; color: var(--cat-text, var(--cat-color, var(--ama-navy))); }
.hmc__panel-title { font-size: 0.875rem; font-weight: 700; color: var(--ama-text); margin-bottom: 3px; }
.hmc__panel-time { font-size: 0.75rem; color: #5c5449; margin-bottom: 6px; }
.hmc__panel-link { font-size: 0.75rem; font-weight: 700; color: var(--ama-navy); text-decoration: none; }
.hmc__panel-link:hover { text-decoration: none; }
.hmc__panel-footer { padding: 10px 14px; font-size: 0.75rem; color: var(--ama-muted); background: #faf8f5; border-top: 1px solid #e8e2d9; }
.hmc__panel-empty { color: var(--ama-muted); font-style: italic; font-size: 0.8125rem; }

/* Loading state shown while a day's events are fetched (see loadPanel() in
   ama-mec-views.js). Gives users clear feedback that a tap registered. */
.hmc__panel-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px 14px; text-align: center; }
.hmc__panel-loading p { margin: 0; font-size: 0.8125rem; color: var(--ama-muted); line-height: 1.5; }
.hmc__panel-loading strong { color: var(--ama-text); font-weight: 700; }
.hmc__spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #e8e2d9; border-top-color: var(--ama-maroon, #7a2e2e); animation: hmc-spin 0.7s linear infinite; }
@keyframes hmc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .hmc__spinner { animation-duration: 1.6s; }
}

/* ── Add-to-calendar / Subscribe dropdowns (native <details>) ───────────── */
.hmc__cal-menu { position: relative; display: inline-block; }
.hmc__cal-menu > summary { list-style: none; cursor: pointer; user-select: none; }
.hmc__cal-menu > summary::-webkit-details-marker { display: none; }
.hmc__cal-menu > summary::marker { content: ''; }

/* Header "Subscribe" trigger — same look as the old subscribe button. */
.hmc__cal-menu-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border: 1px solid #e8e2d9; border-radius: 6px;
    background: #fff; color: var(--ama-navy, #1a2744);
    font-size: 0.8125rem; font-weight: 700; line-height: 1;
}
.hmc__cal-menu-btn:hover { background: #faf8f5; }
.hmc__cal-menu-caret { font-size: 0.75rem; transition: transform .15s ease; }
.hmc__cal-menu[open] .hmc__cal-menu-caret { transform: rotate(180deg); }

/* Per-event "Add to calendar" trigger — matches the panel action links. */
.hmc__panel-link--cal { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }

/* Shared dropdown list. */
.hmc__cal-menu-list {
    position: absolute; z-index: 30; top: calc(100% + 4px); left: 0;
    min-width: 180px; padding: 6px; display: flex; flex-direction: column;
    background: #fff; border: 1px solid #e8e2d9; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
/* The per-event menu lives inside the panel's scrollable area, so flow it
   inline (not absolute) to avoid being clipped by overflow. */
.hmc__cal-menu--add { display: block; }
.hmc__cal-menu--add .hmc__cal-menu-list {
    position: static; box-shadow: none; margin-top: 4px; min-width: 0;
    border-color: #f0ece6;
}
.hmc__cal-menu-list a {
    display: block; padding: 8px 10px; border-radius: 5px;
    font-size: 0.8125rem; font-weight: 600; color: var(--ama-text, #1e2433); text-decoration: none;
}
.hmc__cal-menu-list a:hover { background: #faf8f5; color: var(--ama-maroon, #7a2e2e); }
@media (prefers-reduced-motion: reduce) {
    .hmc__cal-menu-caret { transition: none; }
}

/* Loading overlay */
.hmc__loading { position: relative; }
.hmc__loading::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.6); border-radius: 6px; }

/* ══════════════════════════════════════════════════════════════
   FUTURISTIC LIST VIEW  (.hml)
   ══════════════════════════════════════════════════════════════ */
/* Own low, isolated stacking context so the sticky .hml__thead (z-index:10) and
   the calendar's sticky .hmc__panel can't paint OVER the ElementsKit header/menu.
   Sticky positioning still works inside; its z-index is just scoped to this layer. */
.hml, .hmc { position: relative; z-index: 0; isolation: isolate; }
.hml { max-width: 100%; font-family: inherit; }
/* nowrap, not wrap. A wrapping row decides by the items' natural widths, so a
   long breakdown still sent the whole rail to line two even once it was allowed
   to shrink — wrapping is considered before shrinking, not after. Held on one
   line, the title keeps what it needs, the gap follows, and the breakdown takes
   whatever is left and runs to two or three lines inside it. Below 900px the
   header stacks anyway (see the media query), so nothing here needs to wrap. */
.hml__header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: nowrap; gap: 24px; margin-bottom: 28px; }
.hml__eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ama-muted); margin-bottom: 4px; }
.hml__title { font-size: clamp(1.8rem, calc(1.2545rem + 2.3273vw), 3rem); font-weight: 900; line-height: 1.1; margin: 0; color: var(--ama-text); }
.hml__title span { font-style: normal; }
.hml__title em { font-style: italic; color: var(--ama-maroon); }
.hml__header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
/* A long breakdown — "EXIM = Export-Import Related Programmes · OIA = ODHAV
   INDUSTRIES ASSOCIATION · …" — used to make this rail wider than the gap left
   beside the title, and the whole rail, pills and all, went to its own line.
   Alone there it sat left with its pills right-aligned inside its own width,
   which reads as pills floating in the middle of nowhere.
   The small basis and min-width:0 let the rail shrink and the breakdown wrap
   within it; the nowrap above is what stops the row relegating it in the first
   place. Together they keep title, breakdown and pills on one line however long
   the category names get. */
.hml__header-left  { flex: 0 1 auto; min-width: 0; }
.hml__header-right { flex: 1 1 240px; min-width: 0; }
.hml__header-right .hmc__count-breakdown { text-align: right; }
/* ── List: CARNIVAL image filter strip ──────────────────────────────
   Each PNG is a FINISHED tile — its colour, icon and wording are part of the
   artwork — so the button draws nothing of its own: no background, no padding,
   no caption. Anything it added would sit behind or beside someone else's
   design. All the button contributes is the hit area and the selected state.

   Ten tiles have to stay on ONE line at every width, so each is flex: 1 1 0
   with min-width: 0 and the image scales to its column. height: auto with the
   intrinsic size on the <img> keeps the 233:256 aspect while the row reserves
   its height up front. */
.hml__icon-filter { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 24px; }
/* Repeated class throughout. The Elementor kit styles BARE buttons —
   `.elementor-kit-25 button, ... { background-color: ...; padding: ...; }` at
   (0,1,1) — which outranks a single `.hml__icon-pill` at (0,1,0) and painted
   the kit's accent behind every tile. Doubling the class takes it to (0,2,0),
   which wins without !important and without touching the kit. Every property
   the kit sets on a button is reset here, not just the background: a kit whose
   buttons later gain padding or a border would otherwise reintroduce the same
   frame around the artwork. */
.hml__icon-pill.hml__icon-pill {
    flex: 1 1 0; min-width: 0;
    display: block;
    padding: 0; margin: 0; border: 0; outline: 0;
    background: none; background-color: transparent;
    box-shadow: none; color: inherit;
    font: inherit; letter-spacing: normal; text-transform: none; line-height: 0;
    cursor: pointer;
    border-radius: 8px;
    transition: transform .12s ease, filter .12s ease;
}
/* Three repeats here, not two: the kit's own hover rule is
   `.elementor-kit-25 button:hover` at (0,2,1), which would TIE a doubled
   class and then win or lose on load order — i.e. on which stylesheet the
   page happened to print last. (0,3,1) settles it outright. */
.hml__icon-pill.hml__icon-pill.hml__icon-pill:hover,
.hml__icon-pill.hml__icon-pill.hml__icon-pill:focus,
.hml__icon-pill.hml__icon-pill.hml__icon-pill:active {
    background: none; background-color: transparent; box-shadow: none; border: 0; color: inherit;
}
/* Repeated class: Elementor's `.elementor img { height: auto }` outranks a
   single-class rule, so the width rule is stated at the same strength. */
.hml__icon-filter .hml__icon-pill-img.hml__icon-pill-img {
    display: block; width: 100%; height: auto; border-radius: 8px;
}
.hml__icon-pill.hml__icon-pill:hover,
.hml__icon-pill.hml__icon-pill:focus-visible { filter: brightness(1.06); }
/* Selected state is a ring, not a tint: dimming the unpicked tiles would mute
   artwork whose colour is the whole point of the strip. */
.hml__icon-pill.hml__icon-pill.hml__cat-pill--active {
    transform: translateY(-3px);
    filter: drop-shadow(0 3px 6px rgba(13, 21, 36, .35));
}
.hml__icon-pill.hml__icon-pill:focus-visible { outline: 3px solid var(--ama-text); outline-offset: 3px; }

@media (max-width: 1024px) { .hml__icon-filter { gap: 5px; } }
@media (max-width: 620px) {
    .hml__icon-filter { gap: 3px; margin-bottom: 18px; }
    .hml__icon-pill.hml__icon-pill,
    .hml__icon-filter .hml__icon-pill-img.hml__icon-pill-img { border-radius: 5px; }
}
@media (prefers-reduced-motion: reduce) {
    .hml__icon-pill.hml__icon-pill { transition: none; }
    .hml__icon-pill.hml__icon-pill.hml__cat-pill--active { transform: none; }
}

.hml__cat-pills-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.hml__cat-pill.hml__cat-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 2px solid var(--cat-color, var(--ama-navy)); border-radius: 4px; background: #fff; cursor: pointer; font-size: 0.75rem; font-weight: 700; color: var(--ama-text); font-family: inherit; transition: background .12s, color .12s; }
/* Same as the calendar pills above, including the repeated-class specificity —
   see the note there for why a single class wasn't enough. */
.hml__cat-pill.hml__cat-pill--active { background: var(--cat-color, var(--ama-navy)); color: var(--cat-ink, #fff); border-color: var(--cat-color, var(--ama-navy)); }
.hml__cat-pill:hover, .hml__cat-pill:focus { background: #fff; color: var(--ama-text); border-color: var(--cat-color, var(--ama-navy)); }
.hml__cat-pill.hml__cat-pill--active:hover, .hml__cat-pill.hml__cat-pill--active:focus { background: var(--cat-color, var(--ama-navy)); color: var(--cat-ink, #fff); border-color: var(--cat-color, var(--ama-navy)); }
.hml__cat-swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--cat-color, var(--ama-navy)); flex-shrink: 0; }
.hml__cat-pill.hml__cat-pill--active .hml__cat-swatch { background: #fff; }
/* ALL pill — calendar + list. Stays one class above the rules yet again, so the
   neutral ALL treatment keeps winning over the category fill. */
.hmc__cat-pill.hmc__cat-pill--all,
.hml__cat-pill.hml__pill--all { background: #f5f0e8; border-color: var(--ama-border); color: var(--ama-text); }
.hmc__cat-pill.hmc__cat-pill--all.hmc__cat-pill--active,
.hmc__cat-pill.hmc__cat-pill--all.hmc__cat-pill--active:hover,
.hml__cat-pill.hml__pill--all.hml__cat-pill--active,
.hml__cat-pill.hml__pill--all.hml__cat-pill--active:hover { background: var(--ama-text); color: #fff; border-color: var(--ama-text); }

/* Table */
.hml__table-wrap { overflow-x: auto; border: 1px solid #e8e2d9; border-radius: 6px; }
.hml__table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.hml__thead { position: sticky; top: 0; z-index: 10; }
/* Hello Elementor's reset.css carries `table td, table th { border: 1px solid
   hsla(0,0%,50%,.502) }`. Two type selectors lose to one class, so each rule
   below that sets ONE side wins for that side and leaves Hello's grey on the
   other three. In the desktop table that stays hidden: border-collapse merges
   each cell's edges into the row rule beside it. The phone view turns the table
   into blocks, border-collapse stops applying, and every stacked cell paints
   its own four grey sides — a box around each row of the card.
   Cleared once here, ahead of the rules that draw the borders these views
   actually want, so those still land. */
.hml__th, .hml__td { border: 0; }
.hml__th { padding: 12px 16px; text-align: left; font-size: 0.75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ama-muted); background: #faf8f5; border-bottom: 2px solid #e8e2d9; white-space: nowrap; }
.hml__th--action { text-align: right; }
.hml__tr { border-bottom: 1px solid #f0ece6; transition: background .1s; }
.hml__tr:last-child { border-bottom: none; }
.hml__tr:hover { background: #faf8f5; }
.hml__td { padding: 14px 16px; vertical-align: middle; color: #2c2c2c; }
.hml__td--date { white-space: normal; font-weight: 600; color: var(--ama-text); }
.hml__dow-badge { display: inline-block; padding: 2px 5px; border: 1px solid var(--ama-border); border-radius: 3px; font-size: 0.75rem; font-weight: 700; color: #5c5449; margin-right: 5px; vertical-align: middle; letter-spacing: .04em; }
.hml__date-val { font-size: 0.8125rem; font-weight: 600; color: var(--ama-text); display: inline; }
.hml__time-val { display: block; font-size: 0.75rem; color: var(--ama-muted); margin-top: 3px; }
.hml__cat-badge { display: inline-block; padding: 3px 8px; border: 1.5px solid var(--cat-color, var(--ama-navy)); border-radius: 3px; font-size: 0.75rem; font-weight: 700; letter-spacing: .06em; color: var(--cat-text, var(--cat-color, var(--ama-navy))); margin-bottom: 2px; }
/* Programme cell: flex column stacks tags above link */
.hml__prog-cell { display: flex; flex-direction: column; gap: 4px; }

/* HADNow-style coloured tag pills shown above the programme title */
.hml__prog-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.hml__prog-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    line-height: 1.5;
}

/* Tag strip in the calendar side panel */
.hmc__panel-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; }

/* AMA theme status tag modifiers */
.hml__prog-tag--cancelled  { background: #7c1d1d !important; }              /* dark red */
.hml__prog-tag--sold-out   { background: #991b1b !important; }              /* red */
.hml__prog-tag--ongoing    { background: #166534 !important; }              /* green */
.hml__prog-tag--few        { background: #b45309 !important; }              /* orange — last few tickets */
.hml__prog-tag--reg-closed { background: #92400e !important; }              /* amber */
.hml__prog-tag--past       { background: var(--ama-muted) !important; }     /* grey */
.hml__prog-tag--online     { background: #1d4ed8 !important; }              /* blue */

/* Legacy: outlined label above title (kept for back-compat) */
.hml__prog-cat-label {
    display: block;
    margin-bottom: 4px;
    padding: 2px 7px;
    border: 1.5px solid currentColor;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    line-height: 1.4;
    width: fit-content;
}
.hml__prog-link { font-weight: 600; color: var(--ama-text); text-decoration: none; font-size: 0.875rem; }
.hml__prog-link:hover { color: var(--ama-navy); text-decoration: underline; }
.hml__td--action { text-align: right; white-space: nowrap; }
/* Prefixed with .hml for the same reason the :hover rules below are: at a bare
   (0,1,0) this lost `text-decoration: none` to .elementor-kit-N a (0,1,1), so
   the buttons rendered underlined at rest and lost the underline on hover — the
   hover rules had been given the prefix, the base rule had not.

   vertical-align: middle is load-bearing now these are inline-flex. An
   inline-flex box aligns on the baseline of its FIRST flex item, and the
   brochure button's first item is an SVG, which has no baseline — so the
   browser falls back to its bottom margin edge and that button sat lower than
   the text-only "Register Now" beside it. Aligning both on the middle instead
   makes the row independent of whether a button happens to start with an
   icon. */
.hml .hml__action-btn { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; vertical-align: middle; padding: 6px 12px; border-radius: 3px; font-size: 0.75rem; font-weight: 700; text-decoration: none; margin-left: 6px; transition: opacity .12s, background .12s, color .12s; }
.hml__action-btn--book { border: 1px solid var(--ama-navy); color: var(--ama-navy); }
.hml__action-btn--view { color: var(--ama-maroon); font-weight: 800; border: 1px solid var(--ama-maroon); }
/* FIX #5: brochure / file attachment button */
.hml__action-btn--doc { border: 1px solid var(--ama-border); color: #5c5449; }
/* Hover — prefixed with .hml to reach specificity (0,3,0) and beat
   .elementor-kit-N a:hover (0,2,1) without needing !important */
.hml .hml__action-btn--book:hover { background: var(--ama-navy);   color: #fff; text-decoration: none; }
.hml .hml__action-btn--view:hover { background: var(--ama-maroon); color: #fff; text-decoration: none; }
.hml .hml__action-btn--doc:hover  { border-color: var(--ama-navy); color: var(--ama-navy); text-decoration: none; }
/* The document glyph, sized against the label and inheriting its colour. */
/* inline-flex on the button keeps the glyph beside its label; as an inline SVG
   in an inline-block it dropped onto its own line wherever white-space:nowrap
   was not inherited — the card layout, in practice. The button owns the gap. */
.hml__action-icon { width: 11px; height: 13px; flex-shrink: 0; }
/* Status action states */
.hml__action-btn--closed { border: 1px solid var(--ama-border); color: var(--ama-muted); cursor: default; }
.hml__action-btn--sold   { border: 1px solid #fca5a5;           color: #991b1b;          cursor: default; }
.hml__action-btn--ongoing { border: 1px solid #86efac;          color: #166534;           }
/* Actions row: Brochure + View Event side-by-side */
.hmc__panel-actions {
    display:   flex;
    gap:       6px;
    margin-top: 8px;
}
.hmc__panel-actions .hmc__panel-link {
    flex:         1;
    text-align:   center;
    padding:      5px 4px;
    border:       1px solid var(--ama-navy);
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight:  700;
    white-space:  nowrap;
    overflow:     hidden;
    text-overflow: ellipsis;
}
.hmc__panel-link--doc {
    color:            var(--ama-muted);
    border-color:     var(--ama-border);
    background-color: transparent;
}
/* When there is no Brochure, View Event takes the full width */
.hmc__panel-link--full { flex: 1 0 100%; }
/* Status variants for calendar panel action links */
.hmc__panel-link--book       { color: var(--ama-navy);   border-color: var(--ama-navy); }
.hmc__panel-link--view       { color: var(--ama-maroon); border-color: var(--ama-maroon); }
.hmc__panel-link--reg-closed { color: #92400e; border-color: #fcd34d; }
.hmc__panel-link--closed     { color: var(--ama-muted); border-color: var(--ama-border); cursor: default; pointer-events: none; }
/* Reg closed list button */
.hml__action-btn--reg-closed { border: 1px solid #fcd34d; color: #92400e; }
/* Hover — prefixed with .hmc / .hml to reach specificity (0,3,0) and beat
   .elementor-kit-N a:hover (0,2,1) without needing !important */
.hmc .hmc__panel-link--book:hover       { background: var(--ama-navy);   color: #fff; text-decoration: none; }
.hmc .hmc__panel-link--view:hover       { background: var(--ama-maroon); color: #fff; text-decoration: none; }
.hmc .hmc__panel-link--doc:hover        { color: var(--ama-navy); border-color: var(--ama-navy); text-decoration: none; }
.hmc .hmc__panel-link--reg-closed:hover { background: #92400e; color: #fff; text-decoration: none; }
.hml .hml__action-btn--reg-closed:hover { background: #92400e; color: #fff; text-decoration: none; }

/* ── Responsive ───────────────────────────────────────────── */
/* ── List: Subscribe to calendar ──────────────────────────── */
.hml__subscribe { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.hml a.hml__subscribe-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 6px;
    border: 1px solid var(--ama-navy); background: #fff; color: var(--ama-navy);
    font-size: 0.8125rem; font-weight: 700; text-decoration: none;
    transition: background .12s, color .12s;
}
.hml a.hml__subscribe-btn:hover,
.hml a.hml__subscribe-btn:focus { background: var(--ama-navy); color: #fff; }
.hml a.hml__subscribe-btn:focus-visible { outline: 3px solid var(--ama-navy); outline-offset: 2px; }
.hml a.hml__subscribe-btn svg { flex: 0 0 auto; }
/* Calendar variant — same look. */
.hmc__subscribe { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.hmc a.hmc__subscribe-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 6px;
    border: 1px solid var(--ama-navy); background: #fff; color: var(--ama-navy);
    font-size: 0.8125rem; font-weight: 700; text-decoration: none;
    transition: background .12s, color .12s;
}
.hmc a.hmc__subscribe-btn:hover,
.hmc a.hmc__subscribe-btn:focus { background: var(--ama-navy); color: #fff; }
.hmc a.hmc__subscribe-btn:focus-visible { outline: 3px solid var(--ama-navy); outline-offset: 2px; }
.hmc a.hmc__subscribe-btn svg { flex: 0 0 auto; }

/* ── List: Load More ──────────────────────────────────────── */
.hml__more-wrap { display: flex; justify-content: center; padding: 18px 0 4px; }
.hml .hml__load-more {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px; border-radius: 6px; cursor: pointer;
    font: inherit; font-size: 0.8125rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: #fff; background: var(--ama-navy); border: 1px solid var(--ama-navy);
    transition: opacity .12s ease;
}
.hml .hml__load-more:hover { opacity: .88; }
.hml .hml__load-more:focus-visible { outline: 3px solid var(--ama-navy); outline-offset: 2px; }
.hml .hml__load-more[disabled] { cursor: wait; opacity: .6; }
.hml__load-more-rest {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; padding: 1px 6px; border-radius: 999px;
    background: rgba(255, 255, 255, .18); font-size: 0.75rem;
}
.hml .hml__load-more.is-loading .hml__load-more-txt::after {
    content: "…"; margin-left: 2px;
}

@media (max-width: 1024px) {
    .hmc__body { grid-template-columns: 1fr; }
    .hmc__panel { position: static; margin-top: 16px; }
}
@media (max-width: 700px) {
    .hmc__month-title { font-size: 2rem; }
    .hmc__header { flex-direction: column; gap: 12px; }
    .hmc__header-right { text-align: left; }
    .hmc__toolbar { flex-direction: column; align-items: flex-start; }
    .hmc__cell { min-height: 52px; padding: 3px; }
    .hmc__cell-num { font-size: 0.75rem; }
    .hmc__wknd-label { display: none; }
    .hmc__pill { font-size: 0.75rem; padding: 1px 3px; }
    .hmc__pill-time { display: none; }
}
@media (max-width: 480px) {
    .hmc__dh { font-size: 0.75rem; padding: 4px 2px; }
    .hmc__cell { padding: 2px; }
}
/* Venue names — one per line (replaces the old <br> separators). */
.hml__venue { display: block; }
.hml__venue + .hml__venue { margin-top: 2px; }

@media (max-width: 900px) {
    .hml__title { font-size: 1.75rem; }
    .hml__header { flex-direction: column; gap: 12px; }
    /* Stacked: the rail is full width, so the shrink basis above must be
       cleared — on a column parent that 280px would size its HEIGHT. */
    .hml__header-right { flex: 0 1 auto; align-items: flex-start; }
    .hml__header-right .hmc__count-breakdown { text-align: left; }
    .hml__cat-pills-row { justify-content: flex-start; }
    .hml__th--venue, .hml__td--venue { display: none; }
}
@media (max-width: 600px) {
    /* Table → stacked cards. Each event becomes ONE bordered card whose cells are
       inline "LABEL : value" rows, instead of a scrolling table. */
    .hml__table-wrap { overflow: visible; border: none; border-radius: 0; }
    .hml__table { display: block; font-size: 0.875rem; }
    .hml__thead { display: none; }
    .hml__table tbody { display: block; }

    .hml__tr {
        display: block;
        border: 1px solid var(--ama-border);
        border-radius: 10px;
        margin-bottom: 12px;
        background: #fff;
        overflow: hidden;
    }
    .hml__tr:last-child { margin-bottom: 0; }
    .hml__tr:hover { background: #fff; }

    /* Each cell = a label column + a value that flows/wraps beside it. */
    .hml__td {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 14px;
        border-bottom: 1px solid #f0ece6;
    }
    .hml__tr .hml__td:last-child { border-bottom: none; }
    .hml__td::before {
        content: attr(data-label);
        flex: 0 0 68px;
        margin: 0;
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--ama-muted);
        text-transform: uppercase;
        letter-spacing: .06em;
        line-height: 1.7;
    }

    /* Date: badge + date + time all inline on the value side. */
    .hml__td--date { flex-wrap: wrap; }
    .hml__td--date .hml__dow-badge,
    .hml__td--date .hml__date-val,
    .hml__td--date .hml__time-val { display: inline; }

    /* Category / Action: chips & buttons wrap under the label if needed. */
    .hml__td--cat,
    .hml__td--action { flex-wrap: wrap; }
    .hml__td--action { text-align: left; white-space: normal; }
    .hml__td--action .hml__action-btn { padding: 8px 14px; font-size: 0.8125rem; }

    /* Venue: hidden in the cramped tablet TABLE (≤900px), but there's room for it
       as its own row in the card view — re-show it (overrides the ≤900px hide). */
    .hml__td--venue { display: flex; }
    .hml__td--venue .hml__venue-list { flex: 1; min-width: 0; }
    .hml__th--venue { display: none; }

    .hml__title { font-size: 1.375rem; }
}

/* ── WCAG 2.2 AA focus rings ──────────────────────────────── */
.hmc__nav-btn:focus-visible,
.hmc__cat-pill:focus-visible,
.hml__cat-pill:focus-visible,
.hmc__cell:focus-visible,
.hml__action-btn:focus-visible {
    outline: 3px solid var(--ama-navy);
    outline-offset: 3px;
    border-radius: 3px;
}

/* ── WCAG minimum target sizes ────────────────────────────── */
.hmc__cell { min-height: 44px; }
.hmc__nav-btn, .hmc__cat-pill, .hml__cat-pill { min-height: 44px; } /* WCAG 2.5.8 touch target */

/* ── Label legend (below filter pills, shown when use_label + show_legend) ── */
.ama-mec-label-legend { display: none; }
.ama-mec-label-legend--visible {
    display:     flex;
    flex-wrap:   wrap;
    gap:         4px 18px;
    padding:     6px 0 0;
    font-size: 0.75rem;
    color:       var(--ama-muted);
    line-height: 1.4;
}
.ama-mec-label-legend__item {
    display:     inline-flex;
    align-items: center;
    gap:         4px;
    white-space: nowrap;
}
.ama-mec-label-legend__item strong {
    font-weight: 700;
    color:       var(--ama-text);
}

/* ── Focus-visible for action buttons (WCAG 2.2 §2.4.11) ─────────────────── */
.hml__action-btn--book:focus-visible,
.hml__action-btn--view:focus-visible,
.hml__action-btn--doc:focus-visible,
.hmc__panel-link:focus-visible {
    outline:        3px solid var(--ama-navy);
    outline-offset: 3px;
    border-radius:  3px;
}

/* ── Respect user motion preferences (WCAG 2.3.3) ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:       0.01ms !important;
        animation-iteration-count: 1     !important;
        transition-duration:      0.01ms !important;
        scroll-behavior:          auto   !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   BASIC LIST (.hbl) — stripped-back row view.
   Lives in this file, not its own, because it shares the :root tokens at the
   top AND the per-category .ama-cat-{slug}{--cat-color} rules that PHP attaches
   to this stylesheet's handle via wp_add_inline_style. A separate handle would
   render every badge in the fallback colour.
   ══════════════════════════════════════════════════════════════════════════ */

.hbl { width: 100%; }
.hbl__empty { color: var(--ama-muted, #534c45); font-style: italic; margin: 0; padding: 18px 0; }

.hbl__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 18px 4px;
    border-bottom: 1px solid var(--ama-border, #e8e2d9);
}
.hbl__row:last-child { border-bottom: 0; }

/* ── Date badges ───────────────────────────────────────────────────────── */

.hbl__dates { display: flex; gap: 8px; flex-shrink: 0; }
.hbl__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 8px 10px;
    border-radius: 4px;
    /* Category colour, exactly as the calendar/table views do it. Overridden to
       a single brand colour by .hbl--fixed-colour below. */
    background: var(--cat-color, var(--ama-maroon, #7a2e2e));
    color: var(--cat-ink, #fff);
    line-height: 1.05;
}
/* Fixed-colour mode paints the brand maroon regardless of category, so the
   category's ink no longer applies — white is always correct on it. */
.hbl--fixed-colour .hbl__date { background: var(--ama-maroon, #7a2e2e); color: #fff; }
.hbl__date--range { min-width: 88px; }
.hbl__date--range .hbl__dow { font-size: 0.75rem; letter-spacing: .05em; }

.hbl__dow { font-size: 0.75rem; font-weight: 700; letter-spacing: .08em; opacity: .85; margin-bottom: 3px; }
.hbl__day { font-size: 1.375rem; font-weight: 900; letter-spacing: -.01em; white-space: nowrap; }
.hbl__mon { font-size: 0.75rem; font-weight: 700; letter-spacing: .1em; margin-top: 2px; }

/* ── Title, chips, meta ────────────────────────────────────────────────── */

.hbl__main { min-width: 0; } /* lets long titles wrap instead of blowing out the grid */

.hbl__title {
    margin: 0 0 5px;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
    color: var(--ama-text, #1f2430);
}
.hbl__title a { color: inherit; text-decoration: none; }
.hbl__title a:hover, .hbl__title a:focus-visible { text-decoration: underline; }

.hbl__chip {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    padding: 3px 8px;
    border-radius: 3px;
    background: var(--ama-maroon, #7a2e2e);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.hbl__chip--past,
.hbl__chip--reg-closed { background: #534c45; }
.hbl__chip--sold-out,
.hbl__chip--cancelled  { background: #b91c1c; }
.hbl__chip--few        { background: #b45309; }
.hbl__chip--online     { background: var(--ama-navy, #1a2744); }
/* A label chip's colour comes from the generated .ama-lbl-{id} rule, which
   carries !important (see AMA_MEC_Views::generate_label_styles). The .hbl__chip
   background above is only the fallback for a label with no colour set. */

/* Filter pill row — reuses .hml__cat-pill styling; this just spaces it. */
.hbl__filters { margin-bottom: 14px; justify-content: flex-start; }

/* Load more — the button itself reuses .hml__load-more styling. */
.hbl__more-wrap { display: flex; justify-content: center; margin-top: 18px; }

.hbl__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--ama-muted, #534c45);
}
.hbl__meta-item { display: inline-flex; align-items: center; gap: 5px; }
/* Separator drawn between items only — no trailing pipe when the last optional
   item is switched off. */
.hbl__meta-item + .hbl__meta-item::before { content: "|"; margin-right: 6px; opacity: .5; }
.hbl__icon { flex-shrink: 0; }
/* The PDF mark carries its own filled label block, so nudge it to sit on the
   text baseline rather than centred like the outline icons. */
.hbl__icon--pdf { position: relative; top: 1px; }
/* The icon + label must sit on ONE line. These properties used to come from
   .hbl__meta-item, which the anchor carried directly; when the anchor moved
   inside a wrapper span (so the "|" separator stopped being part of the link)
   it lost them and the SVG wrapped onto its own line. */
.hbl__pdf {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    color: var(--ama-maroon, #7a2e2e);
    text-decoration: none;
}
.hbl__pdf:hover, .hbl__pdf:focus-visible { text-decoration: underline; }
.hbl__price { font-weight: 700; color: var(--ama-text, #1f2430); }

/* ── Action ────────────────────────────────────────────────────────────── */

/* Matches .hml__action-btn--book so the two views' buttons read as one control:
   outlined navy at rest, solid navy on hover. */
.hbl__btn {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--ama-navy);
    border-radius: 3px;
    background: transparent;
    color: var(--ama-navy);
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .12s, background .12s, color .12s;
}
/* Prefixed with .hbl to reach specificity (0,3,0) and beat
   .elementor-kit-N a:hover (0,2,1) without needing !important — the same reason
   the .hml rules below their block are written this way. */
.hbl .hbl__btn:hover,
.hbl .hbl__btn:focus-visible {
    background: var(--ama-navy);
    color: #fff;
    text-decoration: none;
}

/* ── List rows, Version 2 ──────────────────────────────────────────────── */
/* The same three columns as Version 1. What moves: the chips sit above the
   title instead of trailing it, and the brochure becomes a button beside the
   CTA instead of a link in the meta. The date badge is deliberately untouched —
   its per-category colour is the reason this arrangement lives in this view. */

.hbl__pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
}
/* Version 1 spaces each chip off the end of the title with a left margin; here
   the flex gap does that job, and the margin would only skew the first chip. */
.hbl__row--v2 .hbl__chip { margin-left: 0; }

/* Two buttons now, so they need a gap and somewhere to wrap. Right-aligned to
   keep the CTA against the same edge it occupies in Version 1. */
.hbl__row--v2 .hbl__action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* The brochure reads as the secondary of the pair: maroon, like the .hbl__pdf
   link it replaces, against the CTA's navy. */
.hbl__btn--doc {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-color: var(--ama-maroon, #7a2e2e);
    color: var(--ama-maroon, #7a2e2e);
}
/* Same .hbl prefix as the rule above it, for the same reason: it has to reach
   (0,3,0) to beat .elementor-kit-N a:hover without !important. */
.hbl .hbl__btn--doc:hover,
.hbl .hbl__btn--doc:focus-visible {
    background: var(--ama-maroon, #7a2e2e);
    color: #fff;
    text-decoration: none;
}

@media (max-width: 782px) {
    /* The row is already two columns at this width, with the action dropped
       under the title. Left-align the pair so the buttons start under the
       title rather than floating out to the right edge. */
    .hbl__row--v2 .hbl__action { justify-content: flex-start; }
}


/* ── Grid layout ───────────────────────────────────────────────────────── */
/* Card = four stacked rows: [date | time] · image · title · CTA.
   Column count comes from --hbl-cols (widget control, 2–4), set inline on .hbl. */

.hbl--grid .hbl__rows {
    display: grid;
    grid-template-columns: repeat(var(--hbl-cols, 3), minmax(0, 1fr));
    gap: 18px;
}

.hbl__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--ama-border, #e8e2d9);
    border-radius: 6px;
    background: #fff;
}

/* Row 1 — date badge left, time right. */
.hbl__card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.hbl__card-time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    /* Fluid, following the theme's clamp(min, calc(Arem + Bvw), max) convention:
       15px on a phone up to 17px on a wide desktop. */
    font-size: clamp(0.9375rem, calc(0.8886rem + 0.2174vw), 1.0625rem);
    font-weight: 700;
    color: var(--ama-muted, #534c45);
}

/* Row 2 — featured image, shown WHOLE.
   No aspect-ratio and no object-fit:cover: both crop, and a cropped programme
   brochure loses exactly the part that matters. The image keeps its natural
   proportions and the card grows to fit it.

   Cards in the same grid row still finish level, because grid items stretch by
   default and the title+CTA block below is pushed to the bottom — so a taller
   image in one card lifts the whole row, which is the behaviour asked for. */
.hbl__card-media { text-align: center; }

/* A card with no image: the placeholder GROWS to fill whatever height the
   tallest card in the row set, so it reaches the title exactly as a real image
   would. Without this the placeholder stopped at its 4:3 slot and left a band
   of white between it and the title.

   flex-grow resolves before auto margins, so this quietly disables the
   title's margin-top:auto for these cards — the placeholder has already taken
   the free space, and the title lands directly beneath it. Cards WITH an image
   never grow (that would stretch or gap the picture), so their title+CTA block
   is still pushed to the bottom as before. */
.hbl__card-media--blank { flex: 1 1 auto; display: flex; }
.hbl__card-media--blank .hbl__card-media--empty {
    flex: 1 1 auto;
    aspect-ratio: auto;      /* height now comes from the row, not a ratio */
    min-height: 160px;       /* floor, for a row of image-less cards */
}
.hbl__card-media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
}
.hbl__card-media--empty {
    display: block;
    width: 100%;
    /* No natural height to inherit, so give the placeholder one that reads as a
       comparable slot rather than collapsing to nothing. */
    aspect-ratio: 4 / 3;
    border-radius: 4px;
    background: repeating-linear-gradient(
        45deg,
        var(--ama-cream, #f5f0e8),
        var(--ama-cream, #f5f0e8) 10px,
        #fff 10px,
        #fff 20px
    );
    border: 1px dashed var(--ama-border, #e8e2d9);
}

/* Row 3 — title, centred under the image.
   margin-top:auto pushes the title AND the CTA under it to the bottom of the
   card as one block. With images now free to differ in height, this is what
   keeps titles and buttons level across a row instead of floating at whatever
   height each image happens to end. */
.hbl__card-title {
    margin: 0;
    margin-top: auto;
    text-align: center;
    font-size: 0.9375rem;
    line-height: 1.35;
}

/* Row 4 — CTA, centred and full width. */
.hbl__card-action { text-align: center; }
.hbl__card-action .hbl__btn {
    display: block;
    padding: 10px 12px;
    text-align: center;
}
/* Ticketed events get a filled button; everything else keeps the outline. */
.hbl .hbl__btn--book { background: var(--ama-navy); color: #fff; }
.hbl .hbl__btn--book:hover { opacity: .9; }
.hbl .hbl__btn--sold,
.hbl .hbl__btn--closed {
    border-color: var(--ama-border);
    color: var(--ama-muted);
    cursor: default;
}
.hbl .hbl__btn--sold:hover,
.hbl .hbl__btn--closed:hover { background: transparent; color: var(--ama-muted); }

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    /* Narrow viewports can't honour 3–4 columns of cards legibly. */
    .hbl--grid .hbl__rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .hbl--grid .hbl__rows { grid-template-columns: 1fr; }
}

@media (max-width: 782px) {
    /* Badge stays beside the text; the button drops to its own line under the
       title rather than squeezing all three columns. */
    .hbl__row { grid-template-columns: auto 1fr; gap: 14px; }
    .hbl__action { grid-column: 2; }
    .hbl__btn { padding: 6px 10px; }
}
@media (max-width: 480px) {
    .hbl__row { padding: 16px 2px; }
    .hbl__title { font-size: 0.9375rem; }
    .hbl__chip { margin-left: 6px; }
    .hbl__date { min-width: 50px; padding: 7px 8px; }
    .hbl__day { font-size: 1.1875rem; }
}


/* ==========================================================================
   FUTURISTIC LIST — BLOCK DATE STYLE  (.hml-db)
   The alternative to the inline weekday/date/time stack: a calendar tile with
   a weekday bar across the top. Every colour and the numeral size are widget
   controls; these are the pre-edit defaults.

   Sizing note: this is the FULL tile, and it is meant to be big — it is the
   right choice where the date carries the page, such as a card grid. Inside a
   table it makes every row as tall as its four stacked bands, which is what the
   compact variant further down exists to solve. Shrink this one and it stops
   being either.
   ========================================================================== */
.hml-db {
  display: inline-block;
  min-width: 168px;
  max-width: 240px;
  background: #fff;
  border: 2px solid #16244a;
  text-align: center;
}

/* The weekday bar. nowrap is load-bearing: a range like WED – SAT must stay on
   one line, which is also why the PHP switches to three-letter forms for a
   genuine range rather than spelling both days out. */
.hml-db__dow {
  display: block;
  padding: 8px 10px;
  background: #16244a;
  color: #fff;
  font-family: var(--font-body, sans-serif);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hml-db__body {
  display: block;
  padding: 18px 12px 16px;
}

/* Two dates side by side, each under its own month. */
.hml-db__pair {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
}
.hml-db__unit { display: block; }

.hml-db__num {
  display: block;
  font-family: var(--font-serif, var(--font-sans, sans-serif));
  font-size: 3rem;
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.02em;
  color: #16244a;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.hml-db__mon {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body, sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #534c45;
  white-space: nowrap;
}
.hml-db__dash {
  align-self: flex-start;
  /* Optically centres against the numerals rather than the whole unit, which
     includes the month label below. */
  margin-top: .35em;
  font-size: 1.25rem;
  line-height: 1;
  color: #8a3a2a;
}

.hml-db__time {
  display: block;
  margin: 0 12px;
  padding: 12px 0 14px;
  border-top: 1px dashed #d6cfc4;
  font-family: var(--font-body, sans-serif);
  font-size: 0.9375rem;
  line-height: 1.3;
  color: #4a5468;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .hml-db { max-width: none; }
  .hml-db__num { font-size: 2.25rem; }
  .hml-db__time { white-space: normal; }
  /* The compact variant is already small; leave its numeral alone. */
  .hml-db--compact .hml-db__num { font-size: 1.125rem; }
}


/* ── Compact variant ──────────────────────────────────────────────────────
   Same chip, same colours, laid out across two lines instead of four bands.
   The full tile is ~4 lines tall; in a table every row grows to match its
   tallest cell, so a 4-line date forces a 4-line row next to one-line
   categories and titles. This sits level with them. */
.hml-db--compact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 8px;
  min-width: 0;
  max-width: none;
  background: none;
  border: 0;
  text-align: left;
}
.hml-db--compact .hml-db__dow {
  padding: 2px 6px;
  font-size: 0.75rem;
  letter-spacing: .08em;
}
.hml-db--compact .hml-db__body { padding: 0; }

/* Numeral and month share a baseline rather than stacking. */
.hml-db--compact .hml-db__unit {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.hml-db--compact .hml-db__num { font-size: 1.125rem; line-height: 1.2; }
.hml-db--compact .hml-db__mon { margin-top: 0; font-size: 0.75rem; }
.hml-db--compact .hml-db__pair { gap: 5px; align-items: baseline; }
.hml-db--compact .hml-db__dash {
  align-self: baseline;
  margin-top: 0;
  font-size: 0.875rem;
}

/* Time takes the second line. */
.hml-db--compact .hml-db__time {
  flex: 1 1 100%;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0.75rem;
  white-space: nowrap;
}


/* ── Two-column layout ────────────────────────────────────────────────────
   Everything about the event in one cell, the action in the other. The date,
   category and venue columns are not hidden with CSS — render_rows() omits
   them, so the table genuinely has two columns and the <th> count matches. */
.hml__td--event { vertical-align: top; }

.hml__event-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* Every pill on one line: categories, MEC labels, status, online. */
.hml__event-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.hml__event-title {
  font-size: 1.0625rem;
  line-height: 1.35;
  text-wrap: balance;
}

/* Date · time · venue read as one line, wrapping only when it has to. */
.hml__event-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  margin: 0;
  font-family: var(--font-body, sans-serif);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #4a5468;
}
.hml__event-date {
  font-weight: 700;
  color: #16244a;
  white-space: nowrap;
}
.hml__event-time { white-space: nowrap; }
/* The dot between meta items is drawn, not typed.

   It used to be <span aria-hidden="true">·</span> — a text node, which every
   checker scores against the 4.5:1 that WCAG asks of TEXT. It is not text: it
   is a bullet between "7:00 pm" and "Free", carrying no meaning of its own, and
   darkening it far enough to pass a text threshold would give it the same
   visual weight as the words it separates, which defeats the point.

   Drawn as an empty ::before with a background colour it is unambiguously a
   graphical object, so the applicable rule is 1.4.11 Non-text Contrast at 3:1 —
   which #8a8274 clears at 3.53 on cream and 3.22 on ivory. It also takes three
   aria-hidden spans out of the markup. */
.hml__event-meta > span + span::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 7px 2px;
  border-radius: 50%;
  background: #8a8274;
  vertical-align: middle;
}
.hml__event-venue { min-width: 0; }

/* The action column takes only what it needs, so the event cell keeps the rest. */
.hml__th--action,
.hml__td--event + .hml__td--action { width: 1%; white-space: nowrap; }
.hml__th--event { width: auto; }

@media (max-width: 700px) {
  /* The list becomes stacked cards below this width; the meta line is already
     a wrapping flex row, so it just reflows. */
  .hml__td--event + .hml__td--action { width: auto; white-space: normal; }
}


/* ── Three-column layout ──────────────────────────────────────────────────
   Date tile · event · action. Like the two-column layout, the date, category
   and venue columns are omitted by render_rows() rather than hidden here, so
   the table really has three columns and the <th> count matches.

   The column headers are hidden for this layout only — but visually, not
   semantically: .hml__thead--bare uses the standard clip pattern, which keeps
   the <th> elements in the accessibility tree so a screen reader still hears
   "Date", "Event", "Action". Because the clipped <thead> is out of flow, the
   column widths below come entirely from the cells. */
/* Collapsed in place rather than lifted out with position:absolute. An
   abspos <thead> is an out-of-flow box the table no longer owns, and it kept
   its cell borders — on a site whose global CSS rules table cells (which is
   what draws the column dividers here) that left a stray hairline near the
   table. Zeroing the row keeps it inside the table, where border-collapse can
   account for it, and a 0-height borderless row draws nothing at all.

   The text stays in the DOM — transparent and 0px, not `display:none` — so the
   <th> elements remain in the accessibility tree and a screen reader still
   announces which column a cell belongs to. Doubled class to outrank the
   theme/Elementor table rules without reaching for !important. */
.hml__thead--bare.hml__thead--bare,
.hml__thead--bare.hml__thead--bare tr,
.hml__thead--bare.hml__thead--bare .hml__th {
  position: static;
  height: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  color: transparent;
}

/* Tile and action each take only what they need; the event cell gets the rest. */
.hml__tr--3col .hml__td { vertical-align: top; }
.hml__td--daytile {
  width: 1%;
  white-space: nowrap;
  vertical-align: top;
}

/* The tile itself mirrors .hbl__date in the Basic view, so an event looks the
   same in both. Fixed brand colour rather than var(--cat-color): the table rows
   carry no ama-cat-* class, so there is no category colour to inherit. */
.hml__dt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  padding: 9px 10px;
  border-radius: 4px;
  /* The numeral band is full-bleed, so it would square off the corners. */
  overflow: hidden;
  background: var(--ama-maroon, #7a2e2e);
  color: #fff;
  font-family: var(--font-body, 'Atkinson Hyperlegible', Arial, sans-serif);
  line-height: 1.05;
  text-align: center;
}
.hml__dt-dow {
  /* 0.75rem (12px), raised from 0.5625rem (9px). WCAG sets no minimum text
     size, so 9px was never a failure — but it was the smallest text on the
     site by some margin and the hardest to defend. Still in rem, so it scales
     with the reader's browser font setting. */
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .08em;
  opacity: .85;
  margin-bottom: 3px;
}

/* The day numeral sits in a band of its own, a touch lighter than the tile
   around it — MEC's list-minimal skin does this with a translucent white
   overlay, and it reads well because the lift is relative: it works over any
   category colour, dark or light, without a second colour to maintain.

   Full-bleed across the tile, so the band is a stripe rather than a floating
   box: align-self stretches it to the tile's inner width, and the negative
   margin cancels the tile's own horizontal padding, which the padding here
   then puts back inside the band.

   MEC hard-codes 23px; this is 1.5rem so it scales with the reader's text
   size, and the family is pinned to the theme body face rather than inherited,
   or an Elementor container with a serif set on it lends the numeral its own. */
.hml__dt-day {
  align-self: stretch;
  margin: 0 -10px;
  padding: 3px 10px;
  /* Strength of the lift is a widget control, which sets --hml-dt-band on the
     tile. Only the alpha is variable: white at a given opacity lightens any
     category colour predictably, where a second hex would have to be chosen
     per category. The literal here is the fallback for markup rendered before
     the control existed. */
  background: rgba(255, 255, 255, var(--hml-dt-band, .2));
  /* Depth above and below the stripe, so it reads as a recessed band rather
     than a painted rectangle. Two shadows, since one box-shadow offset can
     only fall on one side. */
  box-shadow: 0 -2px 4px rgba(0, 0, 0, .1), 0 2px 4px rgba(0, 0, 0, .1);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}
.hml__dt-mon {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .1em;
  margin-top: 3px;
}

/* Category-coloured tiles. --cat-color is set on the row by its .ama-cat-{slug}
   class, from the rules generate_cat_styles() attaches to this stylesheet — the
   same mechanism behind the Basic view's coloured badge, so one category reads
   the same in both views. Falls back to the flat colour above for an event
   whose category has no colour set. */
.hml__table--cat-tiles .hml__dt {
  background: var(--cat-color, var(--ama-maroon, #7a2e2e));
  /* --cat-ink is emitted beside --cat-color by generate_cat_styles(): white on a
     dark category colour, near-black on a pale one. Scoped to this modifier
     because in single-colour mode the tile is painted maroon, where white is
     always right regardless of the row's category. */
  color: var(--cat-ink, #fff);
}
/* A span across two months is two tiles, not one squeezed line. Kept on one
   row (no wrap) so the pair reads as a single date range rather than two
   unrelated events stacked up. */
.hml__dt-pair {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
}

.hml__event-price { font-weight: 700; color: #16244a; white-space: nowrap; }

/* A short month needs less tile, which hands the width back to the title. */
.hml__dt--short { min-width: 54px; }


/* ── Column dividers, off ─────────────────────────────────────────────────
   Opt-in via the widget's "Hide Column Dividers" switch: the vertical rules
   between the cells go, so a row reads as one band rather than three boxes.
   The horizontal rule between one event and the next stays — that is what
   still separates the rows.

   The theme stylesheet never draws these lines; they come from whatever rules
   table cells site-wide (Elementor's or the parent theme's). So this has to
   outrank a selector we do not control: hence the doubled class, which lifts
   specificity without !important and leaves a later override still possible. */
.hml__table--no-col-lines.hml__table--no-col-lines .hml__th:not(:first-child),
.hml__table--no-col-lines.hml__table--no-col-lines .hml__td:not(:first-child) {
  border-left: 0;
}
.hml__table--no-col-lines.hml__table--no-col-lines .hml__th:not(:last-child),
.hml__table--no-col-lines.hml__table--no-col-lines .hml__td:not(:last-child) {
  border-right: 0;
}


/* ── The table's own bottom margin ────────────────────────────────────────
   .hml__table-wrap draws a border around the table. A global `table { margin }`
   rule — the parent theme's or Elementor's, not ours — then pushes the table
   up off the bottom of that border, and the result reads as two rules: the
   table's own bottom edge, a gap, then the wrapper's. Inside a bordered
   wrapper the margin buys nothing, so it goes. Doubled class because the rule
   it overrides is not one we control. */
.hml__table.hml__table { margin: 0; }


/* ── Three columns: tablet ────────────────────────────────────────────────
   Still a real three-column table down to the card breakpoint, but the action
   column's nowrap (set far above, for the desktop table) squeezes the middle
   column badly once there are two buttons in it. Let them wrap instead. */
@media (max-width: 900px) {
  .hml__tr--3col .hml__td { padding: 12px 10px; }
  .hml__tr--3col .hml__td--action { white-space: normal; }
  .hml__tr--3col .hml__td--action .hml__action-btn { margin-bottom: 4px; }
}

/* ── Three columns: mobile card ───────────────────────────────────────────
   The shared card view (≤600px) turns every cell into a "LABEL : value" row,
   which is right for the four-column table it was written for. This layout has
   no visible headers by design, so those labels would be inventing headings the
   desktop view deliberately hides — they go, and the card becomes a small grid:
   tile beside the event, action across the foot.

   .hml__td--daytile also has to give up its desktop `width: 1%`. That value is
   how a table cell says "shrink to fit"; on a grid item it means one per cent
   of the track, which crushes the tile it is supposed to be sizing. */
@media (max-width: 600px) {
  .hml__tr--3col {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0 12px;
    padding: 14px;
  }
  .hml__tr--3col .hml__td {
    display: block;
    width: auto;
    padding: 0;
    border-bottom: 0;
    min-width: 0;
  }
  .hml__tr--3col .hml__td::before { content: none; }

  .hml__tr--3col .hml__td--daytile { grid-column: 1; grid-row: 1; }
  .hml__tr--3col .hml__td--event   { grid-column: 2; grid-row: 1; }
  .hml__tr--3col .hml__td--action {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  /* The buttons are the only tap targets in the card; give them room to be hit
     rather than letting two of them share one cramped line. */
  .hml__tr--3col .hml__action-btn { flex: 1 1 auto; text-align: center; }

  /* The tile carries the whole date at this size, so it may not shrink. */
  .hml__tr--3col .hml__dt { min-width: 58px; padding-left: 8px; padding-right: 8px; }
  /* Band still has to reach both edges — cancel the padding it actually has. */
  .hml__tr--3col .hml__dt-day { margin: 0 -8px; padding-left: 8px; padding-right: 8px; }

  /* A cross-month pair is two tiles wide, which on a phone can leave the title
     beside it about 80px — unreadable. Capped just above the widest pair of
     short-month tiles (~116px): those still sit side by side, while a pair of
     full-month tiles (~165px) exceeds the cap and stacks instead, handing the
     width back to the title. Single tiles are untouched, so an ordinary row
     still gives the title everything it had. */
  .hml__tr--3col .hml__dt-pair {
    flex-wrap: wrap;
    max-width: 130px;
  }

  /* Two columns is a card here too, and its "EVENT" / "ACTION" labels name
     columns that this layout never had. Same reasoning as above. */
  .hml__tr:not(.hml__tr--3col) > .hml__td--event::before,
  .hml__tr:not(.hml__tr--3col) > .hml__td--event + .hml__td--action::before { content: none; }
  .hml__tr:not(.hml__tr--3col) > .hml__td--event,
  .hml__tr:not(.hml__tr--3col) > .hml__td--event + .hml__td--action { display: block; }
  .hml__tr:not(.hml__tr--3col) > .hml__td--event + .hml__td--action {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
}