/* =========================================================================
   SOLUTIONS SEEKERS — CINEMATIC EVIDENCE BOARD (HERO SECTION)
   ========================================================================= */

/* ── BOARD WRAPPER & CONTAINER ────────────────────────────────────────── */
.evidence-board-container {
  position: relative;
  width: 100%;
  max-width: 1380px;
  min-height: 680px;
  height: 680px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 30px 60px -12px rgba(0,0,0,0.85),
    inset 0 0 100px rgba(0,0,0,0.95);
  border: 12px solid #241a11;
  border-image: linear-gradient(135deg, #3a2b1b 0%, #1c140d 50%, #2e2114 100%) 1;
}

/* Aged Corkboard Background Texture */
.evidence-cork-wall {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 680px;
  background-color: #312317;
  background-image: 
    radial-gradient(ellipse at 50% 0%, rgba(232, 182, 76, 0.25) 0%, rgba(0, 0, 0, 0.7) 80%),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 0px, rgba(0, 0, 0, 0.05) 2px, transparent 2px, transparent 6px),
    radial-gradient(circle at 30% 40%, rgba(0, 0, 0, 0.15) 0%, transparent 50%);
  background-size: cover;
  touch-action: manipulation;
}

/* Blueprint Grid Overlay */
.evidence-grid-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

/* SVG Thread Canvas Layer */
.evidence-threads-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 15;
  pointer-events: none;
  overflow: visible;
}

.evidence-thread-line {
  stroke: #b32d2d;
  stroke-width: 2.2px;
  stroke-dasharray: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
  transition: stroke 0.3s ease, stroke-width 0.3s ease, filter 0.3s ease;
}

.evidence-thread-line.active-highlight {
  stroke: #ff3333;
  stroke-width: 3.5px;
  filter: drop-shadow(0 0 8px rgba(255, 50, 50, 0.9));
}

/* ── CENTER HUB PAPER ─────────────────────────────────────────────────── */
.center-evidence-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-1.5deg);
  width: 90%;
  max-width: 370px;
  z-index: 25;
  background-color: var(--paper);
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.025) 0px, transparent 1px, transparent 3px),
                    linear-gradient(135deg, rgba(0,0,0,0.03), transparent 40%);
  padding: 1.5rem 1.6rem;
  border-radius: 4px;
  box-shadow: 
    0 20px 45px rgba(0, 0, 0, 0.75),
    0 2px 6px rgba(0, 0, 0, 0.4);
  border: 1px solid var(--paper-line);
  color: #0d0a08;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.center-evidence-hub h1 {
  color: #0d0a08 !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.center-evidence-hub:hover {
  transform: translate(-50%, -52%) rotate(0deg) scale(1.02);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.85);
}

/* ── SURROUNDING EVIDENCE CARDS ───────────────────────────────────────── */
.evidence-card {
  position: absolute;
  z-index: 20;
  cursor: pointer;
  transform-origin: center center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, z-index 0.1s ease;
  user-select: none;
}

.evidence-card:hover {
  z-index: 40 !important;
  transform: translateY(-8px) scale(1.06) rotate(0deg) !important;
  box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.85);
}

/* Polaroid Card Style */
.card-style-polaroid {
  background: #fdfbf7;
  padding: 10px 10px 18px 10px;
  border-radius: 3px;
  width: 190px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.6);
  border: 1px solid #e2dac6;
}
.card-style-polaroid img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 2px;
  filter: sepia(0.2) contrast(1.08);
}
.card-style-polaroid .card-caption {
  font-family: 'Special Elite', monospace;
  font-size: 11px;
  color: #2a2013;
  text-align: center;
  margin-top: 8px;
  font-weight: 700;
}

/* Sticky Note Style */
.card-style-sticky {
  background: #fffb96;
  color: #1c150c;
  padding: 14px 16px;
  width: 185px;
  border-radius: 2px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.65);
  border: 1px solid #e6dc60;
}
.card-style-sticky .card-title {
  font-family: 'Zilla Slab', serif;
  font-size: 14px;
  font-weight: 800;
  color: #140d07;
  line-height: 1.2;
}

