@import "../assets/css/pages.css";

.tooltip {
  width: 3.13vw;
  height: 3.13vw;
  max-width: 30px;
  max-height: 30px;
  cursor: auto;
  pointer-events: none;
  position: fixed;
  display: block;
  top: -1.39vw;
  left: -1.39vw;
  border-radius: 50%;
  box-shadow: 0 0 .69vw 1.04vw var(--green);
  transform: translate(-50%, -50%);
  transition: .3s ease-in-out opacity, .3s ease-in-out width, .3s ease-in-out height;
  z-index: 100;
  opacity: 1;

  &.magnet {
    opacity: 0;
    width: 0;
    height: 0;
  }
}

@supports (-moz-appearance: none) or (-webkit-appearance: none) {
/* Safari и Firefox */
  .tooltip {
    filter: drop-shadow(0 0 1.04vw var(--green));
  }
}

.btn {
  width: max-content;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25vw;
  padding: .938vw 1.667vw;
  border: 1px solid var(--black);
  border-radius: 50px;
  font: 500 .938vw/1 var(--font);
  transition: var(--normal);
  position: relative;

  > svg {
    width: .938vw;
    height: .938vw;
    transition: var(--normal);
    transform: rotate(-45deg);
  }

  &:hover {
    background: var(--green);
    border-color: var(--green);
    gap: 2.5vw;

    > svg {
      transform: rotate(0);
    }
  }

  > .tooltip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.btn-magnet {
  position: relative;

  &::before {
    content: "";
    width: calc(100% + 5.21vw);
    height: calc(100% + 5.21vw);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
}

.our-work-preview {
  padding: 0 1.563vw 0 7.031vw;
}

.our-work-preview__title {
  font: 700 5.469vw/1 var(--font);
}

.our-work-preview__subtitle {
  margin-top: 3.125vw;
  font: 400 1.667vw/2vw var(--font);
  position: relative;
  padding-left: 12.031vw;
  width: 70.26vw;

  &::before {
    content: "";
    width: 3.646vw;
    height: 1px;
    position: absolute;
    top: .938vw;
    left: 7.865vw;
    background: var(--black);
  }
}

.our-work-banner {
  padding: 5.208vw 1.563vw 5.208vw 7.031vw;
}

.our-work-banner__bg {
  position: relative;
  width: 100%;
  height: 15.313vw;
  padding: 2.76vw 3.646vw;
  background: url("../assets/img/cases/our-work/preview-bg.webp") center/cover no-repeat;
  background-color: var(--black);
  color: var(--white);
  border-radius: 3.333vw;

  @media (max-width: 1280px) {
    background-image: url("../assets/img/cases/our-work/preview-bg-desktop.webp");
  }

  @media (max-width: 1000px) {
    background-image: url("../assets/img/cases/our-work/preview-bg-tablet.webp");
  }

  @media (max-width: 600px) {
    background-image: url("../assets/img/cases/our-work/preview-bg-mobile.webp");
  }
}

.our-work-banner__title {
  font: 700 2.917vw/1.1 var(--font);
  letter-spacing: -0.02em;
}

.our-work-banner__text {
  font: 400 1.25vw/1.35 var(--font);
  margin-top: .417vw;
}

.our-work-banner__btn {
  background-color: var(--white);
  margin-top: 1.667vw;
}

.our-work-banner__img {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  width: auto;
}

.filter {
  padding: 2.344vw 7.031vw 0;
}

.filter-categories {
  display: flex;
  align-items: center;
  gap: 3.646vw;
  box-shadow: 0 1px 0 0 rgba(231, 231, 231, 1);
}

.filter-categories__item {
  cursor: pointer;
}

.filter-categories__input:checked {
  + .filter-categories__name {
    color: var(--green);
    border-color: var(--green);
  }
}

.filter-categories__name {
  font: 700 1.25vw/1.688vw var(--font);
  transition: var(--normal);
  display: block;
  height: 100%;
  padding-bottom: .26vw;
  border-bottom: 2px solid transparent;
  position: relative;
  top: 1px;
}

.categories-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.042vw;
  margin-top: 2.083vw;
}

.categories-list__name {
  font: 600 .938vw/1 var(--font);
  letter-spacing: -.02em;
  transition: var(--normal);
  padding: .825vw 1.042vw .625vw 2.604vw;
  border: 1px solid var(--black);
  border-radius: .521vw;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .521vw;
  position: relative;

  &::before {
    content: "";
    width: 1.042vw;
    height: 1.042vw;
    border-radius: 50%;
    border: 1px solid var(--black);
    position: absolute;
    top: 50%;
    left: 1.042vw;
    transform: translateY(-50%);
    transition: var(--normal);
  }
}

.categories-list__input:checked {
  + .categories-list__name {
    padding: .825vw 2.604vw .625vw 1.042vw;
    background: var(--black);
    color: var(--white);

    &::before {
      left: auto;
      right: 1.042vw;
      background: var(--green);
      border-color: var(--green);
    }
  }
}

.categories-list_industries, .categories-list_services {
  transition: var(--normal);
  position: static;

  &.hide {
    position: absolute;
    z-index: -5;
    visibility: hidden;
    opacity: 0;
    margin-top: 0;
  }
}

.cases {
  padding: 5.208vw 30px 0 135px;

  @media (min-width: 1921px) {
    padding-right: 1.563vw;
  }
}

.cases-list, .small-cases-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2.604vw 4.167vw;
}

