/* blog part 5 of 5. Generated by build_blog.py; edit theme/blog/blog.css or the master prototype. */

figure.bp-pano .bp-pano-box img{display:block;width:100%;height:100%;object-fit:cover;margin:0}
figure.bp-pano .bp-pano-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .4s}
figure.bp-pano .bp-pano-box.on .bp-pano-canvas{opacity:1}
figure.bp-pano .bp-pano-chip{position:absolute;left:12px;bottom:12px;z-index:2;pointer-events:none;background:rgba(17,17,17,.72);color:#fff;font-size:13px;line-height:1;padding:8px 12px;border-radius:999px;opacity:0;transition:opacity .3s}
figure.bp-pano .bp-pano-box.on .bp-pano-chip{opacity:1}
figure.bp-pano .bp-pano-box.used .bp-pano-chip{opacity:0}
figure.bp-pano .bp-pano-fs{position:absolute;right:10px;top:10px;z-index:2;width:36px;height:36px;border:0;border-radius:50%;background:rgba(17,17,17,.72);color:#fff;font-size:18px;line-height:36px;cursor:pointer;opacity:0;transition:opacity .3s}
figure.bp-pano .bp-pano-box.on .bp-pano-fs{opacity:1}
figure.bp-pano .bp-pano-box:fullscreen{border-radius:0;aspect-ratio:auto}

/* "More on AI rendering" / "More company lists" (tds_blog_link_box in inc/blog-helpers.php), 5 Nov 2026. Was one wrapped
   line of red underlined links (Siim: spammy). Now a quiet grey box like "In this article": links in ink, two columns on
   a desktop, one on a phone, a hairline between rows, a red underline only on hover. The a rule is (0,4,1) to beat the
   body-link rule (0,3,1). */
.bp .bp-body .bp-lists{background:var(--grey);border-radius:3px;padding:clamp(18px,2.2vw,26px) clamp(20px,2.6vw,30px);margin:28px 0 0}
.bp .bp-body .bp-lists p.bp-lists-t{font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.bp .bp-body .bp-lists ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));column-gap:32px}
.bp .bp-body .bp-lists li{margin:0;padding:0;font-size:15.5px;line-height:1.4;border-top:1px solid rgba(20,19,16,.12)}
.bp .bp-body .bp-lists a:not(.btn){display:block;padding:11px 0;color:var(--ink);font-weight:600;text-decoration:none}
.bp .bp-body .bp-lists a:not(.btn):hover,.bp .bp-body .bp-lists a:not(.btn):focus-visible{color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--accent);text-decoration-thickness:1.5px;text-underline-offset:4px}
@media(max-width:760px){.bp .bp-body .bp-lists{margin-inline:calc(-1 * var(--gut));border-radius:0;padding-inline:var(--gut)}}

/* 3Dstudio.co AI Render pitch inside DIY-reader posts (inc/blog-cta.php). The button is the solid .btn-d (ink): the
   outline .btn-g read as weak on the pale box (Siim, 5 Nov 2026). */
.bp-app-inline{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:28px 0;padding:18px 20px;border:1px solid var(--hair,#e4e3de);border-left:3px solid #C8102E;border-radius:10px;background:#faf9f7}
/* Three classes: `.bp .bp-body p` (0,2,1) was winning, so the text rendered at 18.5px with a 24px bottom margin. */
.bp .bp-body .bp-app-inline p{flex:1 1 280px;margin:0;font-size:16px;line-height:1.5}
.bp-app-inline .btn{flex:0 0 auto;white-space:normal;text-align:center;line-height:1.25}
@media(max-width:600px){.bp-app-inline .btn{flex:1 1 100%;justify-content:center}}

/* Free PDF guide card in the rail (30 Oct 2026). The card, form and their rules are the
   master's .guide-card/.mg-* (copied in by build_blog.py); this only sizes them for a 230-260px
   rail. The rail is already sticky, so the card is not. */
.bp .bp-rail .guide-card{position:static;margin-top:30px;padding:0 18px 20px;border-radius:12px;overflow:hidden}
.bp .bp-rail .guide-card .gcover{display:block;width:calc(100% + 36px);max-width:none;height:auto;margin:0 -18px 16px;border-radius:0;aspect-ratio:16/10}
.bp .bp-rail .guide-card .ph{font-size:11px;margin-bottom:6px}
.bp .bp-rail .guide-card h3{font-size:19px;line-height:1.15;margin-bottom:8px}
.bp .bp-rail .guide-card .gsub{font-size:13.5px;margin-bottom:12px}
/* The rail is 170-260px wide: the bullet list made the card taller than the screen. */
.bp .bp-rail .guide-list{display:none}
.bp .bp-rail .guide-form{gap:8px}
.bp .bp-rail .guide-form input,.bp .bp-rail .mg-form select{font-size:14px;padding:11px 14px}
.bp .bp-rail .mg-form select{padding-right:36px;background-position:right 14px center}
.bp .bp-rail .guide-card .btn{font-size:13px;padding:12px 10px;gap:6px;letter-spacing:.04em}
.bp .bp-rail .mg-opt{font-size:11.5px;gap:8px;padding:0}
.bp .bp-rail .guide-note{font-size:11.5px;margin-top:10px}
@media(max-width:1000px){.bp .bp-rail .guide-card{max-width:440px}}

/* The 3Dstudio.co AI Render card in the rail is the same dark .guide-card (inc/blog-cta.php, 5 Nov 2026), with a button
   instead of a form. The label may be long in German or Finnish and the rail is 150-260px wide (it is narrowest, about
   150px, between 1281 and 1450px), so every line wraps inside the card and the button text inside the button. */
.bp .bp-rail .guide-card.bp-app{box-shadow:0 22px 44px -22px rgba(20,19,16,.6)}
.bp .bp-rail .guide-card.bp-app :is(.ph,h3,.gsub,.bp-app-l){overflow-wrap:anywhere}
.bp .bp-rail .guide-card.bp-app .gsub{margin-bottom:16px}
.bp .bp-rail .guide-card.bp-app .btn{display:flex;width:100%;justify-content:center;white-space:normal;text-align:center;line-height:1.25;
  padding:12px 10px;border-radius:24px;min-width:0;overflow-wrap:anywhere;font-size:12px;letter-spacing:.02em}
.bp .bp-rail .guide-card.bp-app .bp-app-l{display:block;margin-top:14px;font-size:13px;line-height:1.4;color:#d4d3ce;text-align:center;
  text-decoration:underline;text-underline-offset:3px}
.bp .bp-rail .guide-card.bp-app .bp-app-l:hover,.bp .bp-rail .guide-card.bp-app .bp-app-l:focus-visible{color:#fff}