/* ==========================================================================
   CMP-097: Support Menu
   Mobile-first responsive design
   ========================================================================== */

:root {
  --support-menu-icon-size: 30px;
  --support-menu-item-link-min-height-md: 72px;
  --support-menu-item-link-min-height-lg: 86px;
  --support-menu-item-border-gradient: linear-gradient(
    102.25deg,
    var(--color-primary-dark) 9.87%,
    var(--color-primary) 109.91%
  );
}

.c-support-menu {
  padding-top: 0;
  padding-bottom: var(--space-lg);
  background-color: var(--color-white);
}

.c-support-menu__header {
  margin-bottom: var(--space-lg);
}

.c-support-menu__title-row {
  display: block;
}

.c-support-menu__desc {
  margin: var(--space-2xl) 0 0;
  font-family: var(--font-main);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: calc(var(--space-xl) - 6px);
  letter-spacing: 0;
  color: var(--color-text-primary);
  text-align: center;
  white-space: normal;
  overflow-wrap: normal;
}

.c-support-menu__desc p {
  margin: 0;
}

.c-support-menu__desc p + p {
  margin-top: 0;
}

.c-support-menu__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.c-support-menu__media {
  order: 1;
  margin: 0;
}

.c-support-menu__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.c-support-menu__list {
  order: 2;
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-support-menu__item {
  margin: 0;
  border-bottom: 1px solid transparent;
  border-image: var(--support-menu-item-border-gradient) 1;
  transition: all .3s;
}

.c-support-menu__item-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: calc(var(--space-sm) - 2px) var(--space-sm);
  min-height: var(--space-5xl);
  text-decoration: none;
  transition: all var(--duration-normal);
}

.c-support-menu__item-main {
  display: inline-flex;
  align-items: center;
  gap: var(--space-lg);
  min-width: 0;
}

.c-support-menu__item:hover .c-support-menu__item-text {
  color: var(--color-white);
}

.c-support-menu__item:hover .c-support-menu__item-text-main,
.c-support-menu__item:hover .c-support-menu__item-text-sub {
  color: var(--color-white);
}

.c-support-menu__item:focus-visible {
  outline: none;
  box-shadow: inset var(--shadow-focus-primary);
}

.c-support-menu__item-text {
  display: block;
  min-width: 0;
  font-family: var(--font-main);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--space-lg);
}

.c-support-menu__item-text-main {
  display: inline;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: var(--color-text-primary);
}

.c-support-menu__item-text-sub {
  display: inline;
  margin-left: var(--space-xs);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: var(--color-text-primary);
}

.c-support-menu__item-icon {
  flex-shrink: 0;
  display: block;
  width: var(--support-menu-icon-size);
  height: var(--support-menu-icon-size);
  transition: all var(--duration-slow);
}

.c-support-menu__item-arrow {
  flex-shrink: 0;
  display: block;
  width: var(--support-menu-icon-size);
  height: var(--support-menu-icon-size);
  transition: all var(--duration-slow);
}

.c-support-menu__item:hover {
  background-color: var(--color-primary-dark);
}

.c-support-menu__item:hover .c-support-menu__item-icon {
  filter: brightness(0) saturate(100%) invert(100%);
}

.c-support-menu__item:hover .c-support-menu__item-arrow {
  content: url("../img/icon-arrow-005.svg");
}

@media (min-width: 768px) {
  .c-support-menu {
    padding-top: var(--space-6xl);
    padding-bottom: var(--space-6xl);
  }

  .c-support-menu__header {
    margin-bottom: var(--space-6xl);
  }

  .c-support-menu__desc {
    max-width: var(--layout-prose);
    margin-top: var(--space-2xl);
    font-size: var(--font-size-lg);
    line-height: var(--space-xl);
    padding-inline: 0;
  }

  .c-support-menu__body {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-5xl);
  }

  .c-support-menu__media {
    order: 1;
    flex: 0 0 calc((100% - var(--space-5xl)) * 0.63);
    display: flex;
  }

  .c-support-menu__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  .c-support-menu__item-link {
    min-height: var(--support-menu-item-link-min-height-md);
  }
}

@media (min-width: 1024px) {
  .c-support-menu__list {
    order: 2;
    flex: 0 0 calc((100% - var(--space-5xl)) * 0.37);
  }

  .c-support-menu__item-text-main {
    font-size: var(--font-size-lg);
    line-height: var(--space-xl);
  }

  .c-support-menu__item-text-sub {
    font-size: var(--font-size-sm);
    line-height: var(--space-lg);
  }

  .c-support-menu__item-icon {
    width: var(--space-xl);
    height: var(--space-xl);
  }

  .c-support-menu__item-link {
    min-height: var(--support-menu-item-link-min-height-lg);
  }
}