/* assets/css/components/sidebar-block-social-share.css
 * @layer components — Sidebar block: Social share / follow row
 *
 * "Follow us or share" row used inside .vimta-sidebar across blog, event,
 * resource, case-study singles and the sector sidebar.
 * ════════════════════════════════════════════════════════════════════ */

@layer components {

  /* Stacked layout: label on top, icons row below. Used exclusively inside
     narrow sidebar columns (sector-sidebar + article sidebar) where a
     horizontal row would crowd the icons against the right edge. */
  .vimta-social-share {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .vimta-social-share__label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .vimta-social-share__links {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
  }

  .vimta-social-share__link {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--tap-target-min);
    block-size: var(--tap-target-min);
    border-radius: var(--radius-round);
    background: var(--surface-tinted);
    color: var(--text-body);
    transition:
      background-color var(--duration-fast) var(--ease-default),
      color            var(--duration-fast) var(--ease-default);
  }

  .vimta-social-share__link:hover {
    background: var(--surface-primary);
    color: var(--text-on-primary);
  }

  .vimta-social-share__link:active {
    opacity: var(--opacity-subdued);
  }

  .vimta-social-share__link:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

}