/* Terminal Card Style */
.card-style-terminal {
  background: #090e13;
  color: #00ff77;
  font-family: monospace;
  font-size: 11px;
  padding: 12px 14px;
  width: 220px;
  border-radius: 4px;
  border: 1.5px solid #00e66b;
  box-shadow: 0 15px 35px rgba(0,0,0,0.85);
}

/* Code Snippet Card Style */
.card-style-code {
  background: #16120e;
  color: #ffda85;
  padding: 12px 14px;
  width: 210px;
  border-radius: 4px;
  border: 1.5px solid #d49b29;
  box-shadow: 0 15px 35px rgba(0,0,0,0.8);
}

/* Blueprint Card Style */
.card-style-blueprint {
  background: #0a1826;
  color: #ffffff;
  padding: 12px 14px;
  width: 205px;
  border-radius: 3px;
  border: 1.5px dashed #4095e6;
  box-shadow: 0 15px 35px rgba(0,0,0,0.8);
}

/* Standard Paper Style */
.card-style-paper {
  background: #e9dec2;
  color: #14100c;
  padding: 14px;
  width: 205px;
  border-radius: 3px;
  border: 1px solid #baaa7c;
  box-shadow: 0 14px 32px rgba(0,0,0,0.65);
}

/* ── PUSH PINS & TAPE ─────────────────────────────────────────────────── */
.push-pin {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  z-index: 30;
  pointer-events: auto;
  box-shadow: 
    0 4px 8px rgba(0,0,0,0.8),
    inset -2px -2px 4px rgba(0,0,0,0.5),
    inset 2px 2px 4px rgba(255,255,255,0.6);
}

.push-pin-red {
  background: radial-gradient(circle at 35% 35%, #ff4d4d, #990000);
}

.push-pin-black {
  background: radial-gradient(circle at 35% 35%, #555555, #111111);
}

.push-pin-silver {
  background: radial-gradient(circle at 35% 35%, #ffffff, #888888);
}

.masking-tape {
  position: absolute;
  background: rgba(230, 222, 199, 0.65);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  z-index: 22;
  pointer-events: none;
}

/* ── MODAL POP-UP (INTERACTIVE EXPAND) ────────────────────────────────── */
.evidence-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 8, 6, 0.85);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.evidence-modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.evidence-modal-content {
  background: var(--paper);
  color: var(--ink);
  max-width: 650px;
  width: 100%;
  border-radius: 6px;
  padding: 2rem;
  position: relative;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9);
  border: 2px solid var(--oxblood2);
  transform: scale(0.9) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.evidence-modal-backdrop.active .evidence-modal-content {
  transform: scale(1) translateY(0);
}

/* ── RESPONSIVE MOBILE STACK ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .evidence-board-container {
    height: auto;
    min-height: auto;
    border-width: 8px;
  }
  .evidence-cork-wall {
    min-height: auto;
    height: auto;
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  .center-evidence-hub {
    position: relative;
    left: auto;
    top: auto;
    transform: none !important;
    width: 100%;
    margin-bottom: 1rem;
  }
  .center-evidence-hub:hover {
    transform: none !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.75);
  }
  .evidence-card {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 380px !important;
    margin: 0 auto;
  }
  .evidence-card:hover {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.75);
  }
  .evidence-threads-svg {
    display: none;
  }
}

@media (hover: none) {
  .evidence-card:hover {
    transform: none !important;
    box-shadow: 0 14px 32px rgba(0,0,0,0.65);
  }
  .center-evidence-hub:hover {
    transform: none !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.75);
  }
}

@media (max-width: 640px) {
  .evidence-board-container {
    border-width: 6px;
    border-radius: 8px;
  }
  .evidence-cork-wall {
    padding: 1.5rem 0.75rem;
    gap: 1rem;
  }
  .center-evidence-hub {
    padding: 1rem 1.2rem;
  }
  .center-evidence-hub h1 {
    font-size: 1.5rem;
  }
  .evidence-card {
    max-width: 100% !important;
  }
  .evidence-card:hover {
    transform: translateY(-2px) scale(1.01) !important;
  }
}