/* =========================================================
   AXQA MOBILE LAYOUT FIXES
   Scope: layout/readability only — no JS or business logic
   ========================================================= */


/* =========================================================
   HOME — PRODUCT MOTION FILM
   ========================================================= */

@media (max-width: 760px) {

  .axqa-home-film-stage {
    height: 620px;
  }

  .film-structure-board {
    inset: 22px 14px 125px;
  }

  .film-campaign-board {
    inset: 22px 10px 125px;
  }

  .film-api-board {
    inset: 22px 14px 125px;
  }

  .film-agent-board {
    inset: 22px 14px 125px;
  }

  .film-intel-board {
    inset: 22px 14px 125px;
  }

  .film-scene-caption {
    left: 16px;
    right: 16px;
    bottom: 18px;
    max-width: none;
  }
}


@media (max-width: 480px) {

  .axqa-home-film-stage {
    height: 700px;
  }

  .film-structure-board {
    inset: 22px 14px 130px;
  }

  .film-campaign-board {
    inset: 22px 10px 130px;
  }

  .film-api-board {
    inset: 22px 14px 130px;
  }

  .film-agent-board {
    inset: 22px 14px 130px;
  }

  .film-intel-board {
    inset: 22px 14px 130px;
  }
}


/* =========================================================
   HOME — HERO / CARDS / CONNECT / EXECUTION ENGINE
   ========================================================= */

