/* ==========================================================
   EVO-X F4.13-C
   SON.IA EXECUTIVE CONVERSION UX
   ========================================================== */


/* ----------------------------------------------------------
   SECTION RHYTHM
   ---------------------------------------------------------- */

#sonia{
  scroll-margin-top:88px;
}

#sonia .v12-wrap.v12-sonia-grid{
  display:grid !important;

  grid-template-columns:
    minmax(220px,.72fr)
    minmax(0,1.28fr) !important;

  align-items:start !important;

  gap:28px !important;
}


/* ----------------------------------------------------------
   IMAGE = SUPPORTING AUTHORITY, NOT PRIMARY CONTENT
   ---------------------------------------------------------- */

#sonia .v12-sonia-grid > figure{
  position:sticky;

  top:92px;

  width:100%;

  max-width:330px;

  margin:0 !important;

  justify-self:center;
}

#sonia .v12-sonia-grid > figure img{
  display:block;

  width:100% !important;

  height:360px !important;

  min-height:0 !important;

  max-height:360px !important;

  object-fit:cover !important;

  object-position:center top !important;

  border-radius:18px;
}


/* ----------------------------------------------------------
   TEXT COLUMN
   ---------------------------------------------------------- */

#sonia
.v12-sonia-grid > div{
  min-width:0;
}

#sonia
.v12-sonia-grid > div > h2{
  margin-top:18px !important;
  margin-bottom:14px !important;

  font-size:
    clamp(30px,4vw,54px) !important;

  line-height:1.03 !important;
}

#sonia
.v12-sonia-grid > div > h2 + p{
  margin-top:0 !important;
  margin-bottom:16px !important;

  line-height:1.45 !important;

  max-width:68ch;
}


/* ----------------------------------------------------------
   SONIA CONTEXT CARD
   ---------------------------------------------------------- */

#sonia .v12-sonia-card{
  box-sizing:border-box !important;

  min-height:0 !important;

  margin-top:16px !important;

  padding:18px 20px !important;

  border-radius:16px !important;
}

#sonia .v12-sonia-card small{
  display:block;

  margin:0 0 5px !important;
}

#sonia #soniaObjective{
  display:block;

  margin:0 0 7px !important;

  line-height:1.2 !important;
}

#sonia #soniaMessage{
  margin:0 0 14px !important;

  line-height:1.45 !important;
}


/* ----------------------------------------------------------
   RADAR = EXECUTIVE EVIDENCE
   ---------------------------------------------------------- */

#sonia .v12-radar{
  box-sizing:border-box !important;

  min-height:0 !important;

  margin-top:14px !important;

  padding:13px 16px !important;

  display:grid !important;

  grid-template-columns:
    auto minmax(0,1fr) !important;

  gap:4px 14px !important;

  align-items:center !important;
}

#sonia .v12-radar span{
  margin:0 !important;
}

#sonia #radarScore{
  margin:0 !important;

  font-size:
    clamp(32px,5vw,48px) !important;

  line-height:1 !important;
}

#sonia #radarFeedback{
  margin:0 !important;

  line-height:1.35 !important;
}


/* ----------------------------------------------------------
   PRIMARY ACTION
   ---------------------------------------------------------- */

#sonia #simulateRadar{
  min-height:44px !important;

  margin-top:12px !important;

  padding:9px 16px !important;
}


/* ==========================================================
   MOBILE / TABLET
   ========================================================== */

@media(max-width:820px){

  #sonia .v12-wrap.v12-sonia-grid{
    grid-template-columns:
      190px minmax(0,1fr) !important;

    gap:18px !important;
  }

  #sonia .v12-sonia-grid > figure{
    position:relative;

    top:auto;

    max-width:190px;
  }

  #sonia .v12-sonia-grid > figure img{
    height:260px !important;
    max-height:260px !important;

    border-radius:16px;
  }

  #sonia
  .v12-sonia-grid > div > h2{
    margin-top:8px !important;
    margin-bottom:10px !important;

    font-size:
      clamp(28px,6.4vw,42px) !important;
  }

  #sonia
  .v12-sonia-grid > div > h2 + p{
    margin-bottom:12px !important;
  }

  #sonia .v12-sonia-card{
    margin-top:12px !important;

    padding:14px !important;
  }

  #sonia .v12-radar{
    padding:11px 13px !important;
  }
}


/* Narrow mobile:
   Image becomes compact horizontal visual.
*/

@media(max-width:620px){

  #sonia .v12-wrap.v12-sonia-grid{
    grid-template-columns:1fr !important;

    gap:14px !important;
  }

  #sonia .v12-sonia-grid > figure{
    width:100%;
    max-width:none;
  }

  #sonia .v12-sonia-grid > figure img{
    width:100% !important;

    height:210px !important;
    max-height:210px !important;

    object-position:center 18% !important;
  }

  #sonia
  .v12-sonia-grid > div > h2{
    margin-top:6px !important;
  }

  #sonia .v12-sonia-card{
    margin-top:10px !important;
  }
}