/* ============================================
   INITIALISE Work Package Chart
   Scoped to .wpc-wrap
   Uses site CSS variables
   ============================================ */

.wpc-wrap {
    font-family: var(--ff-sans-normal, 'Lato', sans-serif);
    /* max-width:   960px; */
    margin:      0 auto;
    color:       var(--clr-dark, #1c1c1a);
}

/* ============================================
   RESOURCES
   ============================================ */
.wpc-resources {
    background:    linear-gradient(135deg, #6b0f3a 0%, #a61c3c 50%, #c0185a 100%);
    border-radius: 14px;
    padding:       28px 32px;
    text-align:    center;
    color:         #fff;
    box-shadow:    0 6px 24px rgba(122, 16, 72, 0.35);
    position:      relative;
    overflow:      hidden;
}

/* Subtle pattern overlay */
.wpc-resources::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='20' cy='20' r='10'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.wpc-res-eyebrow {
    font-size:      var(--fs-50, 0.7rem);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity:        0.7;
    margin-bottom:  6px;
    position:       relative;
    z-index:        1;
}

.wpc-res-title {
    font-family:    var(--ff-serif, 'Montserrat', serif);
    font-size:      var(--fs-700, 1.7rem);
    font-weight:    900;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-bottom:  6px;
    position:       relative;
    z-index:        1;
}

.wpc-res-subtitle {
    font-size:     var(--fs-200, 1.2rem);
    opacity:       0.9;
    margin-bottom: 18px;
    position:      relative;
    z-index:       1;
}

.wpc-cohorts {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             8px;
    position:        relative;
    z-index:         1;
}

.wpc-cohort-pill {
    background:    rgba(255, 255, 255, 0.15);
    border:        1px solid rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    padding:       5px 14px;
    font-size:     var(--fs-100, 0.9rem);
    font-weight:   600;
    letter-spacing: 0.3px;
    cursor:        default;
    transition:    background 0.2s ease;
}

.wpc-cohort-pill:hover {
    background: rgba(255, 255, 255, 0.28);
}

/* ============================================
   VERTICAL CONNECTOR (Resources → Scientific)
   ============================================ */
.wpc-connector-v {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    padding:        4px 0;
}

.wpc-conn-line {
    width:      2px;
    height:     28px;
    background: linear-gradient(to bottom, #a61c3c, var(--clr-blue, #0273b0));
}

.wpc-conn-arrowhead {
    width:        0;
    height:       0;
    border-left:  8px solid transparent;
    border-right: 8px solid transparent;
    border-top:   10px solid var(--clr-blue, #0273b0);
}

/* ============================================
   SCIENTIFIC WORKSTREAM
   ============================================ */
.wpc-scientific {
    display:       flex;
    align-items:   stretch;
    border:        2px solid rgba(2, 115, 176, 0.18);
    border-radius: 14px;
    overflow:      hidden;
    background:    rgba(2, 115, 176, 0.025);
    box-shadow:    0 2px 12px rgba(0, 0, 0, 0.06);
}

/* Vertical "SCIENTIFIC WORKSTREAM" label */
.wpc-scientific-label {
    background:      var(--clr-blue, #0273b0);
    color:           #fff;
    writing-mode:    vertical-rl;
    text-orientation: mixed;
    transform:       rotate(180deg);
    padding:         16px 10px;
    font-family:     var(--ff-serif, 'Montserrat', serif);
    font-size:       0.62rem;
    font-weight:     900;
    letter-spacing:  3.5px;
    text-transform:  uppercase;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    min-width:       30px;
}

/* 3 columns + arrows wrapper */
.wpc-columns {
    display:     flex;
    flex:        1;
    padding:     16px 14px;
    gap:         8px;
    align-items: stretch;
}

/* ── Column ───────────────────────────────── */
.wpc-col {
    flex:           1;
    display:        flex;
    flex-direction: column;
    border-radius:  10px;
    /* overflow:       hidden; */
    border:         2px solid transparent;
    transition:     box-shadow 0.25s ease;
    min-width:      0;
}

.wpc-col:hover {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
}

.wpc-col--enabling   { border-color: #1a3060; }
.wpc-col--multiomics { border-color: #1a5c3a; }
.wpc-col--prevention { border-color: #7a4a1a; }

/* Column headers */
.wpc-col-header {
    padding:        12px 14px;
    color:          #fff;
    text-align:     center;
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

.wpc-col--enabling   .wpc-col-header { background: #1a3060; }
.wpc-col--multiomics .wpc-col-header { background: #1a5c3a; }
.wpc-col--prevention .wpc-col-header { background: #7a4a1a; }

.wpc-col-title-text {
    font-family: var(--ff-serif, 'Montserrat', serif);
    font-size:   var(--fs-200, 1.2rem);
    font-weight: 700;
    line-height: 1.3;
}

.wpc-col-title-sub {
    font-size: var(--fs-50, 0.7rem);
    opacity:   0.85;
}

/* Column body */
.wpc-col-body {
    flex:           1;
    padding:        12px;
    background:     #fff;
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.wpc-col-body--centered {
    justify-content: center;
}

/* ── Horizontal connector (→) ─────────────── */
.wpc-horiz-connector {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    gap:             0;
    padding:         0 2px;
}

.wpc-hc-line {
    width:      20px;
    height:     2px;
    background: #aaa;
}

.wpc-hc-arrow {
    font-size:   22px;
    color:       #999;
    line-height: 0.8;
    margin-left: 6px;
}

/* ── Vertical connector (↕) ───────────────── */
.wpc-vert-connector {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         2px 0;
    flex-shrink:     0;
    gap:             2px;
}

.wpc-vc-line {
    width:      2px;
    height:     10px;
    background: #ccc;
}

.wpc-vc-icon {
    font-size:   13px;
    color:       #bbb;
    line-height: 1;
}

/* ============================================
   WP BUTTONS
   ============================================ */
.wpc-wp-btn {
    background:     #fff;
    border:         2px solid var(--wpc-btn-color, #0273b0);
    border-radius:  8px;
    padding:        10px 12px;
    cursor:         pointer;
    width:          100%;
    display:        flex;
    flex-direction: column;
    gap:            5px;
    position:       relative;
    overflow:       hidden;
    text-align:     left;
    transition:     transform 0.22s ease,
                    box-shadow 0.22s ease,
                    background 0.22s ease;
}

/* Left accent bar */
.wpc-wp-btn::before {
    content:    '';
    position:   absolute;
    inset:      0 auto 0 0;
    width:      4px;
    background: var(--wpc-btn-color, #0273b0);
    transition: width 0.22s ease;
}

/* Hover / Active: fill with color */
.wpc-wp-btn:hover,
.wpc-wp-btn.active {
    transform:  translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.wpc-wp-btn:hover::before,
.wpc-wp-btn.active::before {
    width: 100%;
}

.wpc-wp-btn:hover .wpc-btn-number,
.wpc-wp-btn:hover .wpc-btn-title,
.wpc-wp-btn:hover .wpc-btn-icon,
.wpc-wp-btn.active .wpc-btn-number,
.wpc-wp-btn.active .wpc-btn-title,
.wpc-wp-btn.active .wpc-btn-icon {
    color:    #fff;
    position: relative;
    z-index:  1;
}

/* Active — persistent fill */
.wpc-wp-btn.active {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

/* Button inner */
.wpc-btn-top {
    display:     flex;
    align-items: center;
    gap:         6px;
    position:    relative;
    z-index:     1;
}

.wpc-btn-icon {
    font-size:   1.05em;
    flex-shrink: 0;
    transition:  transform 0.2s ease;
}

.wpc-wp-btn:hover .wpc-btn-icon,
.wpc-wp-btn.active .wpc-btn-icon {
    transform: scale(1.15);
}

.wpc-btn-number {
    font-family: var(--ff-serif, 'Montserrat', serif);
    font-size:   var(--fs-300, 1.3rem);
    font-weight: 900;
    color:       var(--wpc-btn-color, #0273b0);
    transition:  color 0.22s ease;
    position:    relative;
    z-index:     1;
    line-height: 1;
}

.wpc-btn-title {
    font-size:   var(--fs-50, 0.7rem);
    color:       #555;
    line-height: 1.3;
    position:    relative;
    z-index:     1;
    transition:  color 0.22s ease;
}

/* ── Support mode buttons (horizontal layout) */
.wpc-wp-btn--support {
    flex-direction: row;
    align-items:    center;
    padding:        12px 16px;
    gap:            10px;
}

.wpc-wp-btn--support .wpc-btn-top {
    flex-shrink: 0;
}

.wpc-wp-btn--support .wpc-btn-title {
    font-size: var(--fs-100, 0.9rem);
    flex: 1;
}

/* ============================================
   SUPPORT ROW
   ============================================ */
.wpc-support {
    display:     flex;
    align-items: center;
    gap:         16px;
    margin-top:  12px;
    flex-wrap:   wrap;
}

.wpc-support-left {
    flex:      0 0 auto;
    min-width: 200px;
}

.wpc-programme {
    flex:       1;
    text-align: center;
    padding:    16px 12px;
    min-width:  140px;
}

.wpc-programme-name {
    font-family: var(--ff-serif, 'Montserrat', serif);
    font-size:   var(--fs-700, 1.7rem);
    font-weight: 900;
    color:       var(--clr-blue, #0273b0);
    line-height: 1;
}

.wpc-programme-sub {
    font-size:      var(--fs-100, 0.9rem);
    font-weight:    700;
    color:          #999;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin:         5px 0;
}

.wpc-programme-hint {
    font-size:  var(--fs-50, 0.7rem);
    color:      #bbb;
    font-style: italic;
    margin-top: 4px;
    animation:  wpcHintPulse 2s ease-in-out infinite;
}

@keyframes wpcHintPulse {
    0%, 100% { opacity: 0.5; }
    50%       { opacity: 1;   }
}

.wpc-support-right {
    flex:           0 0 auto;
    min-width:      200px;
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

/* ============================================
   DETAIL PANEL
   ============================================ */
.wpc-detail-panel {
    margin-top:    28px;
    border-radius: 14px;
    background:    #fff;
    border-left:   6px solid var(--wpc-panel-color, #0273b0);
    box-shadow:    0 8px 32px rgba(0, 0, 0, 0.12);
    position:      relative;
    overflow:      hidden;
}

/* Subtle top color strip */
.wpc-detail-panel::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    height:     4px;
    background: var(--wpc-panel-color, #0273b0);
    opacity:    0.15;
}

/* Slide-in animation */
.wpc-panel-animate {
    animation: wpcPanelSlide 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes wpcPanelSlide {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0);     }
}

/* Close button */
.wpc-detail-close {
    position:        absolute;
    top:             16px;
    right:           16px;
    background:      transparent;
    border:          1.5px solid #ddd;
    border-radius:   50%;
    width:           34px;
    height:          34px;
    font-size:       13px;
    color:           #aaa;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      all 0.2s ease;
    z-index:         10;
    flex-shrink:     0;
}

.wpc-detail-close:hover {
    background:   #cc0000;
    border-color: #cc0000;
    color:        #fff;
    transform:    rotate(90deg);
}

/* Content */
.wpc-detail-content {
    padding: 28px 32px 28px 28px;
}

/* Top: icon + number + title */
.wpc-detail-top {
    display:       flex;
    align-items:   center;
    gap:           16px;
    margin-bottom: 18px;
    flex-wrap:     wrap;
}

.wpc-detail-icon-wrap {
    width:           60px;
    height:          60px;
    border-radius:   50%;
    background:      var(--wpc-panel-color, #0273b0);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.8em;
    flex-shrink:     0;
    box-shadow:      0 4px 12px rgba(0, 0, 0, 0.15);
}

.wpc-detail-header {
    display:     flex;
    align-items: center;
    gap:         14px;
    flex-wrap:   wrap;
}

.wpc-detail-number {
    display:       inline-flex;
    align-items:   center;
    background:    var(--wpc-panel-color, #0273b0);
    color:         #fff;
    font-family:   var(--ff-serif, 'Montserrat', serif);
    font-size:     var(--fs-300, 1.3rem);
    font-weight:   900;
    padding:       5px 18px;
    border-radius: 30px;
    flex-shrink:   0;
}

.wpc-detail-title {
    font-family: var(--ff-serif, 'Montserrat', serif);
    font-size:   var(--fs-500, 1.5rem);
    font-weight: 700;
    color:       var(--wpc-panel-color, #0273b0);
    margin:      0;
    line-height: 1.2;
}

/* Description */
.wpc-detail-desc {
    font-size:     var(--fs-200, 1.2rem);
    color:         #555;
    line-height:   1.75;
    margin-bottom: 20px;
    padding-left:  4px;
    border-left:   3px solid rgba(2, 115, 176, 0.12);
    padding-left:  14px;
}

/* Meta: lead + partners */
.wpc-detail-meta {
    display:       flex;
    gap:           20px;
    flex-wrap:     wrap;
    background:    var(--clr-light, #f6fafc);
    border-radius: 10px;
    padding:       14px 18px;
    margin-bottom: 22px;
}

.wpc-meta-item {
    display:   flex;
    gap:       8px;
    font-size: var(--fs-100, 0.9rem);
    flex-wrap: wrap;
}

.wpc-meta-label {
    font-weight: 700;
    color:       #333;
    flex-shrink: 0;
}

.wpc-meta-value {
    color: #555;
}

/* Objectives */
.wpc-obj-title {
    font-family:   var(--ff-serif, 'Montserrat', serif);
    font-size:     var(--fs-300, 1.3rem);
    font-weight:   700;
    color:         var(--wpc-panel-color, #0273b0);
    margin-bottom: 12px;
}

.wpc-obj-list {
    list-style:  none;
    padding:     0;
    margin:      0;
    display:     grid;
    gap:         8px;
    /* 2 columns on larger screens */
    grid-template-columns: 1fr 1fr;
}

.wpc-obj-list li {
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    font-size:     var(--fs-200, 1.2rem);
    color:         #444;
    line-height:   1.5;
    padding:       10px 14px;
    background:    rgba(0, 0, 0, 0.025);
    border-radius: 8px;
    border:        1px solid rgba(0, 0, 0, 0.05);
    transition:    background 0.2s ease;
}

.wpc-obj-list li:hover {
    background: rgba(2, 115, 176, 0.05);
}

.wpc-obj-list li::before {
    content:     '✓';
    color:       var(--wpc-panel-color, #0273b0);
    font-weight: 900;
    font-size:   0.9em;
    flex-shrink: 0;
    margin-top:  2px;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
    /* Hide vertical label on medium screens */
    .wpc-scientific-label {
        display: none;
    }
}

@media (max-width: 768px) {
    /* Stack columns vertically */
    .wpc-columns {
        flex-direction: column;
        gap:            12px;
    }

    /* Rotate horizontal arrows */
    .wpc-horiz-connector {
        transform: rotate(90deg);
        padding:   4px 0;
    }

    /* Stack support row */
    .wpc-support {
        flex-direction: column;
        align-items:    stretch;
    }

    .wpc-support-left,
    .wpc-support-right {
        min-width: 100%;
    }

    .wpc-programme {
        order: -1;
    }

    /* Objectives: 1 column on mobile */
    .wpc-obj-list {
        grid-template-columns: 1fr;
    }

    .wpc-detail-content {
        padding: 20px;
    }

    .wpc-detail-top {
        flex-direction: row;
        align-items:    center;
    }

    .wpc-detail-icon-wrap {
        width:  48px;
        height: 48px;
        font-size: 1.4em;
    }

    .wpc-detail-title {
        font-size: var(--fs-300, 1.3rem);
    }

    .wpc-resources {
        padding: 20px 16px;
    }

    .wpc-res-title {
        font-size:      var(--fs-500, 1.5rem);
        letter-spacing: 3px;
    }
}

@media (max-width: 480px) {
    .wpc-support-left {
        min-width: unset;
    }

    .wpc-detail-meta {
        flex-direction: column;
        gap:            12px;
    }

    .wpc-detail-header {
        flex-direction: column;
        align-items:    flex-start;
        gap:            8px;
    }

    .wpc-cohort-pill {
        padding:   4px 10px;
        font-size: var(--fs-50, 0.7rem);
    }
}