/**
 * Mobile layout — главная, карусели, контакты, отзывы, чат.
 * Frontend-only. Не трогает backend/runtime.
 */

@media (max-width: 768px) {
  :root {
    --mw-section-pad-x: max(1rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    --mw-card-width: min(92vw, 380px);
    --mw-carousel-gap: 14px;
    --mw-chat-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }

  main {
    padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
  }

  /* --- Секции: меньше вертикальных «дыр» --- */
  .features {
    padding: 1.25rem var(--mw-section-pad-x);
  }

  .services-section,
  .store-section,
  .projects-section,
  .blog-section,
  .reviews-section {
    margin: 1.25rem auto !important;
    padding: 0.75rem var(--mw-section-pad-x) !important;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }

  .services-section h2,
  .store-section h2,
  .projects-section h2,
  .blog-section h2,
  .reviews-section h2 {
    font-size: clamp(1.35rem, 5vw, 1.65rem);
    margin-bottom: 0.75rem;
    padding: 0 0.25rem;
  }

  /* --- Hero mobile: текст наезжает на иллюстрацию (один блок, не два поля) --- */
  .hero-section {
    position: relative;
    display: block;
    min-height: clamp(22rem, 62vh, 28rem) !important;
    height: auto;
    padding: 0 !important;
    margin-top: 0 !important;
    overflow: hidden;
    background: #fff !important;
    background-image: none !important;
  }

  .hero-section .hero-bg,
  .hero-section .hero-bg-cover {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: 58% !important;
    min-height: 11rem !important;
    max-height: none;
    object-fit: contain;
    object-position: center bottom;
    display: block;
    margin: 0 !important;
    padding: 0 0.35rem 0.35rem;
    box-sizing: border-box;
    z-index: 1;
    pointer-events: none;
  }

  .hero-section .hero-content,
  .hero-section .hero-content.center-padding,
  .hero-section .hero-content-relative {
    position: relative;
    z-index: 2;
    margin: 0 !important;
    margin-bottom: -2.75rem !important;
    padding: calc(var(--mw-header-h, 56px) - 4px) 0.85rem 2.5rem !important;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.97) 0%,
      rgba(255, 255, 255, 0.88) 55%,
      rgba(255, 255, 255, 0.35) 85%,
      rgba(255, 255, 255, 0) 100%
    );
    border-radius: 0;
    box-shadow: none;
  }

  .hero-title {
    font-size: clamp(1.4rem, 6.5vw, 1.8rem) !important;
    line-height: 1.04 !important;
    margin-bottom: 0.22rem !important;
    color: #1a2a32 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
  }

  .hero-subtitle {
    font-size: 0.82rem !important;
    line-height: 1.26 !important;
    max-width: 100% !important;
    margin-bottom: 0.38rem !important;
    color: #2d3f4a !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
  }

  .hero-section .btn-primary {
    width: 100%;
    max-width: 16.5rem;
    min-height: 38px;
    margin-bottom: 0 !important;
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
  }

  /* Убираем «мусор» от декоративного img и inline progress-bar */
  .hero-section img.hero-bg {
    color: transparent;
    font-size: 0;
    line-height: 0;
  }

  /* --- Карусели: шире карточки, snap, без desktop-стрелок --- */
  .services-carousel,
  .products-carousel,
  .projects-carousel,
  .blog-carousel {
    display: block;
    margin: 0.5rem 0 0;
    padding: 0;
  }

  .services-carousel > .carousel-prev,
  .services-carousel > .carousel-next,
  .products-carousel > .carousel-prev,
  .products-carousel > .carousel-next,
  .projects-carousel > .carousel-prev,
  .projects-carousel > .carousel-next,
  .blog-carousel > .carousel-prev,
  .blog-carousel > .carousel-next {
    display: none !important;
  }

  .services-carousel .carousel-track,
  .products-carousel .carousel-track,
  .projects-carousel .carousel-track,
  .blog-carousel .carousel-track {
    display: flex;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0.25rem calc((100vw - var(--mw-card-width)) / 2) 0.85rem;
    gap: var(--mw-carousel-gap);
    scroll-snap-type: x mandatory;
    scroll-padding-inline: calc((100vw - var(--mw-card-width)) / 2);
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .services-carousel .service-card,
  .products-carousel .product-card,
  .projects-carousel .project-card,
  .blog-carousel .service-card,
  .blog-carousel .blog-home-card {
    flex: 0 0 var(--mw-card-width) !important;
    min-width: var(--mw-card-width) !important;
    max-width: var(--mw-card-width) !important;
    width: var(--mw-card-width) !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0.75rem 0.85rem 1rem;
  }

  .services-carousel .service-card h4,
  .products-carousel .product-card h4,
  .projects-carousel .project-card h4,
  .projects-carousel .project-card .project-card__title,
  .blog-carousel .service-card h4,
  .blog-carousel .blog-home-card h4 {
    font-size: 1.05rem;
    line-height: 1.25;
    margin: 0.65rem 0 0.35rem;
    position: relative;
    z-index: 2;
  }

  .services-carousel .service-image-container,
  .products-carousel .service-image-container,
  .projects-carousel .project-card .service-image-container,
  .blog-carousel .service-image-container {
    margin-bottom: 0.35rem;
  }

  .projects-carousel .project-card > .service-image-container:first-child {
    margin: 0 0 0.5rem 0;
    width: 100%;
    max-width: 100%;
    border-radius: 10px;
  }

  .services-carousel .service-card p,
  .products-carousel .product-card p,
  .projects-carousel .project-card p,
  .service-description--short {
    font-size: 0.9rem;
    line-height: 1.4;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .services-carousel .service-card .btn-secondary,
  .products-carousel .product-card .btn-secondary,
  .products-carousel .product-card .product-card__buy,
  .projects-carousel .project-card .btn-secondary,
  .services-carousel .service-card .btn-book {
    width: 100%;
    min-height: 44px;
    margin-top: auto;
    box-sizing: border-box;
    flex-shrink: 0;
  }

  .products-carousel .product-card.product-card--unified {
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .products-carousel .product-card--unified .product-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0.65rem 0.85rem 0.85rem;
  }

  .project-card--wake-challenge,
  .project-card--ruza-camp,
  .project-card--wakesurf-safari,
  .project-card--checklist {
    min-width: var(--mw-card-width) !important;
    max-width: var(--mw-card-width) !important;
  }

  /* --- Страница /blog: горизонтальная лента карточек --- */
  .mw-section.mw-surface .mw-card:has(.blog-index-grid) {
    overflow: visible;
  }

  .blog-index-grid.cards-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: var(--mw-carousel-gap);
    padding: 0.25rem calc((100vw - var(--mw-card-width)) / 2) 0.85rem;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: calc((100vw - var(--mw-card-width)) / 2);
    -webkit-overflow-scrolling: touch;
    margin-left: calc(-1 * var(--mw-section-pad-x));
    margin-right: calc(-1 * var(--mw-section-pad-x));
    width: calc(100% + 2 * var(--mw-section-pad-x));
    max-width: 100vw;
    box-sizing: border-box;
    grid-template-columns: unset;
  }

  .blog-index-grid .blog-card.blog-card--listing {
    flex: 0 0 var(--mw-card-width) !important;
    min-width: var(--mw-card-width) !important;
    max-width: var(--mw-card-width) !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    margin: 0;
  }

  /* --- Отзывы --- */
  .reviews-slider {
    display: flex;
    overflow-x: auto;
    gap: var(--mw-carousel-gap);
    padding: 0.35rem calc((100vw - var(--mw-card-width)) / 2) 0.5rem;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: calc((100vw - var(--mw-card-width)) / 2);
    -webkit-overflow-scrolling: touch;
  }

  .review {
    flex: 0 0 var(--mw-card-width);
    max-width: var(--mw-card-width);
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.1rem 1rem;
    box-sizing: border-box;
    scroll-snap-align: center;
  }

  .review img {
    display: block;
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
    flex-shrink: 0;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
    margin: 0 auto 0.65rem;
    background: #e8ecef;
    border: 2px solid rgba(0, 188, 212, 0.25);
  }

  .review p {
    font-size: 0.92rem;
    line-height: 1.45;
    margin: 0 0 0.5rem;
  }

  .review strong {
    font-size: 0.95rem;
  }

  /* --- Контакты --- */
  .contacts-section {
    padding: 1.25rem var(--mw-section-pad-x) calc(1.5rem + env(safe-area-inset-bottom, 0px));
    margin: 1.25rem auto 0 !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  .contacts-section h2 {
    font-size: 1.45rem;
    margin-bottom: 1rem;
    line-height: 1.15;
    text-align: center;
  }

  .contact-info {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    width: 100%;
    max-width: 100%;
  }

  .contact-details {
    order: 1;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    flex: none;
    padding: 1rem 1.1rem;
    box-sizing: border-box;
  }

  .contact {
    order: 2;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    flex: none;
    padding: 1rem 1.1rem 1.15rem;
    margin: 0;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
  }

  .contact h3 {
    font-size: 1.15rem;
    margin: 0 0 0.85rem;
    width: 100%;
    line-height: 1.2;
  }

  .contact-phone,
  .contact-social {
    font-size: 0.95rem;
    line-height: 1.45;
    margin-bottom: 0.65rem;
    width: 100%;
    word-break: break-word;
  }

  .social-links {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.85rem;
    margin-top: 0.75rem;
  }

  .input-group {
    width: 100%;
    margin-bottom: 0.85rem;
  }

  .input-group label {
    font-size: 0.9rem;
  }

  .input-group input {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
    box-sizing: border-box;
  }

  .contact .btn-primary {
    width: 100%;
    min-height: 44px;
  }

  .chat-margin {
    display: block;
    width: calc(100% - 2rem);
    max-width: 20rem;
    margin: 1.25rem auto calc(5.75rem + env(safe-area-inset-bottom, 0px));
    text-align: center;
    min-height: 44px;
    line-height: 44px;
    box-sizing: border-box;
  }

  /* --- Чат --- */
  .floating-chat {
    bottom: var(--mw-chat-bottom);
    right: max(0.75rem, env(safe-area-inset-right, 0px));
    z-index: 850;
  }

  .chat-toggle {
    width: 52px;
    height: 52px;
    font-size: 20px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  }

  .chat-widget:not(.hidden) {
    bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    width: 100%;
    max-height: min(72vh, 540px);
    border-radius: 14px 14px 0 0;
  }

  #step-indicator {
    bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 480px) {
  :root {
    --mw-card-width: min(94vw, 360px);
  }

  .hero-section .hero-content,
  .hero-section .hero-content.center-padding,
  .hero-section .hero-content-relative {
    padding-top: calc(var(--mw-header-h, 56px) - 6px) !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .services-carousel .service-card,
  .products-carousel .product-card,
  .projects-carousel .project-card {
    min-width: 300px;
    max-width: 340px;
  }
}