/* ============================================================
   OneGIG site-wide design systems.
   Focus  = the base look (default). No overrides here; pages render as authored.
   Classic = the base frame too (its distinct treatment is the landing long-page).
   Bento  = an ADDITIVE override layer applied to the shared frame on every page,
            so choosing Bento reskins the whole platform into the command-center
            language: rounded widget cards, hairline borders, soft surfaces,
            petrol hero bands with the strata accent, and lime CTAs.
   Brand tokens are reused from each page's :root (never redefined here).
   Loaded AFTER each page's own <style> so equal-specificity rules win, and the
   html[data-design="bento"] prefix keeps specificity above the base classes.
   ============================================================ */

/* ---- Bento: surfaces & rhythm ---- */
html[data-design="bento"] body { background: #EEF3F2; }

/* ---- Bento: widget cards ---- */
html[data-design="bento"] .card,
html[data-design="bento"] .cards > * {
  border-radius: 18px;
  border: 1px solid var(--line, #DCE3E3);
  box-shadow: 0 4px 18px rgba(0, 61, 68, .06);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
html[data-design="bento"] .card:hover,
html[data-design="bento"] .cards > a:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 61, 68, .12);
  border-color: rgba(0, 61, 68, .18);
}

/* ---- Bento: hero becomes a floating rounded panel with a strata accent ---- */
html[data-design="bento"] .hero {
  border-radius: 20px;
  margin: 16px 16px 0;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 61, 68, .16);
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg,
    var(--c-gig, #48822A) 0 25%, var(--c-afico, #ED1C24) 25% 50%,
    var(--c-srw, #FEB600) 50% 75%, var(--c-bcoms, #002475) 75% 100%) 1;
}
@media (max-width: 760px) {
  html[data-design="bento"] .hero { margin: 10px 10px 0; border-radius: 16px; }
}

/* ---- Bento: section headings get a lime kicker tick ---- */
html[data-design="bento"] .section-head { position: relative; padding-inline-start: 14px; }
html[data-design="bento"] .section-head::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .18em; bottom: .18em;
  width: 4px; border-radius: 4px; background: var(--lime, #C1FA00);
}

/* ---- Bento: lime accent for primary calls to action ---- */
html[data-design="bento"] .btn.primary,
html[data-design="bento"] .btn-primary,
html[data-design="bento"] button.primary {
  background: var(--lime, #C1FA00);
  color: var(--petrol, #003D44);
  border-color: var(--lime, #C1FA00);
}

/* ---- Bento: crumbs sit flush under the floating hero ---- */
html[data-design="bento"] .crumbs { background: transparent; border-block-end-color: transparent; }