/**
 * Google — expansion path steps (Google page only).
 * Desktop: badge left, heading + rows right (Figma 1920).
 * Mobile: stacked badge, 2-line heading, title/index row.
 */

.home-v2 .v2-section--google-expansion-path,
.v2-section--google-expansion-path {
  padding-block: calc(100vw * 48 / 390);
}

@media (min-width: 1024px) {
  .is-lang-uk .v2-google-expansion-path__heading {
    max-width: 100%;
    white-space: normal;
  }

  .is-lang-uk .v2-google-expansion-path__heading-line {
    display: block;
    white-space: normal;
  }

  .is-lang-uk .v2-google-expansion-path__heading-line + .v2-google-expansion-path__heading-line::before {
    content: none;
  }
}

.v2-google-expansion-path__layout {
  display: flex;
  flex-direction: column;
  gap: calc(100vw * 20 / 390);
}

.v2-google-expansion-path__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: calc(100vw * 40 / 390);
  height: calc(100vw * 40 / 390);
  border-radius: 50%;
  background: #64db69;
  font-size: calc(100vw * 16 / 390);
  font-weight: 500;
  line-height: 1;
  color: #f5f5f5;
}

.v2-google-expansion-path__main {
  min-width: 0;
}

.v2-google-expansion-path__head {
  margin-bottom: calc(100vw * 32 / 390);
}

.v2-google-expansion-path__heading {
  margin: 0;
  max-width: 100%;
  font-size: calc(100vw * 36 / 390);
  font-weight: 500;
  line-height: 1;
  color: #202020;
}

.v2-google-expansion-path__heading-line {
  display: block;
}

.v2-google-expansion-path__heading-accent {
  color: #64db69;
}

.v2-google-expansion-path__list {
  display: flex;
  flex-direction: column;
  border-top: 1px dashed rgba(32, 32, 32, 0.08);
  border-bottom: 1px dashed rgba(32, 32, 32, 0.08);
}

.v2-google-expansion-path__row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'title index'
    'text text';
  gap: calc(100vw * 12 / 390) calc(100vw * 16 / 390);
  padding-block: calc(100vw * 24 / 390);
  border-bottom: 1px dashed rgba(32, 32, 32, 0.08);
}

.v2-google-expansion-path__row:last-child {
  border-bottom: none;
}

.v2-google-expansion-path__index {
  grid-area: index;
  margin: 0;
  align-self: start;
  font-size: calc(100vw * 12 / 390);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.v2-google-expansion-path__index-current {
  color: rgba(32, 32, 32, 0.6);
}

.v2-google-expansion-path__index-muted {
  color: rgba(32, 32, 32, 0.2);
}

.v2-google-expansion-path__title {
  grid-area: title;
  margin: 0;
  align-self: start;
  font-size: calc(100vw * 22 / 390);
  font-weight: 500;
  line-height: 1.25;
  color: #202020;
}

.v2-google-expansion-path__text {
  grid-area: text;
  margin: 0;
  font-size: calc(100vw * 14 / 390);
  font-weight: 400;
  line-height: 1.3;
  color: rgba(32, 32, 32, 0.6);
}

@media (min-width: 1024px) {
  .home-v2 .v2-section--google-expansion-path,
  .v2-section--google-expansion-path {
    padding-block: clamp(64px, calc(100vw * 100 / 1920), 100px);
  }

  .v2-google-expansion-path__layout {
    display: grid;
    grid-template-columns: clamp(60px, calc(100vw * 60 / 1920), 60px) minmax(0, 1fr);
    column-gap: clamp(24px, calc(100vw * 395 / 1920), 395px);
    align-items: start;
  }

  .v2-google-expansion-path__badge {
    width: clamp(60px, calc(100vw * 60 / 1920), 60px);
    height: clamp(60px, calc(100vw * 60 / 1920), 60px);
    font-size: clamp(24px, calc(100vw * 24 / 1920), 24px);
    margin-top: clamp(4px, calc(100vw * 5 / 1920), 5px);
  }

  .v2-google-expansion-path__head {
    margin-bottom: clamp(48px, calc(100vw * 60 / 1920), 60px);
  }

  .v2-google-expansion-path__heading {
    max-width: min(calc(100vw * 829 / 1920), 829px);
    font-size: clamp(48px, calc(100vw * 70 / 1920), 70px);
    line-height: 1;
    white-space: nowrap;
  }

  .v2-google-expansion-path__heading-line {
    display: inline;
  }

  .v2-google-expansion-path__heading-line + .v2-google-expansion-path__heading-line::before {
    content: ' ';
  }

  .v2-google-expansion-path__row {
    grid-template-columns:
      clamp(45px, calc(100vw * 45 / 1920), 45px)
      minmax(180px, calc(100vw * 290 / 1920))
      minmax(0, 1fr);
    grid-template-areas: 'index title text';
    align-items: center;
    column-gap: clamp(24px, calc(100vw * 40 / 1920), 40px);
    padding-block: clamp(28px, calc(100vw * 52 / 1920), 52px);
  }

  .v2-google-expansion-path__index {
    font-size: clamp(16px, calc(100vw * 16 / 1920), 16px);
    line-height: 1;
  }

  .v2-google-expansion-path__title {
    font-size: clamp(28px, calc(100vw * 32 / 1920), 32px);
    line-height: 1.25;
    white-space: nowrap;
  }

  .v2-google-expansion-path__text {
    justify-self: end;
    width: 100%;
    max-width: min(calc(100vw * 531 / 1920), 531px);
    font-size: clamp(16px, calc(100vw * 18 / 1920), 18px);
    line-height: 1.22;
    text-align: left;
  }
}