/* ============================================================================
   Стили информационных страниц, блога и оформления заказа (06.10.2026).
   Цвета берутся из переменных главной (site.css): --bg-*, --text-*, --border-color и т.д.,
   поэтому светлая и тёмная темы работают сами.
   ============================================================================ */

body.theme-transition { background: var(--bg-primary); color: var(--text-primary); display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
/* основное содержимое занимает всё свободное место — подвал всегда внизу, даже на коротких страницах */
.qr-main { display: block; flex: 1 0 auto; width: 100%; }
body.theme-transition > footer { flex-shrink: 0; margin-top: auto; }
.qr-container { max-width: 80rem; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px)  { .qr-container { padding: 0 24px; } }
@media (min-width: 1024px) { .qr-container { padding: 0 32px; } }

/* --- шапка страницы --------------------------------------------------------- */
.qr-hero { position: relative; overflow: hidden; background: var(--bg-secondary); padding: 112px 0 40px; border-bottom: 1px solid var(--border-light); }
@media (min-width: 1024px) { .qr-hero { padding: 136px 0 52px; } }
.qr-hero__deco { position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 88% 0%, var(--hero-deco-1), transparent 45%), radial-gradient(circle at 5% 100%, var(--hero-deco-2), transparent 45%); }
.qr-hero .qr-container { position: relative; }
.qr-hero__title { margin: 14px 0 0; font-weight: 800; line-height: 1.15; color: var(--text-primary); font-size: 1.875rem; letter-spacing: -.01em; max-width: 56rem; }
@media (min-width: 640px)  { .qr-hero__title { font-size: 2.25rem; } }
@media (min-width: 1024px) { .qr-hero__title { font-size: 2.75rem; } }
.qr-hero__lead { margin: 14px 0 0; max-width: 46rem; color: var(--text-secondary); font-size: 1.125rem; line-height: 1.6; }
.qr-hero__meta { margin-top: 14px; color: var(--text-tertiary); font-size: .875rem; }

.qr-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .875rem; color: var(--text-tertiary); }
.qr-crumbs a { color: var(--text-secondary); text-decoration: none; }
.qr-crumbs a:hover { color: #FF914D; }
.qr-crumbs__sep { opacity: .6; }

/* --- тело ------------------------------------------------------------------- */
.qr-body { padding: 36px 0 72px; background: var(--bg-primary); }
@media (min-width: 1024px) { .qr-body { padding: 48px 0 96px; } }
.qr-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 1.5rem; box-shadow: 0 10px 30px -15px var(--shadow-md); }

