/* Route-map home screen: theme-specific artwork and compact advantage buttons. */

/*
 * Keep service-specific backgrounds controlled by asva-services-switcher.js.
 * The route artwork is applied only while the home screen has no active
 * service/detail class (all of those classes begin with "is-asva-").
 */
html[data-asva-theme="dark"] .asva-home-page .asva-home-screen:not([class*="is-asva-"]) {
    background-color: #061523 !important;
    background-image: none !important;
}

html[data-asva-theme="light"] .asva-home-page .asva-home-screen:not([class*="is-asva-"]) {
    background-color: #e8f0f7 !important;
    background-image: none !important;
}

/*
 * Fit the complete 16:9 map inside the genuinely visible desktop area.
 * This prevents Moscow from moving behind the header on short displays and
 * keeps Europe to the right of the services rail at every aspect ratio.
 */
@media (min-width: 821px) {
    html[data-asva-theme="dark"] .asva-home-page .asva-home-screen:not([class*="is-asva-"])::before,
    html[data-asva-theme="light"] .asva-home-page .asva-home-screen:not([class*="is-asva-"])::before {
        position: fixed;
        top: calc(var(--asva-header-height) + 8px);
        right: 12px;
        bottom: calc(var(--asva-footer-height) + 8px);
        left: calc(var(--asva-sidebar-width) + 12px);
        z-index: 0;
        content: "";
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        pointer-events: none;
    }

    html[data-asva-theme="dark"] .asva-home-page .asva-home-screen:not([class*="is-asva-"])::before {
        background-color: #061523 !important;
        background-image: url('/assets/asvalogistic/asva-routes-moscow-central-asia-dark.webp?v=1') !important;
    }

    html[data-asva-theme="light"] .asva-home-page .asva-home-screen:not([class*="is-asva-"])::before {
        background-color: #e8f0f7 !important;
        background-image: url('/assets/asvalogistic/asva-routes-moscow-central-asia-light.webp?v=1') !important;
    }

    html[data-asva-theme="dark"] .asva-home-page .asva-home-screen.asva-sidebar-collapsed:not([class*="is-asva-"])::before,
    html[data-asva-theme="light"] .asva-home-page .asva-home-screen.asva-sidebar-collapsed:not([class*="is-asva-"])::before {
        left: calc(var(--asva-sidebar-collapsed-width) + 12px);
    }
}

html[data-asva-theme="dark"] .asva-home-page .asva-home-screen:not([class*="is-asva-"]) .asva-home-screen__shade {
    background:
        linear-gradient(180deg, rgba(2, 11, 20, .17) 0%, transparent 24%, transparent 70%, rgba(2, 11, 20, .20) 100%);
}

html[data-asva-theme="light"] .asva-home-page .asva-home-screen:not([class*="is-asva-"]) .asva-home-screen__shade {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .08) 0%, transparent 24%, transparent 72%, rgba(211, 224, 236, .12) 100%);
}

/* The prepared light map already contains its own illumination. */
html[data-asva-theme="light"] .asva-home-page .asva-home-screen:not([class*="is-asva-"])::after {
    opacity: .16;
}

