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

:root {
  --subtitle: 400 1.25vw/1.35 var(--font);
  --h1: 700 5vw/1.06 var(--font);
  --h2: 700 3.75vw/1.08 var(--font);
  --h3: 700 2.5vw/1.08 var(--font);
  --h5: 700 1.667vw/1.2 var(--font);
  --paragraph-lg: 400 1.042vw/1.4 var(--font);
  --paragraph-md: 400 .938vw/1.35 var(--font);
  --card-radius: 1.667vw;
  --section-radius: 3.333vw;
}

@media (max-width: 1280px) {
  :root {
    --subtitle: 400 2.344vw/1.35 var(--font);
    --h1: 700 5.208vw/1.06 var(--font);
    --h2: 700 4.167vw/1.08 var(--font);
    --h3: 700 3.646vw/1.08 var(--font);
    --h5: 700 2.604vw/1.2 var(--font);
    --paragraph-lg: 400 2.083vw/1.4 var(--font);
    --paragraph-md: 400 1.823vw/1.35 var(--font);
    --card-radius: 2.344vw;
    --section-radius: 3.125vw;
  }
}

@media (max-width: 767px) {
  :root {
    --subtitle: 400 4.8vw/1.35 var(--font);
    --h1: 700 10.667vw/1.06 var(--font);
    --h2: 700 8.533vw/1.08 var(--font);
    --h3: 700 7.4673vw/1.08 var(--font);
    --h5: 700 5.333vw/1.2 var(--font);
    --paragraph-lg: 400 4.267vw/1.4 var(--font);
    --paragraph-md: 400 3.733vw/1.35 var(--font);
    --card-radius: 4.8vw;
    --section-radius: 6.4vw;
  }
}

/* common styles and components */
.heading-h1 {
  font: var(--h1);
}

.heading-h2 {
  font: var(--h2);
}

.heading-h3 {
  font: var(--h3);
}

.heading-h5 {
  font: var(--h5);
}

.paragraph-lg {
  font: var(--paragraph-lg);
}

.paragraph-md {
  font: var(--paragraph-md);
}

.paragraph-lg + .paragraph-lg, .paragraph-md + .paragraph-md {
  margin-top: .417vw;
}

@media (max-width: 1280px) {
  .paragraph-lg + .paragraph-lg, .paragraph-md + .paragraph-md {
    margin-top: 1.042vw;
  }
}

@media (max-width: 767px) {
  .paragraph-lg + .paragraph-lg, .paragraph-md + .paragraph-md {
    margin-top: 2.133vw;
  }
}

.section {
  padding: 6.25vw 1.25vw 6.25vw 4.74vw;
}

@media (max-width: 1280px) {
  .section {
    padding: 7.552vw 3.125vw;
  }
}

@media (max-width: 767px) {
  .section {
    padding: 12.8vw 16px;
  }
}

.section--grey {
  background: #F6F6F6;
  border-radius: var(--section-radius);
}

