/* ================================================================
   IvoControlStyles.css
   IVO, Inc. — Control-Level Styles
   Version: 1.4  (audit-cleaned)

   MIGRATION STATUS:
     [x] uc_UpcomingEventsBS5.ascx
     [x] CatBrowserBS5.ascx
     [ ] DisplayArticlebs5.ascx
     [x] uc_QuickMenu.ascx
     [ ] uc_SlideshowBS5.ascx
     [x] uc_ArtSubArtBS5.ascx
     [x] ItemGridBS5.ascx (split card + gallery)

   All color values reference --dp-* or --ivo-* variables.
   No hardcoded brand hex values remain.
   ================================================================ */


/* ════════════════════════════════════════════════════════════════
   uc_UpcomingEventsBS5 — EVENTS CONTROL
   ════════════════════════════════════════════════════════════════ */
.ivo-main-article-wrap {
    background: var(--dp-section-quickmenu-bg);
    border-left: 4px solid var(--ivo-royal);
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 10px;
}

.ivo-upcoming-events {
    width: 100%;
}

.ivo-upcoming-intro {
    width: 100%;
    padding-bottom: 20px;
}

.ivo-events-layout-above .ivo-upcoming-intro {
    margin-bottom: 1.5rem;
}

.ivo-events-layout-left .ivo-upcoming-divider {
    display: none;
}

.ivo-events-layout-left .ivo-events-intro-col {
    padding-top: .25rem;
}

.ivo-upcoming-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent 0%, var(--dp-events-divider-color) 20%, var(--dp-events-divider-color) 80%, transparent 100%);
    margin-bottom: 24px;
    opacity: .5;
}

.ivo-upcoming-admin {
    background: var(--dp-events-admin-bg);
    border: 1px solid var(--dp-events-admin-border);
    border-radius: 8px;
    padding: 10px 14px;
}

.ivo-upcoming-pills {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}

    .ivo-upcoming-pills::-webkit-scrollbar {
        display: none;
    }

.ivo-pill {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--dp-pill-border);
    background: transparent;
    color: var(--dp-pill-color);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s;
}

    .ivo-pill .ivo-pill-count {
        font-size: 11px;
        opacity: .6;
        margin-left: 4px;
    }

    .ivo-pill.active {
        background: var(--dp-pill-active-bg);
        color: var(--dp-pill-active-color);
        border-color: var(--dp-pill-active-border);
    }

.ivo-upcoming-cards {
    align-items: stretch;
}
/* ── Last card fill logic ─────────────────────────────────────
   2-col (sm): last card alone → full width
   3-col (lg): last card alone → full width
               last card 2nd in row → half width (2 fill row equally)
──────────────────────────────────────────────────────────────── */

/* sm: 2-col — last card alone on its row */
@media (min-width: 576px) and (max-width: 991px) {
    .ivo-upcoming-cards > .col-sm-6:last-child:nth-child(odd) {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* lg: 3-col — last card positions */
@media (min-width: 992px) {
    /* alone on its row → stretch full width */
    .ivo-upcoming-cards > .col-sm-6:last-child:nth-child(3n+1) {
        flex: 0 0 100%;
        max-width: 100%;
    }
    /* 2nd in its row → both this card AND the one before share equally at 50% */
    .ivo-upcoming-cards > .col-sm-6:last-child:nth-child(3n+2),
    .ivo-upcoming-cards > .col-sm-6:nth-last-child(2):nth-child(3n+1) {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

.ivo-event-card {
    min-width: 0;
    background: linear-gradient(160deg, var(--dp-event-card-grad-start) 0%, var(--dp-event-card-grad-end) 55%);
    border: 0.5px solid var(--dp-event-card-border);
    border-top: 2px solid var(--dp-event-card-border-top);
    border-radius: var(--dp-event-card-radius);
    padding: 16px 20px 18px;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s;
}

    .ivo-event-card:hover {
        box-shadow: 0 4px 18px var(--dp-event-card-shadow);
    }

.ivo-event-date-strip {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 10px;
    min-height: 36px;
}

.ivo-event-date-icon {
    font-size: 11px;
    color: var(--dp-event-date-color);
    opacity: .75;
}

.ivo-event-date {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ivo-event-day {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--dp-event-date-color);
    opacity: .7;
}

.ivo-event-datenum {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--dp-event-date-color);
}

.ivo-card-rule {
    width: 100%;
    height: 1px;
    background: var(--dp-event-rule-color);
    margin-bottom: 10px;
}

.ivo-event-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--dp-event-title-color);
    margin: 0 0 8px;
    line-height: 1.35;
}

.ivo-event-desc {
    font-size: 13px;
    color: var(--dp-event-desc-color);
    line-height: 1.55;
    margin: 0;
}

.ivo-event-spacer {
    flex: 1;
    min-height: 12px;
}

.ivo-event-footer {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    min-height: 26px;
    border-top: 1px solid var(--dp-event-footer-border);
    padding-top: 10px;
}

.ivo-event-badge-closed {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 6px;
    background: var(--dp-event-closed-bg);
    color: var(--dp-event-closed-color);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.ivo-event-link {
    font-size: 12px;
    font-weight: 500;
    color: var(--dp-event-link-color);
    text-decoration: none;
}

    .ivo-event-link:hover {
        text-decoration: underline;
    }

.ivo-upcoming-empty {
    padding: 24px;
    text-align: center;
    font-size: 13px;
    color: var(--dp-events-empty-color);
    border: 0.5px solid var(--dp-events-empty-border);
    border-radius: 12px;
    background: var(--dp-events-empty-bg);
}

/* Repeater emits a <span> wrapper per item — make it invisible to the grid */
.ivo-upcoming-cards > span {
    display: contents;
}

@media (max-width: 767px) {
    .ivo-upcoming-cards {
        row-gap: 1rem;
    }
}


/* ════════════════════════════════════════════════════════════════
   CatBrowserBS5 — PRODUCTS CONTROL
   ════════════════════════════════════════════════════════════════ */

/* ── Admin bar ──────────────────────────────────────────────── */
.ivo-cb-admin {
    background: var(--dp-cb-admin-gradient);
    padding: .45rem 0;
}

.ivo-cb-admin-btn {
    font-size: .75rem;
    font-weight: 600;
    color: #fff !important;
    background: var(--ivo-royal);
    border: 1px solid var(--ivo-royal);
    border-radius: 6px;
    padding: 4px 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transition: background .15s;
}

    .ivo-cb-admin-btn:hover {
        background: var(--dp-cb-btn-hover);
        border-color: var(--dp-cb-btn-hover);
        color: #fff !important;
    }

/* ── Color/gradient live preview bar ────────────────────────── */
.ivo-cb-color-preview {
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--ivo-border);
    background: var(--ivo-white);
    background-image: linear-gradient(45deg, var(--ivo-off-white) 25%, transparent 25%), linear-gradient(-45deg, var(--ivo-off-white) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--ivo-off-white) 75%), linear-gradient(-45deg, transparent 75%, var(--ivo-off-white) 75%);
    background-size: 12px 12px;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .ivo-cb-color-preview.ivo-cb-has-value::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--ivo-cb-preview-bg, transparent);
    }

