/* === Expert Social Feed (LinkedIn / Instagram / TikTok) === */
.esf-card { padding: 18px 20px 22px; }
.esf-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
.esf-count {
  font-size: 11px; font-weight: 500; color: #888; margin-left: 6px;
  letter-spacing: 0;
}

/* Toggle */
.esf-net-toggle {
  display: inline-flex; gap: 4px; padding: 4px;
  background: #FAF7F1; border: 1px solid rgba(184,145,42,.18);
  border-radius: 99px;
}
.esf-net-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: none; background: transparent;
  border-radius: 99px; cursor: pointer;
  font-size: 12px; font-weight: 600; color: #6B5530;
  font-family: inherit; transition: all .18s;
}
.esf-net-btn:hover { color: #3a2c12; }
.esf-net-btn.is-active {
  background: #fff; color: #1a1a1a;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.esf-net-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 10px; font-weight: 700; color: #fff;
  font-family: Georgia, serif;
}
.esf-net-ico-li { background: #0A66C2; }
.esf-net-ico-in {
  background: linear-gradient(135deg, #FEDA75 0%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 100%);
}
.esf-net-ico-ti { background: #000; }
.esf-net-cnt {
  font-size: 10px; font-weight: 700;
  background: rgba(0,0,0,.06); padding: 2px 7px; border-radius: 99px;
  color: #555;
}
.esf-net-btn.is-active .esf-net-cnt { background: rgba(184,145,42,.15); color: #8C6D34; }

/* Scroll wrapper */
.esf-wrap { position: relative; }
.esf-scroll {
  display: flex; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 2px 14px;
  scrollbar-width: thin;
}
.esf-scroll::-webkit-scrollbar { height: 6px; }
.esf-scroll::-webkit-scrollbar-thumb { background: rgba(184,145,42,.25); border-radius: 99px; }

/* Post card */
.esf-post {
  flex: 0 0 320px;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px; overflow: hidden;
  scroll-snap-align: start;
  transition: all .2s;
}
.esf-post:hover { box-shadow: 0 6px 22px rgba(0,0,0,.08); transform: translateY(-1px); }
.esf-post-instagram { border-color: rgba(221,42,123,.18); }
.esf-post-tiktok { border-color: rgba(254,44,85,.20); }

.esf-post-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px; }
.esf-post-av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.esf-post-meta { flex: 1; min-width: 0; }
.esf-post-author { font-size: 13px; font-weight: 600; color: #1a1a1a; line-height: 1.2; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.esf-post-time { font-size: 11px; color: #666; margin-top: 2px; }
.esf-post-more {
  background: none; border: none; cursor: pointer;
  font-size: 16px; color: #888; padding: 4px 8px;
}

.esf-tag {
  display: inline-flex; align-items: center;
  font-size: 9px; font-weight: 700; padding: 2px 7px;
  border-radius: 99px; text-transform: uppercase; letter-spacing: .04em;
}
.esf-tag-instagram { background: linear-gradient(135deg, #FA7E1E, #D62976); color: #fff; }
.esf-tag-tiktok { background: #000; color: #fff; }

.esf-post-text {
  padding: 0 14px 12px; font-size: 13px; line-height: 1.5; color: #2c2c2c;
}
.esf-post-link { color: #0A66C2; font-weight: 500; cursor: pointer; }
.esf-post-instagram .esf-post-link, .esf-post-tiktok .esf-post-link { color: #1a1a1a; font-weight: 600; }

.esf-post-media {
  width: 100%; height: 200px;
  background-size: cover; background-position: center;
  background-color: #f5f0e6; position: relative;
}
.esf-media-square { aspect-ratio: 1/1; height: auto !important; }
.esf-media-vertical { aspect-ratio: 9/16; height: auto !important; max-height: 360px; }
.esf-play {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  font-size: 38px; color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}

.esf-rxn {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; font-size: 11px; color: #666;
  border-top: 1px solid rgba(0,0,0,.05);
}
.esf-rxn-icons { display: inline-flex; }
.esf-rxn-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 10px; margin-left: -4px; border: 1.5px solid #fff;
}
.esf-rxn-i:first-child { margin-left: 0; }
.esf-rxn-like { background: #0A66C2; }
.esf-rxn-love { background: #df3d4f; }
.esf-rxn-clap { background: #f5b800; }
.esf-rxn-count { font-weight: 600; color: #1a1a1a; margin-left: 4px; }
.esf-rxn-sep { color: #ccc; margin: 0 2px; }
.esf-rxn-meta { color: #666; }

.esf-actions {
  display: flex; padding: 6px 8px;
  border-top: 1px solid rgba(0,0,0,.05);
}
.esf-act {
  flex: 1; background: none; border: none; cursor: pointer;
  font-size: 12px; color: #555; padding: 8px 4px;
  border-radius: 6px; transition: background .15s;
  font-family: inherit;
}
.esf-act:hover { background: rgba(0,0,0,.04); }

/* Arrows */
.esf-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%;
  background: #fff; border: 1px solid rgba(184,145,42,.25);
  color: #8C6D34; font-size: 18px; font-weight: 700;
  cursor: pointer; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: all .15s;
}
.esf-arrow:hover { background: #FBF4DE; color: #6B5530; }
.esf-arrow-l { left: -14px; }
.esf-arrow-r { right: -14px; }

@media (max-width: 720px) {
  .esf-post { flex: 0 0 84vw; }
  .esf-arrow { display: none; }
  .esf-net-lbl { display: none; }
  .esf-net-btn { padding: 6px 8px; }
}