/*
 * Vintage MFO — общий дизайн всех слоёв и контентных страниц.
 * Версия собрана по исходным референсам Design Canvas.
 * В HTML нет inline-стилей: типографика, сетки, карточки и адаптивность
 * управляются только этой таблицей.
 */

:root {
  --paper-bg: #c9b98f;
  --paper-1: #f7eed3;
  --paper-2: #f1e3c2;
  --paper-3: #efe0bd;
  --paper-4: #e7d5ac;
  --card: #fbf5e4;
  --soft: #f4e8c9;
  --soft-gold: #e6cf95;
  --soft-green: #eef2ea;
  --accent: #b1442c;
  --teal: #2f8f86;
  --orange: #d98032;
  --blue: #3f6b9e;
  --green: #6a8f3c;
  --purple: #a44b8f;
  --gold: #e3b23c;
  --ink: #3a2c18;
  --ink-strong: #4a3410;
  --heading: #5a3d1e;
  --muted: #6b5333;
  --muted-2: #7a5f38;
  --label: #8a6a38;
  --border: #6b4a24;
  --border-soft: #b6935e;
  --dash: #c3a271;
  --shadow: 3px 4px 0 rgba(107, 74, 36, .25);
  --shadow-sm: 2px 3px 0 rgba(107, 74, 36, .22);
  --display: 'Playfair Display', Georgia, serif;
  --text: 'PT Serif', Georgia, serif;
  --label-font: 'Alice', Georgia, serif;
  --site-width: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper-bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.6;
}
body p, body ul, body ol, body blockquote, body figure { margin: 0 0 16px; }
body ul, body ol { padding-left: 1.35em; }
body li + li { margin-top: 6px; }
body h1, body h2, body h3, body h4 {
  margin: 0;
  color: var(--heading);
  font-family: var(--display);
  line-height: 1.15;
  overflow-wrap: break-word;
}
body h2 { margin: 26px 0 10px; font-size: 26px; font-weight: 800; }
body h3 { margin: 22px 0 8px; font-size: 21px; font-weight: 700; }
body a { color: var(--accent); text-decoration: none; }
body a:hover { color: #8f3320; }
body img, body video, body svg { max-width: 100%; height: auto; }
button, input, textarea, select { max-width: 100%; font: inherit; }

.site-shell {
  width: 100%;
  max-width: var(--site-width);
  min-width: 0;
  margin: 0 auto;
  overflow: hidden;
  border-right: 3px double var(--border);
  border-left: 3px double var(--border);
  background: radial-gradient(130% 90% at 50% 0%, var(--paper-1) 0%, var(--paper-2) 55%, var(--paper-4) 100%);
  box-shadow: 0 0 80px rgba(60, 40, 15, .4);
}
.layout-page .site-shell, .layout-contacts .site-shell { background: radial-gradient(130% 70% at 50% 0%, var(--paper-1) 0%, var(--paper-2) 55%, var(--paper-4) 100%); }
.layout-article .site-shell, .layout-faq .site-shell { background: radial-gradient(130% 60% at 50% 0%, var(--paper-1) 0%, var(--paper-2) 55%, var(--paper-4) 100%); }
.layout-documents .site-shell { background: radial-gradient(130% 50% at 50% 0%, var(--paper-1) 0%, var(--paper-2) 55%, var(--paper-4) 100%); }
.layout-faq .site-shell, .layout-contacts .site-shell { min-height: 600px; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 46px;
  border-bottom: 2px solid var(--border);
  background: var(--paper-3);
}
.site-brand { display: flex; align-items: center; min-width: 0; gap: 12px; color: inherit; }
.site-brand__logo { display: block; flex: 0 0 auto; width: 46px; height: 46px; }
.site-brand__copy { min-width: 0; }
.site-brand__name {
  display: block;
  color: var(--heading);
  font-family: var(--display);
  font-size: 21px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .14em;
  white-space: nowrap;
}
.site-brand__tagline {
  display: block;
  margin-top: 4px;
  color: var(--label);
  font-family: var(--label-font);
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: .15em;
  white-space: nowrap;
}
.site-nav { display: flex; align-items: center; justify-content: center; min-width: 0; gap: 24px; font-family: var(--label-font); font-size: 15px; letter-spacing: .05em; }
.site-nav a { color: var(--heading); white-space: nowrap; }
.site-phone { flex: 0 0 auto; padding: 8px 14px; border: 1.5px solid var(--border); background: #f7efd8; color: var(--heading); font-family: var(--display); font-size: 17px; font-weight: 700; white-space: nowrap; }

.site-footer { padding: 30px 46px 36px; border-top: 2px solid var(--border); background: var(--paper-3); }
.site-footer--compact { padding: 26px 46px; text-align: center; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; margin-bottom: 24px; }
.site-footer__brand { color: var(--heading); font-family: var(--display); font-size: 20px; font-weight: 800; letter-spacing: .12em; }
.site-footer__text { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.site-footer__title { margin-bottom: 10px; color: var(--label); font-family: var(--label-font); font-size: 13px; letter-spacing: .1em; }
.site-footer__links { display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.site-footer__legal { padding: 16px 18px; border: 1px solid var(--border-soft); background: var(--soft); color: var(--muted-2); font-size: 11px; line-height: 1.6; }
.site-footer__legal-title { margin-bottom: 8px; color: var(--label); font-family: var(--label-font); font-size: 12px; letter-spacing: .08em; }
.site-footer__copyright { margin-top: 18px; color: var(--label); font-size: 12px; text-align: center; }
.site-footer--compact .site-footer__copyright { margin-top: 0; }
.site-footer__line + .site-footer__line { margin-top: 10px; }

.breadcrumbs { padding: 14px 46px 0; color: var(--label); font-family: var(--label-font); font-size: 13px; letter-spacing: .04em; }
.layout-loan .breadcrumbs { padding-bottom: 4px; }

.page-head { padding: 34px 46px 14px; text-align: center; }
.page-head--blog { padding-bottom: 18px; }
.page-head--documents { padding-bottom: 8px; }
.page-head__eyebrow { color: var(--label); font-family: var(--label-font); font-size: 13px; letter-spacing: .35em; text-transform: uppercase; }
.page-head h1 { margin: 6px 0 8px; color: var(--heading); font-family: var(--display); font-size: 50px; font-weight: 900; line-height: 1.06; text-transform: uppercase; text-shadow: 1px 1px 0 rgba(255,255,255,.4); }
.layout-blog .page-head h1 { margin-bottom: 6px; font-size: 52px; }
.layout-documents .page-head h1 { font-size: 46px; }
.page-head__lead { max-width: 760px; margin: 0 auto; color: var(--muted); font-size: 18px; font-style: italic; }

.section { padding-right: 46px; padding-left: 46px; }
.section-title { margin: 0 0 22px; color: var(--heading); font-family: var(--display); font-size: 30px; font-weight: 900; line-height: 1.12; text-align: center; text-transform: uppercase; }
.section-title--home { margin-bottom: 24px; font-size: 34px; }
.section-title--offers { margin: 6px 0 4px; font-size: 34px; }
.section-title--loan-offers { margin: 6px 0 4px; font-size: 32px; }
.section-eyebrow { color: var(--label); font-family: var(--label-font); font-size: 13px; letter-spacing: .3em; text-align: center; text-transform: uppercase; }
.section-lead { max-width: 760px; margin: 0 auto; color: var(--muted); font-size: 18px; font-style: italic; text-align: center; }
.section-head { margin-bottom: 24px; text-align: center; }

.hero-section { padding: 34px 46px 44px; }
.layout-loan .hero-section { padding: 20px 46px 34px; }
.hero-frame { position: relative; padding: 32px 38px 38px; border: 1px solid var(--border-soft); text-align: center; }
.layout-loan .hero-frame { padding: 30px 38px 34px; }
.hero-frame__corner { position: absolute; width: 34px; height: 34px; pointer-events: none; }
.hero-frame__corner--tl { top: 8px; left: 8px; border-top: 2px solid var(--label); border-left: 2px solid var(--label); }
.hero-frame__corner--tr { top: 8px; right: 8px; border-top: 2px solid var(--label); border-right: 2px solid var(--label); }
.hero-frame__corner--bl { bottom: 8px; left: 8px; border-bottom: 2px solid var(--label); border-left: 2px solid var(--label); }
.hero-frame__corner--br { right: 8px; bottom: 8px; border-right: 2px solid var(--label); border-bottom: 2px solid var(--label); }
.hero-frame__kicker { margin-bottom: 6px; color: var(--label); font-family: var(--label-font); font-size: 13px; letter-spacing: .35em; }
.hero-frame h1 { max-width: 620px; margin: 0 auto; color: var(--heading); font-family: var(--display); font-size: 58px; font-weight: 900; line-height: 1.02; text-transform: uppercase; text-shadow: 1px 1px 0 rgba(255,255,255,.4); }
.layout-loan .hero-frame h1 { max-width: 760px; font-size: 52px; line-height: 1.03; }
.hero-frame__lead { max-width: 720px; margin: 14px auto 24px; color: var(--muted); font-size: 19px; font-style: italic; line-height: 1.45; }
.layout-loan .hero-frame__lead { max-width: 760px; margin-bottom: 22px; }
.hero-note { margin: 16px 0 26px; color: var(--label); font-size: 12px; font-style: italic; text-align: center; }
.hero-ribbon { display: inline-block; margin-top: 30px; padding: 12px 46px; border: 2px solid var(--border); background: var(--soft-gold); color: var(--heading); font-family: var(--display); font-size: 19px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; box-shadow: var(--shadow); }

.grid { display: grid; min-width: 0; gap: 18px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--content-sidebar { grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; align-items: start; }
.grid--article-sidebar { grid-template-columns: minmax(0, 1fr) 320px; gap: 34px; align-items: start; }
.grid--about { grid-template-columns: 1.2fr 1fr; gap: 30px; align-items: center; }
.grid--contacts { grid-template-columns: 1fr 1.1fr; gap: 30px; align-items: start; }
.stack { display: flex; flex-direction: column; min-width: 0; gap: 16px; }
.stack--sm { gap: 10px; }
.stack--article { gap: 18px; }

.panel { min-width: 0; padding: 24px; border: 1.5px solid var(--border); background: var(--card); box-shadow: var(--shadow-sm); }
.panel--paper { background: var(--paper-3); }
.panel--soft { border-color: var(--border-soft); background: var(--soft); }
.panel--strong { border-width: 2px; box-shadow: var(--shadow); }
.panel--center { text-align: center; }
.panel__title { margin: 0 0 10px; color: var(--heading); font-family: var(--display); font-size: 24px; font-weight: 800; text-transform: uppercase; }
.panel__lead { color: var(--muted); font-style: italic; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 9px 16px; border: 1.5px solid var(--border); background: #f2e6c8; color: var(--ink-strong); font-family: var(--label-font); font-size: 14px; line-height: 1.2; text-align: center; box-shadow: 2px 2px 0 rgba(107,74,36,.2); cursor: pointer; }
.button--primary { background: var(--accent); color: #fff5e6; }
.button--block { width: 100%; }
.button--large { min-height: 46px; padding: 12px 30px; border-width: 2px; font-family: var(--display); font-size: 17px; font-weight: 800; letter-spacing: .05em; box-shadow: var(--shadow); }
.button-link { display: inline-block; padding-bottom: 2px; border-bottom: 2px solid var(--accent); color: var(--ink-strong); font-family: var(--display); font-size: 16px; font-weight: 700; }

.avatar { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 52px; height: 52px; border: 2px solid var(--border); border-radius: 50%; color: #fff; font-family: var(--display); font-size: 22px; font-weight: 900; }
.avatar--sm { width: 36px; height: 36px; border-width: 1.5px; font-size: 16px; }
.avatar--hero { width: 38px; height: 38px; border-width: 1.5px; font-size: 18px; }
.avatar--lg { width: 104px; height: 104px; border-width: 4px; box-shadow: inset 0 0 0 5px rgba(255,255,255,.35), var(--shadow); font-size: 26px; }
.avatar--benefit { width: 42px; height: 42px; font-size: 15px; }
.avatar--red { background: var(--accent); }
.avatar--teal { background: var(--teal); }
.avatar--orange { background: var(--orange); }
.avatar--blue { background: var(--blue); }
.avatar--green { background: var(--green); }
.avatar--purple { background: var(--purple); }

.badge { display: inline-flex; align-items: center; padding: 1px 7px; border: 1px solid var(--border); background: var(--gold); color: var(--ink-strong); font-family: var(--label-font); font-size: 10px; line-height: 1.25; }
.badge--registry { background: var(--soft-gold); color: #5a4326; font-size: 11px; }
.badge--inn { background: var(--soft-green); color: #3f5b40; font-size: 11px; }

.offer-card { display: flex; align-items: center; min-width: 0; gap: 16px; padding: 16px 18px; border: 1.5px solid var(--border); border-radius: 4px; background: var(--card); box-shadow: var(--shadow-sm); }
.offer-card__main { display: flex; flex: 1 1 auto; align-items: center; min-width: 0; gap: 12px; }
.offer-card__content { display: block; flex: 1 1 auto; min-width: 0; }
.offer-card__name-row { display: flex; align-items: center; min-width: 0; gap: 8px; flex-wrap: wrap; }
.offer-card__name { color: var(--ink-strong); font-family: var(--display); font-size: 18px; font-weight: 700; line-height: 1.15; }
.offer-card__details { display: block; margin-top: 4px; color: var(--muted-2); font-size: 13px; line-height: 1.4; }
.offer-card > .button { flex: 0 0 auto; }
.offer-card--featured { position: relative; display: block; padding: 16px 16px 18px; box-shadow: var(--shadow); }
.offer-card--featured .offer-card__main { margin: 8px 0 12px; }
.offer-card--featured .offer-card__name { font-size: 18px; }
.offer-card__tag { position: absolute; top: -11px; left: 50%; padding: 2px 12px; transform: translateX(-50%); border: 1.5px solid var(--border); background: var(--gold); color: var(--ink-strong); font-family: var(--label-font); font-size: 11px; line-height: 1.25; white-space: nowrap; }
.offer-card__facts { border-top: 1px dashed var(--dash); }
.offer-card__fact { display: flex; justify-content: space-between; gap: 10px; padding-top: 6px; color: var(--muted-2); font-size: 13px; line-height: 1.35; }
.offer-card__fact strong { color: var(--ink-strong); font-weight: 700; text-align: right; }
.offer-card--featured .button { margin-top: 14px; }

.icon-label { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.icon-label__caption { padding: 6px 12px; border: 1.5px solid var(--border); background: #f2e6c8; color: var(--ink-strong); font-family: var(--label-font); font-size: 13px; text-align: center; box-shadow: 2px 2px 0 rgba(107,74,36,.25); }

.loan-benefits { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.loan-benefit { display: flex; align-items: center; min-width: 0; gap: 10px; padding: 8px 14px; border: 1.5px solid var(--border); background: #f2e6c8; box-shadow: 2px 2px 0 rgba(107,74,36,.22); }
.loan-benefit__text { color: var(--ink-strong); font-family: var(--label-font); font-size: 14px; }

.home-steps { padding: 10px 46px 40px; }
.step-card { padding: 22px 18px; border: 1.5px solid var(--border); background: var(--card); text-align: center; box-shadow: var(--shadow); }
.step-card__number { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto 12px; border: 2px solid var(--border); border-radius: 50%; background: var(--paper-3); color: var(--accent); font-family: var(--display); font-size: 26px; font-weight: 900; }
.step-card__title { margin-bottom: 6px; color: var(--ink-strong); font-family: var(--display); font-size: 18px; font-weight: 700; }
.step-card__text { color: var(--muted); font-size: 14px; line-height: 1.4; }

.home-offers { padding: 10px 46px 44px; }
.offers-panel { padding: 30px 34px 34px; border: 2px solid var(--border); background: var(--paper-3); box-shadow: inset 0 0 60px rgba(150,110,60,.15); }
.offers-panel__lead { margin-bottom: 24px; color: var(--muted); font-style: italic; text-align: center; }
.offers-panel__more { margin: 22px 0 0; text-align: center; }

.home-useful { padding: 10px 46px 44px; }
.home-faq { padding: 10px 46px 44px; }

.about-intro { padding: 16px 46px 30px; }
.about-copy { padding: 26px 30px; border: 1px solid var(--border-soft); background: var(--soft); }
.about-copy p { color: #3f3120; font-size: 17px; line-height: 1.7; }
.about-copy p:last-child { margin-bottom: 0; }
.about-illustration { display: flex; align-items: center; justify-content: center; height: 280px; border: 2px solid var(--border); background: repeating-linear-gradient(45deg,#eaddba 0 18px,#e3d3ab 18px 36px); color: var(--muted-2); font-family: 'Courier New', monospace; font-size: 12px; text-align: center; box-shadow: var(--shadow); }
.about-stats { padding: 6px 46px 34px; }
.stat-card { padding: 20px; border: 2px solid var(--border); background: var(--paper-3); text-align: center; box-shadow: var(--shadow); }
.stat-card__value { color: var(--accent); font-family: var(--display); font-size: 38px; font-weight: 900; }
.stat-card__label { margin-top: 4px; color: #5a4326; font-family: var(--label-font); font-size: 13px; letter-spacing: .05em; }
.stat-card--teal .stat-card__value { color: var(--teal); }
.stat-card--orange .stat-card__value { color: var(--orange); }
.stat-card--blue .stat-card__value { color: var(--blue); }
.about-principles { padding: 6px 46px 40px; }
.principle-card { padding: 22px; border: 1.5px solid var(--border); background: var(--card); text-align: center; box-shadow: var(--shadow); }
.principle-card__icon { display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; margin: 0 auto 12px; border: 3px solid var(--border); border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--display); font-size: 22px; font-weight: 900; box-shadow: inset 0 0 0 4px rgba(255,255,255,.3); }
.principle-card--teal .principle-card__icon { background: var(--teal); }
.principle-card--orange .principle-card__icon { background: var(--orange); }
.principle-card__title { margin-bottom: 6px; color: var(--ink-strong); font-family: var(--display); font-size: 19px; font-weight: 700; }
.principle-card__text { color: var(--muted); font-size: 15px; line-height: 1.5; }
.about-cta { padding: 0 46px 44px; text-align: center; }
.about-cta__box { padding: 26px; border: 2px solid var(--border); background: var(--soft-gold); box-shadow: var(--shadow); }
.about-cta__title { color: var(--heading); font-family: var(--display); font-size: 24px; font-weight: 800; text-transform: uppercase; }
.about-cta__lead { margin: 8px 0 16px; color: var(--muted); font-style: italic; }

.loan-calculator { padding: 6px 46px 40px; }
.loan-calculator__grid { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 24px; align-items: start; }
.calculator { padding: 26px 30px 30px; border: 2px solid var(--border); background: var(--paper-3); box-shadow: inset 0 0 60px rgba(150,110,60,.15); }
.calculator__title { margin: 0 0 18px; color: var(--heading); font-family: var(--display); font-size: 26px; font-weight: 900; text-align: center; text-transform: uppercase; }
.calculator__box { padding: 22px 24px; border: 1.5px solid var(--border); background: var(--card); box-shadow: var(--shadow-sm); }
.calculator__row, .calculator__total { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.calculator__label { color: var(--muted-2); font-family: var(--label-font); font-size: 15px; }
.calculator__value { color: var(--accent); font-family: var(--display); font-size: 28px; font-weight: 900; }
.calculator__value--teal { color: var(--teal); }
.calculator__range { width: 100%; height: 26px; accent-color: var(--accent); }
.calculator__range--teal { accent-color: var(--teal); }
.calculator__spacer { margin-top: 20px; }
.calculator__total { align-items: center; margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--dash); }
.calculator__total-value { color: var(--heading); font-family: var(--display); font-size: 34px; font-weight: 900; }
.loan-offers { padding: 6px 46px 44px; }
.loan-conditions { padding: 6px 46px 40px; }
.condition-card { padding: 20px; border: 1.5px solid var(--border); background: var(--card); box-shadow: var(--shadow); }
.condition-card__title { margin-bottom: 8px; color: var(--accent); font-family: var(--display); font-size: 19px; font-weight: 800; }
.condition-card__text { color: var(--muted); font-size: 15px; line-height: 1.5; }
.loan-content { margin-top: 30px; padding: 26px 30px; border: 1px solid var(--border-soft); background: var(--soft); }
.loan-content h2 { margin: 0 0 12px; font-size: 24px; }

.category-tabs { display: flex; justify-content: center; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.category-tabs__item { padding: 6px 16px; border: 1.5px solid var(--border); background: #f2e6c8; color: var(--ink-strong); font-family: var(--label-font); font-size: 13px; letter-spacing: .05em; box-shadow: 2px 2px 0 rgba(107,74,36,.2); }
.category-tabs__item--active { background: var(--accent); color: #fff5e6; }
.blog-body { padding: 14px 46px 44px; }
.article-meta { margin-bottom: 8px; color: var(--accent); font-family: var(--label-font); font-size: 12px; letter-spacing: .12em; }
.article-title { margin: 8px 0 16px; color: var(--heading); font-family: var(--display); font-size: 46px; font-weight: 900; line-height: 1.06; text-transform: uppercase; text-shadow: 1px 1px 0 rgba(255,255,255,.4); }
.article-body { padding: 18px 46px 44px; }
.article-bottom { padding: 0 46px 40px; }


/* =========================================================
   Слой 5: статья

   Sidebar обтекается контентом. Пока sidebar находится справа,
   заголовок, обложка и начало статьи занимают левую колонку.
   После окончания sidebar дальнейший текст и таблицы автоматически
   расширяются на полную ширину article-body.
   ========================================================= */
.layout-article .article-flow {
  display: block;
}
.layout-article .article-flow::after {
  display: table;
  clear: both;
  content: '';
}
.layout-article .article-sidebar {
  position: static;
  float: right;
  width: 320px;
  margin: 0 0 30px 34px;
}
.layout-article .article-main {
  min-width: 0;
}
.layout-article .article-content {
  min-width: 0;
}

/* Рамка для любых обычных изображений, вставленных в HTML статьи. */
.layout-article .article-content img:not(.article-cover__image):not(.content-image--plain) {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 22px auto 24px;
  padding: 5px;
  border: 2px solid var(--border);
  background: var(--paper-3);
  box-shadow: var(--shadow-sm);
}
.layout-article .article-content p > img:only-child {
  margin-top: 6px;
  margin-bottom: 8px;
}

/* Таблицы статьи получают полную винтажную сетку строк и столбцов. */
.layout-article .article-content table {
  clear: both;
}

.sidebar { position: sticky; top: 16px; }
.sidebar__box { padding: 18px; border: 2px solid var(--border); background: var(--paper-3); box-shadow: var(--shadow); }
.sidebar__box--popular { background: var(--soft-gold); }
.sidebar__title { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--dash); color: var(--heading); font-family: var(--display); font-size: 17px; font-weight: 800; text-align: center; text-transform: uppercase; }
.sidebar__links { display: flex; flex-direction: column; gap: 10px; }
.sidebar__links a { padding-bottom: 8px; border-bottom: 1px dashed #b6935e; color: var(--ink-strong); font-size: 15px; }
.sidebar__box .button { margin-top: 14px; }
.mini-offer { display: flex; align-items: center; min-width: 0; gap: 10px; padding: 10px; border: 1.5px solid var(--border); background: var(--card); }
.mini-offer__content { display: block; flex: 1 1 auto; min-width: 0; }
.mini-offer__name { color: var(--ink-strong); font-family: var(--display); font-size: 14px; font-weight: 700; line-height: 1.2; }
.mini-offer__details { display: block; color: var(--muted-2); font-size: 11px; line-height: 1.35; }

.article-card { display: block; overflow: hidden; border: 1.5px solid var(--border); background: var(--card); color: inherit; box-shadow: var(--shadow-sm); }
.article-card--featured { margin-bottom: 18px; }
.article-card--horizontal { display: grid; grid-template-columns: 150px minmax(0,1fr); min-height: 136px; }
.article-card__media { display: flex; align-items: center; justify-content: center; min-height: 126px; border-bottom: 1.5px solid var(--border); background: repeating-linear-gradient(45deg,#eaddba 0 12px,#e3d3ab 12px 24px); color: var(--muted-2); font-family: 'Courier New', monospace; font-size: 10px; text-align: center; }
.article-card--featured .article-card__media { min-height: 218px; }
.article-card--horizontal .article-card__media { min-height: 100%; border-right: 1.5px solid var(--border); border-bottom: 0; }
.article-card__body { padding: 14px 16px; }
.article-card--featured .article-card__body { padding: 18px 20px 20px; }
.article-card__category { color: var(--accent); font-family: var(--label-font); font-size: 11px; letter-spacing: .1em; }
.article-card__title { margin: 4px 0 6px; color: var(--ink-strong); font-family: var(--display); font-size: 18px; font-weight: 700; line-height: 1.18; }
.article-card--featured .article-card__title { font-size: 24px; line-height: 1.15; }
.article-card__excerpt { color: var(--muted); font-size: 14px; line-height: 1.4; }
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.pagination__item { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; border: 1.5px solid var(--border); background: #f2e6c8; color: var(--ink-strong); font-family: var(--display); font-size: 15px; }
.pagination__item--active { background: var(--accent); color: #fff5e6; }

.content { min-width: 0; color: #3f3120; font-size: 17px; line-height: 1.7; }
.content > :first-child { margin-top: 0; }
.content > :last-child { margin-bottom: 0; }
.content p { color: #3f3120; }
.content h2 { margin: 26px 0 10px; font-size: 26px; text-transform: none; }
.content h3 { margin: 22px 0 8px; }
.content ul, .content ol { color: #4a3c28; }
.content table {
  width: 100%;
  max-width: 100%;
  margin: 24px 0;
  border: 2px solid var(--border);
  border-collapse: collapse;
  background: rgba(251, 245, 228, .58);
  font-size: 16px;
  line-height: 1.45;
}
.content th,
.content td {
  padding: 10px 12px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.content th {
  background: var(--paper-3);
  color: var(--heading);
  font-family: var(--display);
  font-weight: 700;
}
.content tbody tr:nth-child(even) td {
  background: rgba(239, 224, 189, .32);
}
.content pre { max-width: 100%; overflow-x: auto; }
.content-note { margin: 0 0 20px; padding: 14px 20px; border-left: 4px solid var(--teal); background: var(--soft-green); color: #3f3120; font-size: 16px; font-style: italic; line-height: 1.65; }
.content-note--important { border-left-color: var(--accent); background: #f5e6d8; }
.content-note--warning { border-left-color: var(--orange); background: #f6ead6; }
.content-note--info { border-left-color: var(--blue); background: #e8edf3; }
.content-note strong { font-style: normal; }
.article-cover { margin: 0 0 22px; border: 2px solid var(--border); background: repeating-linear-gradient(45deg,#eaddba 0 18px,#e3d3ab 18px 36px); box-shadow: var(--shadow); }
.article-cover__image { display: block; width: 100%; min-height: 300px; object-fit: cover; }
.article-cover__caption { padding: 8px 12px; border-top: 1px dashed var(--dash); color: var(--muted-2); font-family: var(--label-font); font-size: 12px; letter-spacing: .04em; text-align: center; }
.article-scheme, .media-placeholder { display: flex; align-items: center; justify-content: center; min-height: 180px; border: 2px solid var(--border); background: repeating-linear-gradient(45deg,#eaddba 0 16px,#e3d3ab 16px 32px); color: var(--muted-2); font-family: 'Courier New', monospace; font-size: 11px; text-align: center; box-shadow: var(--shadow); }
.media-placeholder--map { min-height: 200px; }
.check-list { margin: 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 28px; }
.check-list li::before { position: absolute; top: 0; left: 0; color: var(--teal); content: '✓'; font-weight: 800; }
.embedded-offers { padding: 26px 30px 30px; border: 2px solid var(--border); background: var(--paper-3); box-shadow: inset 0 0 60px rgba(150,110,60,.15); }
.embedded-offers .mini-offer { padding: 14px; }
.embedded-offers .mini-offer__name { font-size: 15px; }
.embedded-offers .mini-offer__details { font-size: 12px; }

.faq-body { max-width: 900px; margin: 0 auto; padding: 22px 46px 44px; }
.tq { display: flex; flex-direction: column; width: 100%; max-width: 820px; margin: 0 auto; gap: 12px; }
.tq-item { border: 1.5px solid var(--border); background: var(--card); box-shadow: var(--shadow-sm); }
.tq-question { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; color: var(--ink-strong); font-family: var(--display); font-size: 17px; font-weight: 700; line-height: 1.35; cursor: pointer; list-style: none; }
.tq-question::-webkit-details-marker { display: none; }
.tq-question::after { flex: 0 0 auto; color: var(--accent); content: '+'; font-family: Georgia, serif; font-size: 22px; font-weight: 400; }
.tq-item[open] > .tq-question::after { content: '−'; }
.tq-answer { padding: 12px 18px 16px; border-top: 1px dashed var(--dash); color: var(--muted); font-size: 15px; line-height: 1.5; }
.faq-cta { margin-top: 28px; padding: 24px; border: 2px solid var(--border); background: var(--soft-gold); text-align: center; box-shadow: var(--shadow); }
.faq-cta__title { color: var(--heading); font-family: var(--display); font-size: 22px; font-weight: 800; text-transform: uppercase; }
.faq-cta__lead { margin: 8px 0 16px; color: var(--muted); font-style: italic; }

.documents-body { padding: 18px 46px 30px; }
.document-links { margin-bottom: 28px; }
.document-link { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px solid var(--border); background: var(--card); color: inherit; box-shadow: var(--shadow-sm); }
.document-link__icon { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 38px; height: 44px; border: 1.5px solid var(--border); background: var(--paper-3); color: var(--accent); font-family: var(--display); font-size: 16px; font-weight: 900; }
.document-link__text { color: var(--ink-strong); font-size: 14px; line-height: 1.3; }
.registry-title { margin: 0 0 16px; color: var(--heading); font-family: var(--display); font-size: 28px; font-weight: 900; text-align: center; text-transform: uppercase; }
.registry-card { padding: 16px 18px; border: 1.5px solid var(--border); background: var(--card); box-shadow: var(--shadow-sm); }
.registry-card__name { color: var(--ink-strong); font-family: var(--display); font-size: 17px; font-weight: 700; }
.registry-card__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.registry-card__address { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.registry-card__contacts { margin-top: 4px; color: var(--label); font-size: 12px; }
.documents-note { margin-top: 24px; padding: 20px 22px; border: 1px solid var(--border-soft); background: var(--soft); color: var(--muted); font-size: 14px; line-height: 1.6; }

.contacts-body { padding: 18px 46px 44px; }
.contact-card { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1.5px solid var(--border); background: var(--card); box-shadow: var(--shadow-sm); }
.contact-card__label { color: var(--label); font-family: var(--label-font); font-size: 12px; letter-spacing: .08em; }
.contact-card__value { color: var(--ink-strong); font-family: var(--display); font-size: 19px; font-weight: 700; }
.form-card { padding: 26px 30px 30px; border: 2px solid var(--border); background: var(--paper-3); box-shadow: var(--shadow); }
.form-card__title { margin: 0 0 4px; color: var(--heading); font-family: var(--display); font-size: 24px; font-weight: 800; text-transform: uppercase; }
.form-card__lead { margin-bottom: 18px; color: var(--muted); font-style: italic; }
.form-field { display: block; }
.form-field + .form-field { margin-top: 14px; }
.form-field__label { display: block; margin-bottom: 5px; color: var(--muted-2); font-family: var(--label-font); font-size: 13px; }
.form-field__control { width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); background: var(--card); color: var(--ink); font-family: var(--text); font-size: 15px; }
textarea.form-field__control { resize: vertical; }
.form-card .button { margin-top: 14px; }
.form-card__legal { margin-top: 10px; color: var(--label); font-size: 11px; text-align: center; }

@media (max-width: 1080px) {
  .site-header { flex-wrap: wrap; padding-right: 28px; padding-left: 28px; }
  .site-nav { order: 3; width: 100%; padding-top: 12px; border-top: 1px solid rgba(107,74,36,.24); flex-wrap: wrap; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .offer-card__name { font-size: 17px; }
}

@media (max-width: 900px) {

  .layout-article .article-flow {
    display: flex;
    flex-direction: column;
  }
  .layout-article .article-content {
    order: 1;
  }
  .layout-article .article-sidebar {
    order: 2;
    float: none;
    width: 100%;
    margin: 28px 0 0;
  }

  .grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid--content-sidebar, .grid--article-sidebar, .grid--about, .grid--contacts, .loan-calculator__grid { grid-template-columns: minmax(0,1fr); }
  .sidebar { position: static; }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .about-illustration { height: 240px; }
}

@media (max-width: 680px) {

  .layout-article .article-content table {
    display: block;
    overflow-x: auto;
    border-collapse: collapse;
    -webkit-overflow-scrolling: touch;
  }
  .layout-article .article-content th,
  .layout-article .article-content td {
    min-width: 150px;
  }

  body { font-size: 16px; }
  .site-shell { border-right: 0; border-left: 0; box-shadow: none; }
  .site-header { flex-direction: column; align-items: stretch; gap: 12px; padding: 12px 16px; }
  .site-brand { justify-content: center; }
  .site-nav { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); order: 2; gap: 0; padding-top: 10px; font-size: 14px; }
  .site-nav a { padding: 8px 5px; border-bottom: 1px solid rgba(107,74,36,.16); text-align: center; }
  .site-phone { order: 3; width: 100%; text-align: center; }
  .page-head, .hero-section, .home-steps, .home-offers, .home-useful, .home-faq, .about-intro, .about-stats, .about-principles, .about-cta, .loan-calculator, .loan-offers, .loan-conditions, .blog-body, .article-body, .article-bottom, .faq-body, .documents-body, .contacts-body { padding-right: 18px; padding-left: 18px; }
  .page-head h1, .layout-blog .page-head h1, .layout-documents .page-head h1 { font-size: clamp(31px, 10vw, 42px); }
  .hero-frame { padding: 28px 18px 30px; }
  .hero-frame h1, .layout-loan .hero-frame h1 { max-width: 100%; font-size: clamp(31px, 10vw, 42px); }
  .hero-frame__lead { font-size: 17px; }
  .grid--2, .grid--3, .grid--4, .site-footer__grid { grid-template-columns: minmax(0,1fr); }
  .offer-card { flex-direction: column; align-items: stretch; }
  .offer-card > .button { width: 100%; }
  .offer-card--featured { display: block; }
  .offer-card--featured .offer-card__main { align-items: center; }
  .loan-benefits { display: grid; grid-template-columns: minmax(0,1fr); }
  .loan-benefit { width: 100%; }
  .article-card--horizontal { grid-template-columns: minmax(0,1fr); }
  .article-card--horizontal .article-card__media { min-height: 180px; border-right: 0; border-bottom: 1.5px solid var(--border); }
  .calculator, .form-card, .offers-panel, .embedded-offers { padding: 22px 18px; }
  .calculator__box { padding: 18px; }
  .calculator__total { flex-direction: column; align-items: stretch; }
  .about-copy { padding: 22px 20px; }
  .about-illustration { height: 210px; }
  .site-footer { padding-right: 18px; padding-left: 18px; }
  .content { font-size: 16px; line-height: 1.65; }
  .avatar--lg { width: 88px; height: 88px; font-size: 23px; }
  .hero-ribbon { width: 100%; padding-right: 14px; padding-left: 14px; font-size: 17px; }
}

@media (max-width: 420px) {
  .site-brand__logo { width: 40px; height: 40px; }
  .site-brand__name { font-size: 18px; letter-spacing: .08em; }
  .site-brand__tagline { font-size: 9px; letter-spacing: .08em; }
  .page-head, .hero-section, .home-steps, .home-offers, .home-useful, .home-faq, .about-intro, .about-stats, .about-principles, .about-cta, .loan-calculator, .loan-offers, .loan-conditions, .blog-body, .article-body, .article-bottom, .faq-body, .documents-body, .contacts-body, .breadcrumbs { padding-right: 14px; padding-left: 14px; }
  .hero-frame__kicker, .page-head__eyebrow, .section-eyebrow { letter-spacing: .16em; }
  .offer-card__main, .contact-card { align-items: flex-start; }
  .tq-question { padding: 14px; }
  .tq-answer { padding: 12px 14px 15px; }
}

/* =========================================================
   Слой 5 v5: первая обложка статьи рядом с sidebar.

   Широкое первое изображение раньше не помещалось рядом с
   плавающим sidebar и переносилось целиком под него, оставляя
   большое пустое поле после H1.

   На desktop первая обложка получает ширину свободной левой
   колонки. После окончания sidebar обычный текст и таблицы
   продолжают занимать всю ширину article-body.
   ========================================================= */
@media (min-width: 901px) {
  .layout-article .article-content > img:first-child,
  .layout-article .article-content > picture:first-child,
  .layout-article .article-content > figure:first-child,
  .layout-article .article-content > .article-cover:first-child,
  .layout-article .article-content > p:first-child > img:only-child {
    width: calc(100% - 354px) !important;
    max-width: calc(100% - 354px) !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box;
  }

  .layout-article .article-content > picture:first-child,
  .layout-article .article-content > figure:first-child,
  .layout-article .article-content > .article-cover:first-child {
    display: block;
  }

  .layout-article .article-content > picture:first-child img,
  .layout-article .article-content > figure:first-child img,
  .layout-article .article-content > .article-cover:first-child img {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
}

/* =========================================================
   Слой 4 v7: ArticleCards + «Топ займов» в общей CSS Grid.

   Верхний ряд:
   - самая новая статья занимает две колонки;
   - «Топ займов» занимает третью колонку.

   Со второго ряда ArticleCards занимают всю ширину и выводятся
   по три карточки. Блок «Популярное» из layout удалён.
   ========================================================= */
.blog-body {
  padding-top: 14px;
}

.blog-listing__eyebrow {
  margin: 0 0 12px;
  color: var(--accent);
  font-family: var(--label-font);
  font-size: 11px;
  letter-spacing: .12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.blog-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

/*
 * Служебные оболочки ArticleCards не создают дополнительные
 * grid-контейнеры: карточки и пагинация становятся элементами
 * общей сетки .blog-layout.
 */
.blog-listing-content,
.blog-article-cards,
.blog-article-cards .cms-article-cards__grid {
  display: contents;
}

.blog-sidebar {
  grid-column: 3;
  grid-row: 1;
  position: sticky;
  top: 16px;
  align-self: start;
  min-width: 0;
}

.blog-article-cards .cms-article-card {
  display: block;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

/* Самая свежая статья — крупная карточка слева от sidebar. */
.blog-article-cards .cms-article-card:first-child {
  grid-column: 1 / span 2;
  grid-row: 1;
}

.blog-article-cards .cms-article-card__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 158px;
  overflow: hidden;
  border-bottom: 1.5px solid var(--border);
  background: repeating-linear-gradient(45deg, #eaddba 0 12px, #e3d3ab 12px 24px);
  color: var(--muted-2);
  font-family: 'Courier New', monospace;
  font-size: 10px;
  text-align: center;
}

.blog-article-cards .cms-article-card:first-child .cms-article-card__thumb {
  height: 218px;
}

.blog-article-cards .cms-article-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-article-cards .cms-article-card__thumb--placeholder > span {
  max-width: 150px;
  padding: 10px;
}

.blog-article-cards .cms-article-card__body {
  display: block;
  padding: 14px 16px 16px;
}

.blog-article-cards .cms-article-card:first-child .cms-article-card__body {
  padding: 18px 20px 20px;
}

.blog-article-cards .cms-article-card__date {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font-family: var(--label-font);
  font-size: 11px;
  letter-spacing: .1em;
  line-height: 1.3;
  text-transform: uppercase;
}

.blog-article-cards .cms-article-card__date::before {
  content: 'СТАТЬЯ · ';
}

.blog-article-cards .cms-article-card__title {
  display: block;
  margin: 4px 0 6px;
  color: var(--ink-strong);
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.18;
}

.blog-article-cards .cms-article-card:first-child .cms-article-card__title {
  font-size: 24px;
  line-height: 1.15;
}

.blog-article-cards .cms-article-card__desc {
  display: block;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.blog-article-cards .cms-article-cards__empty,
.blog-article-cards .cms-article-cards__error {
  grid-column: 1 / -1;
  padding: 18px 20px;
  border: 1.5px dashed var(--border-soft);
  background: var(--soft);
  color: var(--muted);
  text-align: center;
}

.blog-article-cards .cms-article-pagination {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

.blog-article-cards .cms-article-pagination__link,
.blog-article-cards .cms-article-pagination__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1.5px solid var(--border);
  background: #f2e6c8;
  color: var(--ink-strong);
  font-family: var(--display);
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
}

.blog-article-cards .cms-article-pagination__dots {
  border-color: transparent;
  background: transparent;
}

.blog-article-cards .cms-article-pagination__link.is-active,
.blog-article-cards .cms-article-pagination__link[aria-current='page'] {
  background: var(--accent);
  color: #fff5e6;
}

.blog-article-cards .cms-article-pagination__link:hover {
  background: var(--paper-3);
  color: var(--accent-dark);
}

/* Планшет: главная статья, затем «Топ займов», затем сетка 2 колонки. */
@media (max-width: 980px) {
  .blog-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-article-cards .cms-article-card:first-child {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .blog-sidebar {
    grid-column: 1 / -1;
    grid-row: 2;
    position: static;
  }

  .blog-sidebar .sidebar__box {
    max-width: none;
  }
}

/* Телефон: все блоки в одну колонку. */
@media (max-width: 680px) {
  .blog-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .blog-article-cards .cms-article-card:first-child,
  .blog-sidebar,
  .blog-article-cards .cms-article-pagination,
  .blog-article-cards .cms-article-cards__empty,
  .blog-article-cards .cms-article-cards__error {
    grid-column: 1;
  }

  .blog-article-cards .cms-article-card__thumb,
  .blog-article-cards .cms-article-card:first-child .cms-article-card__thumb {
    height: 190px;
  }

  .blog-article-cards .cms-article-card:first-child .cms-article-card__title {
    font-size: 21px;
  }
}

/* =========================================================
   Главная v8: три последние статьи через ArticleCards.
   Стандартная разметка системного блока оформляется как
   исходные горизонтальные карточки раздела «Полезно знать».
   ========================================================= */
.home-article-feed {
  min-width: 0;
}

.home-article-cards {
  width: 100%;
  max-width: none !important;
  margin: 0;
}

.home-article-cards .cms-article-cards__grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.home-article-cards .cms-article-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  min-width: 0;
  min-height: 136px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

.home-article-cards .cms-article-card__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 136px;
  overflow: hidden;
  border-right: 1.5px solid var(--border);
  background: repeating-linear-gradient(45deg, #eaddba 0 12px, #e3d3ab 12px 24px);
  color: var(--muted-2);
  font-family: 'Courier New', monospace;
  font-size: 10px;
  line-height: 1.35;
  text-align: center;
}

.home-article-cards .cms-article-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 136px;
  object-fit: cover;
}

.home-article-cards .cms-article-card__thumb--placeholder > span {
  max-width: 90px;
  padding: 10px;
}

.home-article-cards .cms-article-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 14px 16px;
}

.home-article-cards .cms-article-card__date {
  display: block;
  margin: 0 0 4px;
  color: var(--accent);
  font-family: var(--label-font);
  font-size: 11px;
  letter-spacing: .1em;
  line-height: 1.3;
  text-transform: uppercase;
}

.home-article-cards .cms-article-card__date::before {
  content: 'СТАТЬЯ · ';
}

.home-article-cards .cms-article-card__title {
  display: block;
  margin: 4px 0 6px;
  color: var(--ink-strong);
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.home-article-cards .cms-article-card__desc {
  display: block;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.home-article-cards .cms-article-cards__empty {
  padding: 24px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--muted);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.home-article-feed__more {
  margin: 20px 0 0;
}

@media (max-width: 680px) {
  .home-article-cards .cms-article-card {
    grid-template-columns: 118px minmax(0, 1fr);
    min-height: 126px;
  }

  .home-article-cards .cms-article-card__thumb,
  .home-article-cards .cms-article-card__thumb img {
    min-height: 126px;
  }

  .home-article-cards .cms-article-card__body {
    padding: 12px 14px;
  }

  .home-article-cards .cms-article-card__title {
    font-size: 17px;
  }
}

@media (max-width: 480px) {
  .home-article-cards .cms-article-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-article-cards .cms-article-card__thumb {
    height: 180px;
    min-height: 180px;
    border-right: 0;
    border-bottom: 1.5px solid var(--border);
  }

  .home-article-cards .cms-article-card__thumb img {
    height: 180px;
    min-height: 180px;
  }
}

/* =========================================================
   Главная v9: случайные текстовые ссылки в «Популярное».
   ArticleCards формирует только ссылки на названия материалов:
   без изображений, описаний, дат, кнопок и пагинации.
   ========================================================= */
.sidebar-popular-article-links {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.sidebar-popular-article-links .cms-article-cards__grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sidebar-popular-article-links .cms-article-card {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px dashed #b6935e;
  background: transparent;
  color: var(--ink-strong);
  box-shadow: none;
  font-size: 15px;
  line-height: 1.35;
}

.sidebar-popular-article-links .cms-article-card:first-child {
  padding-top: 0;
}

.sidebar-popular-article-links .cms-article-card:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.sidebar-popular-article-links .cms-article-card:hover {
  color: var(--accent);
  background: transparent;
  transform: none;
  box-shadow: none;
}

.sidebar-popular-article-links .cms-article-card__body,
.sidebar-popular-article-links .cms-article-card__title {
  display: block;
  margin: 0;
  padding: 0;
  color: inherit;
  font-family: var(--body);
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
}

.sidebar-popular-article-links .cms-article-cards__empty,
.sidebar-popular-article-links .cms-article-cards__error {
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  text-align: left;
  box-shadow: none;
}

.sidebar-popular-article-links .cms-article-pagination,
.sidebar-popular-article-links .cms-article-card__thumb,
.sidebar-popular-article-links .cms-article-card__date,
.sidebar-popular-article-links .cms-article-card__desc,
.sidebar-popular-article-links .cms-article-card__button {
  display: none !important;
}