/* Текстовые страницы (статьи) АлтынРиелтГрупп.
   Новый файл: существующие main.min.css и custom.css не меняются. */

.articlePage { margin: 60px 0 100px; }

.crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none;
  font-size: 14px; color: #888787; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: #c6aa9d; }
.crumbs a { color: #7c5d42; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.articlePage h1.projectPage__headerTitle { margin: 0; }
.articlePage .projectPage__header { margin-bottom: 40px; gap: 16px; }

.article { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 60px; align-items: start; }

.article__body { max-width: 780px; color: #202020; font-size: 17px; line-height: 1.65; }
.article__body > * + * { margin-top: 18px; }
.article__lead { font-size: 20px; line-height: 1.55; color: #202020; padding: 22px 26px;
  background: #f5f0ec; border-left: 3px solid #95825f; border-radius: 2px; }
.article__body h2 { text-wrap: balance; font-family: Bodoni, serif; font-weight: 400; font-size: 38px; line-height: 1.1;
  letter-spacing: .3px; color: #100e0e; margin-top: 48px; }
.article__body h3 { font-family: Bodoni, serif; font-weight: 400; font-size: 26px; line-height: 1.2;
  color: #100e0e; margin-top: 32px; }
.article__body p { margin-bottom: 0; }
.article__body a { color: #7c5d42; }
.article__body ul, .article__body ol { padding-left: 22px; margin-bottom: 0; }
.article__body li + li { margin-top: 8px; }
.article__body ul li::marker { color: #95825f; }
.article__body strong { font-weight: 700; }

.article__note { font-size: 15px; color: #5d5d5d; }

.article__tableWrap { overflow-x: auto; }
.article__body table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.4; }
.article__body table.wide { min-width: 600px; }
.article__body th { text-align: left; font-weight: 700; color: #5d5d5d; font-size: 14px; letter-spacing: .3px;
  text-transform: uppercase; padding: 12px 14px; border-bottom: 2px solid #b19272; background: #f5f0ec; }
.article__body td { padding: 12px 14px; border-bottom: 1px solid #e6ddd3; vertical-align: top; }
.article__body td.num, .article__body th.num { text-align: right; font-variant-numeric: tabular-nums; }
.article__body td.num { white-space: nowrap; }

.faq { border-top: 1px solid #e6ddd3; }
.faq details { border-bottom: 1px solid #e6ddd3; padding: 16px 0; }
.faq summary { cursor: pointer; list-style: none; font-weight: 700; font-size: 18px; padding-right: 32px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: -2px; font-size: 26px; color: #95825f; font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin-top: 10px; color: #5d5d5d; }

.article__aside { position: sticky; top: 30px; }
.ctaBox { padding: 28px 26px; border: 1px solid; border-image-slice: 1;
  border-image-source: linear-gradient(to left, #957559, #f9e8cc, #b19272); background: #fff; }
.ctaBox__title { font-family: Bodoni, serif; font-size: 28px; line-height: 1.15; color: #100e0e; margin: 0 0 12px; }
.ctaBox__text { font-size: 15px; line-height: 1.5; color: #5d5d5d; margin: 0 0 18px; }
.ctaBox__phone { display: block; font-family: Bodoni, serif; font-size: 26px; color: #202020; text-decoration: none; margin-bottom: 4px; }
.ctaBox__name { font-size: 13px; color: #888787; margin: 0 0 12px; }
.ctaBox .projectPage__socialList { margin-top: 14px; }
.ctaBox__promo { margin: 18px 0 0; padding: 12px 14px; background: #f5f0ec; font-size: 14px; line-height: 1.45; color: #5d5d5d; }
.ctaBox__promo strong { color: #7c5d42; }

.relatedJk { margin-top: 56px; }
.relatedJk .projects__title { font-size: 44px; text-wrap: balance; }
.relatedJk .projects__item { display: block; text-decoration: none; margin-bottom: 30px; }
.relatedArticles { margin-top: 40px; padding: 26px 28px; background: #f5f0ec; }
.relatedArticles__title { font-family: Bodoni, serif; font-size: 26px; margin: 0 0 14px; color: #100e0e; }
.relatedArticles ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 30px; }
.relatedArticles a { color: #7c5d42; font-size: 16px; }

.article__sources { font-size: 14px; color: #888787; }
.article__sources a { color: #888787; }

@media (max-width: 1199px) {
  .article { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; }
}
@media (max-width: 991px) {
  .article { grid-template-columns: minmax(0, 1fr); }
  .article__aside { position: static; }
  .article__body h2 { font-size: 32px; }
}
@media (max-width: 575px) {
  .articlePage { margin: 36px 0 70px; }
  .article__body { font-size: 16px; }
  .article__lead { font-size: 17px; padding: 16px 18px; }
  .article__body h2 { font-size: 28px; margin-top: 36px; }
  .relatedArticles ul { grid-template-columns: minmax(0, 1fr); }
  .article__body th { font-size: 12px; padding: 10px 6px; letter-spacing: 0; }
  .article__body td { padding: 10px 6px; font-size: 15px; }
  .relatedJk .projects__title { font-size: 32px; }
  .article__body td.num { white-space: normal; }
}

/* Блок «Полезное покупателю» на главной */
.usefulLinks { padding: 90px 0 100px; }
.usefulLinks .section__title { text-align: center; }
.usefulLinks__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 50px; margin-top: 50px; }
.usefulLinks__group h3 { font-family: Bodoni, serif; font-weight: 400; font-size: 26px; color: #100e0e; margin: 0 0 14px; }
.usefulLinks__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.usefulLinks__group a { color: #7c5d42; font-size: 17px; text-decoration: none; border-bottom: 1px solid #e6ddd3; }
.usefulLinks__group a:hover { border-bottom-color: #7c5d42; }
@media (max-width: 991px) { .usefulLinks__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .usefulLinks { padding: 60px 0; } .usefulLinks__groups { grid-template-columns: minmax(0, 1fr); } }

/* Квадратные метры: в шрифте сайта нет знака ², поэтому верхний индекс */
sup.sq { font-size: .65em; line-height: 0; vertical-align: .55em; }
