/* ===== Scoped Palette (local to hub) ===== */
#gg-case-hub{
  --teal-900:#003b3b; --teal-800:#014e4e; --teal-600:#0f7570;
  --gold:#d4af37; --mist:#dae7e0; --ink:#223; --muted:#556;
  --card:#ffffff; --bg:#f7faf8;
  position:relative; max-width:1120px; margin-inline:auto; padding:16px 14px 40px;
}

/* HERO */
#gg-case-hub .ggc-hero{
  background:linear-gradient(180deg,var(--teal-800),var(--teal-600));
  border:1px solid rgba(212,175,55,.4);
  border-radius:16px; padding:18px 16px; color:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.12); margin:10px 0 14px;
}
#gg-case-hub .ggc-title{
  margin:0 0 6px; font:800 clamp(26px,3.4vw,38px) "Playfair Display",Georgia,serif; color: white;
}
#gg-case-hub .ggc-sub{
  margin:0; font:500 clamp(14px,1.6vw,16px)/1.5 Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* FILTERS */
#gg-case-hub .ggc-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 8px; }
#gg-case-hub .ggc-tab{
  appearance:none; border:1px solid rgba(212,175,55,.4);
  background:#fff; color:var(--teal-900); font:700 14px/1 Inter,system-ui,sans-serif;
  padding:8px 12px; border-radius:999px; cursor:pointer;
  transition: box-shadow .2s, transform .05s, background .2s;
}
#gg-case-hub .ggc-tab:hover{ box-shadow:0 6px 16px rgba(0,0,0,.08); transform:translateY(-1px); }
#gg-case-hub .ggc-tab.is-active{ background:linear-gradient(180deg,#fff,#f8faf9); border-color:var(--gold); }

#gg-case-hub .ggc-search{ margin:10px 0 18px; }
#gg-case-hub .ggc-search input{
  width:100%; max-width:780px; padding:12px 14px; border-radius:12px;
  border:1px solid rgba(0,0,0,.1); box-shadow:inset 0 1px 2px rgba(0,0,0,.04);
  font:500 15px/1 Inter,system-ui,sans-serif; color:var(--ink);
}

/* GRID */
#gg-case-hub .ggc-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(12,1fr);
}
@media (max-width: 1024px){
  #gg-case-hub .ggc-grid{ grid-template-columns:repeat(8,1fr); }
}
@media (max-width: 768px){
  #gg-case-hub .ggc-grid{ grid-template-columns:repeat(4,1fr); }
}

/* CARD */
#gg-case-hub .ggc-card{
  grid-column: span 6; /* 2-up desktop */
  background:var(--card); border:1px solid rgba(0,0,0,.06); border-radius:16px;
  box-shadow:0 10px 26px rgba(0,0,0,.06); overflow:hidden; display:flex; flex-direction:column;
}
@media (max-width:1024px){ #gg-case-hub .ggc-card{ grid-column: span 8; } } /* 1-up tablet */
@media (max-width:768px){ #gg-case-hub .ggc-card{ grid-column: span 4; } }  /* 1-up mobile */

#gg-case-hub .ggc-image{
  display:block; background:linear-gradient(180deg,#eaf1ee,#dfeae5);
  aspect-ratio: 16/9; width:100%;
  text-decoration:none; position:relative;
}
#gg-case-hub .ggc-image::after{
  content:"Replace with image"; position:absolute; inset:auto 12px 10px; 
  font:700 12px/1 Inter,system-ui,sans-serif; color:#445; opacity:.65;
}

#gg-case-hub .ggc-body{ padding:14px 14px 16px; }
#gg-case-hub .ggc-name{
  margin:0 0 4px; font:800 clamp(18px,2.2vw,22px) "Playfair Display",Georgia,serif; color:var(--teal-900);
}
#gg-case-hub .ggc-meta{
  display:flex; gap:10px; flex-wrap:wrap; list-style:none; margin:0 0 8px; padding:0;
  font:600 12px/1.2 Inter,system-ui,sans-serif; color:#334;
}
#gg-case-hub .ggc-sections{ display:grid; gap:10px; grid-template-columns:repeat(2,1fr); margin-top:8px; }
@media (max-width:768px){ #gg-case-hub .ggc-sections{ grid-template-columns:1fr; } }

#gg-case-hub .ggc-sections h4{
  margin:0 0 4px; font:800 13px/1.1 Inter,system-ui,sans-serif; color:var(--teal-800);
}
#gg-case-hub .ggc-sections p{
  margin:0; font:500 14px/1.55 Inter,system-ui,sans-serif; color:#243;
}