.ivo-cb-color-preview-label {
    position: relative;
    z-index: 1;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(0,0,0,.55);
    text-shadow: 0 0 3px rgba(255,255,255,.7);
    pointer-events: none;
}

.ivo-cb-color-preview.ivo-cb-invalid {
    border-color: var(--dp-ui-warning);
}

    .ivo-cb-color-preview.ivo-cb-invalid .ivo-cb-color-preview-label {
        color: var(--dp-ui-warning-dark);
    }

/* ── Gradient/color samples ─────────────────────────────────── */
.ivo-cb-samples {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
}

.ivo-cb-samples-label {
    font-size: .68rem;
    color: var(--ivo-text-muted);
    margin-right: .2rem;
}

.ivo-cb-sample {
    width: 28px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid var(--ivo-border);
    padding: 0;
    cursor: pointer;
    transition: transform .12s, box-shadow .12s, border-color .12s;
}

    .ivo-cb-sample:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(0,0,0,.15);
        border-color: var(--ivo-royal);
    }

.ivo-cb-sample-clear {
    background: var(--ivo-white);
    color: var(--ivo-text-muted);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .ivo-cb-sample-clear:hover {
        background: var(--dp-ui-danger-bg);
        color: var(--dp-ui-danger);
        border-color: var(--dp-ui-danger);
    }

/* ── Icons strip ─────────────────────────────────────────────── */
.ivo-cb-strip--icons {
    background: var(--ivo-navy);
    padding: 1.25rem 0 1.5rem;
    border-bottom: 3px solid var(--ivo-gold);
}

.ivo-cb-scroll {
    display: flex;
    gap: .85rem;
    overflow-x: auto;
    padding: .25rem .05rem .5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
}

    .ivo-cb-scroll:active {
        cursor: grabbing;
    }

    .ivo-cb-scroll::-webkit-scrollbar {
        height: 3px;
    }

    .ivo-cb-scroll::-webkit-scrollbar-track {
        background: rgba(255,255,255,.08);
    }

    .ivo-cb-scroll::-webkit-scrollbar-thumb {
        background: var(--ivo-gold);
        border-radius: 2px;
    }

/* ── Icon card ─────────────────────────────────────────────── */
.ivo-cb-cat-card {
    flex: 0 0 148px;
    background: transparent;
    border: 2px solid var(--dp-cb-card-border);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    scroll-snap-align: start;
    transition: all .22s cubic-bezier(.25,.8,.25,1);
    text-decoration: none;
    display: flex;
    flex-direction: column;
}

    .ivo-cb-cat-card:hover {
        border-color: var(--dp-cb-card-hover-border);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0,0,0,.35);
    }

    .ivo-cb-cat-card.ivo-active {
        border-color: var(--dp-cb-card-border-active);
        box-shadow: 0 6px 24px var(--dp-cb-card-active-shadow);
    }

.ivo-cb-img-wrap {
    width: 100%;
    height: 96px;
    background: var(--dp-cb-card-image-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    overflow: hidden;
}

    .ivo-cb-img-wrap img {
        max-height: 78px;
        max-width: 100%;
        object-fit: contain;
        transition: transform .25s ease;
    }

.ivo-cb-cat-card:hover .ivo-cb-img-wrap img,
.ivo-cb-cat-card.ivo-active .ivo-cb-img-wrap img {
    transform: scale(1.06);
}

.ivo-cb-card-body {
    padding: .55rem .65rem .6rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    background: var(--dp-cb-card-body-bg);
}

.ivo-cb-cat-name {
    font-size: .67rem;
    font-weight: 700;
    color: var(--dp-cb-card-name-color);
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1.3;
}

.ivo-cb-cat-card.ivo-active .ivo-cb-cat-name {
    color: var(--dp-cb-card-name-active);
}

.ivo-cb-badge {
    display: inline-block;
    font-size: .6rem;
    font-weight: 600;
    background: var(--dp-cb-badge-bg);
    color: var(--dp-cb-badge-color);
    border-radius: 20px;
    padding: 1px 7px;
    align-self: flex-start;
}

.ivo-cb-cat-card.ivo-active .ivo-cb-badge {
    background: var(--dp-cb-badge-active-bg);
    color: var(--dp-cb-badge-active-color);
}

/* ── Pills (button mode) strip ─────────────────────────────── */
.ivo-cb-strip--btns {
    background: var(--dp-cb-pills-strip-bg);
    padding: 1.1rem 0;
    border-bottom: 3px solid var(--ivo-gold);
}

.ivo-cb-pill-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.ivo-cb-pill {
    border: 2px solid var(--dp-cb-pill-border-default);
    background: rgba(255,255,255,0.10);
    color: var(--dp-cb-pill-text-default);
    border-radius: 25px;
    padding: .42rem 1.1rem;
    font-family: var(--ivo-font-body);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    line-height: 1;
}

    .ivo-cb-pill:hover {
        border-color: var(--dp-cb-pill-hover-border);
        color: var(--dp-cb-pill-hover-color);
        background: var(--dp-cb-pill-hover-bg);
    }

    .ivo-cb-pill.ivo-active {
        background: var(--dp-cb-pill-active-bg);
        border-color: var(--dp-cb-pill-active-border);
        color: var(--dp-cb-pill-active-color);
    }

.ivo-cb-badge-pill {
    background: rgba(255,255,255,0.15);
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 800;
    padding: 0 7px;
    color: inherit;
}

.ivo-cb-pill.ivo-active .ivo-cb-badge-pill {
    background: var(--dp-cb-pill-active-badge-bg);
    color: var(--dp-cb-pill-active-badge-clr);
}

/* ── Grid header ─────────────────────────────────────────────── */
.ivo-cb-grid-header {
    padding: 1.75rem 0 1rem;
}

.ivo-cb-grid-label {
    font-family: var(--ivo-font-serif);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ivo-navy);
    margin: 0;
    line-height: 1.1;
}

.ivo-cb-gold-bar {
    height: 3px;
    width: 44px;
    background: var(--ivo-gold);
    border-radius: 2px;
    margin-top: .5rem;
}

/* ── Product cards (item grid) ───────────────────────────────── */
.ivo-cb-grid-wrap {
    padding-bottom: 3rem;
}

.ivo-cb-product-card {
    background: var(--ivo-white);
    border-radius: 14px;
    z-index: 0;
    overflow: hidden;
    box-shadow: 0 2px 6px var(--dp-cb-card-shadow-sm), 0 1px 2px var(--dp-cb-card-accent-shadow);
    transition: box-shadow .22s ease, transform .22s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--dp-cb-card-text);
    position: relative;
    cursor: pointer;
}

    .ivo-cb-product-card:hover {
        box-shadow: 0 10px 32px var(--dp-cb-card-shadow-lg);
        transform: translateY(-4px);
        color: var(--dp-cb-card-text);
    }

    .ivo-cb-product-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--ivo-royal);
        opacity: 0;
        transition: opacity .22s;
    }

    .ivo-cb-product-card:hover::before {
        opacity: 1;
    }

