/* === Vilni Mobile Responsive Fix — 2026-06-08 (v2) ===
   Three root causes in mcs.styles.css that forced layout wider than viewport
   on phones, clipping content via parent overflow:hidden:
     line 70:  .containerWrapper { min-width: 540px; padding: 0 84px }
     line 73:  .containerPage    { min-width: 540px }
     line 177: .mainBlock        { width: calc(100% + 40px); left: -20px } */

@media screen and (max-width: 600px) {
  /* All three forced-width parents — drop them and let layout reflow */
  .containerPage,
  .containerWrapper {
    min-width: 0 !important;
  }
  .containerWrapper {
    padding: 0 16px !important;
  }
  .mainBlock {
    width: 100% !important;
    left: 0 !important;
    padding-top: 20px !important;
  }
  /* Article/page presentation box — was padding 60px + border-radius 60px,
     way too much on small screens. */
  .containerView--content--present {
    padding: 20px !important;
    border-radius: 20px !important;
  }
  /* Footer — stack the left-menu columns vertically */
  .containerFooter--left--menu {
    display: block !important;
    width: 100% !important;
  }
  .containerFooter--left--menu--block {
    width: 100% !important;
    padding-bottom: 20px;
  }
  /* Hero heading sizing for the first banner section */
  .containerFirst .containerFirst--content--slider h1,
  .containerFirst .containerFirst--content--slider h1 span {
    font-size: 28px !important;
    line-height: 1.2 !important;
    padding-right: 0 !important;
  }
  .containerFirst .containerFirst--content--slider h3 {
    font-size: 18px !important;
    line-height: 1.3 !important;
    padding-right: 0 !important;
  }
  .containerFirst .containerFirst--content--slider {
    padding: 24px !important;
  }
  /* Article view content (right column when sidebar floats) */
  .containerView--content--right {
    margin-left: 0 !important;
  }
  /* Contact-form on view pages — was 750px max with 60px padding */
  .containerForm {
    padding: 24px !important;
    margin: 24px 0 !important;
    border-radius: 20px !important;
  }
  .containerForm h2 { font-size: 22px !important; padding-bottom: 16px !important; }
  .containerForm .containerForm--content .containerForm--label {
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin-bottom: 12px;
  }
  /* Footer badges — make them flex-wrap so they stack on narrow screens */
  .containerFooter--block-list { display: flex !important; flex-wrap: wrap !important; gap: 12px; }
  .containerFooter--logo-list { max-width: 48% !important; }
  .containerFooter--logo-list img { max-width: 100% !important; height: auto !important; }
  .footerLogo { max-width: 100% !important; }
  .containerFooter--logo { max-width: 200px !important; }

  /* Tables in article body — let them scroll horizontally without breaking page */
  .containerArticle--content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* Mainblock tiles font-size — h2 in tiles is 45px, way too big at 320-400px */
  .mainBlock--tile h2 { font-size: 24px !important; }
}