/* =========================================================================
   Bumblebee Offer Showcase — cards + popup
   Matches the site: Kalnia headings, Jost body, gold accent, dark cards.
========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Kalnia:wght@400;500;600;700&display=swap');

.bbsc{
  --bb-heading-font:"Kalnia",Georgia,serif;
  --bb-body-font:"Jost","Poppins",sans-serif;
  --bb-accent:#C79A3B;
  --bb-gold:#E7C57E;
  --bb-ink:#211b14;
  --bb-muted:#6f685e;
  --bb-panel:#17130d;
  --bb-line:rgba(27,22,17,.10);
  --bb-ease:cubic-bezier(.22,.61,.36,1);
  font-family:var(--bb-body-font);color:var(--bb-ink);
  padding:90px 20px;
}
@media (max-width:640px){ .bbsc{ padding:60px 16px; } }
.bbsc *,.bbsc *::before,.bbsc *::after{ box-sizing:border-box; }
.bbsc__inner{ max-width:1200px;margin-inline:auto; }

/* header */
.bbsc-head{ display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:end;margin-bottom:44px; }
@media (max-width:820px){ .bbsc-head{ grid-template-columns:1fr;gap:14px;align-items:start;margin-bottom:30px; } }
.bbsc-eyebrow{ display:flex;align-items:center;gap:12px;color:var(--bb-accent);font-family:var(--bb-heading-font);font-size:20px;margin-bottom:10px; }
.bbsc-eyebrow .bbsc-diamond{ width:9px;height:9px;transform:rotate(45deg);border:1.5px solid var(--bb-accent);flex:0 0 9px; }
.bbsc-eyebrow .bbsc-eline{ width:56px;height:1px;background:var(--bb-accent);opacity:.7; }
.bbsc .bbsc-title{ font-family:var(--bb-heading-font)!important;font-weight:400!important;color:var(--bb-ink)!important;
  font-size:clamp(34px,5.2vw,58px)!important;line-height:1.12!important;margin:0!important;padding:0!important; }
.bbsc-head__right p{ margin:0;color:var(--bb-muted);font-size:17px;line-height:1.75; }

/* cards */
.bbsc-grid{ display:grid;grid-template-columns:repeat(var(--bbsc-cols,3),1fr);gap:26px; }
@media (max-width:900px){ .bbsc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .bbsc-grid{ grid-template-columns:1fr; } }

.bbsc-card{ display:flex;flex-direction:column;min-height:320px;
  background:var(--bb-panel);border-radius:18px;color:#fff;position:relative;overflow:hidden;
  box-shadow:0 16px 40px rgba(27,22,17,.16);transition:transform .5s var(--bb-ease),box-shadow .5s var(--bb-ease); }
.bbsc-card:hover{ transform:translateY(-6px);box-shadow:0 28px 60px rgba(27,22,17,.28); }

/* top image */
.bbsc-card__media{ position:relative;aspect-ratio:16/10;overflow:hidden;background:#0e0b07; }
.bbsc-card__media img{ width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--bb-ease); }
.bbsc-card:hover .bbsc-card__media img{ transform:scale(1.06); }
.bbsc-card__media .bbsc-card__count{ position:absolute;top:14px;right:14px;background:rgba(12,9,5,.6);
  padding:6px 12px;border-radius:999px;backdrop-filter:blur(3px); }

/* content panel */
.bbsc-card__panel{ display:flex;flex-direction:column;gap:16px;padding:26px 30px 30px;flex:1;position:relative; }
.bbsc-card__panel::before{ content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--bb-accent),transparent); }
.bbsc-card--noimg .bbsc-card__panel{ padding-top:32px; }

.bbsc-card__top{ display:flex;align-items:center;justify-content:space-between; }
.bbsc-card__icon{ width:52px;height:52px;border-radius:50%;background:rgba(199,154,59,.16);color:var(--bb-gold);display:grid;place-items:center; }
.bbsc-card__icon svg{ width:26px;height:26px; }
.bbsc-card__count{ color:var(--bb-gold);font-size:13px;font-weight:600;letter-spacing:.04em; }
.bbsc-card__mid{ flex:1;display:flex;flex-direction:column;gap:10px; }
.bbsc .bbsc-card__title{ font-family:var(--bb-heading-font)!important;font-weight:400!important;color:#fff!important;
  font-size:clamp(24px,2.2vw,30px)!important;line-height:1.15!important;margin:0!important;padding:0!important; }
