/*
  ============================================
  ZEDSTAY — Shared responsive layer
  ============================================
  Loaded last. Visual language lives in the mobile-first
  base styles. This file handles overflow, safe-area, and
  phone-only density (hidden labels, stacked grids).
  Wider screens expand layout; they do not restyle components.
*/

html {
  overflow-x: clip;
  max-width: 100%;
  overscroll-behavior-x: none;
}

body {
  overflow-x: clip;
  overflow-wrap: break-word;
  max-width: 100%;
  overscroll-behavior-x: none;
}

img,
video,
iframe,
canvas {
  max-width: 100%;
}

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

.property-card,
.featured__grid > *,
.catalogue-scroller,
.catalogue-rows,
.host-stat-card,
.admin-stat-card,
.host-listing-card,
.booking-card-item,
.province-card,
.location-dataset-card,
.categories,
.categories__scroll,
.gallery__thumbnails--scroll,
.header,
.header__inner,
.province-picker,
.featured__grid,
.related__grid {
  min-width: 0;
}

.featured,
.recently-viewed,
.gallery,
.property-layout,
.related {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

.catalogue-track {
  min-width: 100%;
}

.catalogue-page {
  min-width: 100%;
}

@supports (width: 100cqw) {
  .catalogue-page {
    min-width: 100cqw;
    max-width: 100cqw;
  }
}

.catalogue-scroller,
.categories__scroll,
.gallery__thumbnails--scroll {
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}

.property-card__title,
.property-card__location,
.host-header__title,
.page-hero__title,
.admin-table td,
.profile-details__item,
.host-profile-details__item {
  overflow-wrap: anywhere;
}

/* ---------- Tablet (768–1023) ---------- */
@media (max-width: 1023px) {
  .page-hero__title,
  .host-header__title {
    font-size: clamp(1.35rem, 4vw, var(--font-size-2xl));
  }

  .host-edit-layout {
    grid-template-columns: 1fr;
  }
}

/* ---------- Mobile + tablet phones (<=767) ---------- */
@media (max-width: 767px) {
  :root {
    --header-height: 3.75rem;
  }

  .header {
    height: auto;
    min-height: calc(var(--header-height) + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
  }

  .header__inner {
    height: var(--header-height);
    min-width: 0;
    max-width: 100%;
    gap: 0.4rem;
    padding: 0 max(0.75rem, env(safe-area-inset-right)) 0 max(0.75rem, env(safe-area-inset-left));
  }

  .header__start,
  .header__actions {
    min-width: 0;
  }

  .header__actions {
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 0.25rem;
  }

  .logo {
    flex: 0 1 auto;
    flex-shrink: 1;
    min-width: 0;
  }

  .logo__text {
    font-size: var(--font-size-base);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header__nav-text,
  .region-label {
    display: none;
  }

  .region-select,
  .province-picker__trigger {
    flex: 1 1 6.75rem;
    width: auto;
    max-width: min(9rem, 42vw);
    min-width: 0;
    padding-left: 0.55rem;
    padding-right: 0.45rem;
  }

  .menu-btn,
  .header__nav-link,
  .property-back-link {
    flex-shrink: 0;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.35rem;
  }

  .property-back-link {
    max-width: min(9.5rem, 38vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hero__content,
  .search-bar,
  .search-bar--simple {
    max-width: 100%;
  }

  .hero__eyebrow {
    display: block;
    box-sizing: border-box;
    width: fit-content;
    max-width: 100%;
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    line-height: 1.35;
    padding: 0.22rem 0.55rem;
    margin-bottom: 0.35rem;
    white-space: normal;
    overflow: visible;
  }

  .hero__title {
    font-size: clamp(1.45rem, 7.2vw, 1.85rem);
  }

  .hero__subtitle,
  .hero__trust {
    display: none;
    margin: 0;
    padding: 0;
    height: 0;
    overflow: hidden;
  }

  .search-bar__segment {
    padding: 0.15rem 0.45rem;
    gap: 0.05rem;
    min-width: 0;
  }

  .search-bar__label {
    font-size: 0.65rem;
    line-height: 1.1;
  }

  .host-launch-cta h2 {
    font-size: 1.25rem;
    line-height: 1.22;
    margin-bottom: 0.35rem;
  }

  .host-launch-cta > div > p:last-child {
    font-size: 0.875rem;
    line-height: 1.45;
  }

  /* Homepage-only: collapse destination list; hide brochure sections. */
  body:has(.hero) .seo-location-links {
    margin-top: var(--space-md);
    padding: 0.75rem 0.9rem;
  }

  body:has(.hero) .seo-location-links__title {
    font-size: 1.05rem;
    line-height: 1.25;
  }

  body:has(.hero) .seo-location-links__toggle {
    display: inline-flex;
    align-items: center;
  }

  body:has(.hero) .seo-location-links:not(.is-expanded) .seo-location-links__header {
    margin-bottom: 0;
  }

  body:has(.hero) .footer__grid {
    display: none;
  }

  body:has(.hero) .footer {
    padding: var(--space-md);
  }

  body:has(.hero) .footer__copyright {
    margin: 0;
    text-align: center;
  }

  .main,
  .favorites-page,
  .property-page,
  .auth-page,
  .trial-preview {
    max-width: 100%;
    min-width: 0;
  }

  .featured,
  .launch-section,
  .host-launch-cta,
  .recently-viewed,
  .page-content,
  .page-hero {
    max-width: 100%;
    min-width: 0;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .recently-viewed {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .launch-section,
  .host-launch-cta,
  .listing-form,
  .auth-card,
  .form-section,
  .empty-state,
  .placeholder-card {
    padding: var(--space-md);
  }

  .launch-section,
  .host-launch-cta {
    width: auto;
    margin-left: var(--space-md);
    margin-right: var(--space-md);
  }

  .footer {
    margin-bottom: 0;
    padding: var(--space-xl) var(--space-md) var(--space-lg);
  }

  .bottom-nav {
    height: auto;
    min-height: var(--bottom-nav-height);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .bottom-nav__item {
    flex: 1 1 0;
    min-width: 0;
    padding: var(--space-sm) 0.35rem;
  }

  .property-card,
  .related-card {
    width: 100%;
    max-width: 100%;
  }

  .property-card__location,
  .property-card__rating {
    white-space: normal;
  }

  .catalogue-page .property-card__location,
  .catalogue-page .property-card__rating {
    white-space: nowrap;
  }

  .featured__empty {
    padding: 1.25rem 1rem;
    margin-top: 0.25rem;
  }

  .property-card__footer,
  .booking-card-item__header,
  .profile-card__header,
  .profile-details__item,
  .host-profile-details__item,
  .host-modal__actions,
  .report-modal__actions,
  .zedstay-confirm__actions,
  .messaging-admin-tabs,
  .admin-sort-bar,
  .admin-provider-list li {
    flex-wrap: wrap;
  }

  .property-card__price,
  .booking-modal__btn,
  .host-launch-cta__button {
    min-width: 0;
    max-width: 100%;
  }

  .host-launch-cta__button {
    white-space: normal;
    text-align: center;
  }

  .booking-modal,
  .host-modal,
  .report-modal {
    padding: max(var(--space-sm), env(safe-area-inset-top)) var(--space-sm) max(var(--space-sm), env(safe-area-inset-bottom));
    align-items: flex-end;
  }

  .booking-modal__dialog,
  .host-modal__dialog,
  .report-modal__dialog {
    max-height: min(92dvh, calc(100vh - 1rem));
    padding: var(--space-md);
    width: 100%;
  }

  .booking-modal__btn {
    min-width: 0;
    min-height: 2.75rem;
  }

  .form-input,
  .form-select,
  .auth-form input,
  .auth-form select,
  .auth-form textarea,
  .booking-card__input,
  .search-bar__input,
  .region-select {
    font-size: 1rem;
  }

  .amenity-checkboxes,
  .amenities-grid {
    grid-template-columns: 1fr;
  }

  .amenity-checkbox,
  .form-checkbox,
  .host-tags-grid label {
    min-width: 0;
  }

  .host-stats-grid,
  .admin-stats-grid,
  .host-analytics-grid,
  .host-quick-links,
  .province-grid,
  .auth-role-options,
  .gallery__thumbnails {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .host-stat-card,
  .admin-stat-card {
    padding: var(--space-md);
    min-height: 0;
  }

  .host-stat-card__value,
  .admin-stat-card .host-stat-card__value {
    font-size: clamp(1.15rem, 5vw, var(--font-size-xl));
  }

  .admin-user-detail > div {
    grid-template-columns: 1fr;
  }

  .admin-search,
  .payment-panel {
    padding: var(--space-md);
  }

  .nearby-place-row {
    grid-template-columns: 1fr;
  }

  .admin-table-wrap,
  .payment-table-wrap,
  .location-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .admin-property-card,
  .admin-moderation-filters,
  .admin-property-card__actions {
    min-width: 0;
  }

  .admin-property-card__btn,
  .admin-property-card__btn--approve,
  .admin-property-card__btn--reject {
    flex: 1 1 100%;
    width: 100%;
  }

  .host-modal__dialog {
    max-width: min(100%, calc(100% - 0.5rem));
  }

  .property-layout,
  .gallery,
  .related,
  .booking-card,
  .booking-card__inner {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  .property-info__title {
    font-size: clamp(1.35rem, 6.5vw, 1.75rem);
  }

  .property-info__header,
  .host-actions,
  .share-actions {
    min-width: 0;
  }

  .host-action-btn,
  .share-action-btn,
  .auth-form__submit {
    min-height: 2.75rem;
    max-width: 100%;
  }

  .favorites-hero {
    padding: var(--space-lg) var(--space-md) var(--space-sm);
    text-align: left;
  }

  .favorites-hero__title {
    font-size: clamp(1.35rem, 6vw, 1.75rem);
  }

  .auth-card {
    max-width: 100%;
  }

  .location-dataset-grid,
  .seo-location-links__list,
  .admin-stats-grid--overview,
  .admin-quick-links__grid,
  .admin-quick-actions__grid,
  .admin-moderation-grid,
  .launch-steps {
    grid-template-columns: 1fr;
  }

  .admin-search__checkbox {
    white-space: normal;
  }

  .messaging-layout {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    gap: var(--space-md);
  }

  .messaging-layout__list {
    max-height: min(40dvh, 18rem);
  }

  .messaging-layout__thread {
    min-height: 18rem;
    height: min(62dvh, 28rem);
  }

  .map-placeholder,
  .map-provider-placeholder {
    width: 100%;
    max-width: 100%;
  }

  .host-dashboard-main {
    padding: var(--space-md);
    padding-bottom: calc(var(--space-xl) + var(--bottom-nav-height));
  }

  .auth-page {
    padding: var(--space-lg) var(--space-md) var(--space-xl);
    align-items: flex-start;
  }

  .notification-item {
    padding: var(--space-md);
  }

  /* Keep these after other mobile layout rules so they win. */
  body:has(.hero) .seo-location-links:not(.is-expanded) .seo-location-links__list {
    display: none;
  }

  body:has(.hero) .launch-section {
    display: none;
  }
}

/* ---------- Small phones (<=479) ---------- */
@media (max-width: 479px) {
  .header__nav-text,
  .region-label,
  .region-label__text {
    display: none;
  }

  .region-select,
  .province-picker__trigger {
    max-width: min(8.5rem, 40vw);
  }

  .host-future-grid,
  .host-tags-grid,
  .host-analytics-grid {
    grid-template-columns: 1fr;
  }

  .booking-card-item__details {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .province-card {
    padding: var(--space-md) var(--space-sm);
  }

  .page-hero {
    padding-top: var(--space-lg);
    text-align: left;
  }
}

/* ---------- Very narrow (~320–359) ---------- */
@media (max-width: 359px) {
  .logo__text {
    display: none;
  }

  .host-stats-grid,
  .admin-stats-grid,
  .province-grid,
  .auth-role-options,
  .gallery__thumbnails,
  .host-quick-links {
    grid-template-columns: 1fr;
  }

  .region-select,
  .province-picker__trigger {
    max-width: min(8.25rem, 44vw);
  }

  .bottom-nav__item {
    font-size: 0.65rem;
  }
}