/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/

/* =============================================================
   JD Single Event Template — Route A "Modern Archive"

   Token names and values are kept identical to the `JD: Design
   tokens` snippet used on the organisation / analyst / course /
   book templates (see claude/phase-0-tokens-and-retrofit.md).
   They're duplicated here rather than shared because this
   override is a plain PHP + CSS file (per the locked "re-skin,
   don't replace" MEC decision), not an Elementor template — it
   has no access to the snippet layer those templates load from.

   BEM structure: .jd-event, .jd-event__*
   Shared vocabulary reused from the other templates: .jd-section,
   .jd-section-head, .jd-section-label, .jd-sidebar-card,
   .jd-record-title, .jd-record-avatar, .jd-body-text

   LAYOUT REVISION (6 Aug) — Stephen's request:
     - Featured image moved into the main column (was full-bleed
       hero above everything) so the sidebar's first card sits
       level with the image, not the page header.
     - Date / Time / Local-time widgets combined into one sidebar
       card (.jd-sidebar-card--datetime) instead of a meta strip
       in the main column.
     - Speaker / Organiser panels reduced from full-bio cards to
       compact identity "chips" (avatar/logo + name only) — see
       .jd-chip-row / .jd-chip.
     - New sidebar download affordances for MEC's own public
       download module and the "Conference Programme" ACF field.
============================================================= */

:root {
    --jd-navy: #1a3352;        --jd-navy-dark: #12253c;
    --jd-accent: #e0822f;      --jd-accent-soft: #fbe9d8;
    --jd-success: #1f8f7a;     --jd-success-soft: #e1f3ef;
    --jd-caution: #c08a1f;     --jd-caution-soft: #faf1dd;
    --jd-ground: #f6f5f2;      --jd-surface: #ffffff;
    --jd-rule: #e6e2da;        --jd-rule-soft: #f0ede6;
    --jd-text: #2b2b28;        --jd-text-muted: #6b6b64;
    --jd-font-head: 'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    --jd-font-body: 'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    --jd-r-lg: 10px; --jd-r-md: 8px; --jd-r-sm: 6px; --jd-r-pill: 20px;
    --jd-gap: 24px; --jd-pad: 22px;
}

/* --- Page ground ---------------------------------------------- */
body.single-mec-events {
    background: var(--jd-ground);
}

/* --- Layout: contained column, two-zone body ------------------- */
.jd-single-event {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 60px;
    font-family: var(--jd-font-body);
    color: var(--jd-text);
}

/* Two continuous columns — .jd-event__primary (featured image, then the
   description and everything below it) and .jd-event__aside (the whole
   sidebar rail). Replaces the four named grid areas (hero / summary /
   content / rest) used from 6 Aug to 17 Aug 2026.

   WHY THE FOUR-AREA GRID HAD TO GO. CSS grid aligns ROWS across columns,
   so row 1 ("hero summary") always stretched to whichever of the two was
   taller. The sidebar ran ~530px against a ~380px featured image, so
   every event carried ~168px of dead space beneath the image before the
   description could start — measured live on post 127037. Moving the
   Speaker and Organiser panels into the sidebar (17 Aug) would have
   pushed that past 500px. Two independent column flows have no row
   alignment between them, so the description now begins directly under
   the image however tall the rail grows.

   NOT STICKY. .jd-event__rest-col was position:sticky under the old
   system, when it held only Cost/Booking/Map/Countdown. The rail now
   carries the glance card, the CTA, both people panels and all of that,
   which is routinely taller than the viewport — a sticky element taller
   than its scrollport barely moves and reads as broken, so it's dropped
   rather than reapplied to the wrapper. */
.jd-event__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px 40px;
    align-items: start;
    margin-top: var(--jd-gap);
}

.jd-event__primary,
.jd-event__aside {
    display: flex;
    flex-direction: column;
    /* Without this a long unbroken title or URL inside either column can
       push past the track and widen the whole grid. */
    min-width: 0;
}
.jd-event__primary { gap: 20px; }
.jd-event__aside   { gap: 16px; }

/* The two surviving sidebar sub-groups. They're kept as wrappers rather
   than flattened because the mobile order below is applied to them as
   single units — "at a glance + CTA" moves as one block, and so does
   "Cost / Booking / Map / custom / Countdown". */
.jd-event__summary-col,
.jd-event__rest-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- Speaker / Organiser panels in the rail ------------------------
   These were full-width .jd-section cards in the ~796px content column
   until 17 Aug. At 320px their internals have to go single-file. */
.jd-event__aside .jd-event__speakers,
.jd-event__aside .jd-event__organisers {
    padding: 16px 18px 18px;
}
/* ACF relationship chips: stacked, not wrapped — a wrapped row of chips
   at this width leaves orphans and clips long organisation names. */
.jd-event__aside .jd-chip-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
.jd-event__aside .jd-chip {
    width: 100%;
    box-sizing: border-box;
}
.jd-event__aside .jd-chip__name {
    font-size: 13.5px;
    line-height: 1.35;
}
/* MEC's own speaker tiles sat 90px and wrapped freely in the wide
   column; 84px sits three-up cleanly inside the card's padding here. */
.jd-event__aside .jd-event__speakers-fallback .mec-speakers-details ul { gap: 10px; }
.jd-event__aside .jd-event__speakers-fallback .mec-speaker-avatar {
    width: 84px;
    height: 84px;
}
/* Organiser logo, scaled to the narrower column. Still contained rather
   than cropped to a circle — see the note on the shared rule further
   down; these are wide banner wordmarks, not square avatars. */
