/* -------------------------------------------------------------------
   PROJECT DETAILS & CASE STUDY STYLES
   (Additions specific to individual project pages like cloud-intrusion.html)
------------------------------------------------------------------- */

/* 1. COMPACT HERO (Used on project pages) */
.hero-compact .hero-description {
  max-width: 700px; /* Optional: slightly wider for project intros */
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.hero-compact h1 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 900px; /* Prevents it from getting too wide on huge screens */
  margin-bottom: var(--space-md); /* Ensures consistent spacing above the description */
}

/* 2. MEDIA & FIGURES */
.project-figure {
  margin: 0 auto var(--space-sm) auto;
  text-align: center;
}

.project-figure img,
.project-figure video {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 6px;
  box-shadow: 0 8px 24px var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}

.project-figure img:hover,
.project-figure video:hover {
  transform: scale(1.01); /* Subtle zoom */
}

.project-figure figcaption {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 0.6rem;
  text-align: center;
}

.project-figure img { cursor: zoom-in; }

/* Video styling */
.project-video {
  max-height: 600px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

/* Two-column media grid (Text + Image side by side) */
.media-grid.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 768px) {
  .media-grid.two-col {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

/* 3. METADATA & SIDEBARS */
/* Additional Details Section */
.meta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items: start;
}

.meta-block h3 { margin-bottom: var(--space-xs); font-size: 0.95rem; }
.meta-list { list-style: none; padding: 0; margin: 0; }
.meta-list li { margin-bottom: var(--space-xs); color: var(--text-secondary); }

/* TL;DR Callout Box */
.case-callout {
  padding: var(--space-xs) var(--space-md);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(74,158,255,0.06), transparent);
  border: 1px solid rgba(74,158,255,0.08);
  margin-bottom: var(--space-md);
  color: var(--text-primary);
  text-align: left;
}

/* Content Lists */
.section ul {
  margin: var(--space-md) 0;
  padding-left: var(--space-xl);
  list-style-type: disc;
}

.section ul li {
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
  line-height: 1.6;
}

.section ul li strong {
  color: var(--text-primary);
  font-weight: 600;
}

.media-grid ul {
  margin: var(--space-md) 0;
  padding-left: var(--space-xl);
  list-style-type: disc;
}

.media-grid ul li {
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
  line-height: 1.6;
}

/* 4. LIGHTBOX OVERLAY */
.lightbox-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.8);
  z-index: 2000; padding: var(--space-xl);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 320ms ease, visibility 320ms ease;
}
.lightbox-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }

.lightbox-content {
  max-width: 95%; max-height: 95%;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transform: scale(.98);
  transition: transform 320ms ease;
}
.lightbox-overlay.open .lightbox-content { transform: scale(1); }

.lightbox-img {
  max-width: 100%; max-height: 100%;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

.lightbox-close {
  position: absolute; top: -1.5rem; right: -1.5rem;
  background: rgba(0,0,0,0.6); color: white;
  border: none; border-radius: 50%;
  width: 40px; height: 40px;
  font-size: 1.25rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover { background: rgba(0,0,0,0.9); }

/* 5. CODE BLOCKS */
.code-block-container {
  margin: var(--space-lg) 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px var(--shadow);
}

.code-block-container pre {
  margin: 0;
  padding: var(--space-lg);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  overflow-x: auto;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9rem;
  line-height: 1.6;
}

.code-block-container code {
  color: var(--text-primary);
  background: transparent;
  font-family: inherit;
}

/* 6. TABLES */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  margin: var(--space-lg) 0;
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--shadow);
}

.project-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-primary);
  font-size: 0.95rem;
}

.project-table thead {
  background: var(--accent-primary);
  color: white;
}

.project-table th {
  padding: var(--space-md);
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid var(--border-color);
}

.project-table td {
  padding: var(--space-md);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

.project-table tbody tr {
  transition: background-color 0.2s ease;
}

.project-table tbody tr:hover {
  background-color: var(--bg-secondary);
}

.project-table tbody tr:last-child td {
  border-bottom: none;
}

.table-responsive .caption {
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-align: center;
  margin-top: var(--space-sm);
  font-style: italic;
}