/*
    Onkaos Child — estilos de Projects, enquiries y ajustes (octubre 2026)
    Se carga después de main.css y media.css del padre.
    Usa solo las variables del tema (variables.css): colores, unidades y tamaños.

    Index:
        1 -- Títulos de sección
        2 -- Estados y tipos (píldoras)
        3 -- Tarjetas de proyecto (home + Projects)
        4 -- Página Projects
        5 -- Página de proyecto
        6 -- Enlaces Enquire
        7 -- Perfil
        8 -- Ajustes de post y obra
        9 -- Móvil
*/


/* 1 -- Títulos de sección */

.projects-section-title {
    font-size: var(--txt-body);
    line-height: var(--txt-body-lh);
    font-weight: var(--fw-regular);
    text-align: center;
}

.home-projects {
    padding: var(--unit-6) var(--padd) 0 var(--padd);
}

.home-index-title {
    margin-top: var(--unit-12);
}

.profile-index-title {
    padding: var(--unit-8) var(--padd) 0 var(--padd);
}


/* 2 -- Estados y tipos */

.button.status-on-view {
    background-color: var(--c-white);
    color: var(--c-orange);
}

.button.status-upcoming {
    background-color: var(--c-white);
    color: var(--c-black);
}

.button.project-type {
    background-color: var(--c-white);
    color: var(--c-blue);
}

.button.status-on-view:hover,
.button.status-upcoming:hover,
.button.project-type:hover {
    cursor: default;
}


/* 3 -- Tarjetas de proyecto */

.project-card {
    display: flex;
    flex-direction: column;
    gap: var(--unit-3);           /* imagen ↔ datos: 24 px */
    min-width: 0;
}

.project-card p {
    text-indent: 0px;
}

.project-card--feature {
    flex-direction: row;
    align-items: flex-end;
    gap: var(--unit-6);           /* imagen grande ↔ texto: 48 px */
}

.project-card--feature .project-card-image {
    flex: 2 1 0;
    min-width: 0;
}

.project-card--feature .project-card-info {
    flex: 1 1 0;
    min-width: 0;
}

.project-card-image {
    display: block;
}

.project-card-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    object-position: left bottom;
}

.project-card-info {
    row-gap: var(--unit-2);       /* entre datos de la tarjeta: 16 px */
}

.project-card-title {
    font-size: var(--txt-h2);
    line-height: var(--txt-h2-lh);
    font-weight: var(--fw-regular);
}

.project-card-title a {
    color: var(--c-black);
    text-decoration: none;
}

.project-card-title a:hover {
    text-decoration: underline;
}

.project-card-meta {
    font-size: var(--txt-body);
    line-height: var(--txt-body-lh);
    font-weight: var(--fw-regular);
}

.project-cards {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--unit-8) var(--unit-3);
}

.project-cards > .project-card {
    flex: 1 1 calc(50% - var(--unit-3));
}


/* 4 -- Página Projects */

.projects-page {
    flex: 1;
    padding: var(--unit-6) var(--padd) var(--unit-15) var(--padd);
    row-gap: var(--unit-12);
}

.projects-section {
    row-gap: var(--unit-3);       /* título de sección ↔ contenido: 24 px */
}

.projects-year-label,
.projects-row {
    font-size: var(--txt-body);
    line-height: var(--txt-body-lh);
    font-weight: var(--fw-regular);
    padding: var(--unit-3) 0px;
    border-bottom: 0.15rem solid var(--c-black);
}

.projects-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--unit) var(--unit-3);
    color: var(--c-black);
    text-decoration: none;
}


.projects-row-dates   { flex: 0 0 24rem; }
.projects-row-title   { flex: 2 1 32rem; }
.projects-row-artists { flex: 1 1 22rem; }
.projects-row-type    { flex: 0 0 14rem; color: var(--c-blue); }
.projects-row-venue   { flex: 1 1 20rem; }


/* 5 -- Página de proyecto */

.project-single {
    flex: 1;
    row-gap: 0px;
    margin-bottom: var(--unit-15);
}

.project-single p {
    text-indent: 0px;
}

.project-hero {
    padding: 0px var(--padd) var(--unit-6) var(--padd);
    row-gap: var(--unit);
}

/* Mismo tamaño que la imagen grande de los posts: 8/12 centrado, máx. 70vh */
.project-hero {
    align-items: center;
}

.project-hero figcaption {
    width: 66.666%;
}

.project-hero img {
    display: block;
    width: 66.666%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
}

.project-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--unit-6) var(--unit-3);
    padding: var(--unit-8) var(--padd) var(--unit-6) var(--padd);
}

.project-head-main {
    flex: 2 1 0;
    min-width: 0;
    row-gap: var(--unit-3);
}

.project-head-info {
    flex: 1 1 0;
    min-width: 0;
    row-gap: var(--unit-3);
}

.project-head h1 {
    font-size: var(--txt-h1);
    line-height: var(--txt-h1-lh);
    font-weight: var(--fw-regular);
}

.project-head p,
.project-back {
    font-size: var(--txt-body);
    line-height: var(--txt-body-lh);
    font-weight: var(--fw-regular);
}

.project-back {
    color: var(--c-black);
    text-decoration: none;
}

.project-back:hover {
    text-decoration: underline;
}

.project-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--unit) var(--unit-3);
}

/* Créditos */
.project-credits {
    row-gap: var(--unit-3);
    margin-top: var(--unit-12);
}

.project-credits h2 {
    font-size: var(--txt-body);
    line-height: var(--txt-body-lh);
    font-weight: var(--fw-regular);
    text-align: center;
}

.project-credits-list {
    border-bottom: 0.15rem solid var(--c-black);
}

