/*
 * main.css — Lay Good Things Luzmi
 * Paleta exacta del PSD GOOD THINGS.
 */

/* ===================== VARIABLES ===================== */
:root {
    /* Equivalente sRGB del #EFDEDE definido en el PSD Adobe RGB (1998). */
    --lm-bg:      #F6DFDF;
    --lm-ink:     #1A1A1A;
    --lm-muted:   #8B8B8B;
    --lm-white:   #F8F8F8;
    --lm-field:   #F8F8F8;
    --lm-line:    #D9C7C2;
    --lm-cream:   #F8F8F8;
    --lm-font:    'Lucida Console', 'Courier New', monospace;
    --lm-sidebar: 320px;
}

/* ===================== FUENTE SELF-HOSTED ===================== */
/* (se carga desde fonts.css) */

/* ===================== RESET BODY ===================== */
body.layout-a {
    background: var(--lm-bg) !important;
    font-family: var(--lm-font) !important;
    color: var(--lm-ink) !important;
    margin: 0;
}

/* Suprimir elementos del tema padre que no usamos */
body.layout-a .sitetitle,
body.layout-a .laynav,
body.layout-a #lay-nav,
body.layout-a .lay-intro,
body.layout-a .lay-content > *:not(.site),
body.layout-a > *:not(.site):not(.gtlz-cursor):not(script):not(style) {
    display: none !important;
}

/* ===================== LAYOUT 3 COLUMNAS ===================== */
.site {
    display: grid;
    grid-template-columns: var(--lm-sidebar) 1fr var(--lm-sidebar);
    min-height: 100vh;
    position: relative;
}

/* ===================== SIDEBAR IZQUIERDO ===================== */
.site__sidebar--left {
    background: var(--lm-bg);
    padding: 40px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: sticky;
    top: 0;
    height: 100vh;
    box-sizing: border-box;
}

.site__logo {
    font-family: var(--lm-font);
    font-size: 18px;
    color: var(--lm-ink) !important;
    text-decoration: none !important;
    line-height: 1.3;
    display: block;
}

.site__nav-left {
    margin-top: auto;
}

.site__nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site__nav-list li {
    margin-bottom: 2px;
}

.site__nav-list a {
    font-family: var(--lm-font) !important;
    font-size: 13px !important;
    color: var(--lm-ink) !important;
    text-decoration: none !important;
    line-height: 1.8;
    background: none !important;
    padding: 0 !important;
}

.site__nav-list a:hover {
    text-decoration: underline !important;
}

.site__nav-list .current-menu-item > a {
    font-weight: 700;
}

/* Sub-items (años en pinturas) */
.site__nav-list .sub-menu {
    list-style: none;
    padding: 2px 0 6px 0;
    margin: 0;
    display: none;
}
.site__nav-list li.is-submenu-open > .sub-menu { display: block; }
.site__nav-list .sub-menu a {
    font-size: 11px !important;
    color: var(--lm-muted) !important;
}

.site__nav-list .site__exhibition-submenu {
    padding: 2px 0 6px;
}

.site__exhibition-submenu a {
    color: var(--lm-ink) !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    text-transform: uppercase;
}

.site__exhibition-submenu .is-current > a {
    text-decoration: underline !important;
}

.site__exhibition-year {
    white-space: nowrap;
}

/* ===================== CONTENIDO PRINCIPAL ===================== */
.site__content {
    padding: 40px 48px 40px 40px;
    background: var(--lm-white);
    min-height: 100vh;
}

/* ===================== SIDEBAR DERECHO ===================== */
.site__sidebar--right {
    background: var(--lm-white);
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: sticky;
    top: 0;
    height: 100vh;
    box-sizing: border-box;
}

.site__nav-right .site__nav-list {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    align-items: center;
}

.site__nav-right .site__nav-list a {
    font-size: 13px !important;
}

.site__handles {
    margin-top: auto;
    font-size: 11px;
    color: var(--lm-muted);
    text-align: right;
    line-height: 1.8;
}

/* ===================== GRILLA OBRAS ===================== */
.page__subtitle {
    font-family: var(--lm-font);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 24px;
    color: var(--lm-ink);
}

.obra-grid {
    columns: 3;
    column-gap: 8px;
}

