/* ============================================================
   KASINOARVOSTELUN HERO-OSIO + PIKAFAKTAT + STICKY CTA
   Premium-tyylinen versio: hienovarainen taustahehku, kehystetty
   logo, selkeä hierarkia. Sama väripaletti kuin kasinolistalla.
   ============================================================ */

.kasino-hero {
    position: relative;
    background:
        radial-gradient(circle at 12% 15%, rgba(0, 123, 255, 0.12), transparent 55%),
        radial-gradient(circle at 88% 85%, rgba(255, 224, 102, 0.06), transparent 50%),
        #000000;
    border: 2px solid #0056b3;
    border-radius: 20px;
    box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.25), 0 0 24px rgba(0, 123, 255, 0.15), 0 8px 24px rgba(0, 0, 0, 0.85);
    padding: 28px 32px;
    margin: 0 0 32px 0;
}

@media (min-width: 1024px) {
    .kasino-hero {
        padding: 34px 48px;
    }
}

@media (min-width: 1400px) {
    .kasino-hero {
        padding: 38px 60px;
    }
}

.kasino-hero-badge {
    position: absolute;
    top: 0;
    left: 24px;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #1a8eff, var(--primary-blue, #007bff));
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 7px 16px;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0, 86, 179, 0.5);
}

/* Mobiilissa/tabletilla (oletus): kaikki pinoutuu pystyyn ja keskittyy.
   Isommilla näytöillä (ks. media query alempana) vaihtuu CSS Gridiksi. */
.kasino-hero-ylarivi {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
}

/* --- Identiteetti: logo omassa kehyksessään + kasinon nimi vierellä --- */
.kasino-hero-identiteetti {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.kasino-hero-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 10px;
}

.kasino-hero-logo img {
    display: block;
    width: 88px;
    height: 88px;
    object-fit: contain;
    object-position: center;
}

.kasino-hero-nimi {
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.2px;
    line-height: 1.25;
}

/* --- Bonus: oma tehosteviiva (vaakasuora pinotussa, pystysuora ruudukossa) --- */
.kasino-hero-bonus {
    width: 100%;
    text-align: center;
    position: relative;
    padding: 16px 10px;
}

.kasino-hero-bonus::before,
.kasino-hero-bonus::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    width: auto;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 224, 102, 0.4), transparent);
}

.kasino-hero-bonus::before { top: 0; }
.kasino-hero-bonus::after { top: auto; bottom: 0; }

.kasino-hero-bonus-label {
    display: block;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-bottom: 8px;
    opacity: 0.85;
}

.kasino-hero-bonus-teksti {
    color: #ffe066 !important;
    font-weight: 800;
    font-size: 1.15rem;
    line-height: 1.35;
    margin: 0 !important;
    text-shadow: 0 0 18px rgba(255, 224, 102, 0.3);
}

