.social-feed { display: flex; flex-direction: column; min-height: 550px; height: 100%; padding: 24px 28px 0; border-radius: 12px; background: #fff; color: #243b53; overflow: hidden; }
.social-feed-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; }
.social-feed-eyebrow { display: flex; gap: 10px; font-size: 9px; line-height: 1.5; font-weight: 700; letter-spacing: .1em; color: #62758a; }
.social-feed-eyebrow > span { color: #d38c26; }
.social-feed h2 { font-size: clamp(21px, 1.8vw, 27px); line-height: 1.2; letter-spacing: -.035em; color: #003a70; margin: 8px 0 0; }
.social-feed-brand { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 50%; background: #edf3f8; color: #003a70; font-family: Arial, sans-serif; font-size: 27px; font-weight: 700; }
.social-feed-demo { margin: -5px 0 10px; font-size: 10px; line-height: 1.4; color: #62758a; }
.social-feed-posts { list-style: none; padding: 0; margin: 0; flex: 1; display: flex; flex-direction: column; }
.social-feed-posts > li { flex: 1; border-top: 1px solid #e5ebf1; display: flex; }
.social-post { display: flex; align-items: center; gap: 18px; width: 100%; padding: 11px 0; color: #243b53; }
.social-post-media { position: relative; display: grid; place-items: center; flex: 0 0 88px; width: 88px; height: 96px; overflow: hidden; border-radius: 6px; background: #eef3f8; }
.social-post-monogram { color: #8a9fb4; text-align: center; font-size: 22px; font-weight: 700; letter-spacing: -.04em; }
.social-post-monogram > span { display: block; font-size: 8px; letter-spacing: .12em; }
.social-post-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 220ms ease; }
.social-post-image:not([src]), .social-post-image[hidden] { display: none; }
.social-post-copy { min-width: 0; flex: 1; }
.social-post time { display: block; color: #748498; font-size: 10px; line-height: 1.3; font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.social-post-message { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 14px; line-height: 1.4; font-weight: 600; color: #163c62; }
.social-post-action { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 10px; line-height: 1.4; color: #62758a; }
.social-post-action > span[aria-hidden] { color: #bb7a22; font-size: 16px; line-height: 1; }
.social-feed-consent { align-self: flex-start; padding: 7px 0; border: 0; background: none; font: inherit; font-size: 11px; color: #52677d; text-decoration: underline; text-underline-offset: 3px; }
.social-feed-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 62px; border-top: 1px solid #e5ebf1; color: #003a70; font-size: 12px; font-weight: 600; }
.social-feed-footer > span[aria-hidden] { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #f9f0e2; color: #975f12; font-size: 18px; }
.social-feed :focus-visible { outline: 3px solid #df911e; outline-offset: 3px; border-radius: 4px; }
.social-feed-empty { display: flex; flex: 1; flex-direction: column; justify-content: center; padding: 24px 0 40px; }
.social-feed-empty-line { width: 32px; height: 3px; background: #df911e; margin-bottom: 22px; }
.social-feed-empty h3 { color: #003a70; font-size: 23px; margin-bottom: 12px; }
.social-feed-empty p { font-size: 14px; line-height: 1.7; color: #62758a; }
@media (hover: hover) {
  .social-post:hover .social-post-image { transform: scale(1.045); }
  .social-post:hover .social-post-message, .social-feed-footer:hover { color: #9c641b; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .social-feed { min-height: 480px; padding: 20px 20px 0; }
  .social-post { gap: 12px; }
  .social-post-media { flex-basis: 64px; width: 64px; height: 74px; }
  .social-post-message { font-size: 13px; -webkit-line-clamp: 2; }
  .social-feed-brand { display: none; }
}
@media (max-width: 991.98px) {
  .social-feed { min-height: 0; height: auto; }
  .social-feed h2 { font-size: 26px; }
  .social-post { padding: 20px 0; }
  .social-post-media { width: 96px; flex-basis: 96px; }
}
@media (max-width: 374.98px) {
  .social-feed { padding: 22px 20px 0; }
  .social-post { gap: 14px; }
  .social-post-media { width: 72px; flex-basis: 72px; height: 88px; }
  .social-post-message { font-size: 13px; }
  .social-feed h2 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) { .social-post-image { transition: none; } }