/* Desktop and tablet: six advantages become compact named buttons below the routes. */
@media (min-width: 821px) {
    .asva-home-page .asva-center-cards:not(.is-asva-service-mode),
    .asva-home-page .asva-sidebar-collapsed .asva-center-cards:not(.is-asva-service-mode) {
        position: fixed !important;
        top: auto !important;
        right: calc(var(--asva-sidebar-collapsed-width) + clamp(24px, 3vw, 54px)) !important;
        bottom: calc(var(--asva-footer-height) + clamp(18px, 2.7vh, 34px)) !important;
        left: calc(var(--asva-sidebar-width) + clamp(24px, 3vw, 54px)) !important;
        z-index: 25;
        display: grid !important;
        width: auto !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        grid-template-columns: repeat(3, minmax(170px, 300px)) !important;
        grid-auto-rows: minmax(58px, auto) !important;
        justify-content: center;
        gap: 10px 12px !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
        scrollbar-width: none;
        transition: left .26s ease;
    }

    .asva-home-page .asva-sidebar-collapsed .asva-center-cards:not(.is-asva-service-mode) {
        left: calc(var(--asva-sidebar-collapsed-width) + clamp(24px, 3vw, 54px)) !important;
    }

    .asva-home-page .asva-center-cards:not(.is-asva-service-mode) .asva-center-card.asva-feature-card {
        isolation: isolate;
        display: flex !important;
        width: 100%;
        min-width: 0;
        min-height: 58px !important;
        height: auto !important;
        aspect-ratio: auto !important;
        padding: 0 !important;
        align-items: stretch;
        overflow: hidden !important;
        border: 1px solid rgba(139, 181, 212, .58) !important;
        border-radius: 9px !important;
        color: #fff !important;
        background:
            linear-gradient(135deg, rgba(20, 48, 72, .94), rgba(7, 25, 42, .92)) !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, .30) !important;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        text-decoration: none !important;
        transform: translateZ(0);
        transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }

    .asva-home-page .asva-center-cards:not(.is-asva-service-mode) .asva-feature-card::before {
        z-index: 0;
        background:
            radial-gradient(circle at 100% 0, rgba(255, 255, 255, .10), transparent 47%),
            linear-gradient(110deg, rgba(255, 255, 255, .04), transparent 42%);
        opacity: 1;
    }

    .asva-home-page .asva-center-cards:not(.is-asva-service-mode) .asva-feature-card::after {
        z-index: 3;
        top: auto !important;
        right: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 58px;
        height: 3px;
        border-radius: 0 3px 0 0;
        background: var(--asva-brand-gold);
    }

    .asva-home-page .asva-center-cards:not(.is-asva-service-mode) .asva-feature-card__number,
    .asva-home-page .asva-center-cards:not(.is-asva-service-mode) .asva-feature-card__icon,
    .asva-home-page .asva-center-cards:not(.is-asva-service-mode) .asva-feature-card__content p,
    .asva-home-page .asva-center-cards:not(.is-asva-service-mode) .asva-feature-card__art,
    .asva-home-page .asva-center-cards:not(.is-asva-service-mode) .asva-feature-card__more {
        display: none !important;
    }

    .asva-home-page .asva-center-cards:not(.is-asva-service-mode) .asva-feature-card__content {
        position: relative;
        z-index: 2;
        display: flex;
        width: 100%;
        min-height: 58px;
        padding: 10px 16px !important;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        transform: none !important;
    }

    .asva-home-page .asva-center-cards:not(.is-asva-service-mode) .asva-feature-card__content h2 {
        margin: 0 !important;
        color: #fff !important;
        font-family: Verdana, Geneva, sans-serif !important;
        font-size: clamp(12px, .82vw, 15px) !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: center;
        text-wrap: balance;
        text-shadow: 0 1px 2px rgba(0, 0, 0, .34) !important;
    }

    .asva-home-page .asva-center-cards:not(.is-asva-service-mode) .asva-center-card.asva-feature-card:hover,
    .asva-home-page .asva-center-cards:not(.is-asva-service-mode) .asva-center-card.asva-feature-card:focus-visible {
        border-color: var(--asva-brand-gold) !important;
        background:
            radial-gradient(circle at 100% 0, rgba(242, 183, 45, .16), transparent 46%),
            linear-gradient(135deg, rgba(27, 60, 86, .97), rgba(8, 28, 47, .96)) !important;
        box-shadow: 0 15px 34px rgba(0, 0, 0, .36), 0 0 0 2px rgba(242, 183, 45, .12) !important;
        transform: translateY(-3px);
    }

    .asva-home-page .asva-center-cards:not(.is-asva-service-mode) .asva-center-card.asva-feature-card:focus-visible {
        outline: 2px solid var(--asva-brand-gold);
        outline-offset: 3px;
    }

    html[data-asva-theme="light"] .asva-home-page .asva-center-cards:not(.is-asva-service-mode) .asva-center-card.asva-feature-card {
        border-color: rgba(28, 67, 111, .28) !important;
        color: #082d59 !important;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(231, 240, 248, .92)) !important;
        box-shadow: 0 11px 25px rgba(29, 64, 101, .18) !important;
    }

    html[data-asva-theme="light"] .asva-home-page .asva-center-cards:not(.is-asva-service-mode) .asva-feature-card::before {
        background:
            radial-gradient(circle at 100% 0, rgba(255, 255, 255, .92), transparent 47%),
            linear-gradient(110deg, rgba(255, 255, 255, .34), transparent 45%);
        opacity: 1;
    }

    html[data-asva-theme="light"] .asva-home-page .asva-center-cards:not(.is-asva-service-mode) .asva-feature-card__content h2 {
        color: #082d59 !important;
        text-shadow: none !important;
    }

    html[data-asva-theme="light"] .asva-home-page .asva-center-cards:not(.is-asva-service-mode) .asva-center-card.asva-feature-card:hover,
    html[data-asva-theme="light"] .asva-home-page .asva-center-cards:not(.is-asva-service-mode) .asva-center-card.asva-feature-card:focus-visible {
        border-color: #d99e18 !important;
        background:
            radial-gradient(circle at 100% 0, rgba(255, 235, 172, .48), transparent 48%),
            linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(237, 244, 250, .97)) !important;
        box-shadow: 0 15px 31px rgba(29, 64, 101, .24), 0 0 0 2px rgba(217, 158, 24, .10) !important;
    }
}

