@import url("sochi-overview.css");

.hero {
  background-image: linear-gradient(90deg, rgba(249,245,236,.98) 0%, rgba(249,245,236,.92) 27%, rgba(249,245,236,.52) 47%, rgba(249,245,236,0) 67%), url("../assets/ritsa-lake/hero-ritsa.webp");
  background-position: center;
}

.hero-copy { width: 560px; }
.hero-copy h1 { font-size: 72px; white-space: nowrap; }
.hero-lead { width: 415px; }
.phone { display: inline-flex; align-items: center; gap: 7px; }
.phone img { width: 17px; height: 17px; object-fit: contain; }
.hero-note { display: grid; grid-template-columns: auto 54px; align-items: end; column-gap: 7px; }
.hero-arrow { grid-column: 2; grid-row: 1 / 3; width: 54px; height: 38px; object-fit: contain; transform: rotate(-8deg); }

.comfort {
  background-image: linear-gradient(90deg, rgba(9,48,31,.99) 0%, rgba(9,48,31,.97) 31%, rgba(9,48,31,.62) 51%, rgba(9,48,31,0) 75%), url("../assets/ritsa-lake/comfort-car-v3.webp");
  background-position: center, 58% 65%;
  background-size: 100% 100%, 155% auto;
  background-repeat: no-repeat;
}

.why { overflow: hidden; }
.why-grid { grid-template-columns: 420px 1fr; gap: 8px; }
.why-title h2 { flex: 0 0 280px; }
.why-title .line-mountain { opacity: .72; }
.why-lavender { width: 180px; right: -92px; bottom: -90px; transform: rotate(-12deg); }
.packing-still { width: 255px; left: -42px; bottom: -2px; }

.check-list li:before { background-image: url("../assets/ritsa-lake/icon-check.png"); }

.mountain-sketch,
.line-mountain {
  background: url("../assets/ritsa-lake/decor-mountain-v2.png") center / contain no-repeat;
  opacity: .5;
}

.mountain-sketch { width: 180px; height: 64px; right: 24px; bottom: -3px; }
.section-heading .line-mountain { width: 85px; height: 35px; background-size: contain; background-position: center; }
.why-title .line-mountain { width: 122px; height: 60px; }
.footer-hand .line-mountain { width: 180px; height: 70px; filter: brightness(0) invert(1); }

.calendar-head button { width: 24px; height: 24px; display: grid; place-items: center; padding: 5px; }
.calendar-head button img { width: 8px; height: 13px; object-fit: contain; }

.faq summary:after {
  content: "";
  top: 8px;
  width: 13px;
  height: 13px;
  background: url("../assets/ritsa-lake/icon-plus-v2.png") center / contain no-repeat;
  transition: transform .2s ease;
}
.faq details[open] summary:after { content: ""; transform: rotate(45deg); }

.contact-link { display: flex; align-items: center; gap: 8px; }
.contact-link img { width: 14px; height: 14px; object-fit: contain; filter: brightness(0) invert(1); }
.contact-link:nth-of-type(2) img { width: 15px; }
.contact-link:nth-of-type(3) img { width: 15px; }
.menu-toggle { width: 34px; height: 34px; padding: 6px; }
.menu-toggle img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 820px) {
  .hero {
    background-image: linear-gradient(180deg, rgba(249,245,236,.97) 0%, rgba(249,245,236,.84) 48%, rgba(249,245,236,.13) 73%), url("../assets/ritsa-lake/hero-ritsa.webp");
    background-position: 65% center;
  }
  .hero-copy { width: 100%; }
  .hero-copy h1 { white-space: normal; }
  .comfort {
    background-image: linear-gradient(180deg, rgba(9,48,31,.98) 0%, rgba(9,48,31,.83) 52%, rgba(9,48,31,.08) 100%), url("../assets/ritsa-lake/comfort-car-v3.webp");
    background-position: 68% center;
    background-size: auto, cover;
  }
  .why-grid { grid-template-columns: 1fr; gap: 25px; }
  .why-title h2 { flex-basis: auto; }
}

@media (max-width: 520px) {
  .hero-copy h1 { font-size: 48px; line-height: .92; }
  .hero-lead { width: 100%; }
}