/* cluster-blocks.css — Plan #72 Phase 03
   Cluster-blog-specific CSS rules extracted from V2 inline styles.
   Loaded only by style-cluster blogs (in addition to page-base-V2.css).
   Source: 02-DIGITAL-PRODUCTS/03-Assets/site/blog/scandinavian-kitchen-design-V2.html
   (extended variant — superset of all 16 cluster blogs)
*/

.sidebar-card__price { font-family: var(--rbd-font-body); font-weight: 500; font-size: 14px; color: var(--rbd-charcoal); margin-bottom: 8px; }

.sidebar-card__link { font-family: var(--rbd-font-body); font-weight: 500; font-size: 14px; color: var(--rbd-gold); }

.sidebar-video { margin-bottom: 16px; }

.sidebar-video img { width: 100%; aspect-ratio: 9/16; object-fit: cover; margin-bottom: 8px; }

.sidebar-video__title { font-family: var(--rbd-font-body); font-weight: 400; font-size: 14px; color: var(--rbd-charcoal); }

.section-break { border: none; border-top: 1px solid var(--rbd-hairline); width: 60%; margin: 32px auto; }

.tier-label { background: var(--rbd-cream); border-radius: 0; padding: 12px 16px; margin-bottom: 12px; }

.tier-label h3, .tier-label h4 { margin-bottom: 0; }

.summary-shelf { background: var(--rbd-cream); border-radius: 0; padding: 20px; margin-bottom: 16px; list-style: none; }

.summary-shelf li { position: relative; padding-left: 18px; line-height: 28px; }

.summary-shelf li::before { content: ''; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--rbd-gold); }

.stats-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; font-family: var(--rbd-font-body); font-weight: 500; font-size: 14px; color: var(--rbd-charcoal); margin-bottom: 24px; }

.stats-row span::after { content: ' \00B7 '; }

.stats-row span:last-child::after { content: ''; }

.gold-bullets { list-style: none; padding: 0; }

.gold-bullets li { position: relative; padding-left: 18px; margin-bottom: 8px; }

.gold-bullets li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--rbd-gold); }

.palette-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-family: var(--rbd-font-body); font-size: 14px; }

.palette-table thead { background: var(--rbd-navy); }

.palette-table th { font-family: var(--rbd-font-display); font-weight: 700; font-size: 12px; color: var(--rbd-cream); text-align: left; padding: 10px 12px; letter-spacing: 0.25px; text-transform: uppercase; }

.palette-table td { padding: 10px 12px; border-bottom: 1px solid rgba(35,43,58,0.1); color: var(--rbd-charcoal); vertical-align: middle; }

.palette-table tbody tr:nth-child(even) { background: rgba(212, 169, 106, 0.1); }

.palette-swatch { display: inline-block; width: 22px; height: 22px; border: 1px solid var(--rbd-hairline); vertical-align: middle; margin-right: 8px; }

.palette-table code { font-family: 'Menlo', monospace; font-size: 12px; color: var(--rbd-navy); }

.cluster-hub-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-family: var(--rbd-font-body); font-size: 14px; }

.cluster-hub-table thead { background: var(--rbd-cream); }

.cluster-hub-table th { font-family: var(--rbd-font-display); font-weight: 700; font-size: 13px; color: var(--rbd-navy); text-align: left; padding: 10px 12px; letter-spacing: 0.25px; text-transform: uppercase; }

.cluster-hub-table td { padding: 10px 12px; border-bottom: 1px solid rgba(35,43,58,0.1); color: var(--rbd-charcoal); vertical-align: top; }

.cluster-hub-table a { color: var(--rbd-navy); font-weight: 500; border-bottom: 1px dotted var(--rbd-gold); }

.cluster-hub-table a:hover { color: var(--rbd-gold); }

.cta-block { background: var(--rbd-navy); border-radius: 16px; padding: 32px; text-align: center; margin: 32px 0; }

