/* ============================================================
   RESEARCH PROJECTS PAGE (Figma node: 539:19862)
   Builds on top of research.css (hero, base styles)
   ============================================================ */

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

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

/* ============================================================
   PROJECTS LIST SECTION (Figma: Frame 4998 — 539:19870)
   White bg. Padding: 100px (top) 200px (right) 120px (bottom) 140px (left)
   on 1920px canvas.  Projects list centred at 1300px wide.
   ============================================================ */

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

.rp-inner {
    max-width: 1642px;
    margin: 0 auto;
    /* 140px left / 200px right on 1920 → ~7.29vw each side */
    padding: 0 clamp(24px, 7.29vw, 200px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ---- Year / Centre-Hub filters ---- */
.rp-filters {
    width: 100%;
    max-width: 1300px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 24px;
}

.rp-filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 220px;
    flex: 1 1 220px;
    max-width: 320px;
}

.rp-filter-label {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #1c2b4a;
}

.rp-filter-select {
    width: 100%;
    appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231c2b4a' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    border: 1px solid #d1d5dc;
    border-radius: var(--radius-btn, 25px);
    padding: 12px 40px 12px 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    color: #1c2b4a;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.rp-filter-select:hover {
    border-color: #f16522;
}

.rp-filter-select:focus {
    outline: none;
    border-color: #f16522;
    box-shadow: 0 0 0 3px rgba(241, 101, 34, 0.12);
}

.rp-filter-clear {
    border: 0;
    background: transparent;
    padding: 12px 4px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 20px;
    color: #f16522;
    cursor: pointer;
}

.rp-filter-clear:hover {
    text-decoration: underline;
}

.rp-empty {
    width: 100%;
    max-width: 1300px;
    margin: 0;
    padding: 32px;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-card, 25px);
    background: #f8f7f4;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #6b7280;
    text-align: center;
}

/* ---- Project list outer container ---- */
/* Figma: CurrentProjects — 1300px wide, column gap 24px, padding 32px 1px,
   border 1px #E5E7EB, borderRadius 2px */
.rp-list {
    width: 100%;
    max-width: 1300px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 1px;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-card, 25px);
}

/* ---- Project item outer wrapper ---- */
/* Figma: layout_6LS1ZP — column, gap 4px, padding 0px 32px, fill horizontal */
.rp-item {
    padding: 0 32px;
}

/* ---- Project card inner ---- */
/* Figma: layout_I8QCF6 — column, padding 24px, bg #F8F7F4,
   border-left 3px solid #F16522, borderRadius 2px */
.rp-card {
    background: #f8f7f4;
    border-left: 3px solid #f16522;
    border-radius: 2px;
    padding: 24px;
}

/* ---- Card row: left content + right button ---- */
/* Figma: layout_3XKGDK — row, space-between, align items center, fill */
.rp-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* ---- Left content column ---- */
/* Figma: layout_L0X4OD — column, gap 12px, width 959px */
.rp-card-left {
    flex: 1 1 0;
    min-width: 0;
    max-width: 959px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---- Card title ---- */
/* Figma: style_5B4636 — Playfair Display Bold 16px, 23.2px lh, #1C2B4A */
.rp-card-title {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 23.2px;
    color: #1c2b4a;
}

/* ---- Card description ---- */
/* Figma: style_BC6RQG — Inter Regular 13.5px, 22.95px lh, #6B7280 */
.rp-card-desc {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 13.5px;
    line-height: 22.95px;
    color: #6b7280;
}

/* ---- Meta tag row ---- */
/* Figma: layout_RUT5XQ — row, align items center, gap 24px, fill */
.rp-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 24px;
}

