/* ========================================
   SOCIALS — RESPONSIVE GRID
======================================== */

.Socials {
    --social-gap: 16px;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--social-gap);

    width: min(var(--container), calc(100% - 40px));
    margin-inline: auto;
}


/* ========================================
   SOCIAL CARD — BASE
======================================== */

.Social_Card {
    --social-accent: #8da4ff;
    --social-glow: rgba(141, 164, 255, 0.08);

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;
    min-height: 185px;
    padding: 24px;

    color: var(--text);
    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    text-decoration: none;
    overflow: hidden;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* ========================================
   PLATFORM COLORS
======================================== */

.Social_Card--itch {
    --social-accent: #FA5C5C;
    --social-glow: rgba(250, 92, 92, 0.09);
}

.Social_Card--x {
    --social-accent: #f5f5f5;
    --social-glow: rgba(255, 255, 255, 0.05);
}

.Social_Card--bluesky {
    --social-accent: #1185FE;
    --social-glow: rgba(17, 133, 254, 0.09);
}

.Social_Card--reddit {
    --social-accent: #FF4500;
    --social-glow: rgba(255, 69, 0, 0.09);
}

.Social_Card--github {
    --social-accent: #f5f5f5;
    --social-glow: rgba(255, 255, 255, 0.05);
}

.Social_Card--gamejolt {
    --social-accent: #CCFF00;
    --social-glow: rgba(204, 255, 0, 0.07);
}


/* ========================================
   HOVER & INTERACTION
======================================== */

.Social_Card:hover {
    background: linear-gradient(
        145deg,
        var(--social-glow),
        var(--surface) 85%
    );

    border-color: color-mix(
        in srgb,
        var(--social-accent) 60%,
        var(--border)
    );

    box-shadow: 0 8px 30px var(--social-glow);
    transform: translateY(-3px);
}

.Social_Card:active {
    transform: translateY(-1px);
}

.Social_Card:focus-visible {
    outline: 2px solid var(--social-accent);
    outline-offset: 4px;
}


/* ========================================
   TOP ROW
======================================== */

.Social_Card_Top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    margin-bottom: 24px;
}


/* ========================================
   ICON
======================================== */

.Social_Icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;
    flex-shrink: 0;
    padding: 5px;

    color: var(--social-accent);
    background: #202020;

    border: 1px solid color-mix(
        in srgb,
        var(--social-accent) 25%,
        var(--border)
    );

    border-radius: var(--radius-md);

    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;

    transition: border-color 0.25s ease;
}

.Social_Card:hover .Social_Icon {
    border-color: color-mix(
        in srgb,
        var(--social-accent) 55%,
        var(--border)
    );
}


/* ========================================
   EXTERNAL LINK ARROW
======================================== */

.Social_Arrow {
    color: var(--text-dim);
    font-size: 22px;
    line-height: 1;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.Social_Card:hover .Social_Arrow {
    color: var(--social-accent);
    transform: translate(2px, -2px);
}


/* ========================================
   PLATFORM NAME
======================================== */

.Social_Card h2 {
    margin: 0 0 7px;

    color: var(--text);

    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;

    overflow-wrap: anywhere;
}


/* ========================================
   USERNAME
======================================== */

.Social_Handle {
    margin: 0;

    color: var(--social-accent);

    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;

    overflow-wrap: anywhere;
}


/* ========================================
   TABLET — TWO COLUMNS
======================================== */

@media (max-width: 900px) {
    .Socials {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .Social_Card {
        min-height: 175px;
        padding: 22px;
    }
}


/* ========================================
   MOBILE — ONE COLUMN
======================================== */

@media (max-width: 520px) {
    .Socials {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;

        width: calc(100% - 30px);
    }

    .Social_Card {
        min-height: 0;
        padding: 20px;
    }

    .Social_Card_Top {
        margin-bottom: 16px;
    }

    .Social_Card h2 {
        font-size: 20px;
    }
}


/* ========================================
   REDUCED MOTION
======================================== */

@media (prefers-reduced-motion: reduce) {
    .Social_Card,
    .Social_Icon,
    .Social_Arrow {
        transition: none;
    }

    .Social_Card:hover,
    .Social_Card:active {
        transform: none;
    }
}