/* ═══════════════════════════════════════════════════════
   Public Embed Widget CSS — Hardened for WP theme resistance
   ═══════════════════════════════════════════════════════ */

/* ─── Design-token variables (scoped to widget) ─── */
#showcase-embed-widget {

    /* Typography */
    --sc-font-family:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
    --sc-font-size-base:     16px;      /* Root & body text */
    --sc-font-size-xs:       13px;      /* Small detail (card job title) */
    --sc-font-size-sm:       14px;      /* Secondary text, filters, buttons */
    --sc-font-size-xl:       18px;      /* Popup last-name */
    --sc-font-size-2xl:      22px;      /* Card-hover name */
    --sc-font-size-3xl:      28px;      /* Popup close btn */
    --sc-font-size-4xl:      36px;      /* Popup first-name */
    --sc-font-weight-thin:   100;
    --sc-font-weight-light:  300;
    --sc-font-weight-normal: 400;
    --sc-font-weight-semi:   600;
    --sc-font-weight-bold:   700;
    --sc-font-weight-black:  900;
    --sc-line-height:        1.5;
    --sc-letter-spacing:     0;

    /* Colour — light palette */
    --sc-color-text:         #333;      /* Body copy */
    --sc-color-heading:      #222;      /* Headings & names */
    --sc-color-text-muted:   #999;      /* De-emphasised text */
    --sc-color-white:        #fff;
    --sc-color-black:        #000;
    --sc-color-bg:           #fff;      /* Default surface */
    --sc-color-bg-alt:       #f9f4f4;   /* Tinted surface */
    --sc-color-bg-hover:     #f0f0f0;   /* Hover & clear-btn bg */
    --sc-color-bg-active:    #d4d4d4;   /* Selected / pressed */
    --sc-color-bg-open:      #e8e8e8;   /* Expanded toggle */
    --sc-color-bg-overlay:   rgba(0,0,0,.55);
    --sc-color-bg-card-hover:#fffdfd9c;
    --sc-color-border:       #d0d0d0;   /* General borders */
    --sc-color-border-light: #e0e0e0;   /* Subtle separators */
    --sc-color-border-heavy: #a4a4a4;   /* Strong borders */
    --sc-color-shadow:       #cecece;   /* Box-shadow colour */
    --sc-color-btn-bg:       #333;
    --sc-color-btn-text:     #fff;
    --sc-color-btn-hover:    #555;
    --sc-color-error-bg:     #ffbdbd;

    /* Colour — dark palette */
    --sc-dark-bg:            #2a2a2a;   /* Dark surfaces */
    --sc-dark-bg-hover:      #3a3a3a;
    --sc-dark-bg-active:     #444;      /* Dark expanded / open */
    --sc-dark-text:          #eee;      /* Dark text */
    --sc-dark-border:        #555;

    /* Spacing  (×2 scale) */
    --sc-space-xs:           4px;
    --sc-space-sm:           8px;
    --sc-space-md:           16px;
    --sc-space-lg:           32px;

    /* Radii */
    --sc-radius-sm:          6px;       /* Buttons, pills */
    --sc-radius-md:          10px;      /* Cards, panels */
    --sc-radius-lg:          14px;      /* Popup panel */
    --sc-radius-round:       50%;       /* Circles */

    /* Transitions */
    --sc-transition-fast:    0.2s ease;
    --sc-transition-med:     0.3s ease;
    --sc-transition-slow:    0.4s ease;
    --sc-transition-slower:  0.6s ease;
}


/* ─── Hard reset — neutralise inherited WP theme styles ─── */
#showcase-embed-widget,
#showcase-embed-widget *,
#showcase-embed-widget *::before,
#showcase-embed-widget *::after {
    box-sizing: border-box !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

#showcase-embed-widget {
    font-family: var(--sc-font-family) !important;
    font-size: var(--sc-font-size-base) !important;
    font-weight: var(--sc-font-weight-normal) !important;
    line-height: var(--sc-line-height) !important;
    letter-spacing: var(--sc-letter-spacing) !important;
    color: var(--sc-color-text) !important;
    background: transparent !important;
    text-align: left !important;
    text-transform: none !important;
    font-style: normal !important;
    text-decoration: none !important;
    word-spacing: normal !important;
    direction: ltr !important;
    width: 95%;
    margin: 0 auto;
}

/* Blanket element resets inside the widget */
#showcase-embed-widget div,
#showcase-embed-widget span,
#showcase-embed-widget p,
#showcase-embed-widget h1,
#showcase-embed-widget h2,
#showcase-embed-widget h3,
#showcase-embed-widget h4,
#showcase-embed-widget h5,
#showcase-embed-widget h6,
#showcase-embed-widget em,
#showcase-embed-widget b,
#showcase-embed-widget strong,
#showcase-embed-widget a,
#showcase-embed-widget img,
#showcase-embed-widget ul,
#showcase-embed-widget ol,
#showcase-embed-widget li,
#showcase-embed-widget button,
#showcase-embed-widget label,
#showcase-embed-widget input {
    font-family: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    text-transform: none !important;
    text-decoration: none !important;
    font-style: normal !important;
    word-spacing: normal !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    text-align: inherit !important;
    vertical-align: baseline !important;
    float: none !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

