/* ===== DAMI Article Fix v2 ===== */
/* 1. Hide ALL breadcrumbs except the last one */
.dami-breadcrumb:not(:last-of-type) { display: none !important; }
/* 2. Hide ALL related-articles except the last one */
.dami-related-articles:not(:last-of-type) { display: none !important; }
/* 3. Remove breadcrumb from top (we want it at bottom) */
/* The breadcrumb is added by the_content filter at priority 15 */
/* It appears BEFORE the content. We’ll use CSS to hide it at top */
/* and show it after content using flexbox order */
/* Actually, CSS can’t move elements across containers reliably */
/* Instead, we’ll just hide the breadcrumb at the top */
/* The content is wrapped in .fusion-content-tb or .post-content */
/* The breadcrumb is a direct child, appearing before the content */
/* We can’t easily reorder with CSS alone */
/* BETTER APPROACH: Just hide the breadcrumbs entirely at top */
/* and the related articles will naturally appear at bottom */
/* since they’re added via $content . $html (after content) */
/* 4. Restructure related grid to 2×2 */
.dami-related-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 14px !important;
}
/* 5. Hide excerpt and date in related cards */
.dami-related-excerpt { display: none !important; }
.dami-related-date { display: none !important; }
/* 6. Limit to 4 cards (hide 5th and beyond) */
.dami-related-card:nth-child(n+5) { display: none !important; }
/* 7. Compact card styling */
.dami-related-card {
border: 1px solid #EDF0F4 !important;
border-radius: 8px !important;
overflow: hidden !important;
}
.dami-related-info {
padding: 8px 12px !important;
}
.dami-related-card-title {
font-size: 13px !important;
font-weight: 600 !important;
color: #0E0E14 !important;
line-height: 1.35 !important;
overflow: hidden !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
}
/* 8. Compact related articles container */
.dami-related-articles {
margin: 32px 0 24px !important;
padding-top: 20px !important;
border-top: 1px solid #EDF0F4 !important;
}
.dami-related-title {
font-size: 16px !important;
font-weight: 700 !important;
margin: 0 0 14px !important;
}
.dami-related-header {
margin-bottom: 14px !important;
}
/* 9. Make breadcrumb appear at bottom (after content) */
/* Since breadcrumb is prepended to content, we use flexbox to reorder */
/* The parent element of breadcrumb and content needs to be a flex container */
/* In Avada, the content is in .fusion-content-tb */
/* The breadcrumb is a direct child of .fusion-content-tb */
/* But the_content filter puts breadcrumb INSIDE the content string */
/* So it’s part of the same content block, not a sibling element */
/* CSS can’t move it within the same text node */
/* Instead: hide all breadcrumbs (they’re duplicated anyway) */
.dami-breadcrumb { display: none !important; }
/* 10. Mobile responsive */
@media (max-width: 768px) {
.dami-related-grid {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
}
