/* ===== Shared cards — ONE place for the article card and the course card =====
   Used by: blog archive, home page, related articles, shop, [hb_posts], [hb_courses]. Change a card here → it changes everywhere. */
.hbb-card,.hbsh-card,.hb-rail,.hb-cards{--ink:var(--hb-ink);--gold:var(--hb-gold);--gold-d:var(--hb-gold-dark);--muted:#5a6b64;--line:#e6ebe8;--cream:#f6f3ea;--soft:#f6f3ea;--media:#F3EEDF;font-family:var(--e-global-typography-primary-font-family,inherit);color:var(--ink)}
.hbb-card *,.hbsh-card *{box-sizing:border-box;font-family:inherit}
.hbb-card a:focus-visible,.hbsh-card a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- article card ---------- */
/* shared card bits */
.hbb-card{position:relative;margin:0;background:#fff;border:1px solid var(--line);border-radius:calc(20px * var(--hb-rs));overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.hbb-card:hover{border-color:rgba(var(--hb-gold-rgb),.7);box-shadow:0 18px 44px rgba(var(--hb-ink-rgb),.09);transform:translateY(-3px)}
.hbb-card__media{position:relative;display:block;aspect-ratio:16/10;background:var(--media);overflow:hidden}
/* current thumbnails are square posters → contain; landscape 16:9 images fill naturally */
.hbb-card__media img{display:block;width:100% !important;height:100% !important;max-height:none !important;object-fit:contain !important;transition:transform .4s ease}
.hbb-card:hover .hbb-card__media img{transform:scale(1.03)}
.hbb-card__ph{display:grid;place-items:center;width:100%;height:100%;color:#c7b27c}
.hbb-card__ph svg{width:48px;height:48px}
.hbb-card__body{display:flex;flex-direction:column;flex:1;padding:18px 20px 18px}
.hbb-cat{align-self:flex-start;position:relative;z-index:2;margin-bottom:8px;padding:2px 10px;border-radius:999px;background:var(--cream);color:var(--gold-d) !important;text-decoration:none !important;font-size:12.5px;font-weight:800;line-height:1.9}
.hbb-cat:hover{background:var(--gold);color:var(--ink) !important}
.hbb-card__title{margin:0 0 8px;font-size:17px;font-weight:800;line-height:1.85}
.hbb-card__title a{color:var(--ink) !important;text-decoration:none !important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hbb-card__title a::after{content:"";position:absolute;inset:0;z-index:1} /* whole card clickable, one link in DOM */
.hbb-card__excerpt{margin:0 0 16px;font-size:14px;line-height:2;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hbb-card__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.hbb-meta{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.hbb-meta span[aria-hidden]{color:var(--gold)}

.hbb-card:not(.hbb-card--featured){display:flex;flex-direction:column}

/* ---------- course card ---------- */
.hbsh-card{display:flex;flex-direction:column;margin:0;border:1px solid var(--line);border-radius:calc(20px * var(--hb-rs));overflow:hidden;background:#fff;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.hbsh-card:hover{border-color:rgba(var(--hb-gold-rgb),.7);box-shadow:0 16px 40px rgba(var(--hb-ink-rgb),.09);transform:translateY(-3px)}
.hbsh-card__media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--soft)}
.hbsh-card__media img{display:block;width:100% !important;height:100% !important;object-fit:cover}
.hbsh-badge{position:absolute;top:12px;right:12px;padding:3px 12px;border-radius:999px;background:#fff;color:var(--ink);font-size:12px;font-weight:900;line-height:1.9}
.hbsh-card.is-soon .hbsh-card__media img{filter:grayscale(.35);opacity:.85}
.hbsh-card__body{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}
.hbsh-card__title{margin:0 0 6px;font-size:16.5px;font-weight:900;line-height:1.8}
.hbsh-card__title a{color:var(--ink) !important;text-decoration:none !important}
.hbsh-card__desc{margin:0 0 14px;font-size:13.5px;line-height:1.95;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hbsh-card__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.hbsh-price{font-size:15px;font-weight:900;color:var(--ink)}
.hbsh-price del{font-size:12.5px;font-weight:500;color:#9aa79f}
.hbsh-price ins{text-decoration:none}
.hbsh-card.is-soon .hbsh-price{color:var(--muted);font-weight:700}
.hbsh-card__more{font-size:14px;font-weight:800;color:var(--hb-gold-dark) !important;text-decoration:none !important}
.hbsh-card__more::after{content:" ←"}


/* ---------- grids for [hb_posts layout="grid"] / [hb_courses layout="grid"] ---------- */
.hb-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:20px}
@media (max-width:1024px){.hb-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.hb-cards{grid-template-columns:minmax(0,1fr);gap:14px}}

/* ---------- light carousel (CSS scroll-snap, no Swiper): layout="carousel" ---------- */
.hb-rail{position:relative}
.hb-rail__track{list-style:none;margin:0;padding:4px 2px 10px;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * 20px) / 3);gap:20px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.hb-rail__track::-webkit-scrollbar{display:none}
.hb-rail__track > li{scroll-snap-align:start;min-width:0}
.hb-rail__nav{display:flex;justify-content:center;gap:10px;margin-top:16px}
.hb-rail__btn,.hb-rail__btn:hover,.hb-rail__btn:focus{display:grid;place-items:center;width:46px;height:46px;margin:0;padding:0 !important;border:1.5px solid var(--ink) !important;border-radius:50% !important;background:#fff !important;color:var(--ink) !important;cursor:pointer;transition:background .2s ease,color .2s ease,opacity .2s ease}
.hb-rail__btn:hover{background:var(--ink) !important;color:var(--gold) !important}
.hb-rail__btn:disabled{opacity:.3;cursor:default;background:#fff !important;color:var(--ink) !important}
.hb-rail__btn svg{width:20px;height:20px}
.hb-rail__btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (max-width:1024px){.hb-rail__track{grid-auto-columns:calc((100% - 20px) / 2)}}
@media (max-width:600px){.hb-rail__track{grid-auto-columns:84%;gap:14px}}
@media (prefers-reduced-motion:reduce){.hbb-card,.hbb-card__media img,.hbsh-card,.hb-rail__btn{transition:none}.hb-rail__track{scroll-behavior:auto}}