/* ==========================================================================
   QUORIT — CLINICAL EVIDENCE STYLESHEET
   Design Language: Scientific publication + Premium healthcare brand + Clinical research library
   ========================================================================== */

/* Design Tokens */
:root {
  --color-primary: #00152a;
  --color-primary-container: #102a43;
  --color-secondary: #167C80;
  --color-secondary-hover: #00696d;
  --color-soft-teal: #DCEFED;
  --color-medical-green: #5F8F63;
  --color-charcoal: #273444;
  --color-off-white: #F7F8F6;
  --color-surface-white: #ffffff;
  --color-gold: #B9965B;
  --color-border: rgba(39, 52, 68, 0.12);
  --color-border-subtle: rgba(39, 52, 68, 0.08);
}

/* Glassmorphism & Cards */
.evidence-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease;
}

.evidence-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -8px rgba(16, 42, 67, 0.09);
  border-color: rgba(22, 124, 128, 0.35);
}

/* Scientific Journey Connected Line */
.journey-track {
  position: relative;
}

@media (min-width: 1024px) {
  .journey-track::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 48px;
    right: 48px;
    height: 2px;
    background: linear-gradient(90deg, #167C80 0%, #d6e4f9 50%, #167C80 100%);
    z-index: 1;
  }
}

@media (max-width: 1023px) {
  .journey-track-mobile::before {
    content: '';
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 23px;
    width: 2px;
    background: linear-gradient(180deg, #167C80 0%, #d6e4f9 100%);
    z-index: 1;
  }
}

/* Interactive Filter Pills */
.filter-pill {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.filter-pill.active {
  background-color: #102A43;
  color: #ffffff;
  border-color: #102A43;
  box-shadow: 0 4px 12px rgba(16, 42, 67, 0.15);
}

.filter-pill:not(.active):hover {
  background-color: #DCEFED;
  color: #004F52;
  border-color: #167C80;
}

/* Lightbox overlay styling */
.lightbox-modal {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Case Study Details Modal */
.case-modal {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

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

/* Mobile Navigation Drawer */
#mobile-drawer {
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

#mobile-drawer.drawer-closed {
  transform: translateX(100%);
  pointer-events: none;
}

#mobile-drawer.drawer-open {
  transform: translateX(0);
  pointer-events: auto;
}

/* Subtle Data Grid Pattern */
.bg-grid-subtle {
  background-size: 32px 32px;
  background-image: 
    linear-gradient(to right, rgba(16, 42, 67, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16, 42, 67, 0.03) 1px, transparent 1px);
}

/* Respect Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}