/*  linkedin.css — the LinkedIn post carousel.
 *
 *  Loaded after site.css and media.css on the pages that carry a feed (index, insight).
 *  Self-contained: it reuses the design tokens from site.css and nothing else, so the
 *  original .li-grid / .li-card rules are left untouched and still work anywhere else.
 *
 *  Without JavaScript the track is an ordinary horizontal scroll-snap strip — swipeable
 *  on touch, scrollable with a trackpad, and every slide is real markup in the HTML.
 *  linkedin.js only adds the buttons, the dots and the keyboard handling.
 */

/* ---------- shell ---------- */
.li-car{margin-top:56px}
.li-viewport{border:1px solid var(--line);background:var(--card)}
.li-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.li-track::-webkit-scrollbar{display:none}
.li-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start}
/* Belt and braces: the stylesheet and the script cache independently, so a browser can end
   up running an older linkedin.js against this file. That version appends .li-card children
   straight into the track; without this they collapse into six squeezed columns. */
.li-track > .li-card{flex:0 0 100%;min-width:0;scroll-snap-align:start}

/* ---------- slide ---------- */
.li-post{background:var(--card);display:grid;grid-template-columns:340px 1fr;align-items:stretch}
.li-post.plain{grid-template-columns:1fr}   /* a post with no infographic */
.li-shot{
  display:block;
  position:relative;
  background:var(--paper-2);
  border-right:1px solid var(--line);
  aspect-ratio:4/5;
  overflow:hidden;
}
.li-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.li-copy{padding:38px 40px 34px;display:flex;flex-direction:column;min-width:0}

.li-post .li-head{display:flex;align-items:center;gap:14px}
.li-post .d{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#8B8D8B;min-width:0}
.li-post .ex{
  font-family:var(--serif);font-weight:500;font-size:29px;line-height:1.24;
  color:#24262A;margin:22px 0 0;
}
.li-post .body{font-size:15.5px;color:var(--muted);margin:16px 0 0;line-height:1.75;max-width:46em}
.li-post .when{margin-top:20px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#9A9C99}
.li-post .acts{margin-top:auto;padding-top:26px;display:flex;align-items:baseline;gap:28px;flex-wrap:wrap}
.li-post .rd{
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dk);
  border-bottom:1px solid var(--gold);padding-bottom:5px;
}
.li-post .rd:hover{color:var(--gold)}
.li-post .full{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:#8B8D8B}
.li-post .full:hover{color:var(--gold-dk)}

/* ---------- controls (revealed by linkedin.js) ---------- */
.li-nav{display:none}
.li-car[data-enhanced] .li-nav{
  display:flex;align-items:center;justify-content:center;gap:22px;margin-top:26px;
}
.li-btn{
  width:42px;height:42px;flex:none;
  background:transparent;border:1px solid var(--line-2);color:var(--gold-dk);
  font-family:var(--sans);font-size:19px;line-height:1;cursor:pointer;
}
.li-btn:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.li-btn:disabled{opacity:.3;cursor:default}
.li-dots{display:flex;align-items:center;gap:14px}
.li-dot{
  width:22px;height:22px;padding:0;flex:none;
  background:transparent;border:0;cursor:pointer;
  color:var(--line-2);font-size:11px;line-height:22px;
}
.li-dot:hover{color:var(--gold-lt)}
.li-dot[aria-current="true"]{color:var(--gold-dk)}
.li-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- responsive ---------- */
@media (max-width: 1180px){
  .li-post{grid-template-columns:300px 1fr}
  .li-post.plain{grid-template-columns:1fr}
  .li-post .ex{font-size:26px}
  .li-copy{padding:34px 34px 30px}
}
@media (max-width: 980px){
  .li-post{grid-template-columns:240px 1fr}
  .li-post.plain{grid-template-columns:1fr}
  .li-post .ex{font-size:23px}
  .li-post .body{font-size:15px}
  .li-copy{padding:30px 28px 26px}
  .li-car{margin-top:44px}
}
@media (max-width: 720px){
  .li-post{grid-template-columns:1fr}
  .li-shot{aspect-ratio:3/2;border-right:0;border-bottom:1px solid var(--line)}
  .li-copy{padding:28px 24px 26px}
  .li-post .ex{font-size:24px}
  .li-post .acts{gap:18px}
  .li-car[data-enhanced] .li-nav{gap:14px}
}
@media (max-width: 400px){
  .li-dots{gap:8px}
  .li-dot{width:16px;font-size:10px}
}
@media (prefers-reduced-motion: reduce){
  .li-track{scroll-behavior:auto}
}
@media print{
  .li-nav{display:none}
  .li-track{overflow:visible;display:block}
  .li-slide{break-inside:avoid}
}