/* Раздел «Статьи». Дополняет catalog.css (nav/brand/footer/btn/hero/crumbs). */

/* ---- listing grid + card ---- */
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:6px 0 20px}
@media(max-width:980px){.art-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.art-grid{grid-template-columns:1fr}}
.art-card{display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .2s,border-color .2s}
.art-card:hover{transform:translateY(-4px);border-color:rgba(200,168,106,.45)}
.art-ph{aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,#1e2530,#141a22 70%)}
.art-ph img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.art-card:hover .art-ph img{transform:scale(1.04)}
.art-body{display:flex;flex-direction:column;gap:10px;padding:20px 20px 22px;flex:1}
.art-meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--faint);
  text-transform:uppercase;letter-spacing:.05em}
.art-cat{color:var(--gold-br);font-weight:700}
.art-card h3{font-family:var(--serif);font-size:21px;line-height:1.15}
.art-card h3 a{color:var(--ink)}
.art-card h3 a:hover{color:var(--gold-br)}
.art-excerpt{font-size:14px;color:var(--muted);line-height:1.55}
.art-more{margin-top:auto;font-size:14px;font-weight:600;color:var(--gold-br)}

/* ---- filter (categories) ---- */
.art-filter{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0 22px}
.art-filter button{font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;
  color:var(--ink);background:transparent;border:1px solid var(--line2);
  border-radius:40px;padding:9px 18px;transition:.18s}
.art-filter button:hover{border-color:var(--gold);color:var(--gold-br)}
.art-filter button.active{background:var(--gold);color:#1a1407;border-color:var(--gold)}
.art-empty{display:none;color:var(--muted);padding:30px 0;text-align:center}

/* ---- single article ---- */
.article{max-width:820px;margin:0 auto}
.article .art-hero-meta{display:flex;gap:12px;align-items:center;font-size:13px;
  color:var(--faint);text-transform:uppercase;letter-spacing:.05em;margin:6px 0 16px}
.article h1{font-family:var(--cond);font-weight:700;text-transform:uppercase;
  font-size:clamp(28px,4.6vw,44px);line-height:1.1;margin-bottom:8px}
.article-cover{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line2);
  margin:22px 0 34px;aspect-ratio:16/9}
.article-cover img{width:100%;height:100%;object-fit:cover}
.article-content{font-size:16.5px;line-height:1.75;color:#d8d3c8}
.article-content h2{font-family:var(--serif);font-size:25px;color:var(--ink);
  margin:34px 0 12px;line-height:1.2}
.article-content h3{font-family:var(--serif);font-size:19px;color:var(--ink);
  margin:24px 0 10px;line-height:1.25}
.article-content p{margin-bottom:16px}
.article-content ul ul{margin:10px 0 4px}
.article-content strong{color:#ece7dc}
.article-content ul{list-style:none;margin:6px 0 20px;display:flex;flex-direction:column;gap:10px}
.article-content li{position:relative;padding-left:23px}
.article-content li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;
  border-radius:50%;background:var(--gold-br)}
.article-content img{max-width:100%;border-radius:var(--r-lg);margin:20px 0}

/* ---- article CTA ---- */
.article-cta{margin:44px 0 10px;text-align:center;background:var(--bg2);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:36px 24px}
.article-cta h2{font-family:var(--serif);font-size:26px}
.article-cta p{color:var(--muted);margin:10px auto 22px;max-width:520px}
.article-back{display:inline-block;margin-top:20px;color:var(--gold-br);font-size:14px}

/* ---- article table ---- */
.art-table-wrap{overflow-x:auto;margin:20px 0 22px;border:1px solid var(--line);
  border-radius:var(--r-lg)}
.art-table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.art-table th,.art-table td{padding:13px 16px;text-align:left;
  border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.art-table thead th{background:var(--bg2);color:var(--gold-br);font-weight:700;
  font-size:13px;text-transform:uppercase;letter-spacing:.03em}
.art-table td:first-child{color:var(--ink);font-weight:600}
.art-table tbody tr:last-child td{border-bottom:none}
.art-table td{color:#d8d3c8}
/* на мобиле таблица превращается в карточки (data-label проставляет JS из заголовков) */
@media(max-width:600px){
  .art-table-wrap{overflow:visible;border:none;border-radius:0}
  .art-table{min-width:0;font-size:15px}
  .art-table thead{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .art-table tr{display:block;border:1px solid var(--line);border-radius:var(--r-lg);
    background:var(--card);margin-bottom:14px;padding:4px 16px}
  .art-table td{display:block;border:none;padding:10px 0}
  .art-table td:not(:last-child){border-bottom:1px solid var(--line)}
  .art-table td:first-child{font-family:var(--serif);font-size:18px;color:var(--gold-br);
    font-weight:400}
  .art-table td:not(:first-child)::before{content:attr(data-label);display:block;
    color:var(--faint);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;
    font-weight:700;margin-bottom:3px}
}

/* ---- article flow (steps) ---- */
.art-flow{display:flex;flex-direction:column;align-items:center;gap:0;margin:22px 0 24px}
.art-flow-step{width:100%;max-width:640px;background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--gold);border-radius:var(--r-lg);padding:14px 18px;
  font-size:15px;line-height:1.5;color:#d8d3c8;text-align:center}
.art-flow-step+.art-flow-step{margin-top:34px;position:relative}
.art-flow-step+.art-flow-step::before{content:"\25BC";position:absolute;top:-27px;left:50%;
  transform:translateX(-50%);color:var(--gold-br);font-size:14px}

/* ---- article FAQ ---- */
.art-faq{max-width:820px;margin:44px auto 0}
.art-faq>h2{font-family:var(--serif);font-size:26px;color:var(--ink);margin-bottom:14px}
.art-faq-item{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  padding:0 20px;margin-bottom:12px}
.art-faq-item summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:600;
  font-size:16.5px;color:var(--ink);position:relative;padding-right:30px}
.art-faq-item summary::-webkit-details-marker{display:none}
.art-faq-item summary::after{content:"+";position:absolute;right:2px;top:15px;font-size:22px;
  color:var(--gold-br);transition:transform .2s}
.art-faq-item[open] summary::after{content:"\2212"}
.art-faq-a{padding:0 0 18px;color:#d8d3c8;line-height:1.7;font-size:15.5px}

/* ---- related ---- */
.art-related{max-width:1160px;margin:54px auto 0}
.art-related h2{font-family:var(--serif);font-size:26px;margin-bottom:20px}