/* ============================================================================
   Framework Technology — homepage "latest news" section only.

   Was app/blog-redesign.css (the Framework-Team-Final-based design); trimmed down to just its
   .home-blog-redesign rules once /Home/Blog and /Home/BlogDetail moved to the newer
   app/news-modern.css reference (Framework-News-Media-Comments) - keeping both files loaded with
   overlapping .blog- and .article-prefixed selectors would have left two competing Blog styles in
   place, so the dead ones were deleted rather than merely unused.

   The section HEADING is intentionally NOT styled here any more (.home-blog-head and its rules were
   deleted): Index.cshtml now renders the same shared .sec-title.centered composition every other
   homepage section uses (app/theme.css / style.css own that styling already), so this file never
   duplicates it - only the "See More Articles" link below it (.home-blog-link) is this section's own.

   History of the card composition, so a future pass does not flip-flop it again:
     1. Original: one .home-feature hero card fixed at 520px tall beside two small stacked side
        cards (1.25fr/.75fr grid) - the featured item dominated the section.
     2. Compacted: all three cards forced into ONE uniform small horizontal card in an even 3-column
        row - fixed the dominance, but read as visually flat/unclear which story was the latest.
     3. Current: restores pass 1's asymmetric "one primary + two supporting" LAYOUT BEHAVIOUR
        (.home-news-primary left, .home-news-side's two .home-news-card stacked right) but at a
        MODERATE height (primary media ~200px, not 520px) and in this file's current card language
        (--home-navy/--home-blue2, matching app/news-modern.css's own tokens) - primary reads as
        clearly more important without dominating the page or the two supporting cards.
   ============================================================================ */
:root{--home-navy:#111d42;--home-blue2:#268fd0;--home-line:#e6edf6;--home-muted:#6e7890}

.home-blog-redesign{padding:64px 0 72px;background:#fff}
.home-blog-redesign *{box-sizing:border-box}
.home-blog-actions{text-align:center;margin:-8px 0 30px}
.home-blog-link{display:inline-flex;align-items:center;gap:7px;color:var(--home-blue2);font-size:12px;font-weight:800;white-space:nowrap}
.home-blog-link:hover{color:var(--home-navy)}
.rtl .home-blog-link i{transform:rotate(180deg)}

.home-blog-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;align-items:stretch}

.home-news-primary{display:flex;flex-direction:column;background:#fff;border:1px solid #cfe6f7;border-radius:20px;overflow:hidden;box-shadow:0 16px 38px rgba(17,29,66,.09);min-width:0;transition:.2s}
.home-news-primary:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(17,29,66,.13)}
.home-news-primary-media{position:relative;height:220px;background:#eaf0f6}
.home-news-primary-media img{width:100%;height:100%;object-fit:cover;display:block}
.home-news-primary-body{padding:22px 24px;display:flex;flex-direction:column;flex:1;min-width:0}
.home-news-primary-body h3{font-size:26px;line-height:1.4;color:var(--home-navy);margin:0 0 10px;font-weight:700;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.home-news-primary-body p{font-size:15px;line-height:1.75;color:var(--home-muted);margin:0 0 14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.home-news-side{display:grid;grid-template-rows:1fr 1fr;gap:20px;min-width:0}

.home-news-card{display:grid;grid-template-columns:42% 58%;background:#fff;border:1px solid var(--home-line);border-radius:18px;overflow:hidden;box-shadow:0 10px 28px rgba(17,29,66,.06);min-width:0;position:relative;transition:.2s}
.home-news-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(17,29,66,.1)}
.home-news-card-media{position:relative;min-height:100px;background:#eaf0f6}
.home-news-card-media img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.home-news-card-body{padding:14px 16px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.home-news-card-body h3{font-size:17px;line-height:1.4;color:var(--home-navy);margin:0 0 6px;font-weight:700;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.home-news-card-body p{font-size:13px;line-height:1.6;color:var(--home-muted);margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.home-news-badge{position:absolute;top:10px;left:10px;z-index:2;background:var(--home-navy);color:#fff;font-size:9px;font-weight:800;padding:5px 9px;border-radius:999px;letter-spacing:.02em}
.rtl .home-news-badge{left:auto;right:10px}
.home-news-meta{display:flex;align-items:center;flex-wrap:wrap;color:#8490a5;font-size:13px;font-weight:700;margin-bottom:6px}
.home-news-meta span{display:inline-flex;align-items:center;gap:4px}
.home-news-meta i{color:var(--home-blue2)}
.home-news-readmore{display:inline-flex;align-items:center;gap:6px;color:var(--home-blue2);font-size:14px;font-weight:800;margin-top:auto}
.home-news-readmore i{font-size:13px}
.rtl .home-news-readmore i{transform:rotate(180deg)}

@media(max-width:1199px){.home-news-primary-media{height:190px}}
@media(max-width:991px){.home-blog-redesign{padding:52px 0 60px}.home-blog-layout{grid-template-columns:1fr}.home-news-side{grid-template-columns:1fr 1fr;grid-template-rows:none}.home-news-primary-media{height:230px}}
@media(max-width:767px){.home-blog-layout{gap:16px}.home-news-side{grid-template-columns:1fr;gap:16px}.home-news-card{grid-template-columns:38% 62%}.home-news-primary-media{height:200px}.home-news-primary-body{padding:18px}.home-news-primary-body h3{font-size:22px}.home-news-primary-body p{font-size:14px}.home-news-card-body h3{font-size:16px}}
@media(max-width:480px){.home-news-card{grid-template-columns:34% 66%}.home-news-card-body{padding:11px 12px}.home-news-primary-media{height:170px}}