/* ==========================================================================
   JBN GLOBAL - RESPONSIVE ALL SCREENS
   Additive layer only.
   Desktop composition is intentionally preserved.
   On smaller screens we preserve DOM order and only scale, wrap or stack
   when the available width makes the original layout impossible.
   ========================================================================== */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body,
#root {
  max-width: 100%;
}

body {
  overflow-x: clip;
}

img,
video,
canvas,
picture {
  max-width: 100%;
  height: auto;
}

iframe {
  max-width: 100%;
}

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

:is(h1,h2,h3,h4,h5,h6,p,a,button,label,span,strong,small,td,th) {
  overflow-wrap: break-word;
}

/* Tables never force the whole page wider than the viewport. */
:is(.admin-table-wrap,.b44-admin-table-wrap,.overflow-x-auto,.table-responsive) {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Dialogs keep their visual position but are prevented from leaving viewport. */
:is(.site-dialog-panel,.assessment-modal-panel,[role="dialog"]) {
  max-width: calc(100vw - 1.5rem);
  max-height: calc(100dvh - 1.5rem);
  overflow: auto;
}

/* --------------------------------------------------------------------------
   1366 / small laptop
   -------------------------------------------------------------------------- */
@media (max-width: 1366px) {
  :is(
    .client-account-container,
    .provider-workspace-container,
    .portal-entry-container,
    .welcome-kit-container,
    .careers-section-shell,
    .assessment-v2-flow-shell,
    .assessment-v2-profile-summary,
    .organizations-section,
    .provider-recruit-section,
    .provider-network-section,
    .provider-matching-section,
    .provider-roles-section,
    .provider-safety-section
  ) {
    max-width: calc(100% - 2rem);
  }

  :is(.ui-panel,.react-card,.ui-provider-card,.b44-admin-card,.b44-admin-stat) {
    min-width: 0;
  }

  .b44-admin-main,
  .admin-main,
  .admin-portal-content {
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   1180 / laptop-tablet transition
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .ui-page-title {
    gap: 1rem;
  }

  :is(.ui-content-grid,.react-grid,.assessment-grid,.home-platform-grid,.home-life-map-grid) > * {
    min-width: 0;
  }

  .ui-provider-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .react-metrics,
  .admin-kpi-grid,
  .admin-kpi-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .admin-command-grid,
  .admin-workspace-grid,
  .admin-provider-readiness-grid,
  .admin-quality-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .assessment-v2-process-grid,
  .assessment-v2-trust-grid,
  .assessment-v2-pathway-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .b44-admin-stat-grid,
  .b44-admin-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* --------------------------------------------------------------------------
   991 / tablet
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  body {
    min-width: 0;
  }

  /* Public header: preserve order; only allow available space to shrink. */
  body.site-shell:not(.admin-shell) [data-site-header] .nav-shell {
    width: calc(100% - 1.25rem) !important;
    max-width: none !important;
  }

  body.site-shell:not(.admin-shell) [data-site-header] .site-brand {
    min-width: 0;
  }

  body.site-shell:not(.admin-shell) [data-site-header] .site-brand > img {
    max-width: min(100%, 10rem);
    height: auto;
  }

  /* Public hero keeps copy/image sequence; grid simply becomes one track. */
  :is(
    .jbn-photo-hero__layout,
    .careers-hero,
    .faq-hero,
    .client-account-hero__layout,
    .client-account-profile__layout,
    .portal-entry-section,
    .home-platform-grid
  ) {
    min-width: 0;
  }

  .jbn-photo-hero__layout,
  .careers-hero,
  .faq-hero {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Auth keeps visual first and form second; no reordering. */
  .react-auth {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .react-auth__visual,
  .react-auth__form {
    min-width: 0;
  }

  /* Portal / dashboard content */
  .ui-content-grid.two,
  .ui-content-grid.booking,
  .ui-readiness-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ui-provider-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ui-document-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ui-message-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .ui-message-list {
    max-height: 18rem;
    overflow-y: auto;
  }

  /* Provider workspace navigation stays in the same zone but can scroll. */
  .provider-workspace-nav {
    max-width: 100%;
  }

  .provider-workspace-nav__links,
  .provider-workspace-nav__utilities {
    min-width: 0;
  }

  /* Client portal navigation */
  .client-portal-nav {
    max-width: 100%;
  }

  .client-portal-nav__primary,
  .client-portal-nav__actions {
    min-width: 0;
  }

  /* Admin: no element reordering. Sidebar uses its existing mobile behavior. */
  .b44-admin-shell,
  .admin-portal-shell,
  .admin-workspace {
    min-width: 0;
  }

  .b44-admin-main,
  .admin-main,
  .admin-portal-content {
    width: 100%;
    max-width: 100%;
  }

  .admin-modern-table,
  .b44-admin-table,
  table {
    max-width: none;
  }

  /* Assessment */
  .assessment-v2-hero-grid,
  .assessment-v2-form-grid,
  .assessment-v2-overview,
  .assessment-v2-result-snapshot,
  .assessment-v2-result-connection {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .assessment-v2-process-grid,
  .assessment-v2-trust-grid,
  .assessment-v2-pathway-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .assessment-v2-options,
  .assessment-v2-scale-options {
    min-width: 0;
  }

  /* Forms */
  .ui-form-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .react-form,
  .admin-inline-form,
  .admin-training-review-form,
  .client-account-profile__form {
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   767 / phone
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --jbn-mobile-edge: .75rem;
  }

  body {
    overflow-x: hidden;
  }

  main,
  section,
  article,
  aside,
  header,
  footer,
  nav {
    min-width: 0;
  }

  /* Generic section spacing: does not move sections. */
  :is(
    .client-account-container,
    .provider-workspace-container,
    .portal-entry-container,
    .welcome-kit-container,
    .careers-section-shell,
    .assessment-v2-flow-shell,
    .assessment-v2-profile-summary,
    .jbn-under-hero-card-section
  ) {
    width: calc(100% - 1rem) !important;
    max-width: calc(100% - 1rem) !important;
  }

  /* Public hero */
  .site-shell:not(.admin-shell) .jbn-photo-hero {
    width: calc(100% - 1rem) !important;
    max-width: calc(100% - 1rem) !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .site-shell:not(.admin-shell) .jbn-photo-hero h1,
  .careers-hero h1,
  .faq-hero h1,
  .client-account-hero__title {
    font-size: clamp(2rem, 9vw, 3rem) !important;
    line-height: 1.05;
  }

  /* Buttons stay in their current sequence. */
  .jbn-photo-hero__actions,
  .home-platform-actions,
  .assessment-v2-hero-actions,
  .assessment-v2-resume-actions,
  .assessment-v2-final-actions,
  .site-dialog-actions {
    gap: .65rem;
    max-width: 100%;
  }

  :is(
    .jbn-photo-hero__actions,
    .assessment-v2-hero-actions,
    .assessment-v2-resume-actions,
    .assessment-v2-final-actions
  ) > :is(a,button) {
    max-width: 100%;
  }

  /* Content grids: same DOM positions, one column when required. */
  .ui-provider-grid,
  .react-metrics,
  .admin-kpi-grid,
  .admin-kpi-grid--four,
  .admin-command-grid,
  .admin-workspace-grid,
  .admin-provider-readiness-grid,
  .admin-quality-grid,
  .assessment-v2-process-grid,
  .assessment-v2-trust-grid,
  .assessment-v2-pathway-grid,
  .home-platform-cards,
  .home-life-map-grid,
  .grid-cols-2,
  .grid-cols-3 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Cards */
  :is(
    .ui-panel,
    .ui-provider-card,
    .react-card,
    .admin-data-card,
    .admin-workspace-card,
    .admin-readiness-card,
    .b44-admin-card,
    .b44-admin-stat,
    .assessment-v2-card,
    .career-application-card,
    .careers-job-card
  ) {
    max-width: 100%;
    min-width: 0;
  }

  /* Page headings */
  .ui-page-title {
    align-items: stretch;
  }

  .ui-page-title h1 {
    font-size: clamp(2rem, 9vw, 2.7rem);
  }

  .ui-page-title__actions {
    max-width: 100%;
  }

  .ui-page-title__actions > * {
    min-width: 0;
  }

  /* Portal sidebar / nav keeps its original location, horizontal scrolling only. */
  .portal-sidebar {
    max-width: 100%;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .portal-sidebar > * {
    flex: 0 0 auto;
  }

  .provider-workspace-nav,
  .client-portal-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .provider-workspace-nav__links,
  .provider-workspace-nav__utilities,
  .client-portal-nav__primary,
  .client-portal-nav__actions {
    flex-wrap: nowrap;
  }

  /* Messages */
  .ui-message-layout {
    min-height: 0;
  }

  .ui-conversation {
    min-width: 0;
  }

  .ui-bubble {
    max-width: 88%;
  }

  /* Booking */
  .ui-booking-card {
    min-width: 0;
  }

  .ui-booking-info {
    min-width: 0;
  }

  .ui-time-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Documents */
  .ui-document-card {
    min-width: 0;
  }

  /* Payment/package surfaces remain informational and fit viewport. */
  .ui-payment-method,
  .payment-plans,
  .ui-pay-tabs {
    max-width: 100%;
  }

  .payment-plans {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Assessment */
  .assessment-v2-page,
  .assessment-v2-body,
  .assessment-v2-flow,
  .assessment-v2-screen,
  .assessment-v2-result {
    max-width: 100%;
    min-width: 0;
  }

  .assessment-question-title,
  .assessment-step-title,
  .assessment-v2-section-heading,
  .assessment-v2-result-pathway-copy h2 {
    overflow-wrap: anywhere;
  }

  .assessment-v2-navigation {
    gap: .75rem;
  }

  .assessment-v2-navigation > * {
    min-width: 0;
  }

  /* Forms: eliminate overflow without changing field sequence. */
  .react-form-card,
  .admin-login-card,
  .application-status-form-card,
  .career-application-card,
  .standalone-form {
    width: 100%;
    max-width: 100%;
  }

  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea) {
    width: 100%;
    box-sizing: border-box;
  }

  /* Admin */
  .b44-admin-topbar,
  .admin-topbar {
    max-width: 100vw;
  }

  .b44-admin-page-header,
  .admin-section-hero,
  .admin-command-heading,
  .admin-workspace-heading {
    min-width: 0;
  }

  .b44-admin-page-header h1,
  .admin-section-hero h1 {
    font-size: clamp(1.8rem, 8vw, 2.5rem);
  }

  .b44-admin-main,
  .admin-main,
  .admin-portal-content {
    padding-left: .85rem !important;
    padding-right: .85rem !important;
  }

  .b44-admin-table-wrap,
  .admin-table-wrap,
  .admin-portal-content .overflow-x-auto {
    width: 100%;
    overflow-x: auto;
  }

  .b44-admin-table,
  .admin-modern-table {
    width: max-content;
    min-width: 100%;
  }

  /* Footer */
  footer {
    max-width: 100%;
  }

  .footer-legal-links {
    max-width: 100%;
    flex-wrap: wrap;
  }
}

/* The public pages keep their original CSS bundles. These breakpoint rules
   win over legacy layered !important declarations without changing desktop.
   Fix the content boxes themselves; clipping the body is not a layout fix. */
@layer jbn-responsive {
  /* Content photos should feel like clean rectangles, not oval masks.
     Keep logos, icons and account avatars outside this rule. */
  body.site-shell main img:is(
    .object-cover,
    .hero-image,
    [class*="object-cover"]
  ):not([class*="avatar"]):not([class*="logo"]):not([class*="icon"]):not(.mobile-account-avatar) {
    border-radius: 1rem !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }

  body.site-shell main :is(
    .hero-visual,
    .home-platform-media,
    .faq-hero-image,
    .provider-recruit-section,
    .provider-network-section article,
    .pricing-plan-card,
    .pricing-card
  ) img:not([class*="avatar"]):not([class*="logo"]):not([class*="icon"]) {
    border-radius: 1rem !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }

  body[data-page="pricing_plans"] main #programs article > div:first-child > img {
    display: block !important;
    width: 100% !important;
    height: 12rem !important;
    min-height: 0 !important;
    max-height: 12rem !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  body[data-page="pricing_plans"] main section:has(p.text-gold:first-child) .bg-\[\#2b2430\] h2 {
    color: #fff !important;
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
    background-image: none !important;
  }

  @media (max-width: 1023px) {
    /* Sideways entrances temporarily moved entire sections outside a phone.
       On touch-sized screens content is present immediately, even if the
       scroll observer has not run yet. No styles touch carousel hidden states. */
    body.site-shell main :is(.reveal, [data-reveal]) {
      transform: none !important;
      translate: none !important;
      opacity: 1 !important;
      filter: none !important;
      transition: none !important;
      animation: none !important;
    }

    body.site-shell :is(.grid, .home-platform-grid, .home-promise-shell,
      .assessment-v2-form-grid, .access-login-grid) > * {
      min-width: 0;
    }

    body.site-shell :is(input, select, textarea) {
      font-size: max(1rem, 16px);
    }
  }

  @media (max-width: 767px) {
    body[data-page="pricing_plans"] main #programs article > div:first-child > img {
      height: 10.5rem !important;
      max-height: 10.5rem !important;
    }

    body[data-page="pricing_plans"] main section:has(p.text-gold:first-child) .bg-\[\#2b2430\] > .grid {
      gap: 1.5rem !important;
      padding: 2rem 1.5rem !important;
    }

    body[data-page="pricing_plans"] main section:has(p.text-gold:first-child) .bg-\[\#2b2430\] h2 {
      margin-top: .85rem !important;
      font-size: clamp(2rem, 9vw, 2.7rem) !important;
      line-height: 1.12 !important;
    }

    body[data-page="pricing_plans"] main section:has(p.text-gold:first-child) .bg-\[\#2b2430\] p {
      margin-top: 1rem !important;
    }

    body[data-page="pricing_plans"] main section:has(p.text-gold:first-child) .bg-\[\#2b2430\] a {
      margin-top: 1.25rem !important;
    }

    /* Testimonials: retain every story and its carousel, but keep the band
       in its parent instead of a viewport-wide negative-margin breakout. */
    body[data-page="home"] .home-promise-band {
      width: 100% !important;
      max-width: 100% !important;
      margin-inline: 0 !important;
      padding: 4.5rem 1.25rem 2.5rem !important;
      clip-path: polygon(0 1.5rem, 100% 0, 100% 100%, 0 100%) !important;
    }

    body[data-page="home"] .home-promise-heading {
      width: 100%;
      max-width: 100%;
      margin-inline: 0;
      padding: 0 1.25rem 1.5rem;
      text-align: center;
    }

    body[data-page="home"] .home-promise-heading h2 {
      font-size: clamp(2rem, 8vw, 2.6rem) !important;
      line-height: 1.15 !important;
      overflow-wrap: anywhere;
    }

    body[data-page="home"] .home-promise-shell {
      width: 100% !important;
      min-width: 0;
      min-height: 0 !important;
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 1rem;
    }

    body[data-page="home"] .home-promise-quote-mark {
      top: -1.5rem;
      left: 0;
      font-size: 3.5rem;
    }

    body[data-page="home"] .home-promise-controls {
      position: relative !important;
      inset: auto !important;
      justify-content: center !important;
      margin: 0 0 .5rem !important;
      gap: .75rem;
    }

    body[data-page="home"] .home-promise-controls button {
      width: 2.85rem;
      height: 2.85rem;
    }

    body[data-page="home"] :is(.home-promise-slides, .home-promise-slide) {
      width: 100%;
      min-width: 0;
      max-width: 100%;
      margin-inline: 0;
      padding-inline: 0;
    }

    body[data-page="home"] .home-promise-slide > p {
      font-size: 1.125rem !important;
      line-height: 1.65 !important;
      overflow-wrap: anywhere;
    }

    body[data-page="home"] .home-promise-signature {
      max-width: 100%;
      margin-top: 1.5rem;
      text-align: left;
    }

    body[data-page="home"] .home-promise-signature > span:last-child {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    body[data-page="home"] .home-promise-dots {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      max-width: 100%;
      margin-top: .5rem;
    }

    /* Preserve the natural order of forms and the size of check controls. */
    body.site-shell input:is([type="checkbox"], [type="radio"]) {
      flex: 0 0 auto;
      max-width: 1.5rem;
    }

    body.site-shell :is(.home-platform-actions, .assessment-v2-navigation,
      .assessment-v2-final-actions, .jbn-pricing-commitment-actions) {
      min-width: 0;
      flex-wrap: wrap;
    }
    body.site-shell :is(.home-platform-actions, .assessment-v2-final-actions) > :is(a, button) {
      flex: 1 1 12rem;
      white-space: normal;
      text-align: center;
      justify-content: center;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    body.site-shell main :is(.reveal, [data-reveal]) {
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
      transition: none !important;
      animation: none !important;
    }
  }
}

/* --------------------------------------------------------------------------
   520 / small phone
   -------------------------------------------------------------------------- */
@media (max-width: 520px) {
  .site-shell:not(.admin-shell) .jbn-photo-hero {
    border-radius: 1.1rem !important;
  }

  .site-shell:not(.admin-shell) .jbn-photo-hero h1 {
    font-size: clamp(1.9rem, 10.5vw, 2.65rem) !important;
  }

  .react-auth__visual,
  .react-auth__form {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .react-form-card {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .ui-time-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ui-payment-method {
    grid-template-columns: minmax(0, 1fr);
  }

  .ui-calendar {
    padding: .65rem;
  }

  .ui-calendar__week,
  .ui-calendar__grid {
    gap: .12rem;
  }

  .ui-calendar__grid button {
    min-width: 0;
    padding: .2rem;
  }

  .assessment-v2-card,
  .assessment-modal-panel {
    padding-left: .85rem !important;
    padding-right: .85rem !important;
  }

  .assessment-v2-option,
  .assessment-answer {
    min-width: 0;
  }

  .site-dialog-panel {
    width: calc(100vw - 1rem);
    border-radius: 1rem;
  }

  .b44-admin-main,
  .admin-main,
  .admin-portal-content {
    padding-left: .65rem !important;
    padding-right: .65rem !important;
  }

  .b44-admin-stat,
  .b44-admin-card,
  .admin-data-card,
  .admin-workspace-card {
    padding-left: .9rem !important;
    padding-right: .9rem !important;
  }
}

/* --------------------------------------------------------------------------
   390 / very small phones
   -------------------------------------------------------------------------- */
@media (max-width: 390px) {
  .site-shell:not(.admin-shell) .jbn-photo-hero,
  :is(
    .client-account-container,
    .provider-workspace-container,
    .portal-entry-container,
    .welcome-kit-container,
    .assessment-v2-flow-shell,
    .assessment-v2-profile-summary
  ) {
    width: calc(100% - .6rem) !important;
    max-width: calc(100% - .6rem) !important;
  }

  .ui-page-title h1,
  .ui-auth-title {
    font-size: 2rem;
  }

  .ui-panel,
  .ui-provider-card,
  .assessment-v2-card,
  .react-form-card {
    border-radius: 1rem;
  }

  .ui-bubble {
    max-width: 94%;
  }
}

/* --------------------------------------------------------------------------
   Short-height laptops / landscape phones
   -------------------------------------------------------------------------- */
@media (max-height: 650px) and (orientation: landscape) {
  :is(.site-dialog-panel,.assessment-modal-panel,[role="dialog"]) {
    max-height: calc(100dvh - .75rem);
  }

  .mobile-menu-panel {
    max-height: calc(100dvh - 4rem);
    overflow-y: auto;
  }
}

/* Accessibility: no forced animations on constrained devices/users. */
@media (prefers-reduced-motion: reduce) {
  .portal-sidebar,
  .admin-sidebar,
  .b44-admin-sidebar,
  .mobile-menu-panel {
    scroll-behavior: auto !important;
  }
}