/* ========= Programme page ========= */
.sticky-tabs {
    position: sticky;
    top: 84px;
    z-index: 950;
    background: var(--c-bg);
    padding: .8rem 0;
    display: flex;
    gap: .6rem;
    justify-content: center;
    flex-wrap: wrap;
    box-shadow: none;
    border-bottom: 1px solid rgba(6, 43, 47, .08)
}

.day-tab {
    border: 2px solid rgba(0, 137, 123, .25);
    background: #fff;
    color: var(--c-ink);
    font-weight: 700;
    border-radius: 999px;
    padding: .55rem 1.2rem;
    transition: .25s
}

.day-tab i {
    display: none
}

.day-tab.active {
    background: var(--c-primary-dark);
    border-color: var(--c-primary-dark);
    color: #fff;
    box-shadow: 0 10px 24px rgba(0, 137, 123, .35)
}

.day-panel {
    display: none
}

.day-panel.active {
    display: block;
    animation: fadeUp .45s ease
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(14px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.prog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 364px;
    gap: 2.6rem;
    align-items: start
}

.prog-main {
    min-width: 0
}

.prog-side {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 1.2rem
}

.side-card {
    background: #fff;
    border: 1px solid rgba(0, 137, 123, .15);
    border-radius: 18px;
    padding: 1.4rem 1.3rem;
    box-shadow: 0 10px 30px rgba(6, 43, 47, .08)
}

.side-head {
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: .72rem;
    color: var(--c-primary-dark);
    margin-bottom: 1rem
}

.side-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .8rem
}

.side-list li {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    border-bottom: 1px dashed rgba(6, 43, 47, .12);
    padding-bottom: .8rem
}

.side-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

.side-label {
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-ink-soft)
}

.side-val {
    font-weight: 600;
    color: var(--c-ink);
    font-size: .9rem;
    line-height: 1.5
}

.side-cta {
    background: linear-gradient(150deg, var(--c-primary-dark), var(--c-primary-deep));
    border: none
}

.side-cta p {
    color: #DFFBF7;
    font-size: .88rem;
    margin-bottom: 1rem
}

.side-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: 1.05rem;
    font-weight: 700;
    font-size: .85rem;
    color: var(--c-primary-dark);
    text-decoration: none;
    transition: gap .2s ease
}

.side-link:hover {
    gap: .6rem;
    color: var(--c-primary-deep)
}

@media (max-width:1199.98px) {
    .prog-layout {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 2rem
    }
}

@media (max-width:991.98px) {
    .prog-layout {
        grid-template-columns: 1fr
    }

    .prog-side {
        position: static
    }
}

.prog-list {
    border-top: 1px solid rgba(0, 137, 123, .15)
}

.prog-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    column-gap: 1.8rem;
    align-items: start;
    padding: 1.2rem 1rem;
    border-bottom: 1px solid rgba(0, 137, 123, .1);
    border-left: 3px solid transparent;
    transition: all .25s ease
}

.prog-row:hover {
    border-left-color: var(--c-primary);
    background: rgba(0, 191, 174, .04)
}

.prog-when {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    width: 150px;
    max-width: 150px
}

.prog-time {
    font-weight: 800;
    color: var(--c-primary-dark);
    font-family: var(--font-head);
    font-size: .95rem
}

.prog-room {
    font-size: .8rem;
    color: var(--c-ink-soft);
    font-weight: 600
}

.prog-body {
    min-width: 0
}

.prog-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--c-ink)
}

.prog-desc {
    color: var(--c-ink-soft);
    font-size: .9rem;
    line-height: 1.65;
    margin: 0 0 .6rem
}

.prog-credits {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin-top: .15rem
}

.prog-credit {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: .6rem;
    align-items: baseline;
    margin: 0;
    padding: 0;
    line-height: 1.65;
    text-align: left
}

.prog-credit-role-cell {
    white-space: nowrap
}

.prog-credit-role {
    display: inline;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-primary-dark)
}

.prog-credit-names {
    display: inline;
    font-size: .9rem;
    font-weight: 500;
    color: var(--c-ink)
}

.prog-speaker-link {
    cursor: pointer;
    border-bottom: 1px dashed rgba(0, 137, 123, .4);
    transition: all .2s ease
}

.prog-speaker-link:hover {
    color: var(--c-primary-dark);
    border-bottom-color: var(--c-primary-dark)
}

@media (max-width:991.98px) {
    .prog-row {
        grid-template-columns: 120px minmax(0, 1fr);
        column-gap: 1.2rem
    }

    .prog-when {
        width: 120px;
        max-width: 120px
    }
}

@media (max-width:767.98px) {
    .prog-row {
        grid-template-columns: 104px minmax(0, 1fr);
        column-gap: .9rem;
        padding: 1.1rem .2rem
    }

    .prog-when {
        width: 104px;
        max-width: 104px
    }

    .prog-title {
        font-size: .95rem
    }

    .prog-credit {
        grid-template-columns: 1fr;
        row-gap: .15rem
    }
}

