/* =====================
   7. Ikonikortit
   ===================== */

.ikonikortit {
    padding: 5% 10%;
    width: 100%;
    box-sizing: border-box;
}

.ikonikortit__intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3rem;
}

.ikonikortit__otsikko {
    font-family: var(--theme-font-family);
    color: var(--ik-teksti-vari, var(--theme-headings-color));
    margin-bottom: 0.75rem;
}

.ikonikortit__viiva {
    width: 80px;
    height: 4px;
    background-color: var(--theme-palette-color-3);
    margin: 0 auto 1.5rem;
}

.ikonikortit__teksti {
    font-family: var(--theme-font-family);
    font-size: var(--theme-font-size);
    line-height: var(--theme-line-height);
    color: var(--ik-teksti-vari, var(--theme-text-color));
}

.ikonikortit__teksti h1,
.ikonikortit__teksti h2,
.ikonikortit__teksti h3,
.ikonikortit__teksti h4,
.ikonikortit__teksti h5,
.ikonikortit__teksti h6 {
    color: var(--ik-teksti-vari, var(--theme-headings-color));
}

/* Kortit-ruudukko — CSS grid pakottaa sarakkeiden lukumäärän */
.ikonikortit__kortit {
    display: grid;
    grid-template-columns: repeat(var(--sarakkeet, 3), max-content);
    justify-content: center;
    gap: 3rem;
    /* Jaettu ikonin koko - sama arvo sekä ikonin omalle width/height:lle että
       Vasemmalle tasattu -asettelun grid-sarakkeen leveydelle (ks. alempana),
       jotta pitkät otsikkosanat eivät voi enää syödä ikonin tilaa. */
    --ik-ikoni-koko: clamp(60px, calc(180px - var(--kortti-maara, 6) * 10px), 150px);
}

/* Yksittäinen kortti (Keskitetty-tila) */
.ikonikortit__kortti {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
    width: clamp(80px, calc(200px - var(--kortti-maara, 6) * 10px), 160px);
}

a.ikonikortit__kortti:hover .ikonikortit__ikoni {
    box-shadow: 0 0 0 14px rgba(0, 180, 90, 0.25);
}

a.ikonikortit__kortti:hover .ikonikortit__kortti-otsikko {
    color: var(--theme-palette-color-3);
}

.ikonikortit__ikoni {
    width: var(--ik-ikoni-koko, clamp(60px, calc(180px - var(--kortti-maara, 6) * 10px), 150px));
    height: var(--ik-ikoni-koko, clamp(60px, calc(180px - var(--kortti-maara, 6) * 10px), 150px));
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
    box-shadow: 0 0 0 14px rgba(0, 180, 90, 0.12);
    transition: box-shadow 0.2s ease;
}

/* Ikonikirjaston kuvake (fonttipohjainen, ei kuvatiedosto) */
.ikonikortit__ikoni--kuvake {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    font-size: clamp(35px, calc(95px - var(--kortti-maara, 6) * 5px), 80px);
    line-height: 1;
    color: var(--ikoni-vari, var(--theme-palette-color-3));
    border-radius: 0;
    object-fit: initial;
    box-shadow: none;
    transition: color 0.2s ease;
}

.ikonikortit__kortti:hover .ikonikortit__ikoni--kuvake {
    color: var(--ikoni-hover-vari, var(--ikoni-vari, var(--theme-palette-color-3)));
}

.ikonikortit__kortti-otsikko {
    font-family: var(--theme-font-family);
    color: var(--ik-teksti-vari, var(--theme-headings-color));
    /* font-weight: 700; */
    font-size: clamp(0.75rem, calc(1.7rem - var(--kortti-maara, 6) * 0.1rem), 1.1rem);
    margin-bottom: 0.5rem;
    transition: color 0.2s ease;
}

/* Kun kortilla on erillinen painike (painikkeen tyyli != "Ikonikortti"), otsikolle
   varataan aina kahden rivin verran tilaa, jotta teksti ja painike alkavat samalta
   tasolta korteissa joissa otsikko mahtuu yhdelle riville kuin korteissa joissa se
   rivittyy kahdelle. Painike työnnetään lisäksi kortin alareunaan asti (margin-top:
   auto), koska kortti venyy grid-rivin korkeimman kortin mukaiseksi (grid-oletus
   align-items: stretch) - näin painikkeet asettuvat samalle tasolle vaikka leipätekstin
   pituus vaihtelisi korttien välillä. Rajattu ":not(.ikonikortit--vasen)":lla, koska
   Vasemmalle tasattu -asettelussa kortin flex-direction on row, jolloin margin-top:
   auto työntäisi painikkeen pohjalle pystykeskityksen sijaan. */