/* ---- Individual meta item (icon + text) ---- */
/* Figma: layout_264S1C — row, align items center, gap 6px, hug */
.rp-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* ---- Meta icon (12×12 actual Figma SVG — orange #F16522 baked in) ---- */
.rp-meta-icon {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    display: block;
}

/* ---- Meta text ---- */
/* Figma: style_80HTBW — Inter Medium 12px, 18px lh, rgba(13,27,42,0.7) */
.rp-meta-text {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    color: rgba(13, 27, 42, 0.7);
    white-space: nowrap;
}

/* ---- Right: button wrapper ---- */
.rp-btn-wrap {
    flex-shrink: 0;
}

/* ---- "Learn More" button ---- */
/* Figma: layout_1OJXFH — row, center, gap 8px, padding 12px 24px,
   fill #FFFFFF (white bg), stroke 1px #D1D5DC, borderRadius 6px
   style_ZENFBH — Inter SemiBold 14px, 21px lh, #F16522 */
.rp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: 1px solid #d1d5dc;
    border-radius: 6px;
    background: #ffffff;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 21px;
    color: #f16522;
    white-space: nowrap;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.rp-btn:hover {
    border-color: #f16522;
    box-shadow: 0 0 0 1px rgba(241, 101, 34, 0.15);
    color: #f16522;
}

/* ============================================================
   LOAD MORE SECTION (Figma node: 539:20308)
   Centred button: border 1px #1C2B4A, borderRadius 2px.
   Layout: padding-bottom 72px (gap to footer).
   ============================================================ */

.rp-loadmore-wrap {
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 24px 72px;
}

/* Figma: layout_MSAVFL — fills width of its parent container (207px effective)
   style_U46QF1 — Inter SemiBold 13.5px, 20.25px lh, #1C2B4A */
.rp-loadmore-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-width: 207px;
    padding: 12px 24px;
    border: 1px solid #1c2b4a;
    border-radius: 2px;
    background: transparent;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    line-height: 20.25px;
    color: #1c2b4a;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.rp-loadmore-btn:hover:not(:disabled) {
    background: #1c2b4a;
    color: #ffffff;
}

.rp-loadmore-btn:disabled {
    opacity: 0.65;
    cursor: wait;
}

.rp-loadmore-icon {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
}

/* ============================================================
   RESPONSIVE — PROJECTS SECTION
   ============================================================ */

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

@media (max-width: 1199px) {
    .rp-section {
        padding-top: 72px;
    }

    .rp-inner {
        padding-left: 32px;
        padding-right: 32px;
    }

    .rp-list {
        max-width: 100%;
    }
}

@media (max-width: 991px) {
    .rp-section {
        padding-top: 56px;
    }

    .rp-inner {
        padding-left: 24px;
        padding-right: 24px;
    }

    .rp-list {
        padding: 24px 0;
        gap: 20px;
    }

    .rp-item {
        padding: 0 20px;
    }

    .rp-card {
        padding: 20px;
    }

    /* Stack card row: content above, button below */
    .rp-card-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .rp-btn-wrap {
        align-self: flex-start;
    }
}

@media (max-width: 767px) {
    .rp-filters {
        gap: 12px;
        margin-bottom: 16px;
    }

    .rp-filter-field {
        min-width: 100%;
        max-width: none;
        flex: 1 1 100%;
    }

    .rp-section {
        padding-top: 48px;
    }

    .rp-inner {
        padding-left: 16px;
        padding-right: 16px;
    }

    .rp-list {
        padding: 20px 0;
        gap: 16px;
    }

    .rp-item {
        padding: 0 16px;
    }

    .rp-card {
        padding: 16px;
    }

    .rp-card-title {
        font-size: 15px;
        line-height: 22px;
    }

    .rp-card-desc {
        font-size: 13px;
    }

    /* Wrap meta tags on small screens */
    .rp-card-meta {
        gap: 8px 16px;
    }

    .rp-meta-text {
        white-space: normal;
    }

    .rp-loadmore-wrap {
        padding: 32px 16px 56px;
    }

    .rp-loadmore-btn {
        min-width: 180px;
        font-size: 13px;
    }
}