/**
 * Phone-Safe Global Styles
 * ========================
 * Targeted fixes so user-facing pages don't squish or overflow on phones.
 * Loaded after global-constraints.css. Uses explicit selectors only; no
 * broad attribute selectors that could override intentional design.
 * - Prevents horizontal overflow at viewport/body level
 * - Allows flex children to shrink (min-width: 0) where content would otherwise overflow
 * - Constrains media; truncates only specific card/label text
 * - Does not override modals, dropdowns, or form layout (handled by component CSS)
 */

/* ========================================
 * VIEWPORT AND BODY (narrow screens only)
 * ======================================== */

@media (max-width: 640px) {
  html {
    max-width: 100%;
    overflow-x: clip;
  }

  body {
    overflow-x: clip;
    min-width: 0;
    max-width: 100%;
  }

  /*
   * Fixed bottom actions (opt-in): .swiftspot-fixed-bottom | data-swiftspot-fixed-bottom.
   *
   * Clearance contract (do not invent a parallel stack):
   * 1) --swiftspot-browser-chrome-bottom — JS visualViewport gap (URL/tab bar)
   * 2) --swiftspot-mobile-bottom-nav-offset — measured site tab bar height (0 if hidden)
   * 3) Feature bar height — owned by that feature (checkout CTA, listspot nav, …)
   * 4) Safe-area — pad ONCE: either the lowest visible fixed bar, or content clearance,
   *    never both for the same edge.
   * Content padding-bottom / spacers must sum (1)+(2)+(3)[+safe-area if (4) not on a bar].
   * Full write-up: CSS_OWNERSHIP.txt “Fixed-bottom clearance contract”.
   */
  .swiftspot-fixed-bottom,
  [data-swiftspot-fixed-bottom="true"] {
    bottom: var(--swiftspot-browser-chrome-bottom, 0px);
  }

  body.swiftspot-bottom-nav-visible .swiftspot-fixed-bottom,
  body.swiftspot-bottom-nav-visible [data-swiftspot-fixed-bottom="true"] {
    bottom: calc(
      var(--swiftspot-mobile-bottom-nav-offset, 0px)
      + var(--swiftspot-browser-chrome-bottom, 0px)
    );
  }

  @supports not (overflow-x: clip) {
    html,
    body {
      overflow-x: hidden;
    }
  }

  main,
  .main-content,
  .content-wrapper,
  .page-wrapper,
  .app-container,
  [role="main"] {
    min-width: 0;
    max-width: 100%;
    /*
     * Do not set overflow-x alone. CSS computes the other axis to auto, so a
     * viewport-sized flex <main> becomes a nested scrollport. Under iOS VV-lock
     * (site bottom nav → body is the document scroller) that freezes upward
     * flings at the bottom — calendar, profile, and other host pages.
     * Horizontal bleed is already clipped by html/body overflow-x: clip above.
     */
    overflow: visible;
  }
}

/* ========================================
 * FLEX CHILDREN - allow shrink, no squish
 * ======================================== */

@media (max-width: 640px) {
  .flex > .flex-1,
  .flex-1.min-w-0,
  .booking-card-content,
  .card-content,
  .spot-card .flex-1,
  .renter-bookings-content .flex-1,
  .billing-transaction-info,
  .booking-card-info-structured .info-item {
    min-width: 0;
  }

  .mobile-navigation {
    max-width: 100%;
    left: 0;
    right: 0;
  }
}

/* ========================================
 * MEDIA - no viewport overflow
 * ======================================== */

/*
 * height:auto + max-width:100% balloons huge brand assets (Stripe wordmark SVG,
 * SwiftSpot PNG/logo strips ~3k px wide) when bar rules lose the cascade.
 * Exclude brand logos and marketing covers; they set their own dimensions.
 * Note: [class*="logo-img"] covers host/renter mobile bars; checkout/direct-book
 * use __logo (not logo-img) and MUST stay listed or flex topbars blow up when
 * the brand slot is flex-grow (logged-in bookings icon in the bar).
 */
img:not(.swiftspot-stripe-wordmark):not(.swiftspot-logo):not(.swiftspot-logo-light):not(.swiftspot-logo-dark):not([class*="logo-img"]):not(.host-hero-brand-mark__logo):not(.host-landing-final-cta__logo):not(.checkout-topbar__logo):not(.direct-book-topbar__logo):not(.marketing-about-final-cta__logo):not(.homepage-listing-card__photo) {
  max-width: 100%;
  height: auto;
}

/* Cropped listing thumbnails: global img rules must not shrink absolute-fill covers */
img.listing-card-media__img,
img.listing-row-thumb__img {
  max-width: none;
}

video {
  max-width: 100%;
  height: auto;
}

iframe,
object,
embed {
  max-width: 100%;
}

/* ========================================
 * TEXT TRUNCATION - card/listing content only
 * Explicit classes; no [class*="..."] to avoid breaking section titles, subtitles, etc.
 * ======================================== */

@media (max-width: 640px) {
  .booking-card-title,
  .booking-card-title-large,
  .card-title,
  .spot-title,
  .listing-title,
  .billing-spot-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .address-text,
  .address-clickable,
  .booking-address,
  .spot-address,
  .billing-spot-address {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
}

/* ========================================
 * BUTTONS - avoid overflow only
 * ======================================== */

@media (max-width: 640px) {
  .book-btn,
  .btn-primary,
  a[role="button"].btn-primary {
    min-width: 0;
    max-width: 100%;
  }

  button.w-full,
  .w-full button.w-full {
    max-width: 100%;
    min-width: 0;
  }
}

/* ========================================
 * FORMS - constrain width, no layout override
 * ======================================== */

@media (max-width: 640px) {
  /* Form control sizing: device-compatibility.css (touch) + ios-safari-text-entry-late.css (WebKit) */
  :is(.form-group, .wizard-step, #checkout-form, #auth-modal) :is(input, textarea, select) {
    max-width: 100%;
    box-sizing: border-box;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    width: 100%;
    max-width: 100%;
  }
}

/* ========================================
 * TABLE WRAPPERS - scroll, don't squish
 * ======================================== */

@media (max-width: 640px) {
  .overflow-x-auto {
    max-width: 100%;
  }
}