.ivo-cb-product-img-wrap {
    height: 188px;
    overflow: visible;
    position: relative;
}

    .ivo-cb-product-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .28s ease;
        overflow: hidden;
    }

.ivo-cb-product-card:hover .ivo-cb-product-img-wrap img {
    transform: scale(1.05);
}

.ivo-cb-remark {
    position: absolute;
    top: .65rem;
    left: .65rem;
    background: var(--ivo-gold);
    color: var(--ivo-navy);
    font-size: .62rem;
    font-weight: 800;
    border-radius: 20px;
    padding: 2px 9px;
    letter-spacing: .04em;
    text-transform: uppercase;
    z-index: 1;
}

.ivo-cb-product-body {
    padding: .95rem 1rem 1.1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ivo-cb-product-name {
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ivo-navy);
    margin-bottom: auto;
    padding-bottom: .75rem;
}

.ivo-cb-product-price {
    font-family: var(--ivo-font-serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ivo-gold);
    margin-bottom: .7rem;
}

.ivo-cb-btn-view {
    display: block;
    background: var(--ivo-royal);
    color: var(--ivo-white);
    text-align: center;
    border-radius: 8px;
    padding: .48rem .75rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    margin-top: auto;
    transition: background .18s;
}

.ivo-cb-product-card:hover .ivo-cb-btn-view {
    background: var(--dp-cb-btn-hover);
}

/* ── Admin: Add Items bar ────────────────────────────────────── */
.ivo-cb-add-bar {
    margin-bottom: 1.1rem;
    margin-top: .25rem;
}

.ivo-cb-add-btn {
    font-size: .78rem;
    font-weight: 700;
    color: var(--dp-cb-add-btn-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .38rem .95rem;
    background: var(--dp-cb-add-btn-bg);
    border: 1px dashed var(--dp-cb-add-btn-border);
    border-radius: 7px;
    transition: background .15s, border-color .15s;
}

    .ivo-cb-add-btn:hover {
        background: var(--dp-cb-add-btn-hover-bg);
        border-color: var(--dp-cb-add-btn-hover-border);
        color: var(--dp-cb-add-btn-hover-color);
    }

    .ivo-cb-add-btn i {
        color: var(--dp-cb-add-btn-icon);
    }

/* ── Item category pills ─────────────────────────────────────── */
.ivo-cb-item-cats {
    display: flex;
    flex-wrap: wrap;
    gap: .28rem;
    padding: .5rem .75rem .6rem;
    border-top: 1px solid var(--dp-cb-item-cats-border);
}

.ivo-cb-item-cat-pill {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: 20px;
    padding: 2px 8px;
    white-space: nowrap;
    line-height: 1.6;
    display: inline-block;
}

.ivo-cb-pill-c1 {
    color: var(--ivo-white);
    background: var(--dp-cb-pill-c1-bg);
}

.ivo-cb-pill-c2 {
    color: var(--ivo-white);
    background: var(--dp-cb-pill-c2-bg);
}

.ivo-cb-pill-c3 {
    color: var(--dp-cb-pill-c3-color);
    background: var(--dp-cb-pill-c3-bg);
}

/* ── Coming soon / sold out / slots ─────────────────────────── */
.ivo-cb-coming-soon-badge {
    position: absolute;
    top: .55rem;
    left: .55rem;
    z-index: 2;
    background: var(--ivo-gold);
    color: var(--ivo-navy);
    font-size: .6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: 20px;
    padding: 2px 9px;
}

.ivo-cb-sold-out {
    color: var(--dp-cb-sold-out-color);
    font-size: .75rem;
    font-weight: 700;
    margin-bottom: .5rem;
    display: block;
}

.ivo-cb-slots-avail {
    color: var(--dp-cb-slots-avail-color);
    font-size: .75rem;
    font-weight: 700;
    margin-bottom: .5rem;
    display: block;
}

.ivo-cb-btn-soldout {
    background: var(--dp-cb-btn-soldout-bg) !important;
    cursor: default;
}

.ivo-cb-btn-comingsoon {
    background: var(--ivo-gold) !important;
    color: var(--ivo-navy) !important;
    font-size: .72rem;
    cursor: default;
}

/* ── Admin: edit overlay ─────────────────────────────────────── */
.ivo-cb-item {
    position: relative;
}

.ivo-cb-edit-btn {
    position: absolute;
    top: .55rem;
    right: .55rem;
    z-index: 10;
    background: rgba(19,70,160,0.85); /* intentional: semi-transparent overlay needs raw rgba */
    color: var(--ivo-white);
    font-size: .72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    transition: background .15s;
}

    .ivo-cb-edit-btn:hover {
        background: var(--dp-cb-btn-hover);
    }

@keyframes ivoCbFadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ivo-cb-item {
    animation: ivoCbFadeUp .35s ease both;
}


/* ════════════════════════════════════════════════════════════════
   DisplayArticlebs5 — PENDING MIGRATION
   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   uc_QuickMenu — QUICK MENU CONTROL
   ════════════════════════════════════════════════════════════════ */

.qm-wrap {
    width: 100%;
}

.qm-intro {
    margin-bottom: 1.5rem;
}

.qm-empty {
    padding: 24px;
    text-align: center;
    font-size: 13px;
    color: var(--dp-qm-empty-color);
    border: 0.5px dashed var(--dp-qm-empty-border);
    border-radius: 8px;
}

.qm-settings-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
}

    .qm-settings-checks .form-check-label,
    .qm-settings-checks label {
        color: var(--bs-body-color, #212529);
    }

.qm-list-wrap {
    width: 100%;
}

.qm-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1.5rem 1.25rem;
    width: 100%;
}

@media (max-width: 359px) {
    .qm-list-grid {
        grid-template-columns: 1fr;
    }
}

.qm-list-col {
    min-width: 0;
}

.qm-list-num {
    font-size: 20px;
    font-weight: 800;
    color: var(--dp-qm-list-num-color);
    line-height: 1;
    margin-bottom: 4px;
    font-family: var(--ivo-font-serif);
}

.qm-list-head {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--dp-qm-accent-color);
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--dp-qm-head-border);
}

.qm-list-link {
    display: block;
    font-size: 13px;
    color: var(--dp-qm-list-link-color);
    text-decoration: none;
    margin-bottom: 7px;
    transition: color .18s;
    line-height: 1.3;
}

    .qm-list-link:hover {
        color: var(--dp-qm-accent-color);
        text-decoration: none;
    }

/* ── Card mode ───────────────────────────────────────────────── */
.qm-card-section {
    background: var(--dp-qm-dark-bg);
    border-radius: 10px;
    padding: 28px 24px;
}

.qm-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
    gap: 14px;
    grid-auto-flow: dense;
}

.qm-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease;
    max-height: 125px;
}

    .qm-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 36px rgba(0,0,0,.45);
    }

        .qm-card:hover .qm-card-bg {
            transform: scale(1.05);
        }

    .qm-card:focus-visible {
        outline: 2px solid var(--dp-qm-accent-color);
        outline-offset: 2px;
    }