@media (max-width: 700px) {

  /* LIVE PRODUCT STORY:
     keep the caption fully below the visual instead of
     overlapping EXECUTE / UNDERSTAND / other orbit labels. */
  .axqa-home-universe-wrap {
    padding-bottom: 230px;
  }

  .axqa-home-universe {
    margin-bottom: 0;
  }

  .axqa-home-universe-caption {
    top: calc(100% + 18px) !important;
    bottom: auto !important;
    width: 88%;
  }


  /* -------------------------------------------------------
     HOME PILLAR / USE CASE / TRY CARDS
     Let the content decide the card height.
     ------------------------------------------------------- */

  .axqa-home-pillar,
  .axqa-home-use-card,
  .axqa-home-try-card {
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .axqa-home-pillar > b,
  .axqa-home-use-card > b,
  .axqa-home-try-card > b {
    position: static;
    inset: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 20px;
  }

  .axqa-home-mini-flow {
    margin: 24px 0 0;
    flex-wrap: wrap;
  }

  .axqa-home-api-mini {
    width: auto;
    max-width: 100%;
    flex-wrap: wrap;
  }


  /* -------------------------------------------------------
     CONNECT ANY SYSTEM
     On mobile the layout is already vertical.
     Do not rotate the channel text.
     ------------------------------------------------------- */

  .axqa-home-connect-map {
    min-height: 0;
    padding-bottom: 96px;
  }

  .axqa-home-connect-channel {
    transform: none;
    min-height: 105px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .axqa-home-connect-channel strong,
  .axqa-home-connect-channel small {
    transform: none;
  }


  /* -------------------------------------------------------
     HOME EXECUTION ENGINE
     Convert horizontal execution rail to vertical on phone.
     ------------------------------------------------------- */

  .axqa-home-engine-rail {
    overflow: visible;
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 0;
    margin: 26px 0;
  }

  .axqa-home-engine-node {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 49px 1fr;
    grid-template-rows: auto auto;
    column-gap: 11px;
    text-align: left;
    align-items: center;
  }

  .axqa-home-engine-node span {
    grid-row: 1 / 3;
    grid-column: 1;
    margin: 0;
  }

  .axqa-home-engine-node strong,
  .axqa-home-engine-node small {
    grid-column: 2;
  }

  .axqa-home-engine-node small {
    margin-top: 0;
  }

  .axqa-home-engine-link {
    flex: none;
    width: 1px;
    min-width: 0;
    height: 20px;
    margin: 5px 0 5px 24px;
  }

  .axqa-home-engine-link b {
    left: -3.5px;
    top: 0;
  }

  .axqa-home-engine-link.travel b {
    animation: axqaEngineTravelMobile .55s ease;
  }
}


@keyframes axqaEngineTravelMobile {

  from {
    top: 0;
    opacity: .15;
  }

  20% {
    opacity: 1;
  }

  to {
    top: calc(100% - 7px);
    opacity: .1;
  }
}


/* =========================================================
   QA WORKSPACE SETUP
   Keep Workflow node clear of SETUP FOCUS.
   ========================================================= */

@media (max-width: 700px) {

  .ws-command-card {
    min-height: 540px;
  }

  .ws-topology {
    height: 400px;
  }

  .ws-node-access,
  .ws-node-ready {
    bottom: 22%;
  }

  .ws-node-flow {
    bottom: 15%;
  }
}


/* =========================================================
   API TEST MANAGEMENT
   ========================================================= */

@media (max-width: 760px) {

  /* Long API URLs must wrap instead of being clipped. */
  .atm-request-bar code {
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    line-height: 1.45;
  }


  /* Full execution path visible without horizontal scroll. */
  .atm-lab-flow {
    overflow: visible;
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 0;
    gap: 0;
  }

  .atm-lab-node {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    column-gap: 11px;
    text-align: left;
    align-items: center;
  }

  .atm-lab-node > span {
    grid-row: 1 / 3;
    grid-column: 1;
    margin: 0;
  }

  .atm-lab-node strong,
  .atm-lab-node small {
    grid-column: 2;
  }

  .atm-lab-link {
    flex: none;
    min-width: 0;
    width: 2px;
    height: 18px;
    margin: 5px 0 5px 20px;
  }

  .atm-lab-link b {
    width: 100%;
    height: 0;
  }

  .atm-lab-link.travel b {
    animation: axqaApiLinkMobile .55s forwards;
  }
}


@keyframes axqaApiLinkMobile {

  from {
    height: 0;
  }

  to {
    height: 100%;
  }
}


/* =========================================================
   TEST CASE MANAGEMENT
   ========================================================= */

@media (max-width: 760px) {

  /* Simulation flow becomes vertical on mobile. */
  .tc-lab-flow {
    overflow: visible;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding-bottom: 0;
    gap: 0;
  }

  .tc-lab-node {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    column-gap: 11px;
    text-align: left;
    align-items: center;
  }

  .tc-lab-node > span {
    grid-row: 1 / 3;
    grid-column: 1;
    margin: 0;
  }

  .tc-lab-node strong,
  .tc-lab-node small {
    grid-column: 2;
  }

  .tc-lab-link {
    flex: none;
    min-width: 0;
    width: 2px;
    height: 18px;
    margin: 5px 0 5px 20px;
  }

  .tc-lab-link b {
    left: -3px;
    top: 0;
  }

  .tc-lab-link.travel b {
    animation: axqaTcLinkMobile .55s ease;
  }


  /* Five management stages always remain visible. */
  .tc-detail-rail {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    overflow: visible;
    justify-content: stretch;
  }

  .tc-detail-rail div {
    min-width: 0;
    font-size: .58rem;
  }

  .tc-detail-rail b {
    display: none;
  }
}


@keyframes axqaTcLinkMobile {

  from {
    top: 0;
    opacity: .15;
  }

  20% {
    opacity: 1;
  }

  to {
    top: calc(100% - 7px);
    opacity: .1;
  }
}


/* =========================================================
   TEST CAMPAIGN MANAGEMENT
   ========================================================= */

@media (max-width: 760px) {

  /* Campaign execution stages become vertical. */
  .tcm-lab-flow {
    overflow: visible;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding-bottom: 0;
    gap: 0;
  }

  .tcm-lab-node {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    column-gap: 11px;
    text-align: left;
    align-items: center;
  }

  .tcm-lab-node span {
    grid-row: 1 / 3;
    grid-column: 1;
    margin: 0;
  }

  .tcm-lab-node strong,
  .tcm-lab-node small {
    grid-column: 2;
  }

  .tcm-lab-link {
    flex: none;
    min-width: 0;
    width: 1px;
    height: 18px;
    margin: 5px 0 5px 24px;
  }

  .tcm-lab-link b {
    left: -4px;
    top: 0;
  }

  .tcm-lab-link.travel b {
    animation: axqaCampaignLinkMobile .55s ease;
  }


  /* Five campaign-management stages always remain visible. */
  .tcm-detail-rail {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    overflow: visible;
    justify-content: stretch;
  }

  .tcm-detail-rail div {
    min-width: 0;
    font-size: .58rem;
  }

  .tcm-detail-rail b {
    display: none;
  }
}


@keyframes axqaCampaignLinkMobile {

  from {
    top: 0;
    opacity: .15;
  }

  20% {
    opacity: 1;
  }

  to {
    top: calc(100% - 8px);
    opacity: .1;
  }
}


/* =========================================================
   INTERACTIVE PRODUCT DEMO
   Steps 04 / 05 must not live outside the viewport.
   ========================================================= */

@media (max-width: 680px) {

  .axqa-experience-page .demo-flow-sidebar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }

  .axqa-experience-page .demo-flow-step {
    min-width: 0;
    padding: 10px 7px;
    gap: 5px;
    justify-content: flex-start;
  }
}