/* =========================================================================
   SavaremusMarketing — Blog-scoped styles (child theme).
   Loaded ONLY on blog index / archives / single posts (see functions.php).
   All selectors are namespaced .sava-* (or scoped under .sava-article-content)
   so NO other page/section is affected. Uses Bootstrap 5.3 CSS variables so it
   matches the site brand colours and dark mode automatically.
   ========================================================================= */

/* ---- Blog header (index + archive) ---- */
.sava-blog-head{
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.5rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
}
.sava-eyebrow{
  text-transform: uppercase; letter-spacing: .16em; font-size: .75rem; font-weight: 700;
  color: var(--bs-primary); margin-bottom: .5rem;
}
.sava-blog-title{
  font-weight: 800; line-height: 1.15; margin: 0 auto;
  font-size: clamp(1.8rem, 4.2vw, 2.8rem); max-width: 20ch;
}
.sava-blog-intro{
  margin: .9rem auto 0; max-width: 60ch; color: var(--bs-secondary-color);
  font-size: 1.05rem; line-height: 1.7;
}

/* ---- Listing grid ---- */
.sava-blog-list{ padding: clamp(2rem, 5vw, 3.5rem) 0; }

/* ---- Post cards ---- */
.sava-card{
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color) !important;
  border-radius: 1rem; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.sava-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.30);
  border-color: var(--bs-primary) !important;
}
.sava-card-media{
  position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--bs-tertiary-bg);
}
.sava-card-img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.sava-card:hover .sava-card-img{ transform: scale(1.05); }
.sava-card-img--ph{ background: linear-gradient(135deg, var(--bs-tertiary-bg), var(--bs-secondary-bg)); }
.sava-card-badge{
  position: absolute; top: .75rem; left: .75rem;
  background: var(--bs-primary); color: #fff;
  font-size: .7rem; font-weight: 700; letter-spacing: .03em;
  padding: .25rem .6rem; border-radius: 999px;
}
.sava-card-date{ font-size: .78rem; color: var(--bs-secondary-color); margin-bottom: .35rem; }
.sava-card-title{ line-height: 1.3; margin: 0 0 .5rem; }
.sava-card-title a{ color: var(--bs-emphasis-color); text-decoration: none; }
.sava-card-title a:hover{ color: var(--bs-primary); }
.sava-card-excerpt{
  color: var(--bs-secondary-color); font-size: .92rem; line-height: 1.6; margin: 0 0 1rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sava-card-cta{
  font-weight: 600; font-size: .88rem; color: var(--bs-primary); text-decoration: none;
  display: inline-flex; align-items: center; gap: .35rem;
}
.sava-card-cta:hover{ gap: .55rem; }
.sava-card .card-body{ padding: 1.1rem 1.15rem 1.25rem; }

/* ---- Pagination ---- */
.sava-pagination{ margin-top: clamp(2rem, 5vw, 3rem); }

/* ---- Single article: hero ---- */
.sava-article-hero{
  width: 100%; max-height: 460px; overflow: hidden; background: var(--bs-tertiary-bg);
}
.sava-article-hero-img{
  width: 100%; height: 100%; max-height: 460px; object-fit: cover; display: block;
}

/* ---- Single article: wrapper + readable measure ---- */
.sava-article-wrap{
  max-width: 44rem;          /* ~70ch readable line length */
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3rem) 0;
}
.sava-article-header{ margin-bottom: 1.75rem; }
.sava-article-cats{ display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.sava-cat-pill{
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .1);
  padding: .25rem .65rem; border-radius: 999px; text-decoration: none;
}
.sava-cat-pill:hover{ background: var(--bs-primary); color: #fff; }
.sava-article-title{
  font-weight: 800; line-height: 1.15; letter-spacing: -.01em;
  font-size: clamp(1.8rem, 4.5vw, 2.8rem); margin: 0 0 1rem;
}
.sava-article-meta{ color: var(--bs-secondary-color); font-size: .92rem; }
.sava-article-meta .sava-dot{ margin: 0 .4rem; }

/* ---- Single article: content typography (scoped) ---- */
.sava-article-content{ font-size: 1.075rem; line-height: 1.8; color: var(--bs-body-color); }
.sava-article-content > * + *{ margin-top: 1.15rem; }
.sava-article-content h2{ font-weight: 700; line-height: 1.25; font-size: 1.6rem; margin-top: 2.25rem; }
.sava-article-content h3{ font-weight: 700; line-height: 1.3; font-size: 1.3rem; margin-top: 1.9rem; }
.sava-article-content h4{ font-weight: 700; font-size: 1.1rem; margin-top: 1.6rem; }
.sava-article-content p{ margin-bottom: 0; }
.sava-article-content a{ color: var(--bs-primary); text-underline-offset: .18em; }
.sava-article-content ul, .sava-article-content ol{ padding-left: 1.4rem; }
.sava-article-content li{ margin-bottom: .5rem; }
.sava-article-content img,
.sava-article-content figure img{
  max-width: 100%; height: auto; border-radius: .75rem; display: block; margin: 1.75rem auto;
}
.sava-article-content figure{ margin: 1.75rem 0; }
.sava-article-content figcaption{ font-size: .85rem; color: var(--bs-secondary-color); text-align: center; margin-top: .5rem; }
.sava-article-content blockquote{
  margin: 1.75rem 0; padding: .75rem 1.25rem; font-size: 1.1rem; font-style: italic;
  color: var(--bs-emphasis-color);
  border-left: 4px solid var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), .05); border-radius: 0 .5rem .5rem 0;
}
.sava-article-content pre{
  background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color);
  padding: 1rem; border-radius: .6rem; overflow-x: auto; font-size: .9rem;
}
.sava-article-content :not(pre) > code{
  background: var(--bs-tertiary-bg); padding: .12rem .4rem; border-radius: .35rem; font-size: .9em;
}
.sava-article-content table{ width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.sava-article-content th, .sava-article-content td{ border: 1px solid var(--bs-border-color); padding: .55rem .7rem; }
.sava-page-links{ margin-top: 1.5rem; font-size: .9rem; }

/* ---- Mobile spacing ---- */
@media (max-width: 575.98px){
  .sava-article-hero, .sava-article-hero-img{ max-height: 300px; }
  .sava-article-content{ font-size: 1.02rem; line-height: 1.75; }
  .sava-card .card-body{ padding: 1rem; }
}

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .sava-card, .sava-card-img{ transition: none; }
  .sava-card:hover{ transform: none; }
  .sava-card:hover .sava-card-img{ transform: none; }
}