.obra-grid__item {
    display: block;
    text-decoration: none;
    color: inherit;
    break-inside: avoid;
    margin-bottom: 8px;
}

.obra-grid__item img {
    width: 100%;
    height: auto;
    display: block;
}

.obra-grid__caption {
    font-size: 11px;
    color: var(--lm-muted);
    padding: 4px 0 0;
    line-height: 1.5;
}

/* ===================== ABOUT ===================== */
.lm-about-titulo {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--lm-muted);
    margin: 0 0 20px;
}

.lm-about-foto img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 28px;
}

.lm-about-bio {
    font-size: 12px;
    line-height: 1.7;
    column-count: 2;
    column-gap: 32px;
    margin-bottom: 32px;
}

.lm-about-bio p { margin: 0 0 1em; }

.lm-about-social {
    font-size: 11px;
    color: var(--lm-muted);
    text-align: right;
}

.lm-about-social a {
    color: var(--lm-ink) !important;
    text-decoration: none;
}

/* Listas exhibiciones / residencias */
.page__list-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 8px;
    border-bottom: 1px solid var(--lm-line);
    padding-bottom: 4px;
}

.page__list ul { list-style: none; margin: 0; padding: 0; }

.page__list li {
    display: grid;
    grid-template-columns: 40px 1fr 1fr;
    gap: 12px;
    padding: 4px 0;
    font-size: 11px;
    border-bottom: 1px dotted var(--lm-line);
    color: var(--lm-ink);
}

/* ===================== CONTACTO ===================== */
.page--contacto {
    max-width: 800px;
}

.page__contacto-title {
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 28px;
}

/* ===================== MÓVIL ===================== */
@media (max-width: 900px) {
    .site {
        grid-template-columns: 1fr;
    }
    .site__sidebar--left,
    .site__sidebar--right {
        position: static;
        height: auto;
    }
    .lm-about-bio { column-count: 1; }
    .obra-grid { columns: 2; }
}
/* ===================== AJUSTES FINALES PSD ===================== */

/* Logo más visible */
.site__logo {
    font-size: 18px;
    line-height: 1.4;
    white-space: normal;
    word-break: break-word;
}

/* Nav sidebar derecho — mismo tamaño que izquierdo */
.site__nav-right .site__nav-list a {
    font-size: 13px !important;
    line-height: 1.9 !important;
}

/* Sidebar derecho: handles (social) al fondo */
.site__sidebar--right {
    justify-content: space-between;
}

/* Handles siempre visibles */
.site__handles {
    font-size: 11px;
    color: var(--lm-ink) !important;
    text-align: right;
    line-height: 1.9;
}

.site__handles a {
    color: var(--lm-ink) !important;
    text-decoration: none;
    display: block;
    font-size: 11px;
}
.site__handles a:hover { text-decoration: underline; }

/* ===================== MÓVIL 430px ===================== */
@media (max-width: 430px) {
    /* Layout: sidebar izquierdo arriba (logo + nav), contenido, sidebar derecho abajo (handles) */
    .site {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
    }

    .site__sidebar--left {
        padding: 16px 20px 12px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--lm-line);
    }

    /* Logo visible y compacto */
    .site__logo {
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 60%;
    }

    /* Nav izquierda: horizontal en mobile */
    .site__nav-left {
        margin-top: 0;
    }

    .site__nav-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 16px;
    }

    .site__nav-list li { margin-bottom: 0; }

    .site__nav-list a {
        font-size: 12px !important;
        line-height: 1.6 !important;
    }

.site__nav-list .sub-menu {
        display: none; /* ocultar sub-menú de años en mobile */
    }

    /* Contenido: padding reducido */
    .site__content {
        padding: 20px 16px;
        min-height: auto;
    }

    /* Sidebar derecho: compacto al fondo */
    .site__sidebar--right {
        padding: 12px 20px 16px;
        border-top: 1px solid var(--lm-line);
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }

    .site__nav-right {
        display: none; /* nav derecha oculta — ya está en sidebar izq */
    }

    .site__handles {
        margin-top: 0;
        text-align: right;
        font-size: 11px;
    }

    /* Grilla obras: 1 columna en mobile pequeño */
    .obra-grid {
        columns: 1;
    }

    /* About: columnas → 1 col, foto responsive */
    .lm-about-bio {
        column-count: 1;
        font-size: 14px;
    }

    .lm-about-foto img {
        width: 100%;
        max-width: 320px;
        margin: 0 auto 20px;
    }

    /* Exhibiciones lista: grid 3 cols → apilado */
    .page__list li {
        grid-template-columns: 36px 1fr;
        gap: 8px;
        font-size: 12px;
    }

    .page__list li > *:last-child {
        grid-column: 2;
    }
}
.submenu-toggle { display:none; }
.is-catalog-empty > a { opacity:.65; }


