/* Design 5: corrections from the six slides in «каменты 3.pptx». */
:root { --blue: #00246f; --orange: #fb5501; }
.button.primary, .round-arrow, .badge { background: var(--orange); }
.button.primary:hover, .round-arrow:hover { background: #dd4900; }
.brand-color-filter { position: absolute; pointer-events: none; overflow: hidden; }
.brand img, .footer-inner > a:first-child img { filter: url('#brand-logo-colors'); }

/* Fill every banner from its top edge. The only crop is at the bottom. */
.carousel .hero-image-link { align-items: flex-start; }
.carousel .hero-image-link img,
.carousel .hero-image-link picture img {
  object-fit: cover !important;
  object-position: center top !important;
}

/* Keep one letter scale for all three outlined titles, including the two-line title. */
.quest-card-body { container-type: inline-size; }
.card-title { height: 98px; min-height: 98px; flex: 0 0 98px; align-items: center; }
.card-title .heading-art { height: auto; max-height: none; max-width: 100%; }
.card-title img[src$="title-keys.svg"] { width: min(335.28px, 95.8995cqw); }
.card-title img[src$="title-birthday.svg"] { width: min(349.616px, 100cqw); }
.card-title img[src$="title-detective.svg"] { width: min(294.544px, 84.2488cqw); }
.card-stats { flex-shrink: 0; }
.card-stats > span { min-width: 0; }
.catalog-title h1 { transform: none; margin-bottom: 12px; }
.catalog-title::after { border-top-color: var(--blue); }

/* The original cover crops contain stray screenshot borders. Clip them in the frame. */
.quest-cover { position: relative; aspect-ratio: 346 / 360; flex: none; border-radius: 11px 11px 0 0; }
.quest-cover img {
  position: absolute;
  display: block;
  top: -1.7%;
  left: -.5%;
  width: 102.5%;
  max-width: none;
  height: auto;
  max-height: none;
  aspect-ratio: 346 / 360;
  border: 0;
  border-radius: 0;
  transform: none;
}
.quest-cover img[src$="cover-birthday.webp"] { width: 105%; left: -2.8%; top: -1.8%; }
.quest-cover img[src$="cover-detective.webp"] { width: 107%; left: -5.3%; top: -1.8%; }
.quest-cover:hover img { transform: none; }

/* Reserve a badge row, then align the image and heading in the same grid row. */
.product-hero { align-items: start; row-gap: 14px; }
.product-hero > .badge { grid-column: 2; grid-row: 1; justify-self: start; }
.product-image { align-self: start; grid-column: 1; grid-row: 2; }
.product-summary { grid-column: 2; grid-row: 2; }
.product-summary h1 { margin-top: 0; }

/* Remove screenshot mattes while retaining the original illustrated paper and lettering. */
.paper-note, .adventures-note, .source-sticker img,
.prepare-note, .other-map, .other-books { mix-blend-mode: normal; }
.catalog-note, .source-sticker { filter: drop-shadow(0 3px 3px #72532918); }
img[src$="note-catalog.webp"] {
  clip-path: polygon(11.5% 18.2%,37.3% 3.2%,40.6% 11.7%,100% 1.9%,100% 100%,24.9% 100%,18.9% 35.7%,15.2% 33.8%);
}
img[src$="note-more-adventures.webp"] {
  clip-path: polygon(6.4% 22.9%,30.3% 15.6%,35.1% 19.5%,100% 12.7%,100% 100%,22.9% 100%,12.8% 45.4%,11.2% 30.7%,6.4% 31.7%);
}
img[src$="note-keys.webp"] {
  clip-path: polygon(3.4% 13.6%,8.7% 12.7%,7.3% 8.5%,11.7% 8%,13.6% 2.3%,16.5% 7%,21.4% 7.5%,18% 11.3%,82% 2.8%,95.6% 87.8%,15.5% 99.1%);
}
img[src$="note-detective.webp"] {
  clip-path: polygon(4.9% 10.8%,89.6% 1.6%,98.9% 89.2%,14.2% 98.9%);
}
img[src$="note-prepare.webp"] {
  clip-path: polygon(2% 21.6%,85% 7.4%,99.3% 80.1%,19% 94.3%);
}
img[src$="decor-map.webp"] {
  clip-path: polygon(5.4% 21.8%,82.6% 0%,95.8% 67.2%,17.4% 90.8%,14.4% 85.7%);
}
img[src$="decor-books.webp"] {
  clip-path: polygon(0% 60.2%,5.6% 53.1%,5.6% 36.7%,16.8% 30.6%,17.4% 12.2%,70.8% 4.1%,88.8% 10.2%,87.6% 28.6%,91.3% 32.7%,90.1% 48%,92.5% 54.1%,90.1% 66.3%,93.8% 75.5%,73.9% 95.9%,3.1% 85.7%,0% 80.6%);
}
.torn-paper::before {
  width: 78px;
  height: 25px;
  left: -10px;
  top: -5px;
  background: #e6cba4b3;
  border-inline: 1px dashed #cfb08680;
  box-shadow: 0 1px 2px #7253290c;
  transform: rotate(-28deg);
}

/* Keep the other-quests title and arrow together at the center of the panel. */
.other-quests { grid-template-columns: minmax(75px,155px) minmax(0,1fr) minmax(75px,155px); }
.other-center { display: flex; justify-content: center; align-items: center; gap: 20px; min-width: 0; }
.other-center .other-copy { flex: 0 1 445px; }
.other-center .round-arrow { flex: 0 0 52px; }
.other-map, .other-books { align-self: center; }

/* A compact centered footer; the original alpha mask keeps the exact slogan lettering. */
.footer-inner { display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: nowrap; gap: 34px; min-height: 92px; }
.footer-inner > a:first-child { flex: 0 0 210px; }
.footer-inner > a:first-child img { width: 210px; }
.footer-inner .footer-slogan {
  flex: 0 1 510px;
  width: 510px;
  max-width: 510px;
  margin: 0;
  aspect-ratio: 1202 / 100;
  background: linear-gradient(90deg, var(--blue) 0 67%, var(--orange) 67% 100%);
  -webkit-mask: url('assets/footer-slogan-r4.png') center / contain no-repeat;
  mask: url('assets/footer-slogan-r4.png') center / contain no-repeat;
}
.footer-inner .footer-slogan img { width: 100%; height: auto; opacity: 0; }

@media(max-width: 980px) {
  .product-image { grid-column: 1; grid-row: 1; }
  .product-hero > .badge { grid-column: 1; grid-row: 2; margin-top: 10px; }
  .product-summary { grid-column: 1; grid-row: 3; }
  .other-quests { grid-template-columns: 100px minmax(0,1fr) 100px; }
  .other-center { gap: 14px; }
}
@media(max-width: 760px) {
  .card-title { height: 98px; min-height: 98px; }
  .other-quests { grid-template-columns: minmax(0,1fr); padding: 24px 18px; }
  .other-map, .other-books { display: none; }
  .other-center { width: 100%; gap: 13px; }
  .other-center .round-arrow { width: 42px; height: 42px; flex-basis: 42px; }
  .other-quests small { font-size: 14px; }
  .footer-inner { flex-direction: column; gap: 16px; min-height: 0; }
  .footer-inner > a:first-child { flex: none; }
  .footer-inner > a:first-child img { width: 195px; }
  .footer-inner .footer-slogan { flex: none; width: min(430px,100%); }
  .torn-paper::before { width: 64px; height: 23px; }
}

/* Keep benefit text within narrow phone columns. */
.benefits > div { min-width: 0; }
.benefits p { max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}