.qm-card-tall {
    grid-row: span 2;
}

.qm-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .4s ease;
}

/* Gradient fallbacks (no image) — use brand gradient ramps */
.qm-grad-a {
    background: linear-gradient(140deg, var(--ivo-navy) 0%, var(--ivo-navy-mid) 40%, var(--ivo-royal) 75%, var(--ivo-blue-light) 100%);
}

.qm-grad-b {
    background: linear-gradient(140deg, var(--ivo-navy) 0%, var(--ivo-navy-mid) 40%, var(--ivo-blue-mid) 70%, var(--ivo-blue-mid) 100%);
}

.qm-grad-c {
    background: linear-gradient(140deg, var(--ivo-navy) 0%, var(--ivo-navy-mid) 45%, var(--ivo-royal) 80%, var(--ivo-blue-light) 100%);
}

.qm-grad-d {
    background: linear-gradient(140deg, var(--ivo-navy-mid) 0%, var(--ivo-navy-mid) 45%, var(--ivo-blue-mid) 85%, var(--ivo-blue-light) 100%);
}

.qm-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6,21,35,.05) 0%, rgba(6,21,35,.60) 55%, rgba(6,21,35,.90) 100%);
}

.qm-card-no-img .qm-card-overlay {
    background: linear-gradient(180deg, rgba(6,21,35,.10) 0%, rgba(6,21,35,.40) 50%, rgba(6,21,35,.70) 100%);
}

.qm-card-body {
    position: relative;
    z-index: 2;
    padding: 14px 16px;
}

.qm-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--dp-qm-card-title-color);
    margin: 0 0 4px;
    line-height: 1.25;
}

.qm-card-tall .qm-card-title {
    font-size: 17px;
}

.qm-card-desc {
    display: block;
    font-size: 11px;
    font-style: italic;
    color: rgba(255,255,255,0.60);
    margin-bottom: 5px;
    line-height: 1.4;
}

.qm-card-sub {
    font-size: 12px;
    color: var(--dp-qm-card-sub-color);
    margin: 0;
    line-height: 1.6;
}

    .qm-card-sub a {
        color: var(--dp-qm-card-sub-color);
        text-decoration: none;
        transition: color .15s;
    }

        .qm-card-sub a:hover {
            color: var(--dp-qm-accent-color);
            text-decoration: underline;
        }

@media (max-width: 768px) {
    .qm-card-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 160px;
    }

    .qm-card-tall {
        grid-row: span 1;
    }
}

@media (max-width: 480px) {
    .qm-card-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 180px;
    }
}


/* ════════════════════════════════════════════════════════════════
   uc_SlideshowBS5 — PENDING MIGRATION
   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   uc_ArtSubArtBS5 — SUB-ARTICLE CONTROL
   ════════════════════════════════════════════════════════════════ */

.ivo-subart-heading {
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--dp-subart-heading-color);
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--dp-subart-heading-border);
}

.ivo-subart-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

    .ivo-subart-card-link:hover,
    .ivo-subart-card-link:focus {
        text-decoration: none;
        color: inherit;
    }

.ivo-subart-card {
    background: linear-gradient(var(--ivo-white), var(--ivo-white)) padding-box, linear-gradient(to right, var(--ivo-royal), var(--ivo-gold)) border-box;
    border-top: 4px solid transparent;
    border-left: 0.5px solid var(--ivo-border);
    border-right: 0.5px solid var(--ivo-border);
    border-bottom: 0.5px solid var(--ivo-border);
    border-radius: 0 0 8px 8px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ivo-subart-card-link:hover .ivo-subart-card,
.ivo-subart-card-link:focus .ivo-subart-card {
    border-top-color: var(--ivo-gold);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.ivo-subart-imgcard {
    border: 1px solid var(--dp-subart-card-border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.ivo-subart-card-link:hover .ivo-subart-imgcard,
.ivo-subart-card-link:focus .ivo-subart-imgcard {
    border-color: var(--dp-subart-card-hover-border);
    box-shadow: 0 2px 12px var(--dp-subart-card-hover-shadow);
}

.ivo-subart-imgframe {
    height: 180px;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
    flex-shrink: 0;
}

.ivo-subart-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.ivo-subart-gradient {
    width: 100%;
    height: 100%;
}

.ivo-subart-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dp-subart-title-color);
    line-height: 1.35;
}

.ivo-subart-card-link:hover .ivo-subart-card-title,
.ivo-subart-card-link:focus .ivo-subart-card-title {
    color: var(--dp-subart-title-hover);
}

.ivo-subart-card-desc {
    font-size: 0.875rem;
    color: var(--dp-subart-desc-color);
    line-height: 1.55;
    margin-bottom: 0;
}

.ivo-subart-readmore {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-subart-readmore-color);
    letter-spacing: 0.01em;
}

.ivo-subart-card-link:hover .ivo-subart-readmore,
.ivo-subart-card-link:focus .ivo-subart-readmore {
    color: var(--dp-subart-readmore-hover);
}

.ivo-subart-readmore .bi-arrow-right {
    transition: transform 0.15s;
}

.ivo-subart-card-link:hover .ivo-subart-readmore .bi-arrow-right {
    transform: translateX(3px);
}


/* ════════════════════════════════════════════════════════════════
   CatBrowserBS5 — Gallery Mode
   ════════════════════════════════════════════════════════════════ */

.ivo-cb-gallery-wrap {
    padding: 0;
}

.ivo-cb-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 1rem;
}

.ivo-cb-gal-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1 / 1;
    background: var(--dp-gal-item-bg);
}

.ivo-cb-gal-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.32s ease;
}

.ivo-cb-gal-gradient {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform 0.32s ease;
}

.ivo-cb-gal-item:hover .ivo-cb-gal-img,
.ivo-cb-gal-item:hover .ivo-cb-gal-gradient {
    transform: scale(1.04);
}

.ivo-cb-gal-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, var(--dp-gal-overlay-bg));
    padding: 32px 12px 12px;
    opacity: 0;
    transition: opacity 0.22s ease;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ivo-cb-gal-item:hover .ivo-cb-gal-overlay {
    opacity: 1;
}

.ivo-cb-gal-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ivo-white);
    line-height: 1.3;
}

.ivo-cb-gal-price {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.72);
}

.ivo-cb-gal-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--dp-gal-modal-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ivo-cb-gal-modal-box {
    background: var(--ivo-white);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    max-width: 860px;
    width: 100%;
    max-height: 90vh;
    position: relative;
}

.ivo-cb-gal-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 10;
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--dp-gal-modal-close-color);
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.15s;
}

    .ivo-cb-gal-modal-close:hover {
        color: var(--dp-gal-modal-close-hover);
    }

