/**
 * INDUSTRII Grid Override CSS - FIXED VERSION
 *
 * Purpose: Style the INDUSTRII menu (iqitmegamenu) to match the Produse menu (ps_custom_menu_tab)
 * Target: .industrii-grid-styled class (added via JavaScript)
 *
 * ACTUAL STRUCTURE DETECTED:
 * .cbp-hrsub-inner
 *   └── .container
 *       └── .row.menu_row.menu-element
 *           └── .col-4.cbp-menu-column
 *               └── .cbp-menu-column-inner
 *                   ├── <a class="cbp-column-title">Title</a>
 *                   └── <a><img class="cbp-banner-image"></a>
 *
 * @author    Steag.ro Development Team
 * @version   2.0.0 (Fixed)
 * @date      2025-01-13
 */

/* ============================================
   Dropdown Container Width Override
   Force full width (12 columns) like Produse menu
   ============================================ */

.industrii-grid-styled .cbp-hrsub {
    /* Override col-6 to full width */
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* ============================================
   Grid Wrapper (Height Constraint Container)
   Exact match with Produse menu
   ============================================ */

.industrii-grid-styled .cbp-hrsub-inner {
    min-height: calc(95vh - 200px) !important;
    max-height: calc(95vh - 200px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 15px !important;
    box-sizing: border-box !important;
}

/* Custom scrollbar styling */
.industrii-grid-styled .cbp-hrsub-inner::-webkit-scrollbar {
    width: 6px;
}

.industrii-grid-styled .cbp-hrsub-inner::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.industrii-grid-styled .cbp-hrsub-inner::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.industrii-grid-styled .cbp-hrsub-inner::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

/* ============================================
   Grid Container
   ============================================ */

.industrii-grid-styled .menu_row {
    overflow: visible !important;
    margin-bottom: 20px !important;
    margin-left: -10px !important;  /* Compensate for column padding */
    margin-right: -10px !important; /* Creates proper gutter system */
}

.industrii-grid-styled .cbp-menu-column {
    margin-bottom: 20px !important; /* Exact match with Produse (.custom-menu-grid-col) */
    position: relative;
    overflow: visible !important;
    z-index: 1;
    padding-left: 10px !important;  /* Match Produse menu column gutters */
    padding-right: 10px !important;
}

/* Increase z-index when hovered */
.industrii-grid-styled .cbp-menu-column:hover {
    z-index: 100;
}

/* ============================================
   Grid Item (Card) - HORIZONTAL LAYOUT
   Transform from vertical (title top, image bottom)
   to horizontal (image left 40%, title right 60%)
   ============================================ */

.industrii-grid-styled .cbp-menu-column-inner {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important; /* Match Produse: height 100% to fill column */
    min-height: 180px !important; /* Match Produse: minimum height for horizontal layout */
    display: flex !important;
    flex-direction: row !important; /* HORIZONTAL: Image LEFT, Content RIGHT */
    align-items: stretch !important;
    transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1);
    position: relative;
    overflow: visible !important;
}

/* Hover Effect: Lift & Shadow */
.industrii-grid-styled .cbp-menu-column-inner:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    border-color: #2fb5d2;
    z-index: 10;
}

/* ============================================
   Image (LEFT SIDE - 40% width)
   Move from bottom to left side
   ============================================ */

/* Target the <a> tag that contains the image */
.industrii-grid-styled .cbp-menu-column-inner > a:not(.cbp-column-title) {
    flex: 0 0 40% !important;
    max-width: 40%;
    height: 100% !important;
    overflow: hidden;
    border-radius: 4px 0 0 4px;
    background: #f5f5f5;
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    order: -1; /* Force image link to appear first (left side) */
    margin: 0 !important;
    padding: 0 !important;
}

.industrii-grid-styled .cbp-menu-column-inner > a:not(.cbp-column-title) img,
.industrii-grid-styled .cbp-menu-column-inner img.cbp-banner-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important; /* Keep image centered */
    max-width: none !important;
    /* Removed transition - no hover effect on images */
}

/* Image Hover Effect: REMOVED - causing position issues on large screens */
/* No transform on hover to prevent image shifting */

/* ============================================
   Title/Content (RIGHT SIDE - 60% width)
   Move from top to right side
   ============================================ */

.industrii-grid-styled .cbp-column-title {
    flex: 1 !important;
    padding: 20px !important; /* Match Produse (.custom-menu-grid-item-content) */
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start !important; /* TOP ALIGNED - Match Produse, NOT centered */
    align-items: flex-start !important;
    font-size: 18px !important; /* Match Produse (.custom-menu-grid-item-title) */
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    color: #414141 !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
    border-bottom: none !important;
    border: none !important;
    order: 1; /* Ensure title comes after image */
}

.industrii-grid-styled .cbp-column-title:hover {
    color: #2fb5d2 !important;
    text-decoration: none !important;
    background: transparent !important;
}

/* ============================================
   Responsive Design
   ============================================ */

/* Tablets (768px - 991px) */
@media (max-width: 991px) {
    .industrii-grid-styled .cbp-hrsub-inner {
        min-height: calc(90vh - 150px) !important;
        max-height: calc(90vh - 150px) !important;
    }

    .industrii-grid-styled .cbp-menu-column-inner {
        height: 100% !important;
        min-height: 160px !important;
    }

    .industrii-grid-styled .cbp-column-title {
        font-size: 16px !important;
        padding: 15px !important;
    }
}

/* Mobile Devices (up to 767px) - SWITCH TO VERTICAL LAYOUT */
@media (max-width: 767px) {
    .industrii-grid-styled .cbp-hrsub-inner {
        min-height: calc(90vh - 120px) !important;
        max-height: calc(90vh - 120px) !important;
        padding: 10px !important;
    }

    .industrii-grid-styled .cbp-menu-column {
        margin-bottom: 15px;
        /* Force 1 column on mobile */
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* VERTICAL LAYOUT on mobile: Stack image on top, content below */
    .industrii-grid-styled .cbp-menu-column-inner {
        flex-direction: column !important;
        min-height: auto;
        padding: 15px !important;
    }

    .industrii-grid-styled .cbp-menu-column-inner > a:not(.cbp-column-title) {
        flex: 0 0 auto !important;
        max-width: 100% !important;
        height: 150px !important;
        border-radius: 4px 4px 0 0 !important;
        margin-bottom: 15px !important;
    }

    .industrii-grid-styled .cbp-column-title {
        padding: 0 !important;
        font-size: 16px !important;
        text-align: center !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Disable hover effects on touch devices */
    .industrii-grid-styled .cbp-menu-column-inner:hover {
        transform: none;
        box-shadow: none;
    }

    /* Image hover already disabled globally - no need to override */
}

/* Small Mobile (up to 575px) */
@media (max-width: 575px) {
    .industrii-grid-styled .cbp-column-title {
        font-size: 14px !important;
    }
}

/* ============================================
   Accessibility
   ============================================ */

/* Focus styles for keyboard navigation */
.industrii-grid-styled .cbp-column-title:focus,
.industrii-grid-styled .cbp-menu-column-inner > a:focus {
    outline: 2px solid #2fb5d2;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .industrii-grid-styled .cbp-menu-column-inner {
        border: 2px solid #000;
    }

    .industrii-grid-styled .cbp-column-title:hover {
        color: #000 !important;
        text-decoration: underline;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .industrii-grid-styled .cbp-menu-column-inner,
    .industrii-grid-styled .cbp-column-title {
        transition: none;
    }

    .industrii-grid-styled .cbp-menu-column-inner:hover {
        transform: none;
    }

    /* Image hover already disabled globally */
}

/* ============================================
   IQIT Megamenu Integration Fixes
   ============================================ */

/* Override default IQIT margins */
.industrii-grid-styled .iqitmegamenu-submenu-container > .row:last-child,
.industrii-grid-styled .iqitmegamenu-submenu-container > .menu_row:last-child {
    margin-bottom: 0 !important;
}

.industrii-grid-styled .menu_row:last-child {
    margin-bottom: 0 !important;
}

/* Remove any default bottom margin from last columns */
.industrii-grid-styled .menu_row:last-child .cbp-menu-column {
    margin-bottom: 0 !important;
}

/* Fix container padding */
.industrii-grid-styled .cbp-hrsub-inner .container {
    padding-left: 0;
    padding-right: 0;
}

/* ============================================
   Column Width Support (Match Bootstrap Grid)
   ============================================ */

@media (min-width: 768px) and (max-width: 991px) {
    .industrii-grid-styled .menu_row > .col-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .industrii-grid-styled .menu_row > .col-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .industrii-grid-styled .menu_row > .col-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 992px) {
    .industrii-grid-styled .menu_row > .col-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .industrii-grid-styled .menu_row > .col-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .industrii-grid-styled .menu_row > .col-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}