/* LinkedIn feed (includes/linkedin/feed.php) */
.li-feed {
  --li-blue: #135baa;
  --li-link: #2f74c0;
  --li-ink: #252e39;
  --li-muted: #6b7380;
  --li-line: #e6e9ee;
  --li-bg: #fff;
  color: var(--li-ink);
  font-family: "Fira Sans Condensed", sans-serif;
}

.li-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}
.li-title { font-size: 1.6rem; margin: 0 0 2px; font-weight: 600; }
.li-title a { color: var(--li-blue); }
.li-followers { font-size: .9rem; margin: 0 0 8px; font-weight: 500; }
.li-tagline { margin: 0; max-width: 640px; color: var(--li-ink); }
.li-follow {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--li-ink); color: #fff !important;
  padding: 8px 16px; border-radius: 6px; font-weight: 500;
  text-decoration: none !important; transition: background .2s;
}
.li-follow:hover { background: var(--li-blue); }

/* Masonry: JS sets grid-row-end spans; without JS it degrades to a plain grid. */
.li-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 4px;
  column-gap: 24px;
  align-items: start;
}
.li-grid:not(.li-masonry) { grid-auto-rows: auto; row-gap: 24px; }
.li-feed--compact .li-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767px) {
  .li-grid, .li-feed--compact .li-grid { grid-template-columns: minmax(0, 1fr); }
  .li-header { flex-direction: column; }
}

.li-card {
  background: var(--li-bg);
  border: 1px solid var(--li-line);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
  margin-bottom: 24px;
  overflow: hidden;
}
.li-grid:not(.li-masonry) .li-card { margin-bottom: 0; }
.li-hidden { display: none; }

.li-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.li-author { display: block; font-weight: 600; }
.li-card-head time { font-size: .85rem; color: var(--li-muted); }
.li-pin { font-size: .8rem; color: var(--li-blue); margin-left: 8px; }
.li-icon { color: #0a66c2; font-size: 1.4rem; line-height: 1; }

.li-text {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--li-lines, 8);
  overflow: hidden;
}
.li-text.li-open { display: block; -webkit-line-clamp: unset; }
.li-text a { color: var(--li-link); }
.li-mention { font-weight: 500; }
.li-see-more {
  background: none; border: 0; padding: 0; margin-top: 2px;
  color: var(--li-muted); font: inherit; font-size: .9rem; cursor: pointer;
}
.li-see-more:hover { color: var(--li-blue); text-decoration: underline; }

/* Media */
.li-media { display: grid; gap: 4px; margin-top: 14px; border-radius: 8px; overflow: hidden; }
.li-media a { position: relative; display: block; }
.li-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.li-media--1 img { height: auto; }
.li-media--2 { grid-template-columns: 1fr 1fr; }
.li-media--2 a, .li-media--3 a, .li-media--4 a { aspect-ratio: 1 / 1; }
.li-media--3 { grid-template-columns: 1fr 1fr; }
.li-media--3 a:first-child { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
.li-media--4 { grid-template-columns: 1fr 1fr; }
.li-more {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .5); color: #fff; font-size: 1.6rem; font-weight: 600;
}

.li-video { display: block; width: 100%; margin-top: 14px; border-radius: 8px; background: #000; position: relative; overflow: hidden; }
.li-video img { display: block; width: 100%; height: auto; }
.li-video--link { min-height: 120px; }
.li-play {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-radius: 50%; background: rgba(0, 0, 0, .6); transition: transform .2s, background .2s;
}
.li-play::after {
  content: ""; position: absolute; left: 26px; top: 20px;
  border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff;
}
.li-video--link:hover .li-play { transform: scale(1.08); background: var(--li-blue); }

.li-article, .li-doc, .li-poll {
  display: block; margin-top: 14px; border: 1px solid var(--li-line); border-radius: 8px;
  overflow: hidden; color: var(--li-ink) !important; text-decoration: none !important; background: #f7f8fa;
}
.li-article img { display: block; width: 100%; height: auto; }
.li-article-body { display: block; padding: 10px 12px; }
.li-article-body strong { display: block; line-height: 1.3; }
.li-article small, .li-doc small, .li-poll small { display: block; color: var(--li-muted); margin-top: 2px; }
.li-doc { padding: 14px; font-weight: 500; }
.li-doc .fa { color: #c0392b; margin-right: 6px; }
.li-poll { padding: 14px; }
.li-poll span { display: block; border: 1px solid var(--li-blue); color: var(--li-blue); border-radius: 20px; padding: 4px 12px; margin-top: 8px; text-align: center; }

.li-repost { margin-top: 14px; padding: 12px; border: 1px solid var(--li-line); border-radius: 8px; }
.li-repost .li-text { -webkit-line-clamp: 5; }

.li-card-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--li-line); font-size: .9rem;
}
.li-card-foot a { color: var(--li-muted); text-decoration: none; }
.li-card-foot span { margin-right: 14px; }
.li-card-foot .li-view:hover { color: var(--li-blue); }

.li-load { text-align: center; margin: 8px 0 32px; }
.li-load-more {
  background: var(--li-blue); color: #fff; border: 0; border-radius: 6px;
  padding: 10px 28px; font: inherit; font-weight: 500; cursor: pointer;
}
.li-load-more:hover { background: var(--li-ink); }
.li-empty { text-align: center; padding: 40px 0; }