/*
 * Service page: hero and article. Shared blocks (steps, banner, reviews, buttons, rating badge)
 * come from home.css. Figma: desktop 744:6195, mobile 777:1679.
 * Inside the hero card everything scales with the card: from the 1280px card above 900px,
 * from the 377px card below it (the card is the container).
 */

/* ---------- hero ---------- */

.shero {
  container-type: inline-size;
  background: linear-gradient(#f5f3ec, #fff 67%);
}

.shero__frame {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(8px, 5.56cqi, 80px);
}

.shero__card {
  position: relative;
  display: flex;
  align-items: center;
  aspect-ratio: 1280 / 534;
  min-height: min-content;
  overflow: hidden;
  border-radius: calc(32 / 1280 * 100cqi);
  background: #000;
  container-type: inline-size;
}

/* Photo on the right, faded towards the text by the Figma alpha mask. */
.shero__photo {
  position: absolute;
  top: 0;
  right: 0;
  width: 60.7%;
  height: 104.9%;
  -webkit-mask: url("/assets/img/shero-mask.svg") no-repeat 0 0 / 100% 100%;
  mask: url("/assets/img/shero-mask.svg") no-repeat 0 0 / 100% 100%;
}

.shero__photo img {
  position: absolute;
  top: 0;
  right: 0;
  width: 107.85%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}

.shero__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(24 / 1280 * 100cqi);
  width: calc(915 / 1280 * 100%);
  padding: calc(80 / 1280 * 100cqi) 0 calc(80 / 1280 * 100cqi) calc(70 / 1280 * 100cqi);
}

.shero__title {
  margin: 0;
  color: var(--white);
  font-size: clamp(30px, calc(60 / 1280 * 100cqi), 60px);
  font-weight: 800;
  line-height: 1.283;
}

.shero__lead {
  max-width: calc(690 / 1280 * 100cqi);
  margin: 0;
  color: var(--white);
  font-size: clamp(14px, calc(16 / 1280 * 100cqi), 16px);
  line-height: 1.375;
  letter-spacing: -0.32px;
}

.shero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: calc(24 / 1280 * 100cqi);
}

/* Rating badge in a white cut-out of the card corner, with inverse corners above and left. */
.shero__tab {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: calc(164 / 1280 * 100%);
  padding: calc(4 / 1280 * 100cqi) 0 calc(1.18 / 1280 * 100cqi) calc(4 / 1280 * 100cqi);
  border-radius: calc(36 / 1280 * 100cqi) 0 calc(24 / 1280 * 100cqi) 0;
  background: var(--white);
}

.shero__corner {
  position: absolute;
  transform: rotate(90deg);
}

.shero__corner--above {
  right: 0;
  bottom: 100%;
  width: calc(32 / 1280 * 100cqi);
  height: auto;
}

.shero__corner--left {
  right: 100%;
  bottom: 0;
  width: calc(37 / 1280 * 100cqi);
  height: auto;
}

.shero__score {
  position: relative;
  right: auto;
  bottom: auto;
  width: 100%;
}

@media (max-width: 900px) {
  .shero {
    background: linear-gradient(#f5f3ec, #fff 71%);
  }

  .shero__frame {
    padding: 0 8px;
  }

  /* The 377 / 466 proportion is a minimum height, not an aspect-ratio: the card must grow when
     the crumbs or a long H1 take an extra line. Safari on iOS does not let an aspect-ratio box
     grow (even with `overflow: clip`), so the second button fell out of the card there. */
  .shero__card {
    display: block;
    aspect-ratio: auto;
    min-height: calc((100cqi - 16px) * 466 / 377);
    border-radius: calc(24 / 377 * 100cqi);
  }

  .shero__photo {
    left: 0;
    right: auto;
    width: 126.6%;
    height: 73.8%;
    -webkit-mask-image: url("/assets/img/shero-mask-m.svg");
    mask-image: url("/assets/img/shero-mask-m.svg");
  }

  .shero__photo img {
    left: -7.85%;
    right: auto;
    width: 107.9%;
  }

  .shero__body {
    gap: calc(16 / 377 * 100cqi);
    width: calc(275 / 377 * 100cqi);
    padding: calc(40 / 377 * 100cqi) 0 calc(20 / 377 * 100cqi) calc(20 / 377 * 100cqi);
  }

  .crumbs {
    gap: calc(12 / 377 * 100cqi);
    font-size: calc(14 / 377 * 100cqi);
    line-height: calc(20 / 377 * 100cqi);
  }

  .crumbs img {
    width: calc(12 / 377 * 100cqi);
    height: auto;
  }

  .shero__title {
    font-size: calc(30 / 377 * 100cqi);
    line-height: calc(38 / 377 * 100cqi);
  }

  .shero__lead {
    max-width: none;
    font-size: calc(14 / 377 * 100cqi);
    line-height: calc(20 / 377 * 100cqi);
  }

  .shero__actions {
    flex-direction: column;
    gap: calc(16 / 377 * 100cqi);
    width: max-content;
    margin-top: calc(16 / 377 * 100cqi);
  }

  .shero__actions .cta__btn {
    gap: calc(16 / 377 * 100cqi);
    height: calc(56 / 377 * 100cqi);
    padding: 0 calc(2 / 377 * 100cqi) 0 calc(24 / 377 * 100cqi);
    font-size: calc(16 / 377 * 100cqi);
    line-height: calc(26 / 377 * 100cqi);
  }

  .shero__actions .cta__btn--ghost {
    justify-content: space-between;
  }

  .shero__actions .cta__btn-icon {
    width: calc(54 / 377 * 100cqi);
    height: calc(54 / 377 * 100cqi);
  }

  .shero__actions .cta__btn-icon img {
    width: calc(24 / 377 * 100cqi);
    height: calc(24 / 377 * 100cqi);
  }

  .shero__tab {
    width: calc(121 / 377 * 100%);
    padding: calc(2.95 / 377 * 100cqi) 0 calc(0.87 / 377 * 100cqi) calc(2.95 / 377 * 100cqi);
    border-radius: calc(28 / 377 * 100cqi) 0 calc(24 / 377 * 100cqi) 0;
  }

  .shero__corner--above {
    width: calc(23.61 / 377 * 100cqi);
  }

  .shero__corner--left {
    width: calc(27.3 / 377 * 100cqi);
  }

  .shero__score {
    width: 100%;
  }
}

/* ---------- article ---------- */

/* Text sizes are the same in both frames; only the column and the vertical padding scale:
   the column is 770px at 1440 and the 361px track at 393, growing smoothly in between. */
.article {
  container-type: inline-size;
  background: var(--white);
}

.article__body {
  width: min(770px, 100cqi - 32px);
  margin: 0 auto;
  padding: clamp(40px, 5.56cqi, 80px) 0;
  color: #5c5c5a;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.32px;
}

.article__body > * {
  margin: 0;
}

.article__body > * + * {
  margin-top: 20px;
}

.article__body > h2 {
  color: var(--ink);
  font-size: 20px;
  font-weight: 800;
  line-height: 28px;
  letter-spacing: 0;
}

.article__body > * + h2 {
  margin-top: 40px;
}

.article__body ul {
  padding: 0;
  list-style: none;
}

.article__body li::before {
  content: "• ";
}

.article__body a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-underline-offset: 3px;
}

.article__body a:hover {
  color: var(--orange);
}