/* minidev.pro blog: the guides (blog/*.html) and the index (blog.html).
   Loaded after pages.css. Only rules the blog needs; tokens come from pages.css. */

/* ---------- article: hero illustration ---------- */
.blog-content-wrapper, .blog-content { min-width: 0; }
.blog-hero-image { max-width: var(--measure); margin: 0 auto clamp(40px, 6vw, 64px); }
.blog-hero-image figure { margin: 0; }
.blog-hero-image img { display: block; width: 100%; height: auto; border-radius: 14px; }
.blog-hero-image figcaption { margin-top: 12px; font: 400 12px/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- article: tables keep a readable width and scroll on phones ---------- */
.blog-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 26px 0 10px; }
.ai-table, .nc-table { min-width: 700px; }
.sm-table { min-width: 680px; }
.ai-table.ai-table-sm { min-width: 520px; }
.ai-table.ai-table-dense { font-size: 14.5px; }
.ai-table.ai-table-dense th, .ai-table.ai-table-dense td { padding-block: 10px; }
.sm-table td:first-child { color: var(--ink); font-weight: 500; }
.ai-table-note, .nc-table-note, .sm-table-note { margin-top: 4px; }
.blog-table-wrap > .blog-comparison-table { min-width: 640px; }
.blog-comparison-table { margin: 26px 0 10px; }
@media (max-width: 768px) {
  .blog-comparison-table:not(.blog-table-wrap > *) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.ai-sources, .nc-sources, .sm-sources, .blog-sources li { word-break: break-word; }

/* ---------- article: code ---------- */
.blog-content pre { max-width: 100%; }
.blog-content pre code { white-space: pre; font-size: 13px; }
.blog-code-label { margin: 28px 0 -12px; font: 400 12px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- article: price on the pricing comparison cards ---------- */
.blog-price { font: 300 clamp(40px, 4vw, 54px)/1 var(--display); color: var(--ink); margin: 6px 0 16px; font-variant-numeric: lining-nums; }
.blog-price .price-period { margin-left: 4px; }

/* ---------- old URLs: the short "this page moved" note gets the painted band ---------- */
#main + p {
  position: relative; isolation: isolate; overflow: hidden; margin: 0; color: var(--cream-2); background: var(--dusk);
  padding: clamp(150px, 22vh, 200px) var(--gut) clamp(64px, 10vh, 104px); font: 300 clamp(20px, 2vw, 26px)/1.45 var(--text);
}
#main + p::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("/assets/site/painting/sierra-1280.webp") 50% 38% / cover no-repeat; }
#main + p::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(24, 16, 12, .86), rgba(24, 16, 12, .5)); }
#main + p a { color: var(--cream); text-decoration-color: rgba(243, 235, 221, .5); }
#main + p a:hover { color: var(--gold); }

/* =================================================================
   blog.html: a calm editorial index on paper
   ================================================================= */

/* the painted band, same treatment as .page-hero */
.blog-index .hero {
  position: relative; isolation: isolate; overflow: hidden; color: var(--cream); background: var(--dusk);
  padding: clamp(132px, 17vh, 176px) var(--gut) clamp(48px, 7vh, 80px);
}
.blog-index .hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("/assets/site/painting/sierra-1920.webp") 50% 38% / cover no-repeat;
  background-image: image-set(url("/assets/site/painting/sierra-1280.webp") 1x, url("/assets/site/painting/sierra-1920.webp") 2x);
}
.blog-index .hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(24, 16, 12, .86) 0%, rgba(24, 16, 12, .62) 46%, rgba(24, 16, 12, .28) 100%), linear-gradient(0deg, rgba(24, 16, 12, .55), rgba(24, 16, 12, 0) 45%);
}
.blog-index .hero .container { max-width: var(--wide); margin: 0 auto; }
.blog-index .hero .heading {
  font: 300 clamp(40px, 5.4vw, 80px)/1 var(--display); letter-spacing: .005em; color: var(--cream); max-width: 17ch; margin: 0;
  text-shadow: 0 2px 30px rgba(10, 6, 4, .35);
}
.blog-index .hero .heading-highlight { color: inherit; font: inherit; }
.blog-index .hero .subheading { font: 300 clamp(18px, 1.6vw, 21px)/1.55 var(--text); color: rgba(243, 235, 221, .9); opacity: 1; max-width: 40em; margin: 22px 0 0; }

/* sections: one sheet of paper, chapters divided by a hairline */
.blog-index .section, .blog-index .section-dark { background: transparent; color: var(--ink); padding: clamp(48px, 6vw, 80px) var(--gut) 0; }
.blog-index .section-dark::before { display: none; }
.blog-index .section:last-of-type { padding-bottom: clamp(64px, 8vw, 104px); }
.blog-index .section .section-title {
  font: 300 clamp(28px, 2.8vw, 40px)/1.1 var(--display); letter-spacing: .02em; color: var(--ink);
  border-top: 1px solid var(--ink); padding-top: 18px; margin: 0 0 32px;
}

/* entries: label, title, one line, a quiet link */
.blog-index .pricing-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 44px 32px; align-items: start; }
.blog-index .pricing-card { display: flex; flex-direction: column; align-items: flex-start; border-top: 1px solid var(--hair); padding-top: 16px; min-width: 0; }
.blog-index .pricing-card .blog-card-thumb { order: 0; overflow: hidden; border-radius: 10px; margin: 0 0 16px; background: var(--paper-2); }
.blog-index .pricing-card .blog-card-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-index .pricing-card .price-tag { order: 1; font: 400 11.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--umber); margin: 0 0 10px; }
.blog-index .pricing-card h3 { order: 2; font: 400 clamp(20px, 1.7vw, 23px)/1.18 var(--display); letter-spacing: .025em; margin: 0 0 10px; }
.blog-index .pricing-card .price-description { order: 3; font-size: 16px; line-height: 1.55; color: var(--ink-2); margin: 0 0 14px; }
.blog-index .pricing-card .cta-primary {
  order: 4; min-height: 0; padding: 0; border-radius: 0; background: none; color: var(--ink);
  font: 400 15px/1.4 var(--text); white-space: normal; text-decoration: underline; text-decoration-color: rgba(31, 26, 23, .38); text-underline-offset: .2em;
}
.blog-index .pricing-card .cta-primary:hover { background: none; color: var(--umber); text-decoration-color: currentColor; }
.blog-index .features-grid { margin-top: 0; }

@media (max-width: 600px) {
  .blog-index .hero { padding-top: 116px; }
  .blog-index .hero::after { background: linear-gradient(0deg, rgba(24, 16, 12, .9) 0%, rgba(24, 16, 12, .62) 60%, rgba(24, 16, 12, .45)); }
  .blog-index .pricing-grid { gap: 36px; }
}

/* stat rows sit inside the 720px text column: smaller figures so ranges stay on one line */
.blog-content .blog-stat-number { font-size: clamp(36px, 3.4vw, 50px); }

/* The old neon illustrations do not belong in the painted world: the index stays typographic,
   and in-post hero images are toned into the paper palette. */
.blog-index .pricing-card .blog-card-thumb { display: none; }
.blog-hero-image img { filter: grayscale(1) sepia(.32) contrast(1.04) brightness(.98); mix-blend-mode: multiply; }