.bbsc-card__blurb{ margin:0;color:rgba(255,255,255,.72);font-size:14.5px;line-height:1.6; }

.bbsc-btn{ align-self:flex-start;display:inline-flex;align-items:center;gap:9px;cursor:pointer;border:0;
  background:var(--bb-accent);color:#1a1408;font-family:var(--bb-body-font);font-weight:700;font-size:14px;letter-spacing:.02em;
  padding:13px 24px;border-radius:999px;transition:background .3s,transform .3s,box-shadow .3s; }
.bbsc-btn:hover{ background:var(--bb-gold);transform:translateY(-1px);box-shadow:0 10px 24px rgba(199,154,59,.4); }
.bbsc-btn svg{ width:17px;height:17px;transition:transform .3s; }
.bbsc-btn:hover svg{ transform:translateX(3px); }

/* ---------- popup ---------- */
.bbsc-modal{ position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px; }
.bbsc-modal[hidden]{ display:none; }
.bbsc-modal__backdrop{ position:absolute;inset:0;background:rgba(12,9,5,.62);backdrop-filter:blur(3px);animation:bbscFade .25s ease; }
.bbsc-modal__dialog{ position:relative;width:100%;max-width:720px;max-height:86vh;display:flex;flex-direction:column;
  background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.4);animation:bbscPop .28s var(--bb-ease); }
@keyframes bbscFade{ from{opacity:0} to{opacity:1} }
@keyframes bbscPop{ from{opacity:0;transform:translateY(16px) scale(.98)} to{opacity:1;transform:none} }

.bbsc-modal__head{ display:flex;align-items:center;gap:14px;padding:22px 26px;background:var(--bb-panel);color:#fff;position:relative; }
.bbsc-modal__head::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--bb-accent),transparent); }
.bbsc-modal__icon{ width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:rgba(199,154,59,.16);color:var(--bb-gold);display:grid;place-items:center; }
.bbsc-modal__icon svg{ width:22px;height:22px; }
.bbsc-modal__title{ font-family:var(--bb-heading-font);font-weight:400;font-size:24px;margin:0;flex:1;color:#fff; }
.bbsc-modal__close{ background:transparent;border:0;color:#fff;font-size:30px;line-height:1;cursor:pointer;opacity:.8;padding:0 4px; }
.bbsc-modal__close:hover{ opacity:1;color:var(--bb-gold); }

.bbsc-modal__body{ padding:8px 26px 24px;overflow-y:auto; }

.bbsc-offer{ display:flex;gap:16px;padding:20px 0;border-bottom:1px dashed var(--bb-line); }
.bbsc-offer:last-child{ border-bottom:0; }
.bbsc-offer__img{ width:96px;height:96px;flex:0 0 96px;border-radius:12px;background:#eee center/cover no-repeat; }
.bbsc-offer__main{ flex:1;min-width:0; }
.bbsc-offer__head{ display:flex;align-items:baseline;gap:10px;flex-wrap:wrap; }
.bbsc-offer__name{ font-family:var(--bb-body-font);font-weight:600;font-size:17px;color:var(--bb-ink);margin:0; }
.bbsc-offer__badge{ background:var(--bb-accent);color:#1a1408;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 10px;border-radius:999px; }
.bbsc-offer__desc{ margin:6px 0 0;color:var(--bb-muted);font-size:14px;line-height:1.55; }
.bbsc-offer__points{ list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px; }
.bbsc-offer__points li{ display:flex;align-items:flex-start;gap:10px;color:#403a31;font-size:14.5px;line-height:1.45; }
.bbsc-offer__points svg{ width:18px;height:18px;flex:0 0 18px;color:var(--bb-accent);margin-top:1px; }

.bbsc-empty{ color:var(--bb-muted);font-style:italic;text-align:center; }

@media (max-width:480px){
  .bbsc-offer__img{ width:70px;height:70px;flex-basis:70px; }
  .bbsc-modal__body{ padding:8px 18px 20px; }
}
@media (prefers-reduced-motion:reduce){
  .bbsc *{ transition:none!important;animation:none!important; }
}