/* =============================================================================
   AB Events — Single event template (ecmo_events)
   Modern, responsive UI/UX stylesheet.
   Everything is scoped to .ab-event-single-container so it can never leak
   into other parts of the Salient theme.
   -----------------------------------------------------------------------------
   1.  Design tokens
   2.  Base layout
   3.  Header (circular image + title)
   4.  Event details (date / venue)
   5.  Content prose
   6.  WPBakery blocks: hero image, call-to-action link, meta badges, headings
   7.  Speakers grid (inner rows rendered as cards)
   8.  Responsive breakpoints
   9.  Accessibility & motion preferences
   10. Print
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
.ab-event-single-container {
    /* Colour */
    --ab-accent: #1d4ed8;
    --ab-accent-hover: #1e40af;
    --ab-accent-soft: #eef2ff;
    --ab-heading: #16202a;
    --ab-text: #1f2933;
    --ab-muted: #5b6672;
    --ab-border: #e5e7eb;
    --ab-border-hover: #c7d2fe;
    --ab-surface: #ffffff;
    --ab-surface-alt: #f8fafc;
    --ab-avatar-bg: #e9edf2;
    --ab-ring: rgba(29, 78, 216, 0.35);

    /* Shape, depth */
    --ab-radius: 16px;
    --ab-radius-sm: 12px;
    --ab-radius-pill: 999px;
    --ab-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
    --ab-shadow-md: 0 6px 16px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.04);

    /* Rhythm */
    --ab-pad: 10px;
    --ab-gap: 1.25rem;

    /* Layout */
    --ab-max-width: 1140px;
    /* flow-root establishes a block formatting context so the header row's
       top margin stays inside the card instead of collapsing through it. */
    display: flow-root;
    /* The wrapper is a column flex container. The auto cross-axis margins below
       suppress flex "stretch", so without an explicit width this box
       shrink-to-fits its content -- making the page width depend on whatever
       content each event happens to have. width:100% pins it; max-width caps
       it and the auto margins centre it. */
    width: 100%;
    max-width: var(--ab-max-width);
    margin: 2rem auto;
    padding: 0 var(--ab-pad);
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
        Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ab-text);
    background: var(--ab-surface);
    border-radius: var(--ab-radius);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
    overflow-wrap: break-word;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.ab-event-single-container *,
.ab-event-single-container *::before,
.ab-event-single-container *::after {
    box-sizing: border-box;
}

/* Left/right padding for all page content */
.ab-event-header-row,
.ab-event-details,
.ab-event-content {
    padding-left: var(--ab-pad);
    padding-right: var(--ab-pad);
}


/* -----------------------------------------------------------------------------
   2. Base layout — nothing may overflow horizontally
   -------------------------------------------------------------------------- */
.ab-event-single-container img,
.ab-event-single-container iframe,
.ab-event-single-container table {
    max-width: 100%;
}


/* -----------------------------------------------------------------------------
   3. Header — circular image on the left, title on the right
   -------------------------------------------------------------------------- */
.ab-event-header-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--ab-gap);
    margin-top: 30px;
    margin-bottom: 1rem;
}

.ab-event-thumb {
    flex: 0 0 auto;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ab-avatar-bg);
    box-shadow: var(--ab-shadow-sm);
}

.ab-event-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ab-event-header-text {
    flex: 1 1 auto;
    min-width: 0;
}

.ab-event-single-container .ab-event-title {
    margin: 0;
    /* Fluid type: never too small, never oversized */
    font-size: clamp(1.5rem, 1rem + 2.2vw, 2.15rem);
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ab-heading);
    text-wrap: balance;
    overflow-wrap: break-word;
}


/* -----------------------------------------------------------------------------
   4. Event details — date pill + venue
   -------------------------------------------------------------------------- */
.ab-event-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    margin-bottom: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ab-border);
    font-size: 0.95rem;
    color: var(--ab-muted);
}

/* Date and venue deliberately share one badge design so the meta row reads as
   a matched set. */
