@import url('theme-bright.css');

body{
  margin:0;
  font-family:var(--font-ui);
  color:var(--text);
  background-image:
    linear-gradient(180deg, rgba(255,248,231,.78), rgba(250,243,224,.94)),
    url('/img/bg-news.jpg');
  background-size:cover;
  background-attachment:fixed;
}
.wrap{max-width:1120px;margin:0 auto;padding:96px 28px 28px}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
h1{
  margin:0;
  font-family:var(--font-display);
  font-size:36px;
  color:var(--red-deep);
  font-weight:600;
  letter-spacing:.04em;
  text-shadow:0 1px 0 #fff, 0 2px 8px rgba(255,193,7,.35);
}
a{color:var(--red);text-decoration:none;font-weight:600}
a:hover{color:var(--red-hot);text-decoration:underline}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.card{
  background:var(--surface);
  border:1.5px solid var(--gold);
  border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow-soft);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.card img{width:100%;height:190px;object-fit:cover;display:block}
.card .body{padding:14px}
.title{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:600;
  margin:0 0 8px;
  line-height:1.35;
  color:var(--red-deep);
}
.meta{font-size:12px;color:var(--text-muted);margin-bottom:8px}
.sum{font-size:14px;color:var(--text-soft);line-height:1.55}
.pager{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:20px;flex-wrap:wrap}
.pager button{
  padding:8px 12px;border-radius:8px;
  border:1.5px solid var(--gold);
  background:#fffef8;
  color:var(--text);cursor:pointer;font-weight:600
}
.pager button:hover{background:#fff3d0}
.pager button:disabled{opacity:.45;cursor:not-allowed}
.pages{display:flex;gap:6px;align-items:center}
.page-btn{
  min-width:34px;padding:7px 10px;border-radius:8px;
  border:1.5px solid var(--gold);background:#fffef8;
  color:var(--text);cursor:pointer;font-weight:600
}
.page-btn.active{
  background:var(--grad-cta);
  border-color:#e68a00;color:#fff
}