/* ===== YKSITTÄINEN TEOSSIVU ===== */

.detail-layout {
    display: flex;
    min-height: 100vh;
    max-width: 2000px;
    margin: 0 auto;
    align-items: center;
}

/* VASEN PUOLI (teksti) */
.detail-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(30px, 5vw, 80px);
}

.detail-brand {
    font-family: "Abhaya Libre", serif;
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    color: inherit;
    margin: 0 0 var(--spacing-l) 0;
}

.detail-title {
    font-size: clamp(2.5rem, 5vw, 5rem);
    line-height: 0.95;
    color: inherit;
    font-family: "Lexend Giga", sans-serif;
    margin: 0 0 var(--spacing-m) 0;
    letter-spacing: 2px;
}

/* Metatiedot */
.work-meta {
    display: flex;
    gap: var(--spacing-m);
    margin-bottom: var(--spacing-l);
    flex-wrap: wrap;
}

.work-meta span {
    font-family: "Abhaya Libre", serif;
    font-size: clamp(1rem, 1.2vw, 1rem);
    color: inherit;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.work-meta span:not(:last-child)::after {
    content: "·";
    margin-left: var(--spacing-m);
    color: inherit;
}

/* Kuvausteksti */
.work-description {
    font-family: "Abhaya Libre", serif;
    font-size: clamp(1rem, 1.5vw, 2rem);
    line-height: 1.7;
    color: inherit;
    max-width: 700px;
    margin: 0 0 var(--spacing-xl) 0;
}

/* Takaisin linkki */
.back-link {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    font-family: "Abhaya Libre", serif;
    font-size: clamp(1rem, 1.5vw, 2rem);
    letter-spacing: 1px;
    align-self: flex-end;
}

.back-link:hover {
    opacity: 0.6;
}

/* OIKEA PUOLI (kuva) */
.detail-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-l);
}

/* Kuva + caption yhdessä */
.img-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    max-width: 100%;
    max-height: 90vh;
}

.img-wrapper img {
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.detail-caption {
    font-family: "Abhaya Libre", serif;
    font-size: 1.5rem;
    color: inherit;
    margin-top: var(--spacing-s);
    letter-spacing: 1px;
}

/* ===== TEEMAT ===== */

.theme-faenor {
    background-color: #1a0301;
    color: #d2e4c4;
}

.theme-aphrodite {
    background-color: #fff4f9;
    color: #e06e6f;
}

/* ===== MEDIAKYSELYT ===== */

@media (max-width: 1280px) {
    .detail-title {
        font-size: clamp(2rem, 4vw, 4rem);
    }
}

@media (max-width: 768px) {
    .detail-layout {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .detail-left {
        padding: var(--spacing-m) var(--spacing-s);
    }

    .detail-right {
        padding: var(--spacing-s);
    }

    .img-wrapper img {
        max-height: 60vh;
        width: 100%;
    }

    .detail-title {
        font-size: 2.5rem;
    }

    .work-meta {
        gap: var(--spacing-s);
    }
}

@media (min-width: 2000px) {
    h1 {
        font-size: clamp(4rem, 5vw, 7rem);
    }
    .bio,
    .standpoint {
        font-size: clamp(1.2rem, 1.5vw, 1.8rem);
        max-width: 700px;
    }
    .back a {
        font-size: 1.4rem;
    }
}