/* ============================================================
   SOLUTIONS — main page section vertical rhythm
   Centralised here (not inline) so spacing stays consistent and
   doesn't drift per rebuild. Matches Products/About Us rhythm:
     hero 150/60 · content ~40-46 top / 56 bottom · stacked 22-30 ·
     grey projects band 56/60 · navy CTA ~48.
   Sections target Betheme's auto class .mcb-section-{uid}.
   Inline page CSS sets backgrounds; padding lives here.
   ============================================================ */
/* Measured from Figma (frame 110:20001): gaps hero->cards 30 · cards->title 45 ·
   title-block->title 46 · objects->grey 40 · grey/navy flush. */
.mcb-section-tshero{ padding:150px 0 60px !important; }  /* same as Products/About hero */
.mcb-section-tstop { padding:30px 0 22px  !important; }
.mcb-section-tsfor { padding:23px 0 23px  !important; }
.mcb-section-tsobj { padding:23px 0 40px  !important; }
.mcb-section-tsproj{ padding:34px 0 50px  !important; }  /* grey band */
.mcb-section-tscta { padding:51px 0 22px  !important; }  /* navy band, flush under grey */

/* Anchor target for the "Completed projects" section (footer link + case-study
   "back to projects" buttons jump to #completed-projects). scroll-margin-top
   offsets the jump so the heading lands below the fixed header, not under it. */
#completed-projects{ scroll-margin-top:110px; }

/* inner content wrappers carry no extra vertical padding (rhythm is on the section) */
.mcb-section-tshero .ts-hero,
.mcb-section-tstop  .ts-top,
.mcb-section-tsfor  .ts-for,
.mcb-section-tsobj  .ts-obj,
.mcb-section-tsproj .ts-proj,
.mcb-section-tscta  .ts-cta{ padding-top:0; padding-bottom:0; }

@media(max-width:767px){
  .mcb-section-tshero{ padding:120px 0 48px !important; }
  .mcb-section-tstop,.mcb-section-tsfor,.mcb-section-tsobj{ padding:28px 0 !important; }
  .mcb-section-tsproj,.mcb-section-tscta{ padding:44px 0 !important; }
}

/* ------------------------------------------------------------------
   Card hover — kill the link text-decoration underline.
   Cards (.ts-card / .ts-pcard) are full-card <a> links, so Betheme's
   a:hover paints a text underline on the title on hover. The bento
   component (Home / Figma bento-grid-solutions-label) has NO text
   underline — only the accent rule bar. Enforce no-underline on all
   same-structure card components, incl. hover + children.
   ------------------------------------------------------------------ */
.ts-card, .ts-pcard,
.ts-card:hover, .ts-pcard:hover,
.ts-card:hover .ts-card-title, .ts-card:hover .ts-card-body, .ts-card:hover .ts-more,
.ts-pcard:hover .ts-pcard-title, .ts-pcard:hover .ts-pcard-body, .ts-pcard:hover .ts-more{
  text-decoration:none !important;
}

/* ------------------------------------------------------------------
   Bento card border/shadow — match Home + Figma bento-grid-solutions-label:
   NO border, radius 10, soft blue halo shadow (0 0 11px #1f5e81), no
   downward/grey border. Hover keeps the stronger glow.
   ------------------------------------------------------------------ */
.ts-card, .ts-pcard{
  border:0 !important;
  border-radius:10px !important;
  box-shadow:0 0 11px #1f5e81 !important;
}
.ts-card:hover, .ts-pcard:hover{
  box-shadow:0 0 22px rgba(31,94,129,.45) !important;
}

/* ------------------------------------------------------------------
   Hero "back" button — glass pill (Figma primary-btn-stroke-backwords,
   node 1623:34698): near-transparent fill + backdrop blur + light rim,
   fully rounded, uppercase light text, left chevron. Right-aligned and
   moved down below the header (was cramped at the very top).
   Covers .sp-back (solution subpages) + .cs-back (case studies).
   ------------------------------------------------------------------ */