/* Re-set bold/italic elements */
#showcase-embed-widget b,
#showcase-embed-widget strong {
    font-size: var(--sc-font-size-sm) !important;
    font-weight: var(--sc-font-weight-bold) !important;
}
#showcase-embed-widget em {
    font-style: italic !important;
}
#showcase-embed-widget img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    border: none !important;
}



/* ─── Widget shell ─── */
#showcase-embed-widget .widget-box {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    padding: 1em !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#showcase-embed-widget .message {
    background-color: var(--sc-color-error-bg) !important;
    color: var(--sc-color-black) !important;
    text-align: center !important;
    padding: 1em !important;
    border-radius: var(--sc-radius-sm) !important;
    font-size: var(--sc-font-size-base) !important;
    font-weight: var(--sc-font-weight-normal) !important;
}


/* ═══════════════════════════════════════════════════════
   Showcase Picture Gallery
   ═══════════════════════════════════════════════════════ */

/* Carousel */
#showcase-embed-widget .picture_gallery.showcase-grid.layout-carousel {
    position: initial !important;
    display: flex !important;
    gap: var(--sc-space-sm) !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

#showcase-embed-widget .picture_gallery.showcase-grid.layout-carousel .showcase-card {
    position: relative !important;
    scroll-snap-align: start !important;
    flex: 0 0 calc(100%) !important;
    flex-basis: calc(25% - 8px) !important;
    border-radius: var(--sc-radius-md) !important;
    overflow: hidden !important;
    transition: transform var(--sc-transition-slow) !important;
    background: transparent !important;
    min-width: 250px !important;
    min-height: 250px !important;
}

#showcase-embed-widget .picture_gallery.showcase-grid.layout-carousel.is-centered {
    justify-content: center !important;
}


/* Masonry */
#showcase-embed-widget .picture_gallery.showcase-grid.layout-masonry {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--sc-space-sm) !important;
    justify-content: center !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

#showcase-embed-widget .picture_gallery.showcase-grid.layout-masonry .showcase-card {
    position: relative !important;
    scroll-snap-align: start !important;
    flex: 0 0 calc(100%) !important;
    flex-basis: calc(25% - 8px) !important;
    border-radius: var(--sc-radius-md) !important;
    overflow: hidden !important;
    transition: transform var(--sc-transition-slow) !important;
    min-width: 250px !important;
    min-height: 250px !important;
    background: transparent !important;
}


/* Filter */
#showcase-embed-widget .picture_gallery.showcase-grid.layout-filter {
    float: right !important;
    clear: right !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--sc-space-sm) !important;
    justify-content: center !important;
    width: calc(100% - 220px) !important;
    background: var(--sc-color-bg) !important;
    border-radius: var(--sc-radius-md) !important;
    box-shadow: 0 0 10px var(--sc-color-shadow) !important;
    padding: var(--sc-space-sm) !important;
    border: 1px solid var(--sc-color-border-heavy) !important;
}

#showcase-embed-widget .picture_gallery.showcase-grid.layout-filter .showcase-card {
    position: relative !important;
    scroll-snap-align: start !important;
    flex: 0 0 calc(100%) !important;
    flex-basis: calc(25% - 8px) !important;
    border-radius: var(--sc-radius-md) !important;
    overflow: hidden !important;
    transition: transform var(--sc-transition-slow) !important;
    min-width: 230px !important;
    min-height: 250px !important;
    background: transparent !important;
}


#showcase-embed-widget .picture_gallery.showcase-grid.cols-2 .showcase-card {
    flex-basis: calc(50% - 8px) !important;
}

#showcase-embed-widget .picture_gallery.showcase-grid.cols-3 .showcase-card {
    flex-basis: calc(33.33% - 8px) !important;
}

#showcase-embed-widget .picture_gallery.showcase-grid.cols-4 .showcase-card {
    flex-basis: calc(25% - 8px) !important;
}

#showcase-embed-widget .picture_gallery.showcase-grid.cols-5 .showcase-card {
    flex-basis: calc(20% - 8px) !important;
}


#showcase-embed-widget .picture_gallery > .showcase-card img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    object-position: center top !important;
    aspect-ratio: 3/4 !important;
    border-radius: 0 !important;
    display: block !important;
}

