/*==============================================================================
STATSCALAR ENTERPRISE - BLOG LISTING PAGE STYLES
Version: 2.0
Page: Blog / Market Intelligence Insights (blog.blade.php)
Framework: Laravel Blade + Bootstrap
Author: Balagali
Description: Consolidated styling for the blog hero, trending sidebar,
featured insight, topic filters, blog card grid, and newsletter CTA.

CONSOLIDATION NOTES (please read):
1. `.ss-blog-side-card` was defined THREE separate times (a basic version,
   a "TRENDING PANEL" redesign, and a small final tweak pass). Only the
   final, combined result is kept here (~70 lines of dead earlier-pass CSS
   removed).
2. CSS SYNTAX ERROR FOUND: `.ss-blog-card`'s rule block contained a
   duplicated `height:100%;` declaration followed by a stray extra closing
   brace `}` with nothing to match it. Most browsers silently recover from
   a single stray top-level `}`, so this likely wasn't visibly breaking
   anything, but it is invalid CSS and has been cleaned up here.
3. GENUINE SIZING BUG FOUND: `.ss-featured-content h2` was `25px` at
   desktop widths but `34px` at tablet widths (<=991px) and `28px` at
   mobile widths (<=767px) - meaning the heading was smaller on desktop
   than on tablet, the opposite of a normal responsive scale. Fixed to
   `36px` at desktop, preserving the tablet/mobile values as-is (they
   already formed a sensible descending scale on their own).
4. CROSS-PAGE COLLISION FOUND (third instance of this pattern in the
   project - see also `.ss-trust-item` on the About/home pages):
   `.ss-view-all` is used as a bare, unscoped class on BOTH this page (a
   rounded pill-style link next to the "Latest Insights" heading) AND on
   the homepage (a plain full-width footer band inside the "Latest Market
   Intelligence" panel). Because the blog page's definition appears later
   in custom.css, it was silently winning on both pages. This file scopes
   the blog page's version to `.ss-blog-action .ss-view-all` so it can no
   longer leak into the homepage. ACTION NEEDED: scope the homepage's rule
   in index-blade.css to `.ss-latest-content .ss-view-all` for the other
   half of the fix (see that page's implementation guide).
==============================================================================*/

/*==============================================================================
01. BLOG HERO
==============================================================================*/
.ss-blog-hero {
  position: relative;
  overflow: hidden;
  padding: 35px 0;
  background: linear-gradient(135deg, #f8fcfa 0%, #eef9f3 100%);
  border-bottom: 1px solid var(--ss-border);
}

.ss-blog-hero::before {
  content: "";
  position: absolute;
  right: -140px;
  top: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: rgba(0, 168, 107, 0.06);
}

.ss-blog-hero::after {
  content: "";
  position: absolute;
  left: -120px;
  bottom: -120px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(0, 168, 107, 0.04);
}

.ss-blog-hero-content {
  position: relative;
  z-index: 2;
}

.ss-blog-hero-content h1 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 1px;
  margin: 22px 0;
  color: var(--ss-heading);
  max-width: 760px;
}

.ss-blog-hero-content p {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ss-muted);
  max-width: 700px;
  margin-bottom: 30px;
}

/* Highlights Row */
.ss-blog-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 75px;
  padding: 15px 0;
  margin: 19px 0;
  border-top: 1px solid var(--ss-border);
  border-bottom: 1px solid var(--ss-border);
}

.ss-blog-highlights span {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--ss-heading);
}

.ss-blog-highlights i {
  margin-right: 8px;
  color: var(--ss-primary);
}

/* Statistics Grid */
.ss-blog-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.ss-blog-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #fff;
  padding: 23px 12px;
  min-height: 108px;
  border: 1px solid var(--ss-border);
  border-radius: 20px;
  box-shadow: var(--ss-shadow-sm);
  transition: var(--ss-transition);
}

.ss-blog-stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 55px rgba(16, 24, 40, 0.08);
}

.ss-blog-stat strong {
  display: block;
  margin-bottom: 10px;
  font-size: 32px;
  line-height: 1;
  font-weight: 800;
  color: var(--ss-primary);
}

