/* =====================
   14. Kuva-sisältölohkot
   ===================== */

.kuva-sisaltolohkot {
    display: grid;
    grid-template-columns: var(--ksl-kuva-leveys, 40%) var(--ksl-lohko-leveys, 60%);
    width: 100%;
}

.kuva-sisaltolohkot--peilattu {
    direction: rtl;
}

.kuva-sisaltolohkot--peilattu > * {
    direction: ltr;
}

/* Pääkuva */
.kuva-sisaltolohkot__kuva {
    overflow: hidden;
}

.kuva-sisaltolohkot__kuva-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Lohkot-sarake (rivit) */
.kuva-sisaltolohkot__lohkot {
    display: grid;
}

/* Yksittäinen rivi */
.kuva-sisaltolohkot__lohko--tekstilohko {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem 3rem;
}

/* Tekstilohkon ja alalohkon sisällön tasaus */
.kuva-sisaltolohkot__lohko--keskitetty,
.kuva-sisaltolohkot__alalohko--keskitetty {
    align-items: center;
    text-align: center;
}

.kuva-sisaltolohkot__lohko--keskitetty .kuva-sisaltolohkot__viiva,
.kuva-sisaltolohkot__alalohko--keskitetty .kuva-sisaltolohkot__viiva {
    margin-left: auto;
    margin-right: auto;
}

.kuva-sisaltolohkot__lohko--vasemmalla,
.kuva-sisaltolohkot__alalohko--vasemmalla {
    align-items: flex-start;
    text-align: left;
}

.kuva-sisaltolohkot__lohko--jaettu {
    display: grid;
}

.kuva-sisaltolohkot__lohko--jaettu--peilattu {
    direction: rtl;
}

.kuva-sisaltolohkot__lohko--jaettu--peilattu > * {
    direction: ltr;
}


/* Alalohkot */
.kuva-sisaltolohkot__alalohko--kuva {
    overflow: hidden;
}

.kuva-sisaltolohkot__alalohko-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kuva-sisaltolohkot__alalohko--sisalto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem 3rem;
}

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

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

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

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

.kuva-sisaltolohkot__teksti p {
    margin-bottom: 1em;
}

.kuva-sisaltolohkot__teksti p:last-child {
    margin-bottom: 0;
}

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

.kuva-sisaltolohkot__painike:hover {
    gap: 0.7rem;
}

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

.kuva-sisaltolohkot__painike-ikoni {
    font-size: 1em;
}

/* Ilman pääkuvaa — lohkot vie koko leveyden */
.kuva-sisaltolohkot--ilman-kuvaa {
    grid-template-columns: 1fr;
}

/* Tabletti */
@media (max-width: 1024px) {
    .kuva-sisaltolohkot,
    .kuva-sisaltolohkot--peilattu {
        grid-template-columns: 1fr;
        direction: ltr;
    }

    .kuva-sisaltolohkot__lohkot {
        grid-template-rows: unset !important;
        grid-auto-rows: auto;
    }

    .kuva-sisaltolohkot__lohko--jaettu {
        grid-template-columns: 1fr !important;
    }

    .kuva-sisaltolohkot__lohko--tekstilohko,
    .kuva-sisaltolohkot__alalohko--sisalto {
        padding: 2rem 2rem;
    }
}

/* Mobiili */
@media (max-width: 768px) {
    .kuva-sisaltolohkot,
    .kuva-sisaltolohkot--peilattu {
        grid-template-columns: 1fr;
        direction: ltr;
    }

    .kuva-sisaltolohkot__lohkot {
        grid-template-rows: unset !important;
        grid-auto-rows: auto;
    }

    .kuva-sisaltolohkot__lohko--jaettu {
        grid-template-columns: 1fr !important;
    }

    .kuva-sisaltolohkot__alalohko--kuva {
        height: 220px;
    }

    .kuva-sisaltolohkot__lohko--tekstilohko,
    .kuva-sisaltolohkot__alalohko--sisalto {
        padding: 2rem 1.25rem;
    }
}