.ab-event-single-container .ab-event-date,
.ab-event-single-container .ab-event-venue {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    /* Also neutralises Salient's global `p { padding-bottom: 1.5em }`, which
       otherwise made the venue box taller than the date pill and set the two
       at different heights. */
    margin: 0;
    padding: 0.32rem 0.8rem;
    border-radius: var(--ab-radius-pill);
    background: var(--ab-accent-soft);
    color: var(--ab-accent);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

.ab-event-single-container .ab-event-date::before,
.ab-event-single-container .ab-event-venue::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

/* An event without a venue must not render an empty badge. The template skips
   the element entirely; this is a belt-and-braces guard. */
.ab-event-single-container .ab-event-venue:empty {
    display: none;
}


/* -----------------------------------------------------------------------------
   5. Content prose
   -------------------------------------------------------------------------- */
.ab-event-content {
    font-size: 1.05rem;
    line-height: 1.68;
    color: var(--ab-text);
}

.ab-event-content p {
    margin: 0 0 1.1rem;
    text-wrap: pretty;
}

.ab-event-content ul,
.ab-event-content ol {
    margin: 0 0 1.1rem;
    padding-left: 1.35rem;
}

.ab-event-content li + li {
    margin-top: 0.35rem;
}

.ab-event-content > *:last-child {
    margin-bottom: 1.75rem;
}


/* -----------------------------------------------------------------------------
   6. WPBakery blocks
   -------------------------------------------------------------------------- */
.ab-event-content .vc_row,
.ab-event-content .wpb_row {
    margin-bottom: 1.25rem;
}

/* Images — Salient renders [image_with_animation] as .img-with-aniamtion-wrap
   (Salient's own class name is misspelled). Plain VC/WPBakery fallbacks kept too. */
.ab-event-content .img-with-aniamtion-wrap,
.ab-event-content .wpb_single_image {
    display: block;
    max-width: 100%;
    margin: 0 0 1.5rem;
}

.ab-event-content .img-with-aniamtion-wrap .inner,
.ab-event-content .img-with-aniamtion-wrap .hover-wrap,
.ab-event-content .img-with-aniamtion-wrap .hover-wrap-inner,
.ab-event-content .wpb_single_image .vc_figure,
.ab-event-content .wpb_single_image .vc_single_image-wrapper {
    display: block;
    max-width: 100%;
}

.ab-event-content .img-with-aniamtion-wrap img,
.ab-event-content .wpb_single_image img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--ab-radius);
    box-shadow: var(--ab-shadow-md);
}

/* Text blocks — Salient prints the editor markup straight into .wpb_text_column,
   so the <p>/<h3> are direct children (there is no .wpb_wrapper inside). */
.ab-event-content .wpb_text_column {
    margin: 0 0 1rem;
}

.ab-event-content .wpb_text_column > *:last-child,
.ab-event-content .wpb_text_column .wpb_wrapper > *:last-child {
    margin-bottom: 0;
}

/* Links */
.ab-event-content a {
    color: var(--ab-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.18s ease;
}

.ab-event-content a:hover,
.ab-event-content a:focus {
    color: var(--ab-accent-hover);
}

/* Stand-alone call-to-action link (a whole URL sitting in its own text block) */
.ab-event-content .wpb_text_column > p > a:only-child,
.ab-event-content .wpb_text_column > .wpb_wrapper > a:only-child {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    padding: 0.72rem 1.3rem;
    border: 1px solid var(--ab-accent);
    border-radius: var(--ab-radius-pill);
    background: var(--ab-accent);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    overflow-wrap: anywhere;
    box-shadow: var(--ab-shadow-sm);
    transition: background-color 0.18s ease, border-color 0.18s ease,
        transform 0.18s ease;
}

.ab-event-content .wpb_text_column > p > a:only-child::after,
.ab-event-content .wpb_text_column > .wpb_wrapper > a:only-child::after {
    content: "\2192";
    font-size: 1.05em;
    line-height: 1;
}

@media (hover: hover) and (pointer: fine) {
    .ab-event-content .wpb_text_column > p > a:only-child:hover,
    .ab-event-content .wpb_text_column > .wpb_wrapper > a:only-child:hover {
        background: var(--ab-accent-hover);
        border-color: var(--ab-accent-hover);
        color: #fff;
        transform: translateY(-1px);
    }
}

/* Meta badges — e.g. "ECMO panel", "20 October 2026, 14:00" */
.ab-event-content h3.evt-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.45rem;
    margin: 0 0 0.85rem;
    padding: 0.38rem 0.9rem;
    border-radius: var(--ab-radius-pill);
    background: var(--ab-accent-soft);
    color: var(--ab-accent);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 1.45;
    text-transform: uppercase;
}