.small-cases-list {
  margin-top: 2.604vw;
}

.cases-list__img-link, .small-cases-list__img-link {
  width: 100%;
  display: block;

  picture, img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .tooltip {
    width: 5.729vw;
    height: 5.729vw;
    font: 400 .867vw/1 var(--font);
    text-align: center;
  }
}

.cases-list__img-link {
  height: 25vw;
}

.small-cases-list__img-link {
  height: 14.063vw;
  grid-row: 1/3;
}

.cases-list__title, .small-cases-list__title {
  > a {
    font: 600 1.667vw/2.167vw var(--font);
    transition: var(--normal);

    &:hover {
      color: var(--green);
    }
  }
}

.cases-list__title {
  padding: 1.563vw 1.563vw 10px;
}

.small-cases-list__title {
  padding: 1.563vw 1.563vw 0 1.563vw;
}

.case-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.042vw;
  padding: 0 0 1.563vw 1.563vw;

  .case-tags__item, a {
    font: 400 .938vw/1.172vw var(--font);
  }

  a {
    transition: var(--normal);
    text-decoration: underline;

    &:hover {
      color: var(--green);
    }
  }
}

.cases-list__item, .small-cases-list__item {
  border-bottom: 1px solid #e7e7e7;
  &.hide {
    display: none;
  }
}

.small-cases-list__item {
  display: grid;
  grid-template-columns: 19.01vw 1fr;
  grid-template-rows: 1fr max-content;
  padding-bottom: 1.563vw;
}

.small-cases-list__item {
  &.hide ~ .small-cases-list__item_banner-text {
    grid-column: 1/span 2;
  }

  &.hide + .small-cases-list__item_banner-quote {
    display: none;
  }

  &.hide ~ .hide ~ .small-cases-list__item_banner-quote {
    display: flex;
  }
}

.small-cases-list__item_banner-text, .small-cases-list__item_banner-quote {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.083vw;
  height: 100%;
  padding: 2.708vw 4.167vw;

  p {
    text-align: center;
    font: 400 1.25vw/1.688vw var(--font);
  }

  svg {
    width: 3.125vw;
    height: 3.125vw;
  }
}

.small-cases-list__item_banner-quote {
  padding: 0 .26vw;
}

.small-cases-list__item_banner-link {
  padding-bottom: 0;
  height: 100%;
  display: block;
}

.banner-link {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;

  svg {
    width: 2.083vw;
  }
}