.sp-back, .cs-back{
  position:absolute !important;
  top:160px !important;
  right:0 !important;
  display:inline-flex !important;
  align-items:center;
  gap:10px;
  padding:13px 26px !important;
  border-radius:50px !important;
  border:1px solid rgba(255,255,255,.55) !important;
  background:rgba(255,255,255,.06) !important;
  -webkit-backdrop-filter:blur(10px);
          backdrop-filter:blur(10px);
  color:#f4f4f4 !important;
  font:600 14px/1 'Montserrat',sans-serif !important;
  text-transform:uppercase;
  letter-spacing:.03em;
  text-decoration:none !important;
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
/* hover/active (Figma variant 559:12518): solid brand gradient, white text,
   subtle drop shadow — NOT a brightened glass. No link underline. */
.sp-back:hover, .cs-back:hover{
  background:linear-gradient(to left,#28609a,#0e2034) !important;
  border-color:transparent !important;
  box-shadow:1px 2px 4px rgba(151,151,151,.25) !important;
  text-decoration:none !important;
}
/* replace the plain left-arrow glyph with a thin left chevron */
.sp-back .a, .cs-back span{ font-size:0 !important; line-height:0; display:inline-flex; }
.sp-back .a::before, .cs-back span::before{
  content:""; display:inline-block; width:7px; height:7px;
  border-left:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg);
}

/* ------------------------------------------------------------------
   "tell-us-more-form" CTA (Figma node 1623:34685) — match the design on
   solution sub-pages (.sp-cta*) + case studies (.cs-cta*):
     • section background is WHITE (the navy box sits on white, not navy)
     • heading #3b9dc4, 32/700  • subtitle #f4f4f4 16/400  • box radius 10
     • button = transparent + 2px white border, pill, UPPERCASE, right chevron;
       hover fills with the brand gradient (#28609a->#0e2034)
   ------------------------------------------------------------------ */
.mcb-section-spcta, .mcb-section-cscta{ background:#fff !important; }
/* box = the Figma navy + teal diagonal-lines graphic (node 1623:34685 Isolation_Mode) */
.sp-cta-box, .cs-cta-box{
  border-radius:10px !important;
  background:#08182f url(/wp-content/uploads/assets/solutions/cta-lines.png) center/cover no-repeat !important;
}
.sp-cta-box::after, .cs-cta-box::after{ display:none !important; }   /* drop old faint CSS stripes */
.sp-cta-h, .cs-cta-h{ color:#3b9dc4 !important; font-size:32px !important; font-weight:700 !important; }
.sp-cta-p, .cs-cta-p{ color:#f4f4f4 !important; font-size:16px !important; }
.sp-cta-btn, .cs-cta-btn{
  box-sizing:border-box;
  display:inline-flex !important; align-items:center; justify-content:center; gap:8px;
  width:250px; min-width:250px;            /* Figma primary-btn-stroke = 250x38 */
  height:38px;
  background:transparent !important;
  border:2px solid #f4f4f4 !important;
  border-radius:50px !important;
  color:#f4f4f4 !important;
  font:600 16px/1 'Montserrat',sans-serif !important;
  text-transform:uppercase; letter-spacing:.02em;
  padding:0 24px !important;
  text-decoration:none !important;
}
.sp-cta-btn:hover, .cs-cta-btn:hover{
  background:linear-gradient(to left,#28609a,#0e2034) !important;
  border-color:#f4f4f4 !important; color:#f4f4f4 !important;
  text-decoration:none !important;
}
/* right chevron instead of the → glyph */
.sp-cta-btn .a, .cs-cta-btn span{ font-size:0 !important; line-height:0; display:inline-flex; }
.sp-cta-btn .a::before, .cs-cta-btn span::before{
  content:""; display:inline-block; width:7px; height:7px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(-45deg);
}

/* ------------------------------------------------------------------
   "bullet-points-list" cards on solution sub-pages (Figma node 1086:78904).
   Design: white card r10 + soft blue halo (no border); title #253c54 +
   76px accent underline; ROWS ARE PLAIN — check in a light-grey circle +
   text + a thin bottom divider line (#e8e7ea). NOT grey pill boxes.
   ------------------------------------------------------------------ */
.sp-card{
  border:0 !important;
  border-radius:10px !important;
  box-shadow:0 0 11px #1f5e81 !important;
}
.sp-card-head img{ width:48px !important; height:48px !important; }
.sp-card-h{ color:#253c54 !important; }
.sp-card-h::after{ width:76px !important; }
.sp-rows{ gap:0 !important; }
.sp-row{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  gap:16px !important;
  align-items:center;
}
.sp-row > span:last-of-type{          /* the text — carries the divider */
  flex:1;
  border-bottom:1px solid #e8e7ea;
  padding:14px 0 !important;
}
.sp-row .chk{
  background:#f4f4f4 !important;
  width:30px !important; height:30px !important;
}
.sp-row .chk svg path{ stroke:#1f5e84 !important; }

/* ==================================================================
   CASE-STUDY profile/tab pages (Figma "case study - *-obsh-profil",
   frame 947:52001). Body on light-grey #e5e9ec; left = timeline nav
   card; right = white content card. Both white, r10, soft blue halo.
   ================================================================== */
.mcb-section-csbody{ background:#e5e9ec !important; }
.cs-body{ grid-template-columns:360px 1fr !important; gap:28px !important; padding:34px 0 40px !important; }

/* left nav = timeline (vertical line through navy dots; active = #d6f6fc row).
   Must START FROM THE TOP of the column — NOT sticky: the inline page CSS sets
   position:sticky;top:100px, which in a CSS grid with align-items:start makes the
   nav bottom-align in its (taller) content row (Chrome quirk). Force static so the
   nav card top aligns with the content card top on every tab/profile page. */
.cs-nav{
  position:static !important;
  background:#fff !important; border:0 !important; border-radius:10px !important;
  box-shadow:0 0 11px rgba(31,94,129,.3) !important; padding:18px 0 !important; overflow:hidden;
}
/* connecting line drawn as PER-ROW segments at the dot-centre x (=34), each
   contained in its own (position:relative) row. This:
     • spans EXACTLY first-dot-centre -> last-dot-centre, no overhang past the end
       dots (the previous single absolute line escaped the card once .cs-nav became
       static and poked out top/bottom);
     • stays clipped to the card and aligned even when a row label wraps. */
.cs-nav a::before{ content:""; position:absolute; left:32px; width:2px; top:0; bottom:0;
  background:#1f5e84; opacity:.30; z-index:0; }
.cs-nav a:first-child::before{ top:50%; }      /* start at the first (active) dot centre */
.cs-nav a:last-child::before{ bottom:50%; }    /* stop at the last dot centre */
.cs-nav a{
  position:relative; z-index:1; display:flex; align-items:center;
  padding:0 20px 0 60px !important;   /* 60px left = room for the absolute dot (20 + 26 dot + 14 gap) */
  min-height:48px; border:0 !important; border-radius:0 !important;
  color:#3b3a3c !important; font:500 14px/1.3 'Montserrat',sans-serif !important;
  text-transform:uppercase; letter-spacing:.02em;
}
/* dot = a CSS pseudo-element (::after), NOT an empty <span class='d'>.
   WHY: the dots used to be empty <span class='d'></span> hooks; BeBuilder's
   TinyMCE editor strips empty inline elements on save, which deleted every dot
   when the page text was edited. Drawing the dot as ::after (a 26px white circle
   with an 11px navy centre via radial-gradient + navy halo) makes it immune —
   there's no markup for the editor to remove. Any leftover .d span is hidden.
   Centre sits at x=33 (left 20 + 13), exactly on the connecting line. */
.cs-nav a .d{ display:none !important; }
.cs-nav a::after{
  content:""; position:absolute; z-index:2; left:27.5px; top:50%; transform:translateY(-50%);
  width:11px; height:11px; border-radius:50%;
  background:#1f5e84;                       /* navy centre = a REAL circle -> perfectly smooth.
                                               (a radial-gradient stop rendered a hard/bordered edge.) */
  box-shadow:
    0 0 0 7.5px #fff,                        /* white ring -> 26px white circle around the centre */
    0 0 11px 7.5px rgba(31,94,129,1);        /* Figma navy halo around the circle */
}
.cs-nav a:hover{ background:#eef6f9 !important; }
.cs-nav a.on{ background:#d6f6fc !important; color:#1f5e84 !important; font-weight:600 !important; }
/* active dot = solid navy filled circle (current-step marker): make the ring navy too */
.cs-nav a.on::after{
  background:#1f5e84 !important;
  box-shadow:
    0 0 0 7.5px #1f5e84,                     /* navy ring -> solid navy 26px dot */
    0 0 11px 7.5px rgba(31,94,129,1);
}

/* right content = white card */
.cs-content{
  background:#fff !important; border-radius:10px;
  box-shadow:0 0 11px rgba(31,94,129,.3); padding:30px 34px;
}
.cs-ch::after{ width:134px !important; }

/* content rows: light-cyan circle + navy arrow icon, label 15/600 */
.cs-row .ic{ background:#d6f6fc !important; width:40px !important; height:40px !important; }
.cs-row .ic svg{ display:none !important; }
/* row arrow = the exact design block arrow (row-arrow.svg, navy) — not a thin → glyph */
.cs-row .ic::after{ content:""; width:15px; height:15px;
  background:url(/wp-content/uploads/assets/solutions/icons/row-arrow.svg) center/contain no-repeat; }
.cs-row .lb{ color:#3b3a3c !important; font-size:15px !important; font-weight:600 !important; flex-basis:165px !important; }

/* The dropdown is built by JS (functions.php). On desktop the wrapper is
   transparent (display:contents) so .cs-nav renders as the timeline grid item,
   and the built field is hidden. */
.cs-nav-drop{ display:contents; }
.cs-nav-select{ display:none; }

@media(max-width:959px){
  /* Pull the content block up so the CLOSED dropdown card is vertically
     centered on the hero's bottom line (Figma: the select straddles the hero
     bottom). z-index keeps the white card above the hero image. */
  .cs-body{
    grid-template-columns:1fr !important; row-gap:16px !important;
    margin-top:-78px !important; position:relative; z-index:2;
  }
  /* The dropdown card is pulled up over the hero (negative margin). Betheme's
     section/wrap chain is overflow:hidden, which CLIPPED that upward overflow
     so the card's top vanished behind the hero. Let the csbody chain overflow
     visibly so the card (z-index:2) renders on the top layer over the hero. */
  .mcb-section-csbody,
  .mcb-section-csbody > .section_wrapper,
  .mcb-section-csbody .mcb-wrap,
  .mcb-section-csbody .mcb-wrap-inner,
  .mcb-section-csbody .mcb-column,
  .mcb-section-csbody .mcb-column-inner,
  .mcb-section-csbody .column_attr{
    overflow: visible !important;
  }
  .cs-nav{ position:static !important; }

  /* -------- right-edge overflow fix (all solution pages) --------
     Every solution section's .section_wrapper is width:100% but box-sizing
     content-box with 20px side padding, so its border-box is viewport+40px →
     the content is cut on the right (clipped by html{overflow-x:hidden}).
     Pull the padding inside with border-box so each section fits the screen.
     Scoped to #Content so header/footer templates are untouched. */
  #Content .section_wrapper{ box-sizing:border-box !important; }

  /* ================================================================
     CASE-STUDY tab nav → DROPDOWN  (Figma dropdown-field/expand-mob,
     node 1626:37021). The desktop left-timeline is replaced on phones/
     tablet by a compact select: a white card with an "Изберете опция"
     label + a bordered field (current tab + chevron); tapping opens the
     full list of tabs (active row #d6f6fc/#1f5e84, others #3b3a3c, with
     #e8e7ea dividers). JS (functions.php) builds .cs-nav-select and
     toggles .cs-nav-open. Mobile only — desktop timeline untouched.
     ================================================================ */
  /* outer card wraps the field + list into one card (previous good look) */
  .cs-nav-drop{
    display:block;
    background:#fff; border-radius:10px;
    box-shadow:0 0 11px rgba(31,94,129,.3);
    padding:13px;
  }
  /* field group — inside the outer card, no own card background */
  .cs-nav-select{
    display:block; background:transparent; box-shadow:none;
    padding:0; margin:0;
  }
  .cs-nav-select-label{
    display:block; margin:0 0 6px;
    font:400 12px/1 'Montserrat',sans-serif; color:#1f5e84;
  }
  .cs-nav-select-field{
    display:flex; align-items:center; gap:10px;
    width:100%; box-sizing:border-box;
    min-height:41px; padding:8px 14px; margin:0;
    background:#fff; border:1px solid #3b9dc4; border-radius:10px;
    color:#1f5e84; font:600 14px/1.25 'Montserrat',sans-serif; text-transform:uppercase;
    text-align:left; cursor:pointer;
  }
  .cs-nav-select-txt{ flex:1; }
  .cs-nav-select-caret{
    flex:0 0 auto; width:9px; height:9px; margin-left:6px;
    border-right:2px solid #1f5e84; border-bottom:2px solid #1f5e84;
    transform:translateY(-2px) rotate(45deg); transition:transform .2s ease;
  }
  .cs-nav-select.open .cs-nav-select-caret{ transform:translateY(2px) rotate(-135deg); }

  /* inner list panel (Figma Rectangle 57) — its OWN border, inset in the card.
     This is the "one more border" around the listed menu. */
  .cs-nav{
    display:none !important;
    background:#fff !important; border:1px solid #d7e3ec !important; border-radius:8px !important;
    box-shadow:none !important;
    padding:0 !important; margin:11px 0 0 !important; overflow:hidden;
  }
  .cs-nav.cs-nav-open{ display:block !important; }
  /* strip the desktop timeline (connecting line + dots) */
  .cs-nav a::before{ display:none !important; }
  .cs-nav a::after{ display:none !important; }
  .cs-nav a .d{ display:none !important; }
  /* option rows */
  .cs-nav a{
    display:flex !important; align-items:center; position:relative;
    min-height:55px; padding:8px 14px !important; gap:0 !important;
    border:0 !important; border-radius:5px !important;
    font:400 14px/1.3 'Montserrat',sans-serif !important; color:#3b3a3c !important;
    text-transform:uppercase; letter-spacing:0;
  }
  .cs-nav a:not(:last-child){ border-bottom:1px solid #e8e7ea !important; border-radius:0 !important; }
  .cs-nav a:hover{ background:#eef6f9 !important; }
  .cs-nav a.on{
    background:#d6f6fc !important; color:#1f5e84 !important; font-weight:600 !important;
    border-radius:5px !important; border-bottom:0 !important;
  }

  /* ---- Project-overview / profile content rows (icon + label + value) ----
     Desktop lays each row as a flex row: icon | 165px label | value. On a phone
     the fixed 165px label leaves the value ~45px wide → it wraps one char per
     line (broken). Figma stacks the LABEL above the VALUE, beside the icon.
     Only rows that actually have a label (:has(.lb)); the other tabs' plain
     icon+value rows already fit and stay untouched. */
  .cs-row:has(.lb){
    display:grid !important;
    grid-template-columns:40px 1fr;
    column-gap:14px; row-gap:3px;
    align-items:start;
  }
  .cs-row:has(.lb) .ic{ grid-column:1; grid-row:1 / span 2; margin:0 !important; }
  .cs-row:has(.lb) .lb{
    grid-column:2; grid-row:1;
    flex:none !important; flex-basis:auto !important;   /* was 0 0 165px */
  }
  .cs-row:has(.lb) .vl{ grid-column:2; grid-row:2; }

  /* ---- Hero "back to projects" button ----
     Desktop pins it absolute (top:160;right:0). On mobile the hero title is
     taller so the button overlapped the text. Flow it BELOW the hero text
     instead (Figma mobile has no hero back button; we keep it but move it under
     the content). Covers case studies (.cs-back) + solution sub-pages (.sp-back). */
  .cs-hero, .sp-hero{ display:flex; flex-direction:column; }
  .cs-back, .sp-back{
    position:static !important;
    order:99 !important;                 /* after the title (and sub-page panel) */
    align-self:flex-start !important;    /* auto-width pill, left-aligned */
    top:auto !important; right:auto !important; left:auto !important;
    margin:22px 0 0 !important;
  }
  /* case studies: give the "назад към проекти" button the SAME breathing room
     below it as above it (the gap to the title's blue line). The hero grows with
     this margin, and the csbody dropdown (pulled up -78) follows, so the closed
     card stays centred on the hero bottom while the gap under the button opens. */
  .cs-back{ margin-bottom:10px !important; }

  /* ---- Solution sub-pages: first card box STARTS OVER THE HERO ----
     (Figma "solutions-intelligent" mobile, node 1450:23156.) Pull the white
     cards block up so the first card ("Какво постигате") overlaps onto the dark
     hero, matching the design. The back button is KEPT (design omits it) and
     stays at the hero bottom, above the overlap. The section/wrap chain is
     forced overflow:visible so the upward overflow isn't clipped; z-index puts
     the cards above the hero. */
  .mcb-section-sphero, .mcb-section-sphero .section_wrapper,
  .mcb-section-sphero .mcb-wrap, .mcb-section-sphero .mcb-wrap-inner,
  .mcb-section-sphero .mcb-column, .mcb-section-sphero .mcb-column-inner,
  .mcb-section-sphero .column_attr,
  .mcb-section-spcards, .mcb-section-spcards .section_wrapper,
  .mcb-section-spcards .mcb-wrap, .mcb-section-spcards .mcb-wrap-inner,
  .mcb-section-spcards .mcb-column, .mcb-section-spcards .mcb-column-inner,
  .mcb-section-spcards .column_attr{
    overflow:visible !important;
  }
  .sp-cards{ margin-top:-72px !important; position:relative; z-index:2; }
  /* LAYER FIX: the card is normally transparent (its white comes from the spcards
     SECTION bg, whose box stays at the hero line) — so the small overlapping top
     showed the dark hero through it. Give the card its OWN opaque white bg so the
     whole card box (incl. the overlapping top) is visible ON the hero. z-index:2
     on .sp-cards keeps it above the hero. */
  .sp-card{ background:#fff !important; }
}

/* ==================================================================
   Case-study "photos" tab
   ------------------------------------------------------------------
   The photo is printed by the [trsys_case_photo] shortcode from the page's
   Featured Image, inside .cs-content. Keeping it in that raw HTML rather than
   as a builder element is what lets the section keep .cs-body's own spacing
   (34px above / 40px below) and its mobile treatment, identical to every other
   tab. Only the image itself needs styling here.
   ================================================================== */
.cs-content .cs-photo{
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}