#showcase-embed-widget .picture_gallery .showcase-card .staff-profile {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 0 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--sc-color-bg-card-hover) !important;
    text-align: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity var(--sc-transition-slower), visibility var(--sc-transition-slower) !important;
    padding: 0 !important;
    margin: 0 !important;
}
#showcase-embed-widget .picture_gallery .showcase-card:hover img ~ .staff-profile {
    opacity: 1 !important;
    visibility: visible !important;
}
#showcase-embed-widget .picture_gallery .showcase-card .staff-profile img.profile {
    width: 100px !important;
    height: 100px !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: var(--sc-radius-round) !important;
    margin: 0 auto !important;
    pointer-events: none !important;
    display: block !important;
}
#showcase-embed-widget .picture_gallery .showcase-card .staff-profile .name {
    font-weight: var(--sc-font-weight-black) !important;
    font-size: var(--sc-font-size-2xl) !important;
    color: var(--sc-color-text) !important;
    margin-bottom: 0 !important;
    pointer-events: none !important;
    text-align: center !important;
}

#showcase-embed-widget .picture_gallery .showcase-card .staff-profile .job_title {
    color: var(--sc-color-text) !important;
    font-size: var(--sc-font-size-xs) !important;
    text-align: center !important;
}

#showcase-embed-widget .picture_gallery .showcase-card .staff-profile .cta {
    display: flex !important;
    margin-top: 2em !important;
    text-align: center !important;
    justify-content: center !important;
}
#showcase-embed-widget .picture_gallery .showcase-card .staff-profile .cta a.button {
    display: inline-block !important;
    background: var(--sc-color-btn-bg) !important;
    color: var(--sc-color-btn-text) !important;
    padding: 0.5em 1em !important;
    border-radius: var(--sc-radius-sm) !important;
    text-decoration: none !important;
    margin: 1px 2px !important;
    font-size: var(--sc-font-size-xs) !important;
    font-weight: var(--sc-font-weight-light) !important;
    line-height: var(--sc-line-height) !important;
    width: auto !important;
    max-width: auto !important;
}
#showcase-embed-widget .picture_gallery .showcase-card .staff-profile .cta a.button svg.icon,
#showcase-embed-widget .showcase-profile-popup__book svg.icon {
    width: var(--sc-font-size-sm) !important;
    height: var(--sc-font-size-sm) !important;
    display: inline-block !important;
    vertical-align: sub !important;
}

#showcase-embed-widget .picture_gallery .showcase-carousel-prev, 
#showcase-embed-widget .picture_gallery .showcase-carousel-next {
    position: absolute !important;
    cursor: pointer !important;
    top: 50% !important;
    bottom: 50% !important;
    background: var(--sc-color-bg) !important;
    padding: 5px !important;
    border-radius: var(--sc-radius-round) !important;
    box-shadow: 0 0 5px #6f6e6e !important;
    transform: translate(0, -50%) !important;
    width: 32px !important;
    height: 32px !important;
    border: none !important;
    z-index: 5 !important;
}

#showcase-embed-widget .showcase-carousel-prev {
    left: -1em !important;
}
#showcase-embed-widget .showcase-carousel-next {
    right: -1em !important;
}

/* ─── Filter Horizontal ─── */
#showcase-embed-widget .showcase-filter-horizontal {
    text-align: center !important;
    background: transparent !important;
}

#showcase-embed-widget .showcase-filter-horizontal ul.tag-filters-list {
    width: 99% !important;
    list-style: none !important;
    margin: 0 auto 5px auto !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--sc-color-border) !important;
    box-shadow: 0 10px 10px #f2f2f2 !important;
    border-radius: 0 0 var(--sc-radius-sm) var(--sc-radius-sm) !important;
    background: transparent !important;
}

#showcase-embed-widget .showcase-filter-horizontal ul.tag-filters-list li {
    display: inline-block !important;
    background: var(--sc-color-bg-alt) !important;
    color: var(--sc-color-black) !important;
    padding: 1em !important;
    margin: 0 !important;
    border-radius: var(--sc-radius-md) var(--sc-radius-md) 0 0 !important;
    border-left: 1px solid var(--sc-color-border) !important;
    border-right: 1px solid var(--sc-color-border) !important;
    border-top: none !important;
    border-bottom: none !important;
    cursor: pointer !important;
    font-size: var(--sc-font-size-base) !important;
    font-weight: var(--sc-font-weight-normal) !important;
    line-height: var(--sc-line-height) !important;
    text-align: center !important;
}

#showcase-embed-widget .showcase-filter-horizontal ul.tag-filters-list li.active {
    background: var(--sc-color-bg-active) !important;
}