.banner-link__cover {
  width: 19.01vw;
  height: 14.063vw;
  display: flex;
  align-items: center;
  background: var(--green);
  padding: 1.563vw;
  grid-row: 1/3;
  margin: 0 0 auto;
}

.banner-link__cover-text {
  font: 700 2.083vw/2.292vw var(--font);
  letter-spacing: -.02em;

  mark {
    color: var(--white);
  }
}

.banner-link__title {
  padding: 1.563vw 1.25vw 1.563vw 1.563vw;
  font: 700 2.917vw/3.208vw var(--font);
  letter-spacing: -.02em;
  width: 15vw;
}

.banner-text__author {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.042vw;

  &::before {
    content: "";
    width: 2.813vw;
    height: 1px;
    background: var(--black);
  }

  img {
    width: 2.5vw;
  }
}

.banner-text__author-value {
  font: 400 1.25vw / 1.688vw var(--font);
}

.cases__link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 14.063vw;
  height: 14.063vw;
  border: 1px solid var(--green);
  border-radius: 50%;
  position: relative;
  margin: 2.292vw 9.531vw 0 auto;
  font: 700 2.083vw/1 var(--font);
  transition: var(--normal);

  &:hover {
    background: var(--green);
    color: var(--white);

    svg {
      transform: translate(15px, -50%);
    }
  }

  svg {
    position: absolute;
    top: 50%;
    left: calc(100% + 2.083vw);
    transform: translateY(-50%);
    width: 2.917vw;
    transition: var(--normal);
  }
}

@media (max-width: 1280px) {
  .our-work-preview {
    padding: 0 7.188vw;
  }

  .our-work-preview__title {
    font-size: 6.25vw;
  }

  .our-work-preview__subtitle {
    margin-top: 2.422vw;
    font: 400 2.188vw/2.625vw var(--font);
    padding-left: 15.469vw;
    width: 86.25vw;

    &::before {
      width: 5.469vw;
      top: 1.406vw;
      left: 8.438vw;
    }
  }

  .our-work-banner {
    padding: 5.208vw 7.188vw;
  }

  .filter {
    padding: 0 7.188vw;
  }

  .filter-categories {
    gap: 5.469vw;
  }

  .filter-categories__name {
    font: 700 1.875vw/2.531vw var(--font);
  }

  .categories-list {
    margin-top: 3.203vw;
    gap: 1.563vw;
  }

  .categories-list__name {
    padding: .703vw 1.563vw .703vw 3.75vw;
    border-radius: .781vw;
    gap: .781vw;
    font-size: 1.406vw;
  }

  .categories-list__input:checked {
    + .categories-list__name {
      padding: .703vw 3.75vw .703vw 1.563vw;
    }
  }

  .cases {
    padding: 6.25vw 8.594vw 0 10.156vw;
  }

  .cases-list__img-link {
    height: 25.625vw;
  }

  .cases-list, .small-cases-list {
    grid-gap: 3.906vw;
  }

  .cases-list__title {
    padding: 1.25vw 12px 10px 1.875vw;

    > a {
      font: 600 2.188vw/2.844vw var(--font);
    }
  }

  .case-tags {
    gap: 1.563vw;
    padding: 0 0 .781vw 1.875vw;

    .case-tags__item, a {
      font: 400 1.406vw/1.758vw var(--font);
    }
  }
}

.small-cases-list__item {
  &.hide ~ .small-cases-list__item_banner-text {
    grid-column: 1 / span 1;
  }
}

