/* ============================================================
   ABOUT US  (pages 14 EN "/en/about-us/" · 162 BG "/za-nas/")
   ============================================================
   The About page reuses the SAME card/heading section components as the home
   page — "What we offer" (.mcb-section-ofsec), "Our approach today"
   (.mcb-section-apsec) and the values section (.mcb-section-vasec) — each with
   a fixed multi-column grid (repeat(N,1fr) + per-card grid-column:span) and a
   Figma section-title underline `h2.title::after` fixed at width:355px, both
   defined in the page's inline <style>.

   On narrow phones the 355px underline forces the heading / grid track / every
   card to 355px, which overflows the viewport and gets clipped on the right by
   Betheme's `html{overflow-x:hidden}` (cut, not scrollable) — and the multi-col
   grid keeps the cards in a horizontal row.

   Same fix as home (pages/home.css): mobile-only single-column grid whose track
   may shrink below content, per-card spans reset, and the underline capped to
   the container. This file is enqueued ONLY on the About pages, so the section-
   uid selectors are safe unscoped. Desktop ≥960 untouched.
   ============================================================ */
@media (max-width:959px){
  .mcb-section-ofsec > .section_wrapper,
  .mcb-section-apsec > .section_wrapper,
  .mcb-section-vasec > .section_wrapper,
  .mcb-section-prsec > .section_wrapper{
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .mcb-section-ofsec > .section_wrapper > .mcb-wrap,
  .mcb-section-apsec > .section_wrapper > .mcb-wrap,
  .mcb-section-vasec > .section_wrapper > .mcb-wrap,
  .mcb-section-prsec > .section_wrapper > .mcb-wrap{
    grid-column: 1 / -1 !important;
    width: auto !important;
    min-width: 0 !important;
  }
  .mcb-section-ofsec h2.title::after,
  .mcb-section-apsec h2.title::after,
  .mcb-section-vasec h2.title::after,
  .mcb-section-prsec h2.title::after{
    width: 100% !important;
    max-width: 100% !important;
    background-size: 100% 100% !important;
  }
}

/* ------------------------------------------------------------
   "Кои сме ние" / "Who we are" — .mcb-section-whosec (two boxes)
   Figma mobile (about-us, node 1378:78551): each box shows its icon
   CENTERED ON TOP, then the paragraph full-width below it.

   Betheme builds these as icon_box_2 with `.mfn-icon-box-left`, i.e. a
   flex ROW: `.mfn-icon-box{display:flex;align-items:center}` +
   `.mfn-icon-box-left .icon-wrapper{width:25%;margin:0 20px 0 0}`. On a
   phone that leaves the paragraph in a ~230px right column wrapping ~4
   words per line (the reported bug). Stack it like the `-top` variant.
   Mobile only (≤767) — desktop/tablet icon-left is unchanged.

   The page's inline <style> (rendered in the body, AFTER this head file) forces
   `.mcb-section-whosec .mfn-icon-box{flex-direction:row!important}` and pins the
   icon to a fixed 58-64px left column. That is a 0,2,0 !important rule, so to beat
   it these overrides keep the `.mcb-section-whosec` prefix AND the column class
   (→ 0,3,0 / 0,4,0) plus !important.
   ------------------------------------------------------------ */
@media (max-width:767px){
  .mcb-section-whosec .mcb-column-inner-whoi1 .mfn-icon-box,
  .mcb-section-whosec .mcb-column-inner-whoi2 .mfn-icon-box{
    flex-direction: column !important;
    align-items: center !important;   /* centre the icon horizontally */
    overflow: visible !important;
  }
  .mcb-section-whosec .mcb-column-inner-whoi1 .mfn-icon-box .icon-wrapper,
  .mcb-section-whosec .mcb-column-inner-whoi2 .mfn-icon-box .icon-wrapper{
    flex: 0 0 auto !important;         /* was flex:0 0 58px (fixed left column) */
    width: auto !important;
    margin: 0 0 20px 0 !important;
    align-self: center !important;
  }
  .mcb-section-whosec .mcb-column-inner-whoi1 .mfn-icon-box .desc-wrapper,
  .mcb-section-whosec .mcb-column-inner-whoi2 .mfn-icon-box .desc-wrapper{
    display: block !important;         /* full-width paragraph below the icon */
    width: 100% !important;
    text-align: left !important;
  }
}