/* Scoped additions for the weekly backsplash guide and its archive feature. */
.backsplash-cost-hero::before {
  background: linear-gradient(110deg, rgba(14,26,43,.94), rgba(31,58,95,.78));
}
.backsplash-cost-hero .hero-bg { object-position: center 58%; }
.backsplash-cost-hero h1 { max-width: 800px; }
.backsplash-cost-hero p { max-width: 720px; margin-bottom: 0; }
.backsplash-cost-article .blog-meta { flex-wrap: wrap; }
.backsplash-cost-example {
  padding: clamp(1.25rem, 4vw, 2rem);
  margin: 1.5rem 0;
  border-left: 3px solid var(--color-secondary);
  background: var(--color-bg-alt);
}
.backsplash-cost-example h3 { margin-top: 0; }
.backsplash-cost-example p:last-child { margin-bottom: 0; }
.backsplash-cost-table-wrap { max-width: 100%; overflow-x: auto; }
.backsplash-cost-table-wrap th[scope="row"] {
  width: 30%; background: var(--color-bg-alt); color: var(--color-primary); vertical-align: top;
}
.backsplash-cost-table-wrap td { vertical-align: top; }
.backsplash-cost-article .blog-content a:not(.btn) { text-decoration: underline; text-underline-offset: .15em; }
.backsplash-latest {
  max-width: 800px;
  margin: 0 auto 3rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-top: 3px solid var(--color-secondary);
  background: var(--color-bg-card);
}
.backsplash-latest .section-label { color: var(--color-primary); }
.backsplash-latest h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); }
.backsplash-archive-heading { margin-bottom: 2rem; }
@media (max-width: 600px) {
  .backsplash-cost-hero .breadcrumbs { font-size: 12px; letter-spacing: 0; }
  .backsplash-cost-article th, .backsplash-cost-article td { padding: .75rem; overflow-wrap: anywhere; }
}