@media (max-width:575.98px) {
    .sticky-tabs {
        top: 70px
    }
}

/* legacy safety-net */
.prog-meta {
    flex: 0 0 140px;
    display: flex;
    flex-direction: column;
    gap: .2rem
}

.prog-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .4rem
}

.prog-type {
    align-self: flex-start;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 6px;
    padding: .25em .7em;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: .3rem
}

.type-registration {
    background: #607d8b
}

.type-training {
    background: #1976d2
}

.type-symposium {
    background: #00897b
}

.type-workshop {
    background: #7b1fa2
}

.type-panel {
    background: #ef6c00
}

.type-keynote {
    background: #c9a227
}

.type-opening {
    background: #045d54
}

.type-break,
.type-lunch {
    background: #90a4ae
}

.type-reception {
    background: #ad1457
}

/* ===== Fix venue overflow ===== */
.prog-when{min-width:0}
.prog-room{white-space:normal;overflow-wrap:break-word}

/* ============ V2 PAGES — dense, formal, full-width ============ */
.page-hero-sub {
    color: #DFFBF7;
    font-weight: 600;
    font-size: 1.05rem;
    margin-top: .8rem
}

/* Facts / stats bar */
.facts-bar {
    background: #fff;
    border-bottom: 1px solid rgba(6, 43, 47, .08);
    box-shadow: 0 6px 18px rgba(6, 43, 47, .05)
}

.facts-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr)
}

.fact-item {
    padding: 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    border-left: 1px solid rgba(6, 43, 47, .08)
}

.fact-item:first-child {
    border-left: 0
}

.fact-label {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--c-ink-soft)
}

.fact-val {
    font-weight: 700;
    color: var(--c-ink);
    font-size: .92rem
}

.fact-num {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.7rem;
    color: var(--c-primary-dark)
}

.facts-stats .fact-item {
    align-items: center;
    text-align: center;
    padding: 1.3rem 1rem
}

@media (max-width:767.98px) {
    .facts-row {
        grid-template-columns: 1fr
    }

    .fact-item {
        border-left: 0;
        border-top: 1px solid rgba(6, 43, 47, .08);
        padding: .8rem .2rem
    }

    .fact-item:first-child {
        border-top: 0
    }

    .facts-stats {
        grid-template-columns: repeat(3, 1fr)
    }

    .facts-stats .fact-item {
        border-top: 0;
        border-left: 1px solid rgba(6, 43, 47, .08);
        padding: .9rem .3rem
    }

    .facts-stats .fact-item:first-child {
        border-left: 0
    }
}

/* Day header band */
.day-band {
    background: linear-gradient(140deg, var(--c-ink), #0B3B3C);
    color: #fff;
    padding: 1.1rem 0;
    margin-top: 1.6rem
}

.day-band .container {
    display: flex;
    align-items: center;
    gap: 1rem
}

.day-band-num {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.7rem;
    color: var(--c-primary)
}

.day-band h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800
}

.day-band p {
    margin: 0;
    color: #BFDAD6;
    font-size: .85rem;
    font-weight: 600
}

/* Session rows: full-width zebra bands */
.sess-list {
    border-bottom: 1px solid rgba(6, 43, 47, .1)
}

.sess-row {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr) 140px;
    background: #fff;
    border-top: 1px solid rgba(6, 43, 47, .08);
    transition: background .25s, box-shadow .25s
}

.sess-row:nth-child(even) {
    background: var(--c-bg)
}

.sess-row:hover {
    background: #EAF7F5;
    box-shadow: inset 4px 0 0 var(--c-primary)
}

.sess-time {
    padding: 1.2rem;
    background: rgba(0, 191, 174, .07);
    border-right: 1px solid rgba(6, 43, 47, .06)
}

.sess-t {
    font-weight: 800;
    color: var(--c-primary-deep);
    font-family: var(--font-head);
    font-size: .95rem;
    font-variant-numeric: tabular-nums
}

.sess-main {
    padding: 1.2rem 1.4rem;
    min-width: 0
}

.sess-title {
    margin: 0 0 .35rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--c-ink)
}

.sess-desc {
    margin: 0 0 .5rem;
    color: var(--c-ink-soft);
    font-size: .9rem;
    line-height: 1.65
}

.sess-room {
    padding: 1.2rem;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    border-left: 1px solid rgba(6, 43, 47, .06)
}

/* Venue pill badge */
.sess-room-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 137, 123, .08);
    border: 1px solid rgba(0, 137, 123, .3);
    color: var(--c-primary-deep);
    border-radius: 999px;
    padding: .3em .9em;
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap
}

@media (max-width:991.98px) {
    .sess-row {
        grid-template-columns: 130px minmax(0, 1fr) 110px
    }
}

