/* ============================================================
   11. KASINOLISTA — LISÄTIEDOT-HAITARI, SUODATIN, LOGO
   (Liitetään olemassa olevan style.css:n loppuun)
   ============================================================ */


/* --- Vähennetään Gutenbergin/teeman oman lohkovälin jättämää turhaa tyhjää tilaa
   otsikon ja listan väliltä (lohkoeditori lisää oletuksena välin peräkkäisten lohkojen väliin) --- */
.kasino-lista-wrap {
    margin-top: -20px;
}

@media (max-width: 767px) {
    .kasino-lista-wrap {
        margin-top: -12px;
    }
}

/* --- Kortin taustaväri musta + pysyvä sininen hohto reunuksessa (erottuu selvästi) --- */
.casino-row {
    background: #000000 !important;
    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) !important;
}

/* Poistetaan alkuperäinen "tummenna kortti kun nappia hoverataan" -peittokerros kokonaan.
   Se oli suunniteltu aikaan kun kortin tausta oli vaaleampi kuin peittokerroksen musta väri;
   nyt taustan ollessa jo valmiiksi musta, siirtymäanimaatio (musta->musta) ei näy visuaalisesti
   mitenkään hyödyllisenä, mutta jättää jälkeensä lyhyen renderöinti-välähdyksen hoverin alussa. */
.casino-row::before {
    display: none !important;
}

/* Sama koskee koko kortin reunan/varjon vaihtumista napin hoverissa -> pidetään aina samana
   kuin kortin pysyvä lepotila, ettei mitään "hyppää" kun hiiri menee napin päälle. */
@media (hover: hover) {
    .casino-row:has(.wp-block-button__link:hover) {
        border-color: #0056b3 !important;
        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) !important;
    }
}

/* Isommilla näytöillä hieman hengitystilaa reunoihin, tiiviimpi kuin alunperin */
@media (min-width: 1024px) {
    .casino-row {
        padding: 24px 32px !important;
    }
}

@media (min-width: 1400px) {
    .casino-row {
        padding: 26px 36px !important;
    }
}

/* Huom: kasinon logon tarkka koko/rajaus määritellään alempana .casino-logo-linkki .casino-logo -säännössä */

/* --- Bonusteksti (korostettu rivi otsikon alla) --- */
.casino-row .casino-bonus {
    color: var(--gold) !important;
    font-weight: 700;
    font-size: 0.95rem;
    margin: 0 0 12px 0 !important;
}

/* --- Piilotusluokat: raja ja suodatus --- */
.casino-row.kasino-piilossa,
.casino-row.kasino-suodatettu-pois {
    display: none !important;
}

.kasino-suodatin-ei-tuloksia {
    color: #ffffff;
    opacity: 0.7;
    text-align: center;
    padding: 20px 0;
}

.kasino-suodatin-ei-tuloksia[hidden] {
    display: none !important;
}

/* --- Alaosan rivi: kasinon nimi + Lisätiedot-haitari --- */
.casino-alaosa {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 12px;
}

/* Lisätiedot-nappi vie lopun tilan ja on keskitetty siihen tilaan
   -> avattuna sisältö saa täyden leveyden eikä puristu kapeaksi */
.casino-row .lisatiedot-nappi {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    outline: none; /* poistaa selaimen koko napin peittävän oletusfokusreunuksen */
    padding: 0;
    margin: 0;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Näppäimistöllä selattaessa fokusrengas näkyy vain itse "Lisätiedot"-tekstin/ikonin ympärillä,
   ei koko napin (ja siten koko rivin) levyisenä laatikkona */
.casino-row .lisatiedot-nappi:focus-visible .lisatiedot-toggle {
    outline: 2px solid var(--hover-blue);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Kasinon nimi Lisätiedot-napin vasemmalla puolella, pienenä, ei osa klikattavaa aluetta */
.casino-row .casino-nimi-pieni {
    flex: 0 0 auto;
    margin: 0 !important;
    color: #ffffff !important;
    opacity: 0.55;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40%;
}

.casino-row .lisatiedot-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #4de3ff;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.casino-row .lisatiedot-toggle::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -3px;
    transition: transform 0.25s ease, margin 0.25s ease;
}

.casino-row .lisatiedot-nappi[aria-expanded="true"] .lisatiedot-toggle::after {
    transform: rotate(-135deg);
    margin-top: 3px;
}

@media (max-width: 781px) {
    .casino-alaosa {
        margin-top: 18px;
        padding-top: 14px;
    }
}

/* Desktopilla nappi oikeaan reunaan (mobiilissa keskitettynä, koska siellä toimii jo hyvin) */
@media (min-width: 782px) {
    .casino-row .lisatiedot-nappi {
        justify-content: flex-end;
    }
}

/* Sulava avautuminen ilman natiivia details-elementtiä (grid-rows-tekniikka + JS-luokka) */
.casino-row .lisatiedot-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.casino-row .lisatiedot-wrap.auki {
    grid-template-rows: 1fr;
}

.casino-row .lisatiedot-sisalto {
    overflow: hidden;
}

/* Tiedot-lista: kaksi saraketta mobiilissa (lyhyet arvot mahtuvat hyvin vierekkäin),
   sisältöön mukautuva rivitys desktopilla (ei pakoteta 50/50-jakoa) */
.casino-row .tiedot-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}

