/* Shared stack-card / lightbox project gallery component.
   Used by gallery.html and any page embedding a single project's stack-card
   (e.g. a Featured Project section) via js/project-gallery.js. */

.stack-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg);
  padding: 24px 20px 20px; box-shadow: var(--shadow-sm); cursor: pointer; transition: box-shadow 0.15s;
  scroll-margin-top: 88px;
}
.stack-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.10); }
.stack-card.is-expanded { grid-column: 1 / -1; cursor: default; }
.stack-card.is-hidden { display: none; }

.stack-photos { position: relative; height: 210px; margin: 0 auto 18px; width: 100%; max-width: 260px; }
.stack-photos img {
  position: absolute; top: 6px; left: 50%; width: 180px; height: 180px; object-fit: cover;
  border-radius: 10px; border: 4px solid #fff; box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  transition: transform 0.25s ease;
}
.stack-photos img:nth-child(1) { transform: translate(-50%, 0) rotate(-6deg); z-index: 4; }
.stack-photos img:nth-child(2) { transform: translate(calc(-50% + 16px), 0) rotate(4deg); z-index: 3; }
.stack-photos img:nth-child(3) { transform: translate(calc(-50% - 16px), 0) rotate(-3deg); z-index: 2; }
.stack-photos img:nth-child(4) { transform: translate(calc(-50% + 30px), 0) rotate(8deg); z-index: 1; }
.stack-card:hover .stack-photos img:nth-child(1) { transform: translate(-50%, -4px) rotate(-9deg); }
.stack-card:hover .stack-photos img:nth-child(2) { transform: translate(calc(-50% + 30px), -2px) rotate(7deg); }
.stack-card:hover .stack-photos img:nth-child(3) { transform: translate(calc(-50% - 32px), -2px) rotate(-5deg); }
.stack-card:hover .stack-photos img:nth-child(4) { transform: translate(calc(-50% + 46px), 2px) rotate(11deg); }
.stack-card.is-expanded .stack-photos { display: none; }

.stack-meta { text-align: center; }
.stack-badges { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
.stack-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 10px; border-radius: 20px; background: var(--bg-alt); color: var(--text-secondary); border: 1px solid var(--border);
}
.stack-title { font-family: 'DM Serif Display', serif; font-size: 19px; font-weight: 400; color: var(--text-primary); margin-bottom: 6px; }
.stack-summary { font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; max-width: 420px; margin-left: auto; margin-right: auto; }
.stack-links { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-bottom: 10px; }
.stack-link-primary { font-size: 13px; font-weight: 700; color: var(--blue-600); text-decoration: none; }
.stack-link-primary:hover { text-decoration: underline; }
.stack-link-secondary { font-size: 12px; color: var(--text-muted); text-decoration: none; }
.stack-link-secondary:hover { color: var(--text-secondary); text-decoration: underline; }
.stack-cta { font-size: 13px; font-weight: 600; color: var(--blue-600); }
.stack-card.is-expanded .stack-cta::after { content: " \2191"; }
.stack-card:not(.is-expanded) .stack-cta::after { content: " \2193"; }

/* Expanded pair grid — always rendered into the DOM at build time (not created on
   click) so crawlers see it without simulating a click; hidden by default and
   revealed purely by the .is-expanded class on the parent .stack-card. */
.stack-expanded-content { display: none; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); cursor: default; }
.stack-card.is-expanded .stack-expanded-content { display: block; }
.pair-grid { display: flex; flex-direction: column; gap: 18px; }
.pair-row {
  display: grid; grid-template-columns: 1fr 1fr; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border); background: var(--bg);
}
.gallery-thumb {
  position: relative; display: block; border: none; padding: 0; margin: 0; cursor: zoom-in;
  background: none; font: inherit; text-align: left;
}
.gallery-thumb img { width: 100%; height: 230px; object-fit: cover; display: block; }
.pair-tag {
  position: absolute; top: 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #fff; padding: 4px 10px; border-radius: 20px; backdrop-filter: blur(4px);
}
.pair-tag.before { left: 10px; background: rgba(220,53,69,0.85); }
.pair-tag.after { right: 10px; background: rgba(25,135,84,0.85); }
.pair-caption { padding: 12px 16px; font-size: 13px; color: var(--text-secondary); border-top: 1px solid var(--border); }
@media (max-width: 600px) {
  .pair-row { grid-template-columns: 1fr; }
  .gallery-thumb img { height: 220px; }
}

/* Standalone (non-paired) photos */
.standalone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.standalone-card { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--bg); }
.standalone-card .gallery-thumb img { width: 100%; height: 200px; object-fit: cover; display: block; }

/* Project narrative (multi-paragraph story shown in expanded view) */
.project-narrative { margin-bottom: 20px; }
.project-narrative p { font-size: 15px; color: var(--text-secondary); line-height: 1.75; margin-bottom: 14px; }
.project-narrative p:last-child { margin-bottom: 0; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(10,24,40,0.94); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.lightbox[hidden] { display: none; }
.lightbox-inner { max-width: 900px; width: 100%; text-align: center; }
.lightbox-inner img { max-width: 100%; max-height: 72vh; border-radius: 10px; margin: 0 auto; box-shadow: 0 20px 60px rgba(0,0,0,0.5); display: block; }
.lightbox-caption { color: #fff; margin-top: 16px; font-size: 14px; }
.lightbox-count { color: var(--blue-100); margin-top: 4px; font-size: 12px; }
.lightbox-btn {
  position: absolute; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3); color: #fff;
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 20px; line-height: 1; transition: background 0.15s;
}
.lightbox-btn:hover { background: rgba(255,255,255,0.24); }
.lightbox-close { top: 20px; right: 20px; }
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-close { top: 8px; right: 8px; }
}