/* ============================================================
   RESEARCH CENTRE DETAILS PAGE (Figma node: 539:19609)
   Builds on top of research.css (hero, rc-card-v, etc.)
   ============================================================ */

/* ---- Hero: italic orange "Excellence" emphasis ---- */

.research-hero-title-em {
    font-style: italic;
    color: #f16522;
}

/* ============================================================
   CENTRE DETAILS SECTION (Figma: Frame 4998 — 539:19617)
   White bg. Padding: 100px (top) / 200px (right) / 120px (bottom) / 140px (left)
   on 1920px canvas.  Two-col: left ≈ 848px (flex: 2), right ≈ 424px (flex: 1).
   ============================================================ */

.coe-section {
    background: #ffffff;
    padding: 100px 0 120px;
}

.coe-inner {
    max-width: 1642px;
    margin: 0 auto;
    /* 140px left / 200px right on 1920 → equalise to 7.29vw each side */
    padding: 0 clamp(24px, 7.29vw, 140px);
    display: flex;
    flex-direction: column;
    /* heading-to-cols gap: left-col starts at y=195, heading top at y=-24; ~48px gap */
    gap: 48px;
}

/* ---- Centre Main Heading ---- */
/* Figma: Playfair Display Bold 44px, 130% lh, #0D1B2A, 848×171px */
.coe-main-heading {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 130%;
    color: #0d1b2a;
    /* constrain heading to the left column width */
    max-width: 848px;
}

/* ---- Two-column layout ---- */
/* Figma: left=848px, gap≈106px, right=424px (exact 2:1 ratio) */
.coe-cols {
    display: flex;
    align-items: flex-start;
    gap: clamp(24px, 5.52vw, 106px);
}

