/* STLBEAST V623 — Hub Problem Cards Premium Final Fix
   Fixes old 4-column problem-card layout that made text narrow and buttons stretch. */
body.h598-hub .h598-problem-strip{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:clamp(14px,1.8vw,22px)!important;
  padding:clamp(14px,2vw,24px)!important;
  border-radius:26px!important;
  border:1px solid rgba(101,185,255,.30)!important;
  background:
    radial-gradient(circle at 12% 0%,rgba(80,182,255,.13),transparent 30%),
    linear-gradient(180deg,rgba(9,25,42,.98),rgba(2,8,15,.995))!important;
  box-shadow:0 28px 78px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.055)!important;
}
body.h598-hub .h598-problem{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(128px,176px) minmax(0,1fr)!important;
  grid-template-areas:"thumb text" "thumb action"!important;
  align-items:center!important;
  gap:12px clamp(16px,2vw,24px)!important;
  min-height:184px!important;
  padding:16px!important;
  border-radius:23px!important;
  border:1px solid rgba(92,184,255,.36)!important;
  background:
    radial-gradient(circle at 13% 42%,rgba(65,170,255,.19),transparent 33%),
    linear-gradient(112deg,rgba(15,47,76,.96),rgba(7,18,31,.98) 53%,rgba(2,7,13,.99))!important;
  text-decoration:none!important;
  overflow:hidden!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 20px 52px rgba(0,0,0,.30)!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
}
body.h598-hub .h598-problem:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:
    linear-gradient(90deg,rgba(88,188,255,.10),transparent 48%),
    radial-gradient(circle at 84% 16%,rgba(142,217,255,.08),transparent 26%)!important;
  opacity:1!important;
  pointer-events:none!important;
}
body.h598-hub .h598-problem:hover,
body.h598-hub .h598-problem:focus-visible{
  transform:translateY(-2px)!important;
  border-color:rgba(142,217,255,.78)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 28px 68px rgba(0,0,0,.36),0 0 0 3px rgba(47,168,255,.11)!important;
  outline:0!important;
}
body.h598-hub .h598-problem .h598-thumb{
  grid-area:thumb!important;
  position:relative!important;
  z-index:1!important;
  width:100%!important;
  max-width:176px!important;
  min-width:0!important;
  aspect-ratio:4/3!important;
  border-radius:18px!important;
  border:1px solid rgba(116,205,255,.55)!important;
  background:#06101d!important;
  box-shadow:0 0 36px rgba(47,168,255,.17),inset 0 1px 0 rgba(255,255,255,.06)!important;
  overflow:hidden!important;
}
body.h598-hub .h598-problem .h598-thumb img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:inherit!important;
}
body.h598-hub .h598-problem .h598-problem-text{
  grid-area:text!important;
  position:relative!important;
  z-index:1!important;
  display:block!important;
  min-width:0!important;
  max-width:100%!important;
  align-self:end!important;
}
body.h598-hub .h598-problem .h598-problem-tag{
  display:inline-flex!important;
  align-items:center!important;
  width:auto!important;
  max-width:100%!important;
  margin:0 0 9px!important;
  padding:5px 10px!important;
  border-radius:999px!important;
  border:1px solid rgba(142,217,255,.30)!important;
  background:rgba(47,168,255,.09)!important;
  color:#93ddff!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
  font-size:.68rem!important;
  font-weight:950!important;
  line-height:1.1!important;
  white-space:normal!important;
}
body.h598-hub .h598-problem .h598-problem-text b{
  display:block!important;
  margin:0!important;
  color:#f4f9ff!important;
  font-size:clamp(1.35rem,2.05vw,1.72rem)!important;
  line-height:1.02!important;
  letter-spacing:-.025em!important;
  text-shadow:0 0 18px rgba(142,217,255,.12)!important;
}
body.h598-hub .h598-problem .h598-problem-text small{
  display:block!important;
  margin:8px 0 0!important;
  max-width:44rem!important;
  color:#c5d6e5!important;
  font-size:clamp(.98rem,1.22vw,1.08rem)!important;
  line-height:1.46!important;
}
body.h598-hub .h598-problem > strong{
  grid-area:action!important;
  position:relative!important;
  z-index:1!important;
  align-self:start!important;
  justify-self:start!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:118px!important;
  max-width:max-content!important;
  min-height:42px!important;
  padding:10px 18px!important;
  border-radius:14px!important;
  border:1px solid rgba(142,217,255,.54)!important;
  background:linear-gradient(180deg,rgba(38,100,153,.76),rgba(11,47,84,.90))!important;
  color:#aee8ff!important;
  font-size:.84rem!important;
  line-height:1!important;
  letter-spacing:.055em!important;
  font-weight:950!important;
  text-transform:none!important;
  white-space:nowrap!important;
  box-shadow:0 12px 27px rgba(47,168,255,.13),inset 0 1px 0 rgba(255,255,255,.075)!important;
}
body.h598-hub .h598-problem:hover > strong,
body.h598-hub .h598-problem:focus-visible > strong{
  color:#f4fbff!important;
  background:linear-gradient(180deg,rgba(57,137,202,.88),rgba(15,75,130,.94))!important;
}
body.h598-hub .h598-title-row .h598-btn.secondary{
  flex:0 0 auto!important;
  white-space:nowrap!important;
}
@media (max-width:980px){
  body.h598-hub .h598-problem-strip{grid-template-columns:1fr!important;}
  body.h598-hub .h598-problem{grid-template-columns:150px minmax(0,1fr)!important;min-height:164px!important;}
  body.h598-hub .h598-problem .h598-thumb{max-width:150px!important;aspect-ratio:4/3!important;}
}
@media (max-width:620px){
  body.h598-hub .h598-problem-strip{padding:12px!important;gap:12px!important;border-radius:22px!important;}
  body.h598-hub .h598-problem{
    grid-template-columns:104px minmax(0,1fr)!important;
    grid-template-areas:"thumb text" "action action"!important;
    min-height:0!important;
    padding:12px!important;
    gap:12px!important;
    border-radius:20px!important;
  }
  body.h598-hub .h598-problem .h598-thumb{max-width:104px!important;aspect-ratio:1/1!important;border-radius:15px!important;}
  body.h598-hub .h598-problem .h598-problem-text{align-self:center!important;}
  body.h598-hub .h598-problem .h598-problem-tag{font-size:.62rem!important;margin-bottom:6px!important;padding:4px 8px!important;}
  body.h598-hub .h598-problem .h598-problem-text b{font-size:1.22rem!important;line-height:1.05!important;}
  body.h598-hub .h598-problem .h598-problem-text small{font-size:.93rem!important;line-height:1.34!important;margin-top:6px!important;}
  body.h598-hub .h598-problem > strong{width:100%!important;max-width:none!important;min-height:40px!important;justify-self:stretch!important;}
}
@media (max-width:390px){
  body.h598-hub .h598-problem{grid-template-columns:1fr!important;grid-template-areas:"thumb" "text" "action"!important;}
  body.h598-hub .h598-problem .h598-thumb{width:100%!important;max-width:none!important;aspect-ratio:16/9!important;}
}