/* ─── Filter Bar — hierarchical (grid layout) ─── */
#showcase-embed-widget .showcase-filter-bar {
    margin-bottom: var(--sc-space-md) !important;
    padding: 12px var(--sc-space-md) !important;
    background: var(--sc-color-bg) !important;
    border: 1px solid var(--sc-color-border-light) !important;
    border-radius: var(--sc-radius-md) !important;
    color: var(--sc-color-text) !important;
    text-align: center !important;
    font-size: var(--sc-font-size-base) !important;
}
#showcase-embed-widget .showcase-filter-bar__groups {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--sc-space-sm) !important;
    align-items: flex-start !important;
    justify-content: center !important;
}
#showcase-embed-widget .showcase-filter-group {
    position: relative !important;
}
body #showcase-embed-widget .showcase-filter-clear,
body #showcase-embed-widget .showcase-filter-group__toggle {
    display: inline-flex; /* not important as it prevents clear from self hiding */
    align-items: center !important;
    gap: 6px !important;
    padding: var(--sc-space-sm) 14px !important;
    background: var(--sc-color-bg) !important;
    color: var(--sc-color-text) !important;
    border: 1px solid var(--sc-color-border) !important;
    border-radius: var(--sc-radius-sm) !important;
    font-size: var(--sc-font-size-sm) !important;
    font-weight: var(--sc-font-weight-semi) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    line-height: var(--sc-line-height) !important;
    text-align: center !important;
}
#showcase-embed-widget .showcase-filter-group__toggle:hover {
    background: var(--sc-color-bg-hover) !important;
}
#showcase-embed-widget .showcase-filter-group__toggle.open {
    background: var(--sc-color-bg-open) !important;
    border-color: #bbb !important;
}
#showcase-embed-widget .showcase-filter-group__arrow {
    font-size: 12px !important;
    transition: transform var(--sc-transition-fast) !important;
}
#showcase-embed-widget .showcase-filter-group__toggle.open .showcase-filter-group__arrow {
    transform: rotate(45deg) !important;
}
#showcase-embed-widget .showcase-filter-group__dropdown {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    z-index: 20 !important;
    min-width: 180px !important;
    padding: var(--sc-space-sm) 0 !important;
    background: var(--sc-color-bg) !important;
    border: 1px solid var(--sc-color-border) !important;
    border-radius: var(--sc-radius-sm) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1) !important;
}
#showcase-embed-widget .showcase-filter-group__dropdown.open {
    display: block !important;
}
#showcase-embed-widget .showcase-filter-group__item {
    display: flex !important;
    align-items: center !important;
    gap: var(--sc-space-sm) !important;
    padding: 6px 14px !important;
    font-size: var(--sc-font-size-sm) !important;
    color: var(--sc-color-text) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    background: transparent !important;
    border: none !important;
    font-weight: var(--sc-font-weight-normal) !important;
}
#showcase-embed-widget .showcase-filter-group__item:hover {
    background: #f5f5f5 !important;
}
#showcase-embed-widget .showcase-filter-group__item--inline {
    display: inline-flex !important;
    padding: var(--sc-space-sm) 14px !important;
    background: var(--sc-color-bg) !important;
    border: 1px solid var(--sc-color-border) !important;
    border-radius: var(--sc-radius-sm) !important;
}
#showcase-embed-widget .showcase-filter-group__item--all {
    font-weight: var(--sc-font-weight-semi) !important;
    border-bottom: 1px solid var(--sc-color-border-light) !important;
    padding-bottom: var(--sc-space-sm) !important;
    margin-bottom: 2px !important;
}
#showcase-embed-widget .showcase-filter-count {
    color: var(--sc-color-text-muted) !important;
    font-size: var(--sc-font-size-sm) !important;
}
#showcase-embed-widget .showcase-filter-checkbox {
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
    border: 1px solid var(--sc-color-border) !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
}

body #showcase-embed-widget .showcase-filter-clear {
    background-color: var(--sc-color-bg-hover) !important;
}

#showcase-embed-widget .showcase-filter-clear:hover {
    background: var(--sc-color-bg-hover) !important;
}

/* ─── Dark theme overrides for filter bar ─── */
#showcase-embed-widget .showcase-filter-bar.theme-dark {
    background: var(--sc-dark-bg) !important;
    border-color: var(--sc-dark-border) !important;
}
#showcase-embed-widget .showcase-filter-bar.theme-dark .showcase-filter-group__toggle {
    background: var(--sc-color-btn-bg) !important;
    border-color: var(--sc-dark-border) !important;
    color: var(--sc-dark-text) !important;
}
#showcase-embed-widget .showcase-filter-bar.theme-dark .showcase-filter-group__toggle:hover,
#showcase-embed-widget .showcase-filter-bar.theme-dark .showcase-filter-group__toggle.open {
    background: var(--sc-dark-bg-active) !important;
}
#showcase-embed-widget .showcase-filter-bar.theme-dark .showcase-filter-group__dropdown {
    background: var(--sc-color-btn-bg) !important;
    border-color: var(--sc-dark-border) !important;
}
#showcase-embed-widget .showcase-filter-bar.theme-dark .showcase-filter-group__item {
    color: var(--sc-dark-text) !important;
}
#showcase-embed-widget .showcase-filter-bar.theme-dark .showcase-filter-group__item:hover {
    background: var(--sc-dark-bg-hover) !important;
}
#showcase-embed-widget .showcase-filter-bar.theme-dark .showcase-filter-group__item--inline {
    background: var(--sc-color-btn-bg) !important;
    border-color: var(--sc-dark-border) !important;
    color: var(--sc-dark-text) !important;
}
#showcase-embed-widget .showcase-filter-bar.theme-dark .showcase-filter-group__item--all {
    border-bottom-color: var(--sc-dark-border) !important;
}
#showcase-embed-widget .showcase-filter-bar.theme-dark .showcase-filter-clear {
    background-color: #000 !important;
    border-color: var(--sc-dark-border) !important;
    color: var(--sc-dark-text) !important;
}

