/* =====================
   1. Tekstipalsta – kuva
   ===================== */

.kaksi-palstaa {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8rem;
    align-items: center;
    padding: 5% 10%;
    width: 100%;
    box-sizing: border-box;
}

/* Oletuksena teksti vasemmalla, kuva oikealla */
.kaksi-palstaa__sisalto { order: 1; }
.kaksi-palstaa__kuva-wrapper { order: 2; }

/* Flipped: kuva vasemmalla, teksti oikealla */
.kaksi-palstaa--flipped .kaksi-palstaa__sisalto { order: 2; }
.kaksi-palstaa--flipped .kaksi-palstaa__kuva-wrapper { order: 1; }

/* Sisällön sijainti: keskitetty */
.kaksi-palstaa--keskitetty .kaksi-palstaa__sisalto {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kaksi-palstaa--keskitetty .kaksi-palstaa__viiva {
    margin-left: auto;
    margin-right: auto;
}

.kaksi-palstaa--keskitetty .kaksi-palstaa__painike {
    align-self: center;
}

/* Kuvake */
.kaksi-palstaa__kuvake {
    max-height: 60px;
    width: auto;
    margin-bottom: 1rem;
    display: block;
}

/* Kuvake: ikonikirjaston fonttipohjainen vaihtoehto (ladatun kuvan sijaan) */
.kaksi-palstaa__kuvake--ikonikirjasto {
    width: auto;
    height: auto;
    font-size: 60px;
    line-height: 1;
    color: var(--kp-ikoni-vari, var(--kp-teksti-vari, var(--theme-palette-color-3)));
    transition: color 0.2s ease;
}

.kaksi-palstaa:hover .kaksi-palstaa__kuvake--ikonikirjasto {
    color: var(--kp-ikoni-hover-vari, var(--kp-ikoni-vari, var(--kp-teksti-vari, var(--theme-palette-color-3))));
}

/* Kuvake pinoutuu otsikon YLÄPUOLELLE tavallisessa dokumenttivirtauksessa
   (kuvake-perussäännön display:block; margin-bottom:1rem riittää sellaisenaan,
   ei tarvita erillistä asemointia) - sama sekä oletustilassa (kuva oikealla)
   että flipattuna (kuva vasemmalla), koska flippaus vaikuttaa vain palstojen
   (sisalto/kuva-wrapper) keskinäiseen järjestykseen gridissä (ks. yllä), ei
   kuvakkeen ja otsikon keskinäiseen asemointiin. */

/* Sisällön sijainti: keskitetty. .kaksi-palstaa__otsikko-rivi kutistuu
   sisältönsä (otsikon) levyiseksi flex-itemiksi .kaksi-palstaa__sisalto:ssa,
   joten ladattu kuva (block-tason korvattu elementti, ei tekstiä) pitää
   keskittää erikseen marginaaleilla - ikonikirjaston <i> keskittyy jo
   automaattisesti, koska se ei-korvattuna elementtinä levittäytyy koko
   otsikko-rivin leveydelle ja sen sisältö (fontti-ikoni) noudattaa
   text-align: center -perintöä. */
.kaksi-palstaa--keskitetty .kaksi-palstaa__kuvake {
    margin-left: auto;
    margin-right: auto;
}

/* Otsikko */
.kaksi-palstaa__otsikko {
    font-family: var(--theme-font-family);
    color: var(--kp-teksti-vari, var(--theme-headings-color));
    margin-bottom: 0.75rem;
}

/* Vihreä viiva otsikon alla */
.kaksi-palstaa__viiva {
    width: 80px;
    height: 4px;
    background-color: var(--theme-palette-color-3);
    margin-bottom: 1.5rem;
}

/* Teksti */
.kaksi-palstaa__teksti {
    font-family: var(--theme-font-family);
    font-size: var(--theme-font-size);
    line-height: var(--theme-line-height);
    color: var(--kp-teksti-vari, var(--theme-text-color));
    margin-bottom: 1.5rem;
}

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

/* Painike */
.kaksi-palstaa__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;
}

.kaksi-palstaa__painike:hover {
    gap: 0.7rem;
}

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

.kaksi-palstaa__painike-ikoni {
    font-size: 1em;
}

/* Kuva-wrapper — vihreä palkki oikeassa reunassa */
.kaksi-palstaa__kuva-wrapper {
    position: relative;
    border-left: 0px;
}

/* Kun kuva on vasemmalla, palkki oikealle */
.kaksi-palstaa--flipped .kaksi-palstaa__kuva-wrapper {
    border-left: none;
    border-right: 0px;
}

/* Kuva */
.kaksi-palstaa__kuva {
    width: 100%;
    height: auto;
    display: block;
}

/* Tabletti */
@media (min-width: 769px) and (max-width: 1024px) {
    .kaksi-palstaa__sisalto {
        padding: 0rem !important;
    }
}

/* Mobiili */
@media (max-width: 768px) {
    .kaksi-palstaa {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem 1.25rem;
    }
    .kaksi-palstaa__sisalto,
    .kaksi-palstaa__kuva-wrapper {
        order: unset;
    }
    .kaksi-palstaa__sisalto {
        padding: 1rem;
    }
    .kaksi-palstaa--flipped .kaksi-palstaa__kuva-wrapper {
        order: -1;
    }
    .kaksi-palstaa--flipped .kaksi-palstaa__sisalto {
        order: 0;
    }
    .kaksi-palstaa__kuvake {
        max-height: 20px;
        max-width: 20px;
    }
    .kaksi-palstaa__kuvake--ikonikirjasto {
        font-size: 20px;
    }
}