/* Розділ серверів: спільні токени й фон сторінки (DEV-361).

   Токени винесені зі single-server.css, а не продубльовані: картка архіву й
   хіро сторінки сервера — той самий візуальний словник. Двадцять змінних у двох
   файлах розійшлися б на першій правці палітри, і побачив би це дизайнер, а не
   тест.

   Блок перенесено дослівно. Зокрема `position: relative` НЕ додається на самі
   .single-server / .server-archive: тоді фон отримав би контейнером цей
   контейнер, а не initial containing block, і на сторінці сервера — уже
   випущеній — його ще й обрізав би .site-wrapper { overflow: hidden }. */
.single-server,
.server-archive {
    --srv-bg: #1b1b2c;
    --srv-card: #24253c;
    --srv-tag: #33354a;
    --srv-secondary: #42455f;
    --srv-row: rgba(27, 27, 44, 0.8);
    --srv-accent-light: #007cee;
    --srv-accent: #5f39cb;
    --srv-accent-hover: #5b3ee0;
    --srv-online: #0fdb72;
    --srv-text: #ffffff;
    --srv-text-body: #f6f9ff;
    --srv-muted: #8d8fac;
    --srv-gradient: linear-gradient(267.71deg, var(--srv-accent-light) -37.36%, var(--srv-accent) 98.08%);
    --srv-gradient-hover: linear-gradient(267.71deg, var(--srv-accent) -37.36%, var(--srv-accent-light) 98.08%);
    --srv-hairline: rgba(255, 255, 255, .06);
    --srv-padding-card: 16px;
    --srv-font-size-title: 32px;
    --srv-radius-card: 16px;
    --srv-radius-row: 12px;
    --srv-radius-thumb: 8px;
    --srv-radius-btn: 4px;
    --srv-radius-input: 4px;
    --srv-gap: 16px;

    color: var(--srv-text-body);
}

@media screen and (min-width: 960px) {
    .single-server,
    .server-archive {
        --srv-padding-card: 32px;
        --srv-font-size-title: 48px;
        --srv-radius-card: 24px;
        --srv-radius-row: 20px;
        --srv-radius-thumb: 12px;
        --srv-gap: 20px;
    }
}

.single-server .site-wrapper,
.server-archive .site-wrapper {
    position: relative;
}

.single-server__background,
.server-archive__background {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-bottom: 75%;
    background-image: url('../../img/server/single-bg.png');
    background-repeat: no-repeat;
}

/* Візуально прихований текст, доступний скрінрідеру.

   `screen-reader-text` — конвенція WordPress, але ЦЯ ТЕМА ЙОГО НЕ ОГОЛОШУЄ: у
   css/ немає жодного правила з цим класом, як і жодного sr-only чи
   visually-hidden. Без оголошення підписи «Search servers», «Previous page» і
   «Next page» просто ВИДНО, а в пагінації ще й поряд із гліфами ‹ › із
   .prev::before / .next::before.

   Оголошення живе тут, а не в глобальному style.css: файл підключається лише на
   сторінках розділу, тож правило не може ні на що вплинути поза ним.

   display: none і visibility: hidden тут НЕ ГОДЯТЬСЯ — вони прибирають вузол і
   з дерева доступності теж, тобто ховають текст саме від того, для кого його
   писали. Тому виведення за межі видимості через clip.

   white-space: nowrap обовʼязковий: у коробці 1x1 без нього частина скрінрідерів
   читає текст по одній літері в рядок.

   :focus-стану немає навмисно — жоден із трьох вузлів не фокусується (два лежать
   усередині <a>, один усередині <label>), тож правило було б мертвим. Скіп-лінк,
   якщо колись зʼявиться, однаково потребує власного z-index під шапку. */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px); /* легасі-фолбек для старих Safari */
    clip-path: inset(50%);
    white-space: nowrap;
}