/* ==========================================================================
   Server row (desktop listing card) — homepage + category pages
   --------------------------------------------------------------------------
   Replaces the old .server-item card, which stacked a full-width banner, a
   boxed four-line description, a badge row and a 50px button row: ~600px per
   server, so barely one server fit on a desktop screen. This is a ~155px row
   (rank | banner + name + two-line description | votes + actions), six per
   screen, on the same tokens as the rest of the site.

   Deliberately uses its own class names (.srv-*) so none of the legacy
   .server-item / .server-banner / .server-actions rules — spread across
   style.css and the inline blocks with heavy !important — can reach it.
   It shares no class with the old markup at all any more. It used to carry
   .desktop-server-card so that style.css could hide it under 768px and show
   a separate .mobile-server-card instead; that card is gone and this row now
   folds by itself (see the compact section at the bottom of this file).
   ========================================================================== */

.server-list:has(> .srv) { gap: 10px; }

.srv {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 156px;
    column-gap: 14px;
    align-items: start;
    padding: 12px 14px;
    background: rgba(10, 10, 15, 0.9);
    border: 1px solid rgba(0, 255, 255, 0.18);
    transition: border-color .18s, box-shadow .18s;
}
.srv:hover {
    border-color: rgba(0, 255, 255, 0.45);
    box-shadow: 0 0 22px rgba(0, 255, 255, 0.08);
}

