.views-exposed-form {
  display: grid;
  gap: 1rem;
  margin-block-end: 1rem;
}

.views-exposed-form #edit-actions {
  grid-column-start: 1;
}

@media (min-width: 768px) {
  .views-exposed-form:not(#views-exposed-form-mission-hub-block-1) {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* E.g. the map on the events listing page. */
.views-element-container {
  margin-block-end: 1rem;
}

.views-listing .views-exposed-form {
  display: grid;
  gap: 1rem;
  align-items: end;
  margin-block-end: 2rem;
}

.views-listing-row {
  display: grid;
  gap: 0.5rem;
  margin-block-end: 2rem;
}

@media (min-width: 768px) {
  .views-listing-row {
    gap: 2rem;
    grid-template-columns: minmax(150px, 1fr) 2fr;
  }

  .views-listing--homepage .views-listing-row {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }

  .views-listing .views-exposed-form {
    grid-template-columns: repeat(2, 1fr);
  }
}

.views-listing--homepage {
  position: relative;
  display: grid;
  column-gap: 4rem;
  padding-block: 2rem;
  color: white;
  background-color: var(--color-ec-blue-75);
}

@media (min-width: 768px) {
  .views-listing--homepage {
    grid-template-columns: repeat(2, 1fr);
    padding-block: 4rem;
  }
}

.views-listing--homepage::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  width: 100vw;
  left: calc(50% - 50vw);
  background-color: var(--color-ec-blue-75);
}

.views-listing--homepage header,
.views-listing--homepage footer {
  grid-column: -1/1;
}

.views-listing-title {
  font-size: var(--font-size-large);
}

.views-listing--homepage .views-listing-title {
  font-size: var(--font-size);
}

.views-listing--homepage .views-listing-created {
  font-size: var(--font-size-medium);
}

.views-listing-title a {
  color: var(--color-ec-blue);
  text-decoration: none;
}

.views-listing--homepage .views-listing-title a {
  color: currentColor;
  text-decoration: underline;
}

.views-listing-title a:focus,
.views-listing-title a:hover {
  text-decoration: underline;
}

.views-exposed-form[data-drupal-selector*="good-practice"],
.views-exposed-form[data-drupal-selector*="members-activities"] {
  display: grid;
  gap: 1rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .views-exposed-form[data-drupal-selector*="good-practice"],
  .views-exposed-form[data-drupal-selector*="members-activities"] {
    grid-template-columns: repeat(2, 1fr);
  }
}

.views-exposed-form[data-drupal-selector*="good-practice"] .form-actions,
.views-exposed-form[data-drupal-selector*="members-activities"] .form-actions {
  grid-column: 1 / -1;
}

.term-ref {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-end: 1rem;
}

.term-ref > div {
  display: inline-block;
  padding: 0.25rem 1.5rem;
  color: #000;
  background-color: var(--color-ec-blue-25);
}

.term-ref a {
  color: currentColor;
  text-decoration: none;
}

.term-ref a:hover,
.term-ref a:focus {
  text-decoration: underline;
}

.term-ref + .term-ref {
  margin-top: 1rem;
}

.views-listing--resources .col1 {
  aspect-ratio: 2/1;
}

.views-listing--resources .col1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.views-row--odd,
.views-row--even {
  padding: 2rem;
}

.content-type-home-page .views-row--odd,
.content-type-home-page .views-row--even {
  padding: 1rem;
}

.views-row--odd {
  background-color: var(--color-ec-grey-5);
}

.content-type-home-page .ecl-list-illustration--col-3  .views-row--even {
  background-color: var(--color-ec-grey-5);
}

.views-data-export-feed {
  display: inline-block;
  margin-block-start: 1rem;
}

.ecl-list-illustration__date {
  margin-inline-end: 2rem;
}

@media (width >= 996px) {
  .views__mission-hub {
    display: grid;
    grid-template-columns: 1fr 3fr;
    column-gap: 2rem;
  }

  .views__mission-hub .hub-sidebar {
    grid-row: 1 / span 12;
    align-self: start;
  }

  .views__mission-hub .form-item,
  .views__mission-hub .ecl-text-input,
  .views__mission-hub .ecl-select__container {
    width: 100%;
  }
}

.views__mission-hub .views-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: white;
  border: 1px solid var(--color-ec-grey-25);
  border-radius: 1em;
  margin-bottom: 2em;
}
.hub-title {
  border-bottom: 1px solid;
  margin-bottom: 1.2em;
  padding-bottom: 1em;
}

