/* Home Page Blog Section Override Styles - High Specificity */

/* Main blog section container */
.blog-bottom-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 15px 40px !important;
    overflow: hidden !important;
}

/* CRITICAL: Ensure horizontal scrolling for blog cards container */
.blog-bottom-content .blog-cards-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    flex-flow: row nowrap !important; /* Override any flex-flow settings */
    gap: 20px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 20px 0 !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

/* Custom scrollbar styling */
.blog-bottom-content .blog-cards-container::-webkit-scrollbar {
    height: 8px !important;
}

.blog-bottom-content .blog-cards-container::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 10px !important;
}

.blog-bottom-content .blog-cards-container::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-radius: 10px !important;
}

/* CRITICAL: Blog card styling - override all Webflow defaults */
.blog-bottom-content .blog-card {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    height: auto !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-flow: column !important; /* Override any row settings */
    background-color: #050f2c !important;
    border-radius: 20px !important;
    padding: 12px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    position: relative !important;
    /* Override Webflow's align-items and justify-content */
    align-items: stretch !important;
    justify-content: flex-start !important;
    grid-column-gap: 0 !important;
    grid-row-gap: 0 !important;
}

/* Override ALL responsive breakpoints from Webflow */
@media (max-width: 991px) {
    .blog-bottom-content .blog-card {
        flex-flow: column !important;
        flex-direction: column !important;
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
        grid-row-gap: 0 !important;
        padding: 12px !important;
    }

    .blog-bottom-content .blog-cards-container {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        flex-flow: row nowrap !important;
    }
}

@media (max-width: 768px) {
    .blog-bottom-content .blog-card {
        flex-flow: column !important;
        flex-direction: column !important;
        width: 260px !important;
        min-width: 260px !important;
        max-width: 260px !important;
        grid-row-gap: 0 !important;
        padding: 10px !important;
    }

    .blog-bottom-content .blog-cards-container {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        flex-flow: row nowrap !important;
        gap: 16px !important;
        padding: 16px 0 !important;
    }
}

@media (max-width: 479px) {
    .blog-bottom-content .blog-card {
        flex-flow: column !important;
        flex-direction: column !important;
        width: 240px !important;
        min-width: 240px !important;
        max-width: 240px !important;
        grid-row-gap: 0 !important;
        padding: 10px 10px 20px !important;
    }

    .blog-bottom-content .blog-cards-container {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        flex-flow: row nowrap !important;
        gap: 12px !important;
    }
}

/* Ensure exactly 5 cards fit on large screens */
@media (min-width: 1700px) {
    .blog-bottom-content .blog-cards-container {
        justify-content: center !important;
    }

    .blog-bottom-content .blog-card {
        width: calc((100% - 80px) / 5) !important;
        min-width: 300px !important;
        max-width: 340px !important;
    }
}

/* Blog image styling */
.blog-bottom-content .blog-image-link {
    display: block !important;
    width: 100% !important;
    height: 180px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-bottom: 16px !important;
    flex-shrink: 0 !important;
}

.blog-bottom-content .blog-post-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.3s ease !important;
}

.blog-bottom-content .blog-card:hover .blog-post-image {
    transform: scale(1.05) !important;
}

/* Blog content styling */
.blog-bottom-content .blog-card-typography {
    width: 100% !important;
    padding: 0 8px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    max-width: 100% !important; /* Override Webflow max-width */
}

/* Categories and author section */
.blog-bottom-content .blog-card-categories-author {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 16px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    /* Override Webflow grid settings */
    grid-column-gap: 0 !important;
    grid-row-gap: 0 !important;
    flex-flow: row wrap !important;
}

.blog-bottom-content .blog-card-categories-wrap {
    display: flex !important;
    align-items: center !important;
}

.blog-bottom-content .blog-card-categories-flex {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(102, 126, 234, 0.1) !important;
    padding: 4px 10px !important;
    border-radius: 16px !important;
    grid-column-gap: 6px !important;
}

.blog-bottom-content .blog-card-categories-circel {
    width: 6px !important;
    height: 6px !important;
    background: #667eea !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

.blog-bottom-content .blog-card-categories-name {
    font-size: 11px !important;
    color: #667eea !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

.blog-bottom-content .blog-card-author-name-icon {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.blog-bottom-content .blog-card-author-icon {
    width: 14px !important;
    height: 14px !important;
    opacity: 0.7 !important;
    flex-shrink: 0 !important;
}

.blog-bottom-content .blog-card-author-name {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    white-space: nowrap !important;
}

/* Blog title */
.blog-bottom-content .blog-card-name-wrapper {
    margin-bottom: 10px !important;
}

.blog-bottom-content .blog-card-name {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.3 !important;
    min-height: 42px !important;
    transition: color 0.3s ease !important;
    margin-bottom: 0 !important;
}

.blog-bottom-content .blog-card-name:hover {
    color: #667eea !important;
}

/* Blog divider */
.blog-bottom-content .blog-card-line {
    width: 100% !important;
    height: 1px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    margin: 10px 0 !important;
    flex-shrink: 0 !important;
}

/* Blog description */
.blog-bottom-content .blog-post-description-text {
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: rgba(255, 255, 255, 0.6) !important;
    margin-bottom: 14px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    flex: 1 !important;
    max-width: 100% !important; /* Override Webflow max-width */
}

/* Read more link */
.blog-bottom-content .blog-card-link-wrap {
    margin-top: auto !important;
}

.blog-bottom-content .blog-card-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #667eea !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    transition: gap 0.3s ease, color 0.3s ease !important;
}

.blog-bottom-content .blog-card-link:hover {
    gap: 10px !important;
    color: #764ba2 !important;
}

.blog-bottom-content .blog-card-link-text {
    display: inline !important;
}

.blog-bottom-content .blog-card-link-arrow {
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23667eea"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>') center/contain no-repeat !important;
    transition: transform 0.3s ease !important;
    flex-shrink: 0 !important;
}

.blog-bottom-content .blog-card-link:hover .blog-card-link-arrow {
    transform: translateX(3px) !important;
}

/* Hover effect for cards */
.blog-bottom-content .blog-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.25) !important;
}

/* RTL support for Hebrew */
[dir="rtl"] .blog-bottom-content .blog-cards-container {
    direction: rtl !important;
}

[dir="rtl"] .blog-bottom-content .blog-card-link-arrow {
    transform: rotate(180deg) !important;
}

[dir="rtl"] .blog-bottom-content .blog-card-link:hover .blog-card-link-arrow {
    transform: rotate(180deg) translateX(-3px) !important;
}

/* Loading state */
.blog-loading {
    text-align: center !important;
    width: 100% !important;
    padding: 40px !important;
    color: rgba(255, 255, 255, 0.7) !important;
}