.slider-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  /* Columns lay out like the cards: fixed width per column (no stretching) +
     alignment. --cards-per-row / --cards-align are set per block from the
     "Cols per row" / "Alignment" settings. */
  justify-content: var(--cards-align, flex-start);
}
.slider-list__col {
  flex: 0 1
    calc(
      (100% - (var(--cards-per-row, 3) - 1) * 24px) / var(--cards-per-row, 3)
    );
  min-width: 0;
}
@media (max-width: 991px) {
  .slider-list__col {
    flex-basis: calc((100% - 24px) / 2);
  }
}
@media (max-width: 560px) {
  .slider-list__col {
    flex-basis: 100%;
  }
}

/* Card shell shared by every column type */
.slider-list__card {
  position: relative;
  height: 100%;
  padding: 24px;
  border-radius: 10px;
  border: 1px solid #e6e4e0;
  background: #f4f4f3;
}

/* Card header: label on the left, decorative red dashes on the right */
.slider-list__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.slider-list > div:first-of-type .slider-list__card {
  background: #fff;
  padding: 0 !important;
}
.slider-list__linkedin .slider-list__head {
  padding: 24px 16px 15px 16px;
  border-bottom: 1px solid #e9e5df;
}

.slider-list__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #87878d;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.5px;

  letter-spacing: 0.88px;
  text-transform: uppercase;
}

.slider-list__label svg {
  flex-shrink: 0;
}

/* Slick dots rendered as red dashes in the card header (top right) */
/* #page prefix needed to outrank the global "#page .slick-dots" rules in reusable.css */
#page .slider-list__dots {
  flex-shrink: 0;
}

#page .slider-list__dots .slick-dots {
  position: static;
  display: flex;
  gap: 6px;
  width: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

#page .slider-list__dots .slick-dots li,
#page .slider-list__dots .slick-dots li.slick-active {
  width: auto;
  height: auto;
  margin: 0;
}

#page .slider-list__dots .slick-dots li button {
  width: 20px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: rgba(
    15,
    15,
    16,
    0.12
  ); /* inactive dots (all but the active one) */
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  transition: background 0.3s;
}

#page .slider-list__dots .slick-dots li button::before {
  display: none;
}

/* Only the currently active slide's dot is red. */
#page .slider-list__dots .slick-dots li.slick-active button {
  background: #c00;
}

/* Prevent a flash of all slides before slick initialises */
.slider-list__slider:not(.slick-initialized)
  .slider-list__slide:not(:first-child) {
  display: none;
}

/* ===== LinkedIn feed =====
   No padding here. The image and the action bar run the full card width, and
   pulling them out with negative margins does not work: slick wraps every slide
   in .slick-list { overflow: hidden }, which clips anything that leaves the
   slide box. So the gutters live on the individual rows that need them. */
.slider-list__feed {
  padding: 0;
}

/* ---- Card height ----
   The card matches its neighbours in the row: .slider-list is a flex row, so the
   column is already stretched to the tallest card, and the height is handed down
   from there to the slide. Every level in between needs a DEFINITE height for the
   percentages to resolve, which is the whole point of the chain below — an earlier
   attempt that skipped a level computed 415.7 instead of 445.7 because
   .slider-list__feed was a flex item with flex-basis:auto, so its height came from
   its content and the percentage below had nothing to resolve against.

   Two things had to give way for this to hold:

   - adaptiveHeight is switched off for this slider in assets/js/slick-init.js.
     With it on, slick writes an inline pixel height onto .slick-list on every
     slide change, and an inline style beats any stylesheet rule.
   - the slide gets min-height, not height. A hard height caps the slide at the
     card, and when a post's content is taller the card is a flex column whose
     text carries overflow:hidden for its line clamp — which lets its automatic
     min-height resolve to 0. The text is then the one item that can shrink, so it
     collapses to nothing and the card shows a header and a picture with no words.
     That is exactly what happened before; min-height lets the slide grow instead. */