.hub-title h2 {
  margin: 0;
}

.views__mission-hub .views-field-field-project-description {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.views__mission-hub .views-row h2 {
  margin: 0 0 0.5em 0;
}

.views__mission-hub .project-hub__teaser {
  display: grid;
  gap: 2rem;
}

.project-hub__teaser > div img {
  margin-right: 1em;
}

@media (width >= 768px) {
  .views__mission-hub .project-hub__teaser.project-hub__teaser.has-logo {
    grid-template-columns: 1fr 200px;
  }
}

.view-resources .views-row {
  background-color: white;
 }

[id=views-exposed-form-resources-block-1] {
  display: inline;
}

.events--title {
  font-size: 1.25em;
  margin-bottom: 1em;
}

.project-details--image {
  width: 100%;
  height: auto;
}

.project-details--upper {
  background-color: #FAFAFA;
  padding: 2em 0;
}

.project-details--lower {
  background-color: #EBEBEB;
  padding: 2em 0;
  margin-bottom: 3em;
}

.project-details--flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.project-details--acronym {
  background-color: #558B1E;
  font-size: 1.25em;
  color: white;
  padding: 0.5em 3em 0.5em 0.5em;
  margin-right: 1em;
  font-weight: bold;
  text-transform: uppercase;
  display: inline-block;
}

.project-details--date {
  display: inline-block;
}

.project-details--title {
  margin-top: 2em;
  font-size: 1.1em;
}

.project-details--lower span {
  margin-right: 4em;
}

.project-listing--database {
  display: inline-block;
  margin-top: 1em;
  padding: 0.5em 1em;
  background-color: #ffd617;
  color: black;
  text-decoration: none;
}

.project-listing--description {
  line-height: 1.6;
}

.project-listing--thematic-group {
  display: inline-block;
  margin-top: 0.25em;
  padding: 0.5em 1em;
  color: black;
  text-decoration: none;
}


.project-listing--thematic-group:nth-of-type(4n+1) {
  background-color: #ADCD2C;
}
.project-listing--thematic-group:nth-of-type(4n+2) {
  background-color: #A0D5E4;
}
.project-listing--thematic-group:nth-of-type(4n+3) {
  background-color: #F2A900;
}
.project-listing--thematic-group:nth-of-type(4n+4) {
  background-color: #558B1E;
}

.hub__details > div { margin-bottom: 1em; }
.hub__details .ecl-link { color: #3860ED; }
.hub-objectives__title.active { font-weight: bold; }
.hub__header .text-align-justify {
  text-align: left;
}

.ambassadors-row--section-footer {
  border-bottom: 1px solid #000;
  margin: auto;
  padding-bottom: 2em;
  padding: 0em 30% 2em 30%;
  text-align: center;
  margin-bottom: 3em;
}

.ambassadors-row--section { margin-bottom: 1em; }

.ambassadors-row--section-title {
  display: inline-block;
  font-size: 1.3em;
  font-weight: bold;
  border-left: 10px solid;
  padding: 0 10px;
  margin-bottom: 0.5em;
}

.ambassadors-row--section-title a { color: black; }

.ambassadors-row--section-title.dgreen {
  border-left-color: #558B1E;
}

.ambassadors-row--section-title.lblue {
  border-left-color: #A0D5E4;
}

.ambassadors-row--section-title.lgreen {
  border-left-color: #ADCD2C;
}

.ambassadors-row--section-title.brown {
  border-left-color: #C07221;
}

.ambassadors-row--image { text-align: right; }

.ambassadors-row--padded { padding: 0.25em 0; }

.ambassadors-row--objectives ul { margin: 0; }
.ambassadors-row--objectives li { list-style: none; }

.ambassadors-row--statement__content {
  font-style: italic;
  margin: 0.5em 4em 1em 4em;
}

.ambassadors-row--statement__content::before{
  content: url('../assets/quotemark.png');
  position: absolute;
  left: 1em;
}

.ambassadors-row--statement__content::after{
  content: url('../assets/quotemark.png');
  transform: rotate(180deg);
  position: absolute;
  right: 2em;
  bottom: 1em;
}

.ambassadors-row--flag {
  outline: 1px solid #ebebeb;
}

.ambassadors-row--location {
  margin-left: 0.5em;
}

.ambassadors-row--flag,
.ambassadors-row--location {
  display: inline-block;
}