/* ==========================================================
   SSB Digital final home command-layer mobile fit patch
   Date: 2026-06-18
   Purpose: remove overlap in the Enterprise Command Layer visual
   on responsive view while preserving the animated operating-graph
   composition and SSB visual language.
   ========================================================== */

/* Keep testimonials preserved for later releases but hidden now. */
body.home-v3 .testimonials-section,
body.home-v3 #testimonials{
  display:none!important;
  visibility:hidden!important;
  content-visibility:hidden!important;
}

/* Decorative watermark / visual pieces should not create mobile overflow. */
body.home-v3 .story-visual,
body.home-v3 .story-photo,
body.home-v3 .story-command-visual{
  max-width:100%!important;
  min-width:0!important;
}

@media (max-width:760px){
  body.home-v3 .story-section{
    overflow:hidden!important;
  }

  body.home-v3 .story-section .story-grid{
    width:min(100% - 28px, 480px)!important;
    margin-inline:auto!important;
    gap:30px!important;
  }

  body.home-v3 .story-visual,
  body.home-v3 .story-photo{
    width:100%!important;
  }

  body.home-v3 .story-command-visual{
    position:relative!important;
    height:auto!important;
    min-height:720px!important;
    padding:0!important;
    border-radius:30px!important;
    overflow:hidden!important;
    contain:layout paint!important;
  }

  body.home-v3 .story-command-visual::before{
    inset:18px!important;
    border-radius:24px!important;
  }

  body.home-v3 .story-command-visual::after{
    left:20px!important;
    right:20px!important;
    top:248px!important;
    height:1px!important;
    transform:none!important;
    opacity:.70!important;
  }

  body.home-v3 .story-gridlines{
    display:block!important;
    inset:18px!important;
    opacity:.24!important;
    border-radius:24px!important;
    pointer-events:none!important;
  }

  body.home-v3 .story-orbit{
    display:block!important;
    left:50%!important;
    top:232px!important;
    z-index:2!important;
    pointer-events:none!important;
    opacity:.78!important;
  }

  body.home-v3 .story-orbit-one{
    width:260px!important;
    height:92px!important;
  }

  body.home-v3 .story-orbit-two{
    width:296px!important;
    height:148px!important;
  }

  body.home-v3 .story-status-strip,
  body.home-v3 .story-core-card,
  body.home-v3 .story-metric,
  body.home-v3 .story-flow-rail{
    box-sizing:border-box!important;
    max-width:100%!important;
  }

  body.home-v3 .story-status-strip{
    position:absolute!important;
    left:22px!important;
    right:22px!important;
    top:30px!important;
    width:auto!important;
    min-height:48px!important;
    padding:0 12px!important;
    transform:none!important;
    z-index:8!important;
    justify-content:center!important;
    text-align:center!important;
    gap:8px!important;
    white-space:normal!important;
    line-height:1.1!important;
  }

  body.home-v3 .story-status-strip span,
  body.home-v3 .story-status-strip b{
    flex:0 1 auto!important;
    min-width:0!important;
  }

  body.home-v3 .story-core-card{
    position:absolute!important;
    left:50%!important;
    top:170px!important;
    width:min(230px, calc(100% - 74px))!important;
    min-height:138px!important;
    padding:20px 18px!important;
    transform:translateX(-50%)!important;
    z-index:5!important;
    border-radius:24px!important;
  }

  body.home-v3 .story-core-card span{
    font-size:10px!important;
    letter-spacing:.17em!important;
  }

  body.home-v3 .story-core-card strong{
    font-size:clamp(22px,7vw,29px)!important;
    line-height:1.02!important;
    margin-top:8px!important;
  }

  body.home-v3 .story-core-card small{
    margin-top:8px!important;
    font-size:12px!important;
  }

  body.home-v3 .story-metric{
    position:absolute!important;
    top:336px!important;
    width:calc(50% - 28px)!important;
    min-width:0!important;
    min-height:108px!important;
    padding:14px 13px!important;
    z-index:7!important;
    border-radius:20px!important;
    display:grid!important;
    align-content:center!important;
  }

  body.home-v3 .story-metric-left{
    left:22px!important;
    right:auto!important;
  }

  body.home-v3 .story-metric-right{
    right:22px!important;
    left:auto!important;
  }

  body.home-v3 .story-metric span{
    font-size:9px!important;
    letter-spacing:.14em!important;
  }

  body.home-v3 .story-metric strong{
    font-size:clamp(28px,9vw,38px)!important;
    margin-top:7px!important;
  }

  body.home-v3 .story-metric small{
    font-size:11px!important;
    line-height:1.25!important;
    overflow-wrap:break-word!important;
  }

  body.home-v3 .story-flow-rail{
    position:absolute!important;
    left:22px!important;
    right:22px!important;
    bottom:24px!important;
    top:auto!important;
    width:auto!important;
    z-index:7!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }

  body.home-v3 .story-flow-rail article{
    min-width:0!important;
    min-height:112px!important;
    padding:13px!important;
    border-radius:18px!important;
    overflow:hidden!important;
  }

  body.home-v3 .story-flow-rail b{
    width:30px!important;
    height:30px!important;
    border-radius:12px!important;
    font-size:10px!important;
  }

  body.home-v3 .story-flow-rail span{
    margin-top:10px!important;
    font-size:clamp(16px,5vw,21px)!important;
    line-height:1.08!important;
  }

  body.home-v3 .story-flow-rail small{
    margin-top:6px!important;
    font-size:12px!important;
    line-height:1.28!important;
  }
}

@media (max-width:420px){
  body.home-v3 .story-command-visual{
    min-height:706px!important;
    border-radius:28px!important;
  }

  body.home-v3 .story-status-strip{
    left:18px!important;
    right:18px!important;
    top:28px!important;
  }

  body.home-v3 .story-core-card{
    top:164px!important;
    width:min(224px, calc(100% - 54px))!important;
  }

  body.home-v3 .story-orbit{
    top:226px!important;
  }

  body.home-v3 .story-metric{
    top:326px!important;
    width:calc(50% - 23px)!important;
    min-height:112px!important;
    padding:13px 11px!important;
  }

  body.home-v3 .story-metric-left{left:18px!important;}
  body.home-v3 .story-metric-right{right:18px!important;}

  body.home-v3 .story-flow-rail{
    left:18px!important;
    right:18px!important;
    bottom:22px!important;
    gap:9px!important;
  }

  body.home-v3 .story-flow-rail article{
    min-height:116px!important;
    padding:12px!important;
  }
}

@media (max-width:360px){
  body.home-v3 .story-command-visual{
    min-height:760px!important;
  }

  body.home-v3 .story-core-card{
    top:154px!important;
  }

  body.home-v3 .story-metric{
    top:306px!important;
    width:calc(100% - 36px)!important;
    min-height:86px!important;
  }

  body.home-v3 .story-metric-left{left:18px!important;}
  body.home-v3 .story-metric-right{
    left:18px!important;
    right:auto!important;
    top:400px!important;
  }

  body.home-v3 .story-flow-rail{
    grid-template-columns:1fr!important;
  }
}