/* =====================
   4. Tekstipalsta
   ===================== */

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

.tekstipalsta__sisalto {
    max-width: 900px;
    margin: 0 auto;
}

/* Keskitetty */
.tekstipalsta--keskitetty .tekstipalsta__sisalto {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tekstipalsta--keskitetty .tekstipalsta__viiva {
    margin-left: auto;
    margin-right: auto;
}

.tekstipalsta--keskitetty .tekstipalsta__painike {
    align-self: center;
}

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

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

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

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

/* Kaksi palstaa */
.tekstipalsta--kaksi-palstaa .tekstipalsta__sisalto {
    max-width: 1200px;
}

.tekstipalsta--kaksi-palstaa .tekstipalsta__otsikko {
    text-align: center;
}

.tekstipalsta--kaksi-palstaa .tekstipalsta__viiva {
    margin-left: auto;
    margin-right: auto;
}

.tekstipalsta--kaksi-palstaa .tekstipalsta__teksti--intro {
    text-align: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.5rem;
}

.tekstipalsta__palstat {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.tekstipalsta__palstat .tekstipalsta__teksti:first-child {
    padding-right: 2.5rem;
    border-right: 1px solid var(--theme-palette-color-3);
}

.tekstipalsta__palstat .tekstipalsta__teksti:last-child {
    padding-left: 2.5rem;
}

/* Kaksi palstaa — painike */
.tekstipalsta--kaksi-palstaa .tekstipalsta__painike {
    display: block;
    width: fit-content;
    margin: 2.5rem auto 0;
}

.tekstipalsta--kaksi-palstaa .tekstipalsta__painike .tekstipalsta__painike-ikoni {
    margin-left: 0.4rem;
}

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

.tekstipalsta__painike:hover {
    gap: 0.7rem;
}

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

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

/* Vasemmalla — sisältölaatikko aina sivun vasempaan reunaan, riippumatta palstamäärästä */
.tekstipalsta--vasemmalla .tekstipalsta__sisalto {
    margin-left: 0;
    margin-right: auto;
}

/* Kaksi palstaa — vasemmalla */
.tekstipalsta--vasemmalla.tekstipalsta--kaksi-palstaa .tekstipalsta__otsikko {
    text-align: left;
}

.tekstipalsta--vasemmalla.tekstipalsta--kaksi-palstaa .tekstipalsta__viiva {
    margin-left: 0;
    margin-right: auto;
}

.tekstipalsta--vasemmalla.tekstipalsta--kaksi-palstaa .tekstipalsta__teksti--intro {
    text-align: left;
    margin-left: 0;
}

.tekstipalsta--vasemmalla.tekstipalsta--kaksi-palstaa .tekstipalsta__painike {
    margin-left: 0;
    margin-right: auto;
}

/* Mobiili */
@media (max-width: 768px) {
    .tekstipalsta {
        padding: 2rem 1.25rem;
    }
    .tekstipalsta__palstat {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .tekstipalsta__palstat .tekstipalsta__teksti {
        background-color: rgba(249, 249, 249, 0.30);
        border: 1px solid var(--theme-palette-color-3);
        border-radius: 6px;
        padding: 1.25rem;
        margin-bottom: 0;
    }
    .tekstipalsta__palstat .tekstipalsta__teksti:first-child {
        padding-right: 1.25rem;
        padding-bottom: 1.25rem;
        margin-bottom: 0;
    }
    .tekstipalsta__palstat .tekstipalsta__teksti:last-child {
        padding-left: 1.25rem;
    }
}