.slider-list__col .slider-list__linkedin {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.slider-list__linkedin .slider-list__feed {
  /* Takes what the head leaves, and clips the stacked slides that slick's fade
     mode parks alongside the active one. */
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.slider-list__feed .slick-slider,
.slider-list__feed .slick-list,
.slider-list__feed .slick-track {
  height: 100%;
}

.slider-list__feed .slick-list {
  overflow: hidden;
}

/* height:auto here would leave a short post's card ending above its neighbours;
   height:100% would clip a tall one. min-height does both, and has to be written
   out because slick.css ships `.slick-slide { height: 100% }` itself — two classes
   (0,2,0) beat its one (0,1,0). */
.slider-list__feed .slick-slide {
  height: auto;
  min-height: 100%;
}

/* The two content rows never shrink. Their heights are already bounded — the text
   is clamped to three lines and the image to 2:1 — so there is nothing to gain by
   squeezing them, and everything to lose: a shrunk text row is an empty card. */
.oda-lipost__text,
.oda-lipost__media {
  flex-shrink: 0;
}

/* No picture → the text takes exactly the room the picture would have taken, so a
   text-only post fills the same card as any other instead of stopping after three
   lines. (linkedin-feed.php also hands these posts a much longer excerpt.)

   Where 13 comes from: a card with a picture spends 15.69px of margin plus an
   image at 2:1 on the full ~443px width, so ~236px — and at a 22px line-height
   that is ~10.7 lines on top of the usual 3. Rounded DOWN on purpose: too many
   lines and the LinkedIn card becomes the tallest in the row and stretches its
   neighbours to match, which is how a first attempt at this ended up 770px tall
   with two half-empty cards beside it. A line short is invisible instead — the
   card is stretched to the row by the height chain above, and the action bar's
   auto top margin keeps it on the bottom edge either way.

   A count, not flex-grow: growing into the available space makes the text's height
   depend on the card while the card's height depends on the text, and a browser
   resolves that circle by falling back to content height — the card then drives
   the row instead of following it. */
.oda-lipost--text .oda-lipost__text {
  -webkit-line-clamp: 13;
}

.slider-list__feed .slick-slide > * {
  width: 100%;
}

/* ===== LinkedIn post card — Figma 239:544 =====
   A replica of a LinkedIn post. Values transcribed from the frame; the mock is
   443.33px wide, so anything that was an absolute offset there is expressed
   here relative to that same 16px gutter.

   One substitution: the mock is set in SF Pro, because it was drawn over a
   LinkedIn screenshot. The site is set in Inter, so the card inherits Inter at
   the mock's sizes and line heights — SF Pro is not ours to serve, and mixing a
   second typeface into one card would read as a foreign object on the page.

   The .slick-slide in the selector is load-bearing: slick sets
   `.slick-initialized .slick-slide { display: block }` (0,2,0), which outranks a
   lone class, and the card needs to be a flex column so the action bar sits at
   the bottom of every slide regardless of text length. */
.oda-lipost {
  display: flex;
  flex-direction: column;
  padding: 0;
  /* The card itself is the <a> to the post, so it has to opt out of link styling:
     the colour below would otherwise be the theme's link red and every line would
     be underlined. */
  text-decoration: none;
  color: rgba(0, 0, 0, 0.9);
  /* The frame is set in SF Pro because it reproduces LinkedIn's own UI. The
     honest way to get that is the native UI stack — SF Pro on Apple, Segoe UI on
     Windows — rather than shipping Inter, which is the site face but not this
     card's. Also matters for the post text: LinkedIn posts are full of
     mathematical-bold letters (𝐅𝐚-𝐁𝐞𝐬𝐭), which Inter has no glyphs for, so the
     browser fell back to a serif mid-sentence. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* Slick stamps `display: block` on its slides via
   `.slick-initialized .slick-slide` (0,2,0), which outranks the class above and
   would flatten the flex column. Restate ONLY display, so the card keeps its
   geometry before slick runs — and still has it if the script never does. */
.slider-list__feed .slick-slide.oda-lipost {
  display: flex;
}

/* ---- header: avatar · page name + followers · LinkedIn mark ----
   Top-aligned, not centred: in the frame the name sits at y=12.5 and the
   followers line at y=30.5, both flush with the top of the 44px avatar.
   Centring pushed the name 12.8px down whenever the followers line was absent.

   The name column is the frame's own 249.33px so it truncates exactly where the
   frame truncates it, and the gap before the mark is preserved. A `1fr` column
   let the name run on and it never ellipsised. */
.oda-lipost__head {
  display: grid;
  grid-template-columns: 44px minmax(0, 249.33px) 1fr 22px;
  align-items: start;
  column-gap: 8px;
  padding: 12px 19.33px 0 16px;
}

.oda-lipost__avatar {
  display: block;
  width: 44px;
  height: 44px;
  border: 1px solid #e9e5df;
  border-radius: 22px;
  background: #fff;
  overflow: hidden;
}

.oda-lipost__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.oda-lipost__by {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-top: 0.5px;
}

.oda-lipost__org {
  font-size: 14px;
  font-weight: 600;
  line-height: 17.5px;
  letter-spacing: -0.07px;
  color: rgba(0, 0, 0, 0.9);
  /* the mock truncates the page name rather than wrapping the header */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oda-lipost__followers {
  font-size: 12px;
  line-height: 15px;
  color: rgba(0, 0, 0, 0.6);
}

.oda-lipost__brand {
  grid-column: 4;
  display: block;
  width: 22px;
  height: 22px;
  /* frame: y=12.5 against the avatar's y=12 */
  margin-top: 0.5px;
  color: #0a66c2;
}

.oda-lipost__brand svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- post text: three lines, then ellipsis ---- */
.oda-lipost__text {
  margin-top: 9.5px;
  padding: 0 19.33px 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.081px;
  color: rgba(0, 0, 0, 0.9);
  overflow-wrap: anywhere;
}

/* ---- media: 2:1, edge to edge (443.33 / 221.66 in the frame) ---- */
/* full card width, flush left and right, and it is the last thing before the
   action bar */
.oda-lipost__media {
  margin-top: 15.69px;
}

.oda-lipost__media img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

/* ---- reactions ---- */
.oda-lipost__reactions {
  display: flex;
  align-items: center;
  /* frame: image bottom 367.85 → badges 375.85, badges bottom 393.85 → bar 399.85 */
  margin: 8px 0 6px;
  padding: 0 19.33px 0 16px;
}

.oda-lipost__react {
  width: 18px;
  height: 18px;
  border: 1px solid #fff;
  border-radius: 9px;
  font-size: 10px;
  line-height: 15px;
  text-align: center;
  color: #fff;
}

/* the two badges overlap by 4px, as in the frame (left 16 and left 30) */
.oda-lipost__react--like {
  background: #0a66c2;
}

.oda-lipost__react--idea {
  margin-left: -4px;
  background: #f5bc00;
}

.oda-lipost__reactcount {
  margin-left: 10px;
  font-size: 12px;
  line-height: 18px;
  color: rgba(0, 0, 0, 0.6);
}

/* ---- action bar ----
   Drawn as four buttons in the mock but rendered as ONE link: nothing here can
   like or repost on a visitor's behalf, so the whole row opens the post on
   LinkedIn, where those actions actually exist. */
.oda-lipost__actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  /* glued to the bottom and full width */
  margin: auto 0 0;
  padding: 5px 8px 4px;
  border-top: 1px solid #e9e5df;
  text-decoration: none;
}

.oda-lipost__action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  border-radius: 6px;
  color: rgba(0, 0, 0, 0.6);
}

/* Focus moved to the card: the bar used to be the link and could take focus, and
   now it is a plain span that never will. Keyboard users get the same highlight
   from the card, plus a ring so it is obvious what is about to open. */
.oda-lipost__actions:hover .oda-lipost__action,
.oda-lipost:focus-visible .oda-lipost__action {
  background: #f4f4f3;
}

.oda-lipost:focus-visible {
  outline: 2px solid #0a66c2;
  outline-offset: 2px;
}

.oda-lipost__ic {
  flex: none;
  width: 18px;
  height: 18px;
}

.oda-lipost__actionlabel {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.078px;
  white-space: nowrap;
}

/* Narrow columns can't fit four labels — keep the icons, drop the words. */
@media (max-width: 480px) {
  .oda-lipost__actionlabel {
    display: none;
  }
}

.slider-list__li-empty {
  margin: 0;
  color: #87878d;
  font-size: 13px;
  line-height: 19px;
}

/* ===== Contact card ===== */
.slider-list__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 73px;
  height: 73px;
  margin-bottom: 16px;
  border-radius: 999px;
  border-radius: 36.836px;
  border: 3.453px solid #fff;
  background: linear-gradient(135deg, #d4d4d2 0%, #a8a8a5 100%);
  box-shadow:
    0 1.151px 2.302px 0 rgba(15, 15, 16, 0.04),
    0 1.151px 1.151px 0 rgba(15, 15, 16, 0.03);
  color: #fff;
  line-height: 34px;
  letter-spacing: -0.46px;
  font-size: 23px;
  font-weight: 600;
}

/* Photo variant: the person's picture fills the circle, and the white ring and
   shadow above stay. border-radius: inherit rather than a repeated 999px/36.8px
   pair — the ring's radius is set in one place and the image follows it, so the
   two can never drift apart. Without overflow: hidden the square image simply
   sits on top of the round frame. Used when a contact has contact_photo set
   (template-parts/blocks/slider-list-col.php). */
.slider-list__avatar--photo {
  overflow: hidden;
  background: none;
}

.slider-list__avatar--photo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.slider-list__contact-name {
  margin-bottom: 4px;
  color: #0f0f10;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 20.4px;
  letter-spacing: -0.34px;
}

.slider-list__contact-role {
  color: #c00;
  font-size: 12px;
  display: block;
  font-style: normal;
  margin-bottom: 18px;
  font-weight: 400;
  line-height: 15.75px; /* 131.25% */
  letter-spacing: 0.33px;
  text-transform: unset;
  /* Client request: a person's role is written as they write it, not shouted.
     0.33px tracking rather than the 0.63px that uppercase needed — lower case
     does not want the extra air. Same value the Additional CSS already used
     when it patched the other two role classes. */
}

.slider-list__contact-text,
.slider-list__event-desc {
  margin-bottom: 22px;
  border-bottom: 1px dashed #e6e4e0;

  padding-bottom: 22px;
}

.slider-list__contact-text p {
  font-weight: 400;
  letter-spacing: -0.08px;
  line-height: 22px;
}
.slider-list__contact-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.slider-list__contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.slider-list__contact-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

.slider-list__contact-row a {
  color: inherit;
  text-decoration: none;
  word-break: break-word;
}

.slider-list__contact-row a:hover {
  color: var(--red);
}

/* ===== Events card ===== */
.slider-list__event {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.slider-list__event-head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}
/* Date + title share the top row; description and meta sit full width below */
.slider-list__event-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.slider-list__event + .slider-list__event {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e6e4e0;
}

.slider-list__event-date {
  flex-shrink: 0;
  text-align: center;
  line-height: 1.1;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid #e6e4e0;
  background: #fff;
}

.slider-list__event-day {
  display: block;
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.72px;
  color: #0f0f10;
}

.slider-list__event-month {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.95px;
  color: var(--red);
}

.slider-list__event-title {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 21px;
  letter-spacing: -0.32px;
}

.slider-list__event-title a {
  color: inherit;
  text-decoration: none;
}

.slider-list__event-title a:hover {
  color: var(--red);
}

.slider-list__event-desc {
  margin-bottom: 16px;
  line-height: 22px;
  letter-spacing: -0.08px;
  font-weight: 400;
  color: #424248;
}
.BulletsControl__BulletsControlContainer-sc-f687eb2-0 {
  position: fixed;
  right: 0;
}
.slider-list__event-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.slider-list__event-meta li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.08px;
  line-height: 19px;
  color: #424248;
}
.slider-list__contact-row a {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.08px;
  line-height: 19px;
  color: #424248;
}

.slider-list__event-meta svg {
  flex-shrink: 0;
  color: var(--red);
}

.slider-list__event-meta a {
  color: inherit;
  text-decoration: none;
}

.slider-list__event-meta a:hover {
  color: var(--red);
}

.slider-list__events-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  color: var(--red);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

@media (max-width: 991px) {
  .slider-list__linkedin {
    min-height: 220px;
  }
}
.slider-list__linkedin .slider-list__head {
  margin-bottom: 0 !important;
}