/* ==========================================================================
   VNDEL polish layer (2026-10-25) - loaded after vn-design.css.
   Readability, consistent game logos, compact mobile cards.
   Remove the <link> to this file in includes/common/overwrites/seo.tpl to disable.
   ========================================================================== */

/* ---------- Readability of the small text on package cards ---------- */
.lagom-dark-mode body.lagom .package .package-content {
    color: rgba(226, 231, 255, .84);
    font-size: .96rem;
    line-height: 1.6;
}
.lagom-dark-mode body.lagom .package .package-actions .btn-link,
.lagom-dark-mode body.lagom .package .package-actions .btn-link .btn-text,
.lagom-dark-mode body.lagom .package .package-actions .btn-link .btn-price {
    color: #b4bbff;
    font-size: .96rem;
    font-weight: 600;
}
.lagom-dark-mode body.lagom .package:hover .package-actions .btn-link,
.lagom-dark-mode body.lagom .package:hover .package-actions .btn-link .btn-text,
.lagom-dark-mode body.lagom .package:hover .package-actions .btn-link .btn-price { color: #d3d7ff; }

/* card titles: "dedicated servers" / "license" came through in lower case */
body.lagom .package-title { text-transform: capitalize; }

/* section pills (AVAILABLE HOSTING SERVICES ...) were too small to read */
body.lagom .banner-caption,
body.lagom .section-caption { font-size: .84rem; }

/* hero text on dark: a bit more contrast for the sub headline */
.lagom-dark-mode body.lagom .banner-subtitle { opacity: .96; }

/* ---------- Game server logos: one frame, one size ---------- */
body.lagom .package-graphic.package-media {
    display: flex;
    align-items: center;
    justify-content: center;
}
.site-section:has(#game-servers) .package-graphic.package-media {
    height: 150px;
    margin-bottom: 6px;
}
.site-section:has(#game-servers) .package-graphic.package-media img {
    width: 132px;
    height: 132px;
    max-width: 132px;
    object-fit: contain;
    padding: 14px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .8);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.lagom-dark-mode .site-section:has(#game-servers) .package-link:hover .package-graphic.package-media img {
    transform: translateY(-3px) scale(1.04);
    border-color: rgba(129, 140, 248, .55);
    box-shadow: 0 18px 36px -16px rgba(99, 102, 241, .6);
}

/* ---------- Mobile: two compact columns for the game cards ---------- */
@media (max-width: 575.98px) {
    .site-section:has(#game-servers) .row-packages-6 > .package-col {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .site-section:has(#game-servers) .package-graphic.package-media { height: 108px; }
    .site-section:has(#game-servers) .package-graphic.package-media img {
        width: 92px;
        height: 92px;
        max-width: 92px;
        padding: 10px;
        border-radius: 18px;
    }
    .site-section:has(#game-servers) .package .package-title { font-size: 1rem; }
    /* two narrow columns: keep the title and the price only */
    .site-section:has(#game-servers) .package .package-body { display: none; }
    .site-section:has(#game-servers) .package .package-actions .btn-link { justify-content: center; padding-left: 0; padding-right: 0; }
    .site-section:has(#game-servers) .package .package-actions .btn-link .btn-icon { display: none; }
    .site-section:has(#game-servers) .package .package-actions .btn-link .btn-text { font-size: 0; text-align: center; }
    .site-section:has(#game-servers) .package .package-actions .btn-link .btn-price { font-size: .84rem; white-space: nowrap; }
    /* the illustrated card (license) must stay inside its half-width column */
    .site-section:has(#game-servers) .package-graphic.package-illustration {
        height: 108px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .site-section:has(#game-servers) .package-graphic.package-illustration svg { width: 100%; height: 100%; }
    body.lagom .banner-caption { font-size: .74rem; padding: 6px 12px; }
}

/* ---------- Footer links: slightly easier to read ---------- */
.lagom-dark-mode body.lagom .footer a { opacity: .92; }
.lagom-dark-mode body.lagom .footer a:hover { opacity: 1; }