/* Global mobile overrides for page templates that were authored desktop-first. */
@media (max-width: 900px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden !important;
  }

  body {
    overflow-y: auto !important;
    -webkit-text-size-adjust: 100%;
  }

  .page-content {
    overflow-x: hidden !important;
  }

  .page-content,
  .app-shell,
  .app-main,
  .pane,
  .pane-scroll,
  .left-pane,
  .right-pane,
  .content,
  .content-wrapper {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .app-shell,
  .page-content .app-shell {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  .app-main,
  .page-content .app-main,
  .property-split,
  .hero-grid,
  .signup-layout,
  .profile-layout,
  .manage-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .pane,
  .pane-scroll,
  .left-pane,
  .right-pane,
  .map-pane,
  .list-pane {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .map-pane,
  #map {
    position: relative !important;
    top: auto !important;
    height: min(52vh, 420px) !important;
    min-height: 260px !important;
  }

  .property-split > *,
  .app-main > *,
  .filters-row > *,
  .verification-input-row > *,
  .verification-inline-row > *,
  .inline-form-row > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  img,
  video,
  canvas,
  iframe,
  svg {
    max-width: 100% !important;
    height: auto;
  }

  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  input,
  select,
  textarea,
  button {
    font-size: 16px !important;
  }

  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  .btn-danger,
  .primary-button,
  .secondary-button,
  .search-button,
  .action-btn,
  .action-btn-small,
  a.button {
    white-space: normal;
  }
}

@media (max-width: 768px) {
  .app-main,
  .property-split,
  .filters-row,
  .phone-fields-row,
  .country-code-row,
  .verification-input-row,
  .verification-inline-row,
  .inline-form-row,
  .settings-row {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .search-bar,
  .filters-row,
  .search-row,
  .form-row,
  .action-row,
  .button-row,
  .actions-row,
  .section-actions,
  .cta-row {
    flex-wrap: wrap !important;
    row-gap: 10px;
  }

  .search-bar > *,
  .filters-row > *,
  .search-row > *,
  .form-row > *,
  .action-row > *,
  .button-row > *,
  .actions-row > *,
  .section-actions > *,
  .cta-row > *,
  .phone-fields-row > *,
  .verification-input-row > *,
  .verification-inline-row > *,
  .inline-form-row > *,
  .settings-row > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  .search-bar > *,
  .filters-row > *,
  .search-row > *,
  .form-row > *,
  .action-row > *,
  .button-row > *,
  .actions-row > * {
    min-width: 0 !important;
  }

  .settings-row {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  .settings-row__content,
  .preferences-copy {
    width: 100% !important;
  }

  .modal-footer,
  .overlay-footer,
  .standard-actions,
  .blackout-modal-actions,
  .family-footer-actions,
  .waitlist-popup-buttons,
  .btn-group {
    justify-content: stretch !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .modal-footer > *,
  .overlay-footer > *,
  .standard-actions > *,
  .blackout-modal-actions > *,
  .family-footer-actions > *,
  .waitlist-popup-buttons > *,
  .btn-group > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  .standard-modal,
  .blackout-modal,
  .image-modal-content,
  .bookings-calendar-container,
  .calendar-container,
  .waitlist-popup,
  .login-popup,
  .signup-popup {
    width: min(100vw - 24px, 680px) !important;
    max-width: min(100vw - 24px, 680px) !important;
    margin: 0 auto !important;
    max-height: min(86vh, 920px) !important;
    overflow-y: auto !important;
  }

  .calendar-container,
  .bookings-calendar-container {
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: max(24px, env(safe-area-inset-top)) !important;
  }

  .property-image-gallery,
  .gallery-desktop,
  .gallery-side-grid,
  .image-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    max-height: none !important;
  }

  .property-image-gallery {
    aspect-ratio: auto !important;
  }

  .gallery-featured,
  .gallery-tile,
  .place-images,
  .place-image,
  .place-image-placeholder {
    min-width: 0 !important;
    width: 100% !important;
  }

}

@media (max-width: 640px) {
  .section-title,
  .standard-modal-title,
  .blackout-modal-title,
  .family-section-title {
    line-height: 1.18 !important;
  }

  .property-header-card .section-title {
    font-size: clamp(1.6rem, 8vw, 2.2rem) !important;
  }

  .logo {
    font-size: 1.8rem !important;
  }

  .search-filter-label,
  .filter-label,
  .section-description,
  .blackout-modal-text,
  .standard-modal-text {
    word-break: break-word;
  }
}

@supports (height: 100dvh) {
  @media (max-width: 900px) {
    .app-shell {
      min-height: calc(100dvh - 100px) !important;
    }
  }
}