.project-credits-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--unit) var(--unit-3);
    padding: var(--unit-3) 0px;
    border-top: 0.15rem solid var(--c-black);
    font-size: var(--txt-body);
    line-height: var(--txt-body-lh);
    font-weight: var(--fw-regular);
}

.project-credits-role {
    flex: 0 0 33.333%;
}

.project-credits-name {
    flex: 1 1 0;
}


/* 6 -- Enlaces Enquire */

a.enquire-link {
    font-size: var(--txt-body);
    line-height: var(--txt-body-lh);
    font-weight: var(--fw-regular);
    color: var(--c-blue);
    text-decoration: none;
}

a.enquire-link:hover {
    text-decoration: underline;
}

.work-content .work-intro a.enquire-link {
    color: var(--c-blue);
    align-self: flex-start;
}

.work-content .work-intro a.enquire-link::before {
    content: none;
}


/* 7 -- Perfil */

.profile-work .profile-enquire {
    align-self: center;
}

.profile-projects {
    row-gap: var(--unit-3);
}

.profile-projects tr:last-child {
    border-bottom: 0.15rem solid var(--c-black);
}

.profile-projects .profile-projects-title {
    flex: 1;
}


/* 8 -- Ajustes de post y obra */

.post-img-small img {
    width: 100%;
    height: auto;
}

@media (min-width: 801px) {
    .work-intro h1 {
        font-size: var(--txt-h1);
        line-height: var(--txt-h1-lh);
    }
}


/* 9 -- Móvil */

@media (max-width: 800px) {

    .projects-section-title,
    .project-card-meta,
    .projects-year-label,
    .projects-row,
    .project-head p,
    .project-back,
    .project-credits h2,
    .project-credits-row,
    a.enquire-link {
        font-size: var(--txt-body-s);
        line-height: var(--txt-body-s-lh);
    }

    .project-card-title {
        font-size: var(--txt-h2-s);
        line-height: var(--txt-h2-s-lh);
    }

    .project-head h1 {
        font-size: var(--txt-h1-s);
        line-height: var(--txt-h1-s-lh);
    }

    .home-projects,
    .projects-page,
    .project-hero,
    .project-head,
    .profile-index-title {
        padding-left: var(--padd-s);
        padding-right: var(--padd-s);
    }

    .projects-page {
        padding-top: var(--unit-4);
        row-gap: var(--unit-8);
    }

    .project-card--feature,
    .project-head {
        flex-direction: column;
        align-items: stretch;
    }

    .project-card--feature {
        gap: var(--unit-3);
    }

    .project-card--feature .project-card-image,
    .project-card--feature .project-card-info,
    .project-head-main,
    .project-head-info {
        flex: none;
        width: 100%;
    }

    .project-cards > .project-card {
        flex-basis: 100%;
    }

    .projects-row-dates,
    .projects-row-type {
        flex-basis: auto;
    }

    .project-head {
        padding-top: var(--unit-5);
        padding-bottom: var(--unit-4);
        gap: var(--unit-4);
    }

    .project-credits {
        margin-top: var(--unit-8);
    }

    .project-hero figcaption,
    .project-hero img {
        width: 100%;
    }

    .project-credits-role {
        flex-basis: 100%;
    }
}


/* 10 -- Enlaces naranjas dentro del texto: siempre con ↗
   (párrafos, destacados y entrevistas de posts, páginas y proyectos;
   texto de las obras). No hace falta escribir la flecha a mano. */

.post-paragraph a::after,
.post-highlight a::after,
.post-interview a::after,
.single-work-paragraph a::after {
    content: "\00a0\2197";
}

/* Si un enlace envuelve una imagen, sin flecha */
.post-paragraph a:has(img)::after,
.post-highlight a:has(img)::after,
.post-interview a:has(img)::after,
.single-work-paragraph a:has(img)::after {
    content: none;
}

.projects-row-wide {
    flex: 1 1 42rem;
}


/* 11 -- Ubicación enlazada a Google Maps */

a.venue-link {
    color: var(--c-blue);
    text-decoration: none;
}

a.venue-link:hover {
    text-decoration: underline;
}


/* 12 -- Móvil: ajustes revisados en el navegador a 375 px */

@media (max-width: 800px) {

    /* Horario, "Get tickets" y botón EN/ES de los posts: tamaño de móvil
       (los estilos antiguos del child los dejaban a 24 px con !important) */
    body .post-key-info,
    body .post-key-info p,
    body .post-key-info a,
    body a.post-key-info-tickets,
    body a.lang-btn,
    body a.lang-btn:hover {
        font-size: var(--txt-body-s) !important;
        line-height: var(--txt-body-s-lh) !important;
    }

    body .post-key-info {
        gap: var(--unit) !important;
    }

    /* Tablas de Past y Past events: cada dato en su línea, alineado a la izquierda */
    .projects-row {
        flex-direction: column;
        gap: var(--unit-middle);
    }

    .projects-row > span {
        flex: none;
    }
}


/* 13 -- Visor de Verse (Verse Frame): proyectos, posts y obras
   Mismo ancho que el texto (8/12), pie arriba como las imágenes y
   "View on Verse ↗" debajo. El contenido del visor lo dibuja Verse. */

.verse-frame {
    row-gap: var(--unit);
    margin-top: var(--unit-6);    /* separación con el bloque anterior: 48 px */
    scroll-margin-top: var(--unit-12);
}

.verse-frame-box {
    width: 100%;
}

.verse-frame .verse-frame-link {
    align-self: flex-start;
    margin-top: var(--unit);
}

.work-content .verse-frame {
    margin-top: 0px;              /* en la obra ya hay 48 px entre bloques */
}