/* =============================================================
   EULiST ECR APP
============================================================= */

:root {

    --eulist-blue: #003DA5;
    --eulist-navy: #151F6D;
    --eulist-green: #008540;
    --eulist-pink: #DEA8E8;
    --eulist-orange: #FF7439;
    --eulist-light-blue: #69A3E8;

    --eulist-warm: #F5EFEB;
    --eulist-ink: #30261E;

    --eulist-border: #E5E5E5;
    --eulist-muted: #6C6C6C;
}


html {
    scroll-behavior: smooth;
}


body {

    font-family: "Outfit", sans-serif;

    color: var(--eulist-ink);

    background: #fff;

    font-weight: 400;

    line-height: 1.6;
}


/* =============================================================
   HERO
============================================================= */

.ecr-hero {

    position: relative;

    background: var(--eulist-navy);

    color: #fff;

    overflow: hidden;
}


.ecr-hero::after {

    content: "";

    position: absolute;

    width: 480px;
    height: 480px;

    right: -130px;
    top: -220px;

    border-radius: 50%;

    background: var(--eulist-orange);

    opacity: .95;
}


.ecr-hero::before {

    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    right: 210px;
    bottom: -190px;

    border-radius: 50%;

    background: var(--eulist-light-blue);

    opacity: .45;
}


.ecr-hero .container {

    position: relative;

    z-index: 2;

    padding-top: 90px;
    padding-bottom: 90px;
}


.ecr-eyebrow {

    text-transform: uppercase;

    font-size: .82rem;

    font-weight: 600;

    letter-spacing: .09em;

    margin-bottom: 18px;

    color: rgba(255, 255, 255, .75);
}


.ecr-hero h1 {

    font-size: clamp(
        2.8rem,
        6vw,
        5.1rem
    );

    font-weight: 600;

    line-height: .98;

    letter-spacing: -.035em;

    margin-bottom: 28px;

    max-width: 900px;
}


.ecr-hero h1 span {

    color: var(--eulist-orange);
}


.ecr-hero p {

    max-width: 720px;

    margin: 0;

    font-size: 1.25rem;

    font-weight: 300;

    line-height: 1.55;

    color: rgba(255,255,255,.88);
}


/* =============================================================
   SECTION
============================================================= */

.ecr-university-section {

    padding: 80px 0;

    background: #fff;
}


.ecr-section-heading {

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 30px;

    margin-bottom: 40px;
}


.ecr-section-kicker {

    color: var(--eulist-orange);

    font-size: .8rem;

    font-weight: 600;

    letter-spacing: .08em;

    text-transform: uppercase;

    margin-bottom: 6px;
}


.ecr-section-heading h2 {

    margin: 0;

    color: var(--eulist-navy);

    font-size: clamp(2rem, 4vw, 3rem);

    font-weight: 600;

    letter-spacing: -.02em;
}


.ecr-dataset-info {

    color: #888;

    font-size: .9rem;

    white-space: nowrap;
}


/* =============================================================
   UNIVERSITY CARDS
============================================================= */

.ecr-university-card {

    position: relative;

    display: flex;

    flex-direction: column;

    height: 100%;

    min-height: 260px;

    padding: 0 !important;

    border: 1px solid #ededed;

    border-radius: 0;

    background: #fff;

    color: var(--eulist-ink);

    overflow: hidden;

    cursor: pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


.ecr-university-card::before {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 5px;

    background: var(--eulist-orange);

    transform: scaleX(0);

    transform-origin: left;

    transition: transform .25s ease;

    z-index: 2;
}


.ecr-university-card:hover {

    transform: translateY(-5px);

    border-color: transparent;

    box-shadow:
        0 15px 45px rgba(21, 31, 109, .11);
}


.ecr-university-card:hover::before,
.ecr-university-card.active::before {

    transform: scaleX(1);
}


.ecr-university-card.active {

    border-color: var(--eulist-blue);

    box-shadow:
        0 15px 45px rgba(21, 31, 109, .13);
}


/* Logo area */

.ecr-university-logo-wrap {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 200px;

    padding: 20px;

    background: #f7f7f7;
}


.ecr-university-logo {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    object-position: center;
}


/* Fallback if no logo exists */

.ecr-university-logo-placeholder {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 90px;
    height: 90px;

    background: var(--eulist-navy);

    color: #fff;

    font-size: 1.1rem;

    font-weight: 700;

    letter-spacing: .05em;
}


/* Bottom part */

.ecr-university-card-content {

    display: flex;

    flex-direction: column;

    flex: 1;

    padding: 18px 22px;
}


.ecr-university-card-meta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-top: auto;
}


.ecr-university-count {

    margin: 0;

    color: #777;

    font-size: 1rem;
    font-weight: 500;
}


.ecr-card-arrow {

    position: static;

    flex-shrink: 0;

    color: var(--eulist-orange);

    font-size: 1.45rem;

    line-height: 1;

    transition: transform .2s ease;
}


.ecr-university-card:hover
.ecr-card-arrow {

    transform: translateX(4px);
}


/* =============================================================
   RESULTS
============================================================= */