.ikonikortit:not(.ikonikortit--vasen) .ikonikortit__kortti:has(.ikonikortit__painike) .ikonikortit__kortti-otsikko {
    min-height: calc(var(--theme-line-height, 1.2) * 2em);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ikonikortit:not(.ikonikortit--vasen) .ikonikortit__painike {
    margin-top: auto;
}

/* Painikkeen perustyyli (sama kaava kuin muissa lohkoissa, esim. block-01/block-03):
   ilman inline-flex+gap-riviä teksti ja ikoni painuvat kiinni toisiinsa, koska
   artio_painike() ei itsessään lisää niiden väliin tilaa. */
.ikonikortit__painike {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: var(--theme-palette-color-1);
    font-family: var(--theme-font-family);
    font-size: var(--theme-font-size);
    font-weight: 600;
    transition: gap 0.2s ease;
}

.ikonikortit__painike:hover {
    gap: 0.7rem;
}

.ikonikortit__painike--painike-teksti:hover,
.ikonikortit__painike--painike-teksti-ikoni:hover {
    gap: 0.4rem;
}

.ikonikortit__painike-ikoni {
    font-size: 1em;
}

.ikonikortit__kortti-teksti {
    font-family: var(--theme-font-family);
    font-size: clamp(0.65rem, calc(1.4rem - var(--kortti-maara, 6) * 0.083rem), 1rem);
    line-height: var(--theme-line-height);
    color: var(--ik-teksti-vari, var(--theme-text-color));
    padding-bottom: 5%;
}

/* Vasemmalle tasattu asettelu */
.ikonikortit--vasen .ikonikortit__intro {
    text-align: left;
    margin: 0 0 3rem;
}

.ikonikortit--vasen .ikonikortit__viiva {
    margin-left: 0;
}

.ikonikortit--vasen .ikonikortit__kortit {
    /* minmax(0, 1fr) eikä pelkkä 1fr - "1fr" tarkoittaa oletuksena minmax(auto, 1fr),
       jolloin sarake ei suostu kutistumaan sisällön (nyt taatun ikonin) minimikoon
       alle, ja rivi voi ylittää näytön leveyden monella sarakkeella (havaittu
       2026-08-11 kuudella sarakkeella). minmax(0, 1fr) sallii kutistumisen. */
    grid-template-columns: repeat(var(--sarakkeet, 3), minmax(0, 1fr));
    justify-content: start;
}

/* Grid, ei flex-direction:row: neljä lasta (ikoni, otsikko, teksti, valinnainen
   painike) olivat suoraan rinnakkain flex-rivissä, jolloin otsikko ja teksti
   pakkautuivat omiin kapeisiin sarakkeisiinsa sen sijaan että pinoutuisivat
   yhdeksi palstaksi ikonin viereen. Ikoni asetetaan omaan sarakkeeseensa
   spannaamaan kaikki rivit (grid-row: 1 / -1), otsikko/teksti/painike pinoutuvat
   toiseen sarakkeeseen normaalissa dokumenttivirtauksessa. */
.ikonikortit--vasen .ikonikortit__kortti {
    display: grid;
    /* Ikonin sarakkeelle taattu (ei auto/sisältöön perustuva) leveys - muuten
       pitkät, katkeamattomat otsikkosanat pakottavat 1fr-sarakkeen leveämmäksi
       ja kutistavat ikonin sarakkeen sen mukana (havaittu 2026-08-11: sama kuva
       näytti eri kokoisena eri riveillä riippuen vain otsikon pituudesta). */
    grid-template-columns: var(--ik-ikoni-koko) 1fr;
    align-items: center;
    column-gap: 1.5rem;
    row-gap: 0.35rem;
    text-align: left;
    width: 100%;
}

.ikonikortit--vasen .ikonikortit__ikoni {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
    margin-bottom: 0 !important;
    flex-shrink: 0;
}

.ikonikortit--vasen .ikonikortit__kortti-otsikko,
.ikonikortit--vasen .ikonikortit__kortti-teksti,
.ikonikortit--vasen .ikonikortit__painike {
    grid-column: 2;
}

/* Turvaverkko: otsikko ei voi enää koskaan työntää naapurikorttia tai ylivuotaa,
   vaikka joku kirjoittaisi hyvin pitkän otsikon - katkaistaan 3 rivin jälkeen
   "..."-merkillä sen sijaan että annettaisiin sen rikkoa asettelun. */
.ikonikortit--vasen .ikonikortit__kortti-otsikko {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
}

/* Desktopissa vasen + 5-6 saraketta: pinottu asettelu (yksi sarake), pienempi ikoni.
   VÄLIAIKAISESTI POIS PÄÄLTÄ (2026-08-11) testin ajaksi käyttäjän pyynnöstä - hän
   haluaa nähdä miltä näyttää kun ikoni on AINA otsikon vasemmalla puolella, myös
   5-6 sarakkeella, ennen lopullista päätöstä pidetäänkö tämä pinottu erikoistapaus.
   Poista kommentointi (palauta @media-lohko aktiiviseksi) jos päädytään pitämään
   pinottu asettelu monisarakkeisille korteille.
@media (min-width: 1101px) {
    .ikonikortit--vasen.ikonikortit--sarakkeet-5 .ikonikortit__kortti,
    .ikonikortit--vasen.ikonikortit--sarakkeet-6 .ikonikortit__kortti {
        grid-template-columns: 1fr;
        row-gap: 0.75rem;
    }
    .ikonikortit--vasen.ikonikortit--sarakkeet-5 .ikonikortit__ikoni,
    .ikonikortit--vasen.ikonikortit--sarakkeet-6 .ikonikortit__ikoni {
        grid-column: 1;
        grid-row: auto;
        width: clamp(48px, calc(140px - var(--sarakkeet, 3) * 10px), 90px);
        height: clamp(48px, calc(140px - var(--sarakkeet, 3) * 10px), 90px);
        flex-shrink: 1;
    }
    .ikonikortit--vasen.ikonikortit--sarakkeet-5 .ikonikortit__kortti-otsikko,
    .ikonikortit--vasen.ikonikortit--sarakkeet-6 .ikonikortit__kortti-otsikko,
    .ikonikortit--vasen.ikonikortit--sarakkeet-5 .ikonikortit__kortti-teksti,
    .ikonikortit--vasen.ikonikortit--sarakkeet-6 .ikonikortit__kortti-teksti,
    .ikonikortit--vasen.ikonikortit--sarakkeet-5 .ikonikortit__painike,
    .ikonikortit--vasen.ikonikortit--sarakkeet-6 .ikonikortit__painike {
        grid-column: 1;
    }
    .ikonikortit--vasen.ikonikortit--sarakkeet-5 .ikonikortit__ikoni--kuvake,
    .ikonikortit--vasen.ikonikortit--sarakkeet-6 .ikonikortit__ikoni--kuvake {
        font-size: clamp(48px, calc(140px - var(--sarakkeet, 3) * 10px), 90px);
    }
}
*/

/* Tabletti — vasemmalle-asettelu max 2 saraketta; 5-6 saraketta → 4 */
@media (max-width: 1100px) {
    .ikonikortit--vasen .ikonikortit__kortit {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 3rem;
    }
    .ikonikortit--sarakkeet-5:not(.ikonikortit--vasen) .ikonikortit__kortit,
    .ikonikortit--sarakkeet-6:not(.ikonikortit--vasen) .ikonikortit__kortit {
        grid-template-columns: repeat(4, max-content);
    }
}

/* Tabletti (769-1024px, sivuston viralliset breakpointit) - rajaa kuvakkeen koko,
   muuten peruskaava (clamp korttimäärän mukaan) voi kasvattaa sen jopa 150px:ään */
@media (min-width: 769px) and (max-width: 1024px) {
    .ikonikortit__ikoni {
        width: 80px;
        height: 80px;
    }
    .ikonikortit__ikoni--kuvake {
        font-size: 80px;
    }
}

/* Mobiili */
@media (max-width: 768px) {
    .ikonikortit {
        padding: 2rem 1.25rem;
    }
    .ikonikortit__kortit {
        grid-template-columns: max-content;
        gap: 1.5rem;
    }
    .ikonikortit__kortti {
        width: clamp(100px, 40vw, 160px);
    }
    .ikonikortit__ikoni {
        width: clamp(50px, 25vw, 50px);
        height: clamp(50px, 25vw, 50px);
    }
    .ikonikortit__ikoni--kuvake {
        font-size: clamp(50px, 25vw, 50px);
    }
    .ikonikortit--vasen .ikonikortit__kortit {
        grid-template-columns: 1fr;
        row-gap: 2.5rem;
    }
    .ikonikortit--vasen .ikonikortit__kortti {
        width: 100%;
    }
}