/* ---- Blog index chapeau (rendered from the posts page content) ---- */
.sava-blog-intro > * + *{ margin-top: .6rem; }
.sava-blog-intro p{ margin: 0; }

/* ---- Wide tables must scroll inside the article, never the page ---- */
.sava-article-content table{ display: block; overflow-x: auto; max-width: 100%; }
@media (min-width: 576px){
  .sava-article-content table{ display: table; }
}

/* ---- Single article: byline + dates (entity / trust) ---- */
.sava-article-footer{
  margin-top: 2.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--bs-border-color);
  color: var(--bs-secondary-color); font-size: .92rem;
}
.sava-article-byline{ margin: 0 0 .35rem; }
.sava-article-byline a{ color: var(--bs-primary); text-underline-offset: .18em; }
.sava-article-dates{ margin: 0; font-size: .85rem; }

/* ---- Single article: one calm next step ---- */
.sava-next-step{
  margin-top: 2.25rem; padding: clamp(1.25rem, 4vw, 1.9rem);
  border: 1px solid var(--bs-border-color); border-radius: 1rem;
  background: var(--bs-tertiary-bg);
}
.sava-next-step .sava-eyebrow{ margin-bottom: .35rem; }
.sava-next-step-title{
  font-weight: 800; font-size: clamp(1.2rem, 3vw, 1.45rem); line-height: 1.25; margin: 0 0 .5rem;
}
.sava-next-step-text{
  margin: 0 0 1.1rem; color: var(--bs-secondary-color); line-height: 1.65; font-size: .97rem;
}
.sava-next-step-actions{ display: flex; flex-wrap: wrap; gap: .6rem; }
.sava-btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: .6rem 1.1rem; border-radius: .6rem; font-weight: 600; font-size: .92rem;
  text-decoration: none; border: 1px solid transparent; transition: background-color .2s ease, color .2s ease;
}
.sava-btn--primary{ background: var(--bs-primary); color: #fff; }
.sava-btn--primary:hover{ background: var(--bs-primary); color: #fff; filter: brightness(.92); }
.sava-btn--ghost{ border-color: var(--bs-border-color); color: var(--bs-emphasis-color); }
.sava-btn--ghost:hover{ border-color: var(--bs-primary); color: var(--bs-primary); }

/* ---- Single article: related posts ---- */
.sava-related{ margin-top: 2.25rem; }
.sava-related-title{
  font-weight: 700; font-size: 1.15rem; margin: 0 0 .85rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--bs-border-color);
}
.sava-related-list{ list-style: none; margin: 0; padding: 0; }
.sava-related-item + .sava-related-item{ border-top: 1px solid var(--bs-border-color); }
.sava-related-link{
  display: flex; flex-direction: column; gap: .15rem;
  padding: .7rem 0; text-decoration: none; color: var(--bs-emphasis-color);
}
.sava-related-link:hover .sava-related-name{ color: var(--bs-primary); }
.sava-related-name{ font-weight: 600; line-height: 1.35; }
.sava-related-date{ font-size: .8rem; color: var(--bs-secondary-color); }

@media (prefers-reduced-motion: reduce){
  .sava-btn{ transition: none; }
}