.ecr-results-section {

    padding: 75px 0 100px;

    background: #F8F8F8;

    scroll-margin-top: 20px;
}


/* =============================================================
   SELECTED UNIVERSITY
============================================================= */

.ecr-selected-university {

    position: relative;

    padding: 36px 40px;

    margin-bottom: 35px;

    background: var(--eulist-blue);

    color: #fff;

    overflow: hidden;
}


.ecr-selected-university::after {

    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    right: -75px;
    top: -75px;

    border-radius: 50%;

    background: var(--eulist-orange);
}


.ecr-selected-university > * {

    position: relative;

    z-index: 1;
}


.ecr-selected-code {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    min-width: 72px;

    height: 72px;

    padding: 0 12px;

    background: #fff;

    color: var(--eulist-blue);

    font-size: .9rem;

    font-weight: 700;

    letter-spacing: .04em;
}


.ecr-selected-university h2 {

    font-size: clamp(
        1.7rem,
        3vw,
        2.5rem
    );

    font-weight: 600;

    color: #fff;
}


.ecr-selected-country {

    color: rgba(255,255,255,.75);
}


.ecr-stats {

    display: flex;

    gap: 12px;

    margin-right: 80px;
}


.ecr-stat {

    padding: 12px 17px;

    border: 1px solid rgba(255,255,255,.25);

    background: rgba(255,255,255,.08);
}


.ecr-stat-value {

    font-size: .9rem;

    font-weight: 500;

    color: #fff;
}


/* =============================================================
   SEARCH
============================================================= */

.ecr-search-wrapper {

    position: relative;

    margin-bottom: 35px;
}


.ecr-search-icon {

    position: absolute;

    left: 20px;

    top: 50%;

    transform: translateY(-50%);

    color: #888;

    pointer-events: none;
}


#positionSearch {

    height: 62px;

    padding-left: 55px;

    padding-right: 20px;

    border: 1px solid #ddd;

    border-radius: 0;

    box-shadow: none;

    font-size: 1rem;
}


#positionSearch:focus {

    border-color: var(--eulist-blue);

    box-shadow:
        0 0 0 3px rgba(0,61,165,.07);
}


/* =============================================================
   DEPARTMENT ACCORDION
============================================================= */

.ecr-accordion {

    --bs-accordion-border-width: 0;
}


.ecr-accordion .accordion-item {

    border: 0;

    border-radius: 0;

    margin-bottom: 14px;

    overflow: hidden;

    background: #fff;
}


.ecr-accordion .accordion-button {

    padding: 24px 30px;

    border: 0;

    border-radius: 0 !important;

    background: #fff;

    color: var(--eulist-navy);

    box-shadow: none;

    font-family: inherit;

    font-size: 1.12rem;

    font-weight: 600;
}


.ecr-accordion .accordion-button:hover {

    background: var(--eulist-warm);
}


.ecr-accordion
.accordion-button:not(.collapsed) {

    background: var(--eulist-navy);

    color: #fff;
}


.ecr-accordion
.accordion-button:not(.collapsed)
.ecr-school {

    color: rgba(255,255,255,.68);
}


.ecr-accordion
.accordion-button:not(.collapsed)
.ecr-department-count {

    background: rgba(255,255,255,.15);

    color: #fff;
}


.ecr-accordion
.accordion-button:not(.collapsed)::after {

    filter: brightness(0) invert(1);
}


.ecr-department-heading {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding-right: 15px;
}


.ecr-school {

    margin-top: 4px;

    font-size: .82rem;

    font-weight: 400;

    color: #777;
}


.ecr-department-count {

    flex-shrink: 0;

    padding: 6px 10px;

    background: #F1F1F1;

    color: #666;

    font-size: .75rem;

    font-weight: 500;
}


.ecr-accordion .accordion-body {

    padding: 35px 30px 40px;
}


.ecr-department-description {

    max-width: 900px;

    white-space: pre-line;

    color: #555;
}


/* =============================================================
   RESEARCH UNIT
============================================================= */

.ecr-unit {

    padding-top: 32px;

    margin-top: 32px;

    border-top: 1px solid #e5e5e5;
}


.ecr-unit:first-child {

    padding-top: 0;

    margin-top: 0;

    border-top: 0;
}


.ecr-unit-title {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    color: var(--eulist-navy);

    font-size: 1.08rem;

    font-weight: 600;
}


.ecr-unit-title::before {

    content: "";

    display: inline-block;

    width: 10px;
    height: 10px;

    flex-shrink: 0;

    background: var(--eulist-orange);
}


/* =============================================================
   POSITION CARDS
============================================================= */