.jd-event__aside .jd-event__organisers-fallback img.mec-img-organizer {
    max-width: 140px;
    max-height: 44px;
    margin-bottom: 10px;
}
.jd-event__aside .jd-event__organisers-fallback .jd-organiser-name { font-size: 14px; }
.jd-event__aside .jd-event__organisers-fallback dd { font-size: 13px; }

/* --- Mobile reflow -------------------------------------------------
   Both column wrappers become display:contents so their children rejoin
   the single-column grid directly, then explicit order values restore
   the sequence approved on 6 Aug with the two relocated people panels
   slotted in after the CTA:
     image -> at a glance + CTA -> Speaker -> Organiser -> description
     -> Cost / Booking / Map / Countdown.

   order is set on the six blocks themselves rather than on the two
   wrappers, because a display:contents element generates no box and so
   cannot itself be ordered. Spacing comes from the grid's own gap at
   this breakpoint, since the wrappers' flex gap disappears with them. */
@media (max-width: 960px) {
    .jd-event__body {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .jd-event__primary,
    .jd-event__aside { display: contents; }

    .jd-event__hero-col                    { order: 1; }
    .jd-event__summary-col                 { order: 2; }
    .jd-event__aside .jd-event__speakers   { order: 3; }
    .jd-event__aside .jd-event__organisers { order: 4; }
    .jd-event__content-col                 { order: 5; }
    .jd-event__rest-col                    { order: 6; }

    /* Full width again, so the panels can use the room. */
    .jd-event__aside .jd-event__speakers-fallback .mec-speaker-avatar {
        width: 90px;
        height: 90px;
    }
    .jd-event__aside .jd-event__organisers-fallback img.mec-img-organizer {
        max-width: 180px;
        max-height: 52px;
    }
    .jd-event__aside .jd-chip-row {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
    .jd-event__aside .jd-chip { width: auto; }
}

/* --- Featured image — now in-column, main column ---------------- */
/* .jd-event__hero is shared structure; --inline is the only variant
   in use since the image no longer runs full-bleed above the page. */
.jd-event__hero {
    border-radius: var(--jd-r-lg);
    overflow: hidden;
    border: 1px solid var(--jd-rule);
}

.jd-event__hero--inline {
    margin-bottom: var(--jd-gap);
}

.jd-event__hero-image {
    width: 100%;
    height: auto;
    display: block;
    max-height: 380px;
    object-fit: cover;
}

/* --- Breadcrumb (MEC's own widget) ------------------------------- */
.jd-event__header .mec-address {
    font-size: 13px;
    color: var(--jd-text-muted);
    margin: 20px 0 6px;
}
.jd-event__header .mec-address a {
    color: var(--jd-text-muted);
    text-decoration: none;
}
.jd-event__header .mec-address a:hover { color: var(--jd-accent); }
.jd-event__header .mec-address .mec-current { color: var(--jd-text); }
.jd-event__header .mec-address i { font-size: 10px; margin: 0 4px; }

/* --- Header / inner wrapper --------------------------------------- */
.jd-event__inner { padding: 0; }

.jd-event__header { padding: 0 0 8px; }

h1.jd-event__title,
h1.jd-record-title {
    /* .elementor-kit-109 h1 is (0,1,1); tie on specificity with the
       element selector added here, source order (this file loads after
       the kit) settles it in our favour. Same trap already documented
       on the org/analyst templates — see phase-1-organisation-templates.md. */
    font-family: var(--jd-font-head);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--jd-navy-dark);
    margin: 4px 0 10px;
}

/* Label widget: bookmark icon + cost/type pill, top of header */
.jd-event__header .mec-single-event-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.jd-event__header .mec-single-event-label .mec-cost,
.jd-event__header .mec-single-event-label dl,
.jd-event__header .mec-single-event-label dd {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}
.jd-event__header .mec-single-event-label dd {
    padding: 3px 12px;
    border-radius: var(--jd-r-pill);
    background: var(--jd-accent-soft);
    color: var(--jd-navy-dark);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* --- Catalogue section card (content, speakers, organisers) -------- */
.jd-section {
    background: var(--jd-surface);
    border: 1px solid var(--jd-rule);
    border-radius: var(--jd-r-lg);
    padding: var(--jd-pad);
    margin-bottom: var(--jd-gap);
}
.jd-section-head { margin-bottom: 16px; }
.jd-section-label {
    display: block;
    font-family: var(--jd-font-head);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--jd-navy-dark);
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--jd-rule);
}
.jd-body-text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--jd-text);
}
.jd-body-text a { color: var(--jd-accent); }

/* --- Hourly schedule (MEC widget, if used) -------------------------- */
.jd-event__main .mec-events-schedules-container .mec-color { color: var(--jd-accent) !important; }

/* --- Speaker / Organiser identity chips -----------------------------
   Compact panels: avatar or logo + name only, no bio/role/website.
   Both .jd-event__speakers and .jd-event__organisers are .jd-section
   cards (ruled label header etc. already covered above); this is
   just the row of chips inside them. ------------------------------ */
.jd-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* Vertical layout — avatar/logo on top, name caption underneath, each
   chip a fixed narrow column so a row of speakers/organisers reads as
   a tight grid rather than a row of wide horizontal pills. */