@media (min-width: 782px) {
    .casino-row .tiedot-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, max-content));
        justify-content: flex-start;
        column-gap: 48px;
        row-gap: 12px;
    }
}

.casino-row .tieto-rivi {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.casino-row .tieto-otsikko {
    color: #ffffff;
    opacity: 0.6;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.casino-row .tieto-arvo {
    color: #ffffff;
    font-size: 0.9rem;
    overflow-wrap: break-word;
    word-break: break-word;
}

.casino-row .lue-arvostelu-wrap {
    margin-top: 16px;
    text-align: right;
}

.casino-row .lue-arvostelu-linkki {
    display: inline-block;
    color: var(--hover-blue) !important;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
}

.casino-row .lue-arvostelu-linkki:hover {
    text-decoration: underline;
}

/* --- Kasinorivit: yksi kasino per täysleveä rivi --- */
.kasino-rivit {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.kasino-rivit .casino-row {
    margin-bottom: 0 !important; /* gap hoitaa välit */
}

/* --- Kortin sisäinen asettelu: logo / tekstit / nappi vierekkäin desktopilla --- */
.casino-row-inner {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* --- Logo: klikattava, keskitetty omassa sarakkeessaan.
   Logot ovat 200x200px läpinäkyviä, joissa alareunassa tyhjää tilaa ->
   rajataan CSS:llä automaattisesti n. 34% pois alareunasta (vastaa 200x132px-rajausta)
   jolloin logon oma kuvio näkyy paremmin keskellä, ilman että jokaista tiedostoa tarvitsee muokata erikseen.
   Koko hieman pienennetty 140x92 -> 120x79 tiiviimpää korttia varten. --- */
.casino-logo-lohko {
    flex: 0 0 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.casino-logo-linkki {
    display: block;
    width: 120px;
    height: 79px;
    overflow: hidden;
}

.casino-logo-linkki .casino-logo {
    display: block;
    width: 120px;
    height: 79px;
    object-fit: cover;
    object-position: top; /* näyttää kuvan yläosan, rajaa ylimääräisen tyhjän tilan pois alareunasta */
    margin: 0;
}

.casino-logo-linkki:hover {
    opacity: 0.9;
}

.casino-row-content {
    flex: 1 1 auto;
    min-width: 0; /* estää tekstiä työntämästä palkkia liian leveäksi */
}

/* --- Bonus vasemmalla, pointtilista oikealla --- */
.casino-row-kaksi-saraketta {
    display: flex;
    align-items: stretch; /* bonuslohko venyy täyteen korkeuteen, jotta sisältö voidaan keskittää siihen */
    gap: 24px;
}

.casino-bonus-lohko {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    padding: 3px 20px;
}

/* Selkeämpi pystysuora tehosteviiva erottaa bonuslohkon pointtilistasta */
.casino-bonus-lohko::after {
    content: '';
    position: absolute;
    right: 0;
    top: 6%;
    bottom: 6%;
    width: 2px;
    background: linear-gradient(to bottom, transparent, rgba(255, 224, 102, 0.7), transparent);
}

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

.casino-row-kaksi-saraketta .casino-bonus {
    color: #ffe066 !important;
    font-family: inherit !important;
    font-style: normal;
    font-weight: 800 !important;
    font-size: 0.95rem;
    line-height: 1.3;
    letter-spacing: 0.2px;
    margin: 0 !important;
}

.casino-row-kaksi-saraketta ul {
    flex: 1 1 0;
    margin: 0 !important; /* pointtilista pysyy muuten koskemattomana (checkit, tekstit ennallaan) */
}

@media (max-width: 781px) {
    .casino-row-kaksi-saraketta {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .casino-bonus-lohko {
        padding: 0 0 16px 0;
    }

    /* Mobiilissa lohkot pinoutuvat pystyyn -> tehosteviiva vaakasuunnassa alareunaan pystyviivan sijaan */
    .casino-bonus-lohko::after {
        left: 10%;
        right: 10%;
        top: auto;
        bottom: 0;
        width: auto;
        height: 2px;
        background: linear-gradient(to right, transparent, rgba(255, 224, 102, 0.7), transparent);
    }
}

.casino-row-cta {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch; /* nappi saa venyä täyteen leveyteen mobiilissa; teksti keskittyy omalla text-align:centerillä */
}

.casino-row-cta .wp-block-button__link {
    margin-bottom: 0 !important;
}

.casino-vastuullisuus {
    margin: 22px 0 0 0 !important;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.68rem;
    text-align: center;
    line-height: 1.3;
    white-space: nowrap;
    align-self: center;
}

/* Isompi nappi desktopilla, ja varmistettu selkeä hover/active-palaute */
@media (min-width: 782px) {
    .casino-row-cta .wp-block-button__link {
        padding: 17px 42px !important;
        font-size: 17px !important;
    }
}

.casino-row-cta .wp-block-button__link {
    transition: filter 0.1s ease-in-out, transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out !important;
}

/* Hover/active-tila VAIN laitteilla joilla on oikea hiiri (@media hover:hover) ->
   kosketuslaitteilla (mobiili/tabletti) nappi ei koskaan yritä "painua sisään" eikä
   siten voi jäädä jumiin painetun näköiseksi kosketuksen jälkeen (mobiilissa ei ole
   todellista hover-pois-päältä-tapahtumaa joka palauttaisi tilan). Toimii silti täysin
   normaalisti kosketuksella - vain ilman animaatiota. */
@media (hover: hover) and (pointer: fine) {
    .casino-row-cta .wp-block-button:hover .wp-block-button__link {
        filter: brightness(1.08);
        transform: translateY(5px) !important;
        box-shadow: 0px 5px 0px #002255, 0px 5px 10px rgba(0, 0, 0, 0.6) !important;
    }

    .casino-row-cta .wp-block-button:active .wp-block-button__link {
        filter: brightness(0.95);
        transform: translateY(10px) !important;
        box-shadow: 0px 0px 0px #002255, 0px 0px 4px rgba(0, 0, 0, 0.8) !important;
    }
}

/* Mobiilissa pinotaan pystyyn, kuten alkuperäinen suunnittelu oli */
@media (max-width: 781px) {
    .casino-row-inner {
        flex-direction: column;
        align-items: center; /* keskittää logon kun rivi pinoutuu pystyyn */
    }

    .casino-logo-lohko {
        max-width: 120px;
        align-self: center;
    }

    .casino-row-content {
        width: 100%;
        text-align: left;
    }

    .casino-row-cta {
        margin-left: 0;
        width: 100%;
    }

    /* Pakotetaan koko kääre-ketju (wp-block-buttons -> wp-block-button -> linkki)
       täysleveäksi eksplisiittisesti, ei luoteta pelkkään flexbox-venymiseen -
       jokin Blocksyn oma sääntö saattaa antaa näille kääre-diveille oman
       leveyden joka estää venymisen, vaikka itse linkillä lukisi width:100%. */
    .casino-row-cta .wp-block-buttons,
    .casino-row-cta .wp-block-button {
        width: 100% !important;
        display: block !important;
    }
}

@media (max-width: 767px) {
    .kasino-rivit {
        gap: 15px;
    }
}

/* --- Suodatinryhmät (Maksutapa / Lisenssi / Pelitapa omina lohkoinaan) --- */
.kasino-suodatin-ryhma {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 10px;
    align-content: flex-start;
}

.kasino-suodatin-otsikko {
    width: 100%;
    color: var(--hover-blue);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 4px 0;
}

/* Mobiilissa/kapealla paneelilla ryhmät pinoutuvat allekkain -> erotinviiva näkyy */
.kasino-suodatin-ryhma:not(:last-of-type) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 16px;
    margin-bottom: 4px;
}

/* --- "X kasinoa" -laatikko täyttää koko tilan Suodata-napin vasemmalla puolella samalla rivillä.
   Piiloutuu automaattisesti kun suodatinpaneeli avataan (JS lisää/poistaa [hidden]-attribuutin). --- */
.kasino-lista-maara {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto; /* täyttää koko käytettävissä olevan tilan napin vasemmalla puolella */
    min-width: 0;   /* sallii kutistumisen ettei se työnnä nappia pois paikaltaan/riviltä */
    background: #000000;
    border: 1px solid rgba(0, 123, 255, 0.35);
    border-radius: 12px;
    box-shadow: 0 0 14px rgba(0, 123, 255, 0.1);
    padding: 10px 18px;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    overflow: hidden;
}

.kasino-lista-maara-ikoni {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--success-green, #27ae60);
    color: #ffffff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 900;
    flex-shrink: 0;
}

.kasino-lista-maara[hidden] {
    display: none !important;
}

/* --- Suodatinpainike ja -paneeli --- */
.kasino-lista-header {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* varasääntö kun chip on piilossa (suodatin auki) -> nappi pysyy aina oikeassa reunassa */
    gap: 10px;
    margin-bottom: 10px;
}

/* Kapealla näytöllä (esim. iPhone) piilotetaan kokonaan "X kasinoa" -chip, jotta Suodata listaa-
   ja Tyhjennä-napit mahtuvat rauhassa (varsinainen leveyskorjaus on alempana tiedostossa,
   koska CSS:n järjestys ratkaisee kumpi sääntö voittaa kun spesifisyys on sama). */
@media (max-width: 480px) {
    .kasino-lista-maara {
        display: none;
    }
}

.kasino-suodatin {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* pitää napin aina samassa kohdassa vaikka paneelin leveys muuttuu */
    flex-shrink: 0; /* nappi+paneeli EI KOSKAAN kutistu tai jää ilman tilaa -> ei enää hyppää riviltä */
}

/* Suodatinpainike + yläreunan Tyhjennä-nappi samalla rivillä */
.kasino-suodatin-napit-rivi {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.kasino-suodatin-tyhjenna-ylhaalla {
    padding: 8px 14px;
    font-size: 0.76rem;
}

.kasino-suodatin-tyhjenna-ylhaalla::before {
    font-size: 0.65rem;
}

.kasino-suodatin-nappi {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1a1a1a;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 10px 18px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    white-space: nowrap;
}

.kasino-suodatin-ikoni {
    font-size: 1rem;
}

.kasino-suodatin-nappi:hover,
.kasino-suodatin-nappi[aria-expanded="true"] {
    border-color: var(--hover-blue);
    background: #222222;
}

/* Paneeli työntää sisältöä normaalisti alaspäin (ei kellu taulukon päällä).
   Mobiilissa/kapealla näytöllä: korkeus rajattu, sisempi div vierittää,
   ja alareunan häivytys + väritetty vierityspalkki kertovat että lisää sisältöä löytyy alta. */
.kasino-suodatin-paneeli {
    position: relative;
    margin-top: 10px;
    width: 360px;
    max-width: 100%;
    background: #191919;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    overflow: hidden; /* rajaa häivytysreunan pyöristettyihin kulmiin */
}

/* Kapealla näytöllä (esim. iPhone): Suodata listaa / Tyhjennä -napeista tulee täysleveitä
   ettei rivin vasemmalle puolelle jää tyhjää tilaa. Kun suljettu: Suodata listaa täyttää
   koko rivin. Kun auki: Tyhjennä pysyy kompaktina, Sulje suodatin täyttää lopun.
   HUOM: tämä on tarkoituksella VASTA TÄSSÄ KOHTAA tiedostoa (perussääntöjen jälkeen),
   ei ylempänä - CSS-kaskadi noudattaa tiedostojärjestystä kun spesifisyys on sama,
   joten aiemmin sijoitettuna nämä hävisivät hiljaa alempana oleville perussäännöille. */
@media (max-width: 480px) {
    .kasino-suodatin {
        flex: 1 1 auto;
        min-width: 0;
        align-items: stretch;
    }

    .kasino-suodatin-napit-rivi {
        width: 100%;
        min-width: 0;
    }

    .kasino-suodatin-nappi {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .kasino-suodatin-tyhjenna-ylhaalla {
        flex: 0 0 auto;
    }

    .kasino-suodatin-paneeli {
        width: 100%;
        max-width: 100%;
    }
}

.kasino-suodatin-sisalto {
    max-height: min(42vh, 300px);
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--hover-blue) rgba(255, 255, 255, 0.08);
}

/* Mobiilissa kääre ei vaikuta layoutiin lainkaan -> ryhmät ovat suoraan sisalto-flexin lapsia */
.kasino-suodatin-ryhmat-alue {
    display: contents;
}

.kasino-suodatin-sisalto::-webkit-scrollbar { width: 6px; }
.kasino-suodatin-sisalto::-webkit-scrollbar-thumb {
    background: var(--hover-blue);
    border-radius: 10px;
}

/* Alareunan häivytys -> vihjaa että sisältöä on vielä alempana. Katoaa kun vieritetty loppuun (JS lisää .lopussa-luokan). */
.kasino-suodatin-paneeli::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 28px;
    background: linear-gradient(to bottom, rgba(25, 25, 25, 0), #191919);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.kasino-suodatin-paneeli.lopussa::after {
    opacity: 0;
}

/* Isommilla näytöillä: leveämpi paneeli, ryhmät kahteen sarakkeeseen, ei vieritystä -> häivytys pois käytöstä */
@media (min-width: 900px) {
    .kasino-suodatin-paneeli {
        width: min(700px, calc(100vw - 40px));
        overflow: visible;
    }

    .kasino-suodatin-paneeli::after {
        display: none;
    }

    .kasino-suodatin-sisalto {
        max-height: none;
        overflow-y: visible;
        display: block; /* palautetaan tavallinen box-malli, contents pois käytöstä */
    }

    .kasino-suodatin-ryhmat-alue {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 36px;
        row-gap: 14px;
        align-items: start;
    }

    .kasino-suodatin-ryhma {
        margin-bottom: 0;
    }

    /* Sarakejaossa erotinviiva ei enää toimi järkevästi rivijärjestyksen mukaan -> pois käytöstä */
    .kasino-suodatin-ryhma:not(:last-of-type) {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .kasino-suodatin-tyhjenna {
        margin-top: 6px;
    }
}

/* Leveillä työpöytänäytöillä: paneeli RIVITTYY omalle täysleveälle riville "X kasinoa" -chipin
   ja Suodata-napin alle, sen sijaan että jäisi kapeaksi (max 700px) oikeaan reunaan - näin
   ryhmät mahtuvat useampaan sarakkeeseen vierekkäin eikä paneeli työnnä kasinolistaa turhan
   alas. HUOM: myöhemmin tiedostossa kuin yllä oleva 900px-sääntö -> voittaa CSS-kaskadissa
   kun spesifisyys on sama. */
@media (min-width: 1100px) {
    /* TÄRKEÄÄ: :has()-ehto varmistaa että tämä rivitys aktivoituu VAIN kun paneeli on oikeasti
       auki (ei [hidden]-attribuuttia) - muuten "Suodata listaa" -nappi hyppäisi irralleen
       "X kasinoa" -chipistä omalle rivilleen myös silloin kun paneeli on kiinni (bugi joka
       huomattiin - nappi näytti "hyppäävän" oudosti kiinni-tilassakin ennen tätä korjausta). */
    .kasino-lista-header:has(.kasino-suodatin-paneeli:not([hidden])) {
        flex-wrap: wrap;
        justify-content: flex-start; /* chip jää vasempaan reunaan omalla rivillään wrapin jälkeen */
    }

    .kasino-lista-header:has(.kasino-suodatin-paneeli:not([hidden])) .kasino-lista-maara {
        flex: 0 1 auto; /* EI enää venytä täyteen leveyteen kun rivittyy yksin omalle rivilleen */
    }

    .kasino-suodatin:has(.kasino-suodatin-paneeli:not([hidden])) {
        flex: 1 1 100%;
        align-items: stretch;
    }

    .kasino-suodatin-paneeli {
        width: 100%;
        max-width: 100%;
    }

    .kasino-suodatin-ryhmat-alue {
        grid-template-columns: repeat(4, 1fr);
        column-gap: 28px;
    }
}

/* Varmistaa että [hidden]-attribuutti todella piilottaa paneelin oletuksena,
   eikä yllä oleva display:flex pääse voittamaan sitä (tämä oli aiempi bugi). */
.kasino-suodatin-paneeli[hidden] {
    display: none !important;
}

/* Chip-tyyliset valintanapit plain-checkboxien sijaan.
   Kiinteä height (padding-arvon sijaan) takaa että JOKAINEN chip on täsmälleen
   samankorkuinen riippumatta tekstin sisällöstä -> ei enää millinnaon eroja rivissä. */
.kasino-suodatin-checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 32px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.kasino-suodatin-checkbox:hover {
    border-color: var(--hover-blue);
}

/* Checkbox pysyy DOM:ssa ja saavutettavana, mutta piilotetaan visuaalisesti
   -> koko pilleri toimii klikattavana pinta-alana */
.kasino-suodatin-checkbox input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.kasino-suodatin-checkbox:has(input:checked) {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    font-weight: 700;
}

/* Piilossa olevien lisächippien kääre: display:contents -> ei muodosta omaa laatikkoaan,
   chipit asettuvat suoraan osaksi vanhemman .kasino-suodatin-ryhma flex-riviä kun ne paljastetaan.
   [hidden]-tila hoitaa koko kääreen (ja siten kaikkien sisäisten chippien) piilotuksen kerralla. */
.kasino-suodatin-lisachipit {
    display: contents;
}

.kasino-suodatin-lisachipit[hidden] {
    display: none !important;
}

/* "+X lisää" / "Näytä vähemmän" -nappi: sama korkeus/muoto kuin chipit, mutta läpinäkyvämpi
   ja ilman reunaa jotta erottuu selkeästi toiminnoksi eikä suodatinvalinnaksi */
.kasino-suodatin-laajenna-nappi {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 32px;
    padding: 0 14px;
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    color: var(--hover-blue);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.kasino-suodatin-laajenna-nappi:hover {
    border-color: var(--hover-blue);
    color: #ffffff;
}

.kasino-suodatin-tyhjenna {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.55);
    font-weight: 700;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 0.82rem;
    cursor: pointer;
    align-self: flex-start;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.kasino-suodatin-tyhjenna::before {
    content: '✕';
    font-size: 0.7rem;
}

/* Varmistaa että [hidden] todella piilottaa napin, ei display:inline-flex pääse voittamaan sitä */
.kasino-suodatin-tyhjenna[hidden] {
    display: none !important;
}

.kasino-suodatin-tyhjenna.aktiivinen {
    background: rgba(255, 80, 80, 0.08);
    border-color: rgba(255, 90, 90, 0.5);
    color: #ff8080;
}

.kasino-suodatin-tyhjenna.aktiivinen:hover {
    background: rgba(255, 80, 80, 0.18);
    border-color: #ff8080;
}

/* HUOM: "kasino-infolaatikko" ja "kasino-reuna" -tyylit siirrettiin style.css:ään,
   koska ne pitää saada toimimaan JOKA SIVULLA riippumatta onko kasinolistaa
   käytössä - tämä tiedosto latautuu vain sivuilla joilla [kasinolista]-shortcode on. */

/* ============================================================
   ARTIKKELIKUVIEN PYÖRISTYS
   Sama pyöristysarvo kuin kasinokorteissa. HUOM: toimii vain sivuilla
   joilla [kasinolista]-shortcode on käytössä, koska tämä tiedosto
   latautuu vain silloin.
   ============================================================ */
.entry-content img {
    border-radius: 20px;
}

/* [kasino_kortti]-shortcodella upotettu yksittäinen kortti artikkelin leipätekstin sekaan -
   pieni yläväli riippumatta siitä mikä elementti (kappale, otsikko) sitä edeltää. Itse
   .casino-row-luokalla on jo oma margin-bottom, joten alapuolelle ei tarvitse lisätä mitään. */
.kasino-kortti-wrap {
    margin-top: 24px;
}