/* ============================================================
   PRODUCTS — bento-grid-solutions-label cards
   Match Home + Figma: the card (wrap-inner-pbc*) has NO border and a
   soft blue halo shadow (0 0 11px #1f5e81) — not the grey 1px border +
   downward shadow the builder emitted. Radius stays 10 (already set).
   ============================================================ */
[class*="mcb-wrap-inner-pbc"]{
  border:0 !important;
  box-shadow:0 0 11px #1f5e81 !important;
}

/* ============================================================
   Card HOVER ANIMATION — same effect as the Solutions project
   cards (.ts-pcard) / Home projects cards: the card lifts, fills
   with the brand gradient + stronger glow, and every inner element
   (icon, title, body, button label/icon/border) turns white.
   products.css only loads on the Products pages (23/164), so the
   pbc* selector is safe unscoped.
   ============================================================ */
[class*="mcb-wrap-inner-pbc"]{
  transition: background .28s ease, box-shadow .28s ease, transform .28s ease !important;
}
[class*="mcb-wrap-inner-pbc"] .icon-wrapper img,
[class*="mcb-wrap-inner-pbc"] .desc-wrapper h6.title,
[class*="mcb-wrap-inner-pbc"] .column_attr p,
[class*="mcb-wrap-inner-pbc"] a.button,
[class*="mcb-wrap-inner-pbc"] a.button .button_label,
[class*="mcb-wrap-inner-pbc"] a.button .button_icon i{
  transition: color .28s ease, border-color .28s ease, filter .28s ease !important;
}
[class*="mcb-wrap-inner-pbc"]:hover{
  background: linear-gradient(to right,#0e2034,#28609a) !important;
  box-shadow: 0 0 22px rgba(31,94,129,.45) !important;
  transform: translateY(-4px);
}
[class*="mcb-wrap-inner-pbc"]:hover .desc-wrapper h6.title,
[class*="mcb-wrap-inner-pbc"]:hover .column_attr p{
  color:#fff !important;
}
[class*="mcb-wrap-inner-pbc"]:hover .icon-wrapper img{
  filter: brightness(0) invert(1);
}

/* ------------------------------------------------------------------
   "Изтеглете брошура" button — Figma component "download-brochure-btn"
   (node set 947:67722). Two states:
     • DEFAULT (947:67721): grey #e5e9ec pill, navy #1f5e84 label + a plain
       navy download glyph (NO circle — the web wrapped it in a navy circle;
       Figma has none, so strip it).
     • HOVER  (947:67723): accent #3b9dc4 pill, white #f4f4f4 label + white icon.
   The CARD hover drives the button into the Figma HOVER state.
   The extra `.mcb-section-pbsec` lifts specificity above the inline page CSS
   (which sets these with !important).
   ------------------------------------------------------------------ */
.mcb-section-pbsec [class*="mcb-wrap-inner-pbc"] a.button{
  transition: background .28s ease !important;
  padding:8px 24px !important;   /* balanced now that the 34px icon circle is gone */
}
.mcb-section-pbsec [class*="mcb-wrap-inner-pbc"] a.button .button_label,
.mcb-section-pbsec [class*="mcb-wrap-inner-pbc"] a.button i{
  transition: color .28s ease !important;
}
/* default icon = plain navy download glyph, no navy disc */
.mcb-section-pbsec [class*="mcb-wrap-inner-pbc"] a.button i{
  background:transparent !important; color:#1f5e84 !important;
  width:auto !important; height:auto !important; border-radius:0 !important;
  font-size:19px !important;
}
/* card hover -> Figma button hover state */
.mcb-section-pbsec [class*="mcb-wrap-inner-pbc"]:hover a.button{
  background:#3b9dc4 !important;
}
.mcb-section-pbsec [class*="mcb-wrap-inner-pbc"]:hover a.button .button_label,
.mcb-section-pbsec [class*="mcb-wrap-inner-pbc"]:hover a.button i{
  color:#f4f4f4 !important;
}

/* ============================================================
   MOBILE — CTA "GET IN TOUCH" button (section ctsec)
   ============================================================
   Desktop pins the button absolute to the right of the CTA band. On a phone
   that cramps it: the label wraps to two lines and the `icon-right-open` glyph
   renders as an empty box. Make it match the Solutions sub-page CTA button
   (.sp-cta-btn): a left-aligned white-border pill BELOW the text, single-line
   uppercase label + a crisp CSS right chevron. Mobile only — desktop untouched. */
@media (max-width:959px){
  /* un-pin the button column so it flows below the text, full width */
  .mcb-item-ctb{
    position:static !important; transform:none !important;
    top:auto !important; right:auto !important; left:auto !important;
    width:100% !important;
  }
  /* the pill — single line, with a 30px text→button gap to MATCH the Solutions
     sub-page CTA. The gap is set on the button (not the column): the page's
     inline `.mcb-wrap-ctband .mcb-column{margin:0!important}` (higher specificity)
     forces the column margin to 0, so a column margin can't create the gap. */
  .mcb-item-ctb a.button{
    display:inline-flex !important; align-items:center; gap:10px;
    white-space:nowrap; padding:12px 30px !important;
    margin-top:30px !important;
  }
  .mcb-item-ctb a.button .button_label{ order:1; white-space:nowrap; font-size:15px !important; }
  /* replace the broken icon-right-open glyph with a CSS right chevron (on the right) */
  .mcb-item-ctb a.button .button_icon{
    order:2; display:inline-flex !important; align-items:center;
    width:auto !important; margin:0 !important;
  }
  .mcb-item-ctb a.button .button_icon i{ display:none !important; }
  .mcb-item-ctb a.button .button_icon::before{
    content:""; display:inline-block; width:7px; height:7px;
    border-top:2px solid currentColor; border-right:2px solid currentColor;
    transform:rotate(45deg);
  }
}