.ab-event-content h3.evt-meta strong,
.ab-event-content h3.evt-meta span,
.ab-event-content h3.evt-meta b {
    color: inherit;
    font-weight: inherit;
}

/* Section headings — e.g. "Speakers" */
.ab-event-content h3:not(.evt-meta),
.ab-event-content h2 {
    position: relative;
    margin: 2rem 0 1.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--ab-border);
    font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ab-heading);
}

.ab-event-content h3:not(.evt-meta)::after,
.ab-event-content h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 64px;
    height: 2px;
    border-radius: 2px;
    background: var(--ab-accent);
}


/* -----------------------------------------------------------------------------
   7. Speakers — each inner row becomes a responsive card
   -------------------------------------------------------------------------- */
/* Card shell — Salient wraps VC inner rows in .wpb_row.vc_row.inner_row */
.ab-event-content .inner_row,
.ab-event-content .vc_row.vc_inner,
.ab-event-content .vc_row_inner {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    background: var(--ab-surface-alt);
    border: 1px solid var(--ab-border);
    border-radius: var(--ab-radius-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    padding-bottom: 0px;
}

/* Equal-height cards. The ancestor flex row already stretches each .vc_col-sm-6
   wrapper to the tallest card in the row, but the card inside kept its own
   content height -- so cards containing a social icon came out taller than the
   ones without. Passing the height down the chain makes every card in a row the
   same height, whatever its content. Scoped with :has() so no other column on
   the page is affected. */
.ab-event-content .vc_col-sm-6:has(> .vc_column-inner > .wpb_wrapper > .inner_row) > .vc_column-inner,
.ab-event-content .vc_col-sm-6:has(> .vc_column-inner > .wpb_wrapper > .inner_row) > .vc_column-inner > .wpb_wrapper,
.ab-event-content .vc_col-sm-6:has(> .vc_column-inner > .wpb_wrapper > .inner_row) > .vc_column-inner > .wpb_wrapper > .inner_row {
    height: 100%;
}

.ab-event-content .vc_col-sm-6:has(> .vc_column-inner > .wpb_wrapper > .inner_row) > .vc_column-inner > .wpb_wrapper > .inner_row {
    /* the parent row already supplies the vertical rhythm, and the card now has
       a definite height so its bottom margin would otherwise overflow */
    margin-bottom: 0;
}

/* Flex track holding portrait + name columns */
.ab-event-content .inner_row > .row_col_wrap_12_inner,
.ab-event-content .vc_row_inner > .row_col_wrap_12_inner,
.ab-event-content .vc_row.vc_inner {
    display: flex;
    flex-direction: row;
    /* nowrap keeps the portrait and the name side by side. Salient scales the
       root font-size with the viewport, but the card width is capped, so the
       text outgrows the card at wide widths -- with wrap, the name column then
       drops below the portrait and the grid looks broken. */
    flex-wrap: nowrap;
    /* Top-aligned so portraits and names line up across a row now that every
       card is stretched to a common height. */
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
}

/* Portrait column — shrink-wraps the avatar */
.ab-event-content .inner_row .vc_column_container:first-child,
.ab-event-content .vc_row.vc_inner > .vc_column_container:first-child,
.ab-event-content .vc_row_inner > .vc_column_container:first-child {
    flex: 0 0 auto;
    width: auto;
    max-width: 45%;
    padding-left: 0;
    padding-right: 0;
}

/* Name / organisation column — takes the remaining width */
.ab-event-content .inner_row .vc_column_container:last-child,
.ab-event-content .vc_row.vc_inner > .vc_column_container:last-child,
.ab-event-content .vc_row_inner > .vc_column_container:last-child {
    /* basis 0 (not auto) so the column's content width can never push the flex
       line over the card width and force a wrap. */
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}

.ab-event-content .inner_row .vc_column-inner,
.ab-event-content .vc_row_inner .vc_column-inner {
    padding-left: 0;
    padding-right: 0;
}

.ab-event-content .inner_row .img-with-aniamtion-wrap,
.ab-event-content .inner_row .wpb_single_image,
.ab-event-content .vc_row_inner .img-with-aniamtion-wrap,
.ab-event-content .vc_row_inner .wpb_single_image {
    margin: 0;
}

/* Circular speaker portrait */
.ab-event-content .inner_row .img-with-aniamtion-wrap img,
.ab-event-content .inner_row .wpb_single_image img,
.ab-event-content .vc_row.vc_inner .wpb_single_image img,
.ab-event-content .vc_row_inner .img-with-aniamtion-wrap img,
.ab-event-content .vc_row_inner .wpb_single_image img {
    display: block;
    width: 84px;
    height: auto;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    object-fit: cover;
    background: var(--ab-avatar-bg);
    border: 3px solid var(--ab-surface);
    border-radius: 50%;
    box-shadow: var(--ab-shadow-sm);
}

/* Social icon sitting directly under a speaker portrait (e.g. the LinkedIn
   link on a card).
   Vertical: Salient leaves a flat 15px gap between the photo wrapper and an
   adjacent .nectar_icon_wrap -- measured constant from 1280px to 2200px
   viewports, so it is a fixed pixel value rather than font-relative. -30px
   cancels that 15px gap and then pulls the icon a further 15px up, so the glyph
   (which starts 20px into the wrapper's padding) ends up ~5px below the photo.
   Horizontal: as an inline-block the wrapper shrink-wraps to the glyph and
   left-aligns with the portrait's edge, leaving the icon ~9px off centre.
   Making it a full-width block and centring its content lines the glyph up
   with the photo. */
.ab-event-content .inner_row .img-with-aniamtion-wrap + .nectar_icon_wrap {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: -30px;
}

/* Reserve the same space in cards that have NO social icon, so every card is the
   same height. The row-stretch rules above already equalise cards that sit side
   by side (>=1024px), but below that Visual Composer stacks each card into its
   own full-width row and there is nothing to stretch against.
   2.3em matches the net height a .nectar_icon_wrap contributes (its own height
   minus the -30px pull above). That contribution is only partly font-relative:
   Salient scales the icon's padding but its glyph stays a fixed pixel size, so
   the growth flattens out on wide screens -- hence the 44px cap. Measured
   within 0.6px of the icon cards across 375px-2560px viewports. */
.ab-event-content .inner_row > .row_col_wrap_12_inner > .vc_column_container:first-child > .vc_column-inner > .wpb_wrapper:not(:has(.nectar_icon_wrap))::after {
    content: "";
    display: block;
    height: min(2.3em, 44px);
}

.ab-event-content .inner_row .wpb_text_column,
.ab-event-content .vc_row_inner .wpb_text_column {
    margin: 0;
}

/* Speaker name — first line of the paragraph */
.ab-event-content .inner_row .wpb_text_column > p,
.ab-event-content .inner_row .wpb_text_column .wpb_wrapper > p,
.ab-event-content .vc_row_inner .wpb_text_column > p,
.ab-event-content .vc_row_inner .wpb_text_column .wpb_wrapper > p {
    margin: 0;
    /* Salient's global `p { padding-bottom: 1.5em }` otherwise adds ~24px of
       dead space, pushing the name up out of line with the portrait. */
    padding: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--ab-heading);
    overflow-wrap: break-word;
}

