/* Custom Grid Container */
.fd-custom-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Vertical cards - first 2 posts */
article.fd-post-card-vertical {
    display: flex !important;
    flex-direction: column !important;
}

article.fd-post-card-vertical .post-thumb-wrap {
    width: 100% !important;
    height: 200px !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    margin-bottom: 12px !important;
    display: block !important;
}

article.fd-post-card-vertical .post-thumb-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

article.fd-post-card-vertical .post-thumb-wrap a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

article.fd-post-card-vertical .post-element {
    flex: 1 !important;
}

/* Horizontal cards - last 2 posts */
article.fd-post-card-horizontal {
    display: flex !important;
    flex-direction: row !important;
    background: #fff !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    overflow: visible !important;
    align-items: flex-start !important;
    min-height: 120px !important;
}

article.fd-post-card-horizontal .post-thumb-wrap {
    flex: 0 0 120px !important;
    width: 120px !important;
    height: 120px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    display: block !important;
}

article.fd-post-card-horizontal .post-thumb-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

article.fd-post-card-horizontal .post-thumb-wrap a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

article.fd-post-card-horizontal .post-element {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 8px 12px 8px 12px !important;
    overflow: visible !important;
}

article.fd-post-card-horizontal .post-element-inner {
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
}

article.fd-post-card-horizontal .post-categories {
    display: block !important;
    margin-bottom: 4px !important;
    overflow: visible !important;
}

article.fd-post-card-horizontal .post-title {
    font-size: 13px !important;
    margin-bottom: 5px !important;
    line-height: 1.3 !important;
}

article.fd-post-card-horizontal .post-meta {
    font-size: 11px !important;
}

/* Sidebar styling cleanup */
.secondary-sidebar .widget {
    margin-bottom: 25px !important;
    padding: 15px !important;
    background: #f9f9f9 !important;
    border-radius: 4px !important;
}

.secondary-sidebar .widget-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 16px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #3ca840 !important;
    color: #333 !important;
}

.secondary-sidebar .widget-title span {
    display: block !important;
}

.fd-popular-posts-widget {
    clear: both !important;
}

.fd-popular-posts-widget .widget-title {
    margin-bottom: 16px !important;
}
.fd-post-card-horizontal .post-element{
    margin-top: 0 !important;
    height: 100% !important;
}

/* Category badges removed from the popular-posts widget tiles. */
.fd-popular-tile .post-categories {
    display: none !important;
}

/* Fix: hero feature overlay content (badge/date/title/excerpt) was taller
   than the card, so with bottom:0 anchoring it overflowed upward past the
   dark gradient into the bare image — reading as overlapping/duplicated
   text. Cap sizes, clamp lines, and darken the gradient enough to cover it. */
.fd-hero-feature-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    max-height: 78% !important;
    overflow: hidden !important;
    background: linear-gradient(to top, rgba(0, 0, 0, .85) 30%, rgba(0, 0, 0, 0) 100%) !important;
}

.fd-hero-feature-content .post-meta {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
}

.fd-hero-feature-content .post-meta .post-categories {
    margin: 0 !important;
    line-height: 1 !important;
}

.fd-hero-feature-content .post-meta .post-categories a {
    display: inline-block !important;
    background: var(--fd-accent, #3ca840) !important;
    color: #fff !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
}

.fd-hero-feature-content .post-title {
    font-size: 24px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

.fd-hero-feature-content .post-excerpt {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

@media (max-width: 480px) {
    .fd-hero-feature-content .post-excerpt {
        display: none !important;
    }
}

/* Hero grid tiles: keep badge and title from overlapping/overflowing too */
.fd-hero-tile .post-element-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.fd-hero-tile .post-categories {
    margin: 0 !important;
    line-height: 1 !important;
}

.fd-hero-tile .post-categories a {
    display: inline-block !important;
    background: var(--fd-accent, #3ca840) !important;
    color: #fff !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
}

.fd-hero-tile .post-title {
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}