/* Medium screens have less horizontal space beside the services rail. */
@media (min-width: 821px) and (max-width: 1180px) {
    .asva-home-page .asva-center-cards:not(.is-asva-service-mode),
    .asva-home-page .asva-sidebar-collapsed .asva-center-cards:not(.is-asva-service-mode) {
        grid-template-columns: repeat(2, minmax(190px, 290px)) !important;
        grid-auto-rows: minmax(54px, auto) !important;
        gap: 9px 10px !important;
    }

    .asva-home-page .asva-center-cards:not(.is-asva-service-mode) .asva-center-card.asva-feature-card,
    .asva-home-page .asva-center-cards:not(.is-asva-service-mode) .asva-feature-card__content {
        min-height: 54px !important;
    }

    .asva-home-page .asva-center-cards:not(.is-asva-service-mode) .asva-feature-card__content h2 {
        font-size: 12px !important;
    }
}

@media (min-width: 821px) and (max-height: 720px) {
    .asva-home-page .asva-center-cards:not(.is-asva-service-mode),
    .asva-home-page .asva-sidebar-collapsed .asva-center-cards:not(.is-asva-service-mode) {
        bottom: calc(var(--asva-footer-height) + 12px) !important;
        grid-auto-rows: minmax(48px, auto) !important;
        gap: 7px 10px !important;
    }

    .asva-home-page .asva-center-cards:not(.is-asva-service-mode) .asva-center-card.asva-feature-card,
    .asva-home-page .asva-center-cards:not(.is-asva-service-mode) .asva-feature-card__content {
        min-height: 48px !important;
    }

    .asva-home-page .asva-center-cards:not(.is-asva-service-mode) .asva-feature-card__content {
        padding: 7px 13px !important;
    }
}

/*
 * Mobile only: show the route map immediately below the header and keep all
 * eight services visible in a two-column yellow grid. Desktop stays untouched.
 */
