/* Home page on phones (up to 767px): the mobile-version requests of 2026-09-15.
   Tablets and desktop are untouched; this file loads after the other home styles so it wins ties. */

/* The static blue man between the contacts block and the footer exists for phones only. */
body.home .tugan-guide-static { display: none; }
/* The price arrows are added by tugan-event-pricing-carousel.js and are needed on phones only. */
#prices.tugan-event-pricing .ep-carousel-controls { display: none; }

@media (max-width: 767px) {
  /* 1. First screen: the heading right under the header; under the button the two flying kids at their original
     size (306 and 358px wide on a 390px phone, proportionally smaller on narrower phones), placed like on the old
     mobile site: the boy at the left edge right under the button, the girl lower and to the right over his legs. */
  body.home #hero.hero .tugan-hero-stage .hero__content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: calc(var(--tugan-header-height, 118px) + 20px) 0 0;
  }
  body.home #hero.hero .tugan-hero-stage .hero__content--inner {
    flex: none;
    width: 100%;
    min-height: 0;
    padding: 0;
    justify-content: flex-start;
    translate: none;
  }
  body.home #hero.hero .tugan-hero-stage .hero__info {
    --kid: min(1px, calc(100vw / 390));   /* one "px" of the 390px layout; shrinks on narrower phones */
    position: relative;
    flex: none;
    width: 100vw;                         /* measured from the screen edge, whatever the theme's container padding */
    height: calc(var(--kid) * 452);       /* the girl's box ends 121 + 328px below the boy's top */
    min-height: 0;
    max-height: none;
    margin: calc(var(--kid) * -16) calc(50% - 50vw) 0;   /* the boy's transparent top edge tucks under the button */
    translate: none;
  }
  body.home #hero .hero__info .hero__img,
  body.home #hero .hero__info .hero__img-two {
    position: absolute;
    margin: 0;
    transform: none;
    animation: tugan-hero-float 6s ease-in-out infinite;
  }
  body.home #hero .hero__info .hero__img { left: calc(var(--kid) * -2); top: 0; width: calc(var(--kid) * 306); }
  body.home #hero .hero__info .hero__img-two { left: calc(var(--kid) * 107); top: calc(var(--kid) * 121); width: calc(var(--kid) * 358); animation-delay: -3s; }
  body.home #hero .hero__info .hero__img img,
  body.home #hero .hero__info .hero__img-two img { display: block; width: 100%; height: auto; max-width: none; }

  /* 2. Cards under the kids: «Полная аренда» is hidden, the other four stand in an even 2×2 grid. */
  body.home #hero .tugan-cards-container { padding: 28px 20px 0; }
  body.home #hero .tugan-service-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  body.home #hero .tugan-service-cards .reveal-card--full-rent { display: none; }
  body.home #hero .tugan-service-cards .reveal-card:nth-child(5) { grid-column: auto; width: auto; justify-self: stretch; }
  body.home #hero .tugan-service-cards .card-icon { height: 111px; margin-bottom: 6px; }
  body.home #hero .tugan-service-cards .card-label { min-height: 104px; font-size: 11px; line-height: 1.35; padding: 17px 7px 10px 13px; }

  /* 3. Signup: no hologram here (a static man stands before the footer instead) and no room left for it. */
  body.home #signup .form__home-img { display: none; }
  body.home .tugan-guide-static { display: block; padding: 8px 20px 12px; text-align: center; }
  body.home .tugan-guide-static img { display: inline-block; width: min(84%, 340px); height: auto; }

  /* 4. About: no «450 квадратных метров зоны WOW-эффекта» caption and no helmet artwork at the end. */
  body.home #about .comfort__content,
  body.home #about .comfort-mobile { display: none; }

  /* 5. Prices: a row of cards to swipe through, one card at a time, with arrows under it. */
  #prices.tugan-event-pricing .ep-grid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    margin-inline: -20px;
    padding: 10px 20px 14px;
    scrollbar-width: none;
  }
  #prices.tugan-event-pricing .ep-grid::-webkit-scrollbar { display: none; }
  #prices.tugan-event-pricing .ep-card { flex: 0 0 min(84%, 340px); scroll-snap-align: start; }
  #prices.tugan-event-pricing .ep-carousel-controls { display: flex; justify-content: center; gap: 40px; margin-top: 14px; }
  /* The same bevelled orange plates as the review arrows. */
  #prices.tugan-event-pricing .ep-arrow {
    position: relative; display: grid; place-items: center; width: 50px; height: 60px; padding: 0;
    border: 0; background: transparent; color: #ffb45c; font: inherit; cursor: pointer; isolation: isolate;
    filter: drop-shadow(0 0 9px #ff880438); touch-action: manipulation; transition: filter .25s, opacity .25s;
  }
  #prices.tugan-event-pricing .ep-arrow-face {
    position: absolute; inset: 4px 2px; display: grid; place-items: center;
    clip-path: polygon(0 12%, 18% 0, 100% 0, 100% 88%, 82% 100%, 0 100%);
    background: linear-gradient(125deg, #ffc17b26, #c176270a 47%, #ff880428);
    border: 1px solid #ff9e38b3; backdrop-filter: blur(9px); box-shadow: inset 0 0 19px #ff880412;
  }
  #prices.tugan-event-pricing .ep-arrow svg { display: block; width: 30px; height: 30px; filter: drop-shadow(0 0 5px currentColor); }
  #prices.tugan-event-pricing .ep-arrow--prev svg { transform: rotate(180deg); }
  #prices.tugan-event-pricing .ep-arrow:disabled { opacity: .3; cursor: default; filter: none; }
  #prices.tugan-event-pricing .ep-arrow:focus-visible { outline: 2px solid #ffb45c; outline-offset: 5px; }

  /* 6. Review avatars: each face is the frame's own background, cut from a small atlas (5×2 cells of 168px).
     The desktop markup clips a five-times-wider <img> inside the rounded frame, which mobile Safari may fail to
     clip inside the glowing, clip-pathed cards — and it downloads 2.3 MB. A background cannot spill out. */
  body.home #reviews .rv-card-picture--avatar {
    background: url('/assets/review-avatars-natural-mobile.webp') no-repeat;
    background-size: 500% 200%;
    background-position: calc(var(--avatar-column) * 25%) calc(var(--avatar-row) * 100%);
    background-clip: padding-box;
  }
  body.home #reviews .rv-card-picture--avatar img { display: none; }
}

@keyframes tugan-hero-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  body.home #hero .hero__info .hero__img,
  body.home #hero .hero__info .hero__img-two { animation: none; }
}