/* блог: статті і список статей. масштаб як на сайті (--k), картки var(--card), без обводок, білий текст = --white-80 */
.blog-page { background: #000; }
.bhero { max-width: calc(1328 * var(--k)); margin: 0 auto; padding: calc(220 * var(--k)) var(--pad) 0; display: grid; justify-items: start; gap: calc(28 * var(--k)); }
.bhero .ccrumbs { margin: 0; }
.btitle { max-width: calc(1100 * var(--k)); font-weight: 700; font-size: calc(72 * var(--k)); line-height: 1.05; color: var(--white-80); text-wrap: balance; }
.blead { max-width: calc(860 * var(--k)); font-weight: 500; font-size: calc(24 * var(--k)); line-height: 1.45; color: rgba(255, 255, 255, 0.55); }
.bmeta { display: flex; flex-wrap: wrap; gap: calc(8 * var(--k)); }
.bmeta span { padding: calc(10 * var(--k)) calc(16 * var(--k)); border-radius: calc(8 * var(--k)); background: var(--card); font-weight: 500; font-size: calc(15 * var(--k)); color: rgba(255, 255, 255, 0.55); }

.bwrap { max-width: calc(1328 * var(--k)); margin: 0 auto; padding: calc(120 * var(--k)) var(--pad) 0; display: grid; grid-template-columns: calc(300 * var(--k)) 1fr; gap: calc(80 * var(--k)); align-items: start; }
.btoc { position: sticky; top: calc(120 * var(--k)); display: grid; gap: calc(16 * var(--k)); padding: calc(28 * var(--k)); border-radius: calc(8 * var(--k)); background: var(--card); }
.btoc ol { list-style: none; display: grid; gap: calc(12 * var(--k)); counter-reset: toc; }
.btoc li { counter-increment: toc; display: grid; grid-template-columns: calc(30 * var(--k)) 1fr; font-weight: 500; font-size: calc(17 * var(--k)); line-height: 1.35; }
.btoc li::before { content: counter(toc, decimal-leading-zero); color: rgba(255, 255, 255, 0.25); }
.btoc a { color: rgba(255, 255, 255, 0.55); transition: color 0.25s ease; }
.btoc a:hover { color: #fff; }

.bbody { max-width: calc(860 * var(--k)); font-weight: 500; font-size: calc(23 * var(--k)); line-height: 1.6; color: rgba(255, 255, 255, 0.62); }
.bbody > * + * { margin-top: calc(24 * var(--k)); }
.bbody h2 { margin-top: calc(72 * var(--k)); font-weight: 700; font-size: calc(40 * var(--k)); line-height: 1.12; color: var(--white-80); scroll-margin-top: calc(120 * var(--k)); }
.bbody h2:first-child { margin-top: 0; }
.bbody b { font-weight: 700; color: var(--white-80); }
.bbody a:not(.bcase):not(.bcta__btn) { color: var(--white-80); border-bottom: 1px solid rgba(255, 255, 255, 0.3); transition: border-color 0.25s ease, color 0.25s ease; }
.bbody a:not(.bcase):not(.bcta__btn):hover { color: #fff; border-color: #fff; }
.bbody ul, .bbody ol { display: grid; gap: calc(12 * var(--k)); padding-left: calc(28 * var(--k)); }
.bbody ul { list-style: none; }
.bbody ul li { position: relative; }
.bbody ul li::before { content: ""; position: absolute; left: calc(-24 * var(--k)); top: 0.62em; width: calc(10 * var(--k)); height: calc(10 * var(--k)); border-radius: calc(3 * var(--k)); background: var(--green); }
.bbody ol li::marker { color: var(--green); font-weight: 700; }
.bbody blockquote { padding: calc(32 * var(--k)) calc(36 * var(--k)); border-radius: calc(8 * var(--k)); background: var(--card); font-weight: 700; font-size: calc(26 * var(--k)); line-height: 1.35; color: var(--white-80); }

.bcase { position: relative; display: grid; gap: calc(14 * var(--k)); padding: calc(32 * var(--k)) calc(140 * var(--k)) calc(32 * var(--k)) calc(32 * var(--k)); border-radius: calc(8 * var(--k)); background: var(--card); transition: background-color 0.3s ease; }
.bcase:hover { background: var(--card-hi); }
.bcase__title { font-weight: 700; font-size: calc(26 * var(--k)); line-height: 1.2; color: var(--white-80); }
.bcase .fcard__arrow { position: absolute; top: 50%; right: calc(28 * var(--k)); width: calc(72 * var(--k)); height: calc(72 * var(--k)); transform: translateY(-50%); }

.bcta { display: grid; gap: calc(24 * var(--k)); justify-items: start; padding: calc(40 * var(--k)); border-radius: calc(8 * var(--k)); background: var(--card-hi); }
.bcta p { font-weight: 700; font-size: calc(26 * var(--k)); line-height: 1.3; color: var(--white-80); }
.bcta__btn { padding: calc(16 * var(--k)) calc(28 * var(--k)); border-radius: calc(6 * var(--k)); background: var(--green); color: #000; font-weight: 700; font-size: calc(18 * var(--k)); transition: filter 0.25s ease; }
.bcta__btn:hover { filter: brightness(1.08); }

.bfaq { display: grid; gap: calc(6 * var(--k)); margin-top: calc(80 * var(--k)) !important; }
.bfaq h2 { margin: 0 0 calc(18 * var(--k)) !important; }
.bfaq__item { border-radius: calc(8 * var(--k)); background: var(--card); }
.bfaq__item[open] { background: var(--card-hi); }
.bfaq__item summary { display: flex; justify-content: space-between; gap: calc(24 * var(--k)); padding: calc(24 * var(--k)) calc(28 * var(--k)); list-style: none; cursor: pointer; font-weight: 700; font-size: calc(21 * var(--k)); line-height: 1.3; color: var(--white-80); }
.bfaq__item summary::-webkit-details-marker { display: none; }
.bfaq__item summary::after { content: "+"; flex: none; color: rgba(255, 255, 255, 0.4); transition: transform 0.3s ease, color 0.3s ease; }
.bfaq__item[open] summary::after { transform: rotate(45deg); color: var(--green); }
.bfaq__item p { padding: 0 calc(28 * var(--k)) calc(26 * var(--k)); }

.bauthor { margin-top: calc(56 * var(--k)) !important; display: grid; gap: calc(12 * var(--k)); padding: calc(32 * var(--k)); border-radius: calc(8 * var(--k)); background: var(--card); font-size: calc(17 * var(--k)); }

.brelated { max-width: calc(1328 * var(--k) + 2 * var(--pad)); margin: 0 auto; }
.brel__grid, .bcard__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(6 * var(--k)); }
.brel, .bcard { display: grid; align-content: start; gap: calc(16 * var(--k)); min-height: calc(220 * var(--k)); padding: calc(32 * var(--k)); border-radius: calc(8 * var(--k)); background: var(--card); transition: background-color 0.3s ease; }
.brel:hover, .bcard:hover { background: var(--card-hi); }
.brel__title, .bcard__title { font-weight: 700; font-size: calc(26 * var(--k)); line-height: 1.2; color: var(--white-80); }
.bcard__lead { font-weight: 500; font-size: calc(16 * var(--k)); line-height: 1.45; color: rgba(255, 255, 255, 0.45); }
.bindex { max-width: calc(1328 * var(--k) + 2 * var(--pad)); margin: 0 auto; padding-top: calc(100 * var(--k)) !important; }
.bcard { min-height: calc(300 * var(--k)); }

@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .bhero { padding-top: calc(110 * var(--k)); gap: calc(16 * var(--k)); }
  .btitle { font-size: calc(32 * var(--k)); }
  .blead { font-size: calc(16 * var(--k)); }
  .bmeta span { font-size: calc(12 * var(--k)); padding: calc(7 * var(--k)) calc(10 * var(--k)); border-radius: calc(6 * var(--k)); }
  .bwrap { grid-template-columns: 1fr; gap: calc(28 * var(--k)); padding-top: calc(40 * var(--k)); }
  .btoc { position: static; padding: calc(18 * var(--k)); border-radius: calc(6 * var(--k)); }
  .btoc li { font-size: calc(14 * var(--k)); }
  .bbody { font-size: calc(16 * var(--k)); }
  .bbody > * + * { margin-top: calc(16 * var(--k)); }
  .bbody h2 { margin-top: calc(44 * var(--k)); font-size: calc(24 * var(--k)); }
  .bbody blockquote, .bcta p, .bcase__title { font-size: calc(18 * var(--k)); }
  .bbody blockquote, .bcta, .bauthor { padding: calc(20 * var(--k)); border-radius: calc(6 * var(--k)); }
  .bcase { padding: calc(20 * var(--k)) calc(80 * var(--k)) calc(20 * var(--k)) calc(20 * var(--k)); border-radius: calc(6 * var(--k)); }
  .bcase .fcard__arrow { width: calc(44 * var(--k)); height: calc(44 * var(--k)); right: calc(18 * var(--k)); }
  .bcta__btn { font-size: calc(15 * var(--k)); }
  .bfaq__item summary { font-size: calc(16 * var(--k)); padding: calc(18 * var(--k)) calc(20 * var(--k)); }
  .bfaq__item p { padding: 0 calc(20 * var(--k)) calc(20 * var(--k)); }
  .bfaq__item, .brel, .bcard { border-radius: calc(6 * var(--k)); }
  .bauthor { font-size: calc(14 * var(--k)); }
  .brel__grid, .bcard__grid { grid-template-columns: 1fr; }
  .brel, .bcard { min-height: 0; padding: calc(20 * var(--k)); }
  .brel__title, .bcard__title { font-size: calc(20 * var(--k)); }
  .bcard__lead { font-size: calc(14 * var(--k)); }
  .bindex { padding-top: calc(40 * var(--k)) !important; }
}
.bsrc { display: grid; gap: calc(12 * var(--k)); padding-top: calc(8 * var(--k)); font-size: calc(15 * var(--k)); line-height: 1.45; }
.bsrc ol { display: grid; gap: calc(6 * var(--k)); padding-left: calc(22 * var(--k)); }
.bsrc a { color: rgba(255, 255, 255, 0.5) !important; border-bottom-color: rgba(255, 255, 255, 0.15) !important; }
@media (max-width: 767px), (max-aspect-ratio: 4/5) { .bsrc { font-size: calc(12 * var(--k)); } }