/* --- CTA --- */
.kasino-hero-cta {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kasino-hero-nappi {
    display: block;
    width: 100%;
    text-align: center;
    background: linear-gradient(180deg, #1a8eff 0%, var(--primary-blue, #007bff) 40%, #004499 100%);
    color: #ffffff !important;
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none !important;
    padding: 16px 44px;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 12px;
    box-shadow: 0px 10px 0px #002255, 0px 10px 20px rgba(0, 0, 0, 0.6) !important;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6);
    transition: filter 0.1s ease-in-out, transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out !important;
    box-sizing: border-box;
}

/* --- Isommat näytöt (tabletti pystyssä loppuu, oikea desktop-rivi alkaa): CSS Grid,
   erittäin ennustettava "kiinteä - joustava - kiinteä" -asettelu, nappi aina oikeassa reunassa --- */
@media (min-width: 951px) {
    .kasino-hero-ylarivi {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: start;
        text-align: left;
        gap: 30px;
    }

    .kasino-hero-identiteetti {
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }

    .kasino-hero-nimi {
        max-width: 180px;
    }

    .kasino-hero-bonus {
        width: auto;
        padding: 4px 26px;
    }

    .kasino-hero-bonus::before,
    .kasino-hero-bonus::after {
        left: auto;
        right: auto;
        top: 8%;
        bottom: 8%;
        width: 1px;
        height: auto;
        background: linear-gradient(to bottom, transparent, rgba(255, 224, 102, 0.4), transparent);
    }

    .kasino-hero-bonus::before { left: 0; right: auto; }
    .kasino-hero-bonus::after { right: 0; left: auto; bottom: 8%; top: 8%; }

    .kasino-hero-cta {
        width: auto;
    }

    .kasino-hero-nappi {
        width: auto;
        display: inline-block;
    }
}

/* Hover/active-tila VAIN laitteilla joilla on oikea hiiri -> kosketuslaitteilla nappi
   ei koskaan jää "jumiin" painetun näköiseksi, koska efekti ei edes yritä ajaa siellä.
   !important varmistaa ettei mikään muu sivuston CSS (esim. teeman omat linkkityylit) voi ohittaa tätä. */
@media (hover: hover) and (pointer: fine) {
    .kasino-hero-cta:hover .kasino-hero-nappi {
        filter: brightness(1.08) !important;
        transform: translateY(5px) !important;
        box-shadow: 0px 5px 0px #002255, 0px 5px 10px rgba(0, 0, 0, 0.6) !important;
    }

    .kasino-hero-cta:active .kasino-hero-nappi {
        filter: brightness(0.95) !important;
        transform: translateY(10px) !important;
        box-shadow: 0px 0px 0px #002255, 0px 0px 4px rgba(0, 0, 0, 0.8) !important;
    }
}

.kasino-hero-vastuullisuus {
    margin: 18px 0 0 0 !important;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.68rem;
    text-align: center;
    white-space: nowrap;
}

/* --- Pikafaktat: pienet "kortit" plain-tekstin sijaan, premium-tuntuma --- */
.kasino-hero-faktat {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.kasino-hero-fakta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 8px 16px;
}

.kasino-hero-fakta-otsikko {
    color: #ffffff;
    opacity: 0.5;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.kasino-hero-fakta-arvo {
    color: #ffe066;
    font-size: 0.9rem;
    font-weight: 700;
}

/* --- Artikkelin lopun CTA --- */
.kasino-loppu-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 123, 255, 0.1), transparent 60%),
        #000000;
    border: 2px solid #0056b3;
    border-radius: 20px;
    box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.25), 0 0 18px rgba(0, 123, 255, 0.12), 0 5px 15px rgba(0, 0, 0, 0.8);
    padding: 34px 24px;
    margin: 40px 0 20px 0;
}

.kasino-loppu-cta-teksti {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 18px 0 !important;
}

/* --- Kelluva "Pelaa nyt" -palkki: pelkkä logo + nappi --- */
.kasino-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: #0a0a0a;
    border-top: 1px solid rgba(0, 123, 255, 0.4);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.6);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    pointer-events: none;
}

.kasino-sticky-cta.nakyvissa {
    transform: translateY(0);
    pointer-events: auto;
}

.kasino-sticky-cta-sisalto {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 20px;
}

.kasino-sticky-cta-logo {
    width: 46px;
    height: 46px;
    object-fit: contain;
    flex-shrink: 0;
}

.kasino-sticky-cta-nappi {
    display: inline-block;
    background: linear-gradient(180deg, #1a8eff 0%, var(--primary-blue, #007bff) 40%, #004499 100%);
    color: #ffffff !important;
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none !important;
    padding: 12px 28px;
    border-radius: 10px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Blocksyn oma "takaisin ylös" -nappi (.ct-back-to-top) jää muuten sticky-palkin taakse piiloon ->
   nostetaan se palkin yläpuolelle. Tämä CSS latautuu vain kasinoarvostelusivuilla. */
.ct-back-to-top {
    bottom: 82px !important;
}

/* --- Mobiilioptimointi (pieni hienosäätö, pääasettelu on jo oletuksena pinottu) --- */
@media (max-width: 767px) {
    .kasino-hero {
        padding: 24px 20px;
    }

    .kasino-hero-faktat {
        justify-content: center;
        text-align: center;
    }

    .kasino-loppu-cta {
        padding: 28px 20px;
    }

    .kasino-loppu-cta .kasino-hero-nappi {
        width: 100%;
    }
}