/* --- текст ------------------------------------------------------------------ */
.qr-prose { max-width: 56rem; margin: 0 auto; padding: 24px 20px; color: var(--text-primary); font-size: 1.0625rem; line-height: 1.75; overflow-wrap: anywhere; }
@media (min-width: 768px) { .qr-prose { padding: 44px 52px; } }
.qr-prose > :first-child { margin-top: 0; }
.qr-prose > :last-child { margin-bottom: 0; }
.qr-prose h2, .qr-prose h3, .qr-prose h4 { color: var(--text-primary); font-weight: 800; line-height: 1.3; letter-spacing: -.005em; scroll-margin-top: 100px; }
.qr-prose h2 { font-size: 1.625rem; margin: 2em 0 .6em; }
.qr-prose h3 { font-size: 1.3125rem; margin: 1.8em 0 .5em; }
.qr-prose h4 { font-size: 1.125rem; margin: 1.5em 0 .4em; }
.qr-prose p { margin: 0 0 1em; color: var(--text-secondary); }
.qr-prose strong, .qr-prose b { color: var(--text-primary); font-weight: 700; }
.qr-prose a { color: #FF914D; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.qr-prose a:hover { color: #e87a35; }
.dark .qr-prose a { color: #FFBD59; }
.qr-prose ul, .qr-prose ol { margin: 0 0 1.2em; padding-left: 1.5em; color: var(--text-secondary); }
.qr-prose li { margin: .35em 0; padding-left: .2em; }
.qr-prose li::marker { color: #FF914D; }
.qr-prose img { display: block; max-width: 100%; height: auto; margin: 1.6em auto; border-radius: 1rem; }
.qr-prose blockquote { margin: 1.5em 0; padding: 14px 20px; border-left: 4px solid #FF914D; background: var(--bg-secondary); border-radius: 0 .75rem .75rem 0; color: var(--text-secondary); }
.qr-prose hr { border: 0; border-top: 1px solid var(--border-color); margin: 2em 0; }
.qr-prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .95rem; display: block; overflow-x: auto; }
.qr-prose th, .qr-prose td { border: 1px solid var(--border-color); padding: 10px 14px; text-align: left; vertical-align: top; }
.qr-prose th { background: var(--bg-secondary); color: var(--text-primary); }
.qr-prose figure { margin: 1.6em 0; }
.qr-prose figcaption { text-align: center; color: var(--text-tertiary); font-size: .875rem; margin-top: 8px; }

/* раскрывающиеся блоки (рекомендации по работе) */
.qr-prose details { border: 1px solid var(--border-color); border-radius: 1rem; margin: 12px 0; background: var(--bg-card); overflow: hidden; }
.qr-prose summary { cursor: pointer; padding: 16px 20px; font-weight: 700; color: var(--text-primary); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qr-prose summary::-webkit-details-marker { display: none; }
.qr-prose summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--icon-bg); color: #FF914D; font-size: 20px; line-height: 1; }
.qr-prose details[open] > summary::after { content: "–"; }
.qr-prose details > :not(summary) { margin-left: 20px; margin-right: 20px; }
.qr-prose details > :last-child { margin-bottom: 18px; }
.qr-prose summary * { margin: 0; display: inline; font: inherit; color: inherit; }

/* --- контакты ---------------------------------------------------------------- */
.qr-contacts { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 0 0 28px; }
@media (min-width: 768px) { .qr-contacts { grid-template-columns: repeat(3, 1fr); } }
.qr-contacts__card { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--border-color); border-radius: 1.25rem; background: var(--bg-secondary); }
.qr-contacts__ico { flex: none; width: 52px; height: 52px; border-radius: 14px; background: var(--icon-bg); display: flex; align-items: center; justify-content: center; }
.qr-contacts__ico img { width: 26px; height: 26px; margin: 0; border-radius: 0; display: block; }
.dark .qr-contacts__ico img { filter: invert(1); }
.qr-contacts__label { font-size: .875rem; color: var(--text-tertiary); line-height: 1.3; }
.qr-contacts__value { font-weight: 700; color: var(--text-primary); overflow-wrap: anywhere; }
.qr-contacts__value a { color: inherit; text-decoration: none; }
.qr-contacts__value a:hover { color: #FF914D; }
.qr-contacts__req { margin-top: 8px; }
.qr-contacts__req h2 { margin-top: 0; }
.qr-contacts__req p { margin: 0 0 .5em; }
/* --- блог ------------------------------------------------------------------- */
.qr-blog-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .qr-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .qr-blog-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.qr-blogcard { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 1.5rem; overflow: hidden; text-decoration: none; color: inherit;
    box-shadow: 0 10px 30px -18px var(--shadow-md); transition: transform .2s, box-shadow .2s, border-color .2s; }
.qr-blogcard:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -16px var(--shadow-lg); border-color: #FF914D; }
.qr-blogcard__img { display: block; aspect-ratio: 16 / 10; background: var(--bg-secondary); overflow: hidden; }
.qr-blogcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.qr-blogcard:hover .qr-blogcard__img img { transform: scale(1.04); }
.qr-blogcard__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; flex: 1; }
.qr-blogcard__date { font-size: .8125rem; color: var(--text-tertiary); }
.qr-blogcard__title { font-size: 1.1875rem; font-weight: 800; line-height: 1.3; color: var(--text-primary); }
.qr-blogcard__text { font-size: .95rem; line-height: 1.55; color: var(--text-secondary); }
.qr-blogcard__more { margin-top: auto; padding-top: 6px; font-weight: 700; font-size: .9375rem; color: #FF914D; }
.dark .qr-blogcard__more { color: #FFBD59; }
.qr-section-title { font-size: 1.75rem; font-weight: 800; color: var(--text-primary); margin: 56px 0 24px; }
.qr-empty { text-align: center; color: var(--text-secondary); padding: 40px 0; }
.qr-pager { display: flex; gap: 8px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
.qr-pager a, .qr-pager span { min-width: 42px; height: 42px; padding: 0 12px; border-radius: .875rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-color); color: var(--text-secondary); text-decoration: none; font-weight: 600; background: var(--bg-card); }
.qr-pager a:hover { border-color: #FF914D; color: #FF914D; }
.qr-pager .is-on { background: linear-gradient(135deg, var(--btn-primary-start), var(--btn-primary-end)); color: #fff; border-color: transparent; }
.qr-article__cover { margin-top: 0 !important; width: 100%; }
.qr-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; max-width: 56rem; margin: 40px auto 0; padding: 26px 28px; border-radius: 1.5rem; border: 1px solid var(--usecase-border); background: var(--usecase-bg); }
.qr-cta__title { font-size: 1.25rem; font-weight: 800; color: var(--text-primary); }
.qr-cta__text { margin-top: 4px; color: var(--text-secondary); max-width: 34rem; }
.qr-cta .btn-primary { display: inline-block; text-decoration: none; text-align: center; }

/* --- размер и положение картинки в статье (кнопки «Картинка» в админке) ------------ */
.qr-prose img.qr-img-s { width: 30%; min-width: 140px; }
.qr-prose img.qr-img-m { width: 50%; min-width: 200px; }
.qr-prose img.qr-img-l { width: 100%; }
.qr-prose img.qr-img-left { float: left; margin: 6px 24px 12px 0; }
.qr-prose img.qr-img-right { float: right; margin: 6px 0 12px 24px; }
.qr-prose img.qr-img-center { margin-left: auto; margin-right: auto; }
.qr-prose::after { content: ""; display: block; clear: both; }
@media (max-width: 640px) {
    .qr-prose img.qr-img-left, .qr-prose img.qr-img-right { float: none; display: block; margin: 1.2em auto; width: 70%; }
    .qr-prose img.qr-img-s { width: 50%; }
}