@media (max-width: 1000px) {
  .btn {
    padding: 2.344vw 2.344vw 2.344vw 4.167vw;
    font-size: 2.344vw;
    gap: 1.563vw;

    > svg {
      width: 2.344vw;
      height: 2.344vw;
    }
  }

  .our-work-preview {
    padding: 2.083vw 0 3.906vw 10.156vw;
  }

  .our-work-preview__title {
    font-size: 8.073vw;
  }

  .our-work-preview__subtitle {
    margin-top: 5.339vw;
    font: 400 2.865vw/3.438vw var(--font);
    padding-left: 13.802vw;
    width: 80.99vw;

    &::before {
      width: 9.115vw;
      top: 1.844vw;
      left: 2.083vw;
    }
  }

  .our-work-banner {
    padding: 0 10.156vw 9.896vw 10.156vw;
  }

  .our-work-banner__bg {
    height: 50.781vw;
    padding: 9.505vw 25vw 9.505vw 6.25vw;
  }

  .our-work-banner__title {
    font-size: 5.208vw;
  }

  .our-work-banner__text {
    font-size: 2.604vw;
    margin-top: 2.083vw;
  }

  .our-work-banner__btn {
    margin-top: 4.167vw;
  }

  .filter {
    padding: 0 10.156vw;
  }

  .filter-categories {
    gap: 7.813vw;
  }

  .filter-categories__name {
    font: 700 3.125vw/4.219vw var(--font);
  }

  .categories-list__name {
    padding: 1.172vw 2.604vw 1.172vw 5.99vw;
    border-radius: 1.302vw;
    gap: 1.302vw;
    font-size: 2.344vw;

    &::before {
      width: 2.083vw;
      height: 2.083vw;
      left: 2.604vw;
      transform: translateY(calc(-50% - 1px));
    }
  }

  .categories-list__input:checked {
    + .categories-list__name {
      padding: 1.172vw 5.99vw 1.172vw 2.604vw;

      &::before {
        right: 2.604vw;
      }
    }
  }

  .cases-list, .small-cases-list {
    grid-gap: 6.51vw;
    grid-template-columns: 1fr;
  }

  .cases-list__img-link {
    height: 44.271vw;
  }

  .cases-list__title {
    padding: 16px 12px 10px 3.125vw;
  }

  .case-tags {
    gap: 20px;
    padding: 0 0 3.255vw 3.125vw;

    .case-tags__item, a {
      font: 400 2.344vw/2.93vw var(--font);
    }
  }

  .small-cases-list__item {
    grid-template-columns: 35.938vw 1fr;
    padding-bottom: 3.906vw;
  }

  .small-cases-list__img-link {
    height: 26.563vw
  }

  .cases-list__title, .small-cases-list__title {
    > a {
      font: 600 3.125vw/4.063vw var(--font);
    }
  }

  .small-cases-list__title {
    padding: 16px 3.125vw 0;
  }

  .cases__link {
    display: none;
  }

  .small-cases-list__item_banner-text, .small-cases-list__item_banner-quote {
    padding: 0;
    height: auto;
  }

  .small-cases-list__item_banner-text, .small-cases-list__item_banner-quote {
    svg {
      width: 7.813vw;
      height: 7.813vw;
    }

    p {
      font: 400 3.125vw/4.219vw var(--font);
    }
  }

  .cases-list__title, .small-cases-list__title {
    br {
      display: none;
    }
  }

  .banner-text__author {
    display: none;
  }

  .banner-link__cover {
    width: 35.938vw;
    height: 26.563vw;
    padding:3.906vw;
  }

  .banner-link__cover-text {
    font: 700 4.167vw/4.583vw var(--font);
  }

  .banner-link__title {
    padding: 0 0 0 3.125vw;
    font: 700 5.208vw/5.729vw var(--font);
    width: 21.354vw;
  }

  .banner-link {
    svg {
      width: 5.208vw;
      margin-left: 2.083vw;
    }
  }
}

