/* =========================================================
   EVO-X F4.10-G
   PROBLEM PROGRESSIVE UX V1

   Presentation only.
   Existing buttons, intents, handlers and recommendation
   DOM remain untouched.
   ========================================================= */

/* ---------- TITLE RHYTHM ---------- */

#problem .v12-wrap > h2{
  margin-top:22px;
  margin-bottom:18px;
}

#problem .v12-wrap > h2 + p{
  margin-top:0;
  margin-bottom:20px;
  max-width:760px;
}

/* ---------- CHALLENGE SELECTOR ---------- */

#problem .v12-problem-grid{
  display:grid;
  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:10px;

  margin-top:22px;
}

/*
 * Original cards are 180px high.
 * They now behave as executive selectors.
 */

#problem .v12-problem-grid
.intent.v12-choice{
  min-height:72px;
  height:auto;

  padding:14px 16px;

  align-items:center;
  justify-content:flex-start;

  text-align:left;

  border-radius:14px;

  transition:
    transform .18s ease,
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease;
}

#problem .v12-problem-grid
.intent.v12-choice:hover{
  transform:translateY(-1px);
}

#problem .v12-problem-grid
.intent.v12-choice.active,
#problem .v12-problem-grid
.intent.v12-choice[aria-pressed="true"]{
  transform:none;
}

/* ---------- RECOMMENDATION ---------- */

/*
 * Recommendation remains in the DOM and remains dynamic.
 * We only turn it into a compact executive consequence
 * of the visitor's choice.
 */

#problem .v12-recommendation{
  display:grid;

  grid-template-columns:
    minmax(0,1.35fr)
    minmax(210px,.65fr);

  gap:24px;

  align-items:start;

  margin-top:22px;

  padding:22px 24px;

  border-radius:18px;
}

/*
 * Critical mobile problem:
 * the original first recommendation column was only
 * ~127px wide, making recCopy 410px tall.
 */

#problem .v12-recommendation
> div:first-child{
  min-width:0;
  width:auto;
}

#problem #recTitle{
  margin-top:8px;
  margin-bottom:8px;
}

#problem #recCopy{
  margin-top:8px;
  margin-bottom:0;

  max-width:68ch;

  line-height:1.55;
}

/* Score becomes supporting evidence, not primary content. */

#problem .v12-score{
  min-width:0;

  padding:16px 18px;

  align-self:stretch;
}

#problem .p93f-score-info{
  margin-top:6px;
}

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

@media(max-width:820px){

  #problem .v12-wrap > h2{
    margin-top:22px;
    margin-bottom:16px;
  }

  #problem .v12-problem-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:8px;

    margin-top:18px;
  }

  #problem .v12-problem-grid
  .intent.v12-choice{
    min-height:58px;

    padding:10px 12px;

    border-radius:12px;
  }

  #problem .v12-recommendation{
    grid-template-columns:1fr;

    gap:14px;

    margin-top:18px;

    padding:18px;
  }

  #problem .v12-recommendation
  > div:first-child{
    width:100%;
  }

  #problem #recTitle{
    margin-top:6px;
    margin-bottom:6px;
  }

  #problem #recCopy{
    margin-top:6px;

    max-width:none;

    line-height:1.5;
  }

  /*
   * Compact supporting score.
   */

  #problem .v12-score{
    display:grid;

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

    align-items:center;

    gap:8px 16px;

    min-height:0;

    padding:12px 14px;
  }

  #problem .v12-score
  .p93f-score-info{
    margin:0;
  }
}

@media(max-width:540px){

  #problem .v12-problem-grid
  .intent.v12-choice{
    min-height:54px;
    padding:9px 10px;
  }

  #problem .v12-recommendation{
    padding:16px;
  }
}

/* Accessibility */

@media(prefers-reduced-motion:reduce){

  #problem .v12-problem-grid
  .intent.v12-choice{
    transition:none;
  }
}

/* =========================================================
   EVO-X F4.10-H2
   FINAL CHALLENGE GRID OVERRIDE

   Root cause confirmed at runtime:
   legacy min-height:320px on .intent.v12-choice
   ========================================================= */

#problem .v12-problem-grid{
  grid-auto-rows:auto !important;
  align-items:stretch !important;
}

#problem .v12-problem-grid
button.intent.v12-choice{

  box-sizing:border-box !important;

  width:100% !important;

  height:72px !important;
  min-height:72px !important;
  max-height:72px !important;

  padding:10px 14px !important;

  display:flex !important;

  flex-direction:row !important;

  align-items:center !important;
  justify-content:flex-start !important;

  gap:10px !important;

  text-align:left !important;
}

/*
 * Any children, icons or decorative elements
 * must not recreate the old vertical card geometry.
 */

#problem .v12-problem-grid
button.intent.v12-choice > *{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* Mobile/tablet */

@media(max-width:820px){

  #problem .v12-problem-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    grid-template-rows:none !important;

    grid-auto-rows:58px !important;

    gap:8px !important;
  }

  #problem .v12-problem-grid
  button.intent.v12-choice{

    height:58px !important;
    min-height:58px !important;
    max-height:58px !important;

    padding:8px 11px !important;

    flex-direction:row !important;

    align-items:center !important;
    justify-content:flex-start !important;

    overflow:hidden !important;
  }
}

/* Desktop */

@media(min-width:821px){

  #problem .v12-problem-grid{
    grid-template-columns:
      repeat(4,minmax(0,1fr)) !important;

    grid-auto-rows:72px !important;

    gap:10px !important;
  }
}