/* Жарияланымдар каталогы: ашық, тыныс алатын editorial UI. */
:root{
  --article-ink:#14253b;
  --article-blue:#1471df;
  --article-mint:#14aa9c;
  --article-wash:#f3f7fc;
}

.article-topbar{
  grid-template-columns:48px minmax(0,1fr) auto;
  gap:14px;
  min-height:64px;
  padding:9px 14px;
  background:rgba(255,255,255,.94);
  border-color:#d9e3ef;
}
.article-back{
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  border:1px solid #d6e2ef;
  border-radius:14px;
  color:var(--article-ink);
  background:#fff;
  text-decoration:none;
  transition:background .18s,transform .18s;
}
.article-back:hover{background:#edf5ff;transform:translateX(-2px)}
.article-topbar-title{display:grid;justify-items:center;line-height:1.1;text-align:center}
.article-topbar-title b{color:var(--article-ink);font-size:17px;font-weight:850;letter-spacing:-.02em}
.article-topbar-title small{margin-top:4px;color:#71829a;font-size:11px}
.topbar-actions{justify-self:end}
.icon-button,.write-button{border-color:#d6e2ef;border-radius:14px;background:#fff;box-shadow:none}
.write-button{background:var(--article-mint);color:#fff}

.article-shell{max-width:none;padding:20px 14px 76px}
.article-hero{
  display:block;
  max-width:1600px;
  margin:0 auto;
  padding:54px 56px 56px;
  border-color:#d8e3ef;
  border-radius:30px;
  background:
    radial-gradient(circle at 95% 7%,rgba(76,224,211,.23),transparent 27%),
    radial-gradient(circle at 79% 78%,rgba(119,199,255,.16),transparent 24%),
    #fff;
  box-shadow:none;
}
.eyebrow{color:#35d2c5;font-size:13px;letter-spacing:.15em}
.article-hero h1{
  max-width:1260px;
  margin:12px 0 10px;
  color:var(--article-ink);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  font-size:clamp(38px,4.35vw,68px);
  font-weight:850;
  line-height:1.04;
  letter-spacing:-.045em;
}
.article-hero p{max-width:850px;color:#4b607b;font-size:17px}
.article-search{
  width:100%;
  margin-top:27px;
  gap:12px;
  padding:0 0 0 16px;
  border-color:#c9d9eb;
  border-radius:15px;
  background:#fff;
}
.article-search input{min-height:52px;color:var(--article-ink)}
.article-search button,.load-more{min-height:52px;padding:10px 34px;border-radius:14px;background:var(--article-mint)}
.load-more:disabled{cursor:not-allowed;opacity:.52;filter:saturate(.45)}

.feed-tools{max-width:1600px;margin:20px auto 28px;gap:10px}
.chip-row{display:grid;flex:1;grid-template-columns:repeat(5,minmax(110px,1fr));gap:10px;overflow:visible;padding:0}
.chip-row button{min-height:48px;border-color:#d4e0ed;border-radius:14px;background:#fff;color:#58708d;padding:9px 14px;font-weight:800}
.chip-row button.active{border-color:var(--article-mint);background:var(--article-mint);color:#fff}
.feed-tools select{min-height:48px;min-width:210px;border-color:#d4e0ed;border-radius:14px;color:#435a74}
.feed-status{max-width:1600px;margin:auto}
.article-grid{max-width:1600px;margin:0 auto;grid-template-columns:repeat(5,minmax(0,1fr));gap:15px}
.article-card{border-color:#d7e2ed;border-radius:19px;box-shadow:0 8px 20px rgba(28,56,85,.045)}
.article-card:hover{box-shadow:0 14px 30px rgba(28,56,85,.12);transform:translateY(-4px)}
.card-media{aspect-ratio:1.12;background:linear-gradient(145deg,#eef5fb,#fdfefe)}
.card-kind{top:11px;left:11px;background:rgba(20,37,59,.86)}
.card-body{padding:15px}.article-card h2{font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:19px;font-weight:850;letter-spacing:-.025em}.card-summary{-webkit-line-clamp:2;font-size:14px}.card-footer{padding-top:11px}

body.dark .article-topbar{background:rgba(6,25,35,.94);border-color:#234456}
body.dark .article-back{border-color:#31546a;background:#0b222e;color:#ecf8fc}
body.dark .article-back:hover{background:#123447}
body.dark .icon-button{border-color:#31546a;background:#102d3a;color:#b9dfff}
body.dark .write-button{border-color:#35d7b0;background:#14aa9c;color:#fff}
body.dark .article-topbar-title b,body.dark .article-hero h1{color:#edf8fa}
body.dark .article-topbar-title small,body.dark .article-hero p{color:#9bb9c8}
body.dark .article-hero{border-color:#254b60;background:radial-gradient(circle at 95% 7%,rgba(49,197,158,.18),transparent 27%),#0b222e}
body.dark .article-search,body.dark .chip-row button,body.dark .feed-tools select{border-color:#31566b;background:#102d3a;color:#edf8fa}
body.dark .chip-row button.active{border-color:var(--brand);background:var(--brand)}

@media(max-width:1180px){.article-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:850px){
  .article-shell{padding:16px 12px 60px}.article-hero{padding:36px 30px}.article-hero h1{font-size:clamp(37px,7vw,56px)}
  .feed-tools{align-items:stretch;flex-direction:column}.chip-row{grid-template-columns:repeat(3,minmax(0,1fr))}.feed-tools select{width:100%}.article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:590px){
  .article-topbar{grid-template-columns:42px 1fr auto;padding:8px 10px}.article-back{width:38px;height:38px;border-radius:12px}.article-topbar-title b{font-size:15px}.article-topbar-title small{display:none}
  .article-hero{padding:29px 20px;border-radius:22px}.article-hero h1{font-size:34px}.article-hero p{font-size:15px}.article-search{align-items:center;flex-wrap:nowrap;margin-top:21px}.article-search input{min-width:0;min-height:48px}.article-search button{min-height:46px;padding:9px 16px;font-size:14px}
  .chip-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.chip-row button{min-height:44px;font-size:14px}.article-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.article-card{border-radius:15px}.card-body{padding:11px}.article-card h2{font-size:16px}.card-summary{display:none}.card-footer{font-size:10px}.card-author img{width:23px;height:23px}.card-metrics{gap:5px}
}