/* =========================================
   Radar Landing Block 20
   File: /radar/assets/block-20.css
   Scope: only block 20
   ========================================= */

.lp-b20{
  min-width:0;
}

/* =========================================
   HEADER
   ========================================= */

.lp-b20-head-panel{
  min-width:0;
}

.lp-b20-head{
  width:100%;
  text-align:left;
  align-items:flex-start;
  justify-content:center;
  gap:6px;
}

.lp-b20-head-line{
  letter-spacing:-0.02em;
  line-height:1.1;
}

.lp-b20-head-line--strong{
  font-size:28px;
  font-weight:850;
  color:var(--text);
}

.lp-b20-head-line--muted{
  font-size:28px;
  font-weight:800;
  color:var(--text-2);
}

/* =========================================
   MAIN ROW
   ========================================= */

.lp-b20-main-row{
  align-items:stretch;
}

.lp-b20-nav-col{
  display:flex;
  min-width:0;
}

.lp-b20-nav{
  width:100%;
  min-width:0;
}

.lp-b20-stage-col{
  min-width:0;
  display:flex;
}

.lp-b20-stage-stack{
  width:100%;
  min-width:0;
  height:100%;
  display:grid;
  grid-template-rows:
    calc((100% - 48px) / 3)
    calc((100% - 48px) / 3)
    calc((100% - 48px) / 3);
  gap:24px;
}

/* =========================================
   LEFT TABS
   ========================================= */

.lp-b20-tab{
  position:relative;
  min-width:0;
  cursor:default;
  transition:
    transform .22s ease,
    opacity .22s ease,
    box-shadow .22s ease;
}

.lp-b20-tab-inner{
  align-items:center;
  justify-content:center;
  text-align:center;
}

.lp-b20-tab-label{
  color:var(--text);
  font-weight:850;
  font-size:24px;
  line-height:1.05;
  letter-spacing:-0.02em;
  text-wrap:balance;
}

.lp-b20-tab--compact .lp-b20-tab-label{
  font-size:20px;
  line-height:1.04;
}

.lp-b20-tab:not(.is-active){
  opacity:.85;
}

.lp-b20-tab:not(.is-active) .lp-b20-tab-label{
  color:var(--text-2);
}

.lp-b20-tab.is-active{
  opacity:1;
  transform:translateY(-1px);
}

.lp-b20-tab.is-active .lp-b20-tab-label{
  color:var(--text);
}

@media (hover:hover) and (pointer:fine){
  .lp-b20-tab:hover{
    opacity:1;
    transform:translateY(-1px);
  }

  .lp-b20-tab:hover .lp-b20-tab-label{
    color:var(--text);
  }
}

/* =========================================
   RIGHT COLUMN / 3 PANELS
   ========================================= */

.lp-b20-card{
  min-width:0;
  height:100%;
}

.lp-b20-card-inner{
  width:100%;
  height:100%;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:14px;
}

.lp-b20-card-title{
  color:var(--text);
  font-size:22px;
  line-height:1.08;
  font-weight:840;
  letter-spacing:-0.02em;
}

.lp-b20-card-text{
  max-width:560px;
  color:var(--text-2);
  font-size:17px;
  font-weight:720;
  line-height:1.38;
}

.lp-b20-card--radar{
  box-shadow:
    inset 0 0 0 1px rgba(90,170,255,.10),
    0 14px 34px rgba(0,0,0,.12);
}

.lp-b20-card--radar .lp-b20-card-title{
  color:var(--text);
}

.lp-b20-card--radar .lp-b20-card-text{
  color:var(--text);
}

.lp-b20-card--risk .lp-b20-card-title{
  color:var(--text);
}

/* =========================================
   LIGHT THEME
   ========================================= */

html[data-theme="light"] .lp-b20-card--radar{
  box-shadow:
    inset 0 0 0 1px rgba(2,132,199,.10),
    0 8px 22px rgba(15,23,42,.06);
}

/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width:980px){

  .lp-b20-head-line--strong{
    font-size:24px;
  }

  .lp-b20-head-line--muted{
    font-size:24px;
  }

  .lp-b20-tab-label{
    font-size:22px;
  }

  .lp-b20-tab--compact .lp-b20-tab-label{
    font-size:18px;
  }

  .lp-b20-stage-stack{
    height:auto;
    grid-template-rows:none;
    grid-auto-rows:minmax(0, auto);
  }

  .lp-b20-card{
    height:auto;
  }

  .lp-b20-card-title{
    font-size:20px;
  }

  .lp-b20-card-text{
    max-width:none;
    font-size:16px;
  }
}

@media (max-width:640px){

  .lp-b20-head-line--strong{
    font-size:20px;
  }

  .lp-b20-head-line--muted{
    font-size:20px;
  }

  .lp-b20-tab-label{
    font-size:18px;
  }

  .lp-b20-tab--compact .lp-b20-tab-label{
    font-size:16px;
  }

  .lp-b20-card-title{
    font-size:18px;
  }

  .lp-b20-card-text{
    font-size:15px;
    line-height:1.36;
  }
}