/* ─── Filter Vertical ─── */
#showcase-embed-widget .showcase-filter-vertical {
    display: inline-block !important;
    width: 210px !important;
    background: var(--sc-color-bg) !important;
    padding: var(--sc-space-sm) !important;
    border-radius: var(--sc-radius-md) !important;
    box-shadow: 0 0 10px var(--sc-color-shadow) !important;
    border: 1px solid var(--sc-color-border-heavy) !important;
}

#showcase-embed-widget .showcase-filter-vertical ul.tag-filters-list {
    list-style: none !important;
    margin: 0 auto 5px auto !important;
    padding: 0 !important;
}

#showcase-embed-widget .showcase-filter-vertical ul.tag-filters-list li {
    display: block !important;
    color: var(--sc-color-black) !important;
    font-size: var(--sc-font-size-base) !important;
    padding: 0.25em 1em !important;
    margin: 0 !important;
    cursor: pointer !important;
    border-bottom: 1px solid var(--sc-color-border) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    background: transparent !important;
    font-weight: var(--sc-font-weight-normal) !important;
    text-align: left !important;
    line-height: var(--sc-line-height) !important;
}
#showcase-embed-widget .showcase-filter-vertical ul.tag-filters-list li:last-child {
    border-bottom: none !important;
}

#showcase-embed-widget .showcase-filter-vertical ul.tag-filters-list li.active {
    font-weight: var(--sc-font-weight-black) !important;
}


/* ═══════════════════════════════════════════════════════
   Showcase Staff Widget — "Meet the Team"
   ═══════════════════════════════════════════════════════ */

/* ─── Carousel layout ─── */
#showcase-embed-widget .staff.showcase-grid.layout-carousel {
    position: initial !important;
    display: flex !important;
    gap: var(--sc-space-sm) !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

#showcase-embed-widget .staff.showcase-grid.layout-carousel .showcase-card {
    position: relative !important;
    scroll-snap-align: start !important;
    flex: 0 0 calc(100%) !important;
    flex-basis: calc(25% - 8px) !important;
    border-radius: var(--sc-radius-md) !important;
    overflow: hidden !important;
    transition: transform var(--sc-transition-slow) !important;
    background: var(--sc-color-bg-alt) !important;
    min-width: 200px !important;
    min-height: 250px !important;
}

#showcase-embed-widget .staff.showcase-grid.layout-carousel.is-centered {
    justify-content: center !important;
}

/* ─── Masonry layout ─── */
#showcase-embed-widget .staff.showcase-grid.layout-masonry {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--sc-space-sm) !important;
    justify-content: center !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

#showcase-embed-widget .staff.showcase-grid.layout-masonry .showcase-card {
    position: relative !important;
    scroll-snap-align: start !important;
    flex: 0 0 calc(100%) !important;
    flex-basis: calc(25% - 8px) !important;
    border-radius: var(--sc-radius-md) !important;
    overflow: hidden !important;
    transition: transform var(--sc-transition-slow) !important;
    min-width: 200px !important;
    min-height: 250px !important;
    background: var(--sc-color-bg-alt) !important;
}

/* ─── Column sizing ─── */
#showcase-embed-widget .staff.showcase-grid.cols-2 .showcase-card {
    flex-basis: calc(50% - 8px) !important;
}

#showcase-embed-widget .staff.showcase-grid.cols-3 .showcase-card {
    flex-basis: calc(33.33% - 8px) !important;
}

#showcase-embed-widget .staff.showcase-grid.cols-4 .showcase-card {
    flex-basis: calc(25% - 8px) !important;
}

#showcase-embed-widget .staff.showcase-grid.cols-5 .showcase-card {
    flex-basis: calc(20% - 8px) !important;
}

/* ─── Card image (profile photo) ─── */
#showcase-embed-widget .staff > .showcase-card > img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    object-position: center top !important;
    aspect-ratio: 3/4 !important;
    border-radius: 0 !important;
    display: block !important;
}

/* ─── Hover overlay ─── */
#showcase-embed-widget .staff .showcase-card .staff-profile {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0 !important;
    position: absolute !important;
    top: initial !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 120px !important;
    background: var(--sc-color-bg-card-hover) !important;
    text-align: left !important;
    transition: opacity var(--sc-transition-slower), visibility var(--sc-transition-slower) !important;
    padding: 0.5em !important;
    margin: 0 !important;
}