.ivo-cb-gal-modal-left {
    width: 52%;
    flex-shrink: 0;
    background: var(--dp-gal-modal-img-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ivo-cb-gal-modal-imgwrap {
    width: 100%;
    height: 100%;
    min-height: 340px;
    position: relative;
}

.ivo-cb-gal-modal-photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.ivo-cb-gal-modal-grad {
    width: 100%;
    height: 100%;
    min-height: 340px;
    display: block;
}

.ivo-cb-gal-modal-right {
    flex: 1;
    padding: 32px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}

.ivo-cb-gal-modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--dp-gal-modal-title-color);
    margin: 0;
    line-height: 1.3;
}

.ivo-cb-gal-modal-pricetag {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--dp-gal-modal-title-color);
    margin: 0;
}

.ivo-cb-gal-modal-remarktxt {
    font-size: 0.78rem;
    color: var(--ivo-text-muted);
    margin: 0;
}

.ivo-cb-gal-modal-btns {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 16px;
}

.ivo-cb-gal-modal-buybtn {
    background: var(--dp-gal-buybtn-bg);
    color: var(--ivo-white);
    border: none;
    border-radius: 6px;
    padding: 10px 22px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: background 0.15s;
    display: inline-block;
}

    .ivo-cb-gal-modal-buybtn:hover {
        background: var(--dp-gal-buybtn-hover-bg);
        color: var(--ivo-white);
        text-decoration: none;
    }

.ivo-cb-gal-modal-exhibbtn {
    background: var(--ivo-white);
    color: var(--ivo-navy);
    border: 1px solid var(--dp-gal-exhibbtn-border);
    border-radius: 6px;
    padding: 10px 18px;
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: border-color 0.15s, color 0.15s;
}

    .ivo-cb-gal-modal-exhibbtn:hover {
        border-color: var(--dp-gal-exhibbtn-hover);
        color: var(--dp-gal-exhibbtn-hover);
        text-decoration: none;
    }

@media (max-width: 768px) {
    .ivo-cb-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ivo-cb-gal-modal-box {
        flex-direction: column;
        max-height: 92vh;
    }

    .ivo-cb-gal-modal-left {
        width: 100%;
        min-height: 220px;
    }

    .ivo-cb-gal-modal-right {
        padding: 18px 16px;
    }
}

@media (max-width: 480px) {
    .ivo-cb-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }
}
/* ════════════════════════════════════════════════════════════════
   ArticleWithNewsBS5 — COMPOSITE BULLETIN CONTROL
   All classes prefixed awn5- to avoid any collision.
   Colors via --ivo-* and --dp-* tokens only.
   Append this block to IvoControlStyles.css.
   ════════════════════════════════════════════════════════════════ */

/* ── Admin bar ──────────────────────────────────────────────────── */
.awn5-admin-bar {
    background: var(--dp-events-admin-bg);
    border: 1px solid var(--dp-events-admin-border);
    border-radius: 8px;
    padding: 8px 0;
}

.awn5-admin-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.awn5-admin-label {
    font-size: .75rem;
    font-weight: 700;
    color: var(--ivo-navy);
    white-space: nowrap;
}

.awn5-admin-id {
    font-size: .7rem;
    color: var(--ivo-text-muted);
    font-family: monospace;
    white-space: nowrap;
}

.awn5-admin-uid {
    font-weight: 600;
    color: var(--ivo-royal);
}

.awn5-admin-btn {
    font-size: .73rem;
    font-weight: 600;
    color: #fff !important;
    background: var(--ivo-royal);
    border: 1px solid var(--ivo-royal);
    border-radius: 6px;
    padding: 4px 12px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: background .15s;
    white-space: nowrap;
}

    .awn5-admin-btn:hover {
        background: var(--ivo-navy);
        border-color: var(--ivo-navy);
        color: #fff !important;
    }

.awn5-admin-msg {
    font-size: .72rem;
    color: var(--ivo-text-muted);
}

/* ── Zone wrapper ───────────────────────────────────────────────── */
.awn5-zone {
    padding-top: 48px;
    padding-bottom: 12px;
}

.awn5-zone-pdf {
    padding-top: 36px;
    padding-bottom: 48px;
}

/* ── Section divider — gold/navy gradient flanking lines ─────────── */
.ivo-section-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ivo-royal);
    white-space: nowrap;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

    .ivo-section-divider::before {
        content: '';
        flex: 1;
        height: 1.5px;
        background: linear-gradient(to right, transparent, var(--ivo-royal) 40%, var(--ivo-gold));
    }

    .ivo-section-divider::after {
        content: '';
        flex: 1;
        height: 1.5px;
        background: linear-gradient(to left, transparent, var(--ivo-royal) 40%, var(--ivo-gold));
    }

/* ── Sub-articles grid wrapper ──────────────────────────────────── */
.awn5-subart-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-left: -.5rem;
    margin-right: -.5rem;
}

    .awn5-subart-grid > div,
    .awn5-subart-grid > span {
        padding-left: .5rem;
        padding-right: .5rem;
        flex: 0 0 100%;
        max-width: 100%;
    }

@media (min-width: 768px) {
    .awn5-subart-grid > div,
    .awn5-subart-grid > span {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 992px) {
    .awn5-subart-grid > div,
    .awn5-subart-grid > span {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}

/* ── PDF attachment cards ───────────────────────────────────────── */
.awn5-pdf-grid > span {
    display: contents;
}

.awn5-pdf-card {
    display: flex;
    flex-direction: column;
    background: var(--dp-event-card-grad-end);
    border: 0.5px solid var(--dp-event-card-border);
    border-top: 3px solid var(--ivo-royal);
    border-radius: 12px;
    padding: 20px 20px 16px;
    transition: box-shadow .2s, border-top-color .2s;
}

    .awn5-pdf-card:hover {
        box-shadow: 0 4px 18px var(--dp-event-card-shadow);
        border-top-color: var(--ivo-gold);
    }

.awn5-pdf-icon-wrap {
    margin-bottom: 12px;
}

.awn5-pdf-icon {
    font-size: 2rem;
    color: var(--ivo-royal);
    opacity: .85;
    transition: color .15s;
}

.awn5-pdf-card:hover .awn5-pdf-icon {
    color: var(--ivo-gold);
}

.awn5-pdf-body {
    flex: 1;
}

.awn5-pdf-name {
    font-size: .9rem;
    font-weight: 600;
    color: var(--dp-event-title-color);
    line-height: 1.35;
    margin-bottom: 4px;
}

.awn5-pdf-date {
    font-size: .75rem;
    color: var(--dp-event-desc-color);
    margin-bottom: 0;
}

.awn5-pdf-footer {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--dp-event-footer-border);
}

.awn5-pdf-dl-btn {
    display: inline-flex;
    align-items: center;
    font-size: .78rem;
    font-weight: 600;
    color: var(--ivo-royal);
    text-decoration: none;
    transition: color .15s;
}

    .awn5-pdf-dl-btn:hover {
        color: var(--ivo-gold);
        text-decoration: none;
    }

/* ── Responsive tweaks ──────────────────────────────────────────── */
@media (max-width: 767px) {
    .awn5-zone {
        padding-top: 32px;
    }

    .awn5-zone-pdf {
        padding-top: 24px;
        padding-bottom: 32px;
    }

    .awn5-section-divider {
        margin-bottom: 20px;
    }
}


/* ================================================================
   IVO Platform — BS5 Control Styles
   Prefixes: .uc-subart-*  .uc-attach-*  .uc-rellinks-*
   ================================================================ */

/* ── uc_SubArticlesBS5 — card view ──────────────────────────────── */
.uc-subart-card {
    background: var(--ivo-white);
    border-top: 3px solid var(--ivo-royal) !important;
    border-left: 0.5px solid var(--ivo-border) !important;
    border-right: 0.5px solid var(--ivo-border) !important;
    border-bottom: 0.5px solid var(--ivo-border) !important;
    border-radius: 0 0 8px 8px !important;
    transition: border-top-color 0.3s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}

    .uc-subart-card:hover {
        border-top-color: var(--ivo-gold) !important;
        box-shadow: 0 4px 14px rgba(19, 70, 160, 0.1) !important;
        transform: translateY(-2px);
    }

.uc-subart-card-title {
    font-family: var(--ivo-font-serif, 'Fraunces', serif);
    font-size: 1.1rem;
    color: var(--ivo-navy);
    margin-bottom: 0.5rem;
}

.uc-subart-card-desc {
    font-size: 0.9rem;
    color: var(--ivo-text-muted);
    line-height: 1.5;
}

.uc-subart-readmore {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ivo-royal);
    border-color: var(--ivo-royal);
}

    .uc-subart-readmore:hover {
        background-color: var(--ivo-royal);
        color: var(--ivo-white);
    }

