/* =========================================================
   VEIC 2027 — SCIENTIFIC PROGRAMME PREVIEW SECTION
   File: assets/css/programme.css
   ========================================================= */

.veic-programme-outer{
    width: 100%;
    max-width: 100%;
    height: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.veic-programme-panels{
    flex: 1 1 auto;
    margin-bottom: 20px;
}

.veic-programme-btn{
    align-self: center;
    margin-top: auto;
}


/* Note: equal-height column matching and the 1400px cap are now
   handled by highlights-programme-wrap.css (via [veic_highlights_programme]),
   which uses real CSS Grid stretch behavior — much more reliable
   than the previous approach of guessing SiteOrigin's internal
   wrapper class names. This file no longer needs those hacks. */

/* -------- Tabs -------- */
.veic-programme-tabs{
    position: relative;
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 18px;
}

.veic-programme-tab{
    flex: 1 1 50%;
    background: #EAF2FF;
    border: none;
    cursor: pointer;
    padding: 12px 18px;
    text-align: left;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 12.5px;
    color: var(--veic-primary);
    transition: background 0.25s ease, color 0.25s ease;
    position: relative;
    z-index: 1;
}

.veic-tab-prefix{
    font-weight: 700;
}

.veic-programme-tab.is-active{
    background: var(--veic-primary);
    color: var(--veic-white);
}

.veic-programme-tab:not(.is-active):hover{
    background: #DCEAFF;
}

/* Diagonal seam between the two tabs — approximates the
   angled cut in the reference design. Positioned at the exact
   midpoint (tabs are always 50/50), so it stays correct at
   any container width. */
.veic-programme-tabs::after{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 26px;
    margin-left: -20px;
    background: var(--veic-primary);
    transform: skewX(-18deg);
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* Mirrors when Day 2 (right tab) becomes active, so the navy
   diagonal always appears to extend from whichever tab is
   currently active into the inactive one, matching the seam
   direction shown in the reference design either way. */
.veic-programme-tabs.veic-day2-active::after{
    transform: skewX(18deg);
}

/* -------- Panels -------- */
.veic-programme-panel{
    display: none;
}

.veic-programme-panel.is-active{
    display: flex;
    align-items: stretch;
    gap: 20px;
    animation: veicFadeIn 0.35s ease;
}

@keyframes veicFadeIn{
    from{ opacity: 0; transform: translateY(6px); }
    to{ opacity: 1; transform: translateY(0); }
}

/* -------- Timeline (left ~55%) -------- */
.veic-programme-timeline{
    flex: 1 1 55%;
    min-width: 0;
    border: 1px solid #E7ECF5;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0;
    align-self: stretch;
}

.veic-programme-item{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #E7ECF5;
}

.veic-programme-item:last-child{
    border-bottom: none;
}

.veic-programme-item-icon{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #EAF2FF;
    color: var(--veic-primary);
}

.veic-programme-item-icon svg{
    width: 15px;
    height: 15px;
    display: block;
}

.veic-programme-item-text{
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.veic-programme-time{
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 11px;
    color: var(--veic-secondary);
}

.veic-programme-title{
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: var(--veic-text);
    line-height: 1.35;
}

/* -------- Image (right ~45%) -------- */
.veic-programme-image{
    flex: 1 1 45%;
    min-width: 0;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0;
    line-height: 0;
    align-self: stretch;
}

.veic-programme-image img{
    width: 100%;
    height: 100%;
    min-height: 200px;
    object-fit: cover;
    display: block;
}

/* -------- CTA Button -------- */
.veic-programme-btn{
    display: inline-block;
    background: var(--veic-primary);
    color: var(--veic-white);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    padding: 12px 26px;
    border-radius: 8px;
    transition: background 0.25s ease, transform 0.2s ease;
}

.veic-programme-btn:hover{
    background: var(--veic-secondary);
    transform: translateY(-2px);
    color: var(--veic-white);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 992px){
    .veic-programme-panel.is-active{ gap: 14px; }
    .veic-programme-image img{ min-height: 160px; }
    .veic-programme-time{ font-size: 10.5px; }
    .veic-programme-title{ font-size: 11.5px; }
}

@media (max-width: 576px){
    .veic-programme-tabs{ flex-direction: column; border-radius: 10px; }
    .veic-programme-tabs::after{ display: none; }
    .veic-programme-tab{ text-align: left; }

    /* Stack table above image on small phones — side-by-side
       gets too cramped below this width */
    .veic-programme-panel.is-active{
        flex-direction: column;
        gap: 16px;
    }
    .veic-programme-timeline{ flex: 1 1 auto; }
    .veic-programme-image{ flex: 1 1 auto; }
    .veic-programme-image img{ height: 180px; min-height: 0; }

    .veic-programme-item-icon{ width: 26px; height: 26px; }
    .veic-programme-item-icon svg{ width: 13px; height: 13px; }
    .veic-programme-time{ font-size: 11px; }
    .veic-programme-title{ font-size: 12px; }
    .veic-programme-btn{ width: 100%; text-align: center; }
}