/* =====================================================
   Lithography Lab 63 v2.0 — Frontend Stylesheet
   Techniques: Lithography · Etching · Woodcut · Screenprint
   Additions: Multicolour · Drying · Aging · Imperfections
   ===================================================== */

/* ── Custom Properties ──────────────────────────────── */
.litho-lab-63-widget {
    --litho-phase-active:  #c17c2a;
    --litho-phase-done:    #7a9a5a;
    --litho-accent:        #8b4513;
    --litho-paper:         #f8f2e4;
    --litho-ink:           #1a1008;
    --litho-radius:        4px;
    font-family: 'Georgia','Times New Roman',serif;
}

/* ── Grid ───────────────────────────────────────────── */
.litho-lab-grid {
    display: grid;
    gap: 24px;
    /* Default: 2 columns. Elementor responsive_control overrides per breakpoint. */
    grid-template-columns: repeat(2, 1fr);
}
/* Fallback classes (used if responsive_control CSS isn't generated yet) */
.litho-cols-1 { grid-template-columns: 1fr; }
.litho-cols-2 { grid-template-columns: repeat(2, 1fr); }
.litho-cols-3 { grid-template-columns: repeat(3, 1fr); }
.litho-cols-4 { grid-template-columns: repeat(4, 1fr); }
/* Hard mobile fallback */
@media (max-width: 480px) {
    .litho-lab-grid { grid-template-columns: 1fr !important; }
}

/* ── Stone / Surface Wrapper ────────────────────────── */
.litho-stone-wrapper {
    position:relative; aspect-ratio:4/3;
    border-radius:var(--litho-radius);
    overflow:hidden; cursor:crosshair;
    box-shadow:0 2px 8px rgba(0,0,0,.18),0 8px 24px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.15);
    transition:box-shadow .3s ease, transform .3s ease;
}
.litho-stone-wrapper:hover {
    box-shadow:0 4px 16px rgba(0,0,0,.28),0 16px 40px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.2);
    transform:translateY(-2px);
}

