/*
  Cancer Care Domain mobile reality-map frame.
  Objective: preserve the horizontal systems-map representation on mobile.
  Scope: #cancer-care-domain only.
*/

/* Keep the section readable, but do not let the diagram collapse into a vertical stack. */
#cancer-care-domain {
  overflow: hidden !important;
}

/* The board becomes a framed horizontal canvas. */
#cancer-care-domain .kx-cancer-board {
  position: relative !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
  border-radius: 26px !important;
  border: 1px solid rgba(245, 166, 35, 0.28) !important;
  background:
    radial-gradient(circle at 22% 18%, rgba(245, 166, 35, 0.11), transparent 32%),
    radial-gradient(circle at 76% 38%, rgba(38, 202, 255, 0.08), transparent 34%),
    linear-gradient(135deg, rgba(37, 12, 8, 0.66), rgba(7, 8, 13, 0.96)) !important;
}

/*
  On desktop/tablet, keep the original natural size.
  The existing board remains full-width.
*/
@media (min-width: 901px) {
  #cancer-care-domain .kx-cancer-board {
    min-height: 720px !important;
  }
}

/*
  On mobile, preserve the full model as a horizontal map.
  The user scrolls inside the frame instead of seeing a distorted stacked diagram.
*/
@media (max-width: 900px) {
  #cancer-care-domain .kx-cancer-board {
    min-height: 720px !important;
    max-height: 760px !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /*
    Restore the original layered grid inside a wider internal canvas.
    This neutralizes earlier mobile CSS that forced all nodes into one/two columns.
  */
  #cancer-care-domain .kx-cancer-board::before {
    content: "";
    display: block;
    width: 1260px;
    height: 720px;
    pointer-events: none;
  }

  #cancer-care-domain .kx-cancer-layer {
    left: 24px !important;
    right: auto !important;
    width: 1210px !important;
    display: grid !important;
    gap: 12px !important;
    opacity: 0.28;
    transform: translateY(8px);
  }

  #cancer-care-domain .kx-cancer-layer.layer-1 {
    top: 32px !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  #cancer-care-domain .kx-cancer-layer.layer-2 {
    top: 155px !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  #cancer-care-domain .kx-cancer-layer.layer-3 {
    top: 325px !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  #cancer-care-domain .kx-cancer-layer.layer-4 {
    top: 455px !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  #cancer-care-domain .kx-cancer-layer.layer-5 {
    top: 590px !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  #cancer-care-domain .kx-cancer-layer-label {
    display: block !important;
    position: absolute !important;
    left: 24px !important;
    z-index: 4 !important;
  }

  #cancer-care-domain .kx-cancer-svg {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 1260px !important;
    height: 720px !important;
  }

  #cancer-care-domain .kx-cancer-node {
    min-height: 74px !important;
    padding: 13px 13px !important;
  }

  #cancer-care-domain .kx-cancer-node strong {
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  #cancer-care-domain .kx-cancer-node span {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  /*
    Keep animation reveal behavior intact.
  */
  #cancer-care-domain .kx-cancer-board.step-1 .layer-1,
  #cancer-care-domain .kx-cancer-board.step-2 .layer-2,
  #cancer-care-domain .kx-cancer-board.step-3 .layer-3,
  #cancer-care-domain .kx-cancer-board.step-4 .layer-4,
  #cancer-care-domain .kx-cancer-board.step-5 .layer-5 {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /*
    Add visual instruction for mobile users without changing HTML.
  */
  #cancer-care-domain .kx-cancer-board::after {
    content: "Swipe horizontally to explore the full reality map →";
    position: sticky;
    left: 14px;
    bottom: 12px;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    margin-left: 14px;
    margin-bottom: 12px;
    border-radius: 999px;
    border: 1px solid rgba(245, 166, 35, 0.30);
    background: rgba(8, 6, 4, 0.76);
    color: #ffe39a;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.02em;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.38);
    pointer-events: none;
  }

  /*
    Keep header and buttons compact above the preserved frame.
  */
  #cancer-care-domain .kx-cancer-domain-header {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #cancer-care-domain .kx-cancer-domain-header h2 {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: clamp(24px, 7vw, 36px) !important;
    line-height: 1.14 !important;
  }

  #cancer-care-domain .kx-cancer-domain-header p {
    display: block !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  #cancer-care-domain .kx-cancer-controls {
    justify-content: center !important;
    gap: 10px !important;
  }

  #cancer-care-domain .kx-cancer-controls button {
    min-height: 46px !important;
    padding: 0 17px !important;
    font-size: 15px !important;
  }
}

/*
  Very narrow phones: still preserve the same internal map width.
  Only reduce outer section padding.
*/
@media (max-width: 520px) {
  #cancer-care-domain {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #cancer-care-domain .kx-cancer-board {
    min-height: 700px !important;
    max-height: 730px !important;
  }

  #cancer-care-domain .kx-cancer-board::before {
    width: 1260px;
    height: 700px;
  }

  #cancer-care-domain .kx-cancer-svg {
    width: 1260px !important;
    height: 700px !important;
  }
}