/**
 * Brizy Editor Fixes
 *
 * Fixes for Brizy editor constraints that interfere with custom shortcodes
 * and theme layouts at various breakpoints.
 *
 * File: /assets/css/brizy-preview/brizy-fixes.css
 * Enqueued: functions.php with priority 20
 */

/* ============================================
   FIX: Desktop Container Height Constraint
   ============================================

   Root Cause:
   - Brizy applies height:288px and overflow:hidden to .brz-root__container
   - This clips content below 288px at desktop breakpoint (≥1280px)
   - Navigation (80px) + title (200px) = 280px fits, but search grid at 279px+ is hidden

   Solution:
   - Override with auto height and visible overflow
   - Only applies at desktop breakpoint to avoid affecting mobile/tablet
*/

@media (min-width: 1280px) {
    .brz.brz-root__container.brz-reset-all.brz-root__container-page,
    .brz-root__container-page,
    .brz-root__container {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Also ensure Brizy wrappers don't clip content */
    .brz-wrapper,
    .brz-css-161sior,
    .brz-css-1q26xqe {
        overflow: visible !important;
    }
}

/* ============================================
   Additional Brizy Fixes
   Add more fixes below as needed
   ============================================ */

/* ============================================
   FIX: Brizy Posts loops — 3 columns on tablet
   ============================================

   Context:
   - Brizy's Posts element renders 2 columns in its tablet band (768–991px),
     leaving the casino / game-provider logo cards large (~339px) and only 2-up.
   - The per-item width is class-based (.brz-posts__item has no inline width);
     the only stable hooks are .brz-posts__wrapper / .brz-posts__item.

   Solution:
   - Force 3 columns (33.333% items) within Brizy's tablet band only, so the
     logos drop to ~219px and pack 3-up. Mobile (≤767px) and desktop (≥992px)
     keep Brizy's own layout.
   - !important is required to beat Brizy's compiled 50%-width rule.
   - Applies to every Brizy Posts loop site-wide (intentional design call).
   - Re-test after Brizy plugin updates (theme CSS vs Brizy's compiled CSS).
*/

@media (min-width: 768px) and (max-width: 991px) {
    .brz-posts__wrapper .brz-posts__item {
        width: 33.3333% !important;
        max-width: 33.3333% !important;
        flex-basis: 33.3333% !important;
    }
}