/* «Стрічка подій» на головній: ротаційна плитка + список останніх новин.
   Підключається лише на головних сторінках. Керується з адмінки (вкладка «Стрічка»). */

.homenews { position: relative; background: var(--bg-deep); padding: 8px 0 84px; }
.homenews[hidden] { display: none; }

.hn-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 26px; align-items: stretch; }

/* ── ротаційна плитка ── */
.hn-feature { position: relative; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border); min-height: 440px; box-shadow: 0 18px 44px rgba(0,0,0,.45); }
.hn-slide { position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity .8s ease; }
.hn-slide.is-active { opacity: 1; }
.hn-brand { background: radial-gradient(ellipse 70% 90% at 50% 30%, rgba(95,211,255,.22), transparent 70%),
  linear-gradient(160deg, var(--bg-mid) 0%, var(--bg-deep) 100%); }
.hn-brandmark { position: absolute; top: 0; left: 0; right: 0; bottom: 130px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; opacity: .9; }
.hn-brandmark span { color: var(--text-light); text-transform: uppercase; letter-spacing: 6px;
  font-size: 1.15rem; font-weight: 700; }
.hn-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 30px 30px; }
.hn-chip { display: inline-block; background: var(--accent); color: var(--bg-deep);
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px;
  padding: 4px 12px; border-radius: 100px; vertical-align: middle; }
.hn-date { color: var(--accent); font-size: .8rem; font-weight: 600; margin-left: 12px; letter-spacing: .5px; }
.hn-cap h3 { color: #fff; font-size: 1.35rem; line-height: 1.3; margin: 12px 0 0;
  font-weight: 700; max-width: 32ch; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
a.hn-slide { text-decoration: none; }

.hn-arrow { position: absolute; top: 46%; transform: translateY(-50%); width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid var(--border); background: rgba(7,23,58,.55);
  color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; z-index: 3;
  display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px); transition: background .2s, border-color .2s; }
.hn-arrow:hover { background: rgba(95,211,255,.22); border-color: var(--accent); }
.hn-prev { left: 16px; } .hn-next { right: 16px; }
.hn-dots { position: absolute; top: 18px; right: 18px; display: flex; gap: 8px; z-index: 3; }
.hn-dot { width: 9px; height: 9px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  background: rgba(255,255,255,.4); transition: background .2s, transform .2s; }
.hn-dot.is-active { background: var(--accent); transform: scale(1.25); }

/* ── список останніх новин ── */
.hn-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; }
.hn-list > li { list-style: none; }
.hn-list > li > a { display: block; position: relative; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px 16px 20px;
  transition: transform .2s, border-color .2s, box-shadow .2s; }
.hn-list > li > a::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
  background: var(--accent); border-radius: 3px; opacity: 0; transition: opacity .2s; }
.hn-list > li > a:hover { transform: translateX(3px); border-color: var(--accent);
  box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.hn-list > li > a:hover::before { opacity: 1; }
.hn-li-date { display: block; color: var(--text-muted); font-size: .78rem; margin-bottom: 5px; }
.hn-li-title { display: block; color: var(--text-light); font-weight: 600; font-size: .98rem; line-height: 1.4; }
.hn-li-tag { display: inline-block; margin-top: 8px; color: var(--accent); font-size: .68rem;
  text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.hn-li-more { margin-top: 2px; }
.hn-li-more a { display: block; text-align: center; color: var(--accent); font-weight: 600;
  font-size: .85rem; text-transform: uppercase; letter-spacing: 1px; padding: 14px;
  border: 1px dashed var(--border); border-radius: 10px; transition: border-color .2s, color .2s; }
.hn-li-more a:hover { border-color: var(--accent); color: var(--text-light); }

@media (max-width: 900px) {
  .hn-grid { grid-template-columns: 1fr; }
  .hn-feature { min-height: 340px; }
  .hn-cap h3 { font-size: 1.15rem; }
}