/* ========================================
   МОБИЛЬНАЯ И ПЛАНШЕТНАЯ АДАПТАЦИЯ
   Десктопные стили остаются без изменений
   ======================================== */

/* Планшеты (768px - 1023px) */
@media (max-width: 1023px) {
  
    /* Header - компактнее */
    .header {
      padding: 12px 20px;
    }
    
    .header-content {
      flex-wrap: wrap;
      gap: 12px;
    }
    
    .logo {
      font-size: 16px;
    }
    
    .nav {
      order: 3;
      width: 100%;
      justify-content: center;
      gap: 20px;
      padding-top: 8px;
    }
    
    .nav a {
      font-size: 14px;
    }
  
    /* Hero - меньше отступы */
    .hero-content {
      padding: 0 24px;
    }
    
    .hero h1 {
      font-size: clamp(2.5rem, 6vw, 4rem);
      margin-bottom: 16px;
    }
    
    .hero p {
      font-size: 16px;
      margin-bottom: 24px;
    }
  
    /* Parallax section - одна колонка */
    .parallax-section {
      grid-template-columns: 1fr;
      gap: 30px;
      padding: 80px 24px;
      margin-top: 60px;
    }
    
    .parallax-text h2 {
      font-size: 36px;
      text-align: center;
    }
    
    .parallax-text p {
      font-size: 16px;
      text-align: center;
      margin-right: 0;
    }
    
    .parallax-button {
      display: block;
      text-align: center;
      max-width: 200px;
      margin: 0 auto;
    }
    
    .parallax-images {
      order: -1;
      height: 400px;
    }
    
    .parallax-image.back {
      width: 100%;
      max-height: 400px;
      margin-left: 0;
    }
    
    .parallax-image.front,
    .parallax-image.front2 {
      display: none;
    }
  
    /* Section spacing */
    .section {
      padding: 60px 24px;
    }
    
    .section-title {
      font-size: clamp(2rem, 4vw, 3rem);
      margin-top: 40px;
      margin-bottom: 40px;
    }
  
    /* Gallery - компактнее */
    .gallery {
      margin: 60px -24px;
      padding: 60px 24px;
    }
    
    .header-gallery {
      padding: 20px;
      margin-bottom: -40px;
    }
    
    .header-gallery h1 {
      font-size: 1.8em;
    }
    
    .floor-tabs {
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 16px;
    }
    
    .floor-tab {
      padding: 10px 20px;
      font-size: 0.9em;
    }
    
    .content {
      grid-template-columns: 1fr;
      gap: 24px;
      padding: 24px;
    }
    
    .plan-panel {
      order: -1;
    }
    
    .info-panel {
      margin-left: 0;
      text-align: left;
    }
    
    .point-title {
      font-size: 1.4em;
      margin-left: 0;
    }
    
    .point-description {
      font-size: 1em;
      margin-left: 0;
    }
    
    .image-gallery {
      gap: 20px !important;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
    
    .point-image {
      width: 100%;
    }
    
    .point-image2 {
      width: 100%;
      transform: translateX(0);
    }
  
    /* Amenities - адаптивная сетка */
    .amenities-wrap {
      grid-template-columns: 1fr;
      gap: 24px;
    }
    
    .amenities-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }
    
    .amenity-item h4 {
      font-size: 16px;
    }
    
    .amenity-item p {
      font-size: 14px;
    }
    
    .amenities-actions {
      margin: 40px 0 30px;
    }
  
    /* Booking card */
    .booking-sticky {
      position: static;
      margin: 0;
    }
    
    .booking-card {
      transform: none;
      max-width: 100%;
    }
  
    /* Reviews */
    .reviews-carousel {
      max-width: 100%;
    }
    
    .review-card {
      padding: 20px;
    }
    
    .review-text {
      font-size: 16px;
    }
  
    /* Before/After */
    #perfect-for .before-after {
      max-height: 400px;
    }
  
    /* Hosts */
    .hosts-layout {
      grid-template-columns: 1fr;
      gap: 24px;
    }
    
    .hosts-layout--divider::before {
      display: none;
    }
    
    .platform-grid {
      grid-template-columns: 1fr;
      gap: 20px;
    }
    
    .host-form-card {
      position: static;
    }
    
    .host-form__grid {
      grid-template-columns: 1fr;
      gap: 12px;
    }
  
    /* Contact */
    .contact-grid {
      grid-template-columns: 1fr;
      gap: 24px;
    }
    
    .contact-info {
      transform: none !important;
      margin-left: 0;
      padding: 20px;
    }
    
    .map-container iframe {
      height: 320px;
    }
  
    /* Policy */
    .policy-grid {
      grid-template-columns: 1fr;
      gap: 20px;
    }
  }
  
  /* Мобильные устройства (до 767px) */
  @media (max-width: 767px) {
    
    /* Reset body */
    body {
      font-size: 14px;
    }
  
    /* Header - минималистичный */
    .header {
      padding: 10px 16px;
    }
    
    .logo {
      font-size: 15px;
    }
    
    .nav {
      display: none; /* Скрываем на мобильных или можно добавить бургер-меню */
    }
    
    .lang-switch {
      gap: 8px;
    }
    
    .lang-switch button {
      font-size: 13px;
    }
  
    /* Hero - компактный */
    .hero-content {
      padding: 0 16px;
    }
    
    .hero-content img {
      width: 200px !important;
      height: 200px !important;
    }
    
    .hero h1 {
      font-size: clamp(2rem, 8vw, 3rem);
      margin-bottom: 12px;
    }
    
    .hero p {
      font-size: 14px;
      margin-bottom: 20px;
    }
    
    .cta-button {
      padding: 12px 24px;
      font-size: 14px;
    }
  
    /* Parallax - минималистичный */
    .parallax-section {
      padding: 50px 16px;
      margin-top: 40px;
    }
    
    .parallax-text h2 {
      font-size: 28px;
      margin-bottom: 16px;
    }
    
    .parallax-text p {
      font-size: 14px;
      line-height: 1.5;
      margin-bottom: 20px;
    }
    
    .parallax-button {
      padding: 12px 24px;
      font-size: 14px;
      max-width: 180px;
    }
    
    .parallax-images {
      height: 300px;
    }
    
    .parallax-image.back {
      max-height: 300px;
    }
  
    /* Sections - минимум отступов */
    .section {
      padding: 40px 16px;
    }
    
    .section-title {
      font-size: clamp(1.8rem, 6vw, 2.5rem);
      margin-top: 30px;
      margin-bottom: 30px;
    }
  
    /* Gallery - компактная */
    .gallery {
      margin: 40px -16px;
      padding: 40px 16px;
    }
    
    .header-gallery {
      padding: 16px;
      margin-bottom: -30px;
    }
    
    .header-gallery h1 {
      font-size: 1.5em;
    }
    
    .floor-tabs {
      gap: 8px;
      margin-top: 12px;
    }
    
    .floor-tab {
      padding: 8px 16px;
      font-size: 0.85em;
      border-width: 1.5px;
    }
    
    .content {
      padding: 16px;
      gap: 20px;
    }
    
    .placeholder {
      padding: 30px 16px;
      font-size: 1em;
    }
    
    .point-title {
      font-size: 1.2em;
      margin-left: 0;
      margin-bottom: 10px;
      justify-content: center;
      text-align: center;
      align-items: center;
      display: flex;
    }
    
    .point-description {
      font-size: 0.9em;
      line-height: 1.4;
    }
    
    .image-gallery {
      gap: 12px !important;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
    
    .point-image {
      border-radius: 10px;
      transform: translate(clamp(-42px, -50%, -42px));
    }

    .point-image2 {
      border-radius: 10px;
      transform: translate(clamp(-42px, -50%, -42px));

    }
    
    .plan-image {
      border-radius: 10px;
    }
    
    .point {
      width: 24px;
      height: 24px;
      border-width: 2px;
    }
    
    .point-label {
      font-size: 0.75em;
      padding: 3px 8px;
      margin-top: 6px;
    }
  
    /* Amenities - 2 колонки */
    .amenities-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      transform: none;
    }
    
    .amenity-item {
      padding: 0;
    }
    
    .amenity-icon {
      font-size: 36px;
      margin-bottom: 12px;
    }
    
    .amenity-item h4 {
      font-size: 14px;
      margin-bottom: 4px;
    }
    
    .amenity-item p {
      font-size: 12px;
    }
    
    .amenities-actions {
      margin: 30px auto 20px;
      text-align: center;
    }
    
    .amenities-all-btn {
      padding: 12px 18px;
      font-size: 14px;
    }
  
    /* Modal amenities */
    .amenities-modal__dialog {
      height: 90vh;
      margin: 5vh 16px;
      border-radius: 12px;
    }
    
    #amenitiesTitle {
      padding: 16px;
      font-size: 18px;
    }
    
    .amenities-groups {
      padding: 12px 16px;
      gap: 14px;
    }
    
    .amenity-group {
      padding: 12px;
    }
    
    .amenity-group h4 {
      font-size: 15px;
    }
    
    .amenity-bullets li {
      font-size: 13px;
    }
  
    /* Booking card - компактная */
    .booking-card {
      padding: 16px;
      border-radius: 12px;
    }
    
    .booking-title {
      font-size: 18px;
      margin-bottom: 12px;
    }
    
    .input-group {
      margin-bottom: 8px;
    }
    
    .input-cell {
      padding: 10px 12px;
    }
    
    .small-label {
      font-size: 10px;
      margin-bottom: 4px;
    }
    
    .input-cell input[type="date"] {
      height: 24px;
      font-size: 14px;
    }
    
    .select-cell select {
      padding: 12px 40px 12px 12px;
      font-size: 14px;
    }
    
    .btn-gradient,
    .btn-gradient2,
    .btn-gradient3 {
      padding: 12px 16px;
      margin-top: 10px;
      font-size: 14px;
    }
    
    .report-link {
      font-size: 12px;
      margin-top: 8px;
    }
  
    /* Reviews - компактные */
    .review-card {
      padding: 16px;
      border-radius: 12px;
    }
    
    .review-text {
      font-size: 14px;
      line-height: 1.5;
    }
    
    .review-rating {
      font-size: 14px;
    }
    
    .review-author {
      font-size: 13px;
    }
    
    .review-more {
      flex-direction: column;
      gap: 10px;
    }
    
    .more-icon {
      width: 40px;
      height: 40px;
    }
    
    .reviews-dots {
      gap: 8px;
      margin-top: 12px;
    }
    
    .dot {
      width: 24px;
      height: 5px;
    }
  
    /* Before/After - компактный */
    #perfect-for .before-after {
      max-height: 280px;
      border-radius: 12px;
      margin-top: 16px;
    }
    
    .ba-handle {
      width: 36px;
      height: 36px;
    }
    
    .ba-handle i {
      font-size: 14px;
    }
    
    .perfect-label {
      margin-top: 10px;
      font-size: 14px;
    }
  
    /* Hosts - минималистичный */
    .platform {
      padding: 16px;
      border-radius: 12px;
    }
    
    .host-card {
      padding: 16px;
      border-radius: 12px;
    }
    
    .host-head {
      gap: 10px;
    }
    
    .avatar {
      width: 44px;
      height: 44px;
      font-size: 15px;
    }
    
    .host-name {
      font-size: 17px;
    }
    
    .host-role {
      font-size: 11px;
    }
    
    .platform-chip {
      font-size: 11px;
      padding: 5px 10px;
      margin-top: 6px;
      margin-left: 0;
    }
    
    .host-stats {
      grid-template-columns: repeat(3, 1fr);
      margin-top: 14px;
    }
    
    .host-stats li {
      padding: 10px;
    }
    
    .host-stats .num {
      font-size: 15px;
    }
    
    .host-stats .label {
      font-size: 11px;
    }
    
    .details-title {
      font-size: 16px;
      margin-bottom: 8px;
    }
    
    .detail-row {
      font-size: 13px;
    }
    
    .btn-ghost {
      padding: 10px 14px;
      font-size: 14px;
    }
    
    .muted-link {
      font-size: 13px;
    }
    
    .notice {
      font-size: 12px;
      padding-top: 12px;
      margin-top: 14px;
    }
  
    /* Host form - компактная */
    .host-form-card {
      padding: 16px;
    }
    
    .host-form__title {
      font-size: 16px;
      margin-bottom: 12px;
    }
    
    .form-cell input,
    .form-cell select,
    .form-cell textarea {
      padding: 10px 12px;
      font-size: 14px;
      border-radius: 10px;
    }
    
    .host-form__note {
      font-size: 11px;
      margin-top: 8px;
    }
  
    /* Contact - компактный */
    .contact-grid {
      border-radius: 12px;
    }
    
    .contact-info {
      padding: 16px;
    }
    
    .contact-item {
      margin-bottom: 20px;
    }
    
    .contact-item h4 {
      font-size: 16px;
      margin-bottom: 6px;
    }
    
    .contact-item p {
      font-size: 14px;
    }
    
    .map-container {
      border-radius: 12px;
    }
    
    .map-container iframe {
      height: 280px;
    }
    
    .map-link {
      font-size: 11px;
      padding: 5px 8px;
      right: 8px;
      bottom: 8px;
    }
  
    /* Policy - минималистичный */
    .policy-card h3 {
      font-size: 16px;
      margin-bottom: 10px;
    }

    .policy,
    .booking-sticky{
        max-width: 350px;
    }
    
    .policy-list {
      gap: 8px;
      margin-bottom: 10px;
    }
    
    .policy-list li {
      font-size: 13px;
    }
    
    .policy-text {
      font-size: 13px;
      margin-bottom: 10px;
    }
    
    .policy-link {
      font-size: 13px;
      gap: 6px;
    }
  
    /* Modal - полноэкранный */
    .modal-close {
      top: 10px;
      right: 20px;
      font-size: 32px;
    }
    
    .modal-content {
      max-width: 95%;
      max-height: 85%;
      border-radius: 8px;
    }
  }
  
  /* Очень маленькие экраны (до 400px) */
  @media (max-width: 400px) {
    
    .header {
      padding: 8px 12px;
    }
    
    .section {
      padding: 30px 12px;
    }
    
    .section-title {
      font-size: 1.5rem;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    
    .hero-content img {
      width: 160px !important;
      height: 160px !important;
    }
    
    .parallax-section {
      padding: 40px 12px;
    }
    
    .parallax-text h2 {
      font-size: 24px;
    }
    
    .amenities-grid {
      grid-template-columns: 1fr;
      gap: 12px;
    }
    
    .gallery {
      padding: 30px 12px;
    }
    
    .content {
      padding: 12px;
    }
    
    .image-gallery {
      grid-template-columns: 1fr;
      gap: 10px !important;
    }
    
    .host-stats {
      grid-template-columns: 1fr 1fr;
    }
    
    .host-stats li:nth-child(3) {
      grid-column: 1 / -1;
    }
  }
  
  /* Дополнительные улучшения для touch-устройств */
  @media (hover: none) {
    
    .point:active {
      transform: translate(-50%, -50%) scale(1.15);
    }
    
    .floor-tab:active {
      transform: translateY(0);
    }
    
    .amenity-item:active .amenity-icon {
      transform: scale(1.05);
    }
    
    .cta-button:active,
    .btn-gradient:active,
    .btn-gradient2:active,
    .btn-gradient3:active {
      transform: translateY(0);
    }
  }