/*
 * SPDX-FileCopyrightText: 2024 Klasse & Methode - IT Kollektiv Stuttgart <member@klasse-methode.it>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */

.header .left .search {
  display: none;
}

.header .title {
  display: inline-block;
  margin-top: 3px;
  margin-bottom: 3px;
  text-transform: none;
  width: calc(100% - 30px);
}

.header .burger {
  margin-top: 0px;
}

section.detail .container-header {
  display: none;
}

section.detail .infos {
  margin-bottom: 1rem;
}
section.detail .info {
  font-weight: 700;
}

section.detail .info .canceled-info {
  text-transform: uppercase;
}

section.detail .info-label {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;

  text-transform: uppercase;
  background-color: var(--color-grey-light);
}

section.detail .container-content a {
  text-decoration: underline;
}
section.detail .container-content .info-tags a {
  text-decoration: none;
}

section.detail p:not(:last-child) {
  margin-bottom: 8px;
}

section.detail .link {
  display: block;
  margin-top: var(--spacing-4);
  margin-bottom: var(--spacing-4);
  text-decoration: underline;
}

section.detail .image {
  width: 100%;
}

.description {
  margin-bottom: 1rem;
}

#map {
  height: 380px;
}

section.container-eventlist-small .container-header {
  display: block;
  text-align: center;
}

section.container-eventlist-small .container-header .name {
  display: block;
  text-transform: uppercase;
}

section.container-eventlist-small .event .event-time {
  width: 75px;
}

@media only screen and (max-width: 500px) {
  section.detail .container-content {
    display: flex;
    flex-wrap: wrap;
  }
  section.detail .container-content .image {
    order: 3;
  }
  section.detail .info {
    margin-bottom: 7px;
  }
}

@media only screen and (min-width: 500px) {
  section.detail .image {
    width: 50%;
    float: right;
    margin-left: 1rem;
    margin-bottom: 1rem;
  }
  section.detail {
    height: fit-content;
  }
  section.detail .info {
    margin-bottom: 7px;
  }
}

@media only screen and (min-width: 800px) {
  section.detail .infos {
    display: flex;
  }
  section.detail .infos > div {
    width: 50%;
  }

  section.detail .container-header {
    display: flex;
  }

  section.detail .info:last-child {
    margin-bottom: 0px;
  }
}