/* ── uc_SubArticlesBS5 — list view ──────────────────────────────── */
.uc-subart-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.uc-subart-list-row {
    background-color: var(--ivo-white);
    border: 1px solid var(--ivo-border);
    border-left: 4px solid var(--ivo-royal);
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.15s ease, border-left-color 0.15s ease;
}

    .uc-subart-list-row:hover {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        border-left-color: var(--ivo-gold);
    }

.uc-subart-list-link {
    color: var(--ivo-navy);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    width: 100%;
}

    .uc-subart-list-link:hover {
        color: var(--ivo-royal);
    }

    .uc-subart-list-link .bi-arrow-right {
        opacity: 0;
        transition: opacity 0.15s ease;
    }

.uc-subart-list-row:hover .uc-subart-list-link .bi-arrow-right {
    opacity: 1;
}

/* ── uc_ArticleAttachmentsBS5 ────────────────────────────────────── */
.uc-attach-heading {
    font-family: var(--ivo-font-serif, 'Fraunces', serif);
    font-size: 1.2rem;
    color: var(--ivo-navy);
    font-weight: 600;
}

.uc-attach-card {
    background-color: var(--ivo-white);
    border-top: 3px solid var(--ivo-royal);
    border-left: 0.5px solid var(--ivo-border);
    border-right: 0.5px solid var(--ivo-border);
    border-bottom: 0.5px solid var(--ivo-border);
    border-radius: 0 0 8px 8px;
    transition: border-top-color 0.3s ease, box-shadow 0.2s ease;
}

    .uc-attach-card:hover {
        border-top-color: var(--ivo-gold);
        box-shadow: 0 4px 14px rgba(19, 70, 160, 0.08);
    }

.uc-attach-icon-row .bi {
    font-size: 2rem;
    flex-shrink: 0;
}

.uc-attach-name {
    font-size: 0.9rem;
    color: var(--ivo-navy);
    line-height: 1.3;
}

.uc-attach-date {
    font-size: 0.775rem;
    color: var(--ivo-text-muted);
}

.uc-attach-details {
    font-size: 0.825rem;
    color: var(--ivo-text-muted);
    line-height: 1.4;
    border-top: 1px solid var(--ivo-border);
    padding-top: 0.4rem;
}

/* ── uc_RelatedLinksBS5 ──────────────────────────────────────────── */
.uc-rellinks-wrap {
    padding-top: 0.75rem;
    border-top: 0.5px dashed var(--ivo-border);
}