@media (max-width:767.98px) {
    .sess-row {
        grid-template-columns: 1fr
    }

    .sess-time {
        border-right: 0;
        border-bottom: 1px solid rgba(6, 43, 47, .06);
        padding: .7rem 1rem
    }

    .sess-main {
        padding: 1rem
    }

    .sess-room {
        justify-content: flex-start;
        text-align: left;
        border-left: 0;
        border-top: 1px dashed rgba(6, 43, 47, .12);
        padding: .7rem 1rem
    }
    
    .sess-row:nth-child(even) {
        background: #fff;
    }
}

/* At-a-glance numbered cards + CTA panel */
.num-card {
    background: #fff;
    border: 1px solid rgba(0, 137, 123, .15);
    border-radius: 14px;
    padding: 1.2rem 1.2rem 1.2rem 1.4rem;
    height: 100%;
    position: relative;
    overflow: hidden
}

.num-card::before {
    content: attr(data-num);
    position: absolute;
    right: .7rem;
    top: .2rem;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 2.6rem;
    color: rgba(0, 191, 174, .16)
}

.num-card h5 {
    font-weight: 700;
    margin-bottom: .3rem
}

.num-card p {
    color: var(--c-ink-soft);
    font-size: .88rem;
    margin: 0
}

.glance-cta {
    background: linear-gradient(150deg, var(--c-primary-dark), var(--c-primary-deep));
    border-radius: 18px;
    color: #fff;
    padding: 1.8rem;
    height: 100%
}

.glance-cta h5 {
    font-weight: 800
}

.glance-cta p {
    color: #DFFBF7;
    font-size: .9rem
}

/* ============ Speakers v2 cards ============ */
.spk2-section {
    background: var(--c-bg)
}

.spk2-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(6, 43, 47, .08);
    height: 100%;
    cursor: pointer;
    transition: transform .3s, box-shadow .3s;
    border: 1px solid rgba(0, 191, 174, .12);
    display: flex;
    flex-direction: column
}

.spk2-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 44px rgba(0, 137, 123, .2)
}

.spk2-top {
    background: linear-gradient(140deg, var(--c-primary-dark), var(--c-primary-deep));
    padding: 1.6rem 1rem 0;
    text-align: center
}

.spk2-top img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
    transform: translateY(30px)
}

.spk2-body {
    padding: 2.6rem 1rem 1.1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex: 1
}

.spk2-name {
    font-weight: 800;
    font-size: 1rem;
    margin: 0
}

.spk2-roles {
    display: flex;
    flex-direction: column;
    gap: .3rem
}

.spk2-role {
    color: var(--c-ink-soft);
    font-size: .78rem;
    line-height: 1.5;
    margin: 0
}

.spk2-view {
    margin-top: auto;
    padding-top: .7rem;
    border-top: 1px solid rgba(6, 43, 47, .08);
    color: var(--c-primary-dark);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase
}

/* ===== Fix venue overflow ===== */
.sess-time{min-width:0}
.sess-room{min-width:0;padding:.9rem .8rem}
.sess-room-badge{
    white-space:normal;
    text-align:center;
    line-height:1.25;
    max-width:100%
}

/* Speakers popup */
#speakerModal .modal-dialog {
    max-width: 600px;
}

#speakerModal #speaker-photo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -75px;
    z-index: 1;
    text-align: center;
}

#speakerModal #speakerModalBody {
    background-image: url('https://o-portal.s3.ap-east-1.amazonaws.com/202611ev08caresubmit5/assets/img/speaker-popup004.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top;
    padding: 85px 50px 10px 50px;
    border-radius: 25px;
}

#speakerModal .btn-close {
    float: right;
    position: absolute;
    top: 15px;
    right: 20px;
    font-weight: 700;
    font-size: 24px;
    color: #ffffff;
    opacity: 0.9;
    background: transparent;
    z-index: 3;
    border: none;
}

#speakerModal #speaker-name {
    font-size: 18px;
    color: #00897B !important;
    font-family: 'Sora', 'Noto Sans TC', 'Noto Sans SC', sans-serif;
    font-weight: 700;
    text-align: center;
}

#speakerModal #speaker-jobtitle {
    font-size: 14px;
    text-align: center;
    font-weight: 600;
    color: #41605F;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

#speakerModal #speaker-jobtitle small {
    display: block;
    font-size: 13px;
    color: #41605F;
    margin-top: 0.25rem;
}

#speakerModal #speaker-bio {
    font-size: 14px;
    text-align: justify;
    line-height: 1.4;
    color: #41605F;
}

#speakerModal .modal-content {
    border-radius: 25px;
    border: none;
    margin-top: 60px;
}

.spk-text,
.spk-block {
    display: none !important;
}

body[data-lang="en"] .spk-text-en,
body[data-lang="en"] .spk-block-en {
    display: inline-block !important;
}

body[data-lang="hk"] .spk-text-hk,
body[data-lang="hk"] .spk-block-hk {
    display: inline-block !important;
}

body[data-lang="cn"] .spk-text-cn,
body[data-lang="cn"] .spk-block-cn {
    display: inline-block !important;
}

body[data-lang="en"] .spk-block-en,
body[data-lang="hk"] .spk-block-hk,
body[data-lang="cn"] .spk-block-cn {
    display: block !important;
}