.swiper-btn {
  position: relative;
  border-radius: 50%;
  border: 1px solid var(--black);
  display: inline-flex;
  justify-content: center;
  align-items: center;

  svg {
    height: auto;
  }

  &::after {
    content: "";
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    border-radius: 50%;
    filter: blur(4px);
    z-index: -1;
    transition: var(--normal);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  &:hover:not(&:disabled)::after {
    background-color: var(--green);
  }

  &.swiper-button-disabled {
    cursor: default;
    opacity: .5;
  }
}

.expand-card {
  padding: 2.448vw;
  border: 1px solid var(--black);
  border-radius: var(--card-radius);
  display: flex;
  cursor: pointer;
}

.expand-card__toggle-btn {
  width: 2.5vw;
  height: 2.5vw;
  border-radius: 50%;
  border: 1px solid var(--black);
  display: flex;
  justify-content: center;
  align-items: center;

  svg {
    width: 1.042vw;
    height: auto;
    transform: rotate(0);
    transition: transform var(--normal);
  }
}

.expand-card__content {
  margin-left: 1.875vw;
  display: flex;
  flex-direction: column;
  gap: 1.875vw;
  transition: height var(--normal);
}

.expand-card__details {
  height: 0;
  margin-top: -1.875vw;
  overflow: hidden;
  transition: height var(--normal), margin var(--normal);
}

.expand-card.expanded {
  .expand-card__details {
    height: auto;
    margin-top: 0;
  }

  .expand-card__toggle-btn svg {
    transform: rotate(180deg);
  }
}

@media (max-width: 1280px) {
  .expand-card {
    padding: 4.688vw;
    flex-direction: column;
    position: relative;
  }

  .expand-card__toggle-btn {
    width: 6.25vw;
    height: 6.25vw;
    position: absolute;
    top: 4.688vw;
    right: 4.688vw;

    svg {
      width: 2.604vw;
    }
  }

  .expand-card__content {
    margin-left: 0;
    gap: 0;
  }

  .expand-card__details {
    margin-top: 0;
  }

  .expand-card.expanded {
    .expand-card__details {
      margin-top: 2.604vw;
    }
  }
}

@media (max-width: 767px) {
  .expand-card {
    padding: 6.4vw;
  }

  .expand-card__toggle-btn {
    width: 12.8vw;
    height: 12.8vw;
    top: 12vw;
    right: 6.4vw;

    svg {
      width: 5.333vw;
    }
  }

  .expand-card.expanded .expand-card__details {
    margin-top: 5.333vw;
  }
}

.tag-chip {
  background: #EEEEEE;
  padding: .417vw 1.042vw .469vw;
  border-radius: .521vw;
  font: var(--paragraph-md);
}

@media (max-width: 1280px) {
  .tag-chip{
    padding: 1.042vw 2.604vw 1.172vw;
    border-radius: 1.302vw;
  }
}

@media (max-width: 767px) {
  .tag-chip{
    padding: 2.133vw 5.333vw 2.4vw;
    border-radius: 2.667vw;
  }
}

.list-card {
  background: var(--white);
  border-radius: var(--card-radius);
  padding: 2.5vw;
  display: flex;
  flex-direction: column;
}

.list-card--img {
  padding: 0;
}

.list-card__number {
  font: var(--h3);
}

.list-card__title {
  margin-top: auto;
}

.list-card__description {
  margin-top: .833vw;
}

@media (max-width: 1280px) {
  .list-card {
    padding: 4.688vw;
    width: 42.969vw;
  }

  .list-card--img {
    padding: 0;
    height: 40.625vw;

    & + .list-card--img {
      display: none;
    }
  }

  .list-card__title {
    margin-top: 8.333vw;
  }

  .list-card__description {
    margin-top: 2.083vw;
  }
}

@media (max-width: 767px) {
  .list-card {
    padding: 6.4vw;
    width: 82.667vw;
  }

  .list-card--img {
    padding: 0;
    height: 78.4vw;
  }

  .list-card__title {
    margin-top: 17.067vw;
  }

  .list-card__description {
    margin-top: 4.267vw;
  }
}

.adventages-block__item {
  display: flex;
  gap: 1.25vw;

  & + .adventages-block__item {
    margin-top: 2.5vw;
  }

  &:nth-child(odd) {
    min-height: 4.323vw;
  }
}

.adventages-block__value {
  flex-shrink: 0;
}

.adventages-block__text {
  font: var(--subtitle);
  font-weight: 400;
  margin-top: auto;
}

@media (max-width: 1280px) {
  .adventages-block__item {
    flex-direction: column;
    gap: 1.042vw;

    & + .adventages-block__item {
      margin-top: 2.083vw;
    }

    &:nth-child(odd) {
      min-height: unset;
    }
  }
}

@media (max-width: 767px) {
  .adventages-block__item {
    flex-direction: column;
    gap: 1.042vw;

    & + .adventages-block__item {
      margin-top: 2.083vw;
    }

    &:nth-child(odd) {
      min-height: unset;
    }
  }
}

/* breadcrumbs */
.breadcrumbs {
  padding: 1.875vw 1.25vw 1.875vw 4.74vw;
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .breadcrumbs {
    padding: 19.5px 15px;
  }
}

/* preview section */
.preview {
  display: block;
  padding: 1.875vw 1.25vw 0 4.74vw;
}

.preview__subtitle {
  font: var(--subtitle);
  margin-top: 1.25vw;
}

.preview__img {
  margin-top: 3.333vw;
}

@media (max-width: 1280px) {
  .preview {
    padding: 4.688vw 3.125vw 0;
  }

  .preview__subtitle {
    margin-top: 2.083vw;
  }

  .preview__img {
    margin-top: 6.25vw;
  }
}

@media (max-width: 767px) {
  .preview {
    padding: 6.4vw 16px 0;
  }

  .preview__subtitle {
    margin-top: 4.267vw;
  }

  .preview__img {
    margin-top: 9.6vw;
  }
}

/* Open opportunities section */
.opportunities {
  padding-bottom: 7.031vw;
}

.opportunities__list {
  display: flex;
  flex-direction: column;
  gap: 3.333vw;
  margin-top: 3.333vw;
}

.opportunities__item {
  width: 83.594vw;
  margin-left: auto;
}

.opportunities__item-content {
  width: 42.188vw;
}

.opportunities__item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .833vw;
}