.ecr-position-card {

    position: relative;

    height: 100%;

    padding: 24px;

    border: 1px solid #E5E5E5;

    border-radius: 0;

    background: #fff;

    transition:
        box-shadow .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.ecr-position-card:hover {

    transform: translateY(-3px);

    border-color: transparent;

    box-shadow:
        0 12px 35px rgba(21,31,109,.09);
}


.ecr-position-title {

    margin-bottom: 15px;

    color: var(--eulist-navy);

    font-size: 1.08rem;

    font-weight: 600;

    line-height: 1.35;
}


.ecr-position-meta {

    margin-bottom: 8px;

    color: #666;

    font-size: .88rem;

    line-height: 1.45;
}


.ecr-position-meta strong {

    color: var(--eulist-ink);

    font-weight: 500;
}


/* =============================================================
   BUTTONS
============================================================= */

.eulist-btn {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: 18px;

    padding: 10px 18px;

    border: 0;

    border-radius: 0;

    background: var(--eulist-orange);

    color: var(--eulist-ink);

    font-size: .88rem;

    font-weight: 600;

    text-decoration: none;

    transition:
        background .2s ease,
        color .2s ease;
}


.eulist-btn:hover {

    background: var(--eulist-navy);

    color: #fff;
}


.eulist-btn-secondary {

    padding: 10px 20px;

    border: 0;

    border-radius: 0;

    background: var(--eulist-navy);

    color: #fff;
}


.eulist-btn-secondary:hover {

    background: var(--eulist-blue);

    color: #fff;
}


/* =============================================================
   MODAL
============================================================= */

.ecr-position-modal {

    border: 0;

    overflow: hidden;
}


.ecr-position-modal .modal-header {

    position: relative;

    padding: 32px 35px;

    border: 0;

    background: var(--eulist-navy);

    color: #fff;
}


.ecr-position-modal
.modal-header::after {

    content: "";

    position: absolute;

    width: 95px;
    height: 95px;

    right: -30px;
    bottom: -45px;

    border-radius: 50%;

    background: var(--eulist-orange);
}


.ecr-position-modal .btn-close {

    z-index: 2;

    filter: invert(1);

    opacity: .8;
}


.ecr-modal-unit {

    margin-bottom: 7px;

    color: var(--eulist-orange);

    font-size: .76rem;

    font-weight: 600;

    letter-spacing: .05em;

    text-transform: uppercase;
}


.ecr-position-modal
.modal-title {

    position: relative;

    z-index: 1;

    padding-right: 45px;

    font-size: 1.45rem;

    line-height: 1.3;

    font-weight: 600;
}


.ecr-position-modal .modal-body {

    padding: 35px;
}


.ecr-position-modal .modal-footer {

    padding: 20px 35px;

    border-top: 1px solid #eee;
}


.ecr-modal-section {

    padding-bottom: 22px;

    margin-bottom: 22px;

    border-bottom: 1px solid #eee;
}


.ecr-modal-section:last-child {

    margin-bottom: 0;

    padding-bottom: 0;

    border-bottom: 0;
}


.ecr-modal-label {

    margin-bottom: 7px;

    color: var(--eulist-orange);

    font-size: .75rem;

    font-weight: 600;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.ecr-modal-value {

    /* white-space: pre-line; */

    color: #444;

    line-height: 1.6;
}


.ecr-modal-value a {

    color: var(--eulist-blue);

    text-decoration-thickness: 1px;

    text-underline-offset: 3px;
}


/* =============================================================
   LOADING
============================================================= */

.ecr-loading {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    padding: 60px 0;

    color: #777;
}


.ecr-loading .spinner-border {

    width: 1.5rem;
    height: 1.5rem;

    color: var(--eulist-orange);
}


/* =============================================================
   RESPONSIVE
============================================================= */

@media (max-width: 991.98px) {

    .ecr-hero::after {

        width: 300px;
        height: 300px;

        right: -180px;
        top: -100px;
    }


    .ecr-hero .container {

        padding-top: 65px;
        padding-bottom: 65px;
    }


    .ecr-section-heading {

        align-items: start;

        flex-direction: column;
    }


    .ecr-dataset-info {

        white-space: normal;
    }


    .ecr-stats {

        margin-right: 0;
    }

}


@media (max-width: 767.98px) {

    .ecr-university-section,
    .ecr-results-section {

        padding-top: 55px;
        padding-bottom: 55px;
    }


    .ecr-selected-university {

        padding: 28px 24px;
    }


    .ecr-selected-university::after {

        display: none;
    }


    .ecr-selected-code {

        min-width: 58px;

        height: 58px;
    }


    .ecr-stats {

        flex-wrap: wrap;
    }


    .ecr-accordion
    .accordion-button {

        padding: 20px;
    }


    .ecr-accordion
    .accordion-body {

        padding: 25px 20px 30px;
    }


    .ecr-department-heading {

        align-items: flex-start;
    }


    .ecr-department-count {

        display: none;
    }


    .ecr-position-modal
    .modal-header,
    .ecr-position-modal
    .modal-body,
    .ecr-position-modal
    .modal-footer {

        padding-left: 22px;
        padding-right: 22px;
    }

}

.ecr-contact-name {
    margin-bottom: 2px;
    line-height: 1.3;
}

.ecr-contact-email,
.ecr-contact-phone {
    margin-bottom: 2px;
    line-height: 1.3;
}

.ecr-contact-email a {
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.ecr-contact-name,
.ecr-contact-email,
.ecr-contact-phone {
    line-height: 1.2;
}