.cta-block h3 { color: var(--rbd-cream); font-size: 24px; margin-bottom: 12px; }

.cta-block p { color: rgba(245,230,211,0.8); margin-bottom: 20px; }

.cta-block .btn-cta { display: inline-block; padding: 14px 32px; background: var(--rbd-gold); color: var(--rbd-navy); font-family: var(--rbd-font-display); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; border: none; cursor: pointer; transition: background-color 200ms var(--ease-std), transform 200ms var(--ease-std); }

.cta-block .btn-cta:hover { background: #C49A5A; color: var(--rbd-navy); }

.cta-block .btn-cta:active { background: #B48A4A; transform: scale(0.97); }

.cta-block .btn-secondary { display: inline-block; margin-top: 12px; font-family: var(--rbd-font-body); font-size: 14px; color: var(--rbd-gold); }

.cta-block .btn-secondary:hover { color: var(--rbd-cream); }

@media (max-width: 768px) {
      h1 { font-size: 28px; letter-spacing: -0.5px; }
      h2 { font-size: 22px; }
      body { font-size: 15px; }
      .article-grid { padding: 16px; }
      .article-hero { padding: 24px 16px; }
      .ticker-tape__text { font-size: 11px; }
      .ticker-tape__track { animation-duration: 15s; }
      .blueprint-bar { padding: 12px 16px; }
      .blueprint-bar__nav { gap: 16px; flex-wrap: wrap; }
      .article-sidebar { display: block; grid-template-columns: 1fr; }
      .hero-card--front { width: 200px; font-size: 10px; bottom: 10px; right: 10px; padding: 10px; }
      .hero-card--front .hero-card__title { font-size: 14px; }
      .hero-card--back { width: 180px; bottom: 25px; right: 40px; padding: 10px; }
      .hero-card--back p { font-size: 11px; }
      .palette-table { font-size: 12px; }
      .palette-table th, .palette-table td { padding: 8px; }
      .cluster-hub-table { font-size: 12px; }
      .cluster-hub-table th, .cluster-hub-table td { padding: 8px; }
      .cta-block { padding: 24px 16px; }
    }

@media (prefers-color-scheme: dark) {
      body { background-color: var(--rbd-navy); color: var(--rbd-cream); }
      body::before { background-image: url('/backgrounds/calculators/budget_dark.png'); opacity: 0.25; }
      h1, h2, h3, h4 { color: var(--rbd-cream); }
      p, li, td, th, span, div { color: var(--rbd-cream); }
      a { color: var(--rbd-gold); }
      a:hover { color: var(--rbd-cream); }
      .hero-card--front { background: var(--rbd-cream); }
      .hero-card--front .hero-card__title { color: var(--rbd-navy); }
      .hero-card--front .hero-card__detail { color: var(--rbd-charcoal); }
      .hero-card--back { background: #fff; }
      .hero-card--back p { color: var(--rbd-navy); }
      .palette-table { border-color: rgba(245, 230, 211, 0.15); }
      .palette-table th { background: var(--rbd-navy); color: var(--rbd-cream); }
      .palette-table td { color: var(--rbd-cream); border-color: rgba(245, 230, 211, 0.15); }
      .palette-table code { color: var(--rbd-cream); }
      .palette-table tbody tr:nth-child(even) { background: rgba(212,169,106,0.08); }
      .cluster-hub-table th { background: rgba(245,230,211,0.1); color: var(--rbd-cream); }
      .cluster-hub-table td { color: var(--rbd-cream); border-color: rgba(245, 230, 211, 0.15); }
      .cluster-hub-table a { color: var(--rbd-cream); border-bottom-color: var(--rbd-gold); }
      .tier-label { background: rgba(245, 230, 211, 0.1); }
      .gold-highlight { background: rgba(212, 169, 106, 0.1); }
      .toc { background: var(--rbd-cream); }
      .toc summary { color: var(--rbd-navy); }
      .toc nav a { color: var(--rbd-charcoal); }
      .toc nav a:hover { color: var(--rbd-gold); }
      .toc summary::before { border-left-color: var(--rbd-charcoal); }
      .ftc-disclosure { background: var(--rbd-cream); color: var(--rbd-charcoal); }
      .blueprint-bar__social a { color: var(--rbd-cream); }
      .blueprint-bar__logo { color: var(--rbd-cream); }
      .blueprint-bar__logo:hover { color: var(--rbd-cream); }
      .blueprint-bar__nav a { color: var(--rbd-cream); }
      .blueprint-bar__search { color: var(--rbd-cream); }
      .blueprint-bar__social img, .blueprint-bar__social svg { filter: brightness(0) invert(1); }
      .footer-social a { color: var(--rbd-cream); }
      .footer-social img, .footer-social svg { filter: brightness(0) invert(1); }
      .faq-item summary { color: var(--rbd-cream); }
      .faq-item .faq-answer, .faq-item .faq-answer p { color: var(--rbd-cream); }
      .faq-item { border-color: rgba(245, 230, 211, 0.15); }
      .share-row a { color: var(--rbd-cream); border-color: rgba(245, 230, 211, 0.3); }
      .share-row a:hover { color: var(--rbd-gold); border-color: var(--rbd-gold); }
      .cta-block, .product-embed { background: var(--rbd-cream); }
      .cta-block h3, .cta-block p, .cta-block span, .cta-block div { color: var(--rbd-navy); }
      /* Light-bg containers keep cream background, force navy text */
      .lead-magnet h3, .lead-magnet p { color: var(--rbd-navy); }
      .summary-shelf, .summary-shelf li, .summary-shelf li strong { color: var(--rbd-navy); }
      .sidebar-card[style*="gold-tint"] .sidebar-card__title,
      .sidebar-card[style*="gold-tint"] p { color: var(--rbd-navy); }
      .btn-cta { background: var(--rbd-gold); color: var(--rbd-navy); }
      .cta-block .btn-secondary { color: var(--rbd-gold); }
      .section-break { border-color: rgba(245, 230, 211, 0.15); }
      .stats-row span { color: var(--rbd-cream); }
      .sidebar-widget__title { color: var(--rbd-cream); }
      .sidebar-card { background: rgba(245, 230, 211, 0.05); border-color: rgba(245, 230, 211, 0.1); }
      .sidebar-card__title { color: var(--rbd-cream); }
      .sidebar-card__price { color: var(--rbd-gold); }
      .sidebar-card__link { color: var(--rbd-gold); }
      .sidebar-video__title { color: var(--rbd-cream); }
    }

/* ─── Affiliate card grid (Plan #72 Phase 03) ─────────────────────
   Pulled from legacy live cluster blogs (variable names mapped to V3
   brand tokens). V2 dropped these rules; restored here so the 5 V2
   blogs that lean on affiliate-card divs render correctly under V3. */
.affiliate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin: 32px 0;
}
@media (max-width: 700px) {
  .affiliate-grid { grid-template-columns: 1fr 1fr; }
}
.affiliate-card {
  background: var(--rbd-off-white);
  padding: 16px;
  text-align: left;
  border: 1px solid var(--rbd-hairline, rgba(26, 39, 68, 0.15));
}
.affiliate-card__placeholder {
  aspect-ratio: 1 / 1;
  background: rgba(255, 255, 255, 0.4);
  border: 1px dashed var(--rbd-hairline, rgba(26, 39, 68, 0.15));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--rbd-charcoal);
  margin-bottom: 12px;
}
.affiliate-card__title {
  font-family: var(--font-heading, "DM Sans", sans-serif);
  font-weight: 700;
  font-size: 14px;
  color: var(--rbd-navy);
  margin: 0 0 6px;
}
.affiliate-card__retailer {
  font-family: var(--font-body, "Inter Tight", sans-serif);
  font-size: 12px;
  color: var(--rbd-charcoal);
}