#showcase-embed-widget .staff .showcase-card .staff-profile .name {
    font-weight: var(--sc-font-weight-black) !important;
    font-size: var(--sc-font-size-2xl) !important;
    color: var(--sc-color-text) !important;
    margin-bottom: 0 !important;
    pointer-events: none !important;
    text-align: left !important;
}

#showcase-embed-widget .staff .showcase-card .staff-profile .job_title {
    color: var(--sc-color-text) !important;
    font-size: var(--sc-font-size-xs) !important;
    text-align: left !important;
}

#showcase-embed-widget .staff .showcase-card .staff-profile .cta {
    display: flex !important;
    margin-top: 1em !important;
    text-align: center !important;
    justify-content: center !important;
}

#showcase-embed-widget .staff .showcase-card .staff-profile .cta a.button {
    display: inline-block !important;
    background: var(--sc-color-btn-bg) !important;
    color: var(--sc-color-btn-text) !important;
    padding: 0.5em 1em !important;
    border-radius: var(--sc-radius-sm) !important;
    text-decoration: none !important;
    margin: 1px 2px !important;
    font-size: var(--sc-font-size-xs) !important;
    font-weight: var(--sc-font-weight-light) !important;
    line-height: var(--sc-line-height) !important;
    width: auto !important;
    max-width: auto !important;
}

#showcase-embed-widget .staff .showcase-card .staff-profile .cta a.button svg.icon {
    width: var(--sc-font-size-xs) !important;
    height: var(--sc-font-size-xs) !important;
    display: inline-block !important;
    vertical-align: sub !important;
}

/* ─── Carousel arrows ─── */
#showcase-embed-widget .staff .showcase-carousel-prev,
#showcase-embed-widget .staff .showcase-carousel-next {
    position: absolute !important;
    cursor: pointer !important;
    top: 50% !important;
    bottom: 50% !important;
    background: var(--sc-color-bg) !important;
    padding: 5px !important;
    border-radius: var(--sc-radius-round) !important;
    box-shadow: 0 0 5px #6f6e6e !important;
    transform: translate(0, -50%) !important;
    width: 32px !important;
    height: 32px !important;
    border: none !important;
    z-index: 5 !important;
}


/* ═══════════════════════════════════════════════════════
   DARK Mode
   ═══════════════════════════════════════════════════════ */
#showcase-embed-widget .showcase-filter-horizontal.theme-dark ul.tag-filters-list li {
    background: var(--sc-dark-bg) !important;
    color: var(--sc-color-white) !important;
}
#showcase-embed-widget .showcase-filter-horizontal.theme-dark ul.tag-filters-list li.active {
    background: #111 !important;
}

#showcase-embed-widget .picture_gallery.theme-dark .showcase-carousel-prev, 
#showcase-embed-widget .picture_gallery.theme-dark .showcase-carousel-next,
#showcase-embed-widget .staff.theme-dark .showcase-carousel-prev,
#showcase-embed-widget .staff.theme-dark .showcase-carousel-next {
    background: var(--sc-dark-bg) !important;
}

#showcase-embed-widget .picture_gallery.theme-dark .showcase-carousel-prev img, 
#showcase-embed-widget .picture_gallery.theme-dark .showcase-carousel-next img,
#showcase-embed-widget .staff.theme-dark .showcase-carousel-prev img,
#showcase-embed-widget .staff.theme-dark .showcase-carousel-next img {
    filter: invert() !important;
}

#showcase-embed-widget .showcase-filter-horizontal.theme-dark ul.tag-filters-list {
    border: none !important;
    box-shadow: none !important;
}

#showcase-embed-widget .picture_gallery.theme-dark .showcase-card .staff-profile,
#showcase-embed-widget .staff.theme-dark .showcase-card .staff-profile {
    background: #0000009c !important;
}

#showcase-embed-widget .picture_gallery.theme-dark .showcase-card .staff-profile .name,
#showcase-embed-widget .picture_gallery.theme-dark .showcase-card .staff-profile .job_title,
#showcase-embed-widget .staff.theme-dark .showcase-card .staff-profile .name,
#showcase-embed-widget .staff.theme-dark .showcase-card .staff-profile .job_title {
    color: var(--sc-color-white) !important;
    pointer-events: none !important;
}

#showcase-embed-widget .picture_gallery.theme-dark.showcase-grid.layout-filter,
#showcase-embed-widget .showcase-filter-vertical.theme-dark {
    background: var(--sc-dark-bg) !important;
}

#showcase-embed-widget .staff.theme-dark .showcase-card {
    background: var(--sc-dark-bg-hover) !important;
}

#showcase-embed-widget .showcase-filter-vertical.theme-dark h4,
#showcase-embed-widget .showcase-filter-vertical.theme-dark ul.tag-filters-list li {
    color: var(--sc-color-white) !important;
}


/* ═══════════════════════════════════════════════════════
   Staff Profile Popup
   ═══════════════════════════════════════════════════════ */

