/**
 * Desktop-only layout — mobile (max-width 767) untouched.
 * Marker: BN_DESKTOP_FULL_V10
 *
 * App shell was capped at ~720px (phone column). On desktop we open the
 * canvas to full viewport with professional content widths per surface.
 */

@media (min-width: 768px) {
  :root {
    --bn-max-app: 100%;
    --bn-desktop-canvas: min(1280px, 96vw);
    --bn-desktop-content: min(1120px, 94vw);
    --bn-desktop-feed: min(920px, 92vw);
    --bn-desktop-gutter: clamp(16px, 2.5vw, 32px);
  }

  html,
  body.app-shell {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  body.app-shell .app-header,
  body.app-shell .app-header--luxury {
    padding-inline: var(--bn-desktop-gutter) !important;
  }

  body.app-shell .app-header-inner,
  body.app-shell .app-header-inner--app,
  body.app-shell .bottom-nav-inner,
  .global-auth-bottom-nav .bottom-nav-inner {
    max-width: var(--bn-desktop-canvas) !important;
    width: 100% !important;
    margin-inline: auto !important;
  }

  body.app-shell .main-content {
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: var(--bn-desktop-gutter) !important;
  }

  body.app-shell .bn-app-page,
  body.app-shell .bn-feed-page,
  body.app-shell .bn-explore-page,
  body.app-shell .bn-doctors-page,
  body.app-shell .doctors-page,
  body.app-shell .bn-search-page,
  body.app-shell .bn-profile-page,
  body.app-shell .doctor-profile-page,
  body.app-shell .clinic-profile,
  body.app-shell .bn-appointments-page,
  body.app-shell .appointments-page,
  body.app-shell .settings-layout,
  body.app-shell .settings-layout--lux {
    max-width: var(--bn-desktop-content) !important;
    width: 100% !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  /* Feed: readable but not phone-narrow */
  body.app-shell .bn-feed-page {
    max-width: var(--bn-desktop-feed) !important;
  }

  /* Explore grid */
  body.app-shell .bn-explore-page {
    max-width: min(1180px, 96vw) !important;
  }

  body.app-shell .bn-explore-page #exploreMasonry,
  body.app-shell .bn-explore-page .explore-app-grid.iconic-bento,
  body.app-shell .bn-explore-page .explore-app-grid {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body.app-shell .bn-explore-page .explore-app-card,
  body.app-shell .bn-explore-page .bn-explore-card {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 160px !important;
    height: auto !important;
    transform: none !important;
  }

  body.app-shell .bn-explore-page .explore-card-media {
    aspect-ratio: 4 / 5 !important;
    min-height: 160px !important;
    height: auto !important;
  }

  body.app-shell .bn-explore-page .explore-card-media img,
  body.app-shell .bn-explore-page .explore-card-media video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Bottom dock — full professional bar, not a 520px phone pill */
  body.app-shell .bottom-nav.bottom-nav--glass,
  body.app-shell .global-auth-bottom-nav.bottom-nav--glass {
    left: 0 !important;
    right: 0 !important;
    inset-inline: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    border-radius: 0 !important;
    padding-inline: var(--bn-desktop-gutter) !important;
  }

  body.app-shell .bottom-nav.bottom-nav--glass .bottom-nav-inner,
  body.app-shell .global-auth-bottom-nav.bottom-nav--glass .bottom-nav-inner {
    max-width: var(--bn-desktop-canvas) !important;
  }

  /* Multi-column surfaces */
  body.app-shell .doctors-search-panel,
  body.app-shell .bn-doctors-page .doctors-list,
  body.app-shell .bn-search-page .search-results {
    max-width: none !important;
  }

  body.app-shell .settings-layout:not(.settings-layout--lux) {
    max-width: min(1100px, 94vw) !important;
    grid-template-columns: 240px minmax(0, 1fr) !important;
  }

  body.app-shell .settings-layout--lux {
    max-width: min(960px, 92vw) !important;
  }

  /* Chat / messages: wide canvas with readable column */
  body.app-shell.bn-chat-active .main-content,
  body.app-shell:has(.bn-chat-page) .main-content,
  body.app-shell:has(.messages-page) .main-content {
    max-width: min(1100px, 96vw) !important;
    margin-inline: auto !important;
  }
}

@media (min-width: 1024px) {
  :root {
    --bn-desktop-canvas: min(1360px, 94vw);
    --bn-desktop-content: min(1200px, 92vw);
    --bn-desktop-feed: min(980px, 88vw);
  }

  body.app-shell .bn-explore-page #exploreMasonry,
  body.app-shell .bn-explore-page .explore-app-grid.iconic-bento,
  body.app-shell .bn-explore-page .explore-app-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  body.app-shell .explore-provider-rail__scroller {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(200px, 240px) !important;
    gap: 12px !important;
  }

  /* Doctors / appointments two-up where markup allows */
  body.app-shell .bn-doctors-page,
  body.app-shell .doctors-page {
    max-width: min(1200px, 94vw) !important;
  }

  body.app-shell .bn-profile-page,
  body.app-shell .doctor-profile-page,
  body.app-shell .clinic-profile {
    max-width: min(1080px, 92vw) !important;
  }

  body.app-shell .appt-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1280px) {
  body.app-shell .bn-explore-page #exploreMasonry,
  body.app-shell .bn-explore-page .explore-app-grid.iconic-bento,
  body.app-shell .bn-explore-page .explore-app-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1440px) {
  :root {
    --bn-desktop-canvas: min(1440px, 92vw);
    --bn-desktop-content: min(1280px, 90vw);
  }
}

/* Publisher hub — compact 3-option layout (all breakpoints) */
.dp-pub-hub__grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

@media (min-width: 520px) {
  .dp-pub-hub__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}