/*
 * Dos componentes:
 *   .detail-view  → vista detallada (fondo claro, pantalla completa, info+foto)
 *   .photo-zoom   → zoom puro (fondo oscuro, solo la foto, encima del detail-view)
 *
 * Flujo: click en una foto del grid/archivo → abre .detail-view
 *        click en la foto dentro del detail-view → abre .photo-zoom encima
 */

/* ========== VISTA DETALLADA ========== */
.detail-view {
    position: fixed; inset: 0; z-index: 1000;
    background: var(--panel-bg, #1b1a18);     /* carbón, a juego con la web */
    color: var(--fg, #e9e4d8);
    display: none;
    flex-direction: column;
    padding: 4rem 3rem 3rem;
    overflow-y: auto;
    opacity: 0; transition: opacity 0.25s ease;
}
.detail-view.open { display: flex; opacity: 1; }

.detail-close {
    position: fixed; top: 1.2rem; right: 1.5rem; z-index: 1001;
    background: none; border: 0; color: var(--fg, #e9e4d8);
    font-size: 2.2rem; line-height: 1;
    cursor: pointer; padding: 0.4rem 0.7rem;
    opacity: 0.6; transition: opacity 0.2s;
}
.detail-close:hover { opacity: 1; }

.detail-content {
    flex: 1; display: flex; flex-direction: row;
    gap: 3rem;
    max-width: 1600px; margin: 0 auto;
    width: 100%;
    align-items: center;
}

/* Imagen (izquierda) */
.detail-image-wrap {
    flex: 1 1 auto;
    min-width: 0; min-height: 0;
    display: flex; align-items: center; justify-content: center;
    cursor: zoom-in;
}
.detail-image-wrap img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 8rem);
    width: auto; height: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    user-select: none; -webkit-user-drag: none;
    transition: transform 0.3s ease;
}
.detail-image-wrap:hover img { transform: scale(1.005); }

/* Panel info (derecha) */
.detail-info {
    flex: 0 0 380px;
    max-width: 380px;
    display: flex; flex-direction: column;
    font-family: 'Inter', sans-serif;
    color: var(--fg, #e9e4d8);
    padding: 2rem 0;
    align-self: stretch;
}
.detail-info .text { flex: 0 0 auto; }
.detail-info .title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.4rem; font-weight: 500;
    line-height: 1.05;
    letter-spacing: 0.02em;
    color: var(--fg, #e9e4d8);
}
.detail-info .title.empty {
    font-style: italic; color: var(--muted, #8a8780); font-size: 1.2rem;
}
.detail-info .caption {
    margin-top: 1.2rem;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400; font-style: italic;
    font-size: 1.15rem; line-height: 1.55;
    color: var(--soft, #c5c0b4);
}
.detail-info .caption:empty { display: none; }
.detail-info .meta {
    margin-top: 1.8rem; padding-top: 1.4rem;
    border-top: 1px solid var(--line, #2c2a26);
    font-size: 0.7rem; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--muted, #8a8780);
    display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem;
}
.detail-info .meta span + span::before { content: '·'; margin-right: 0.6rem; opacity: 0.5; }

/* Botones empujados al fondo del panel */
.detail-info .actions {
    margin-top: auto;
    padding-top: 2rem;
    display: flex; flex-direction: column; gap: 0.6rem;
}
.detail-info .actions .cart-btn,
.detail-info .actions .mail-btn {
    width: 100%; justify-content: center;
    padding: 1rem 1.2rem;
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 0.75rem; letter-spacing: 0.25em; text-transform: uppercase;
    cursor: pointer; text-decoration: none;
    transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 0.6rem;
    border: 1px solid transparent;
}
.detail-info .actions svg.ic {
    width: 1.4em; height: 1.4em;
    stroke: currentColor;
    flex-shrink: 0;
}
.detail-info .actions .cart-btn {
    background: #c9a96e; color: #fff; border: 0;
}
.detail-info .actions .cart-btn.added { background: #6f8a5d; }
.detail-info .actions .cart-btn:hover { filter: brightness(1.1); }
.detail-info .actions .mail-btn {
    background: transparent; color: var(--fg, #e9e4d8);
    border: 1px solid var(--fg, #e9e4d8);
}
.detail-info .actions .mail-btn:hover {
    background: var(--fg, #e9e4d8); color: var(--on-fg, #171614);
}

/* Móvil / tablet vertical: apilado */
@media (max-width: 820px) {
    .detail-view { padding: 4rem 1.2rem 2rem; }
    .detail-content {
        flex-direction: column; gap: 1.5rem;
        align-items: stretch;
    }
    .detail-image-wrap { max-height: 55vh; flex: 0 0 auto; }
    .detail-image-wrap img { max-height: 55vh; }
    .detail-info {
        max-width: 100%; flex: 1 1 auto; padding: 0;
        align-self: auto;
    }
    .detail-info .title { font-size: 1.8rem; }
    .detail-info .caption { font-size: 1rem; margin-top: 0.7rem; }
    .detail-info .meta { margin-top: 0.9rem; padding-top: 0.7rem; }
    .detail-info .actions {
        margin-top: 1rem; padding-top: 0.8rem;
        flex-direction: row; flex-wrap: wrap;
    }
    .detail-info .actions .cart-btn,
    .detail-info .actions .mail-btn {
        flex: 1 1 140px;
        padding: 0.85rem 1rem;
    }
}

/* ========== ZOOM PURO (FONDO OSCURO) ========== */
.photo-zoom {
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(0, 0, 0, 0.96);
    display: none;
    align-items: center; justify-content: center;
    cursor: zoom-out;
    opacity: 0; transition: opacity 0.25s ease;
}
.photo-zoom.open { display: flex; opacity: 1; }
/* Marco blanco grueso — simula la copia impresa enmarcada. */
.photo-zoom-frame {
    background: #ffffff;
    padding: clamp(1.8rem, 3.75vmin, 3rem);
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
    max-width: 94vw; max-height: 94vh;
    display: flex; align-items: center; justify-content: center;
}
.photo-zoom-frame img {
    display: block;
    max-width: 100%;
    max-height: calc(94vh - 6rem);
    width: auto; height: auto;
    user-select: none; -webkit-user-drag: none;
    pointer-events: none;
}
.photo-zoom-close {
    position: fixed; top: 1.2rem; right: 1.5rem; z-index: 1101;
    background: none; border: 0; color: #fff;
    font-size: 2.2rem; line-height: 1;
    cursor: pointer; padding: 0.4rem 0.7rem;
    opacity: 0.7; transition: opacity 0.2s;
}
.photo-zoom-close:hover { opacity: 1; }
.photo-zoom-loading {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.6);
    font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase;
    pointer-events: none;
}
.photo-zoom.loaded .photo-zoom-loading { display: none; }