/* Overlay — covers the viewport, hidden by default */
#showcase-embed-widget .showcase-profile-popup {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity var(--sc-transition-med), visibility var(--sc-transition-med) !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Visible state — toggled by JS via aria-hidden */
#showcase-embed-widget .showcase-profile-popup[aria-hidden="false"] {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Semi-transparent backdrop */
#showcase-embed-widget .showcase-profile-popup__backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: var(--sc-color-bg-overlay) !important;
}

#showcase-embed-widget .showcase-profile-popup__columns {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: end !important;
    text-align: left !important;
}

#showcase-embed-widget .showcase-profile-popup__columns p {
    font-size: var(--sc-font-size-sm) !important;
    margin: var(--sc-space-sm) 0 !important;
    color: var(--sc-color-text) !important;
    font-weight: var(--sc-font-weight-normal) !important;
    line-height: var(--sc-line-height) !important;
}

#showcase-embed-widget .showcase-profile-popup__col:nth-child(1) {
    min-width: 35% !important;
}

#showcase-embed-widget .showcase-profile-popup__col:nth-child(2) {
    padding: 0 1em !important;
}


/* Panel card */
#showcase-embed-widget .showcase-profile-popup__panel {
    position: relative !important;
    background: var(--sc-color-bg) !important;
    border-radius: var(--sc-radius-lg) !important;
    padding: var(--sc-space-lg) !important;
    max-width: 600px !important;
    width: 95vw !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.25) !important;
    transform: scale(0.92) translateY(16px) !important;
    transition: transform var(--sc-transition-med) !important;
    border: none !important;
    color: var(--sc-color-text) !important;
}
#showcase-embed-widget .showcase-profile-popup[aria-hidden="false"] .showcase-profile-popup__panel {
    transform: scale(1) translateY(0) !important;
}

/* Close button */
#showcase-embed-widget .showcase-profile-popup__close {
    position: absolute !important;
    top: 12px !important;
    right: 14px !important;
    background: none !important;
    border: none !important;
    font-size: var(--sc-font-size-3xl) !important;
    line-height: 1 !important;
    cursor: pointer !important;
    color: var(--sc-color-text-muted) !important;
    transition: color var(--sc-transition-fast) !important;
    padding: 4px !important;
    margin: 0 !important;
}
#showcase-embed-widget .showcase-profile-popup__close:hover {
    color: var(--sc-color-text) !important;
}

/* Avatar */
#showcase-embed-widget .showcase-profile-popup__photo {
    width: 100% !important;
    height: 240px !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: var(--sc-radius-md) !important;
    margin: 0 auto !important;
    display: block !important;
    aspect-ratio: 3/4 !important;
}

/* Name */
#showcase-embed-widget .showcase-profile-popup__col h3 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    text-align: left !important;
}

#showcase-embed-widget .showcase-profile-popup__fname {
    display: inline-block !important;
    font-size: var(--sc-font-size-4xl) !important;
    font-weight: var(--sc-font-weight-black) !important;
    color: var(--sc-color-heading) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

#showcase-embed-widget .showcase-profile-popup__lname {
    display: inline-block !important;
    font-size: var(--sc-font-size-xl) !important;
    font-weight: var(--sc-font-weight-thin) !important;
    color: var(--sc-color-heading) !important;
    margin: 0 10px !important;
}

#showcase-embed-widget .showcase-profile-popup__col em.showcase-profile-popup__job {
    display: block !important;
    font-size: 12px !important;
    margin-bottom: 15px !important;
    font-style: italic !important;
    color: var(--sc-color-text) !important;
}

#showcase-embed-widget .showcase-profile-popup__bio p {
    font-size: var(--sc-font-size-sm) !important;
    color: var(--sc-color-text) !important;
    line-height: var(--sc-line-height) !important;
    padding: 1em 0 0 !important;
}

/* Book Online button */
#showcase-embed-widget .showcase-profile-popup__book {
    /*display: inline-block !important; */
    background: var(--sc-color-btn-bg) !important;
    color: var(--sc-color-btn-text) !important;
    padding: 0.25em 1em !important;
    margin-top: 0 !important;
    border-radius: var(--sc-radius-sm) !important;
    text-decoration: none !important;
    font-weight: var(--sc-font-weight-light) !important;
    font-size: var(--sc-font-size-xs) !important;
    transition: background var(--sc-transition-fast) !important;
    line-height: var(--sc-line-height) !important;
    border: none !important;
    cursor: pointer !important;
}
#showcase-embed-widget .showcase-profile-popup__book:hover {
    background: var(--sc-color-btn-hover) !important;
}