a.jd-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 80px;
    padding: 6px 4px;
    border-radius: var(--jd-r-sm);
    text-decoration: none;
    text-align: center;
}
a.jd-chip:hover {
    background: var(--jd-accent-soft);
}

.jd-chip__name {
    font-family: var(--jd-font-head);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--jd-text);
}
a.jd-chip:hover .jd-chip__name { color: var(--jd-navy-dark); }

.jd-chip__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Speaker / Organiser MEC-native fallback ------------------------
   Shown only when the ACF relationship field (event_speakers /
   event_organisers) is empty — MEC's own speakers.details module and
   organizer/other-organizer widgets, restyled loosely onto the page's
   type and colour tokens rather than left in MEC's default look. Exact
   inner markup varies (speakers.details isn't a file this project has
   local access to), so these rules target broad, stable patterns —
   headings, images, dl/dd rows, links — rather than specific classes. */
.jd-event__speakers-fallback,
.jd-event__organisers-fallback {
    font-family: var(--jd-font-body);
    font-size: 15px;
    line-height: 1.7;
    color: var(--jd-text);
}
/* MEC's own "Speakers"/"Organizer" heading duplicates the jd-section-label
   this panel already has above it ("Speaker"/"Organiser") — drop MEC's,
   keep its "Other Organizers" sub-heading (no equivalent of ours covers
   that grouping). */
.jd-event__speakers-fallback .mec-frontbox-title,
.jd-event__organisers-fallback .mec-single-event-organizer > .mec-events-single-section-title {
    display: none;
}
.jd-event__organisers-fallback .mec-single-event-additional-organizers > .mec-events-single-section-title {
    font-family: var(--jd-font-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--jd-navy-dark);
    margin: 4px 0 10px;
}
.jd-event__organisers-fallback .mec-single-event-additional-organizers {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--jd-rule-soft);
}
.jd-event__organisers-fallback .mec-single-event-additional-organizer {
    margin-bottom: 16px;
}
.jd-event__organisers-fallback .mec-single-event-additional-organizer:last-child {
    margin-bottom: 0;
}

/* MEC's speakers.details module (display_speakers_widget) — confirmed
   live markup: .mec-speakers-details > ul > li > .mec-speaker-avatar,
   a lightbox trigger wrapping .speaker-details > .mec-speaker-name.
   No dedicated image element was present on the (unphotographed) test
   speaker; MEC applies a photo, when one exists, as a CSS background-image
   on .mec-speaker-avatar itself rather than an <img> — styled as a small
   tile with the name pinned to the bottom on a solid strip, so it reads
   whether or not a background photo is present. */
.jd-event__speakers-fallback .mec-speakers-details ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.jd-event__speakers-fallback .mec-speakers-details li { margin: 0; }
.jd-event__speakers-fallback .mec-speaker-avatar {
    width: 90px;
    height: 90px;
    border-radius: var(--jd-r-md);
    overflow: hidden;
    background-color: var(--jd-navy);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
}
.jd-event__speakers-fallback .mec-speaker-avatar a {
    display: block;
    width: 100%;
    text-decoration: none;
}
.jd-event__speakers-fallback .speaker-details {
    background: rgba(18, 37, 60, 0.72);
    padding: 6px;
}
.jd-event__speakers-fallback .mec-speaker-name {
    display: block;
    font-family: var(--jd-font-head);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--jd-surface);
    text-align: center;
    line-height: 1.25;
}
.jd-event__speakers-fallback .clearfix { display: none; }
/* The click target opens MEC's own lightbox with full bio/contact detail
   (speaker-info panel, MEC's lity markup) — left as MEC renders it rather
   than restyled, since it's an overlay, not part of the page flow. */
.jd-event__speakers-fallback img,
.jd-event__organisers-fallback img.mec-img-organizer {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    margin-bottom: 10px;
}
.jd-event__speakers-fallback dl,
.jd-event__organisers-fallback dl {
    margin: 0 0 14px;
}
.jd-event__speakers-fallback dl:last-child,
.jd-event__organisers-fallback dl:last-child {
    margin-bottom: 0;
}
.jd-event__speakers-fallback dd,
.jd-event__organisers-fallback dd {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 14px;
}
.jd-event__speakers-fallback .mec-meta-label,
.jd-event__organisers-fallback .mec-meta-label {
    color: var(--jd-text-muted);
    font-size: 13px;
}
.jd-event__speakers-fallback a,
.jd-event__organisers-fallback a {
    color: var(--jd-accent);
    text-decoration: none;
}
.jd-event__speakers-fallback a:hover,
.jd-event__organisers-fallback a:hover { text-decoration: underline; }
.jd-event__speakers-fallback i,
.jd-event__organisers-fallback i,
.jd-event__speakers-fallback svg,
.jd-event__organisers-fallback svg {
    color: var(--jd-accent);
    fill: var(--jd-accent);
    width: 15px;
    height: 15px;
}

/* Master organiser name row — emitted by jd_event_render_master_organiser()
   in functions.php rather than by MEC's own display_organizer_widget(),
   which fatals on this install (it instantiates the Advanced Organizer
   addon's skin class unguarded, and that addon isn't installed — see the
   helper's docblock). Markup deliberately reuses MEC's class names so
   everything above still applies; this block only lifts the NAME out of
   MEC's muted .mec-meta-label treatment, since it's now a link to the
   organisation's own record and should read as the primary element of
   the panel rather than as another metadata value. */