@media (max-width: 600px) {
  .btn {
    font-size: 4.8vw;
    width: 100%;
    padding: 4.8vw 8.4vw 4.8vw 10.533vw;
    gap: 3.2vw;

    > svg {
      width: 4.8vw;
      height: 4.8vw;
    }
  }

  .breadcrumbs, .breadcrumbs__list {
    transform: none;
  }

  .our-work-preview {
    padding: 0 12px 10.667vw 15px;
  }

  .our-work-preview__title {
    font-size: 9.6vw;
    padding-left: 15px;
  }

  .our-work-preview__subtitle {
    margin-top: 8.533vw;
    font: 400 5.333vw/6.4vw var(--font);
    padding-left: 20.267vw;
    width: 100%;

    &::before {
      width: 8vw;
      top: 2.8vw;
      left: 9.6vw;
    }
  }

  .our-work-banner {
    padding: 0 12px 10.667vw 15px;
  }

  .our-work-banner__bg {
    height: auto;
    padding: 9.067vw 9.6vw 60.8vw 6.4vw;
  }

  .our-work-banner__title {
    font-size: 7.467vw;
  }

  .our-work-banner__text {
    font-size: 4.8vw;
    margin-top: 2.133vw;
  }

  .our-work-banner__btn {
    margin-top: 6.4vw;
  }

  .our-work-banner__img {
    height: 54.667vw;
  }

  .filter {
    padding: 0 12px 0 15px;
  }

  .filter-categories__name {
    font: 700 5.333vw/7.2vw var(--font);
  }

  .filter-categories {
    justify-content: center;
    gap: 10.667vw;
  }

  .categories-list {
    margin-top: 8vw;
    gap: 6.667vw;
  }

  .categories-list__name {
    padding: 2.4vw 5.333vw 2.4vw 12.267vw;
    border-radius: 2.667vw;
    gap: 2.667vw;
    font-size: 4.8vw;

    &::before {
      width: 4.267vw;
      height: 4.267vw;
      left: 5.333vw;
    }
  }

  .categories-list__input:checked {
    + .categories-list__name {
      padding: 2.4vw 12.267vw 2.4vw 5.333vw;

      &::before {
        right: 5.333vw;
      }
    }
  }

  .cases {
    padding: 10.667vw 15px 0;
  }

  .cases-list__img-link, .small-cases-list__img-link {
    height: auto;
    grid-row: auto;
  }

  .cases-list__title {
    padding: 16px 5.333vw 15px;
  }

  .cases-list__title, .small-cases-list__title {
    > a {
      font: 600 5.333vw/6.933vw var(--font);
    }
  }

  .case-tags {
    padding: 0 0 9.6vw 5.333vw;

    .case-tags__item, a {
      font: 400 4.267vw/5.333vw var(--font);
    }
  }

  .cases-list, .small-cases-list {
    grid-gap: 25px;
  }

  .small-cases-list__item {
    grid-template-columns: 1fr;
    padding-bottom: 0;
  }

  .small-cases-list__title {
    padding: 16px 5.333vw 0;
  }

  .small-cases-list__title {
    margin-bottom: 15px;
  }

  .small-cases-list__item_banner-text, .small-cases-list__item_banner-quote {
    padding: 26.133vw 0 24vw;
    gap: 10.667vw;

    svg {
      width: 16vw;
      height: 16vw;
    }

    p {
      font: 400 5.333vw/7.2vw var(--font);
    }
  }

  .banner-link {
    flex-wrap: wrap;

    svg {
      margin-left: 4.267vw;
      width: 10.667vw;
    }
  }

  .banner-link__cover {
    width: 100%;
    height: 68vw;
    padding: 8vw;
    margin-bottom: 6.4vw;
  }

  .banner-link__cover-text {
    font: 700 8.533vw/10.667vw var(--font);
  }

  .banner-link__title {
    font: 700 9.6vw/1 var(--font);
    width: auto;
    padding: 0 0 0 6.4vw;
  }

  .small-cases-list__item_banner-link {
    padding-bottom: 8vw;
  }

  .cases__link {
    display: flex;
    width: 30.933vw;
    height: 30.933vw;
    margin: 14.933vw auto 24vw 20.933vw;
    font-size: 4.8vw;

    svg {
      left: calc(100% + 8.533vw);
      width: 10.667vw;
    }
  }

  .form-feedback {
    box-shadow: none;
  }
}