/* Popup detail spans — explicit default font size */
#showcase-embed-widget .showcase-profile-popup__job,
#showcase-embed-widget .showcase-profile-popup__age,
#showcase-embed-widget .showcase-profile-popup__experience,
#showcase-embed-widget .showcase-profile-popup__awards,
#showcase-embed-widget .showcase-profile-popup__lang,
#showcase-embed-widget .showcase-profile-popup__price,
#showcase-embed-widget .showcase-profile-popup__gen,
#showcase-embed-widget .showcase-profile-popup__spec,
#showcase-embed-widget .showcase-profile-popup__bio,
#showcase-embed-widget .showcase-profile-popup__location,
#showcase-embed-widget .showcase-profile-popup__gallery {
    text-transform: capitalize !important;
    font-size: var(--sc-font-size-xs) !important;
    color: var(--sc-color-text) !important;
    line-height: var(--sc-line-height) !important;
}

/* Auto-hide elements when they have no content */
/* Auto-hide the whole paragraph when the spec span has no content */
#showcase-embed-widget h3 span.showcase-profile-popup__fname:empty,
#showcase-embed-widget h3 span.showcase-profile-popup__lname:empty,
#showcase-embed-widget p:has(.showcase-profile-popup__job:empty),
#showcase-embed-widget p:has(.showcase-profile-popup__experience:empty),
#showcase-embed-widget p:has(.showcase-profile-popup__awards:empty),
#showcase-embed-widget p:has(.showcase-profile-popup__lang:empty),
#showcase-embed-widget p:has(.showcase-profile-popup__price:empty),
#showcase-embed-widget p:has(.showcase-profile-popup__gen:empty),
#showcase-embed-widget p:has(.showcase-profile-popup__spec:empty),
#showcase-embed-widget p:has(.showcase-profile-popup__bio:empty),
#showcase-embed-widget p:has(.showcase-profile-popup__location:empty),
#showcase-embed-widget p:has(.showcase-profile-popup__gallery:empty),
#showcase-embed-widget p:has(.showcase-profile-popup__book[href=""]) {
    display: none !important;
}




/* ─── Dark-theme overrides for popup ─── */
#showcase-embed-widget .showcase-profile-popup.theme-dark .showcase-profile-popup__panel {
    background: var(--sc-dark-bg) !important;
}
#showcase-embed-widget .showcase-profile-popup.theme-dark .showcase-profile-popup__close,
#showcase-embed-widget .showcase-profile-popup.theme-dark .showcase-profile-popup__fname,
#showcase-embed-widget .showcase-profile-popup.theme-dark .showcase-profile-popup__lname,
#showcase-embed-widget .showcase-profile-popup.theme-dark p,
#showcase-embed-widget .showcase-profile-popup.theme-dark b,
#showcase-embed-widget .showcase-profile-popup.theme-dark span,
#showcase-embed-widget .showcase-profile-popup.theme-dark em {
    color: var(--sc-dark-text) !important;
}
#showcase-embed-widget .showcase-profile-popup.theme-dark .showcase-profile-popup__close:hover {
    color: var(--sc-color-white) !important;
}


/* ─── Debug ─── */
#showcase-embed-widget pre {
    clear: both !important;
    display: block !important;
    float: none !important;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !important;
    font-size: var(--sc-font-size-sm) !important;
    background: #f5f5f5 !important;
    color: var(--sc-color-heading) !important;
    padding: 1em !important;
    border-radius: var(--sc-radius-sm) !important;
    overflow-x: auto !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
}


/* ═══════════════════════════════════════════════════════
   Mobile
   ═══════════════════════════════════════════════════════ */
@media (max-width: 600px) {

    #showcase-embed-widget .showcase-filter-vertical,
    #showcase-embed-widget .picture_gallery.showcase-grid.layout-filter {
        float: none !important;
        width: 100% !important;
    }

    #showcase-embed-widget .picture_gallery.showcase-grid.layout-filter {
        margin-top: 1em !important;
    }

    #showcase-embed-widget .showcase-filter-vertical .tag-filters-list {
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    #showcase-embed-widget .showcase-filter-vertical .tag-filters-list li {
        display: inline-block !important;
        margin: 5px !important;
        padding: 10px !important;
        background: var(--sc-color-bg-open) !important;
        border-radius: var(--sc-radius-md) !important;
        border: none !important;
    }

    #showcase-embed-widget .showcase-carousel-prev {
        left: 0 !important;
    }

    #showcase-embed-widget .showcase-carousel-next {
        right: 0 !important;
    }

    /* Staff cards — stack to 2-col then 1-col */
    #showcase-embed-widget .staff.showcase-grid .showcase-card {
        flex-basis: calc(50% - 8px) !important;
        min-width: 150px !important;
    }
}

@media (max-width: 480px) {
    #showcase-embed-widget .showcase-profile-popup__columns {
        flex-wrap: wrap !important;
    }
    #showcase-embed-widget .showcase-profile-popup__col:nth-child(2) {
        padding: 1em 0 !important;
    }

    /* Staff cards — single column on small screens */
    #showcase-embed-widget .staff.showcase-grid .showcase-card {
        flex-basis: 100% !important;
    }
}