.jd-event__organisers-fallback .jd-organiser-name {
    font-family: var(--jd-font-head);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    align-items: flex-start;
    margin-bottom: 8px;
}
.jd-event__organisers-fallback .jd-organiser-name a,
.jd-event__organisers-fallback .jd-organiser-name span {
    color: var(--jd-navy-dark);
}
.jd-event__organisers-fallback .jd-organiser-name a:hover {
    color: var(--jd-accent);
    text-decoration: underline;
}
/* The icon sits on the first line of a name that wraps to two. */
.jd-event__organisers-fallback .jd-organiser-name i,
.jd-event__organisers-fallback .jd-organiser-name svg {
    flex: 0 0 auto;
    margin-top: 3px;
}

/* Organisation logos are almost always WIDE banner marks on this site
   (e.g. jung_logo_full-300x78.jpg, bannerlogo.gif) — not square avatars.
   The shared rule above crops them 64x64 cover into a circle, which
   slices the middle out of the wordmark. This was invisible until the
   organiser panel started rendering (Aug 2026). Contain them in a wide
   box instead, no circle. Speakers keep the circular avatar treatment,
   which is correct for portraits. */
.jd-event__organisers-fallback img.mec-img-organizer {
    width: auto;
    height: auto;
    max-width: 180px;
    max-height: 52px;
    object-fit: contain;
    border-radius: 0;
    /* MEC's own frontend.css puts padding-left:35px on this image, which
       indented the logo away from the panel's left edge and ate into the
       max-width. Reset it so the logo lines up with the name row below. */
    padding: 0;
    margin: 0 0 12px;
}



/* --- Shared record avatar (photo/logo circle with initials fallback) ---
   Scoped under .jd-single-event (0,2,0) rather than left bare (0,1,0):
   the site's card-grid snippets (analyst/organisation cards elsewhere)
   also define a bare .jd-record-avatar at a different size, and at equal
   specificity source order decides — which isn't reliable across pages.
   Same fix already applied to the h1 title on this template; see
   phase-1-organisation-templates.md, "the specificity lesson". */
.jd-single-event .jd-record-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* A sitewide card-grid snippet also targets a bare .jd-record-avatar
       with `flex: 0 0 128px`; flex-basis overrides height on a flex item
       regardless of which rule wins on specificity, since it's a distinct
       declaration the scoped rule above didn't otherwise touch. Reset it
       explicitly rather than rely on cascade order. */
    flex: 0 0 auto;
}
.jd-single-event .jd-record-avatar--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jd-single-event .jd-record-avatar--initials { background: var(--jd-navy); }
.jd-single-event .jd-record-avatar--initials span {
    color: var(--jd-surface);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.02em;
}

/* Small variant used by the chip panels. */
.jd-single-event .jd-record-avatar--sm {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
}
.jd-single-event .jd-record-avatar--sm.jd-record-avatar--initials span {
    font-size: 13px;
}

/* --- Sidebar ------------------------------------------------------ */
/* .jd-event__aside is the sidebar rail; .jd-event__summary-col and
   .jd-event__rest-col are the two groups inside it. All three are
   defined above, alongside .jd-event__body's column layout, since their
   flex/gap behaviour and the mobile order values are part of the same
   two-column system. */

.jd-sidebar-card {
    background: var(--jd-surface);
    border: 1px solid var(--jd-rule);
    border-radius: var(--jd-r-lg);
    padding: 20px;
}

/* Standalone heading class — used on the new Download / Conference
   Programme cards, which have no MEC-generated title of their own. */
.jd-sidebar-card-heading {
    font-family: var(--jd-font-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--jd-navy-dark);
    margin: 0 0 12px;
}

/* Centred variant — used above the Countdown, which reads better
   centred over a horizontal row of numbers than left-ruled like the
   other sidebar-card headings. */
.jd-sidebar-card-heading--center {
    text-align: center;
}

/* Give MEC's own section titles (Location, Social, More Info) the
   shared sidebar-card-heading look used on the org/analyst rail. */
.jd-sidebar-card .mec-events-single-section-title,
.jd-sidebar-card .mec-frontbox-title,
.jd-sidebar-card .mec-social-single {
    font-family: var(--jd-font-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--jd-navy-dark);
    margin: 0 0 12px;
}

.jd-sidebar-card dl, .jd-sidebar-card dd, .jd-sidebar-card dt { margin: 0; }
.jd-sidebar-card .mec-meta-label { color: var(--jd-text-muted); font-size: 13px; }

/* --- "At a glance" combined sidebar card (Date / Time / Local-time /
   Location) -----------------------------------------------------------
   Redesigned 6 Aug: one compact icon + value row per widget, no stacked
   "DATE" / "TIME" micro-labels — the icon does that job now. Confirmed
   live markup (novamira/execute-php against a real event):
     display_date_widget()     -> .mec-event-meta > .mec-single-event-date
                                   > i.mec-sl-calendar + div.mec-date
                                   ("Date" label, hidden) + dl > dd > abbr
     display_time_widget()     -> .mec-event-meta > .mec-single-event-time
                                   > i.mec-sl-clock + div.mec-time ("Time"
                                   label, hidden) + i.mec-time-comment + dl
     display_location_widget() -> .mec-single-event-location (no
                                   .mec-event-meta wrapper) > i.mec-sl-
                                   location-pin + div.mec-events-single-
                                   section-title.mec-location ("Location"
                                   heading, hidden) + dl > dd.author.fn.org
                                   (repeats the pin icon — hidden, kept
                                   once at row level) + dd.location > address
   Date and Time always render before Location in the template, so a
   fixed border-bottom on those two (rather than a :last-child rule that
   can't cleanly reach across three different wrapper elements) reads
   correctly in the common case. Local-time (below, its own comment
   block) sits between Time and Location and carries its own border when
   present, so this still holds regardless of whether local-time renders.
   ------------------------------------------------------------------- */
