body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.logo{display:flex;justify-content:center;padding:8px}
#feed{display:flex;flex-direction:column;gap:12px;padding:8px}
.news-card{display:block;text-decoration:none;color:#000}
.news-card img{width:100%;height:auto;border-radius:4px}
.title{font-size:1rem;font-weight:700;margin:4px 0}
.views{color:#666;font-size:.9rem}
@media(min-width:768px){#feed{column-count:2;column-gap:12px}}
@media(min-width:1024px){#feed{column-count:3;column-gap:16px}}
/* ---------- PREVIEW hero ---------- */
.hero-wrapper{position:relative;margin:0 auto;}
.hero{width:100%;height:auto;display:block;border-radius:4px;}
.cta{
  position:absolute;right:16px;bottom:16px;
  background:#fff;color:#0057ff;font-weight:600;
  padding:12px 28px;border-radius:4px;text-decoration:none;
  box-shadow:0 2px 4px rgba(0,0,0,.2);
}
@media(min-width:1024px){
  /* ПК-сетка: 3-колоночный masonry */
  main#feed{column-count:3;column-gap:16px}
  .news-card{break-inside:avoid-column;margin-bottom:20px}
}

/* clickable hero */
.hero-link{display:block;color:inherit;text-decoration:none;}
.hero-link .title{margin-bottom:8px;color:#000;}

/* убираем подзаголовок (его больше нет) => .more просто flex/grid */
.more{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:24px}

.logo {
  display: flex;
  justify-content: center;
  padding: 8px 0; /* сверху и снизу по 8px */
}

.logo img {
  height: 28px;
  width: auto;
  display: block;
}

/* ---------- INLINE TEASERS universal ---------- */
.teasers{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0}
.teaser.inline{
  flex:1 1 calc(50% - 12px); /* всегда два в строке */
  display:flex;gap:8px;
  text-decoration:none;color:#000;
}
.teaser.inline img{
  width:96px;height:64px;object-fit:cover;border-radius:4px;
}
.teaser.inline p{
  flex:1;font-size:16px;line-height:1.25em;font-weight:600;
}
/* если экран ≥600px — увеличиваем картинку */
@media(min-width:600px){
  .teaser.inline img{width:120px;height:80px}
}
/* десктоп шире 1024 — оставляем ту же сетку, но увеличиваем gap */
@media(min-width:1024px){
  .teasers{gap:16px}
  .teaser.inline{flex:1 1 calc(50% - 16px)}
}

.article-text {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 12px;
}

/* ---------- FULL ARTICLE STYLE FIX ---------- */

.full h1.title {
  margin: 16px 0 8px;
  font-size: 26px;
  line-height: 1.3;
}

.meta {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #777;
  font-size: 14px;
}

.meta time::before {
  content: "🕐";
}

.views::before {
  content: "👁";
}

/* ограничим hero-картинку */
.hero {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 4px;
}
