/* HB v6-final front */
.hb { color-scheme: light; margin-left:auto; margin-right:auto; display:block; width:100%;
  --hb-bg:#ffffff; --hb-card:#ffffff; --hb-border:#e5e7eb; --hb-text:#0f172a;
  --hb-brand:#336; --hb-title-hover:#0ea5e9; --hb-title-hover-effective: var(--hb-title-hover);
  --hb-pill-bg:#f1f5f9;
  --hb-ar: 16/9; --hb-thumb-ar: 4/3;
}

.hb[data-is-dark="1"]{
  color-scheme: dark;
  --hb-bg:#0b1020; --hb-card:#0f172a; --hb-border:#1f2a44; --hb-text:#e5e7eb;
  --hb-pill-bg: color-mix(in srgb, white 8%, transparent);
  --hb-title-hover-effective: color-mix(in srgb, var(--hb-brand) 65%, white 35%);
}

/* Surfaces */
.hb, .hb .card, .hb .hb-wrap { background: var(--hb-card); }

.hb * { box-sizing:border-box }
.hb a{ text-decoration:none }
.hb img{ display:block; width:100%; height:100%; object-fit:cover }

/* Aspect helpers */
.hb .ar{ aspect-ratio: var(--hb-ar); position:relative; }
.hb .ar-sm{ aspect-ratio: var(--hb-thumb-ar); position:relative; }
.hb .fit{ width:100%; height:100%; object-fit:cover }
.hb .cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }

/* World height sync: right column matches left height (lg+) */
@media (min-width:1024px){
  .hb .world-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.5rem; }
  .hb .world-left{ grid-column: span 2 / span 2; }
  .hb .world-right{ aspect-ratio: 8/9; display:grid; grid-template-rows:repeat(3, 1fr); gap:1.5rem; overflow:hidden; }
  .hb .world-right article{ min-height:0; }
}

/* Wrap */
.hb .hb-wrap{ margin:1.5rem auto; max-width:var(--hb-max, 1400px); padding-left:1rem; padding-right:1rem }

/* Titles */
.hb .hb-title{ margin:0; display:flex; align-items:center; gap:.6rem; font-weight:700; color:var(--hb-text) }
.hb .hb-title .ico{ font-size:1.05em; color:var(--hb-brand) }
.hb .hb-title.accent-left{ padding-left:.75rem; border-left:4px solid var(--hb-brand) }
.hb .hb-title.underline{ padding-bottom:.35rem; border-bottom:2px solid var(--hb-border) }
.hb .hb-title.pill{ padding:.35rem .75rem; border-radius:999px; background:var(--hb-pill-bg); color:var(--hb-text) }

/* Hover lock */
.hb a.post-title:hover, .hb .post-title:hover{ color: var(--hb-title-hover-effective) !important; }

/* Category pill */
.hb .cat-pill{ display:inline-flex; align-items:center; font-size:.75rem; padding:.25rem .5rem; border-radius:999px; background:var(--hb-cat-bg, var(--hb-brand)); color:#fff }

/* Cards */
.hb .card{ border:1px solid var(--hb-border); border-radius:1rem; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.04) }

/* Text utilities */
.hb .line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.hb .line-clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }