/**
 * Banner Grid Pro - Styles
 * Advanced grid/collage widget with RTL support
 */

/* ===== BASE STYLES ===== */
.bgp-container {
    width: 100%;
    position: relative;
}

.bgp-grid {
    width: 100%;
}

.bgp-card {
    border-radius: inherit;
    box-sizing: border-box;
}

.bgp-card * {
    box-sizing: border-box;
}

/* Ensure cards fill their containers */
.bgp-card {
    height: 100%;
}

/* ===== CARD CONTENT ===== */
.bgp-card-content {
    box-sizing: border-box;
}

.bgp-card-inner {
    width: 100%;
}

.bgp-card-title {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.bgp-card-description {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ===== ARROW ICON ===== */
.bgp-card-arrow {
    flex-shrink: 0;
}

.bgp-card-arrow svg {
    display: block;
}

/* ===== BUTTON ===== */
.bgp-card-button {
    display: inline-block;
    text-decoration: none;
    border: none;
    outline: none;
    cursor: pointer;
}

.bgp-card-button:hover {
    text-decoration: none;
}

/* ===== LINK OVERLAY ===== */
.bgp-card-link-overlay {
    display: block;
    text-decoration: none;
}

/* ===== BADGE ===== */
.bgp-card-badge {
    white-space: nowrap;
}

/* ===== RTL SUPPORT ===== */
[dir="rtl"] .bgp-container,
.bgp-container[dir="rtl"] {
    direction: rtl;
}

[dir="rtl"] .bgp-card-content,
.bgp-container[dir="rtl"] .bgp-card-content {
    direction: rtl;
}

/* RTL Arrow rotation is handled in JS */

/* ===== ACCESSIBILITY ===== */
.bgp-card:focus-within {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

.bgp-card-link-overlay:focus {
    outline: none;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .bgp-card,
    .bgp-card-image,
    .bgp-card-overlay,
    .bgp-card-content,
    .bgp-card-arrow,
    .bgp-card-button,
    .bgp-card-description,
    .bgp-shine {
        transition: none !important;
    }
}

/* ===== RESPONSIVE OVERRIDES ===== */

/* Tablet */
@media screen and (max-width: 1024px) and (min-width: 768px) {
    .bgp-grid.bgp-layout-bento-1,
    .bgp-grid.bgp-layout-bento-2,
    .bgp-grid.bgp-layout-bento-3,
    .bgp-grid.bgp-layout-bento-4 {
        /* Grid areas might need adjustments - handled by JS */
    }
    
    .bgp-grid.bgp-layout-featured-left,
    .bgp-grid.bgp-layout-featured-right {
        flex-direction: column !important;
    }
    
    .bgp-grid.bgp-layout-featured-left > div,
    .bgp-grid.bgp-layout-featured-right > div {
        width: 100% !important;
    }
    
    .bgp-grid.bgp-layout-columns-4 > div {
        width: calc(50% - 8px) !important;
    }
    
    .bgp-grid.bgp-layout-masonry-4 {
        column-count: 3 !important;
    }
    
    .bgp-grid.bgp-layout-single-split {
        flex-direction: column !important;
    }
    
    .bgp-grid.bgp-layout-single-split > div {
        width: 100% !important;
    }
}

/* Mobile */
@media screen and (max-width: 767px) {
    .bgp-grid.bgp-layout-bento-1,
    .bgp-grid.bgp-layout-bento-2,
    .bgp-grid.bgp-layout-bento-3,
    .bgp-grid.bgp-layout-bento-4,
    .bgp-grid.bgp-layout-columns-2,
    .bgp-grid.bgp-layout-columns-3,
    .bgp-grid.bgp-layout-columns-4,
    .bgp-grid.bgp-layout-asymmetric-1,
    .bgp-grid.bgp-layout-asymmetric-2,
    .bgp-grid.bgp-layout-asymmetric-3,
    .bgp-grid.bgp-layout-featured-left,
    .bgp-grid.bgp-layout-featured-right,
    .bgp-grid.bgp-layout-featured-top {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: unset !important;
        grid-template-rows: unset !important;
        grid-template-areas: unset !important;
    }
    
    .bgp-grid.bgp-layout-bento-1 > .bgp-card,
    .bgp-grid.bgp-layout-bento-2 > .bgp-card,
    .bgp-grid.bgp-layout-bento-3 > .bgp-card,
    .bgp-grid.bgp-layout-bento-4 > .bgp-card {
        grid-area: unset !important;
    }
    
    .bgp-grid > div {
        width: 100% !important;
        flex: none !important;
    }
    
    .bgp-grid.bgp-layout-masonry-3,
    .bgp-grid.bgp-layout-masonry-4 {
        column-count: 1 !important;
    }
    
    .bgp-grid.bgp-layout-single-split {
        flex-direction: column !important;
    }
    
    .bgp-grid.bgp-layout-single-split > div {
        width: 100% !important;
        min-height: 250px !important;
    }
    
    /* Stack containers inside featured layouts */
    .bgp-grid.bgp-layout-featured-left > div,
    .bgp-grid.bgp-layout-featured-right > div {
        width: 100% !important;
    }
    
    .bgp-grid.bgp-layout-featured-left > div > div,
    .bgp-grid.bgp-layout-featured-right > div > div {
        flex: none !important;
        min-height: 250px;
    }
}

/* ===== LOADING STATE ===== */
.bgp-container.bgp-loading {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bgp-container.bgp-loading::after {
    content: '';
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: #333;
    border-radius: 50%;
    animation: bgp-spin 0.8s linear infinite;
}

@keyframes bgp-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== EDITOR STYLES ===== */
.elementor-editor-active .bgp-card-link-overlay {
    pointer-events: none;
}

/* ===== HOVER EFFECT: ANIMATED CORNERS ===== */
.bgp-card[data-hover-preset="border-corners"]::before,
.bgp-card[data-hover-preset="border-corners"]::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    opacity: 0;
    transition: all 0.4s ease-out;
    z-index: 5;
    pointer-events: none;
}

.bgp-card[data-hover-preset="border-corners"]::before {
    top: 12px;
    left: 12px;
    border-right: none;
    border-bottom: none;
}

.bgp-card[data-hover-preset="border-corners"]::after {
    bottom: 12px;
    right: 12px;
    border-left: none;
    border-top: none;
}

.bgp-card[data-hover-preset="border-corners"]:hover::before,
.bgp-card[data-hover-preset="border-corners"]:hover::after {
    opacity: 1;
    width: 40px;
    height: 40px;
}

/* RTL corners */
[dir="rtl"] .bgp-card[data-hover-preset="border-corners"]::before {
    left: auto;
    right: 12px;
    border-left: none;
    border-right: 2px solid rgba(255, 255, 255, 0.8);
}

[dir="rtl"] .bgp-card[data-hover-preset="border-corners"]::after {
    right: auto;
    left: 12px;
    border-right: none;
    border-left: 2px solid rgba(255, 255, 255, 0.8);
}

/* ===== SHINE EFFECT ===== */
.bgp-shine {
    pointer-events: none;
}

/* ===== PRINT STYLES ===== */
@media print {
    .bgp-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    
    .bgp-card-overlay {
        display: none !important;
    }
    
    .bgp-card-content {
        color: #000 !important;
    }
}