/* Organisation / company */
.ab-event-content .inner_row .wpb_text_column strong,
.ab-event-content .vc_row_inner .wpb_text_column strong {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ab-muted);
}

@media (hover: hover) and (pointer: fine) {
    .ab-event-content .inner_row:hover,
    .ab-event-content .vc_row.vc_inner:hover,
    .ab-event-content .vc_row_inner:hover {
        transform: translateY(-2px);
        border-color: var(--ab-border-hover);
        box-shadow: var(--ab-shadow-md);
    }
}


/* -----------------------------------------------------------------------------
   8. Responsive
   -------------------------------------------------------------------------- */

/* Small desktop / large tablet */
@media (max-width: 1024px) {
    .ab-event-single-container {
        margin: 1.75rem auto;
    }
}

/* Stacked single column.
   Visual Composer collapses the speaker columns at 999px and below (measured:
   1000px still shows two cards per row, 999px shows one), so from here down
   every card sits alone on its own full-width row. Equal heights only matter
   for cards sitting side by side, so the icon-space reservation is switched off
   here and each card is simply sized by its own content.
   The text instead gets a flat 25px of space on all four sides: the card padding
   covers top/right/bottom, and the track gap covers the portrait to its left. */
@media (max-width: 999px) {
    .ab-event-content .inner_row,
    .ab-event-content .vc_row_inner {
        /* Top and sides get the 25px; the bottom is half of that. The speaker's
           caption sits at the TOP of the card, so an equal bottom inset read as
           a far bigger gap below the icon/portrait than above the name.
           Expressed as a fraction of the top inset so the two stay in
           proportion if the 25px is ever changed. */
        --ab-card-pad: 25px;
        padding: var(--ab-card-pad) var(--ab-card-pad) calc(var(--ab-card-pad) * 0.5);
    }

    .ab-event-content .inner_row > .row_col_wrap_12_inner,
    .ab-event-content .vc_row_inner > .row_col_wrap_12_inner,
    .ab-event-content .vc_row.vc_inner {
        gap: 25px;
    }

    /* Two more sources of dead space below the last item in the speaker column:
       a 25px margin on the VC column itself, and 20px of padding inside the
       icon box (below the glyph). Together with the card's own inset they put
       ~70px under the LinkedIn icon against 26px above the name. Only the
       BOTTOM is trimmed -- the 20px padding-top is what holds the icon at the
       distance from the portrait that was set earlier. */
    .ab-event-content .inner_row > .row_col_wrap_12_inner > .vc_column_container,
    .ab-event-content .vc_row_inner > .row_col_wrap_12_inner > .vc_column_container {
        margin-bottom: 0;
    }

    .ab-event-content .inner_row .nectar_icon_wrap > .nectar_icon,
    .ab-event-content .vc_row_inner .nectar_icon_wrap > .nectar_icon {
        padding-bottom: 0;
    }

    /* Salient's clearfix ::after (content:""; clear:both) on the row wrapper is
       a real flex item here, so it consumed a second gap after the text column
       and left the name/company 50px from the card edge instead of 25px. The
       track is a flex row, so nothing needs clearing. */
    .ab-event-content .inner_row > .row_col_wrap_12_inner::after,
    .ab-event-content .vc_row_inner > .row_col_wrap_12_inner::after {
        content: none;
    }

    /* Salient also pulls the row out by a small negative gutter to offset the
       column margins. Our columns have no padding, so those gutters only served
       to shift the content ~10px off the card's 25px inset. Zeroing them lets
       the track fill the card's content box exactly, so the 25px on the right is
       real rather than 35px. */
    .ab-event-content .inner_row > .row_col_wrap_12_inner,
    .ab-event-content .vc_row_inner > .row_col_wrap_12_inner {
        margin-left: 0;
        margin-right: 0;
    }

    /* No card to match heights against once the cards are stacked, so the
       reserved icon space is no longer needed. */
    .ab-event-content .inner_row > .row_col_wrap_12_inner > .vc_column_container:first-child > .vc_column-inner > .wpb_wrapper:not(:has(.nectar_icon_wrap))::after {
        display: none;
    }
}