/* Rank */
.srv-rank {
    font-family: var(--font-heading, 'Orbitron', sans-serif);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--primary-color, #00ffff);
    line-height: 1;
    padding-top: 6px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.srv-rank::before { content: "#"; font-size: .65em; opacity: .55; margin-right: 1px; }
.srv-rank.is-top { text-shadow: 0 0 10px rgba(0, 255, 255, 0.55); }

/* Main column: banner, name, description */
.srv-main { min-width: 0; display: flex; flex-direction: column; gap: 7px; }

.srv-banner-link { display: block; width: 100%; max-width: 468px; line-height: 0; }
.srv-banner {
    display: block;
    width: 100%;
    max-width: 468px;
    height: auto;
    aspect-ratio: 728 / 90;
    object-fit: cover;
    border: 1px solid rgba(0, 255, 255, 0.3);
    filter: brightness(.88);
    transition: filter .2s, border-color .2s;
}
.srv:hover .srv-banner { filter: brightness(1); border-color: rgba(0, 255, 255, 0.55); }

.srv-title {
    margin: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 1rem;
    line-height: 1.3;
}
.srv-name {
    font-family: var(--font-heading, 'Orbitron', sans-serif);
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.srv-name:hover { color: var(--primary-color, #00ffff); }
.srv-cat {
    font-family: var(--font-family, 'Rajdhani', sans-serif);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--primary-color, #00ffff);
    border: 1px solid rgba(0, 255, 255, 0.3);
    padding: 1px 7px;
    text-decoration: none;
    white-space: nowrap;
}
a.srv-cat:hover { background: rgba(0, 255, 255, 0.08); }

.srv-desc {
    margin: 0;
    font-size: .88rem;
    line-height: 1.45;
    color: #b8bcc8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Right rail: votes, meta, vote button, secondary links */
.srv-rail {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 14px;
    border-left: 1px solid rgba(0, 255, 255, 0.1);
    align-self: stretch;
}
.srv-votes { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.srv-votes-n {
    font-family: var(--font-heading, 'Orbitron', sans-serif);
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.srv-votes-l { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: #7c8594; }

.srv-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: .78rem;
    color: #9aa3b8;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.srv-meta a { color: inherit; text-decoration: none; }
.srv-meta a:hover { color: #ffffff; }
.srv-meta i { color: var(--primary-color, #00ffff); opacity: .85; font-size: .7rem; margin-right: 3px; }
.srv-meta small { color: #7c8594; margin-left: 2px; }

/* Vote: the primary action, so it has to outrank Details and the icon links -
   but a solid #00ffff fill made it the single brightest object on a very dark
   page, painful to look at down a list of ten. Every other button on the site
   is transparent with a cyan border, so this is the same language turned up:
   a translucent cyan pane with a lit top edge, reading as glass rather than a
   slab. Weight comes from the gradient and the border, not raw luminance. */
.srv-vote {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    margin-top: 2px;
    background: linear-gradient(180deg, rgba(0, 255, 255, .20) 0%, rgba(0, 255, 255, .07) 100%);
    border: 1px solid rgba(0, 255, 255, .45);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    backdrop-filter: blur(6px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
    color: #d4fbff;
    text-shadow: 0 0 9px rgba(0, 255, 255, .35);
    font-family: var(--font-heading, 'Orbitron', sans-serif);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    overflow: hidden;
    transition: background .18s, border-color .18s, box-shadow .18s, color .18s;
}
/* Sheen across the top half - the thing that sells it as glass */
.srv-vote::after {
    content: "";
    position: absolute;
    inset: 0 0 55% 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0));
    pointer-events: none;
}
.srv-vote:hover {
    background: linear-gradient(180deg, rgba(0, 255, 255, .34) 0%, rgba(0, 255, 255, .14) 100%);
    border-color: rgba(0, 255, 255, .8);
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 18px rgba(0, 255, 255, .22);
}
.srv-vote:focus-visible { outline: 2px solid #9ff; outline-offset: 2px; }

.srv-links { display: flex; flex-wrap: wrap; gap: 4px; }
/* With three or more icon links (site + Discord + Facebook) the row cannot fit
   the 142px rail, so give "Details" its own line and let the icons share the next. */
.srv-links:has(> a:nth-child(4)) > a:first-child { flex-basis: 100%; }
.srv-links a {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 28px;
    border: 1px solid rgba(0, 255, 255, 0.2);
    color: #cfd3dc;
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s, color .15s;
}
.srv-links a:hover { border-color: var(--primary-color, #00ffff); color: #ffffff; }
.srv-links a.srv-ico { flex: 1 0 30px; }
.srv-links a i { font-size: .75rem; }

/* Narrower main column (sidebar still visible, less room) */
@media (max-width: 1100px) {
    .srv { grid-template-columns: 40px minmax(0, 1fr) 140px; column-gap: 12px; }
    .srv-rail { padding-left: 12px; }
}

/* --------------------------------------------------------------------------
   Compact row — phones and small tablets
   --------------------------------------------------------------------------
   Under 768px the old rule hid this row and swapped in a separate
   .mobile-server-card: a different design that had no Vote button at all and
   linked the server name straight to the owner's website instead of the
   detail page. The list looked like one site on a desk and another on a
   phone, and the one action the list exists for was missing on the device
   most players hold.

   Below 640px the same row folds instead. Rank and content stay side by side
   as they do on a desk; the right rail becomes a footer strip with votes and
   rating on the left, the Vote button on the right, and Details plus the
   icon links on a second line. Same elements, same tokens, less width.

   The sidebar is already hidden from 900px down (header.php), so between 640
   and 900 the three-column row has the whole viewport to itself and simply
   keeps the narrowed layout above. A tablet in portrait (768) lands there.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .srv {
        grid-template-columns: 34px minmax(0, 1fr);
        grid-template-areas:
            "rank main"
            "rail rail";
        column-gap: 10px;
        row-gap: 10px;
        padding: 10px 12px 12px;
    }
    .srv-rank { grid-area: rank; font-size: 1rem; padding-top: 3px; }
    .srv-main { grid-area: main; gap: 6px; }
    /* The banner may use the full content width here; 468px is a desktop cap. */
    .srv-banner-link, .srv-banner { max-width: none; }
    .srv-title { font-size: .95rem; gap: 3px 8px; }
    .srv-cat { font-size: .66rem; padding: 1px 6px; }
    .srv-desc { font-size: .84rem; line-height: 1.4; }

    .srv-rail {
        grid-area: rail;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "votes meta  vote"
            "links links links";
        align-items: center;
        gap: 8px 12px;
        padding: 10px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(0, 255, 255, 0.1);
        align-self: auto;
    }
    .srv-votes { grid-area: votes; justify-content: flex-start; gap: 5px; }
    .srv-votes-n { font-size: 1.2rem; }
    /* min-width:0 + overflow so a wide number can never shove Vote off the row */
    .srv-meta { grid-area: meta; justify-content: flex-start; gap: 12px; min-width: 0; overflow: hidden; }
    /* Thumb-sized: 40px tall, and wide enough to hit without aiming */
    .srv-vote { grid-area: vote; height: 40px; min-width: 104px; padding: 0 18px; margin-top: 0; }

    .srv-links { grid-area: links; gap: 6px; }
    /* One line: Details takes the room, each icon gets a fixed thumb-sized
       box. Overrides the desktop rule that pushes Details onto its own line
       once there are three icons - there is width for all of them here. */
    .srv-links:has(> a:nth-child(4)) > a:first-child { flex-basis: auto; }
    .srv-links a { height: 36px; font-size: .8rem; }
    .srv-links a.srv-ico { flex: 0 0 44px; }
}

/* The narrowest phones: shave the padding rather than the content */
@media (max-width: 380px) {
    .srv { padding: 8px 10px 10px; column-gap: 8px; }
    .srv-rail { gap: 8px; }
    .srv-meta { gap: 8px; font-size: .74rem; }
    .srv-vote { min-width: 92px; padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .srv, .srv-banner, .srv-vote, .srv-links a { transition: none; }
}