.uc-rellinks-heading {
    display: inline-block;
    color: var(--ivo-text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.uc-rellinks-btn {
    background-color: var(--dp-section-quickmenu-bg);
    border-color: var(--ivo-royal);
    color: var(--ivo-royal);
    font-size: 0.825rem;
    border-radius: 20px !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .uc-rellinks-btn:hover {
        background-color: var(--ivo-royal);
        border-color: var(--ivo-royal);
        color: var(--ivo-white);
    }

/* ── Misc ────────────────────────────────────────────────────────── */
.awn5-layout-top {
    display: block;
}

.ivo-admin-bar .btn-warning {
    background-color: var(--dp-ui-gold-btn-bg);
    border-color: var(--dp-ui-gold-btn-bg);
    color: #000000;
}

    .ivo-admin-bar .btn-warning:hover {
        background-color: var(--dp-ui-gold-btn-dark);
        border-color: var(--dp-ui-gold-btn-dark);
    }

/* ── Column separator — right edge gold bar, md+ side layout only ── */
@media (min-width: 768px) {
    .awn5-row > .col-md-6:first-child {
        position: relative;
        padding-right: 2rem;
    }

        .awn5-row > .col-md-6:first-child::after {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: var(--ivo-gold);
            transition: background 0.4s ease;
            pointer-events: none;
        }

        .awn5-row > .col-md-6:first-child:hover::after {
            background: linear-gradient(to bottom, var(--ivo-gold), var(--ivo-royal));
        }

    .awn5-row > .col-md-6:last-child {
        padding-left: 2rem;
    }
}

/* ════════════════════════════════════════════════════════════════════
   UC_BIOGRAPHYBS5 — Biography / People Gallery Control
   Append this entire block to the bottom of IvoControlStyles.css.

   Also add the --dp-bio-* token block below to IvoThemeVariables.css
   inside the existing :root { } (before the closing brace).

   Colour mapping to IVO brand tokens:
     --ivo-gold   #e8a020  accent gold
     --ivo-royal  #1346a0  royal blue
     --ivo-navy   #0a1628  navy
     --dp-section-royal-color #d0d8e8  light text on dark bands
     --dp-manage-bar-btn-hover #f5c55a  gold highlight
   ════════════════════════════════════════════════════════════════════ */


/* ┌─────────────────────────────────────────────────────────────────┐
   │  ADD TO IvoThemeVariables.css :root  (before closing brace)    │
   │                                                                 │
   │  --dp-bio-dark-card-bg:      var(--ivo-navy, #0a1628);          │
   │  --dp-bio-dark-card-border:  rgba(232,160,32,.28);              │
   │  --dp-bio-dark-card-hover:   rgba(232,160,32,.10);              │
   │  --dp-bio-dark-text:         var(--dp-section-royal-color,      │
   │                                   #d0d8e8);                     │
   │  --dp-bio-dark-muted:        #8098b8;                           │
   │  --dp-bio-dark-shadow:       0 20px 60px rgba(0,0,0,.55);       │
   │  --dp-bio-dark-modal-bg:     var(--ivo-navy, #0a1628);          │
   │  --dp-bio-dark-modal-body:   #0d1e38;                           │
   │  --dp-bio-light-card-bg:     #ffffff;                           │
   │  --dp-bio-light-card-border: rgba(0,0,0,.10);                   │
   │  --dp-bio-light-card-hover:  rgba(19,70,160,.06);               │
   │  --dp-bio-light-text:        var(--dp-section-article-color,    │
   │                                   #0e1a30);                     │
   │  --dp-bio-light-muted:       #6c757d;                           │
   │  --dp-bio-light-shadow:      0 8px 30px rgba(0,0,0,.12);        │
   │  --dp-bio-light-modal-bg:    #ffffff;                           │
   │  --dp-bio-light-modal-body:  var(--dp-section-article-bg,       │
   │                                   #f8f9fb);                     │
   └─────────────────────────────────────────────────────────────────┘ */


/* ── Wrapper ──────────────────────────────────────────────────────── */
.ivo-bio-wrap {
    position: relative;
}

/* Dark — IVO navy/gold */
.ivo-bio-dark {
    --bio-card-bg: var(--dp-bio-dark-card-bg, #0a1628);
    --bio-card-border: var(--dp-bio-dark-card-border, rgba(232,160,32,.28));
    --bio-card-hover: var(--dp-bio-dark-card-hover, rgba(232,160,32,.10));
    --bio-gold: var(--ivo-gold, #e8a020);
    --bio-gold-dim: var(--ivo-royal, #1346a0);
    --bio-gold-light: var(--dp-manage-bar-btn-hover, #f5c55a);
    --bio-text: var(--dp-bio-dark-text, #d0d8e8);
    --bio-muted: var(--dp-bio-dark-muted, #8098b8);
    --bio-shadow: var(--dp-bio-dark-shadow, 0 20px 60px rgba(0,0,0,.55));
    --bio-modal-bg: var(--dp-bio-dark-modal-bg, #0a1628);
    --bio-modal-body: var(--dp-bio-dark-modal-body, #0d1e38);
}

/* Light — IVO royal/article */
.ivo-bio-light {
    --bio-card-bg: var(--dp-bio-light-card-bg, #ffffff);
    --bio-card-border: var(--dp-bio-light-card-border, rgba(0,0,0,.10));
    --bio-card-hover: var(--dp-bio-light-card-hover, rgba(19,70,160,.06));
    --bio-gold: var(--ivo-royal, #1346a0);
    --bio-gold-dim: var(--ivo-navy, #0a1628);
    --bio-gold-light: #3a6bc7;
    --bio-text: var(--dp-bio-light-text, #0e1a30);
    --bio-muted: var(--dp-bio-light-muted, #6c757d);
    --bio-shadow: var(--dp-bio-light-shadow, 0 8px 30px rgba(0,0,0,.12));
    --bio-modal-bg: var(--dp-bio-light-modal-bg, #ffffff);
    --bio-modal-body: var(--dp-bio-light-modal-body, #f8f9fb);
}


/* ── Section header ───────────────────────────────────────────────── */
.ivo-bio-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.ivo-bio-eyebrow {
    font-family: var(--ivo-font-display, var(--ivo-font-serif));
    letter-spacing: .3em;
    font-size: .68rem;
    color: var(--bio-gold);
    text-transform: uppercase;
    margin-bottom: .4rem;
}

.ivo-bio-section-title {
    font-size: clamp(1.6rem,4vw,2.6rem);
    color: var(--bio-text);
    margin: 0 0 .6rem;
}

.ivo-bio-section-sub {
    color: var(--bio-muted);
    font-style: italic;
    font-size: 1rem;
    margin: 0;
}


/* ── Card grid ────────────────────────────────────────────────────── */
.ivo-bio-grid {
    margin: 0 -12px;
}

.ivo-bio-col {
    padding: 0 12px 24px;
}

.ivo-bio-card {
    background: var(--bio-card-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .35s cubic-bezier(.22,.68,0,1.2), box-shadow .35s ease, border-color .3s ease;
    position: relative;
}

    .ivo-bio-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--bio-shadow);
        border-color: var(--bio-gold);
    }

    .ivo-bio-card:focus-visible {
        outline: 2px solid var(--bio-gold);
        outline-offset: 2px;
    }

.ivo-bio-img-wrap {
    position: relative;
    overflow: hidden;
    background: transparent;
}

    .ivo-bio-img-wrap img {
        width: 100%;
        height: auto;
        display: block;
        transition: transform .6s ease;
    }

.ivo-bio-card:hover .ivo-bio-img-wrap img {
    transform: scale(1.04);
}


/* ── Badge ────────────────────────────────────────────────────────── */
.ivo-bio-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background: rgba(10,22,40,.82);
    border: 1px solid var(--bio-card-border);
    backdrop-filter: blur(4px);
    padding: .2rem .6rem;
    font-size: .6rem;
    letter-spacing: .15em;
    color: var(--bio-gold);
    text-transform: uppercase;
    border-radius: 2px;
}

.ivo-bio-light .ivo-bio-badge {
    background: rgba(255,255,255,.88);
    color: var(--ivo-navy, #0a1628);
}


/* ── Card body ────────────────────────────────────────────────────── */
.ivo-bio-card-body {
    padding: 1.1rem 1.25rem 1.4rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ivo-bio-card-remarks {
    font-size: .6rem;
    letter-spacing: .18em;
    color: var(--bio-gold);
    text-transform: uppercase;
    margin-bottom: .3rem;
}

.ivo-bio-card-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--bio-text);
    margin: 0 0 .55rem;
    line-height: 1.3;
}

.ivo-bio-card-teaser {
    font-size: .88rem;
    color: var(--bio-muted);
    line-height: 1.6;
    margin: 0 0 auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ivo-bio-card-cta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .9rem;
    font-size: .62rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bio-gold);
    transition: gap .2s, color .2s;
}

.ivo-bio-card:hover .ivo-bio-card-cta {
    gap: .6rem;
    color: var(--bio-gold-light);
}


/* ── Admin / misc ─────────────────────────────────────────────────── */
.ivo-bio-admin {
    margin-bottom: 1rem;
}

.ivo-bio-pending {
    padding: 2rem;
    text-align: center;
    color: var(--bio-muted, #8098b8);
    font-style: italic;
}

.ivo-bio-card-admin {
    border-top: 1px solid var(--bio-card-border);
}


/* ── Card reveal animation ────────────────────────────────────────── */
@keyframes ivoBioReveal {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ivo-bio-col {
    animation: ivoBioReveal .55s ease both;
}

    .ivo-bio-col:nth-child(1) {
        animation-delay: .05s;
    }

    .ivo-bio-col:nth-child(2) {
        animation-delay: .13s;
    }

    .ivo-bio-col:nth-child(3) {
        animation-delay: .21s;
    }

    .ivo-bio-col:nth-child(4) {
        animation-delay: .29s;
    }

    .ivo-bio-col:nth-child(5) {
        animation-delay: .37s;
    }

    .ivo-bio-col:nth-child(6) {
        animation-delay: .45s;
    }

    .ivo-bio-col:nth-child(n+7) {
        animation-delay: .53s;
    }


/* ════════════════════════════════════════════════════════════════════
   MODAL
   Teleported to <body> by JS. Bootstrap requires class names
   modal-content / modal-body / modal-footer on those divs for
   modal-dialog-scrollable and spacing to work — BuildModalHtml
   outputs both Bootstrap and ivo-bio-* classes on each element.
   ════════════════════════════════════════════════════════════════════ */

/* Theme vars injected onto #ivoBioModal element by JS */
#ivoBioModal,
#ivoBioModal.ivo-bio-dark {
    --bio-gold: var(--ivo-gold);
    --bio-gold-dim: var(--ivo-royal);
    --bio-gold-light: var(--dp-manage-bar-btn-hover, var(--ivo-gold-light));
    --bio-text: var(--dp-bio-dark-text);
    --bio-muted: var(--dp-bio-dark-muted);
    --bio-modal-bg: var(--dp-bio-dark-modal-bg);
    --bio-modal-body: var(--dp-bio-dark-modal-body);
    --bio-card-border: var(--dp-bio-dark-card-border);
}

    #ivoBioModal.ivo-bio-light {
        --bio-gold: var(--ivo-royal);
        --bio-gold-dim: var(--ivo-navy);
        --bio-gold-light: var(--ivo-blue-mid);
        --bio-text: var(--dp-bio-light-text);
        --bio-muted: var(--dp-bio-light-muted);
        --bio-modal-bg: var(--dp-bio-light-modal-bg);
        --bio-modal-body: var(--dp-bio-light-modal-body);
        --bio-card-border: var(--dp-bio-light-card-border);
    }

    /* Override Bootstrap .modal-content */
    #ivoBioModal .modal-content {
        background: var(--bio-modal-bg);
        border: 1px solid var(--bio-card-border);
        border-radius: 4px;
        color: var(--bio-text);
    }

/* Custom header bar (not a Bootstrap element) */
.ivo-bio-modal-header-bar {
    background: var(--bio-modal-bg);
    border-bottom: 1px solid var(--bio-card-border);
    padding: .85rem 1.4rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-shrink: 0;
}

.ivo-bio-modal-title-block {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.ivo-bio-modal-name {
    font-size: clamp(1rem,2.5vw,1.4rem);
    font-weight: 600;
    color: var(--bio-text);
    line-height: 1.2;
    margin: 0;
}

.ivo-bio-modal-tag {
    font-size: .78rem;
    color: var(--bio-muted);
    font-style: italic;
    margin: 0;
}

/* Close button */
.ivo-bio-close-btn {
    background: rgba(10,22,40,.55);
    border: 1px solid var(--bio-card-border);
    border-radius: 2px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--bio-muted);
    flex-shrink: 0;
    transition: color .2s, border-color .2s, background .2s;
    padding: 0;
}

    .ivo-bio-close-btn:hover {
        color: var(--bio-gold);
        border-color: var(--bio-gold);
        background: rgba(232,160,32,.12);
    }

/* Override Bootstrap .modal-body */
#ivoBioModal .modal-body {
    background: var(--bio-modal-body);
    padding: 1.4rem 1.5rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--bio-gold) transparent;
}

    #ivoBioModal .modal-body::-webkit-scrollbar {
        width: 4px;
    }

    #ivoBioModal .modal-body::-webkit-scrollbar-thumb {
        background: var(--bio-gold);
        border-radius: 2px;
    }

    #ivoBioModal .modal-body p,
    #ivoBioModal .modal-body li {
        font-size: .93rem;
        line-height: 1.82;
        color: var(--bio-muted);
        margin-bottom: .9rem;
    }

        #ivoBioModal .modal-body p:last-child {
            margin-bottom: 0;
        }

/* Floated image */
/* Floated image */
.ivo-bio-modal-float {
    float: left;
    width: 42%;
    margin: 0 1.3rem 1rem 0;
    position: relative;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid var(--bio-card-border);
}

/* Force Bootstrap row/col inside bio body to behave as plain blocks
   so they flow beside the floated image instead of clearing it */
#ivoBioModalBio .row {
    display: block;
    margin-left: 0;
    margin-right: 0;
}

#ivoBioModalBio .col-md-12,
#ivoBioModalBio [class*="col-"] {
    display: block;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    flex: none;
    max-width: 100%;
}

.ivo-bio-modal-float-img {
    width: 100%;
    height: auto;
    display: block;
}

/*.ivo-bio-modal-badge-float {
    position: absolute;
    top: .45rem;
    left: .45rem;
}*/

/* Quote block */
.ivo-bio-quote-block {
    margin-top: 1rem;
    padding: .9rem 1.1rem;
    background: rgba(232,160,32,.06);
    border-left: 3px solid var(--bio-gold);
    border-radius: 0;
    clear: both;
}

#ivoBioModal.ivo-bio-light .ivo-bio-quote-block {
    background: rgba(19,70,160,.05);
    border-left-color: var(--ivo-royal, #1346a0);
}

.ivo-bio-quote-label {
    font-size: .58rem;
    letter-spacing: .22em;
    color: var(--bio-gold);
    text-transform: uppercase;
    margin-bottom: .4rem;
}

.ivo-bio-quote-block p {
    font-style: italic;
    color: var(--bio-muted) !important;
    font-size: .88rem !important;
    line-height: 1.7;
    margin: 0 !important;
}

/* Override Bootstrap .modal-footer */
#ivoBioModal .modal-footer {
    background: var(--bio-modal-bg);
    border-top: 1px solid var(--bio-card-border);
    padding: .8rem 1.5rem;
    display: flex;
    gap: .65rem;
    align-items: center;
    justify-content: flex-start;
}

/* Buttons */
.ivo-bio-btn-gold {
    font-size: .65rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    background: var(--ivo-gold, #e8a020);
    color: var(--ivo-navy, #0a1628) !important;
    border: none;
    padding: .5rem 1.3rem;
    border-radius: 2px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    transition: opacity .2s;
    cursor: pointer;
}

    .ivo-bio-btn-gold:hover {
        opacity: .85;
    }

#ivoBioModal.ivo-bio-light .ivo-bio-btn-gold {
    background: var(--ivo-royal, #1346a0);
    color: #ffffff !important;
}

.ivo-bio-btn-outline {
    font-size: .65rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    background: transparent;
    color: var(--bio-gold);
    border: 1px solid var(--bio-card-border);
    padding: .5rem 1.3rem;
    border-radius: 2px;
    transition: background .2s, color .2s;
    cursor: pointer;
}

    .ivo-bio-btn-outline:hover {
        background: rgba(232,160,32,.10);
        color: var(--bio-gold-light);
    }

/* Mobile */
@media (max-width: 480px) {
    .ivo-bio-modal-float {
        float: none;
        width: 100%;
        margin: 0 0 1rem 0;
    }
}

/* ── END UC_BIOGRAPHYBS5 ─────────────────────────────────────────── */