.jd-sidebar-card--glance {
    display: flex;
    flex-direction: column;
    /* Tightened 17 Aug (4px 14px -> 2px 14px) as part of condensing this
       card vertically; the per-row padding below came down at the same time. */
    padding: 2px 14px;
}
.jd-sidebar-card--glance .mec-event-meta { display: contents; }
.jd-sidebar-card--glance .mec-event-meta:empty { display: none; }

.jd-sidebar-card--glance .mec-single-event-date,
.jd-sidebar-card--glance .mec-single-event-time,
.jd-sidebar-card--glance .mec-single-event-location {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}
.jd-sidebar-card--glance .mec-single-event-date,
.jd-sidebar-card--glance .mec-single-event-time {
    border-bottom: 1px solid var(--jd-rule-soft);
}

.jd-sidebar-card--glance i.mec-sl-calendar,
.jd-sidebar-card--glance i.mec-sl-clock,
.jd-sidebar-card--glance > .mec-single-event-location > i.mec-sl-location-pin {
    color: var(--jd-accent);
    font-size: 16px;
    width: 16px;
    flex-shrink: 0;
    text-align: center;
}

/* Hide the redundant micro-labels/headings and the second (inner) pin
   icon that MEC duplicates inside dd.author.fn.org. */
.jd-sidebar-card--glance .mec-date,
.jd-sidebar-card--glance .mec-time,
.jd-sidebar-card--glance .mec-cost,
.jd-sidebar-card--glance .mec-time-comment:empty,
.jd-sidebar-card--glance .mec-events-single-section-title.mec-location,
.jd-sidebar-card--glance dd.author.fn.org i.mec-sl-location-pin,
.jd-sidebar-card--glance .mec-events-address:empty {
    display: none;
}

.jd-sidebar-card--glance dl,
.jd-sidebar-card--glance dd {
    margin: 0;
}
.jd-sidebar-card--glance dd,
.jd-sidebar-card--glance .mec-meta-label {
    font-size: 13.5px;
    color: var(--jd-text);
    font-weight: 500;
    /* The theme's inherited ~1.7 line-height was adding ~4px to every row
       for no benefit on a single line of text (17 Aug condensing pass). */
    line-height: 1.4;
}
.jd-sidebar-card--glance dd abbr {
    text-decoration: none;
    border-bottom: none;
    cursor: inherit;
}

/* --- Row wrapping: the reason this card was tall (fixed 17 Aug) ------
   The flex rules above have been here since 6 Aug, but the icon and its
   value still rendered on separate lines on every event. Cause: MEC's
   frontend.css leaves these rows at flex-wrap: wrap, and the <dl>
   holding the value measures ~270px against the ~266px content box
   inside the 320px card — 4px over, so it wrapped onto its own line
   under the icon. Confirmed live via getComputedStyle (flex-wrap:
   "wrap") and getBoundingClientRect (dl width 270, icon y=311, dl
   y=342) on post 126872 before the fix.

   nowrap stops the wrap; min-width: 0 lets the value shrink to fit
   beside the icon instead of forcing an overflow. Both are needed —
   nowrap alone would overflow the card. */
.jd-sidebar-card--glance .mec-single-event-date,
.jd-sidebar-card--glance .mec-single-event-time,
.jd-sidebar-card--glance .mec-single-event-location {
    flex-wrap: nowrap;
}
.jd-sidebar-card--glance .mec-single-event-date dl,
.jd-sidebar-card--glance .mec-single-event-time dl,
.jd-sidebar-card--glance .mec-single-event-location dl {
    flex: 1 1 auto;
    min-width: 0;
}

/* --- Location, single line ------------------------------------------
   Emitted by jd_event_render_location_row() (functions.php) in place of
   MEC's two-<dd> stack — venue and street address comma-joined, with the
   venue dropped when MEC's address already begins with it. Mirrors the
   .jd-local-time-row treatment above it. align-items: flex-start rather
   than center because a full street address legitimately wraps to two
   lines and the pin should stay on the first. */
.jd-location-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
}
.jd-location-row i {
    color: var(--jd-accent);
    font-size: 16px;
    width: 16px;
    flex-shrink: 0;
    text-align: center;
    margin-top: 2px;
}
.jd-location-value {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--jd-text);
    line-height: 1.4;
    min-width: 0;
}


/* Event's own configured timezone abbreviation ("BST", "EDT", ...),
   6 Aug follow-up addition — appended after the Time row's value by
   jd_event_render_time_with_tz() in functions.php, inside the same
   <abbr> MEC already wraps the time value in, in its own <span> so it
   can read as a distinct, slightly muted suffix rather than part of the
   time value itself: "10:00 am - 11:30 am BST". */
.jd-sidebar-card--glance .jd-tz-abbr {
    color: var(--jd-text-muted);
    font-weight: 400;
    font-size: 12px;
    margin-left: 3px;
}

/* Start time converted to UTC, shown in parentheses right after the
   timezone abbreviation, e.g. "10:00 am - 11:30 am BST (09:00 UTC)" —
   same muted treatment as .jd-tz-abbr, just a hair lighter since it's
   the secondary of the two suffixes. */
