ihk24/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss

@import '../../_global/styles/mixins';
@import '../../_global/styles/vars';

section.marketingheader .search {
  position: relative;
  padding: calc(0.4vw + 20px) 0 calc(1vw + 40px);
  min-height: calc(24vw + 220px);
  margin: 0;

  @media(max-width: 767px) {
    padding: calc(1.5vw + 15px) 0 0;
    margin-bottom: -10px;
  }

  + section, + #toclist > section:first-child {
    @media(min-width: 768px) {
      margin-top: 0;
    }
  }

  .container {
    position: relative;
    z-index: 1;
  }

  .row {
    min-height: 620px;

    @media(max-width: 567px) {
      min-height: 0;
    }
  }

  .artwork {
    @media(max-width: 420px) {
      top: 30px;
      right: -20px;
    }
    @media(max-width: 340px) {
      top: 40px;
      right: -30px;
    }
  }

  form {
    position: relative;
    margin: 32px 0 16px;
    box-shadow: 0 3px 20px -5px rgba(#000, 0.3);
    border-radius: var(--border-radius-md) var(--border-radius-xl) var(--border-radius-xl) var(--border-radius-md);

    @media(max-width: 567px) {
      margin-top: 20px;
    }
  }

  h1 {
    margin-left: 0;
    margin-top: 0;

    @media(max-width: 567px) {
      font-size: 24px;
      margin: 0;
    }
  }

  .tiles {
    margin: 0 -8px;
    display: flex;
    flex-wrap: wrap;
    font-family: "Korb", sans-serif;

    @media(max-width: 567px) {
      margin: 0 -6px;
    }

    .tile {
      position: relative;
      display: flex;
      padding: 8px;
      flex: 1 1 33.3333%;
      max-width: 33.3333%;

      &::before {
        position: absolute;
        top: 8px;
        right: 8px;
        margin: 10px 8px;
        font-family: Icons, sans-serif;
        font-size: 18px;
        line-height: 1;
        text-align: center;
        pointer-events: none;
        z-index: 1;
      }

      &[data-type="download"]::before {
        @include icon-small-download;
      }
      &[data-type="external"]::before {
        @include icon-small-link-external;
      }

      @media(max-width: 567px) {
        flex: 1 1 50%;
        max-width: 50%;
        padding: 6px;
      }

      &:nth-child(3) ~ .tile {
        z-index: 1;
      }

      &.downloads, &.a-z, &.events {
        order: 1;
        background-color: transparent;

        &::before {
          font-family: "Icons", sans-serif;
          position: absolute;
          font-size: 24px;
          line-height: 1;
          right: 0;
          top: 0;
          margin: 11px 10px;
          z-index: 1;
          background-color: white;
          padding: 7px 6px 5px;
          border-top-right-radius: 8px;
          border-bottom-left-radius: 8px;

          @media(max-width: 767px) {
            margin: 18px;
            font-size: 24px;
          }
        }

        .outer {
          background-color: var(--theme-color-primary-dimmed-04);
        }

        p {
          margin-bottom: 0.4em;
        }
      }

      &.downloads::before {
        @include icon-suche-datei;
      }
      &.a-z::before {
        @include icon-suche-az;
      }
      &.events::before {
        @include icon-suche-veranstaltung;
      }
    }

    .tile > a, .outer {
      position: relative;
      display: flex;
      align-items: flex-end;
      width: 100%;
      min-height: 108px;
      padding: 18px 24px 24px;
      border-radius: var(--border-radius-md);
      box-shadow: 0 4px 20px -5px rgba(#000, 0.25);
      transition: 0.25s ease;
      line-height: 1.2;
      background-color: var(--theme-color-background);
      overflow: hidden;
      @include focus-visible();

      @media(max-width: 767px) {
        font-size: 16px;
        padding: 10px 10px 15px;
        min-height: 84px;
      }

      &:before {
        content: "";
        position: absolute;
        display: block;
        bottom: 0;
        left: 0;
        right: 0;
        height: var(--border-width);
        background-color: var(--theme-color-secondary);
        transition: 0.25s $easeOutQuad;
      }

      &:hover {
        color: var(--theme-color-secondary-intensed);

        &:before {
          height: var(--border-width-hover);
        }
      }
    }

    .tile > a {
      .item-title {
        text-decoration: underline;
      }
    }

    .outer {
      background-color: var(--theme-primary-light-04);
      padding: 14px 20px 18px;
      border: 4px solid white;

      &::after, &::before {
        display: none;
      }
    }

    .inner {
      display: block;
      max-width: 100%;
    }

    .kicker {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      max-width: 100%;
      display: block;
      text-decoration: none;
    }

    ul {
      list-style: none;
      padding: 0;
      font-size: 16px;
      max-width: 100%;
      margin: 0;

      li {
        margin-top: 5px;
      }

      a {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: 0.2s ease;
        font-weight: 500;

        &:hover {
          color: var(--color-secondary-dark);
        }
      }
    }

    .proposals {
      flex: 1 1 100%;
      padding: 10px 12px 0;
      order: 2;

      a {
        margin: 0 0.3em 0 0.1em;
      }

      p {
        margin-bottom: 0;
      }
    }

    .all-button-wrapper {
      padding: 16px 8px;
      display: block;
      flex: 1 1 100%;
      order: 3;

      .btn {
        transition: 0.2s ease;

        .count {
          margin-left: 0.3em;

          &::before {
            content: '(';
          }
          &::after {
            content: ')';
          }
        }
      }
    }
  }
}