.opportunities__skills-list {
  margin-top: 1.25vw;
}

.opportunities__skills-item {
  padding-left: 2.396vw;
  position: relative;

  &::before {
    content: "";
    display: block;
    width: 1.563vw;
    height: 1px;
    background: var(--black);
    position: absolute;
    top: .625vw;
    left: 0;
  }
}

.opportunities__button {
  margin: auto 0 0 auto;
}

@media (max-width: 1280px) {
  .opportunities {
    padding-bottom: 7.552vw;
  }

  .opportunities__list {
    gap: 6.25vw;
    margin-top: 6.25vw;
  }

  .opportunities__item {
    width: 86.198vw;
  }

  .opportunities__item-content {
    width: 100%;
  }

  .opportunities__item-tags {
    gap: 2.083vw;
    margin-top: 3.776vw;
  }

  .opportunities__item-description, .expanded .opportunities__skills {
    margin-top: 2.604vw;
  }

  .opportunities__skills-list {
    margin-top: 2.083vw;
  }

  .opportunities__skills-item {
    padding-left: 5.99vw;

    &::before {
      width: 3.906vw;
      top: 1.563vw;
    }
  }

  .opportunities__button {
    margin: 4.688vw auto 0 0;
  }
}

@media (max-width: 767px) {
  .opportunities {
    padding-bottom: 12.8vw;
  }

  .opportunities__list {
    gap: 9.6vw;
    margin-top: 9.6vw;
  }

  .opportunities__item {
    width: 100%;
  }

  .opportunities__item-title {
    max-width: 63.2vw;
  }

  .opportunities__item-tags {
    gap: 4.267vw;
    margin-top: 5.333vw;
  }

  .opportunities__item-description, .expanded .opportunities__skills {
    margin-top: 5.333vw;
  }

  .opportunities__skills-list {
    margin-top: 4.267vw;
  }

  .opportunities__skills-item {
    padding-left: 12.267vw;

    &::before {
      width: 8vw;
      top: 3.2vw;
    }
  }

  .opportunities__button {
    margin: 6.4vw auto 0;
  }
}

/* What we offer section */
.what-we-offer {
  padding-bottom: 6.25vw;
}

.what-we-offer__list {
  display: grid;
  grid-template-columns: repeat(4, 22.552vw);
  grid-template-rows: repeat(4, 21.354vw);
  gap: 1.25vw 1.25vw;
  margin-top: 3.333vw;
}

.what-we-offer__item:first-child {
  grid-column: 1 / span 2;
}

.what-we-offer__item:last-child {
  grid-column: 3 / span 2;
}

.what-we-offer__swiper-buttons {
  display: none;
}

@media (max-width: 1280px) {
  .what-we-offer {
    padding-bottom: 7.552vw;
    overflow: hidden;
  }

  .what-we-offer__swiper {
    overflow: visible;
  }

  .what-we-offer__list {
    display: flex;
    gap: unset;
    margin-top: 4.688vw;
  }

  .what-we-offer__img, img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--card-radius);
  }

  .what-we-offer__swiper-btn {
    width: 6.25vw;
    height: 6.25vw;

    svg {
      width: 2.604vw;
    }
  }

  .what-we-offer__swiper-buttons {
    display: flex;
    gap: 3.125vw;
    margin-top: 4.688vw;
  }
}

@media (max-width: 767px) {
  .what-we-offer {
    padding-bottom: 15.467vw;
    overflow: hidden;
  }

  .what-we-offer__list {
    margin-top: 9.6vw;
  }

  .what-we-offer__swiper-btn {
    width: 12.8vw;
    height: 12.8vw;

    svg {
      width: 5.333vw;
    }
  }

  .what-we-offer__swiper-buttons {
    gap: 6.4vw;
    justify-content: center;
    margin-top: 9.6vw;
  }
}

