/* =====================
   3. Kaksi palstaa – haitari
   ===================== */

.kaksi-palstaa-haitari {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: flex-start;
    padding: 5% 10%;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Taustakuva- ja taustaväri-kerrokset: kuva takana, väri sen päällä omalla peittävyydellään */
.kaksi-palstaa-haitari__tausta,
.kaksi-palstaa-haitari__tausta-vari {
    position: absolute;
    inset: 0;
}

/* Oletusjärjestys: teksti vasemmalla, haitari oikealla */
.kaksi-palstaa-haitari__sisalto,
.kaksi-palstaa-haitari__haitari {
    position: relative;
    z-index: 1;
}
.kaksi-palstaa-haitari__sisalto { order: 1; }
.kaksi-palstaa-haitari__haitari { order: 2; }

/* Flipped-tuki (jos asettelu halutaan toisinpäin) */
.kaksi-palstaa-haitari--flipped .kaksi-palstaa-haitari__sisalto { order: 2; }
.kaksi-palstaa-haitari--flipped .kaksi-palstaa-haitari__haitari { order: 1; }

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

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

/* Tekstieditori-alue */
.kaksi-palstaa-haitari__teksti {
    font-family: var(--theme-font-family);
    font-size: var(--theme-font-size);
    line-height: var(--theme-line-height);
    color: var(--kph-teksti-vari, var(--theme-text-color));
    margin-bottom: 1.5rem;
}

/* Kaksi palstaa -tila: sisältö jaettu kahteen omaan palstaan */
.kaksi-palstaa-haitari__palstat {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

/* Keskitä teksti pystysuunnassa: palstat keskitetään toisiinsa nähden, jos eripituisia */
.kaksi-palstaa-haitari__palstat--keskitetty-pysty {
    align-items: center;
}

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

/* Painike */
.kaksi-palstaa-haitari__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-haitari__painike:hover {
    gap: 0.7rem;
}

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

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

/* Haitariosio */
.kaksi-palstaa-haitari__haitarin-otsikko {
    font-family: var(--theme-font-family);
    color: var(--kph-teksti-vari, var(--theme-headings-color));
    margin-bottom: 2rem;
    font-size: 1.25rem;
    font-weight: 700;
}

.kaksi-palstaa-haitari__rivi {
    border-bottom: 1px solid var(--theme-palette-color-3);
}

/* Haitarin otsikko-elementti (semanttinen säiliö) */
.kaksi-palstaa-haitari__rivi-otsikko {
    margin: 0;
}

/* Haitarin painike otsikon sisällä */
.kaksi-palstaa-haitari__rivi-nappi {
    appearance: none;
    background: none;
    border: none;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 0;
    cursor: pointer;
    text-align: left;
    font-family: var(--theme-font-family);
    font-size: inherit;
    font-weight: 700;
    line-height: inherit;
    color: var(--kph-teksti-vari, var(--theme-headings-color));
    letter-spacing: 0.5px;
}
.kaksi-palstaa-haitari__rivi-nappi:focus-visible {
    outline: 2px solid var(--theme-palette-color-3, #000);
    outline-offset: 2px;
}

/* Nuoli-ikoni */
.kaksi-palstaa-haitari__ikoni {
    color: var(--theme-palette-color-3);
    font-size: 1.2rem;
    transition: transform 0.2s ease;
}

.kaksi-palstaa-haitari__rivi--auki .kaksi-palstaa-haitari__ikoni {
    transform: rotate(90deg);
}

/* Haitarin sisältöteksti */
.kaksi-palstaa-haitari__rivi-teksti {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding-left: 2.25rem;
    color: var(--kph-teksti-vari, var(--theme-text-color));
}

.kaksi-palstaa-haitari__rivi--auki .kaksi-palstaa-haitari__rivi-teksti {
    max-height: 1000px;
    padding-bottom: 1.25rem;
}

/* Kaksi palstaa + sisällön sijainti vasemmalla: palstat ja haitari pinottuna,
   molemmat täysleveinä, vasemmalle tasattuna (ei keskitetty-tilan 900px-rajausta) */
.kaksi-palstaa-haitari--kaksi-vasemmalla {
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.kaksi-palstaa-haitari--kaksi-vasemmalla .kaksi-palstaa-haitari__sisalto,
.kaksi-palstaa-haitari--kaksi-vasemmalla .kaksi-palstaa-haitari__haitari {
    order: unset;
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Keskitetty: yksi palsta, sisältö max 900px keskitettynä */
.kaksi-palstaa-haitari--keskitetty {
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.kaksi-palstaa-haitari--keskitetty .kaksi-palstaa-haitari__sisalto,
.kaksi-palstaa-haitari--keskitetty .kaksi-palstaa-haitari__haitari {
    order: unset;
    max-width: 900px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.kaksi-palstaa-haitari--keskitetty .kaksi-palstaa-haitari__sisalto {
    text-align: center;
}

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

.kaksi-palstaa-haitari--keskitetty .kaksi-palstaa-haitari__haitari {
    text-align: center;
}

.kaksi-palstaa-haitari--keskitetty .kaksi-palstaa-haitari__rivi-nappi {
    justify-content: center;
    text-align: center;
}

/* Tabletti: palstat ovat vielä vierekkäin, väliviiva pystysuorana rakojen välissä */
@media (min-width: 769px) and (max-width: 1024px) {
    .kaksi-palstaa-haitari__palsta + .kaksi-palstaa-haitari__palsta {
        border-left: 1px solid var(--theme-palette-color-3);
        padding-left: 2rem;
    }
}

/* Mobiili */
@media (max-width: 768px) {
    .kaksi-palstaa-haitari {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem 1.25rem;
    }
    .kaksi-palstaa-haitari__sisalto,
    .kaksi-palstaa-haitari--flipped .kaksi-palstaa-haitari__sisalto,
    .kaksi-palstaa-haitari__haitari,
    .kaksi-palstaa-haitari--flipped .kaksi-palstaa-haitari__haitari {
        order: unset;
    }
    .kaksi-palstaa-haitari__viiva {
        display: none;
    }
    .kaksi-palstaa-haitari__palstat {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    /* Väliviiva palstojen välissä, kun ne on pinottu */
    .kaksi-palstaa-haitari__palsta + .kaksi-palstaa-haitari__palsta {
        border-top: 1px solid var(--theme-palette-color-3);
        padding-top: 1.5rem;
    }
    .kaksi-palstaa-haitari__sisalto {
        border-left: 4px solid var(--theme-palette-color-3);
        padding-left: 1.25rem;
    }
    .kaksi-palstaa-haitari--flipped .kaksi-palstaa-haitari__sisalto {
        border-left: none;
        border-right: 4px solid var(--theme-palette-color-3);
        padding-left: 0;
        padding-right: 1.25rem;
    }
    .kaksi-palstaa-haitari--keskitetty .kaksi-palstaa-haitari__sisalto {
        border: none;
        padding-left: 0;
        padding-right: 0;
        text-align: center;
    }
    .kaksi-palstaa-haitari--keskitetty .kaksi-palstaa-haitari__viiva {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .kaksi-palstaa-haitari--keskitetty .kaksi-palstaa-haitari__haitari {
        text-align: center;
    }
    .kaksi-palstaa-haitari--keskitetty .kaksi-palstaa-haitari__rivi-nappi {
        justify-content: center;
        text-align: center;
    }
}