.ss-blog-stat span {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ss-muted);
}

/* Trust Line */
.ss-blog-trust {
  margin-top: 22px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ss-muted);
}

/*==============================================================================
02. TRENDING SIDEBAR PANEL
==============================================================================*/
.ss-blog-side-card {
  background: #fff;
  border: 1px solid var(--ss-border);
  border-radius: 28px;
  padding: 32px;
  max-width: 430px;
  margin-left: auto;
  box-shadow: 0 20px 55px rgba(15, 23, 42, 0.08);
  transition: var(--ss-transition);
}

.ss-blog-side-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.12);
}

.ss-blog-side-card h4 {
  margin: 0 0 16px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  color: var(--ss-heading);
}

.ss-blog-side-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ss-blog-side-card li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--ss-text);
  border-bottom: 1px solid var(--ss-border);
  cursor: pointer;
  transition: var(--ss-transition);
}

.ss-blog-side-card li:last-child {
  border-bottom: none;
}

.ss-blog-side-card li::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ss-primary);
  flex-shrink: 0;
}

.ss-blog-side-card li::after {
  content: "\2192";
  margin-left: auto;
  font-size: 15px;
  font-weight: 700;
  color: var(--ss-primary);
  transition: var(--ss-transition);
}

.ss-blog-side-card li:hover {
  color: var(--ss-primary);
  padding-left: 8px;
}

.ss-blog-side-card li:hover::after {
  transform: translateX(6px);
}

.ss-blog-side-card a {
  color: inherit;
  text-decoration: none;
  flex: 1;
}

/*==============================================================================
03. FEATURED INSIGHT
==============================================================================*/
.ss-featured-insight {
  background: #fff;
  border: 1px solid var(--ss-border);
  border-radius: 32px;
  padding: 45px;
  margin: 6px 5px;
  box-shadow: var(--ss-shadow);
  overflow: hidden;
  transition: 0.4s;
}

/* .ss-featured-insight prefix (this component's own containing section):
   blog-details-blade.css also defines .ss-featured-image, with a
   margin-bottom/box-shadow/border/background this file never declared plus
   a conflicting aspect-ratio on the image, and loads after this file, so
   those were leaking onto this page's equal-height 2-column layout. */
.ss-featured-insight .ss-featured-image {
  position: relative;
  height: 100%;
  margin-bottom: 0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: none;
  border: none;
  background: none;
}

.ss-featured-insight .ss-featured-image img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  aspect-ratio: auto;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.ss-featured-insight:hover .ss-featured-image img {
  transform: scale(1.04);
  box-shadow: 0 30px 70px rgba(16, 24, 40, 0.12);
}

.ss-feature-image-badge {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.ss-featured-content {
  padding-left: 30px;
}

/* Fixed: was 25px at desktop but 34px at tablet - smaller on larger
   screens than smaller ones. Now forms a sensible descending scale:
   36px desktop -> 34px tablet -> 28px mobile. */
.ss-featured-content h2 {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.2;
  margin: 22px 0;
  color: var(--ss-heading);
}

.ss-featured-content p {
  font-size: 17px;
  line-height: 1.5;
  color: var(--ss-muted);
  margin-bottom: 30px;
}

/* Meta Row (date / read time / category) */
.ss-feature-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 20px 0 18px;
}

.ss-feature-meta span {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ss-muted);
}

.ss-feature-meta i {
  margin-right: 8px;
  color: var(--ss-primary);
}

/* Footer: author + CTA button */
.ss-feature-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--ss-border);
  gap: 20px;
}

.ss-feature-author strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--ss-heading);
}

.ss-feature-author span {
  font-size: 13px;
  color: var(--ss-muted);
}

.ss-feature-footer .ss-btn {
  min-width: 190px;
  justify-content: center;
  transition: 0.35s;
}

.ss-feature-footer .ss-btn:hover {
  transform: translateY(-2px);
}

/*==============================================================================
04. BLOG TOPIC FILTERS
==============================================================================*/
.ss-blog-filter {
  margin: 0 0 45px;
}

