/*
 * BLACK X responsive public + visual experience — Phase 4
 * Scope: public home, Blog/Discover, public property pages and public profiles.
 * Loads after Phase 1 foundation, Phase 2 core/admin and Phase 3 operations.
 * This layer deliberately does not change business logic, permissions or blog motion JS.
 */

:root {
  --bx-public-gap: clamp(0.7rem, 2.4vw, 1.1rem);
  --bx-public-panel-padding: clamp(0.9rem, 2.8vw, 1.45rem);
  --bx-public-edge: clamp(0.75rem, 3vw, 1.5rem);
}

/* Public surfaces must always be allowed to shrink inside the viewport. */
:where(
  #home.hero-section,
  #home .hero-grid,
  #home .hero-copy,
  #home .hero-visual,
  #home .dashboard-mockup,
  #about .stats-grid,
  #services .services-grid,
  #systems .systems-grid,
  #systems .route-grid,
  #tools .disciplines-grid,
  #contact .contact-grid,
  .blackx-discover-page,
  .bx-world-hero,
  .bx-world-hero__stage,
  .bx-world-hero__focus,
  .blackx-filter-shell,
  .blackx-filter-form,
  .blackx-filter-primary,
  .blackx-filter-advanced,
  .blackx-filter-advanced fieldset,
  .blackx-offers-panel,
  .blackx-offers-panel__shell,
  .blackx-offers-scroll-shell,
  .blackx-offers-viewport,
  .blackx-offers-rail,
  .blackx-company-strip,
  .blackx-featured-grid,
  .blackx-feed-grid,
  .blackx-post-detail__grid,
  .blackx-post-body,
  .blackx-post-aside,
  .blackx-blog-form-grid,
  .blackx-blog-form,
  .blackx-blog-form-preview,
  .blackx-quick-view__panel,
  .blackx-offers-grid-modal__panel,
  .public-property-hero,
  .public-property-hero .property-hero-grid,
  .public-filter-panel,
  .public-property-grid,
  .public-property-card,
  .public-detail-hero .property-detail-heading,
  .public-detail-hero + .property-section-tight .property-detail-layout,
  .public-detail-hero + .property-section-tight .property-detail-main,
  .public-detail-hero + .property-section-tight .property-detail-sidebar,
  .public-media-gallery,
  .public-media-documents,
  [data-testid="public-profile-page"] .profile-hero-grid,
  [data-testid="public-profile-page"] .profile-identity-card,
  [data-testid="public-profile-page"] + .section .activity-panel,
  [data-testid="public-profile-page"] + .section .profile-control-grid
) {
  min-inline-size: 0;
  max-inline-size: 100%;
}

:where(
  #home .hero-copy,
  .blackx-post-detail,
  .blackx-post-content,
  .blackx-publisher-page,
  .blackx-blog-form-page,
  .public-property-card-body,
  .public-detail-hero + .property-section-tight .property-content-panel,
  .public-detail-hero + .property-section-tight .property-location-panel,
  [data-testid="public-profile-page"] .profile-identity-card,
  [data-testid="public-profile-page"] + .section .activity-item
) {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Images/video should never define page width. */
:where(
  .blackx-discover-page img,
  .public-property-card img,
  .public-media-gallery img,
  .public-detail-hero + .property-section-tight .public-media-documents video,
  #home .dashboard-mockup img
) {
  max-inline-size: 100%;
}

/* Public home: preserve the composition while letting every panel collapse cleanly. */
#home .hero-grid > *,
#systems .systems-grid > *,
#contact .contact-grid > *,
#services .services-grid > *,
#tools .disciplines-grid > *,
#systems .route-grid > * {
  min-width: 0;
}

#home .dashboard-mockup,
#home .mockup-body,
#home .mockup-panel,
#systems .integration-hub {
  max-width: 100%;
  min-width: 0;
}

#home .hero-actions,
[data-testid="public-profile-page"] .action-row,
[data-testid="public-profile-page"] .meta-strip,
.public-property-hero .property-badge-row,
.public-detail-hero .property-badge-row,
.blackx-post-actions,
.blackx-form-actions,
.blackx-feed-card__actions,
.blackx-feed-card__footer,
.public-detail-hero + .property-section-tight .public-media-documents > div {
  flex-wrap: wrap;
  min-width: 0;
}

