/* ============================================================
   HOME PAGE  (page-id-5)
   ============================================================ */

/* ---- Hero image: use the Figma traffic-at-sunset scene ----
   Replaces the builder's beleasing2-section-bg1.webp on the hero
   section (section.mcb-section-ln19wgsr). Override via child theme
   so the parent/builder stays untouched. The image's dark top keeps
   the light header text legible (matches Figma). */
body.home section.mcb-section-ln19wgsr{
  background-image: url("/wp-content/uploads/assets/hero-home.jpg") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* ---- Remove the hero-panel GLASS BOX from the HOME hero only ----
   hero.css applies a translucent glass box (fill + blur + gradient rim)
   to .mcb-wrap-inner-heropanel — that class is meant for the Products /
   About Us hero panels, but the home hero's subhead/body wrap shares the
   same uid ("heropanel"), so it wrongly inherited the box. Here the home
   description text sits directly on the hero photo (Figma). Products/About
   keep their glass panel (not scoped to body.home). */
body.home .mcb-section-ln19wgsr .mcb-wrap-inner-heropanel{
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}
body.home .mcb-section-ln19wgsr .mcb-wrap-inner-heropanel::before{
  display: none !important;
}

/* ============================================================
   MOBILE — stack card grids + kill right-edge overflow
   ============================================================
   The home card/heading sections — "Какво предлагаме" (.mcb-section-ofsec),
   "Реализирани проекти" (.mcb-section-prsec) and the applications section
   (.mcb-section-apsec) — are built (in the page's inline <style>) with:
     • a fixed multi-column grid  (display:grid; repeat(6/3,1fr) + per-card
       grid-column:span N), and
     • a Figma section-title underline `h2.title::after` at a FIXED width:355px
       (underline-accent.svg).
   On a narrow phone (e.g. Galaxy S20 = 360px, content box only 294px) the 355px
   underline forces the heading — and therefore the single grid track and every
   card — to 355px, which overflows the viewport and gets clipped on the right
   by Betheme's `html{overflow-x:hidden}` (so it's cut, not scrollable).

   Fix (mobile only, desktop ≥960 untouched):
     1. single-column grid whose track may shrink below content — minmax(0,1fr)
     2. drop the per-card spans so each card wrap is full-width
     3. cap the fixed-width section underline to the container so it can't
        force overflow (scale the svg to the new width). */
@media (max-width:959px){
  body.home .mcb-section-ofsec > .section_wrapper,
  body.home .mcb-section-prsec > .section_wrapper,
  body.home .mcb-section-apsec > .section_wrapper,
  body.home .mcb-section-vasec > .section_wrapper{
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.home .mcb-section-ofsec > .section_wrapper > .mcb-wrap,
  body.home .mcb-section-prsec > .section_wrapper > .mcb-wrap,
  body.home .mcb-section-apsec > .section_wrapper > .mcb-wrap,
  body.home .mcb-section-vasec > .section_wrapper > .mcb-wrap{
    grid-column: 1 / -1 !important;   /* drop span-N (span-3/2, one-second/third…) → single column */
    width: auto !important;
    min-width: 0 !important;          /* allow the wrap to shrink to the track */
  }
  /* cap the 355px Figma section-title underline to the heading width */
  body.home .mcb-section-ofsec h2.title::after,
  body.home .mcb-section-prsec h2.title::after,
  body.home .mcb-section-apsec h2.title::after,
  body.home .mcb-section-vasec h2.title::after{
    width: 100% !important;
    max-width: 100% !important;
    background-size: 100% 100% !important;   /* scale the 355×7 svg to fit */
  }

  /* hero stats ("общини 100+" …) — the repeat(3,1fr) row can't fit 3 cells on a
     phone; stack them so nothing spills past the right edge */
  body.home .mcb-wrap-herostats > .mcb-wrap-inner{
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }
}

/* Very narrow phones (≤359px, e.g. Galaxy S20's 320px-DPI modes / iPhone SE 1st
   gen). Each hero stat is a [94px icon][48px number] flex row; that's ~272px and
   fits a 360px screen but overflows the ~254px cell at 320px. Shrink the icon +
   number just here so nothing is clipped. 360px+ is untouched. */
@media (max-width:359px){
  body.home .mcb-wrap-herostats .icon-wrapper img{ width:60px !important; height:auto !important; }
  body.home .mcb-wrap-herostats .number{ font-size:36px !important; }
}

/* ============================================================
   "Реализирани проекти" cards — HOVER ANIMATION.
   Ports the Solutions project-card (.ts-pcard) hover onto the Home
   projects section: the card (.mcb-wrap-inner-prcN, N=1..5) lifts,
   fills with the brand gradient + stronger blue glow, and every inner
   element (icon, title, body, button label/icon/border) turns white.
   Selector [class*="mcb-wrap-inner-prc"] matches all 5 project cards
   (prc1–prc5) and only those (products use pbc*, others differ).
   ============================================================ */
body.home [class*="mcb-wrap-inner-prc"]{
  transition: background .28s ease, box-shadow .28s ease, transform .28s ease !important;
}
body.home [class*="mcb-wrap-inner-prc"] .icon-wrapper img,
body.home [class*="mcb-wrap-inner-prc"] .desc-wrapper h6.title,
body.home [class*="mcb-wrap-inner-prc"] .column_attr p,
body.home [class*="mcb-wrap-inner-prc"] a.button,
body.home [class*="mcb-wrap-inner-prc"] a.button .button_label,
body.home [class*="mcb-wrap-inner-prc"] a.button .button_icon i{
  transition: color .28s ease, border-color .28s ease, filter .28s ease !important;
}
/* card hover — gradient fill + lift + glow (matches .ts-pcard:hover) */
body.home [class*="mcb-wrap-inner-prc"]:hover{
  background: linear-gradient(to right,#0e2034,#28609a) !important;
  box-shadow: 0 0 22px rgba(31,94,129,.45) !important;
  transform: translateY(-4px);
}
/* all content -> white */
body.home [class*="mcb-wrap-inner-prc"]:hover .desc-wrapper h6.title,
body.home [class*="mcb-wrap-inner-prc"]:hover .column_attr p,
body.home [class*="mcb-wrap-inner-prc"]:hover a.button,
body.home [class*="mcb-wrap-inner-prc"]:hover a.button .button_label,
body.home [class*="mcb-wrap-inner-prc"]:hover a.button .button_icon i{
  color:#fff !important;
  border-color:#fff !important;
}
/* icon -> white; keep the button transparent (Betheme would otherwise
   fill the stroke button on its own :hover) */
body.home [class*="mcb-wrap-inner-prc"]:hover .icon-wrapper img{
  filter: brightness(0) invert(1);
}
body.home [class*="mcb-wrap-inner-prc"]:hover a.button:hover{
  background: transparent !important;
}