/* ============================================
   /links — визитка со всеми сайтами и соцсетями.
   Открывают с телефона по QR-коду, поэтому колонка узкая и на десктопе.
   ============================================ */

*, *::before, *::after { box-sizing: border-box; }

.links-page {
    margin: 0;
    background: var(--plate);
    font-family: var(--font-main);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

.links {
    max-width: 440px;
    margin: 0 auto;
    padding: 16px 20px 48px;
}

/* Переключатель языка: обычный <select>, текст меняет CSS через
   :has(option:checked) — без скрипта. По умолчанию русский; остальные
   переводы лежат в разметке и скрыты. */
.links-lang {
    position: relative;
    display: flex;
    justify-content: flex-end;
    margin: 0 0 12px;
}

.links-lang__legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.links-lang select {
    appearance: none;
    min-height: 40px;
    padding: 0 34px 0 14px;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    font: 600 15px/1 var(--font-main);
    color: var(--ink);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.links-lang select:hover { background: var(--pill); }
.links-lang select:focus-visible { outline: 3px solid var(--primary-purple); outline-offset: 2px; }

/* Стрелка списка — уголок из рамки, цвет текста */
.links-lang::after {
    content: "";
    position: absolute;
    right: 15px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.tr:not([lang="ru"]) { display: none; }
.links-page:has(#links-lang option:checked:not([value="ru"])) .tr[lang="ru"] { display: none; }
.links-page:has(#links-lang option[value="kk"]:checked) .tr[lang="kk"],
.links-page:has(#links-lang option[value="ky"]:checked) .tr[lang="ky"],
.links-page:has(#links-lang option[value="en"]:checked) .tr[lang="en"],
.links-page:has(#links-lang option[value="fr"]:checked) .tr[lang="fr"] { display: inline; }

/* Карточка с фото и вырезом под логотип — язык выреза .china-notch с главной */
.links-cover {
    position: relative;
    aspect-ratio: 350 / 210;
    border-radius: var(--card-r);
    overflow: hidden;
    background: var(--bg-purple-muted);
}

.links-cover > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

.links-notch {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 22px 0 18px;
    background: var(--plate);
    border-radius: 0 var(--notch-r) 0 0;
}

.links-notch img {
    display: block;
    height: 26px;
    width: auto;
}

.links-head { padding: 24px 4px 8px; }

.links-head h1 {
    margin: 0;
    font: 800 32px/1.08 var(--font-main);
    letter-spacing: -0.02em;
    color: var(--ink-h1);
}

.links-head p {
    margin: 10px 0 0;
    font: 400 17px/1.5 var(--font-main);
    color: var(--ink-body);
}

.links-group { margin-top: 28px; }

.links-group h2 {
    margin: 0 4px 12px;
    font: 700 18px/1.3 var(--font-main);
    color: var(--ink);
}

.links-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.link-pill {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 64px;
    padding: 10px 20px 10px 10px;
    border-radius: var(--radius-full);
    background: var(--bg-white);
    color: var(--ink);
    text-decoration: none;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.link-pill__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--pill);
    color: var(--primary-purple);
    font-size: 20px;
}

/* Иконка сайта — та же, что во вкладке браузера */
.link-pill__icon img {
    display: block;
    width: 26px;
    height: 26px;
}

.link-pill__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.link-pill__label {
    font: 600 17px/1.25 var(--font-main);
    color: var(--ink);
}

.link-pill__value {
    font: 400 14px/1.3 var(--font-main);
    color: var(--ink-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Описание группы длиннее строки — переносим, а не режем многоточием. */
.link-pill__value--wrap { white-space: normal; }

.link-pill__go {
    flex: none;
    font-size: 16px;
    color: var(--ink-body);
    transition: transform var(--transition-fast);
}

.link-pill:hover { background: var(--pill); }
.link-pill:hover .link-pill__icon { background: var(--bg-white); }
.link-pill:hover .link-pill__go { transform: translateX(3px); color: var(--primary-purple); }
.link-pill:active { transform: scale(0.98); }
.link-pill:focus-visible { outline: 3px solid var(--primary-purple); outline-offset: 3px; }

/* Одна залитая кнопка — домашний сайт для аудитории в Казахстане */
.link-pill--main { background: var(--primary-purple); }
.link-pill--main .link-pill__icon { background: var(--bg-white); }
.link-pill--main .link-pill__label,
.link-pill--main .link-pill__value,
.link-pill--main .link-pill__go { color: var(--bg-white); }
.link-pill--main:hover { background: var(--primary-purple-hover); }
.link-pill--main:hover .link-pill__go { color: var(--bg-white); }

@media (min-width: 768px) {
    .links { max-width: 480px; padding-top: 48px; }
    .links-head h1 { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .link-pill,
    .link-pill__go { transition: none; }
    .link-pill:active { transform: none; }
}