/* ==========================================================================
ОКОЛИЦЯ — Мобільні стилі
Файл: media-style.css
Підхід: Mobile-first медіа-запити
========================================================================== */

/* --------------------------------------------------------------------------
ПЛАНШЕТ — до 1024px
-------------------------------------------------------------------------- */
@media (max-width: 1024px) {
/* Навігація */
 .nav__list {
     gap: 1.25rem;
 }
 /* Герой */
 .hero__features-inner {
     gap: 2rem;
 }
 /* Басейн */
 .pool__inner {
     grid-template-columns: 1fr 1fr;
     gap: 2rem;
 }
 .pool__content {
     padding-right: 0;
 }
 /* Послуги */
 .services__grid {
     grid-template-columns: repeat(2, 1fr);
 }
 /* Відгуки */
 .reviews__grid {
     grid-template-columns: repeat(2, 1fr);
 }
 /* Контакти */
 .contacts__inner {
     grid-template-columns: 1fr;
     gap: 2.5rem;
 }
 .contacts__info {
     padding-right: 0;
 }
 /* Футер */
 .footer__top {
     grid-template-columns: 1fr 1fr;
     gap: 2rem;
 }
 .footer__brand {
     grid-column: span 2;
 }
 /* Галерея */
 .gallery__grid {
     grid-template-columns: repeat(3, 1fr);
     grid-auto-rows: 200px;
 }
}

/* --------------------------------------------------------------------------
МАЛИЙ ДЕСКТОП — до 1366px
-------------------------------------------------------------------------- */
@media (max-width: 1366px) and (min-width: 1025px) {
 /* Герой */
 .hero__content {
     padding-top: 6rem;
     padding-bottom: 3rem;
 }
 .hero__title {
     font-size: clamp(2rem, 5vw, 3.5rem);
 }
 .hero__text {
     font-size: 1rem;
     margin-bottom: 2rem;
 }
 .hero__features {
     bottom: 1.5rem;
 }
 .hero__features-inner {
     gap: 1.5rem;
 }
 .hero-feature__value {
     font-size: 0.85rem;
 }
}


/* --------------------------------------------------------------------------
МОБІЛЬНИЙ — до 768px
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
:root {
     --gap-xl: 3.5rem;
     --gap-lg: 2.5rem;
 }
 /* Шапка */
 .header {
     padding: 1rem 0;
 }
 .header--scrolled {
     padding: 0.75rem 0;
 }
 /* Мобільне меню */
 .nav__list {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: var(--color-primary);
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 2rem;
     z-index: 999;
 }
 .nav__list--open {
     display: flex;
 }
 .nav__link {
     font-size: 1.4rem;
     color: var(--color-white);
     font-weight: 600;
 }
 .nav__link:hover {
     color: var(--color-accent-light);
 }
 .nav__burger {
     display: flex;
     z-index: 1001;
     position: relative;
 }
 .nav__burger--open .nav__burger-line:nth-child(1) {
     transform: translateY(7px) rotate(45deg);
 }
 .nav__burger--open .nav__burger-line:nth-child(2) {
     opacity: 0;
     transform: scaleX(0);
 }
 .nav__burger--open .nav__burger-line:nth-child(3) {
     transform: translateY(-7px) rotate(-45deg);
 }
 .nav__burger--open .nav__burger-line {
     background-color: var(--color-white);
 }
 /* Кнопка бронювання в шапці — прихована на мобільному */
 .header .btn {
     display: none;
 }
 /* Герой */
 .hero__content {
     padding-top: 7rem;
     padding-bottom: 2rem;
 }
 .hero__title {
     font-size: 2.2rem;
 }
 .hero__text {
     font-size: 1rem;
 }
 .hero__actions {
     flex-direction: column;
     align-items: flex-start;
 }
 .hero__actions .btn {
     width: 100%;
     justify-content: center;
 }
 .hero__features {
     display: none;
 }
 /* Басейн */
 .pool__inner {
     grid-template-columns: 1fr;
 }
 .pool__image-wrap {
     order: -1;
 }
 .pool__img {
     height: 300px;
 }
 /* Послуги */
 .services__grid {
     grid-template-columns: 1fr 1fr;
 }
 /* Розклад */
 .schedule__timeline::before {
     left: 70px;
 }
 .schedule-item {
     grid-template-columns: 70px 1fr;
 }
 .schedule-item__dot {
     left: 64px;
 }
 /* Галерея */
 .gallery__grid {
     grid-template-columns: repeat(2, 1fr);
     grid-auto-rows: 180px;
 }
 .gallery-item--wide {
     grid-column: span 1;
 }
 .gallery-item--tall {
     grid-row: span 1;
 }



/* Відео-галерея */
.video-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

/* Відео-галерея */
.video-gallery__grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
.video-card__play {
    width: 60px;
    height: 60px;
}
.video-card__play svg {
    width: 36px;
    height: 36px;
}


 /* Відгуки */
 .reviews__grid {
     grid-template-columns: 1fr;
 }
 /* FAQ */
 .faq-item__question {
     font-size: 0.95rem;
 }
 /* Контакти */
 .contacts__form-wrap {
     padding: 1.25rem;
 }
 /* Телефон в контактах — мобільна версія */
 .contacts__phone-link {
     font-size: 26px;
 }
 .contacts__phone-btn {
     min-width: 100%;
     padding: 14px 20px;
 }
 .contacts__phone-block {
     padding: 30px 20px;
 }
 /* Футер */
 .footer__top {
     grid-template-columns: 1fr;
 }
 .footer__brand {
     grid-column: span 1;
 }
 .footer__bottom {
     flex-direction: column;
     gap: 0.75rem;
     text-align: center;
 }
}
/* --------------------------------------------------------------------------
МАЛИЙ МОБІЛЬНИЙ — до 480px
-------------------------------------------------------------------------- */
@media (max-width: 480px) {
:root {
     --container-pad: 1rem;
     --gap-xl: 2.5rem;
     --gap-lg: 2rem;
 }
 /* Герой */
 .hero__title {
     font-size: 1.85rem;
 }
 .hero__eyebrow {
     font-size: 0.7rem;
 }
 /* Секції */
 .section-header__title {
     font-size: 1.6rem;
 }
 /* Послуги */
 .services__grid {
     grid-template-columns: 1fr;
 }
 .service-card__image-wrap {
     height: 180px;
 }
 /* Розклад */
 .schedule__timeline::before {
     display: none;
 }
 .schedule-item {
     grid-template-columns: 1fr;
     gap: 0.5rem;
 }
 .schedule-item__time {
     text-align: left;
     padding-right: 0;
 }
 .schedule-item__dot {
     display: none;
 }
 .schedule-item__body {
     padding-left: 0;
 }
 /* Галерея */
 .gallery__grid {
     grid-template-columns: 1fr;
     grid-auto-rows: 220px;
 }
 .gallery__filter {
     gap: 0.4rem;
 }
 .gallery__filter-btn {
     padding: 0.4rem 0.9rem;
     font-size: 0.8rem;
 }
 /* Відгуки */
 .reviews__score {
     font-size: 2.8rem;
 }
 /* Форма */
 .form__btn {
     width: 100%;
 }
 /* Кнопки */
 .btn {
     padding: 0.75rem 1.5rem;
     font-size: 0.85rem;
 }
}
/* --------------------------------------------------------------------------
СКОРОЧЕННЯ АНІМАЦІЙ для користувачів з відповідними налаштуваннями
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.hero__bg-img,
.hero__bg-video {
    transform: none !important;
}
}