/* Social links — i2t3 component styles
 * A bar of social-network icon links. Style: filled / outline / plain.
 * Brand colours per network. No script.
 */

.i2t3-social__headline { font-weight: 600; margin-bottom: .5rem; }
.i2t3-social__list { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.i2t3-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    font-size: 1.1rem;
    text-decoration: none;
    transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.i2t3-social__link:hover { transform: translateY(-.15rem); }

/* Brand colours */
.i2t3-social__link--facebook  { --brand: #1877f2; }
.i2t3-social__link--twitter   { --brand: #000000; }
.i2t3-social__link--instagram { --brand: #e4405f; }
.i2t3-social__link--linkedin  { --brand: #0a66c2; }
.i2t3-social__link--youtube   { --brand: #ff0000; }
.i2t3-social__link--xing      { --brand: #026466; }
.i2t3-social__link--pinterest { --brand: #bd081c; }
.i2t3-social__link--reddit    { --brand: #ff4500; }
.i2t3-social__link--whatsapp  { --brand: #25d366; }
.i2t3-social__link--email     { --brand: #6c757d; }
.i2t3-social__link--website   { --brand: var(--i2t3-primary, #0d6efd); }

/* Variants */
.i2t3-social--filled .i2t3-social__link { background: var(--brand); color: #fff; }
.i2t3-social--outline .i2t3-social__link { border: 2px solid var(--brand); color: var(--brand); }
.i2t3-social--outline .i2t3-social__link:hover { background: var(--brand); color: #fff; }
.i2t3-social--plain .i2t3-social__link { color: var(--brand); width: auto; height: auto; }

/* Stacked (non-inline) layout */
.i2t3-social--stacked .i2t3-social__list { flex-direction: column; align-items: flex-start; }