/* Стаття — варіант C «Паспорт друку» (з redesign-2026-10/blog/post/build.py, C_STYLE) */
/* C «Паспорт друку»: картка статті збоку від шапки й тексту (зміст, матеріали, замовлення) + живий блок під нею;
   деталі — картки з матеріалом, поради — чекліст */
.c-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20.625rem; gap: 0 clamp(1.875rem, 5vw, 4.375rem); align-items: start; }
.c-head { padding: clamp(1.75rem, 5vw, 3.5rem) 0 1.875rem; margin-bottom: 2.125rem; border-bottom: 1px solid var(--line); }
.c-head h1 { margin: 0.875rem 0 1.375rem; font: 900 clamp(2.375rem, 4.8vw, 4.25rem)/1.02 var(--display); letter-spacing: -.045em; text-wrap: balance; }
.c-layout .prose { --measure: 47.5rem; }
.c-side { position: sticky; top: 6rem; display: grid; gap: 0.875rem; padding-top: clamp(1.75rem, 5vw, 3.5rem); }
.pass { display: grid; gap: 1rem; padding: 1.25rem; border-radius: 1.375rem; background: var(--paper); border-top: 0.25rem solid var(--rc); }
.pass dl { display: grid; grid-template-columns: auto 1fr; gap: 0.4375rem 0.875rem; margin: 0; font-size: 0.875rem; }
.pass dt { color: var(--muted); }
.pass dd { margin: 0; }
.pass .toc a { padding: 0.25rem 0; font-size: 0.875rem; }
.pass .toc a span { display: inline-block; min-width: 1.375rem; color: var(--rc); font-weight: 600; }
.pass summary { pointer-events: none; }
.pass .btn { width: 100%; }
/* живий блок під карткою: «Друк за читанням» (fx-print.js); без JS чи WebGL — статична 3D-обкладинка статті */
.fx { position: relative; display: none; aspect-ratio: 1 / .86; border-radius: 1.375rem; background: color-mix(in srgb, var(--rc) 9%, var(--paper)); overflow: hidden; }
.fx[data-on] { display: block; }
.fx canvas, .fx svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .4s; }
.fx.is-live img { opacity: 0; }
.fx__cap { position: absolute; left: 0.875rem; right: 0.875rem; bottom: 0.75rem; display: flex; justify-content: space-between; gap: 0.625rem; font-size: 0.8125rem; color: var(--muted); }
.fx__cap b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-height: 820px) { .fx { display: none !important; } } /* на низьких екранах картка й блок не вміщаються разом */
.prose > h2, .faq > h2 { position: relative; padding-top: 1.375rem; border-top: 0.25rem solid color-mix(in srgb, var(--rc) 70%, transparent); } /* смуга — лише в розділів статті, не в «Коротко» */
.prose .parts { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem; }
.part { height: 100%; padding: 1.25rem; border-radius: 1.125rem; background: var(--paper); }
.part h3 { margin: 0 0 0.625rem; font-size: 1.125rem; font-weight: 600; }
.part p { margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.6; color: var(--muted); }
.prose .tips { list-style: none; padding: 0; display: grid; gap: 0.75rem; counter-reset: tip; }
.tips li { position: relative; padding: 1.125rem 1.25rem 1.125rem 3.75rem; border-radius: 1rem; border: 1.5px solid var(--line); }
.tips li b { font-weight: 600; }
.tips li::before { counter-increment: tip; content: counter(tip); position: absolute; left: 1.125rem; top: 1rem; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg); font: 600 0.875rem/1 var(--display); }
.tips .fig { display: inline-block; margin-left: 0.375rem; padding: 1px 0.5625rem; border-radius: 0.5rem; background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: 600; font-size: 0.9375rem; white-space: nowrap; }
@media (max-width: 1000px) {
  .c-layout { grid-template-columns: minmax(0, 1fr); }
  .c-main { display: contents; }
  .c-head { order: 1; margin-bottom: 0; }
  .c-side { order: 2; position: static; padding-top: 1.375rem; }
  .c-layout .prose { order: 3; padding-top: 1.875rem; }
  .fx { display: none !important; }
  .pass summary { pointer-events: auto; }
}
@media (max-width: 640px) { .prose .parts { grid-template-columns: 1fr; } }

/* WP: колір рубрики статті */
.c-layout { --rc: var(--r-ideas); }
/* WP: вміст блоків Гутенберга в тексті статті */
.prose figure { margin-left: 0; margin-right: 0; }
.prose img { height: auto; border-radius: 1rem; }
.prose figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted); }
.prose .wp-block-table { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.prose table th, .prose table td { padding: 0.75rem 0.875rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose table thead th { font-weight: 600; color: var(--muted); font-size: 0.8125rem; letter-spacing: .04em; text-transform: uppercase; }
.prose blockquote { margin: 0; padding: 0.25rem 0 0.25rem 1.375rem; border-left: 0.25rem solid var(--rc); font-size: 1.1875rem; }
.prose iframe, .prose video { max-width: 100%; }
.prose pre, .prose code { font-family: var(--mono); font-size: .9em; }
.prose pre { overflow-x: auto; padding: 1rem; border-radius: 0.875rem; background: var(--paper); }