/* Tablet */
@media (max-width: 900px) {
    .ab-event-content .inner_row .img-with-aniamtion-wrap img,
    .ab-event-content .inner_row .wpb_single_image img,
    .ab-event-content .vc_row_inner .img-with-aniamtion-wrap img,
    .ab-event-content .vc_row_inner .wpb_single_image img {
        width: 76px;
    }
}

/* Phone and small tablets — Visual Composer also collapses its columns here */
@media (max-width: 768px) {
    .ab-event-single-container {
        --ab-gap: 1rem;
        margin: 1.25rem auto;
        border-radius: var(--ab-radius-sm);
    }

    .ab-event-content .inner_row .img-with-aniamtion-wrap img,
    .ab-event-content .inner_row .wpb_single_image img,
    .ab-event-content .vc_row_inner .img-with-aniamtion-wrap img,
    .ab-event-content .vc_row_inner .wpb_single_image img {
        width: 68px;
    }
}

/* Phones */
@media (max-width: 600px) {
    .ab-event-single-container {
        max-width: 100%;
        overflow-x: hidden;
        hyphens: auto;
    }

    /* Stack image above the title, keep everything centred */
    .ab-event-header-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.75rem;
    }

    .ab-event-thumb {
        width: 72px;
        height: 72px;
        margin: 0 auto;
        align-self: center;
    }

    .ab-event-header-text {
        width: 100%;
        text-align: center;
    }

    .ab-event-single-container .ab-event-title {
        font-size: clamp(1.35rem, 1.05rem + 1.8vw, 1.65rem);
        text-align: center;
    }

    .ab-event-details {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        text-align: center;
    }

    .ab-event-content {
        font-size: 1rem;
    }

    .ab-event-content .img-with-aniamtion-wrap img,
    .ab-event-content .wpb_single_image img {
        border-radius: var(--ab-radius-sm);
    }

    .ab-event-content h3:not(.evt-meta),
    .ab-event-content h2 {
        margin-top: 1.5rem;
    }

    /* Full-width CTA button */
    .ab-event-content .wpb_text_column > p > a:only-child,
    .ab-event-content .wpb_text_column > .wpb_wrapper > a:only-child {
        display: flex;
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .ab-event-content .inner_row .img-with-aniamtion-wrap img,
    .ab-event-content .inner_row .wpb_single_image img,
    .ab-event-content .vc_row_inner .img-with-aniamtion-wrap img,
    .ab-event-content .vc_row_inner .wpb_single_image img {
        width: 60px;
        border-width: 2px;
    }

    .ab-event-content .inner_row .wpb_text_column > p,
    .ab-event-content .inner_row .wpb_text_column .wpb_wrapper > p,
    .ab-event-content .vc_row_inner .wpb_text_column > p,
    .ab-event-content .vc_row_inner .wpb_text_column .wpb_wrapper > p {
        font-size: 0.95rem;
    }

    .ab-event-content .inner_row .wpb_text_column strong,
    .ab-event-content .vc_row_inner .wpb_text_column strong {
        font-size: 0.75rem;
    }
}

