/* HansamBio Brand Add-on v10
   Visual upgrades for consumer brand + clean elegance.
   Adds: chips, ribbons, story strip, section dividers, thumbnail overlays.
*/

:root{
  --hsb-line: rgba(255,255,255,.10);
  --hsb-line2: rgba(255,255,255,.18);
  --hsb-ink: rgba(9,12,20,.92);
}
body.theme-light{
  --hsb-line: rgba(0,0,0,.10);
  --hsb-line2: rgba(0,0,0,.16);
  --hsb-ink: rgba(255,255,255,.92);
}

/* ===== Subtle section divider (adds rhythm like brand sites) ===== */
.hsb-fp .hsb-wrap{ position:relative; }
.hsb-fp .hsb-wrap::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-14px;
  height:1px;
  background: linear-gradient(90deg, transparent, var(--hsb-line2), transparent);
  opacity:.85;
}

/* ===== Thumbnail overlay polish (improves text legibility) ===== */
.hsb-card .thumb::after,
.card-prod .thumb::after,
.card-news .thumb::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.28) 72%, rgba(0,0,0,.38) 100%);
  opacity:.55;
}
body.theme-light .hsb-card .thumb::after{ opacity:.25; }

.hsb-card .thumb{ position:relative; }

/* ===== Chips row (Hansamin-like quick emphasis without becoming a mall) ===== */
.hsb-chiprow{
  margin-top: 14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.hsb-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--hsb-line2);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  color: var(--hsb-text);
  text-decoration:none;
  font-weight: 850;
  letter-spacing: .1px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.hsb-chip:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
}

/* ===== Ribbons (BEST / NEW) ===== */
.hsb-ribbon{
  position:absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 7px 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent, #7aa7ff), var(--accent2, #57e3ff));
  color: #0b1020;
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .08em;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}
.hsb-ribbon.new{
  background: linear-gradient(90deg, var(--accent3, #9a7bff), var(--accent2, #57e3ff));
}

/* ===== Story strip (CBN-like credibility + Hansamin-like storyline) ===== */
.hsb-story .hsb-bg{
  background:
    radial-gradient(1100px 520px at 20% 30%, rgba(255,255,255,.08), transparent 62%),
    radial-gradient(900px 520px at 80% 10%, rgba(255,255,255,.06), transparent 60%);
}
.hsb-story-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.hsb-story-step{
  border-radius: var(--hsb-radius-lg);
  border: 1px solid var(--hsb-line);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  padding: 18px 18px;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
}
.hsb-story-step .ico{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  background: rgba(0,0,0,.18);
  border: 1px solid var(--hsb-line2);
}
body.theme-light .hsb-story-step .ico{ background: rgba(255,255,255,.75); }
.hsb-story-step .t{ margin-top:10px; font-weight: 950; font-size: 16px; }
.hsb-story-step .d{ margin-top:8px; color: var(--hsb-muted); line-height:1.6; }

/* ===== Typography scaling (PC readability) ===== */
@media (min-width: 1100px){
  .hsb-title{ font-size: clamp(34px, 2.6vw, 44px); }
  .hsb-sub{ font-size: 16px; line-height: 1.7; }
  .hsb-card .body .t{ font-size: 18px; }
  .hsb-card .body .d{ font-size: 14px; }
}

/* ===== Mobile tuning ===== */
@media (max-width: 860px){
  .hsb-chip{ width:100%; justify-content:center; }
  .hsb-story-grid{ grid-template-columns: 1fr; }
  .hsb-ribbon{ top: 10px; left: 10px; }
}

/* ===== Reveal stagger ===== */
.hsb-grid .reveal,
.hsb-story-grid .reveal,
.partner-grid .reveal,
.papers-grid .reveal{
  transition-delay: calc(var(--i, 0) * 45ms);
}