/* ============================================================
   Link Cards — MS_site
   Anatomy per design-system.md §7.5
   ============================================================ */

/* ---------- Page layout ---------- */
.links-page {
    padding-block: var(--space-5);
}

/* ---------- Section heading ---------- */
.link-section {
    margin-bottom: var(--space-5);
}

.link-section:last-child {
    margin-bottom: 0;
}

.link-section__title {
    font-size: var(--fs-xl);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    color: var(--text);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-soft);
}

/* ---------- Grid ---------- */
.link-grid {
    --min: var(--col-link);
}

/* ---------- Card base ---------- */
.link-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition:
        transform var(--dur) var(--ease-standard),
        box-shadow var(--dur) var(--ease-standard),
        border-color var(--dur) var(--ease-standard);
}

.link-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-strong);
}

/* Platform glow on hover */
.link-card[data-platform="youtube"]:hover {
    box-shadow:
        var(--shadow-lg),
        0 0 24px rgba(255, 0, 51, 0.18);
}
.link-card[data-platform="telegram"]:hover {
    box-shadow:
        var(--shadow-lg),
        0 0 24px rgba(42, 171, 238, 0.18);
}
.link-card[data-platform="discord"]:hover {
    box-shadow:
        var(--shadow-lg),
        0 0 24px rgba(88, 101, 242, 0.18);
}
.link-card[data-platform="vk"]:hover {
    box-shadow:
        var(--shadow-lg),
        0 0 24px rgba(0, 119, 255, 0.18);
}
.link-card[data-platform="boosty"]:hover {
    box-shadow:
        var(--shadow-lg),
        0 0 24px rgba(241, 95, 44, 0.18);
}
.link-card[data-platform="website"]:hover {
    box-shadow:
        var(--shadow-lg),
        0 0 24px rgba(184, 146, 74, 0.18);
}

/* ---------- Card with icon (all cards) ---------- */
.link-card__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    align-self: center;
    border-radius: var(--r-md);
    background: var(--surface-2);
    border: 1.5px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition:
        color var(--dur-fast),
        background var(--dur-fast),
        border-color var(--dur-fast);
    overflow: hidden;
}

