/* ========================================
   DESIDERIO - SOBRE MÍ PAGE STYLES
   ======================================== */

/* ----------------------------------------
   ABOUT PAGE LAYOUT - Parte 1 (Biografía)
   ---------------------------------------- */
.about-page {
    background-color: #F4F2EC;
    padding: var(--space-24) 0;
    min-height: calc(100vh - var(--header-height));
    display: flex;
    align-items: center;
}

.about-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-8);
    width: 100%;
}

.about-grid {
    display: grid;
    grid-template-columns: auto auto;
    gap: 10rem;
    align-items: center;
    justify-content: center;
}

/* ----------------------------------------
   ARTIST IMAGE (Derecha)
   ---------------------------------------- */
.about-image-wrapper {
    position: sticky;
    top: calc(var(--header-height) + var(--space-8));
}

.about-image {
    width: 100%;
    max-width: 550px;
}

.about-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ----------------------------------------
   ARTIST BIO (Izquierda)
   ---------------------------------------- */
.about-content {
    max-width: 600px;
    margin-top: -8rem;
}

.about-title-wrapper {
    margin-bottom: 5rem;
    display: block;
    text-align: center;
    padding-left: 2rem;
}

.about-title {
    font-family: 'Gilda Display', serif;
    font-size: 2.75rem;
    margin-bottom: 0;
    letter-spacing: 0;
    line-height: 1;
    display: block;
    margin-right: 6em;
}

.about-subtitle {
    font-family: 'Gilda Display', serif;
    font-size: 3.5rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #000000;
    margin-top: 0;
    margin-left: 0;
    line-height: 1.1;
    display: block;
    transform: scale(0.95, 1.03);
    transform-origin: left bottom;
}

.about-bio {
    font-family: 'Gilda Display', serif;
    font-size: 1.75rem;
    line-height: 1.2;
    color: var(--color-text);
    text-align: justify;
}

.about-bio p {
    margin-bottom: var(--space-6);
}

/* ----------------------------------------
   EXHIBITIONS PAGE - Parte 2 (Fondo alternado)
   ---------------------------------------- */
.exhibitions-page {
    background-color: #BDBAAA;
    padding: var(--space-16) 0;
    min-height: calc(100vh - var(--header-height));
}

.exhibitions-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-8);
}

.exhibitions-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    max-width: 900px;
    margin: 0 auto;
}

.exhibitions-title {
    font-family: 'Manrope', sans-serif;
    font-size: var(--text-3xl);
    font-weight: 600;
    margin-bottom: var(--space-12);
    letter-spacing: 0.05em;
    text-align: center;
}

.exhibitions-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    max-width: 900px;
    margin: 0 auto;
}

.exhibitions-divider {
    width: 60%;
    height: 2px;
    background-color: var(--color-text);
    opacity: 0.3;
}

.exhibition-category {
    margin-bottom: var(--space-6);
    margin-top: 0;
    width: 100%;
    max-width: 600px;
}

.exhibition-category:first-child {
    margin-top: 0;
}

.exhibition-category-title {
    font-family: 'Manrope', sans-serif;
    font-size: var(--text-3xl);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-6);
    color: var(--color-text);
    text-align: center;
    white-space: nowrap;
}

.exhibition-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: center;
    text-align: center;
}

.exhibition-item {
    font-family: 'Manrope', sans-serif;
    font-size: var(--text-sm);
    line-height: 1.6;
}

.exhibition-year {
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}

.exhibition-details {
    color: var(--color-text-secondary);
}

.exhibition-location {
    font-style: italic;
}

/* ----------------------------------------
   RESPONSIVE STYLES
   ---------------------------------------- */
@media (max-width: 1024px) {
    .about-grid {
        gap: var(--space-6);
    }

    .about-image-wrapper {
        position: relative;
        top: auto;
    }

    .about-title {
        font-size: var(--text-3xl);
    }

    .about-subtitle {
        font-size: var(--text-3xl);
    }

    .about-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .about-title-wrapper {
        text-align: center;
    }

    .about-bio {
        text-align: center;
    }

    .exhibitions-grid {
        gap: var(--space-6);
    }

    .exhibitions-divider {
        width: 70%;
    }
}

@media (max-width: 768px) {
    .about-container,
    .exhibitions-container {
        padding: 0 var(--space-4);
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
        justify-items: center;
    }

    .about-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .about-title-wrapper {
        text-align: center;
    }

    .about-title {
        font-size: var(--text-xl);
    }

    .about-subtitle {
        font-size: var(--text-2xl);
        margin-left: 0;
    }

    .about-bio {
        font-size: var(--text-base);
        text-align: center;
    }

    .about-image-wrapper {
        position: relative;
        top: auto;
        max-width: 300px;
        margin: 0 auto;
    }

    .exhibitions-grid {
        gap: var(--space-6);
    }

    .exhibitions-divider {
        width: 80%;
    }

    .exhibition-category {
        max-width: 100%;
    }

    .exhibitions-title {
        font-size: var(--text-2xl);
    }

    .exhibition-category-title {
        font-size: var(--text-2xl);
    }

    .exhibition-list {
        align-items: center;
    }

    .exhibition-item {
        font-size: var(--text-xs);
        flex-direction: column;
        gap: var(--space-2);
        text-align: center;
    }

    .exhibition-year {
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .about-image-wrapper {
        max-width: 250px;
    }

    .about-title {
        font-size: var(--text-xl);
    }

    .about-subtitle {
        font-size: var(--text-2xl);
    }

    .about-page,
    .exhibitions-page {
        padding: var(--space-16) 0;
    }
}