/* Homepage-only atmosphere. Loaded by templates/index.html. */
:root {
    --home-surface-white: #fff;
    --home-surface-mist: #eef6f8;
    --home-surface-sky: #edf4fa;
    --home-surface-aqua: #e8f7f6;
    --home-divider: rgba(33, 91, 113, 0.16);
}

body {
    background:
        radial-gradient(circle at 8% 18%, rgba(46, 184, 199, 0.13), transparent 25rem),
        radial-gradient(circle at 94% 42%, rgba(45, 116, 214, 0.11), transparent 31rem),
        linear-gradient(180deg, #eef6f8 0%, #f2f7fa 50%, #eef6f8 100%);
}

main {
    overflow-x: clip;
    background:
        radial-gradient(circle at 2% 29%, rgba(19, 184, 173, 0.08), transparent 26rem),
        radial-gradient(circle at 98% 70%, rgba(39, 111, 207, 0.075), transparent 29rem),
        #eef6f8;
}

.homepage-band {
    position: relative;
    isolation: isolate;
    background: transparent;
}

.homepage-band::before {
    position: absolute;
    z-index: -3;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    border-top: 1px solid var(--home-divider);
    border-bottom: 1px solid rgba(255, 255, 255, 0.88);
    background: var(--home-band-background, var(--home-surface-white));
    content: "";
    pointer-events: none;
}

.homepage-band--white {
    --home-band-background:
        radial-gradient(circle at 88% 18%, rgba(41, 141, 210, 0.035), transparent 23rem),
        linear-gradient(180deg, #fff 0%, #fdfefe 100%);
}

.homepage-band--mist {
    --home-band-background:
        radial-gradient(circle at 12% 16%, rgba(19, 184, 173, 0.11), transparent 25rem),
        linear-gradient(135deg, #eaf4f7 0%, var(--home-surface-mist) 56%, #edf5f9 100%);
}

.homepage-band--sky {
    --home-band-background:
        radial-gradient(circle at 91% 30%, rgba(45, 116, 214, 0.13), transparent 28rem),
        linear-gradient(135deg, #edf4fa 0%, #f1f6fb 52%, #eaf3f9 100%);
}

.homepage-band--aqua {
    --home-band-background:
        radial-gradient(circle at 7% 72%, rgba(19, 184, 173, 0.14), transparent 26rem),
        linear-gradient(135deg, #e8f7f6 0%, #edf9f8 52%, #e5f5f4 100%);
}

.homepage-preview-section.homepage-band--sky::after,
.homepage-preview-section.homepage-band--aqua::after {
    position: absolute;
    z-index: -2;
    width: min(34vw, 430px);
    aspect-ratio: 1;
    border: 1px solid rgba(21, 119, 151, 0.075);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.homepage-preview-section.homepage-band--sky::after {
    top: -30%;
    right: -15%;
    background: radial-gradient(circle, rgba(45, 116, 214, 0.09) 0 18%, rgba(45, 116, 214, 0.035) 42%, transparent 70%);
}

.homepage-preview-section.homepage-band--aqua::after {
    bottom: -36%;
    left: -13%;
    background: radial-gradient(circle, rgba(19, 184, 173, 0.1) 0 18%, rgba(19, 184, 173, 0.04) 43%, transparent 70%);
}

.homepage-clean-hero + .ad-home-section::before {
    background:
        radial-gradient(circle at 12% 0%, rgba(19, 184, 173, 0.12), transparent 25rem),
        linear-gradient(180deg, #e4eff4 0%, #eef6f8 42%, #f0f7f9 100%);
}

.ad-home-section {
    position: relative;
}

.ad-home-section::after {
    position: absolute;
    z-index: -1;
    inset: 12px -12px 6px;
    border: 1px solid rgba(35, 92, 112, 0.17);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 16px 40px rgba(15, 52, 70, 0.09);
    content: "";
    pointer-events: none;
}

.homepage-map-section {
    overflow: visible;
}

.homepage-map-section > :not(.homepage-map-motif) {
    position: relative;
    z-index: 1;
}

.homepage-map-motif {
    position: absolute;
    z-index: 0;
    top: 22px;
    right: max(-18px, calc((100vw - 1280px) / -2));
    width: min(48vw, 660px);
    aspect-ratio: 760 / 420;
    background: url("../img/homepage/czech-network-outline.svg") center / contain no-repeat;
    opacity: 0.1;
    pointer-events: none;
    user-select: none;
}

.homepage-band .homepage-quick-tile,
.homepage-band .content-card:not(.is-promotion-active) {
    border-color: rgba(29, 78, 98, 0.18);
    box-shadow: 0 11px 28px rgba(10, 43, 59, 0.1);
}

.homepage-band .homepage-quick-tile:hover,
.homepage-band .content-card:not(.is-promotion-active):hover {
    border-color: rgba(19, 151, 153, 0.42);
    box-shadow: 0 15px 34px rgba(10, 43, 59, 0.14);
}

.homepage-band :is(a, button, input):focus-visible {
    outline-color: #087f8c;
    outline-offset: 3px;
}

@media (max-width: 900px) {
    .homepage-map-motif {
        right: -44px;
        width: min(60vw, 450px);
        opacity: 0.075;
    }

    .ad-home-section::after {
        right: 0;
        left: 0;
    }
}

@media (max-width: 640px) {
    body,
    main {
        background: #eef6f8;
    }

    .homepage-band::before {
        border-top-color: rgba(33, 91, 113, 0.13);
        background: var(--home-band-mobile-background, #eef6f8);
    }

    .homepage-band--white {
        --home-band-mobile-background: #fff;
    }

    .homepage-band--mist,
    .homepage-band--sky {
        --home-band-mobile-background: linear-gradient(180deg, #edf4fa, #f1f6fb);
    }

    .homepage-band--aqua {
        --home-band-mobile-background: linear-gradient(180deg, #e8f7f6, #edf9f8);
    }

    .homepage-map-motif {
        display: block;
        top: 14px;
        right: 0;
        width: min(300px, 88vw);
        opacity: 0.05;
    }

    .ad-home-section::after {
        inset: 10px 0 4px;
        border-radius: 14px;
        box-shadow: 0 9px 24px rgba(15, 52, 70, 0.08);
    }

    .homepage-band .homepage-quick-tile,
    .homepage-band .content-card:not(.is-promotion-active) {
        box-shadow: 0 7px 20px rgba(10, 43, 59, 0.085);
    }

    .homepage-preview-section.homepage-band--sky::after,
    .homepage-preview-section.homepage-band--aqua::after {
        width: 240px;
        opacity: 0.7;
    }
}

@media (prefers-reduced-motion: reduce) {
    .homepage-map-motif {
        animation: none;
        transition: none;
    }
}