/* Blog filters: replace the brittle seven-column desktop row before it starts squeezing. */
@media (max-width: 1199px) {
  .blackx-discover-page .blackx-filter-primary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .blackx-discover-page .blackx-filter-primary > :where(button, a.btn) {
    width: 100%;
    min-width: 0;
  }

  .blackx-discover-page .blackx-filter-advanced {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blackx-discover-page .blackx-filter-advanced fieldset:last-child {
    grid-column: 1 / -1;
  }

  .blackx-discover-page .blackx-post-detail__grid,
  .blackx-discover-page .blackx-blog-form-grid {
    gap: clamp(1.1rem, 3vw, 2rem);
  }

  .public-property-grid {
    gap: clamp(1rem, 2.5vw, 1.5rem);
  }
}

/* Tablet / compact split panel. */
@media (max-width: 991px) {
  #home .hero-grid,
  #systems .systems-grid,
  #contact .contact-grid,
  .public-property-hero .property-hero-grid,
  .public-detail-hero .property-detail-heading,
  .public-detail-hero + .property-section-tight .property-detail-layout,
  [data-testid="public-profile-page"] .profile-hero-grid,
  .blackx-post-detail__grid,
  .blackx-blog-form-grid,
  .blackx-quick-view-content {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #home .hero-visual {
    width: min(100%, 42rem);
    justify-self: center;
  }

  .blackx-discover-page .blackx-filter-primary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blackx-discover-page .blackx-filter-advanced {
    grid-template-columns: minmax(0, 1fr);
  }

  .blackx-discover-page .blackx-filter-advanced fieldset:last-child {
    grid-column: auto;
  }

  .blackx-offers-panel__shell,
  .blackx-offers-scroll-shell,
  .blackx-vertical-feed-shell {
    width: min(100%, calc(100vw - (var(--bx-public-edge) * 2))) !important;
    max-width: 100%;
  }

  .blackx-offers-section-head,
  .blackx-discover-section-head {
    gap: var(--bx-public-gap);
  }

  .public-detail-hero .property-price-card,
  .public-property-note,
  [data-testid="public-profile-page"] .profile-identity-card,
  .blackx-blog-form-preview,
  .blackx-post-aside {
    width: 100%;
    max-width: none;
  }

  .public-filter-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .public-filter-panel > .btn {
    width: 100%;
  }

  .public-detail-hero + .property-section-tight .property-spec-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .public-media-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* World hero and visual rails: keep visuals immersive without covering controls. */
@media (max-width: 991px) {
  .bx-world-hero {
    min-height: clamp(34rem, calc(100dvh - var(--header-height, 72px)), 48rem);
  }

  .bx-world-hero__focus {
    padding-inline: var(--bx-public-edge);
  }

  .bx-world-hero__focus h1 {
    max-width: min(94vw, 12ch);
    white-space: normal;
    text-wrap: balance;
  }

  .bx-world-hero__navigation-copy {
    max-width: calc(100% - (var(--bx-public-edge) * 2));
    padding-inline: 0;
  }

  .blackx-company-strip,
  .blackx-offers-rail,
  .blackx-featured-grid.blackx-offers-rail {
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .blackx-company-strip:focus-visible,
  .blackx-offers-rail:focus-visible {
    outline: 2px solid rgba(224, 190, 121, 0.7);
    outline-offset: 3px;
  }
}

/* Phones. */
@media (max-width: 767px) {
  #home.hero-section {
    min-height: auto;
    padding-top: max(calc(var(--header-height, 72px) + 1rem), 5rem);
  }

  #home .hero-copy h1,
  .page-title,
  .blackx-form-hero h1,
  .blackx-post-detail__hero h1 {
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .hero-actions > :where(.btn, a.btn, button),
  .blackx-form-actions > :where(.btn, a.btn, button),
  .blackx-post-actions > :where(.btn, a.btn, button),
  .public-filter-panel > :where(.btn, a.btn, button),
  .public-media-documents > div > :where(.btn, a.btn, button) {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }

  .blackx-discover-page .blackx-filter-shell .container,
  .blackx-discover-page .bx-blog-page-actions,
  .blackx-discover-page .blackx-offers-panel .container,
  .blackx-discover-page .blackx-vertical-feed-section .container {
    padding-inline: var(--bx-public-edge);
  }

  .blackx-discover-page .blackx-filter-form {
    padding: var(--bx-public-panel-padding);
  }

  .blackx-discover-page .blackx-filter-primary,
  .public-filter-panel,
  .public-detail-hero + .property-section-tight .property-spec-grid,
  .public-media-gallery,
  [data-testid="public-profile-page"] + .section .profile-control-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .blackx-discover-page .blackx-filter-primary > :where(button, a.btn),
  .blackx-discover-page .blackx-view-toggle__button {
    min-height: 44px;
  }

  .blackx-view-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .blackx-view-toggle__button {
    min-width: 0;
    text-align: center;
  }

  .bx-world-hero {
    min-height: clamp(30rem, calc(100dvh - var(--header-height, 58px)), 43rem);
  }

  .bx-world-hero__focus h1 {
    font-size: clamp(2.6rem, 15vw, 5rem);
    line-height: 0.92;
  }

  .bx-world-hero__navigation-copy {
    inset-inline: var(--bx-public-edge);
    bottom: max(0.8rem, env(safe-area-inset-bottom));
    display: grid;
    gap: 0.2rem;
    font-size: clamp(0.52rem, 2.5vw, 0.68rem);
    line-height: 1.25;
  }

  .blackx-offers-panel__shell,
  .blackx-offers-scroll-shell,
  .blackx-vertical-feed-shell {
    width: 100% !important;
    border-radius: clamp(1rem, 5vw, 1.4rem);
  }

  .blackx-offers-section-head,
  .blackx-discover-section-head {
    flex-direction: column;
    align-items: stretch;
  }

  .blackx-offers-card-count {
    align-self: flex-start;
    max-width: 100%;
    white-space: normal;
  }

  .blackx-offers-panel__footer[data-offers-controls] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .blackx-offers-panel__footer[data-offers-controls] .blackx-offers-control {
    width: 100%;
    min-width: 0;
  }

  .blackx-company-card,
  .blackx-feed-card,
  .blackx-property-chip,
  .blackx-publisher-card {
    max-width: 100%;
  }

  .blackx-quick-view,
  .blackx-offers-grid-modal {
    padding:
      max(0.5rem, env(safe-area-inset-top))
      max(0.5rem, env(safe-area-inset-right))
      max(0.5rem, env(safe-area-inset-bottom))
      max(0.5rem, env(safe-area-inset-left));
  }

  .blackx-quick-view__panel,
  .blackx-offers-grid-modal__panel {
    width: 100% !important;
    max-width: 100%;
    height: auto;
    max-height: calc(100dvh - 1rem);
    margin: 0 auto !important;
    border-radius: clamp(0.9rem, 4vw, 1.25rem);
  }

  .blackx-offers-grid-modal__panel {
    height: calc(100dvh - 1rem);
  }

  .blackx-quick-view__close,
  .blackx-offers-grid-modal__close {
    min-width: 44px;
    min-height: 44px;
    margin: 0.5rem;
  }

  .blackx-quick-view-content__media {
    min-height: clamp(13rem, 56vw, 20rem);
  }

  .blackx-quick-view-content__body,
  .blackx-offers-grid-modal__body,
  .blackx-offers-grid-modal__head {
    padding-inline: var(--bx-public-panel-padding);
  }

  .blackx-post-detail__hero,
  .blackx-form-hero {
    padding-top: max(calc(var(--header-height, 72px) + 1rem), 5rem);
  }

  .blackx-post-aside,
  .blackx-blog-form-preview,
  .public-detail-hero + .property-section-tight .property-content-panel,
  .public-detail-hero + .property-section-tight .property-location-panel,
  .public-detail-hero + .property-section-tight .public-media-documents,
  [data-testid="public-profile-page"] .profile-identity-card,
  [data-testid="public-profile-page"] + .section .activity-panel {
    padding: var(--bx-public-panel-padding);
  }

  .public-property-hero {
    min-height: auto;
    padding-top: max(calc(var(--header-height, 72px) + 1rem), 5rem);
    padding-bottom: clamp(2rem, 9vw, 3.4rem);
  }

  .public-property-note {
    max-width: none;
    border-inline-start: 1px solid rgba(200, 162, 90, 0.44);
    border-left: 0;
  }

  .public-property-card-body {
    padding: var(--bx-public-panel-padding);
  }

  .public-property-media,
  .public-detail-media {
    min-height: clamp(12rem, 62vw, 19rem);
  }

  .public-gallery-item,
  .public-gallery-item.is-primary {
    grid-column: auto;
    min-height: clamp(14rem, 68vw, 22rem);
  }

  .public-gallery-item figcaption {
    padding: 0.9rem;
  }

  .public-media-documents video {
    max-height: min(70dvh, 32rem);
  }

  .property-pagination,
  [data-testid="public-profile-page"] .meta-strip,
  [data-testid="public-profile-page"] .action-row,
  [data-testid="public-profile-page"] + .section .activity-item {
    max-width: 100%;
  }

  .property-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
  }

  [data-testid="public-profile-page"] .profile-identity-card :where(p, h2),
  [data-testid="public-profile-page"] + .section .activity-item :where(strong, p, small, a) {
    overflow-wrap: anywhere;
  }
}

/* Very narrow phones: remove accidental minimums and keep tap targets accessible. */
@media (max-width: 479px) {
  #home .hero-grid,
  .blackx-post-detail__grid,
  .blackx-blog-form-grid,
  .public-detail-hero + .property-section-tight .property-detail-layout,
  [data-testid="public-profile-page"] .profile-hero-grid {
    gap: 1rem;
  }

  #home .dashboard-mockup,
  .blackx-filter-form,
  .blackx-offers-panel__shell,
  .public-property-card,
  .public-detail-hero + .property-section-tight .property-content-panel,
  .public-detail-hero + .property-section-tight .property-location-panel,
  [data-testid="public-profile-page"] .profile-identity-card,
  [data-testid="public-profile-page"] + .section .activity-panel {
    border-radius: min(1rem, 4vw);
  }

  .bx-world-hero__focus h1 {
    font-size: clamp(2.3rem, 14.5vw, 4.2rem);
  }

  .blackx-offers-control,
  .blackx-view-toggle__button,
  .blackx-discover-page .btn,
  .public-property-card .btn,
  .public-filter-panel .btn,
  [data-testid="public-profile-page"] .btn,
  [data-testid="public-profile-page"] + .section .btn {
    min-height: 44px;
    min-width: 0;
    max-width: 100%;
  }
}

/* Short landscape phones/tablets need vertical containment as much as width containment. */
@media (max-height: 620px) and (orientation: landscape) {
  #home.hero-section {
    min-height: auto;
    padding-block: max(calc(var(--header-height, 58px) + 0.75rem), 4.5rem) 2rem;
  }

  .bx-world-hero {
    min-height: max(25rem, calc(100dvh - var(--header-height, 58px)));
  }

  .bx-world-hero__focus h1 {
    font-size: clamp(2.4rem, 9vw, 4.4rem);
  }

  .bx-world-hero__navigation-copy {
    bottom: max(0.45rem, env(safe-area-inset-bottom));
  }

  .blackx-quick-view__panel,
  .blackx-offers-grid-modal__panel {
    max-height: calc(100dvh - 0.75rem);
  }
}

/* Coarse pointers: visual controls remain comfortably tappable. */
@media (pointer: coarse) {
  .blackx-discover-page :where(button, .btn, .blackx-view-toggle__button),
  .public-property-hero :where(button, .btn),
  .public-property-card :where(button, .btn),
  .public-detail-hero :where(button, .btn),
  [data-testid="public-profile-page"] :where(button, .btn),
  [data-testid="public-profile-page"] + .section :where(button, .btn) {
    min-height: 44px;
  }

  .blackx-company-strip,
  .blackx-offers-rail,
  .blackx-featured-grid.blackx-offers-rail {
    scroll-snap-type: inline proximity;
    touch-action: pan-x pan-y;
  }
}

/* Motion accessibility: layout must remain complete when motion is disabled. */
@media (prefers-reduced-motion: reduce) {
  .blackx-discover-page .bx-world-hero__plane,
  .blackx-discover-page .blackx-company-card,
  .blackx-discover-page .blackx-feed-card {
    scroll-behavior: auto !important;
  }
}