/* ============================================================
   BUILD-WITH-AI HUB  —  type-specific card grammars
   Three distinct silhouettes so guides, boilerplates, and
   resources never read as the same card:
     .sbh-guide-card  — image-led "magazine" card  (16:9 media top)
     .sbh-bp-card     — "product" card             (window frame + chips)
     .sbh-res-card    — compact "utility" tile      (icon-left, no media)
   Token-driven; loaded standalone (no Tailwind rebuild needed).
   ============================================================ */

/* ---------- Shared 16:9 media frame + gradient cover ---------- */
.sbh-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-2);
}
.sbh-media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

/* Branded gradient cover — the hybrid fallback when there's no
   animated preview or featured image. Hue keyed by badge_color. */
.sbh-cover {
  --cv: var(--accent);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 120% at 28% 22%,
      color-mix(in srgb, var(--cv) 60%, var(--c-ink)) 0%,
      var(--c-ink) 72%);
  transition: transform .4s ease;
}
.sbh-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 78%);
          mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 78%);
}
.sbh-cover-glyph {
  position: relative;
  z-index: 1;
  display: inline-flex;
  padding: .9rem;
  border-radius: 16px;
  background: color-mix(in srgb, var(--cv) 30%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, #fff 22%, transparent) inset;
}
.sbh-cover-glyph svg { width: 2.4rem; height: 2.4rem; color: #fff; }

.sbh-cover--pink   { --cv: var(--accent); }
.sbh-cover--teal   { --cv: var(--signal); }
.sbh-cover--yellow { --cv: var(--warn); }
.sbh-cover--purple { --cv: var(--accent-2); }
.sbh-cover--coral  { --cv: var(--accent-3); }

/* ============================================================
   ① GUIDE CARD  —  image-led magazine card
   ============================================================ */
.sbh-guide-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sbh-guide-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}
.sbh-guide-card:hover .sbh-media-img,
.sbh-guide-card:hover .sbh-cover { transform: scale(1.04); }

.sbh-guide-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.15rem 1.25rem 1.35rem;
}
.sbh-guide-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .65rem; }
.sbh-guide-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: .35rem;
}
.sbh-guide-desc {
  flex: 1;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--muted);
}
.sbh-guide-cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .95rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--accent);
}
.sbh-guide-cta svg { width: 1rem; height: 1rem; transition: transform .18s ease; }
.sbh-guide-card:hover .sbh-guide-cta svg { transform: translateX(3px); }

/* ============================================================
   ② BOILERPLATE CARD  —  product card (window frame + chips)
   ============================================================ */
.sbh-bp-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* Edge-to-edge featured image: bleed past the card padding to the rounded edges */
.sbh-bp-media {
  position: relative;
  margin: -1.1rem -1.1rem 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.sbh-bp-card:hover .sbh-bp-media .sbh-media-img { transform: scale(1.04); }
.sbh-bp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}
.sbh-bp-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--c-ink);
}
.sbh-bp-bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .7rem;
  background: color-mix(in srgb, var(--c-ink) 88%, #000);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.sbh-bp-dot { width: .62rem; height: .62rem; border-radius: 50%; }
.sbh-bp-dot--r { background: #ff5f57; }
.sbh-bp-dot--y { background: #febc2e; }
.sbh-bp-dot--g { background: #28c840; }
.sbh-bp-bar-label {
  margin-left: .35rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--c-ink-400);
}
.sbh-bp-screen { position: relative; aspect-ratio: 16 / 9; }

.sbh-bp-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.sbh-bp-stack {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 600;
  color: var(--ink);
}
.sbh-bp-stack svg { width: 1.1rem; height: 1.1rem; }
.sbh-bp-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: .35rem;
}
.sbh-bp-desc { font-size: .9rem; line-height: 1.55; color: var(--muted); }
.sbh-bp-tech {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: auto;
  padding-top: .25rem;
}
.sbh-chip {
  font-family: var(--font-mono);
  font-size: .68rem;
  padding: .2rem .55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--muted);
  background: var(--surface-2);
}
.sbh-pill-soon {
  display: inline-flex;
  align-items: center;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .28rem .7rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  background: color-mix(in srgb, var(--warn) 22%, transparent);
  color: color-mix(in srgb, var(--warn) 50%, var(--ink));
}

/* ============================================================
   ③ RESOURCE CARD  —  compact utility tile (icon-left, no media)
   ============================================================ */
.sbh-res-card {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.1rem;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.sbh-res-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}
.sbh-res-icon { flex-shrink: 0; }
.sbh-res-body { flex: 1; min-width: 0; }
.sbh-res-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: .98rem;
  color: var(--ink);
}
.sbh-res-arrow {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--muted);
  transition: transform .16s ease, color .16s ease;
}
.sbh-res-card:hover .sbh-res-arrow { transform: translateX(3px); color: var(--accent); }
.sbh-res-desc {
  display: block;
  margin-top: .2rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .sbh-guide-card, .sbh-bp-card, .sbh-res-card,
  .sbh-media-img, .sbh-cover, .sbh-guide-cta svg, .sbh-res-arrow {
    transition: none;
  }
  .sbh-guide-card:hover .sbh-media-img,
  .sbh-guide-card:hover .sbh-cover { transform: none; }
}