.jd-sidebar-card--glance .jd-utc-time {
    color: var(--jd-text-muted);
    font-weight: 400;
    font-size: 12px;
    margin-left: 3px;
}
/* --- Local time (visitor's own timezone) -----------------------------
   Shows the event's start/end time converted to whatever timezone MEC
   detects from the visitor's IP — genuinely useful since it can land on
   a different date/time than the advertised one. Sits directly below
   the Time row, above Location, per Stephen's request. Off by default
   on this install (gated behind MEC's own "Local Time" module setting,
   plus IP-geolocation detection — both need to succeed for anything to
   render), so this only shows for visitors where MEC can resolve a
   timezone; it degrades to nothing otherwise, same as every other
   optional row on this card.

   6 Aug follow-up: reformatted from the original 3-line "Timezone: X /
   Date: Y / Time: Z" block into a single compact row — globe icon, the
   local time value, then the literal text "(Local Time)" — per
   Stephen's request. jd_event_render_local_time_row() in functions.php
   discards MEC's own markup and prints fresh, simpler markup instead:
     <div class="mec-event-meta">
       <div class="jd-local-time-row">
         <i class="mec-sl-globe"></i>
         <span class="jd-local-time-value">5:00 am - 6:30 am</span>
         <span class="jd-local-time-suffix">(Local Time)</span>
       </div>
     </div>
   The outer div still carries .mec-event-meta so the existing
   "display:contents" rule above unwraps it exactly like Date/Time/
   Location's own wrappers — no special-case needed. */
.jd-sidebar-card--glance /* Keeps the row invisible until jd_event_print_local_time_script() removes
   the `hidden` attribute — needed because .jd-local-time-row's own `display: flex`
   below would otherwise outrank the browser's default [hidden] UA rule (same
   specificity, but author styles beat UA styles regardless of order). */
.jd-local-time-row[hidden] {
    display: none;
}
.jd-local-time-row {
    display: flex;
    align-items: center;
    gap: 10px;
    /* 9px -> 6px on 17 Aug, matching the Date/Time/Location rows when
       this card was condensed vertically. */
    padding: 6px 0;
    border-bottom: 1px solid var(--jd-rule-soft);
}
.jd-sidebar-card--glance .jd-local-time-row > i {
    color: var(--jd-accent);
    font-size: 16px;
    width: 16px;
    flex-shrink: 0;
    text-align: center;
}
.jd-sidebar-card--glance .jd-local-time-value {
    font-size: 13.5px;
    color: var(--jd-text);
    font-weight: 500;
}
.jd-sidebar-card--glance .jd-local-time-suffix {
    font-size: 12px;
    color: var(--jd-text-muted);
    font-weight: 400;
}

/* --- Action card: one primary CTA + secondary rows ------------------
   Replaces the old separate Register/More-info/Export/Download cards.
   .jd-action-primary wraps whichever of the Register-button or
   More-info widgets was chosen as the single deduped CTA (see template
   logic) and forces it to look like a solid button regardless of which
   of the two underlying MEC markup shapes it is. .jd-action-secondary
   (+ modifier for each source) and .jd-link-secondary render as a
   bordered, unfilled row — Export/"Add to calendar", the Conference
   Programme link, and MEC's own public-download module all share this
   same secondary-row look, so only the one CTA reads as the primary
   action. --------------------------------------------------------- */
.jd-sidebar-card--actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
}

.jd-action-primary a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 16px;
    border-radius: var(--jd-r-sm);
    background: var(--jd-accent) !important;
    color: var(--jd-surface) !important;
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none;
    text-align: center;
}
.jd-action-primary a:hover { background: var(--jd-navy) !important; }
.jd-action-primary dl,
.jd-action-primary dd,
.jd-action-primary .mec-event-meta,
.jd-action-primary .mec-event-more-info,
.jd-action-primary .mec-reg-btn { margin: 0; }
/* When the fallback (More-info) widget is used as the primary CTA,
   strip its icon + "Original Site" label so only the button shows. */
.jd-action-primary .mec-event-more-info > i,
.jd-action-primary .mec-event-more-info > .mec-cost { display: none; }

.jd-action-secondary,
.jd-link-secondary {
    border: 1px solid var(--jd-rule);
    border-radius: var(--jd-r-sm);
    overflow: hidden;
}
.jd-action-secondary a:hover,
.jd-link-secondary:hover {
    background: var(--jd-accent-soft) !important;
}

/* Export widget — confirmed live markup: .mec-event-export-module >
   .mec-event-exporting > .mec-export-details > ul > li > a.mec-events-gcal */
.jd-action-secondary--export .mec-event-export-module,
.jd-action-secondary--export .mec-event-exporting,
.jd-action-secondary--export .mec-export-details,
.jd-action-secondary--export .mec-export-details ul,
.jd-action-secondary--export .mec-export-details li {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}
.jd-action-secondary--export a.mec-events-gcal {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    background: transparent !important;
    color: var(--jd-navy-dark) !important;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}

/* More-info widget, kept as a secondary row only on the rare event
   where its href genuinely differs from the primary CTA's. */
.jd-action-secondary--moreinfo .mec-event-meta,
.jd-action-secondary--moreinfo .mec-event-more-info {
    display: block;
    margin: 0;
}
.jd-action-secondary--moreinfo i.mec-sl-info,
.jd-action-secondary--moreinfo .mec-cost { display: none; }
.jd-action-secondary--moreinfo dl,
.jd-action-secondary--moreinfo dd { margin: 0; }
.jd-action-secondary--moreinfo a.mec-more-info-button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    color: var(--jd-navy-dark) !important;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}

