/* SIMPLE FIX FOR REVIEW CARD SPACING ISSUE */
/* Override Bootstrap and other CSS that causes text to overlap with image */

/* CRITICAL: Force proper card body padding */
.card-video-genone .card-body,
.card.card-video-genone .card-body,
.card.rounded-3.card-video-genone .card-body {
    padding: 15px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    min-height: auto !important;
}

/* CRITICAL: Ensure proper spacing from image */
.card-video-genone .card-body > *:first-child {
    margin-top: 10px !important;
}

/* Simple spacing for all text elements */
.card-video-genone .card-body h6.card-title {
    margin: 10px 0 5px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

.card-video-genone .card-body p[style*="color: #dc3545"] {
    margin: 0 0 5px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

.card-video-genone .card-body p[style*="color: #666"] {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

/* Taller images as requested - WITH PROPER CONTAINMENT */
.card-video-genone .card-img-top {
    height: 250px !important;
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 12px 12px 0 0 !important; /* Match card border radius */
    overflow: hidden !important;
    display: block !important;
}

/* CRITICAL: Ensure card container contains the image */
.card-video-genone {
    overflow: hidden !important;
    border-radius: 12px !important;
    position: relative !important;
}

/* CRITICAL: Image container to prevent overflow */
.card-video-genone .position-relative,
.card-video-genone > div:first-child {
    overflow: hidden !important;
    border-radius: 12px 12px 0 0 !important;
    position: relative !important;
}

/* Responsive adjustments - WITH IMAGE CONTAINMENT */
@media (min-width: 768px) {
    .card-video-genone .card-body {
        padding: 16px !important;
    }
    
    .card-video-genone .card-img-top {
        height: 280px !important;
        width: 100% !important;
        object-fit: cover !important;
        border-radius: 12px 12px 0 0 !important;
        overflow: hidden !important;
    }
    
    .card-video-genone .card-body h6.card-title {
        margin: 12px 0 6px 0 !important;
    }
    
    .card-video-genone .card-body p[style*="color: #dc3545"] {
        margin: 0 0 6px 0 !important;
    }
}

@media (min-width: 1200px) {
    .card-video-genone .card-body {
        padding: 18px !important;
    }
    
    .card-video-genone .card-img-top {
        height: 300px !important;
        width: 100% !important;
        object-fit: cover !important;
        border-radius: 12px 12px 0 0 !important;
        overflow: hidden !important;
    }
    
    .card-video-genone .card-body h6.card-title {
        margin: 14px 0 7px 0 !important;
    }
    
    .card-video-genone .card-body p[style*="color: #dc3545"] {
        margin: 0 0 7px 0 !important;
    }
}

@media (max-width: 767px) {
    .card-video-genone .card-body {
        padding: 12px !important;
    }
    
    .card-video-genone .card-img-top {
        height: 220px !important;
        width: 100% !important;
        object-fit: cover !important;
        border-radius: 12px 12px 0 0 !important;
        overflow: hidden !important;
    }
    
    .card-video-genone .card-body h6.card-title {
        margin: 8px 0 4px 0 !important;
    }
    
    .card-video-genone .card-body p[style*="color: #dc3545"] {
        margin: 0 0 4px 0 !important;
    }
}

/* Override any conflicting styles with maximum specificity */
section.blog.py-2 .card-video-genone .card-body h6.card-title,
.blog.py-2 .card-video-genone .card-body h6.card-title,
div.card-video-genone .card-body h6.card-title {
    margin: 10px 0 5px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

section.blog.py-2 .card-video-genone .card-body p[style*="color: #dc3545"],
.blog.py-2 .card-video-genone .card-body p[style*="color: #dc3545"],
div.card-video-genone .card-body p[style*="color: #dc3545"] {
    margin: 0 0 5px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

section.blog.py-2 .card-video-genone .card-body p[style*="color: #666"],
.blog.py-2 .card-video-genone .card-body p[style*="color: #666"],
div.card-video-genone .card-body p[style*="color: #666"] {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

/* ADDITIONAL IMAGE CONTAINMENT FIXES */
/* Ensure images are properly contained within card boundaries */

/* Force card to contain all content */
.card-video-genone,
.card.card-video-genone,
.card.rounded-3.card-video-genone {
    overflow: hidden !important;
    border-radius: 12px !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Image wrapper containment */
.card-video-genone > *:first-child,
.card-video-genone .position-relative {
    overflow: hidden !important;
    border-radius: 12px 12px 0 0 !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Force image to stay within bounds */
.card-video-genone img,
.card-video-genone .card-img-top {
    max-width: 100% !important;
    width: 100% !important;
    height: 250px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 12px 12px 0 0 !important;
    display: block !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Owl carousel item containment */
.owl-home-slider .item {
    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.owl-home-slider .item > div {
    overflow: hidden !important;
    position: relative !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Responsive image containment */
@media (min-width: 768px) {
    .card-video-genone img,
    .card-video-genone .card-img-top {
        height: 280px !important;
    }
}

@media (min-width: 1200px) {
    .card-video-genone img,
    .card-video-genone .card-img-top {
        height: 300px !important;
    }
}

@media (max-width: 767px) {
    .card-video-genone img,
    .card-video-genone .card-img-top {
        height: 220px !important;
    }
}

@media (max-width: 576px) {
    .card-video-genone img,
    .card-video-genone .card-img-top {
        height: 200px !important;
    }
}

/* Maximum specificity overrides for image containment */
section.blog.py-2 .card-video-genone,
.blog.py-2 .card-video-genone,
div.card-video-genone {
    overflow: hidden !important;
    border-radius: 12px !important;
    position: relative !important;
}

section.blog.py-2 .card-video-genone img,
.blog.py-2 .card-video-genone img,
div.card-video-genone img,
section.blog.py-2 .card-video-genone .card-img-top,
.blog.py-2 .card-video-genone .card-img-top,
div.card-video-genone .card-img-top {
    max-width: 100% !important;
    width: 100% !important;
    height: 250px !important;
    object-fit: cover !important;
    border-radius: 12px 12px 0 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}