/* ============================================================
   project.css — Styles for project documentation pages
   Luis Alejandro Rodríguez Arenas — Personal Website

   Link from every project page alongside style.css:
     <link rel="stylesheet" href="../project.css" />

   Requires the design tokens from style.css (:root variables).
   ============================================================ */


/* ─── Gallery grid ─────────────────────────────────────────────
   Responsive thumbnail grid. Column count is automatic.
   Change minmax(200px, …) to adjust the minimum thumbnail width. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s-12);
  margin-top: var(--s-8);
}

.gallery-thumb {
  background:    var(--bg-raised);
  border:        1px solid var(--border);
  border-radius: 6px;
  cursor:        pointer;
  overflow:      hidden;
  padding:       0;
  display:       flex;
  flex-direction: column;
  text-align:    left;
  transition:    border-color var(--dur) var(--ease);
}
.gallery-thumb:hover          { border-color: var(--border-mid); }
.gallery-thumb:focus-visible  { outline: 1px solid var(--text-muted); outline-offset: 2px; }

/* Applies equally to <img> and <video> inside a thumbnail */
.gallery-thumb .gallery-media {
  width:        100%;
  aspect-ratio: 4 / 3;
  object-fit:   cover;
  display:      block;
}

/* Play-icon overlay for video thumbnails */
.gallery-thumb {
  position: relative;
}

.gallery-play {
  position:       absolute;
  left:           50%;
  bottom:         calc(var(--s-8) + 1.5em);
  transform:      translateX(-50%);
  font-size:      1.75rem;
  color:          rgba(255, 255, 255, 0.85);
  text-shadow:    0 1px 8px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* Overflow (+N) tile — matches thumbnail dimensions exactly */
.gallery-overflow {
  display:         flex;
  align-items:     center;
  justify-content: center;
  aspect-ratio:    4 / 3;
  background:      var(--bg-raised);
  border:          1px solid var(--border);
  border-radius:   6px;
  cursor:          pointer;
  transition:      border-color var(--dur) var(--ease),
                   background   var(--dur) var(--ease);
}
.gallery-overflow:hover { border-color: var(--border-mid); }

.gallery-overflow-count {
  font-family:    var(--mono);
  font-size:      var(--t-24);
  font-weight:    500;
  color:          var(--text-muted);
  letter-spacing: -0.02em;
}

.gallery-cap {
  font-family:    var(--mono);
  font-size:      var(--t-11);
  color:          var(--text-muted);
  padding:        var(--s-8) var(--s-12);
  line-height:    1.4;
  letter-spacing: 0.02em;
}


/* ─── Lightbox ─────────────────────────────────────────────────
   Full-viewport overlay. Click backdrop to close.
   Keyboard: Esc, ←, → handled in project.js.               */
body.no-scroll { overflow: hidden; }

.lightbox {
  position:        fixed;
  inset:           0;
  z-index:         1000;
  background:      rgba(0, 0, 0, 0.92);
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.lightbox[hidden] { display: none; }

.lb-content {
  max-width: min(90vw, 1100px);
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  gap:              var(--s-16);
  pointer-events:   none;   /* clicks pass through to backdrop */
}

.lb-img {
  max-width:    100%;
  max-height:   80vh;
  object-fit:   contain;
  display:      block;
  pointer-events: auto;     /* the image itself does not close */
}

.lb-cap {
  font-family:    var(--mono);
  font-size:      var(--t-12);
  color:          rgba(255, 255, 255, 0.5);
  letter-spacing: 0.03em;
  text-align:     center;
  margin:         0;
  pointer-events: none;
}

/* Navigation buttons */
.lb-close,
.lb-prev,
.lb-next {
  position:    fixed;
  background:  none;
  border:      none;
  color:       rgba(255, 255, 255, 0.55);
  cursor:      pointer;
  font-family: var(--mono);
  line-height: 1;
  padding:     var(--s-12);
  z-index:     1001;
  transition:  color var(--dur) var(--ease);
}
.lb-close:hover,
.lb-prev:hover,
.lb-next:hover { color: #fff; }

.lb-close {
  top:       var(--s-20);
  right:     var(--s-24);
  font-size: var(--t-17);
}
.lb-prev {
  left:      var(--s-24);
  top:       50%;
  transform: translateY(-50%);
  font-size: 2.25rem;
  font-family: var(--sans);
}
.lb-next {
  right:     var(--s-24);
  top:       50%;
  transform: translateY(-50%);
  font-size: 2.25rem;
  font-family: var(--sans);
}

@media (max-width: 600px) {
  .lb-prev { left: var(--s-8); }
  .lb-next { right: var(--s-8); }
}


/* ─── Documents ────────────────────────────────────────────────
   Styled to match the link-list pattern from style.css.      */
.doc-list {
  display:        flex;
  flex-direction: column;
}

.doc-item {
  display:     flex;
  align-items: center;
  gap:         var(--s-16);
  padding:     var(--s-12) 0;
  border-top:  1px solid var(--border);
  color:       var(--text);
  transition:  color var(--dur) var(--ease);
}
.doc-item:last-child { border-bottom: 1px solid var(--border); }
.doc-item:hover      { color: var(--link-hover); }

.doc-code {
  font-family:    var(--mono);
  font-size:      var(--t-12);
  color:          var(--text-muted);
  letter-spacing: 0.02em;
  flex-shrink:    0;
  width:          4rem;
  transition:     color var(--dur) var(--ease);
}
.doc-item:hover .doc-code { color: var(--text-muted); }

.doc-title { font-size: var(--t-14); flex: 1; }

.doc-arrow {
  font-family: var(--mono);
  font-size:   var(--t-13);
  color:       var(--text-muted);
  margin-left: auto;
  transition:  color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.doc-item:hover .doc-arrow {
  color:     var(--text);
  transform: translateY(2px);
}


/* ─── References ───────────────────────────────────────────────
   Numbered list using site's mono font. Each item has id="ref-N"
   for anchor scroll from [N] cross-reference links.          */
.ref-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--s-8);
  padding-left:   var(--s-24);
  margin:         0;
}

.ref-item {
  font-family:    var(--mono);
  font-size:      var(--t-12);
  color:          var(--text-muted);
  line-height:    1.7;
  letter-spacing: 0.01em;
  transition:     color var(--dur) var(--ease);
}

/* Highlight target reference when scrolled to via [N] link */
.ref-item:target {
  color: var(--text);
}


/* ─── Cross-reference links (.xref) ────────────────────────────
   Inline links generated by autoLink() for Img. N and [N].
   Should look like a subtle annotation, not a heavy button.  */
.xref {
  font-family:    var(--mono);
  font-size:      0.9em;
  color:          var(--text-muted);
  border-bottom:  1px solid var(--border-mid);
  padding-bottom: 1px;
  cursor:         pointer;
  transition:     color var(--dur) var(--ease),
                  border-color var(--dur) var(--ease);
}
.xref:hover {
  color:        var(--text);
  border-color: var(--text);
}


/* ─── Utility ──────────────────────────────────────────────────
   Empty-state messages and load errors.                      */
.section-empty {
  font-family: var(--mono);
  font-size:   var(--t-13);
  color:       var(--text-muted);
  margin:      0;
}

.load-error {
  font-family: var(--mono);
  font-size:   var(--t-13);
  color:       var(--text-muted);
}

.doc-highlight {
    background: var(--bg-raised);
    border-color: var(--text);
    transition: background .3s ease;
}