/* Newsfeed page — pixel-precise social grid */

/* Page scaffold */
body.page-newsfeed { background: #fff; }
.feed-wrap {
  width: 1170px; /* desktop container */
  margin: 0 auto;
  padding: 24px 0 60px;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  color: #1f1f1f;
}

/* Toolbar: filters + search */
.feed-toolbar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; margin: 6px 0 18px; }
.feed-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.feed-filters button { height: 32px; padding: 0 12px; font-size: 12px; border: 1px solid #d9d9d9; border-radius: 16px; background: #fff; color: #444; }
.feed-filters button.active { border-color: #bf2026; color: #bf2026; font-weight: 700; }
.feed-search { position: relative; }
.feed-search input { width: 280px; height: 32px; border: 1px solid #d9d9d9; border-radius: 16px; padding: 0 12px 0 36px; font-size: 12px; }
.feed-search::before { content: ''; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: url('../photo/search.svg') no-repeat center/contain; }

/* Grid */
.feed-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 20px; }
.feed-card { background: #fff; border: 1px solid #e6e6e6; border-radius: 12px; box-shadow: 0 1px 0 rgba(0,0,0,0.02); overflow: hidden; }
.feed-card .header { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; }
.feed-card .avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: #f0f0f0; }
.feed-card .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feed-card .author { font-size: 13px; line-height: 1.2; font-weight: 700; color: #101223; }
.feed-card .meta { font-size: 11px; color: #8a8a8a; }
.feed-card .platform { font-size: 11px; font-weight: 700; padding: 6px 10px; border-radius: 14px; border: 1px solid #e6e6e6; }

/* Platform themed badges */
.platform-facebook { color: #1877F2; border-color: #cfe0ff; background: #f4f8ff; }
.platform-instagram { color: #d6249f; border-color: #ffd0ed; background: #fff4fa; }
.platform-tiktok { color: #000; border-color: #e6e6e6; background: #f7f7f7; }
.platform-youtube { color: #FF0000; border-color: #ffd6d6; background: #fff4f4; }
.platform-linkedin { color: #0A66C2; border-color: #cfe0ff; background: #f4f8ff; }

/* Content */
.feed-card .content { padding: 0 16px 14px; }
.feed-card .text { font-size: 13px; line-height: 1.7; color: #4a4a4a; margin-bottom: 10px; }
.feed-card .thumb { width: 100%; height: 260px; object-fit: cover; display: block; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.feed-card .video { width: 100%; background: #000; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.feed-card .video.landscape { aspect-ratio: 16 / 9; }
.feed-card .video.portrait { aspect-ratio: 9 / 16; max-width: 360px; margin: 0 auto; }
.feed-card .video iframe { width: 100%; height: 100%; border: 0; display: block; }
.feed-card .actions { display: flex; justify-content: space-between; padding: 10px 16px 14px; font-size: 11px; color: #7a7a7a; }
.feed-card .actions .left { display: flex; gap: 12px; }
.feed-card .actions .view { color: #6b6b6b; }
.feed-card .actions .view::after { content: 'VIEW POST →'; }

/* Responsive */
@media (max-width: 1280px) { .feed-wrap { width: 980px; } .feed-card .thumb { height: 200px; } }
@media (max-width: 1024px) { .feed-wrap { width: 860px; } .feed-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .feed-wrap { width: 92%; } .feed-grid { grid-template-columns: 1fr; } }