/* MEC's own public-download module — confirmed selector from the
   previous round: .mec-public-download-details a.button. */
.jd-action-secondary--download .mec-public-download-details { margin: 0; }
.jd-action-secondary--download .mec-public-download-details p {
    margin: 0;
    padding: 9px 12px;
    font-size: 12px;
    color: var(--jd-text-muted);
}
.jd-action-secondary--download .mec-public-download-details a.button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border-radius: 0;
    background: transparent !important;
    color: var(--jd-navy-dark) !important;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}

/* Conference Programme — hand-authored markup, in-template. */
.jd-link-secondary {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    color: var(--jd-navy-dark) !important;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}
.jd-link-secondary svg {
    width: 14px;
    height: 14px;
    color: var(--jd-accent);
    flex-shrink: 0;
}
.jd-link-secondary__meta {
    margin-left: auto;
    color: var(--jd-text-muted);
    font-weight: 400;
    font-size: 12px;
}

/* --- Countdown — compact horizontal strip, moved to the bottom of the
   sidebar. CSS-only restyle: MEC's own ids/classes (#mec_countdown_details,
   #countdown, .clockdiv, .block-w, .mec-days/.mec-hours/.mec-minutes/
   .mec-seconds, .label-w) are left untouched so its live-ticking JS,
   which targets those selectors directly, keeps working. Confirmed live
   markup: .mec-countdown-details#mec_countdown_details > .countdown-w
   .ctd-simple > ul.clockdiv#countdown > li.{days,hours,minutes,seconds}-w
   .block-w > i.icon-w + span.mec-{unit} + p.mec-timeRef{Unit}.label-w

   OVERFLOW FIX: the first pass at this used 2-class selectors (e.g.
   .jd-sidebar-card--countdown .block-w), which lost the specificity
   fight to MEC's own frontend.min.css — confirmed live via
   document.styleSheets: MEC ships .mec-events-meta-group-countdown
   .countdown-w .block-w { width:190px; display:table-cell; margin:0 20px
   10px }, a 3-class selector that beat our 2-class one, so every segment
   rendered at its MEC-default 190px table-cell width (4 × ~230px with
   margins ≈ 920px) instead of the intended 50px flex column — the
   countdown bled far outside the 320px sidebar card on both sides.
   Every selector below now chains the full
   .mec-events-meta-group-countdown .countdown-w ancestry (4+ classes) so
   it always outranks MEC's 3-class rules regardless of load order. --- */
.jd-sidebar-card--countdown {
    padding: 14px;
    overflow: hidden;
}
.jd-sidebar-card--countdown .mec-events-meta-group-countdown .countdown-w {
    display: block;
    padding: 0;
    margin: 0;
    text-align: center;
    font-size: inherit;
}
.jd-sidebar-card--countdown .mec-events-meta-group-countdown .countdown-w .clockdiv {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
}
.jd-sidebar-card--countdown .mec-events-meta-group-countdown .countdown-w .block-w {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50px;
    margin: 0;
    padding: 0;
    position: relative;
}
.jd-sidebar-card--countdown .mec-events-meta-group-countdown .countdown-w .block-w:not(:last-child)::after {
    content: ":";
    position: absolute;
    right: -3px;
    top: 0;
    font-size: 18px;
    line-height: 1;
    color: var(--jd-rule);
    font-weight: 700;
}
.jd-sidebar-card--countdown .mec-events-meta-group-countdown .countdown-w .icon-w,
.jd-sidebar-card--countdown .mec-events-meta-group-countdown .countdown-w .block-w i {
    display: none;
}
.jd-sidebar-card--countdown .mec-events-meta-group-countdown .countdown-w .block-w > span {
    padding: 0;
    font-family: var(--jd-font-head);
    font-size: 20px;
    font-weight: 700;
    color: var(--jd-navy-dark);
    line-height: 1;
}
.jd-sidebar-card--countdown .mec-events-meta-group-countdown .countdown-w .label-w {
    font-size: 9.5px;
    color: var(--jd-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 3px 0 0;
    padding: 0;
}

/* MEC's own theme-colour utility classes — recolouring these two
   once reaches every icon, the booking button, "more info" links
   and cost figures in one pass, the same technique used to move
   the course template's CTA button off the kit's cyan accent. */
.jd-single-event .mec-color { color: var(--jd-accent) !important; }
.jd-single-event .mec-bg-color {
    background-color: var(--jd-accent) !important;
    border-color: var(--jd-accent) !important;
}
.jd-single-event a.mec-color-hover:hover,
.jd-single-event .mec-color-hover:hover { color: var(--jd-navy) !important; }

.jd-single-event .mec-booking-button {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 12px 20px;
    border-radius: var(--jd-r-sm);
    color: var(--jd-surface) !important;
    font-weight: 600;
    text-decoration: none;
}

.jd-single-event .mec-events-address,
.jd-single-event address {
    font-style: normal;
    font-size: 14px;
    color: var(--jd-text);
    line-height: 1.6;
}

.jd-single-event .mec-events-meta-group-gmap iframe,
.jd-single-event .mec-events-meta-group-gmap img {
    width: 100%;
    border-radius: var(--jd-r-md);
    display: block;
    margin-top: 12px;
}

.jd-single-event .mec-more-info-button {
    color: var(--jd-accent) !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}
.jd-single-event .mec-more-info-button:hover { text-decoration: underline; }

.jd-event__sidebar-custom {
    font-size: 0.92rem;
    line-height: 1.6;
}

/* Sidebar downloads (MEC's public-download module, the Conference
   Programme link) are now styled as part of the action card's
   secondary-row family — see .jd-action-secondary--download and
   .jd-link-secondary above. */

/* --- Previous / Next event navigation --------------------------------
   Replaces the old MEC Social-sharing widget at the bottom of the main
   column (6 Aug). Built on WordPress's own get_previous_post()/
   get_next_post() rather than MEC's display_next_prev_widget(), which
   turned out to be an unrelated, settings-gated "next occurrence" feature
   — see the comment in single-mec-events.php. Two link tiles, side by
   side; when only one exists the other cell is simply blank, same
   convention most prev/next navs use. --------------------------------- */
.jd-event__adjacent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: var(--jd-gap);
    padding-top: var(--jd-gap);
    border-top: 1px solid var(--jd-rule);
}
.jd-event__adjacent-link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--jd-rule);
    border-radius: var(--jd-r-md);
    text-decoration: none;
}
.jd-event__adjacent-link:hover {
    background: var(--jd-accent-soft);
}
.jd-event__adjacent-link--next {
    grid-column: 2;
    text-align: right;
    align-items: flex-end;
}
.jd-event__adjacent-label {
    font-family: var(--jd-font-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--jd-accent);
}
.jd-event__adjacent-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--jd-navy-dark);
}