/* Left column: 2× the right */
.coe-left {
    flex: 2 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Right column: 1× */
.coe-right {
    flex: 1 1 0;
    min-width: 0;
}

/* ---- Left column: image ---- */
/* Figma: RECTANGLE 848×424px, cover fill */
.coe-img-wrap {
    width: 100%;
    overflow: hidden;
}

.coe-img {
    display: block;
    width: 100%;
    height: auto;
    /* exact Figma ratio: 848:424 = 2:1 */
    aspect-ratio: 2 / 1;
    object-fit: cover;
    object-position: center;
}

/* ---- Left column: description text box ---- */
/* Figma: Frame 848×333px, border 1px #E5E7EB, text at x=31.8px, y=34.33px */
.coe-desc-box {
    border: 1px solid #e5e7eb;
    padding: 34px 32px 32px;
}

/* Figma: DM Sans Regular 16px, 150% lh, rgba(13,27,42,0.7) */
.coe-desc-text {
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: rgba(13, 27, 42, 0.7);
}

/* ============================================================
   RIGHT COLUMN: CENTRE LEADS CARD
   Figma: 424×338px, border 1px #E5E7EB
   ============================================================ */

.coe-leads-card {
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

/* Card header: bg #F8F7F4, padding 16px 24px, height ~52px */
.coe-leads-header {
    background: #f8f7f4;
    padding: 16px 24px;
    min-height: 52px;
    display: flex;
    align-items: center;
}

/* "CENTRE LEADS" — DM Sans Bold 12px, letterSpacing 8%, uppercase, #0D1B2A */
.coe-leads-label {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0d1b2a;
}

/* Card body: padding 24px, gap 32px between rows */
.coe-leads-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ---- Researcher row (base) ---- */
/* Figma: each row ~ 79.5px tall; avatar 79.5×79.5, info at x=95.4 */
.coe-lead-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

/* Circular avatar: 96×96px */
.coe-lead-avatar {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
}

/* Info column next to avatar */
.coe-lead-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 2px;
}

/* Name: DM Sans SemiBold ~14.5px, 21.2px lh, #333333 */
.coe-lead-name {
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 14.5px;
    line-height: 21.2px;
    color: #333333;
}

/* Role: DM Sans Regular 14px, 150% lh, #6B7280 */
.coe-lead-role {
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: #6b7280;
}

/* "View profile" link */
.coe-lead-profile {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin-top: 6px;
}

.coe-lead-profile-text {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 20.25px;
    color: #f16522;
}

.coe-lead-profile:hover .coe-lead-profile-text {
    text-decoration: underline;
}

.coe-lead-profile-icon {
    display: block;
    flex-shrink: 0;
}

/* ---- Researcher 2 row: extended (avatar-row + sub-text + view-profile) ---- */
/* Figma: Frames R850AS height 121px; text at y=56, link at y=92 (offset by avatar width) */
.coe-lead-row--ext {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.coe-lead-researcher {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

/* Sub info (centre name + view-profile) — aligns with text column after avatar */
.coe-lead-sub-wrap {
    /* offset = avatar width + gap = 96 + 16 = 112px */
    padding-left: 112px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* "Implementation and Scale-Up (CoE-SISU)" — DM Sans Regular 12px, #0D1B2A 70% */
.coe-lead-sub {
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: rgba(13, 27, 42, 0.7);
}

/* ============================================================
   RESPONSIVE — CENTRE DETAILS SECTION
   ============================================================ */

@media (max-width: 1440px) {
    .coe-inner {
        padding: 0 48px;
    }
}

@media (max-width: 1199px) {
    .coe-section {
        padding: 80px 0 100px;
    }

    .coe-inner {
        padding: 0 32px;
        gap: 40px;
    }

    .coe-main-heading {
        font-size: 36px;
    }
}

@media (max-width: 991px) {
    .coe-section {
        padding: 72px 0 80px;
    }

    .coe-inner {
        padding: 0 24px;
        gap: 32px;
    }

    /* Stack columns vertically on tablet */
    .coe-cols {
        flex-direction: column;
        gap: 40px;
    }

    .coe-left,
    .coe-right {
        flex: none;
        width: 100%;
    }

    .coe-main-heading {
        font-size: 32px;
        max-width: 100%;
    }

    .coe-lead-avatar {
        width: 88px;
        height: 88px;
    }

    .coe-lead-sub-wrap {
        padding-left: 104px;
    }
}

@media (max-width: 767px) {
    .coe-section {
        padding: 56px 0 72px;
    }

    .coe-inner {
        padding: 0 16px;
        gap: 28px;
    }

    .coe-main-heading {
        font-size: 28px;
        line-height: 1.25;
    }

    .coe-desc-box {
        padding: 20px 16px;
    }

    .coe-desc-text {
        font-size: 15px;
    }

    .coe-lead-avatar {
        width: 72px;
        height: 72px;
    }

    .coe-lead-sub-wrap {
        padding-left: 88px;
    }
}

@media (max-width: 480px) {
    .coe-lead-avatar {
        width: 64px;
        height: 64px;
    }

    .coe-lead-sub-wrap {
        padding-left: 80px;
    }
}

/* ============================================================
   LATEST RESEARCH PROJECTS SECTION (Figma node: 539:19783)
   Bg #F8F7F4.  Padding: 0 173px.  Inner: padding-top 98px, gap 69px.
   Section heading centred. Three vertical project cards (reuse rc-card-v).
   ============================================================ */

.coe-lrp-section {
    background: #f8f7f4;
}

.coe-lrp-section--updates {
    background: #ffffff;
    border-top: none;
}

.coe-lrp-section--updates .rc-card-v {
    border: 1px solid #e5e7eb;
}

.coe-lrp-inner {
    max-width: 1574px;
    margin: 0 auto;
    /* 173px each side on 1920 → 9.02vw */
    padding: 98px clamp(24px, 9.02vw, 173px) 96px;
    display: flex;
    flex-direction: column;
    /* gap 69px between header and cards */
    gap: 68px;
}

/* ---- Centred section header ---- */

.coe-lrp-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
}

/* Overline: [44px bar] [text] [44px bar] */
/* Figma: layout_WDIGV6 width=44.25, height=1.23 */
.coe-lrp-overline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14.75px;
}

.coe-lrp-overline-bar {
    display: block;
    flex: 0 0 44.25px;
    height: 1.5px;
    background: #f16522;
}

/* "OUR MEPTEAM" — Inter Bold 12px, letterSpacing 28.68%, uppercase, orange */
.coe-lrp-overline-text {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 150%;
    letter-spacing: 0.2868em;
    text-transform: uppercase;
    color: #f16522;
}

/* Main heading — Playfair Display Bold 44px, dark navy, centred */
.coe-lrp-heading {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 120%;
    letter-spacing: -0.014em;
    color: #0d1b2a;
}

/* Italic orange "Projects" */
.coe-lrp-heading-em {
    font-style: italic;
    font-weight: 700;
    color: #f16522;
}

/* ---- 3-column project cards grid ---- */
/* Figma: 3 × 508px cards, gap ≈ 25px (533-508); cards reuse rc-card-v base */
.coe-lrp-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Override rc-card-v background images for project cards */
/* (rc-card-v-img::after already supplies the gradient overlay) */
.coe-lrp-img--1 {
    background-image: url('../images/coe-project-card-1.png');
    background-size: cover;
    background-position: center;
}

.coe-lrp-img--2 {
    background-image: url('../images/coe-project-card-2.png');
    background-size: cover;
    background-position: center;
}

.coe-lrp-img--3 {
    background-image: url('../images/coe-project-card-3.png');
    background-size: cover;
    background-position: center;
}

/* ============================================================
   RESPONSIVE — LATEST RESEARCH PROJECTS
   ============================================================ */

@media (max-width: 1440px) {
    .coe-lrp-inner {
        padding-left: 48px;
        padding-right: 48px;
    }
}

@media (max-width: 1199px) {
    .coe-lrp-inner {
        padding-top: 72px;
        padding-bottom: 72px;
        padding-left: 32px;
        padding-right: 32px;
        gap: 56px;
    }

    .coe-lrp-heading {
        font-size: 36px;
    }
}

@media (max-width: 991px) {
    .coe-lrp-inner {
        padding: 72px 24px;
        gap: 48px;
    }

    /* Wrap to 2-column grid */
    .coe-lrp-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .coe-lrp-cards .rc-card-v {
        flex: 1 1 calc(50% - 12px);
        height: 560px;
    }

    .coe-lrp-heading {
        font-size: 32px;
    }
}

@media (max-width: 767px) {
    .coe-lrp-inner {
        padding: 56px 16px;
        gap: 40px;
    }

    .coe-lrp-heading {
        font-size: 28px;
    }

    /* Single-column stack */
    .coe-lrp-cards {
        grid-template-columns: 1fr;
    }

    .coe-lrp-cards .rc-card-v {
        flex: none;
        width: 100%;
        height: auto;
    }
}