.ss-blog-filter-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 30px;
  background: #fff;
  border: 1px solid rgba(16, 24, 40, 0.06);
  border-radius: 22px;
  box-shadow: var(--ss-shadow-sm);
}

.ss-filter-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ss-heading);
  white-space: nowrap;
}

.ss-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ss-filter-list a {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: #f6f8fa;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--ss-text);
  transition: var(--ss-transition);
  text-decoration: none;
}

.ss-filter-list a:hover {
  background: var(--ss-primary-light);
  border-color: var(--ss-primary);
  color: var(--ss-primary);
}

.ss-filter-list a.active {
  background: var(--ss-primary);
  color: #fff;
}

/*==============================================================================
05. BLOG LISTING - SECTION HEADER
==============================================================================*/
.ss-blog-listing {
  padding: 20px 0 60px;
}

.ss-blog-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 50px;
  margin-bottom: 50px;
}

.ss-blog-heading {
  flex: 1;
  max-width: 760px;
}

.ss-blog-heading h2 {
  font-size: 42px;
  font-weight: 800;
  margin: 18px 0;
  color: var(--ss-heading);
}

.ss-blog-heading p {
  max-width: 680px;
  margin: 0;
  line-height: 1.8;
  color: var(--ss-muted);
}

.ss-blog-action {
  flex-shrink: 0;
}

/* Scoped to .ss-blog-action to avoid colliding with the homepage's own
   bare .ss-view-all (see consolidation note #4 at top of file) */
.ss-blog-action .ss-view-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 28px;
  border: 1px solid var(--ss-border);
  border-radius: 14px;
  background: #fff;
  color: var(--ss-heading);
  font-weight: 700;
  text-decoration: none;
  transition: var(--ss-transition);
}

.ss-blog-action .ss-view-all:hover {
  background: var(--ss-primary);
  border-color: var(--ss-primary);
  color: #fff;
}

.ss-blog-action .ss-view-all i {
  transition: 0.3s;
}

.ss-blog-action .ss-view-all:hover i {
  transform: translateX(4px);
}

/*==============================================================================
06. BLOG CARD GRID
==============================================================================*/
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  margin-top: 20px;
}

.ss-blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid rgba(16, 24, 40, 0.06);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(16, 24, 40, 0.05);
  transition: var(--ss-transition);
}

.ss-blog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 60px rgba(16, 24, 40, 0.14);
}

.ss-blog-image {
  position: relative;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
}

.ss-blog-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.55s ease;
}

.ss-blog-card:hover .ss-blog-image img {
  transform: scale(1.06);
}

.ss-blog-category {
  position: absolute;
  top: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ss-primary);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.ss-blog-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px;
}

.ss-blog-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ss-muted);
  margin-bottom: 18px;
}

.ss-blog-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ss-blog-body h3 {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ss-heading);
  margin: 0 0 18px;
  min-height: 66px;
  /* keeps all headings aligned across a row of cards */
  display: flex;
  align-items: flex-start;
}

.ss-blog-body p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ss-muted);
  margin: 0 0 24px;
  flex: 1;
}

/* Reading Progress Decoration */
.ss-reading-line {
  height: 4px;
  background: #eef3f5;
  border-radius: 999px;
  overflow: hidden;
  margin-top: auto;
  margin-bottom: 18px;
}

.ss-reading-line span {
  display: block;
  width: 35%;
  height: 100%;
  background: var(--ss-primary);
  transition: 0.4s;
}

.ss-blog-card:hover .ss-reading-line span {
  width: 100%;
}

/* Continue Reading Link */
.ss-blog-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  color: var(--ss-heading);
  font-weight: 700;
  text-decoration: none;
}

.ss-blog-link i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f7f8;
  transition: var(--ss-transition);
}

.ss-blog-card:hover .ss-blog-link i {
  background: var(--ss-primary);
  color: #fff;
  transform: translateX(4px);
}

.ss-blog-card:hover .ss-blog-body h3 {
  color: var(--ss-primary);
  transition: var(--ss-transition);
}