@media (max-width: 600px) {
    .jd-event__adjacent {
        grid-template-columns: 1fr;
    }
    .jd-event__adjacent-link--next {
        grid-column: 1;
        text-align: left;
        align-items: flex-start;
    }
}

/* --- Mobile ---------------------------------------------------------- */
@media (max-width: 600px) {
    .jd-event__hero-image { max-height: 260px; }
    a.jd-chip { width: 72px; }
    .jd-single-event .jd-record-avatar { width: 60px; height: 60px; }
    .jd-single-event .jd-record-avatar--sm { width: 40px; height: 40px; }
}

/* --- Value alignment across all rows (fixed 17 Aug) -----------------
   The Date/Time rows use MEC's <dl><dd> shape while Local-time,
   Location and Cost use plain spans, and the <dd> was sitting 26px
   further right than the spans — icons all at x=25, but values at 77 vs
   51. The offset is a `margin-inline-start: 26px` on <dd> that does NOT
   come from any enumerable stylesheet (nothing matched when every
   document.styleSheets rule touching margin was tested against the
   element), so the existing `.jd-sidebar-card dd { margin: 0 }` was
   losing to it. Bumping specificity with the .jd-single-event and
   .mec-event-meta ancestors fixes it — verified live, dd moves 77 -> 51,
   flush with the span-based rows.

   Keep this in mind if a fifth row type is ever added: align on 51px
   (card padding 24 + icon 16 + gap 10 = 50, plus the icon's 1px box). */
.jd-single-event .jd-sidebar-card--glance .mec-event-meta dl,
.jd-single-event .jd-sidebar-card--glance .mec-event-meta dd,
.jd-single-event .jd-sidebar-card--glance .mec-event-meta dt {
    margin: 0;
    padding: 0;
}

/* --- Row rules: every row but the last ------------------------------
   Replaces the old "Date and Time are always bordered, Location never
   is" approximation. That held only because Location was reliably last;
   once Cost joined the card as a fifth row (17 Aug) it stopped being
   true. Now every row carries the hairline and the last one drops it.

   Targeting two levels because each row sits inside a display:contents
   .mec-event-meta wrapper: the wrapper generates no box, so the border
   lives on the row element, but :last-child resolves against the
   wrapper. jd_event_widget_card_multi() now skips widgets that render
   nothing, so the last child is always a real row — without that, a free
   event's empty Cost wrapper would take the :last-child slot and leave
   Location bordered with nothing beneath it. */
.jd-sidebar-card--glance .mec-single-event-date,
.jd-sidebar-card--glance .mec-single-event-time,
.jd-sidebar-card--glance .jd-local-time-row,
.jd-sidebar-card--glance .jd-location-row,
.jd-sidebar-card--glance .mec-event-cost {
    border-bottom: 1px solid var(--jd-rule-soft);
}
.jd-single-event .jd-sidebar-card--glance > *:last-child,
.jd-single-event .jd-sidebar-card--glance > *:last-child > * {
    border-bottom: none;
}

/* --- Cost, folded into this card (17 Aug) ---------------------------
   Was its own .jd-sidebar-card in the rest-col group. Same shape as the
   Date/Time widgets — i.mec-sl-wallet + div.mec-cost ("Cost" label,
   hidden like the other micro-labels) + dl > dd.mec-events-event-cost —
   so it needs the same flex row, nowrap and dl treatment they get above.
   MEC's own wallet glyph is used rather than a new ticket asset; it's
   already loaded via iconfonts.css on every page this template renders. */
.jd-sidebar-card--glance .mec-event-cost {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    flex-wrap: nowrap;
}
.jd-sidebar-card--glance .mec-event-cost dl {
    flex: 1 1 auto;
    min-width: 0;
}
.jd-sidebar-card--glance i.mec-sl-wallet {
    color: var(--jd-accent);
    font-size: 16px;
    width: 16px;
    flex-shrink: 0;
    text-align: center;
}