/* ===== Ocultar iconos sociales Lay en área de contenido ===== */
/* Las redes sociales solo van en sidebars; el content de exhibiciones no debe mostrarlos */
body.layout-a .site__content .lay-socialmedia-icons { display: none !important; }

/* ===================== PSD FIX: nav-right overlay (2026-09-15) ===================== */
/* Solo desktop ≥901px: en mobile los breakpoints regulares toman control */
@media (min-width: 901px) {
    /* 1. Colapsar columna derecha — galería ocupa todo el ancho disponible */
    body.layout-a .site {
        grid-template-columns: var(--lm-sidebar) 1fr;
    }

    /* 2. Sidebar derecho: fuera del flujo del grid, overlay en esquina superior derecha */
    body.layout-a .site__sidebar--right {
        position: absolute !important;
        top: 0;
        right: 0;
        background: transparent !important;
        padding: 0 !important;
        height: auto !important;
        width: auto !important;
        border: none !important;
    }

    /* 3. nav-right: texto flotante sobre imágenes, sin fondo */
    body.layout-a .site__nav-right {
        position: absolute;
        top: 40px;
        /* PSD: la ultima letra de "Contacto" termina a 90 px del borde. */
        right: 90px;
        background: transparent !important;
        z-index: 10;
    }

    /* 4. Ocultar handles en páginas internas */
    body.layout-a .site__handles {
        display: none !important;
    }
}

/* ===== Fondo blanco en páginas de obras (no HOME) ===== */
/* Evita que el fondo salmon del body se filtre en Pinturas/Papel/Exhibiciones */
body.page-template-page-pinturas,
body.page-template-page-papel,
body.tax-serie {
    background: var(--lm-cream) !important;
}

body.page-template-page-pinturas .site,
body.page-template-page-papel .site,
body.tax-serie .site {
    background: var(--lm-white);
}

/* Cursor gráfico entregado por la clienta. */
@media (hover: hover) and (pointer: fine) {
    html.gtlz-horse-cursor,
    html.gtlz-horse-cursor body,
    html.gtlz-horse-cursor body * { cursor:none !important; }
    .gtlz-cursor {
        position:fixed; left:0; top:0; width:45px; height:51px;
        overflow:hidden; pointer-events:none; z-index:2147483647;
        transform:translate(-44px,-25px); opacity:0;
    }
    .gtlz-cursor.is-visible { opacity:1; }
    .gtlz-cursor img {
        position:absolute; width:84px; height:120px; max-width:none;
        left:-16px; top:-20px; display:block;
    }
    .gtlz-cursor.is-left { transform:translate(0,-25px); }
    .gtlz-cursor.is-left img { left:-23px; transform:scaleX(-1); }
}
/* ===== HOME — texto blanco sobre carousel ===== */
/* El Lay builder genera color:#1A1A1A en su CSS inline, pero el fondo del carousel
   tiene zonas oscuras donde el texto negro es invisible. Override a blanco. */
body.home .sitetitle-txt-inner,
body.home .sitetitle-txt-inner span,
body.home .tagline {
    color: #ffffff !important;
}
body.home nav.laynav a,
body.home nav.laynav span {
    color: #ffffff !important;
}

/* ===== HOME mobile — fixes ===== */
/* Título en mobile usa .mobile-title, no .sitetitle-txt-inner */
body.home .mobile-title,
body.home .mobile-title * {
    color: #ffffff !important;
}
/* Eliminar scrollbar forzado que deja franja blanca de 15px en mobile */
html:has(body.home) {
    overflow: hidden !important;
}