/* BFCW - Blog Flexible Content Widget Base Styles */
.bfcw-wrapper {
    width: 100%;
    box-sizing: border-box;
}

.bfcw-section {
    box-sizing: border-box;
    width: 100%;
}

/* Flexbox Layout */
.bfcw-section--flexbox .bfcw-flex-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    box-sizing: border-box;
    width: 100%;
    gap: 24px;
}

.bfcw-section--flexbox .bfcw-flex-text {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
}

.bfcw-section--flexbox .bfcw-flex-gallery {
    flex: 1 1 auto;
    box-sizing: border-box;
}

/* Grid Layout - ИСПРАВЛЕННЫЕ СТИЛИ */
.bfcw-section--grid .bfcw-grid-row {
    display: grid !important;
    box-sizing: border-box;
    width: 100%;
    gap: 24px;
    max-width: 100%;
}

.bfcw-section--grid .bfcw-grid-text,
.bfcw-section--grid .bfcw-grid-gallery {
    min-width: 0;
    box-sizing: border-box;
}

/* Base Gallery Styles */
.bfcw-gallery {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    box-sizing: border-box;
    gap: 10px;
}

.bfcw-image {
    max-width: 100%;
    height: auto;
    display: block;
    box-sizing: border-box;
}

/* Lightbox link styles */
.bfcw-lightbox {
    display: block;
    line-height: 0;
    text-decoration: none;
}

.bfcw-lightbox img {
    width: 100%;
    height: 100%;
    display: block;
}

.bfcw-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
}

/* ============================================= */
/* GALLERY LAYOUT CONTROLS - УПРОЩЕННЫЕ СТИЛИ */
/* ============================================= */

/* Auto - default behavior */
.bfcw-layout-auto .bfcw-gallery {
    /* Uses default flex behavior */
}

/* Single - Full Width */
.bfcw-gallery.bfcw-layout-single-full {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.bfcw-gallery.bfcw-layout-single-full .bfcw-image,
.bfcw-gallery.bfcw-layout-single-full .bfcw-lightbox {
    width: 100% !important;
    height: auto !important;
}

/* Single - Contained */
.bfcw-gallery.bfcw-layout-single-contained {
    display: flex !important;
    flex-direction: column !important;
    max-width: 80% !important;
    margin: 0 auto !important;
}

.bfcw-gallery.bfcw-layout-single-contained .bfcw-image,
.bfcw-gallery.bfcw-layout-single-contained .bfcw-lightbox {
    width: 100% !important;
    height: auto !important;
}

/* Two - Equal Width (2x2 grid) */
.bfcw-gallery.bfcw-layout-two-equal {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
    width: 100% !important;
}

.bfcw-gallery.bfcw-layout-two-equal .bfcw-image,
.bfcw-gallery.bfcw-layout-two-equal .bfcw-lightbox {
    width: 100% !important;
    height: auto !important;
}

/* Three - Grid (3x3 grid) */
.bfcw-gallery.bfcw-layout-three-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
}

.bfcw-gallery.bfcw-layout-three-grid .bfcw-image,
.bfcw-gallery.bfcw-layout-three-grid .bfcw-lightbox {
    width: 100% !important;
    height: auto !important;
}

/* Custom Grid */
.bfcw-gallery.bfcw-layout-custom {
    display: grid !important;
    gap: 10px !important;
    width: 100% !important;
}

.bfcw-gallery.bfcw-layout-custom .bfcw-image,
.bfcw-gallery.bfcw-layout-custom .bfcw-lightbox {
    width: 100% !important;
    height: auto !important;
}

/* Empty State */
.bfcw-empty {
    padding: 20px;
    background: #f8f9fa;
    border: 1px dashed #dee2e6;
    border-radius: 4px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
}

/* ============================================= */
/* HEIGHT CONTROL STYLES - ДЛЯ ВСЕХ СЕКЦИЙ */
/* ============================================= */

/* Height control support */
.bfcw-gallery img,
.bfcw-gallery .bfcw-lightbox img {
    transition: height 0.3s ease;
}

/* Ensure object-fit works with custom heights */
.bfcw-gallery img {
    object-fit: cover;
}

.bfcw-gallery .bfcw-lightbox img {
    object-fit: cover;
}

/* For grid layouts, maintain aspect ratio but respect custom height */
.bfcw-layout-two-equal .bfcw-gallery img,
.bfcw-layout-two-equal .bfcw-gallery .bfcw-lightbox img,
.bfcw-layout-three-grid .bfcw-gallery img,
.bfcw-layout-three-grid .bfcw-gallery .bfcw-lightbox img,
.bfcw-layout-custom .bfcw-gallery img,
.bfcw-layout-custom .bfcw-gallery .bfcw-lightbox img {
    width: 100% !important;
    /* Height will be set by inline styles */
}

/* ============================================= */
/* RESPONSIVE DESIGN - MOBILE FIRST */
/* ============================================= */

@media (max-width: 767px) {
    .bfcw-section--flexbox .bfcw-flex-row {
        flex-direction: column !important;
    }
    
    .bfcw-section--grid .bfcw-grid-row {
        grid-template-columns: 1fr !important;
    }
    
    .bfcw-gallery {
        flex-direction: column;
    }
    
    /* Mobile adjustments for gallery layouts */
    .bfcw-gallery.bfcw-layout-two-equal,
    .bfcw-gallery.bfcw-layout-three-grid,
    .bfcw-gallery.bfcw-layout-custom {
        grid-template-columns: 1fr !important;
    }
    
    .bfcw-gallery.bfcw-layout-single-contained {
        max-width: 100% !important;
    }
    
    .bfcw-gallery .bfcw-image,
    .bfcw-gallery .bfcw-lightbox {
        width: 100% !important;
    }
    
    /* Mobile height adjustments */
    .bfcw-gallery img,
    .bfcw-gallery .bfcw-lightbox img {
        height: auto !important;
        max-height: 400px;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    .bfcw-section--grid .bfcw-grid-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .bfcw-gallery.bfcw-layout-three-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Ensure images don't overflow */
.bfcw-gallery img {
    max-width: 100%;
    height: auto;
}

/* Print Styles */
@media print {
    .bfcw-wrapper {
        break-inside: avoid;
    }
    
    .bfcw-section {
        break-inside: avoid-page;
    }
    
    .bfcw-lightbox {
        text-decoration: none !important;
    }
}