/* Very small phones (360px and below) */
@media (max-width: 400px) {
    .ab-event-single-container {
        margin: 0.75rem auto;
        font-size: 15px;
    }

    .ab-event-single-container .ab-event-title {
        font-size: 1.3rem;
        line-height: 1.2;
    }

    .ab-event-content {
        font-size: 0.95rem;
    }

    .ab-event-content h3.evt-meta {
        padding: 0.32rem 0.7rem;
        font-size: 0.74rem;
        letter-spacing: 0.05em;
    }

    .ab-event-content .inner_row .img-with-aniamtion-wrap img,
    .ab-event-content .inner_row .wpb_single_image img,
    .ab-event-content .vc_row_inner .img-with-aniamtion-wrap img,
    .ab-event-content .vc_row_inner .wpb_single_image img {
        width: 54px;
    }
}


/* -----------------------------------------------------------------------------
   9. Accessibility & motion preferences
   -------------------------------------------------------------------------- */
.ab-event-single-container a:focus-visible,
.ab-event-single-container button:focus-visible,
.ab-event-single-container [tabindex]:focus-visible {
    outline: 3px solid var(--ab-ring);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .ab-event-single-container *,
    .ab-event-single-container *::before,
    .ab-event-single-container *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .ab-event-content .inner_row:hover,
    .ab-event-content .vc_row.vc_inner:hover,
    .ab-event-content .vc_row_inner:hover,
    .ab-event-content .wpb_text_column > p > a:only-child:hover,
    .ab-event-content .wpb_text_column > .wpb_wrapper > a:only-child:hover {
        transform: none;
    }
}

/* Respect Windows High Contrast / forced colours */
@media (forced-colors: active) {
    .ab-event-content h3.evt-meta,
    .ab-event-single-container .ab-event-date {
        border: 1px solid CanvasText;
    }
}


/* -----------------------------------------------------------------------------
   10. Print
   -------------------------------------------------------------------------- */
@media print {
    .ab-event-single-container {
        max-width: 100%;
        margin: 0;
        box-shadow: none;
        border-radius: 0;
    }

    .ab-event-content .inner_row,
    .ab-event-content .vc_row_inner {
        background: transparent;
        page-break-inside: avoid;
    }

    .ab-event-content .wpb_text_column > p > a:only-child,
    .ab-event-content .wpb_text_column > .wpb_wrapper > a:only-child {
        background: transparent;
        color: inherit;
        border-color: currentColor;
        box-shadow: none;
    }
}