/* =====================================================
   MH Theme — Phase 73 light-mode browser fixes
   Scope: homepage Client Words Safari light-mode multicol stability.
   This file loads only on the front page after global product-finish CSS.
   ===================================================== */

/* Safari light-mode Client Words final fix.

   Do not replace the testimonial wall with CSS Grid. CSS Grid fixes the Safari
   paint bug, but it changes the visual rhythm because normal grid rows align to
   the tallest item in each row. This section is a masonry-like testimonial wall,
   so Safari must keep the same multi-column layout as dark mode.

   The actual Safari/light-mode failure was the combination of multicol
   fragmentation plus the newer light-mode outer box-shadows/composited paint
   rules on every card. WebKit has a long-standing issue with box-shadow inside
   CSS multi-column containers, and multicol itself is a fragmentation layout.

   Final approach:
   - Keep multi-column layout in Safari light mode.
   - Keep break-inside rules so cards do not split across columns.
   - Remove only the fragile outer shadows/composited transforms in Safari light
     mode.
   - Use border + background + inset highlight for depth instead.
   - Chrome/Arc and Safari dark mode stay on their existing rules.
*/
@supports (-webkit-hyphens: none) {
  html[data-mht-theme-effective="light"] .mht-proof__grid,
  html[data-mht-theme="light"] .mht-proof__grid {
    display: block !important;
    column-count: 3 !important;
    -webkit-column-count: 3 !important;
    column-gap: clamp(16px, 2vw, 24px) !important;
    -webkit-column-gap: clamp(16px, 2vw, 24px) !important;
    column-fill: balance !important;
    -webkit-column-fill: balance !important;
  }

  html[data-mht-theme-effective="light"] .mht-proof__grid .mht-testimonial,
  html[data-mht-theme="light"] .mht-proof__grid .mht-testimonial {
    display: inline-block !important;
    width: 100% !important;
    margin: 0 0 clamp(16px, 2vw, 24px) !important;
    vertical-align: top !important;

    break-inside: avoid !important;
    break-inside: avoid-column !important;
    -webkit-column-break-inside: avoid !important;
    page-break-inside: avoid !important;

    -webkit-transform: none !important;
    transform: none !important;
    will-change: auto !important;
    backface-visibility: visible !important;
    filter: none !important;

    background:
      radial-gradient(circle at 92% 0%, rgba(230, 216, 255, .40), transparent 44%),
      linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(253, 251, 255, .84)) !important;
    border-color: rgba(76, 52, 93, .18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78) !important;
  }

  html[data-mht-theme-effective="light"] .mht-proof__grid .mht-testimonial--linked,
  html[data-mht-theme="light"] .mht-proof__grid .mht-testimonial--linked {
    transition: border-color 260ms ease, outline-color 260ms ease !important;
    outline: 1px solid transparent !important;
    outline-offset: -1px !important;
  }

  html[data-mht-theme-effective="light"] .mht-proof__grid .mht-testimonial--linked:hover,
  html[data-mht-theme-effective="light"] .mht-proof__grid .mht-testimonial--linked:focus-visible,
  html[data-mht-theme="light"] .mht-proof__grid .mht-testimonial--linked:hover,
  html[data-mht-theme="light"] .mht-proof__grid .mht-testimonial--linked:focus-visible {
    border-color: rgba(142, 99, 163, .30) !important;
    outline-color: rgba(142, 99, 163, .18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .84) !important;
  }

  @media (max-width: 900px) {
    html[data-mht-theme-effective="light"] .mht-proof__grid,
    html[data-mht-theme="light"] .mht-proof__grid {
      column-count: 2 !important;
      -webkit-column-count: 2 !important;
    }
  }

  @media (max-width: 560px) {
    html[data-mht-theme-effective="light"] .mht-proof__grid,
    html[data-mht-theme="light"] .mht-proof__grid {
      column-count: 1 !important;
      -webkit-column-count: 1 !important;
    }
  }
}