@media (max-width: 820px) {
    .asva-home-page .asva-home-screen:not([class*="is-asva-"]) {
        padding:
            calc(var(--asva-header-height) + 4px)
            6px
            calc(var(--asva-footer-height) + 4px) !important;
    }

    /* The map now lives in the normal mobile flow, so no centring void remains. */
    html[data-asva-theme="dark"] .asva-home-page .asva-home-screen:not([class*="is-asva-"])::before,
    html[data-asva-theme="light"] .asva-home-page .asva-home-screen:not([class*="is-asva-"])::before {
        display: none !important;
    }

    .asva-home-page .asva-mobile-services {
        position: relative !important;
        inset: auto !important;
        z-index: 25;
        display: grid !important;
        width: 100% !important;
        max-width: none !important;
        height: calc(100vh - var(--asva-header-height) - var(--asva-footer-height) - 8px);
        height: calc(100dvh - var(--asva-header-height) - var(--asva-footer-height) - 8px);
        min-height: 0;
        margin: 0 !important;
        padding: 0 !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto minmax(0, 1fr);
        grid-auto-flow: row !important;
        align-content: start;
        gap: 6px;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
        box-sizing: border-box;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .asva-home-page .asva-mobile-services::before {
        display: block;
        width: 100%;
        min-height: 0;
        aspect-ratio: 16 / 9;
        grid-column: 1;
        grid-row: 1;
        border: 1px solid rgba(126, 178, 216, .30);
        border-radius: 8px;
        content: "";
        background-position: center top;
        background-repeat: no-repeat;
        background-size: contain;
        box-sizing: border-box;
    }

    html[data-asva-theme="dark"] .asva-home-page .asva-mobile-services::before {
        background-color: #061523;
        background-image: url('/assets/asvalogistic/asva-routes-moscow-central-asia-dark.webp?v=1');
    }

    html[data-asva-theme="light"] .asva-home-page .asva-mobile-services::before {
        border-color: rgba(35, 78, 119, .22);
        background-color: #e8f0f7;
        background-image: url('/assets/asvalogistic/asva-routes-moscow-central-asia-light.webp?v=1');
    }

    .asva-home-page .asva-mobile-services__list {
        display: grid !important;
        width: 100%;
        height: 100%;
        min-height: 0;
        margin: 0 !important;
        padding: 0 !important;
        grid-column: 1;
        grid-row: 2;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(4, minmax(30px, 76px));
        grid-auto-flow: row;
        align-content: start;
        gap: 6px !important;
        overflow: visible !important;
    }

    .asva-home-page .asva-mobile-services__list a {
        position: relative;
        display: grid !important;
        min-width: 0;
        min-height: 30px !important;
        height: 100% !important;
        padding: 5px 7px !important;
        grid-template-columns: 24px minmax(0, 1fr) 14px;
        align-items: center;
        align-content: center;
        gap: 5px !important;
        overflow: hidden;
        border: 1px solid #ffd367 !important;
        border-radius: 9px !important;
        color: #082d59 !important;
        background:
            radial-gradient(circle at 100% 0, rgba(255, 255, 255, .34), transparent 44%),
            linear-gradient(135deg, #ffc63f, #edae1c) !important;
        box-shadow: 0 5px 13px rgba(0, 0, 0, .20) !important;
        text-decoration: none !important;
        box-sizing: border-box;
        transform: translateZ(0);
        transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
    }

    .asva-home-page .asva-mobile-services__list a::before {
        top: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 3px !important;
        height: auto !important;
        border-radius: 0 3px 3px 0 !important;
        background: #0b3768 !important;
    }

    .asva-home-page .asva-mobile-services__list a span {
        position: static;
        display: inline-flex;
        width: 22px;
        height: 22px;
        margin: 0 !important;
        grid-column: 1;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(8, 45, 89, .30);
        border-radius: 50%;
        color: #082d59 !important;
        background: rgba(255, 255, 255, .18);
        font-family: Verdana, Geneva, sans-serif;
        font-size: 8px !important;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .04em;
    }

    .asva-home-page .asva-mobile-services__list a strong {
        grid-column: 2;
        min-width: 0;
        color: #082d59 !important;
        font-family: Verdana, Geneva, sans-serif;
        font-size: clamp(9px, 2.55vw, 11px) !important;
        font-weight: 700;
        line-height: 1.18;
        overflow-wrap: anywhere;
    }

    .asva-home-page .asva-mobile-services__list a b {
        position: static !important;
        grid-column: 3;
        justify-self: end;
        color: #082d59 !important;
        font-size: 14px !important;
        font-weight: 700;
        line-height: 1;
    }

    .asva-home-page .asva-mobile-services__list a:hover,
    .asva-home-page .asva-mobile-services__list a:focus-visible,
    .asva-home-page .asva-mobile-services__list a.is-asva-active-service {
        border-color: #fff0b2 !important;
        background:
            radial-gradient(circle at 100% 0, rgba(255, 255, 255, .46), transparent 45%),
            linear-gradient(135deg, #ffd15b, #f0b01b) !important;
        box-shadow: 0 7px 17px rgba(0, 0, 0, .25), 0 0 0 2px rgba(242, 183, 45, .16) !important;
        filter: saturate(1.05);
        outline: none;
        transform: translateY(-1px);
    }

    .asva-home-page .asva-mobile-services__list a:active {
        transform: translateY(0) scale(.99);
    }

    html[data-asva-theme="light"] .asva-home-page .asva-mobile-services__list a {
        border-color: #dca119 !important;
        background:
            radial-gradient(circle at 100% 0, rgba(255, 255, 255, .44), transparent 44%),
            linear-gradient(135deg, #f8c64c, #e3a51d) !important;
        box-shadow: 0 5px 13px rgba(31, 64, 96, .20) !important;
    }

    html[data-asva-theme="light"] .asva-home-page .asva-mobile-services__list a:hover,
    html[data-asva-theme="light"] .asva-home-page .asva-mobile-services__list a:focus-visible,
    html[data-asva-theme="light"] .asva-home-page .asva-mobile-services__list a.is-asva-active-service {
        border-color: #b87b00 !important;
        background:
            radial-gradient(circle at 100% 0, rgba(255, 255, 255, .54), transparent 45%),
            linear-gradient(135deg, #ffd15c, #eab020) !important;
        box-shadow: 0 7px 17px rgba(31, 64, 96, .24), 0 0 0 2px rgba(184, 123, 0, .10) !important;
    }
}

/* Keep the complete map and all four button rows visible on short phones. */
@media (max-width: 820px) and (max-height: 700px) {
    .asva-home-page .asva-mobile-services::before {
        max-height: max(
            90px,
            calc(100dvh - var(--asva-header-height) - var(--asva-footer-height) - 154px)
        );
    }

    .asva-home-page .asva-mobile-services__list {
        grid-template-rows: repeat(4, minmax(30px, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .asva-home-page .asva-center-cards:not(.is-asva-service-mode) .asva-center-card.asva-feature-card {
        transition: none !important;
    }
}

@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
    .asva-home-page .asva-mobile-services__list a {
        transition: none !important;
    }
}