/*==============================================================================
07. NEWSLETTER CTA
==============================================================================*/
.ss-blog-newsletter {
  padding: 15px 0 90px;
}

.ss-newsletter-box {
  background: linear-gradient(135deg, #eef9f3, #f8fcfa);
  border: 1px solid rgba(16, 24, 40, 0.06);
  border-radius: 30px;
  padding: 55px 50px;
  box-shadow: 0 20px 55px rgba(16, 24, 40, 0.08);
}

.ss-newsletter-box h2 {
  font-size: 37px;
  font-weight: 800;
  margin: 20px 0;
  color: var(--ss-heading);
}

.ss-newsletter-box p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--ss-muted);
  margin: 0;
}

.ss-newsletter-form {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ss-newsletter-form .ss-input {
  height: 58px;
  padding: 0 20px;
  border-radius: 14px;
  font-size: 15px;
}

.ss-news-benefits {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.ss-news-benefits span {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--ss-heading);
}

.ss-news-benefits i {
  margin-right: 8px;
  color: var(--ss-primary);
}

/*==============================================================================
08. RESPONSIVE DESIGN
==============================================================================*/

@media (max-width: 991px) {
  .ss-blog-hero {
    padding: 70px 0;
  }

  .ss-blog-side-card {
    max-width: 100%;
    margin: 40px 0 0;
  }

  .ss-blog-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .ss-featured-content {
    padding-left: 0;
    margin-top: 35px;
  }

  .ss-featured-content h2 {
    font-size: 34px;
  }

  .ss-blog-filter-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .ss-blog-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .ss-blog-heading {
    max-width: 100%;
  }

  .ss-newsletter-form {
    margin-top: 30px;
    flex-direction: column;
  }

  .ss-newsletter-form .ss-input,
  .ss-newsletter-form .ss-btn {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .ss-blog-hero-content h1 {
    font-size: 32px;
  }

  .ss-blog-hero-content p {
    font-size: 16px;
  }

  .ss-blog-highlights {
    flex-direction: column;
    gap: 12px;
  }

  .ss-blog-stats {
    grid-template-columns: 1fr;
  }

  .ss-blog-side-card {
    padding: 24px;
    border-radius: 22px;
  }

  .ss-blog-side-card h4 {
    font-size: 26px;
  }

  .ss-blog-side-card li {
    font-size: 16px;
    padding: 14px 0;
  }

  .ss-featured-insight {
    padding: 25px;
  }

  .ss-featured-content h2 {
    font-size: 28px;
  }

  .ss-feature-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .ss-blog-filter-inner {
    padding: 22px;
  }

  .ss-filter-list {
    gap: 10px;
  }

  .ss-filter-list a {
    font-size: 13px;
    padding: 9px 15px;
  }

  .blog-grid {
    grid-template-columns: 1fr;
  }

  .ss-blog-body {
    padding: 22px;
  }

  .ss-blog-body h3 {
    font-size: 21px;
    min-height: auto;
  }

  .ss-newsletter-box {
    padding: 35px 24px;
  }

  .ss-newsletter-box h2 {
    font-size: 30px;
  }

  .ss-news-benefits {
    flex-direction: column;
    gap: 14px;
  }
}

@media (max-width: 1200px) and (min-width: 768px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*==============================================================================
09. ACCESSIBILITY & UTILITIES
==============================================================================*/
@media (prefers-reduced-motion: reduce) {
  .ss-blog-stat,
  .ss-blog-side-card,
  .ss-featured-image img,
  .ss-blog-card,
  .ss-blog-image img,
  .ss-blog-link i,
  .ss-reading-line span,
  .ss-blog-action .ss-view-all i,
  .ss-feature-footer .ss-btn {
    transition: none;
  }

  .ss-blog-stat:hover,
  .ss-blog-side-card:hover,
  .ss-blog-card:hover,
  .ss-feature-footer .ss-btn:hover {
    transform: none;
  }
}

.ss-filter-list a:focus-visible,
.ss-blog-side-card li a:focus-visible,
.ss-blog-action .ss-view-all:focus-visible,
.ss-blog-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 168, 107, 0.18);
}