/* Hub V402 — Unified Premium Card System */

/* Recurring quick-path / mini-card strip */
.hub391-visual-strip{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:16px !important;
  margin:22px auto !important;
}
.hub391-mini-card{
  display:block !important;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
  border:1px solid rgba(191,219,254,.95) !important;
  border-radius:26px !important;
  padding:14px !important;
  text-decoration:none !important;
  box-shadow:0 18px 42px rgba(15,23,42,.08) !important;
  overflow:hidden !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
.hub391-mini-card:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(96,165,250,.95) !important;
  box-shadow:0 22px 48px rgba(15,23,42,.11) !important;
}
.hub391-mini-card img{
  width:100% !important;
  height:158px !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
  border-radius:20px !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(96,165,250,.14), transparent 40%),
    linear-gradient(180deg,#f7fbff 0%,#edf5ff 100%) !important;
  border:1px solid rgba(219,234,254,.95) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.86) !important;
  margin-bottom:12px !important;
}
.hub391-mini-card b{
  display:block !important;
  color:#0f172a !important;
  font-size:1rem !important;
  line-height:1.18 !important;
  margin-bottom:6px !important;
}
.hub391-mini-card span{
  display:block !important;
  color:#64748b !important;
  line-height:1.45 !important;
  font-size:.92rem !important;
}

/* Homepage / tool cards that already use premium imagery */
.hub393-tool-card{
  border-radius:28px !important;
  box-shadow:0 18px 42px rgba(15,23,42,.08) !important;
  border:1px solid rgba(191,219,254,.95) !important;
}
.hub393-tool-card img[src*="/assets/images/v401/tools/"]{
  height:184px !important;
  border-radius:20px !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(96,165,250,.14), transparent 40%),
    linear-gradient(180deg,#f7fbff 0%,#edf5ff 100%) !important;
  border:1px solid rgba(219,234,254,.95) !important;
  margin-bottom:12px !important;
}

/* Premium icon-grid cards in guide library */
.hub398-icon-grid a{
  border-radius:26px !important;
  box-shadow:0 18px 42px rgba(15,23,42,.07) !important;
  border:1px solid rgba(191,219,254,.95) !important;
}
.hub398-icon-grid img{
  width:100% !important;
  height:156px !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
  border-radius:20px !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(96,165,250,.14), transparent 40%),
    linear-gradient(180deg,#f7fbff 0%,#edf5ff 100%) !important;
  border:1px solid rgba(219,234,254,.95) !important;
}

/* Featured visual cards */
.hub396-visual-card{
  border-radius:30px !important;
  overflow:hidden !important;
  border:1px solid rgba(191,219,254,.95) !important;
  box-shadow:0 20px 48px rgba(15,23,42,.08) !important;
}
.hub396-visual-card img{
  width:100% !important;
  height:220px !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(59,130,246,.20), transparent 40%),
    linear-gradient(180deg,#07111f 0%,#0a1728 100%) !important;
}

/* Improve compact tool / path cards that have no image but should still feel premium */
.hub363-card,
.hub383-card,
.hub393-path{
  border-radius:24px !important;
  border:1px solid rgba(191,219,254,.75) !important;
  box-shadow:0 14px 34px rgba(15,23,42,.06) !important;
}

/* Responsive */
@media (max-width: 980px){
  .hub391-visual-strip{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media (max-width: 760px){
  .hub391-visual-strip{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .hub391-mini-card img{
    height:132px !important;
  }
  .hub393-tool-card img[src*="/assets/images/v401/tools/"]{
    height:144px !important;
  }
  .hub398-icon-grid img{
    height:136px !important;
  }
  .hub396-visual-card img{
    height:150px !important;
  }
}