/* =========================================================
   PROJECTS PAGE
========================================================= */


/* =========================================================
   MOVE WHOLE PROJECTS VIEW LEFT
   Aligns content with PROJECTS title
========================================================= */

.projects-view {
    position: relative;
    left: -195px;
    width: calc(100% + 195px);
}


/* =========================================================
   FILTERS AREA
========================================================= */

.projects-view .view-filters {
    position: relative !important;
    left: -17px !important;

    margin-top: 10px !important;
    margin-bottom: 35px !important;

    padding: 0 !important;
}


.projects-view .views-exposed-form {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   FILTERS ROW
========================================================= */

.projects-view form.views-exposed-form .form--inline {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;

    gap: 18px !important;

    width: 120% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Individual filter */

.projects-view form.views-exposed-form .form--inline > .form-item {
    float: none !important;
    clear: none !important;

    flex: 1 1 0;
    min-width: 0;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   FILTER LABELS
========================================================= */

.projects-view form.views-exposed-form label {
    display: block;

    margin: 0 0 8px 0 !important;
    padding: 0 !important;

    color: #24346F;

    font-weight: 600;
}


/* =========================================================
   HIDE ORIGINAL DRUPAL SELECT
========================================================= */

.projects-view .projects-original-select {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    opacity: 0 !important;
    pointer-events: none !important;

    overflow: hidden !important;
}


/* =========================================================
   CUSTOM SELECT
========================================================= */

.projects-view .projects-custom-select {
    position: relative;

    width: 100%;
}


/* Closed dropdown */

.projects-view .projects-custom-select__selected {
    position: relative;

    width: 100%;
    height: 44px;

    box-sizing: border-box;

    margin: 0;
    padding: 0 42px 0 15px;

    background: #24346F;
    color: #ffffff;

    border: 1px solid #24346F;
    border-radius: 0;

    font-family: inherit;
    font-size: 14px;
    font-weight: 400;

    text-align: left;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}


/* Dropdown arrow */

.projects-view .projects-custom-select__selected::after {
    content: "";

    position: absolute;

    top: 50%;
    right: 16px;

    width: 7px;
    height: 7px;

    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;

    transform: translateY(-65%) rotate(45deg);

    transition: transform 0.2s ease;
}


/* Arrow when open */

.projects-view .projects-custom-select.is-open
.projects-custom-select__selected::after {
    transform: translateY(-30%) rotate(225deg);
}


/* Keep selected box dark blue */

.projects-view .projects-custom-select.is-open
.projects-custom-select__selected {
    background: #24346F;
    border-color: #24346F;
}


/* =========================================================
   DROPDOWN OPTIONS
========================================================= */

.projects-view .projects-custom-select__options {
    position: absolute;

    top: calc(100% + 2px);
    left: 0;

    z-index: 1000;

    display: none;

    width: 330px;
    min-width: 100%;

    box-sizing: border-box;

    background: #4187d1;

    border: 1px solid #4187d1;

    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}


/* Show dropdown */

.projects-view .projects-custom-select.is-open
.projects-custom-select__options {
    display: block;
}


/* Option */

.projects-view .projects-custom-select__option {
    display: block;

    width: 100%;

    box-sizing: border-box;

    margin: 0;
    padding: 12px 18px;

    background: #4187d1;
    color: #ffffff;

    border: 0;

    font-family: inherit;
    font-size: 14px;
    font-weight: 400;

    line-height: 1.4;

    text-align: left;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}


/* Hover */

.projects-view .projects-custom-select__option:hover,
.projects-view .projects-custom-select__option:focus {
    background: #24346F;
    color: #ffffff;

    outline: none;
}


/* Selected option */

.projects-view .projects-custom-select__option.is-selected {
    background: #24346F;
    color: #ffffff;
}


/* =========================================================
   APPLY + RESET
========================================================= */

.projects-view form.views-exposed-form .form-actions {
    float: none !important;
    clear: none !important;

    flex: 0 0 auto;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;

    gap: 10px !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Buttons */

.projects-view form.views-exposed-form .form-actions input,
.projects-view form.views-exposed-form .form-actions button,
.projects-view form.views-exposed-form .form-actions a {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 130px;
    height: 44px;

    box-sizing: border-box;

    margin: 0 !important;
    padding: 0 15px !important;

    background: #24346F;
    color: #ffffff;

    border: 1px solid #24346F;
    border-radius: 0;

    font-family: inherit;
    font-size: 14px;
    font-weight: 400;

    line-height: 1;

    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}


/* Button hover */

.projects-view form.views-exposed-form .form-actions input:hover,
.projects-view form.views-exposed-form .form-actions button:hover,
.projects-view form.views-exposed-form .form-actions a:hover,
.projects-view form.views-exposed-form .form-actions input:focus,
.projects-view form.views-exposed-form .form-actions button:focus,
.projects-view form.views-exposed-form .form-actions a:focus {
    background: #4187d1;
    border-color: #4187d1;
    color: #ffffff;

    text-decoration: none;
    outline: none;
}


/* =========================================================
   PROJECT TEASER
========================================================= */

.projects-view .project-teaser {
    width: 100%;

    margin: 0;
    padding: 0;
}


/* =========================================================
   PROJECT TITLE
========================================================= */

.projects-view .project-teaser__title {
    margin: 0 0 10px 0;
    padding: 0;

    font-size: 28px;
    font-weight: 400;
    line-height: 1.2;
}


.projects-view .project-teaser__title a {
    color: #111111;

    text-decoration: none;
}


.projects-view .project-teaser__title a:hover,
.projects-view .project-teaser__title a:focus {
    color: #24346F;

    text-decoration: none;
}


/* =========================================================
   IMAGE + PROJECT INFORMATION
========================================================= */

.projects-view .project-teaser__content {
    display: grid;

    grid-template-columns: 259px minmax(0, 1fr);

    column-gap: 28px;

    align-items: start;

    width: 100%;
}


/* =========================================================
   PROJECT IMAGE
========================================================= */

.projects-view .project-teaser__image {
    grid-column: 1;

    width: 259px;

    margin: 0;
    padding: 0;
}


/* Remove old theme behaviour */

.projects-view .project-teaser__image .field--name-field-image,
.projects-view .project-teaser__image .images-container,
.projects-view .project-teaser__image .image-preview,
.projects-view .project-teaser__image .image-wrapper,
.projects-view .project-teaser__image .field__item {
    float: none !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Project image */

.projects-view .project-teaser__image img {
    display: block;

    width: 259px;
    height: 174px;

    max-width: 100%;

    object-fit: contain;

    margin: 0;
}


/* =========================================================
   PROJECT INFORMATION
========================================================= */

.projects-view .project-teaser__info {
    grid-column: 2;

    min-width: 0;

    margin: 0;
    padding: 0;
}


.projects-view .project-teaser__body {
    width: 100%;

    margin: 0;
    padding: 0;
}


/* Remove old body behaviour */

.projects-view .project-teaser__body .field--name-body {
    float: none !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Compact text spacing */

.projects-view .project-teaser__body p {
    margin: 0 0 7px 0;

    line-height: 1.35;
}


/* Remove unnecessary last paragraph gap */

.projects-view .project-teaser__body p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   READ MORE
========================================================= */

.projects-view .project-teaser__links {
    margin-top: 8px;

    padding: 0;
}


.projects-view .project-teaser__links .node__links {
    margin: 0 !important;
    padding: 0 !important;
}


.projects-view .project-teaser__links ul {
    margin: 0 !important;
    padding: 0 !important;
}


/* Read More button */

.projects-view .project-teaser__links a {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 130px;
    height: 42px;

    box-sizing: border-box;

    padding: 0 20px;

    background: #24346F;
    color: #ffffff;

    border: 1px solid #24346F;

    font-size: 14px;

    text-decoration: none;
    text-transform: uppercase;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}


/* Read More hover */

.projects-view .project-teaser__links a:hover,
.projects-view .project-teaser__links a:focus {
    background: #4187d1;
    border-color: #4187d1;

    color: #ffffff;

    text-decoration: none;
}


/* =========================================================
   SPACE BETWEEN PROJECTS
========================================================= */

.projects-view .view-content > .views-row {
    margin: 0 0 22px 0;
    padding: 0 0 22px 0;

    border-bottom: 1px solid #d7d7d7;
}


.projects-view .view-content > .views-row:last-child {
    margin-bottom: 0;

    border-bottom: 0;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .projects-view {
        left: 0;

        width: 100%;
    }


    .projects-view .view-filters {
        left: 0 !important;

        margin-top: 10px !important;
        margin-bottom: 30px !important;
    }


    .projects-view form.views-exposed-form .form--inline {
        flex-wrap: wrap !important;

        gap: 15px !important;
    }


    .projects-view form.views-exposed-form .form--inline > .form-item {
        flex: 1 1 calc(50% - 15px);
    }


    .projects-view form.views-exposed-form .form-actions {
        flex: 1 1 100%;
    }


    .projects-view .projects-custom-select__options {
        width: 100%;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    /* Filters */

    .projects-view form.views-exposed-form .form--inline > .form-item {
        flex: 1 1 100%;
    }


    .projects-view form.views-exposed-form .form-actions {
        width: 100%;
    }


    .projects-view form.views-exposed-form .form-actions input,
    .projects-view form.views-exposed-form .form-actions button,
    .projects-view form.views-exposed-form .form-actions a {
        flex: 1 1 50%;

        width: auto;
    }


    .projects-view .projects-custom-select__options {
        width: 100%;
        min-width: 100%;
    }


    /* Project */

    .projects-view .project-teaser__content {
        display: block;
    }


    .projects-view .project-teaser__image {
        width: 100%;

        margin-bottom: 15px;
    }


    .projects-view .project-teaser__image img {
        width: 259px;
        max-width: 100%;

        height: auto;
    }


    .projects-view .project-teaser__info {
        width: 100%;
    }


    .projects-view .project-teaser__title {
        margin-bottom: 10px;

        font-size: 24px;
    }


    .projects-view .view-content > .views-row {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
}

/* Year filter - same style as the other project filters */
.projects-view input[name="field_year_value"] {
  background-color: #283b78 !important;
  color: #ffffff !important;
  border: none !important;
  height: 44px;
  padding: 0 15px;
}

.projects-view input[name="field_year_value"]::placeholder {
  color: #ffffff;
  opacity: 1;
}

.projects-view input[name="field_year_value"]:focus {
  background-color: #283b78 !important;
  color: #ffffff !important;
  outline: 2px solid #5b74c4;
}

/* FORCE ALL FILTER CONTROLS TO SAME HEIGHT */
.projects-view .projects-custom-select__selected {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;

    display: flex !important;
    align-items: center !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Leave space for dropdown arrow */
.projects-view .projects-custom-select__selected {
    padding-right: 42px !important;
}

/* Year same height */
.projects-view input[name="field_year_value"] {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    box-sizing: border-box !important;
}


/* Truncate long selected value */
.projects-view .projects-custom-select__selected {
    position: relative;
    overflow: hidden !important;
    white-space: nowrap !important;
    padding-right: 42px !important;
}

.projects-view .projects-custom-select__selected span {
    display: block !important;
    max-width: calc(100% - 10px) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}