/* Subtle platform tint in rest state — makes icons feel alive */
.link-card[data-platform="youtube"] .link-card__icon {
    color: color-mix(in srgb, var(--c-youtube) 55%, var(--text-muted));
    background: color-mix(in srgb, var(--c-youtube) 10%, var(--surface-2));
    border-color: color-mix(in srgb, var(--c-youtube) 55%, transparent);
}
.link-card[data-platform="telegram"] .link-card__icon {
    color: color-mix(in srgb, var(--c-telegram) 55%, var(--text-muted));
    background: color-mix(in srgb, var(--c-telegram) 10%, var(--surface-2));
    border-color: color-mix(in srgb, var(--c-telegram) 55%, transparent);
}
.link-card[data-platform="discord"] .link-card__icon {
    color: color-mix(in srgb, var(--c-discord) 55%, var(--text-muted));
    background: color-mix(in srgb, var(--c-discord) 10%, var(--surface-2));
    border-color: color-mix(in srgb, var(--c-discord) 55%, transparent);
}
.link-card[data-platform="vk"] .link-card__icon {
    color: color-mix(in srgb, var(--c-vk) 55%, var(--text-muted));
    background: color-mix(in srgb, var(--c-vk) 10%, var(--surface-2));
    border-color: color-mix(in srgb, var(--c-vk) 55%, transparent);
}
.link-card[data-platform="boosty"] .link-card__icon {
    color: color-mix(in srgb, var(--c-boosty) 55%, var(--text-muted));
    background: color-mix(in srgb, var(--c-boosty) 10%, var(--surface-2));
    border-color: color-mix(in srgb, var(--c-boosty) 55%, transparent);
}
.link-card[data-platform="twitch"] .link-card__icon {
    color: color-mix(in srgb, var(--c-twitch) 55%, var(--text-muted));
    background: color-mix(in srgb, var(--c-twitch) 10%, var(--surface-2));
    border-color: color-mix(in srgb, var(--c-twitch) 55%, transparent);
}
.link-card[data-platform="tiktok"] .link-card__icon {
    color: color-mix(in srgb, var(--c-tiktok) 55%, var(--text-muted));
    background: color-mix(in srgb, var(--c-tiktok) 10%, var(--surface-2));
    border-color: color-mix(in srgb, var(--c-tiktok) 55%, transparent);
}
.link-card[data-platform="website"] .link-card__icon {
    color: color-mix(in srgb, #B8924A 55%, var(--text-muted));
    background: color-mix(in srgb, #B8924A 10%, var(--surface-2));
    border-color: color-mix(in srgb, #B8924A 55%, transparent);
}

.link-card__icon-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Filled icon: custom image covers the entire icon box */
.link-card__icon--filled {
    background: transparent;
    margin-left: calc(var(--space-2) - var(--space-3)); /* выравнивает левый отступ с gap */
}

.link-card__icon--filled .link-card__icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Icon hover colors per platform — full brand color */
.link-card[data-platform="youtube"]:hover .link-card__icon {
    color: var(--c-youtube);
    background: color-mix(in srgb, var(--c-youtube) 18%, var(--surface-2));
    border-color: var(--c-youtube);
}
.link-card[data-platform="telegram"]:hover .link-card__icon {
    color: var(--c-telegram);
    background: color-mix(in srgb, var(--c-telegram) 18%, var(--surface-2));
    border-color: var(--c-telegram);
}
.link-card[data-platform="discord"]:hover .link-card__icon {
    color: var(--c-discord);
    background: color-mix(in srgb, var(--c-discord) 18%, var(--surface-2));
    border-color: var(--c-discord);
}
.link-card[data-platform="vk"]:hover .link-card__icon {
    color: var(--c-vk);
    background: color-mix(in srgb, var(--c-vk) 18%, var(--surface-2));
    border-color: var(--c-vk);
}
.link-card[data-platform="boosty"]:hover .link-card__icon {
    color: var(--c-boosty);
    background: color-mix(in srgb, var(--c-boosty) 18%, var(--surface-2));
    border-color: var(--c-boosty);
}
.link-card[data-platform="tiktok"]:hover .link-card__icon {
    color: var(--c-tiktok);
    background: color-mix(in srgb, var(--c-tiktok) 18%, var(--surface-2));
    border-color: var(--c-tiktok);
}
.link-card[data-platform="twitch"]:hover .link-card__icon {
    color: var(--c-twitch);
    background: color-mix(in srgb, var(--c-twitch) 18%, var(--surface-2));
    border-color: var(--c-twitch);
}
.link-card[data-platform="website"]:hover .link-card__icon {
    color: #B8924A;
    background: color-mix(in srgb, #B8924A 18%, var(--surface-2));
    border-color: #B8924A;
}

/* ---------- Card body ---------- */
.link-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    justify-content: center;
}

.link-card__title {
    font-size: var(--fs-base);
    font-weight: 600;
    font-family: var(--font-ui);
    line-height: var(--lh-snug);
    color: var(--text);
}

.link-card__desc {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: var(--lh-snug);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Email copy card ---------- */
.link-card--email {
    cursor: pointer;
    user-select: none;
}

.link-card[data-platform="email"] .link-card__icon {
    color: color-mix(in srgb, var(--accent) 55%, var(--text-muted));
    background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

.link-card[data-platform="email"]:hover .link-card__icon {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 18%, var(--surface-2));
    border-color: var(--accent);
}

.link-card[data-platform="email"]:hover {
    box-shadow: var(--shadow-lg), 0 0 24px rgba(240, 160, 48, 0.18);
}

.link-card__email {
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
    color: var(--accent);
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--dur-fast);
}

.link-card__email.is-copied {
    color: var(--success);
}

/* ---------- Empty state ---------- */
.link-empty {
    padding: var(--space-6) 0;
    font-size: var(--fs-base);
    color: var(--text-muted);
}