/* =============================================================================
UXArmy — Blog Card Styles (Related Articles on Single Posts)
Minimal stylesheet containing only the card grid layout and styling
needed for the [uxarmy_related_articles] shortcode on single blog posts.
Does NOT include: pagination, filters, tag filter buttons, table of contents
============================================================================= */
/* ── Grid wrapper ─────────────────────────────────────────────────────────── */
.uxarmy-blog-grid-wrapper {
position: relative !important;
width: 100% !important;
}
/* ── Post grid ────────────────────────────────────────────────────────────── */
.uxarmy-blog-grid {
display: grid !important;
column-gap: 32px !important;
row-gap: 0 !important; /* row spacing handled via element padding */
align-items: start !important;
}
/* Column variants */
.uxarmy-blog-grid.uxarmy-cols-1 { grid-template-columns: 1fr !important; }
.uxarmy-blog-grid.uxarmy-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.uxarmy-blog-grid.uxarmy-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.uxarmy-blog-grid.uxarmy-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
.uxarmy-blog-grid.uxarmy-cols-5 { grid-template-columns: repeat(5, 1fr) !important; }
.uxarmy-blog-grid.uxarmy-cols-6 { grid-template-columns: repeat(6, 1fr) !important; }
/* ── Card (the whole card is an ) ──────────────────────────────────────── */
/*
* Subgrid layout — each card spans 4 shared row tracks:
* Row 1: thumbnail Row 2: title Row 3: excerpt Row 4: read-more
* All cards in the same visual row share these tracks, so titles/excerpts/
* read-mores are perfectly aligned no matter how many text lines they have.
*/
.uxarmy-blog-card {
display: grid !important;
grid-row: span 4 !important;
grid-template-rows: subgrid !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border-radius: 0 !important;
border: none !important;
overflow: visible !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
/* reset defaults */
text-decoration: none !important;
color: inherit !important;
cursor: pointer !important;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.uxarmy-blog-card:hover {
transform: translateY(-4px) !important;
box-shadow: none !important;
text-decoration: none !important;
color: inherit !important;
}
/* ── Card thumbnail ───────────────────────────────────────────────────────── */
.uxarmy-blog-card__thumb-wrap {
display: block !important;
overflow: hidden !important;
border-radius: 12px !important;
aspect-ratio: 16 / 9 !important;
background: #eef2f6 !important;
background-color: #eef2f6 !important;
padding: 0 !important;
margin: 0 !important;
}
.uxarmy-blog-card__thumb {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
transition: transform 0.35s ease;
}
.uxarmy-blog-card:hover .uxarmy-blog-card__thumb {
transform: scale(1.04) !important;
}
/* ── Card body ────────────────────────────────────────────────────────────── */
/*
* Flex column that spans all remaining rows.
* This ensures body content (title, excerpt, read-more) aligns
* with rows 2–4, allowing the thumbnail to occupy row 1.
*/
.uxarmy-blog-card__body {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
grid-row: span 3 !important;
grid-template-rows: subgrid !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* ── Title ────────────────────────────────────────────────────────────────── */
.uxarmy-blog-card__title {
margin: 0 !important;
padding: 20px 4px 10px !important;
font-family: 'Inter', sans-serif !important;
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
color: #0f2030 !important;
text-transform: none !important;
letter-spacing: normal !important;
white-space: normal !important;
}
/* ── Excerpt ──────────────────────────────────────────────────────────────── */
.uxarmy-blog-card__excerpt {
margin: 0 !important;
padding: 0 4px 10px !important; /* bottom: gap to read-more */
align-self: start !important;
font-family: 'Inter', sans-serif !important;
font-size: 16px !important;
line-height: 1.65 !important;
color: #000000 !important;
text-transform: none !important;
letter-spacing: normal !important;
}
/* Clamp to 2 lines — blog page + author archive.
Bulletproof across Chrome, Firefox, Safari (mac/iOS), Edge, and Android WebView. */
.uxarmy-blog-page .uxarmy-blog-grid .uxarmy-blog-card__excerpt,
.uxarmy-author-page .uxarmy-blog-grid .uxarmy-blog-card__excerpt {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
font-size: 16px !important;
line-height: 1.65 !important;
min-height: calc(16px * 1.65 * 2) !important;
max-height: calc(16px * 1.65 * 2) !important;
-webkit-text-size-adjust: 100% !important;
}
/* ── Read More ────────────────────────────────────────────────────────────── */
.uxarmy-blog-card__read-more {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
align-self: start !important;
margin-top: 0 !important;
font-family: 'Inter', sans-serif !important;
font-size: 16px !important;
font-weight: 600 !important;
color: #2e62e9 !important;
text-decoration:none !important;
text-transform: none !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 10px 4px 80px !important; /* 80px bottom = visual gap between card rows */
transition: gap 0.18s ease, color 0.18s ease;
}
.uxarmy-related-articles .uxarmy-blog-card__excerpt {
flex: 1 !important;
}
.uxarmy-related-articles .uxarmy-blog-card__read-more {
padding-bottom: 0 !important;
margin-top: 12px !important;
}
.uxarmy-blog-card:hover .uxarmy-blog-card__read-more {
color: #1a4ec4 !important;
gap: 8px !important;
}
figure>blockquote >cite {
font-size: 16px !important;
}
/* =============================================================================
Responsive
============================================================================= */
@media (max-width: 1024px) {
.uxarmy-blog-grid.uxarmy-cols-3,
.uxarmy-blog-grid.uxarmy-cols-4 {
grid-template-columns: repeat(2, 1fr) !important;
}
.uxarmy-blog-grid.uxarmy-cols-5,
.uxarmy-blog-grid.uxarmy-cols-6 {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 768px) {
.uxarmy-blog-grid,
.uxarmy-blog-grid.uxarmy-cols-1,
.uxarmy-blog-grid.uxarmy-cols-2,
.uxarmy-blog-grid.uxarmy-cols-3,
.uxarmy-blog-grid.uxarmy-cols-4,
.uxarmy-blog-grid.uxarmy-cols-5,
.uxarmy-blog-grid.uxarmy-cols-6 {
grid-template-columns: 1fr !important;
}
.uxarmy-blog-card__title {
font-size: 18px !important;
}
.uxarmy-blog-card__read-more {
padding-bottom: 48px !important;
}
/* Related articles: disable subgrid on mobile (single column doesn't need
cross-card alignment) and use margin for spacing between cards */
.uxarmy-related-articles .uxarmy-blog-card {
display: block !important;
grid-row: auto !important;
margin-bottom: 40px !important;
}
.uxarmy-related-articles .uxarmy-blog-card:last-child {
margin-bottom: 0 !important;
}
.uxarmy-related-articles .uxarmy-blog-card__body {
padding-top: 8px !important;
}
}
@media (max-width: 600px) {
.uxarmy-blog-card__title {
font-size: 16px !important;
}
}