#gg-case-hub .ggc-cta{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; align-items:center;
}
#gg-case-hub .ggc-cta a{
  font:700 13px/1 Inter,system-ui,sans-serif; text-decoration:none;
}
#gg-case-hub .ggc-cta a:hover{ text-decoration:underline; text-underline-offset:2px; }
#gg-case-hub .ggc-btn{
  border:1px solid rgba(212,175,55,.6); color:#fff; background:linear-gradient(180deg,var(--teal-600),var(--teal-800));
  padding:10px 14px; border-radius:999px; box-shadow:0 8px 20px rgba(1,78,78,.22);
  text-decoration:none; display:inline-flex; align-items:center; gap:6px;
}
#gg-case-hub .ggc-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(1,78,78,.28); }
#gg-case-hub .ggc-btn:focus-visible{ outline:none; box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--gold); }

/* FOOTNOTE */
#gg-case-hub .ggc-footnote{
  margin-top:18px; font:500 13px/1.5 Inter,system-ui,sans-serif; color:#334;
}
#gg-case-hub .ggc-footnote a{ color:var(--teal-600); font-weight:700; text-decoration:none; }
#gg-case-hub .ggc-footnote a:hover{ text-decoration:underline; }

/* A11y helpers */
#gg-case-hub .sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;
}

#gg-case-hub .ggc-image{
  display:block; position:relative; overflow:hidden; aspect-ratio:16/9;
}
#gg-case-hub .ggc-image img{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* hide placeholder label */
#gg-case-hub .ggc-image::after{ content:none; }

#gg-case-hub .ggc-image img{ object-fit:cover; object-position:center 20%; }

/* Case-study result pills */
.ggc-pills{
  display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 10px;
}
.ggc-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  font:700 12.5px/1.1 Inter,system-ui,sans-serif;
  color:var(--gg-teal-900, #003B3B);
  background:linear-gradient(180deg,#fff,#f7faf8);
  border:1px solid rgba(212,175,55,.45);
  box-shadow:0 3px 10px rgba(0,0,0,.06);
  white-space:nowrap;
}
.ggc-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--gg-gold,#D4AF37);}

/* ===========================
   "Last updated" strip (scoped)
   Markup:
   <div class="gg-quick-answer" id="gg-updated-strip">
     <strong>Last updated:</strong> <time id="gg-updated-date" datetime=""></time>
   </div>
   =========================== */

#gg-updated-strip{
  display:flex;
  align-items:center;
  gap:8px;
  margin:10px 0 14px;
  padding:12px 14px;
  border:1px solid rgba(212,175,55,.35);              /* gold */
  border-radius:12px;
  background:linear-gradient(180deg,#ffffff,#f7faf8); /* light mist */
  box-shadow:0 3px 10px rgba(0,0,0,.04);
}

/* tiny clock icon */
#gg-updated-strip::before{
  content:"";
  width:14px; height:14px; flex:0 0 14px;
  background-repeat:no-repeat;
  background-size:14px 14px;
  background-image:url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23003b3b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">\
<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>');
  opacity:.9;
}

/* text styles */
#gg-updated-strip strong{
  font:800 14px/1.35 Inter,system-ui,sans-serif;
  color:#003b3b;                                      /* deep teal */
  margin-right:2px;
}
#gg-updated-strip time{
  font:700 13.5px/1.35 Inter,system-ui,sans-serif;
  color:#0f7570;                                      /* teal */
  background:#dae7e0;                                 /* mist */
  border:1px solid #d4af37;                           /* gold */
  border-radius:999px;
  padding:4px 8px;
  letter-spacing:.2px;
  white-space:nowrap;
}

/* if JS hasn’t populated datetime yet, keep it subtle */
#gg-updated-strip time[datetime=""]{
  opacity:.7;
}

/* compact on very small screens */
@media (max-width: 420px){
  #gg-updated-strip{ gap:6px; padding:10px 12px; }
  #gg-updated-strip strong{ font-size:13.5px; }
  #gg-updated-strip time{ font-size:13px; padding:3px 8px; }
}

/* dark mode nicety without touching global theme */
@media (prefers-color-scheme: dark){
  #gg-updated-strip{
    background:linear-gradient(180deg,#0e1a1a,#0b1616);
    border-color:rgba(212,175,55,.45);
    box-shadow:0 3px 10px rgba(0,0,0,.25);
  }
  #gg-updated-strip::before{ opacity:.95; }
  #gg-updated-strip strong{ color:#dae7e0; }
  #gg-updated-strip time{
    color:#dae7e0;
    background:rgba(13,28,28,.55);
    border-color:#d4af37;
  }
}