/* hbgl.css – Harrasteblogi Live Grid (sama kuin edellisessä versiossa) */
:root{--hb-red:#d6111e;--hb-black:#000;--hb-white:#fff;--hb-gold:#ddc76d;--hb-pill-bg:#f6f7f9;--hb-pill-bd:#e6e6ec;--hb-mark:#fffb91;}
#hb-container{max-width:1400px;margin:40px auto;padding:0 20px;font-family:"Open Sans",sans-serif;}
.hb-main-title{text-align:center;color:var(--hb-red);font-size:2.4rem;font-weight:700;margin-bottom:22px;}
#hb-searchbar{display:grid;grid-template-columns:1fr max-content;gap:10px;margin-bottom:16px;}
#hb-searchbar .hb-input-wrap{display:grid;grid-template-columns:1fr max-content max-content max-content max-content;gap:10px;}
#hb-search,#hb-filter,#hb-sort,#hb-cat,#hb-tag{padding:12px 14px;border:1px solid #ddd;border-radius:10px;font-size:1rem;background:#fff;max-width:100%;}
#hb-clear{border:none;background:none;color:var(--hb-red);display:none;cursor:pointer;}
#hb-stats{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:14px 0 22px;}
.hb-stat-btn{display:flex;align-items:center;gap:8px;background:var(--hb-pill-bg);border:1px solid var(--hb-pill-bd);color:#222;padding:8px 12px;border-radius:999px;font-weight:700;font-size:.9rem;}
.hb-stat-btn svg{width:18px;height:18px;fill:var(--hb-red);}
#hb-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.hb-card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.1);transition:.25s;}
.hb-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,.18);}
.hb-header{aspect-ratio:16/9;background-size:cover;background-position:center;position:relative;}
.hb-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,.2));}
.hb-title{position:absolute;left:16px;right:16px;bottom:16px;color:#fff;font-weight:700;text-shadow:0 2px 6px rgba(0,0,0,.4);}
.hb-content{padding:16px;}
.hb-excerpt{margin-bottom:12px;color:#333;}
.hb-mark{background:var(--hb-mark);padding:0 .1em;border-radius:2px}
.hb-share-inline{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.hb-share-inline a,.hb-copylink{display:flex;align-items:center;gap:6px;text-decoration:none;color:#fff;background:#000;padding:6px 10px;border-radius:8px;font-size:.8rem;border:none;cursor:pointer;}
.hb-share-inline a:hover,.hb-copylink:hover{background:var(--hb-red);}
.hb-share-inline svg{width:14px;height:14px;fill:#fff;}
.hb-readmore{background:var(--hb-red);color:#fff;border:none;padding:10px 16px;border-radius:10px;font-weight:700;cursor:pointer;}
.hb-readmore:hover{background:var(--hb-black);}
.hb-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(4px);z-index:99999;justify-content:center;align-items:center;padding:20px;}
.hb-modal.active{display:flex;}
.hb-modal-content{background:#fff;padding:26px;border-radius:14px;max-width:1000px;width:100%;max-height:85vh;overflow:auto;position:relative;}
.hb-modal-close{position:absolute;top:10px;right:14px;font-size:2rem;cursor:pointer;color:#333}
.hb-info{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 16px;}
.hb-badge{display:inline-flex;align-items:center;gap:8px;background:var(--hb-pill-bg);border:1px solid var(--hb-pill-bd);color:#222;padding:8px 12px;border-radius:999px;font-weight:700;font-size:.9rem;}
.hb-badge svg{width:18px;height:18px;fill:var(--hb-red);}
.hb-modal-body{display:grid;grid-template-columns:1.4fr .8fr;gap:24px;}
@media (max-width: 900px){ .hb-modal-body{grid-template-columns:1fr;} }
.hb-modal-left{min-width:0;}
.hb-modal-right{min-width:0;}
.hb-tag-cloud{display:flex;flex-wrap:wrap;gap:10px;perspective:800px;transform-style:preserve-3d;}
.hb-tag-chip{display:inline-flex;align-items:center;gap:6px;background:#ffffff;border:1px solid #e6e6ea;color:#333;padding:8px 12px;border-radius:999px;font-size:.9rem;text-decoration:none;box-shadow:0 6px 14px rgba(0,0,0,.08), inset 0 -2px 0 rgba(0,0,0,.05);transform:translateZ(0) rotateX(0) rotateY(0);transition:transform .25s ease, box-shadow .25s ease, background .25s ease;}
.hb-tag-chip:hover{transform:translateZ(14px) rotateX(6deg) rotateY(-6deg);box-shadow:0 12px 28px rgba(0,0,0,.18), inset 0 -2px 0 rgba(0,0,0,.07);background:#f7f7fa;}
#hb-loadmore-wrap{text-align:center;margin-top:22px;}
#hb-loadmore{background:var(--hb-red);color:#fff;border:none;padding:12px 22px;border-radius:10px;font-size:1.1rem;cursor:pointer;}
#hb-loadmore:hover{background:#000;}
/* Hide taxonomy selects by default; JS toggles when filter==='post' */
#hb-cat,#hb-tag{display:none;}
/* --- UUSI / MUOKATTU -lippu kortissa ja modalissa --- */
.hb-flag {
  position:absolute; top:12px; left:12px;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; font-weight:800; font-size:.85rem;
  color:#fff; letter-spacing:.3px; box-shadow:0 10px 22px rgba(0,0,0,.22);
  backdrop-filter: blur(2px);
}
.hb-flag svg { width:16px; height:16px; fill:#fff; }
.hb-flag.is-new {
  background: linear-gradient(135deg, #d6111e 0%, #dd6d6d 45%, #ddc76d 100%);
  border:1px solid rgba(255,255,255,.18);
}
.hb-flag.is-edited {
  background: linear-gradient(135deg, #2b2e34 0%, #50545c 50%, #aeb4bf 100%);
  border:1px solid rgba(255,255,255,.16);
}
.hb-flag:hover { transform: translateY(-1px); box-shadow:0 14px 28px rgba(0,0,0,.28); }

/* Lisätiedot-paneeli ilmaiskokeilu-tyypille */
.hb-extra-panel{background:#f9fafc;border-radius:12px;padding:12px 14px;border:1px solid #e2e6f0;}
.hb-extra-panel h3{margin-top:0;margin-bottom:10px;font-size:1rem;color:#222;}
.hb-extra-row{display:flex;gap:8px;margin-bottom:6px;align-items:flex-start;}
.hb-extra-row dt{min-width:80px;font-weight:700;font-size:.85rem;color:#444;}
.hb-extra-row dd{margin:0;font-size:.85rem;color:#222;}
.hb-extra-actions{margin-top:10px;}
.hb-extra-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--hb-red);color:#fff;text-decoration:none;padding:8px 14px;border-radius:999px;font-weight:700;font-size:.9rem;}
.hb-extra-btn:hover{background:var(--hb-black);}