/* Surface backgrounds (canvas is drawn on top, these are fallbacks) */
.surface-limestone { background:#d4c5a9; }
.surface-granite   { background:#909090; }
.surface-marble    { background:#e8e4f0; }
.surface-copper    { background:#b4712a; }
.surface-wood      { background:#8b5e3c; }
.surface-mesh      { background:#e8e6e0; }

/* ── Technique Badge ────────────────────────────────── */
.litho-technique-badge {
    position:absolute; top:8px; left:8px; z-index:20;
    background:rgba(0,0,0,.45); color:rgba(255,255,255,.85);
    font-size:8px; letter-spacing:1.5px; font-style:italic;
    padding:2px 7px; border-radius:10px;
    backdrop-filter:blur(4px); pointer-events:none;
    font-family:'Georgia',serif;
}

/* ── Canvas Stack ───────────────────────────────────── */
.litho-canvas-stack { position:absolute; inset:0; }
.litho-canvas {
    position:absolute; inset:0; width:100%; height:100%;
    display:block; pointer-events:none;
}
/* Layer order */
.layer-surface  { z-index:1;  }
.layer-tool     { z-index:2;  mix-blend-mode:screen; }
.layer-process  { z-index:3;  mix-blend-mode:overlay; }
.layer-ink      { z-index:4;  }
.layer-plate1   { z-index:4;  mix-blend-mode:multiply; }
.layer-plate2   { z-index:5;  mix-blend-mode:multiply; }
.layer-plate3   { z-index:6;  mix-blend-mode:multiply; }
.layer-plate4   { z-index:7;  mix-blend-mode:multiply; }
.layer-paper    { z-index:8;  }
.layer-aging    { z-index:9;  mix-blend-mode:multiply; pointer-events:none; }
.layer-drying   { z-index:10; pointer-events:none; mix-blend-mode:screen; }

/* ── Tool Cursor ────────────────────────────────────── */
.litho-tool-cursor {
    position:absolute; width:24px; height:24px; z-index:15;
    transform:translate(-50%,-50%); pointer-events:none;
    color:#f5f0e8; opacity:0; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));
    transition:opacity .2s ease;
}
.litho-tool-cursor.visible { opacity:1; }
.litho-tool-cursor svg { width:100%; height:100%; transform:rotate(-45deg); }

/* Technique-specific cursor tints */
.technique-etching     .litho-tool-cursor { color:#c8b08a; filter:drop-shadow(0 1px 4px rgba(0,0,0,.7)); }
.technique-woodcut     .litho-tool-cursor { color:#c0a060; }
.technique-screenprint .litho-tool-cursor { color:#80c0ff; }

/* ── Phase Indicators ───────────────────────────────── */
.litho-phase-indicator {
    position:absolute; top:10px; left:50%; transform:translateX(-50%);
    display:flex; gap:5px; z-index:20;
    background:rgba(0,0,0,.35); padding:4px 8px; border-radius:20px;
    backdrop-filter:blur(4px);
}
.phase-dot {
    width:8px; height:8px; border-radius:50%;
    background:rgba(255,255,255,.3); border:1px solid rgba(255,255,255,.4);
    transition:all .3s ease; cursor:pointer;
}
.phase-dot.active { background:var(--litho-phase-active); border-color:var(--litho-phase-active); box-shadow:0 0 6px var(--litho-phase-active); transform:scale(1.3); }
.phase-dot.done   { background:var(--litho-phase-done);   border-color:var(--litho-phase-done); }

/* ── Phase Labels ───────────────────────────────────── */
.litho-phase-label {
    position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
    z-index:20; pointer-events:none; opacity:0; transition:opacity .4s ease;
}
.litho-phase-label.active { opacity:1; }
.litho-phase-label span {
    display:inline-block; background:rgba(0,0,0,.52); color:rgba(255,255,255,.92);
    font-size:10px; letter-spacing:1px; text-transform:uppercase;
    padding:3px 9px; border-radius:12px; backdrop-filter:blur(4px);
    font-family:'Georgia',serif; font-style:italic; white-space:nowrap;
}

/* ── Click Hint ─────────────────────────────────────── */
.litho-click-hint {
    position:absolute; bottom:10px; right:10px; z-index:20;
    opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.litho-stone-wrapper:hover .litho-click-hint { opacity:1; }
.litho-click-hint span {
    font-size:10px; color:rgba(255,255,255,.8); background:rgba(0,0,0,.45);
    padding:3px 7px; border-radius:10px; letter-spacing:.5px; font-style:italic;
}

/* ── Caption ────────────────────────────────────────── */
.litho-item-caption { padding:10px 4px 4px; }
.litho-item-title { font-size:1rem; font-weight:600; margin:0 0 4px; color:#2a1f0e; font-style:italic; }
.litho-item-desc  { font-size:.82rem; color:#5a4a35; margin:0; line-height:1.4; }

/* ── Drying sheen pulse ─────────────────────────────── */
@keyframes dryingPulse {
    0%,100%{ opacity:.8; }
    50%     { opacity:.4; }
}
.layer-drying[style*="opacity: 1"] { animation:dryingPulse 2s ease-in-out; }

/* ══════════════════════════════════════════════════════
   LIGHTBOX
   ══════════════════════════════════════════════════════ */
.litho-lightbox {
    position:fixed; inset:0; z-index:999999;
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.litho-lightbox.open { opacity:1; pointer-events:all; }

.litho-lightbox-backdrop {
    position:absolute; inset:0;
    background:rgba(8,5,2,.93); backdrop-filter:blur(8px); cursor:pointer;
}

.litho-lightbox-container {
    position:relative; z-index:1;
    width:min(90vw,900px); max-height:90vh;
    display:flex; align-items:center; justify-content:center;
}

/* Surface (slides away) */
.litho-lb-surface-wrap { position:absolute; inset:0; z-index:2; border-radius:6px; overflow:hidden; }
.litho-lb-surface { width:100%; height:100%; position:relative; }
.litho-lb-canvas  { position:absolute; inset:0; width:100%; height:100%; }

/* Paper (unrolls) */
.litho-lb-paper {
    position:relative; z-index:3; width:100%;
    background:var(--litho-paper); border-radius:4px; overflow:hidden;
    box-shadow:0 0 0 1px rgba(0,0,0,.15),0 20px 80px rgba(0,0,0,.65);
}
.litho-lb-paper-roll { position:relative; transform-origin:top center; }
.litho-lb-image {
    display:block; width:100%; max-height:62vh; object-fit:contain;
    transition:filter .5s ease; mix-blend-mode:multiply;
}
.litho-lb-aging-canvas {
    position:absolute; inset:0; width:100%; height:100%;
    pointer-events:none; mix-blend-mode:multiply;
}
.litho-lb-grain {
    position:absolute; inset:0; pointer-events:none; opacity:.2; transition:opacity .4s;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
    background-size:200px 200px;
}
.litho-lb-cracks { position:absolute; inset:0; pointer-events:none; }

/* ── Lightbox UI ────────────────────────────────────── */
.litho-lb-ui { position:absolute; inset:0; z-index:10; pointer-events:none; }

.litho-lb-close {
    position:absolute; top:-44px; right:0;
    width:36px; height:36px; border:none;
    background:rgba(255,255,255,.1); color:#fff; cursor:pointer;
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    pointer-events:all; transition:background .2s; backdrop-filter:blur(4px);
}
.litho-lb-close:hover { background:rgba(255,255,255,.25); }
.litho-lb-close svg { width:20px; height:20px; }

.litho-lb-caption {
    position:absolute; bottom:-65px; left:0; right:0;
    text-align:center; pointer-events:none;
}
.litho-lb-title { font-size:1.1rem; color:rgba(255,255,255,.92); margin:0 0 4px; font-style:italic; }
.litho-lb-desc  { font-size:.8rem;  color:rgba(255,255,255,.6);  margin:0; }

.litho-lb-nav {
    position:absolute; top:50%; left:-50px; right:-50px;
    transform:translateY(-50%); display:flex; justify-content:space-between;
    pointer-events:all;
}
.litho-lb-prev,.litho-lb-next {
    width:38px; height:38px; border:none;
    background:rgba(255,255,255,.12); color:#fff; font-size:1.2rem;
    cursor:pointer; border-radius:50%; display:flex; align-items:center; justify-content:center;
    backdrop-filter:blur(4px); transition:background .2s;
}
.litho-lb-prev:hover,.litho-lb-next:hover { background:rgba(255,255,255,.28); }

@media(max-width:768px){ .litho-lb-nav{left:-4px;right:-4px;} }

/* Phase buttons */
.litho-lb-phases {
    position:absolute; top:-50px; left:50%; transform:translateX(-50%);
    display:flex; gap:5px; pointer-events:all; white-space:nowrap; flex-wrap:wrap; justify-content:center;
}
.litho-lb-phase-btn {
    background:rgba(255,255,255,.1); color:rgba(255,255,255,.65);
    border:1px solid rgba(255,255,255,.2); padding:4px 10px; font-size:.7rem;
    cursor:pointer; border-radius:16px; font-family:'Georgia',serif; font-style:italic;
    letter-spacing:.3px; transition:all .2s; backdrop-filter:blur(4px);
}
.litho-lb-phase-btn:hover { background:rgba(255,255,255,.22); color:rgba(255,255,255,.9); }
.litho-lb-phase-btn.active { background:var(--litho-phase-active); border-color:var(--litho-phase-active); color:#fff; }

/* Aging slider */
.litho-lb-aging-control {
    position:absolute; bottom:-50px; left:50%; transform:translateX(-50%);
    display:flex; align-items:center; gap:8px; pointer-events:all;
    color:rgba(255,255,255,.6); font-size:.75rem; font-style:italic;
}
.litho-lb-aging-slider {
    width:100px; height:3px; accent-color:var(--litho-phase-active);
    cursor:pointer;
}

@media(max-width:600px){
    .litho-lb-phases { top:auto; bottom:-52px; }
    .litho-lb-caption { bottom:-100px; }
    .litho-lb-aging-control { bottom:-80px; }
}

/* Gyro prompt */
.litho-gyro-prompt { position:absolute; bottom:-106px; left:50%; transform:translateX(-50%); pointer-events:all; }
.litho-gyro-btn { background:rgba(193,124,42,.8); color:#fff; border:none; padding:7px 16px; border-radius:20px; cursor:pointer; font-size:.8rem; backdrop-filter:blur(4px); transition:background .2s; }
.litho-gyro-btn:hover { background:rgba(193,124,42,1); }

/* ── Multicolour misregistration visual cue ─────────── */
.litho-lab-63-widget.multicolor-active .layer-plate1 { mix-blend-mode:multiply; }
.litho-lab-63-widget.multicolor-active .layer-plate2 { mix-blend-mode:multiply; }
.litho-lab-63-widget.multicolor-active .layer-plate3 { mix-blend-mode:multiply; }
.litho-lab-63-widget.multicolor-active .layer-plate4 { mix-blend-mode:multiply; }

/* ── Entry animation ────────────────────────────────── */
.litho-item { animation:lithoIn .7s ease forwards; opacity:0; transform:translateY(20px); }
@keyframes lithoIn { to{ opacity:1; transform:translateY(0); } }
.litho-item:nth-child(1){animation-delay:.00s}
.litho-item:nth-child(2){animation-delay:.09s}
.litho-item:nth-child(3){animation-delay:.18s}
.litho-item:nth-child(4){animation-delay:.27s}
.litho-item:nth-child(5){animation-delay:.36s}
.litho-item:nth-child(6){animation-delay:.45s}
.litho-item:nth-child(7){animation-delay:.54s}
.litho-item:nth-child(8){animation-delay:.63s}

/* ── Reduced motion ─────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
    .litho-item{animation:none;opacity:1;transform:none;}
    .litho-stone-wrapper{transition:none;}
    .layer-drying{animation:none;}
}