/* About rubyroid family section */
.about__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 3.333vw;
}

.about__adventages {
  width: 33.542vw;
}

.about__img {
  height: auto;
}

.about__img, .about__text {
  width: 45.26vw;
}

.about__text {
  font: var(--subtitle);
  font-weight: 400;
}

@media (max-width: 1280px) {
  .about__content {
    margin-top: 4.688vw;
  }

  .about__adventages {
    width: 39.063vw;
  }

  .about__img {
    width: 46.875vw;
  }

  .about__text  {
    width: 39.323vw;
  }
}

@media (max-width: 767px) {
  .about__content {
    flex-direction: column;
    gap: 6.4vw;
    margin-top: 9.6vw;
  }

  .about__content:nth-of-type(2) {
    flex-direction: column-reverse;
  }

  .about__adventages, .about__content.about__content .about__img, .about__text {
    width: 100%;
  }
}

.parties {
  overflow: hidden;
}

.parties-slider {
  touch-action: auto;
  overflow: visible;
  margin-top: 3.333vw;
}

.parties-slider__buttons {
  display: flex;
  justify-content: flex-end;
  gap: 1.25vw;
}

.parties-slider__btn {
  width: 3.333vw;
  height: 3.333vw;

  svg {
    width: 1.563vw;
  }
}

.parties-slider__wrapper {
  display: flex;
  height: 26.771vw;
  margin-top: 1.875vw;

  img {
    height: 100%;
    width: auto;
  }
}

.parties-slider__slide {
  width: auto;;
}

.parties__btn {
  margin-top: 3.333vw;

  svg {
    transform: none;
  }
}

@media (max-width: 1280px) {
  .parties-slider {
    margin-top: 4.688vw;
  }

  .parties-slider__buttons {
    display: none;
  }

  .parties-slider__wrapper {
    height: 41.667vw;
    margin-top: 0;
  }

  .parties__btn {
    margin-top: 4.688vw;
  }
}

@media (max-width: 767px) {
  .parties-slider, .parties__btn {
    margin-top: 9.6vw;
  }

  .parties-slider__wrapper {
    height: 85.333vw;
  }
}

.contact-banner {
  width: 97.5vw;
  height: 29.271vw;
  margin: 0 auto 3.333vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("../assets/img/careers/grid-bg.webp") no-repeat center/cover;
  background-color: var(--black);
  border-radius: var(--section-radius);
}

.contact-banner__text {
  font: var(--h5);
  color: var(--white);
  text-align: center;
  max-width: 41.771vw;
}

.contact-banner__text--mob {
    display: none;
  }

.contact-banner__link {
  margin-top: .833vw;
  font: var(--h2);
  color: var(--green);

  &::before {
    height: 2px;
    background-color: var(--green);
  }
}

.contact-banner__btn {
  display: flex;
  border-color: var(--white);
  color: var(--white);
  margin-top: 3.333vw;

  svg {
    stroke: var(--white);
  }

  &:hover {
    color: var(--black);

    svg {
      stroke: var(--black);
    }
  }
}

@media (max-width: 1280px) {
  .contact-banner {
    width: 93.75vw;
    height: 39.063vw;
    margin: 0 auto 3.125vw;
    background-image: url("../assets/img/careers/grid-bg-tablet.webp");
  }

  .contact-banner__text {
    max-width: 47.396vw;
  }

  .contact-banner__text--desk {
    display: none;
  }

  .contact-banner__text--mob {
    display: block;
  }

  .contact-banner__link {
    margin-top: 2.083vw;
  }

  .contact-banner__btn {
    margin-top: 4.688vw;
  }
}

@media (max-width: 767px) {
  .contact-banner {
    width: calc(100% - 32px);
    height: 95.2vw;
    margin: 0 auto 6.4vw;
    background-image: url("../assets/img/careers/grid-bg-mobile.webp");
  }

  .contact-banner__text {
    max-width: 82.933vw;
  }

  .contact-banner__link {
    margin-top: 4.267vw;
  }

  .contact-banner__btn {
    width: 58.4vw;
    margin-top: 6.4vw;
  }
}