/* =========================================================
   SDILENE KARTY DESTINACI
   Jediny autoritativni vzhled pro karty kontinentu a zemi.
   Pouziva se na homepage i na detailu kontinentu.
   ========================================================= */

.continent-card,
.home-country-card {
    flex: 0 0 max(288px, calc((125% - 135px) / 7)) !important;
    max-width: none !important;
    min-width: 0;
    scroll-snap-align: start;
}

.continent-card-link,
.home-country-card-link {
    display: block;
    color: #fff;
    text-decoration: none;
}

.continent-card-image,
.home-country-card-image {
    position: relative;
    aspect-ratio: 4 / 5 !important;
    overflow: hidden;
    border-radius: 0 !important;
    background: #191919;
}

.continent-card-image img,
.home-country-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
    /*
     * Stejný náznak kvalitnějšího downscalu jako u .travel-card-image img
     * (home-hero-slider.css) a .destination-country-trip-image img
     * (style.css) - tyhle dvě karty ho měly, tahle ne, bez zjevného
     * důvodu. Sjednoceno pro konzistenci; není to garance zmizení
     * veškerého rozostření (viz komentáře u těch dvou selektorů), jen
     * srovnání s tím, co už jinde na webu je.
     */
    image-rendering: -webkit-optimize-contrast;
    transform: translateZ(0);
}

.continent-card-gradient,
.home-country-card-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        0deg,
        rgba(0,0,0,.72) 0%,
        rgba(0,0,0,.10) 55%,
        transparent 75%
    );
}

.continent-card-content,
.home-country-card-content {
    position: absolute;
    z-index: 2;
    left: 25px;
    right: 25px;
    bottom: 24px;
}

/*
 * Grafické hvězdičky kategorie hotelu na kartě "Vybrané hotely"
 * (homepage) - stejný roh/odsazení jako .home-country-card-count
 * (počet cest u karty země, style.css), jen vlevo místo vpravo, ať
 * nekoliduje. Velikost (font-size) řeší assets/css/hotel-stars.css.
 */
.home-hotel-card-stars {
    position: absolute;
    z-index: 2;
    top: 16px;
    left: 18px;
}

.continent-card-content h3,
.home-country-card-content h3 {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(25px, 2.3vw, 36px) !important;
    font-weight: 700;
    line-height: 1 !important;
    letter-spacing: -.025em !important;
}

.continent-card .continent-card-countries,
.home-country-card .continent-card-countries {
    max-width: 100%;
    margin: 10px 0 0;
    color: rgba(255,255,255,.74);
    font-size: clamp(13px, .95vw, 16px);
    font-weight: 400;
    line-height: 1.42;
    letter-spacing: 0;
}

.home-country-card-intro {
    min-height: 2.84em;
}

.home-country-card-all .home-country-card-gradient {
    background: linear-gradient(
        0deg,
        rgba(0,0,0,.82) 0%,
        rgba(0,0,0,.22) 60%,
        rgba(0,0,0,.04) 100%
    );
}

.home-country-card-all .home-country-card-content::after {
    content: "";
    display: block;
    min-height: 2.84em;
    margin-top: 10px;
}

@media (hover: hover) and (pointer: fine) {
    .continent-card:hover .continent-card-image img,
    .continent-card:focus-within .continent-card-image img,
    .home-country-card:hover .home-country-card-image img,
    .home-country-card:focus-within .home-country-card-image img {
        /* translateZ(0) tu zůstává i při hoveru, jinak by ho scale(1.04) přebilo - stejný vzorec jako .destination-country-trip-card-portrait:hover img. */
        transform: translateZ(0) scale(1.04);
    }
}

@media (max-width: 760px) {
    .continent-card,
    .home-country-card {
        flex: 0 0 68vw !important;
        max-width: none !important;
    }

    .continent-card-content,
    .home-country-card-content {
        left: 15px;
        right: 15px;
        bottom: 14px;
    }

    .continent-card-content h3,
    .home-country-card-content h3 {
        font-size: 25px !important;
    }

    .continent-card .continent-card-countries,
    .home-country-card .continent-card-countries {
        margin-top: 8px;
        font-size: 13px;
        line-height: 1.35;
    }

    .home-country-card-intro,
    .home-country-card-all .home-country-card-content::after {
        min-height: 2.7em;
    }

    .home-country-card-all .home-country-card-content::after {
        margin-top: 8px;
    }
}