/*
 * Tension v1 — Project styles (conditional: front page, project single, project archive)
 * Styles retained wireframe helper classes (tech stack strip, sidebar, gallery).
 */

/* Tech stack strip (about + project single via cyber_crayon_display_project_tech_stack) */
.lc-tech-stack__list,
.lc-project-tech-stack__list,
.lc-stack-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.lc-tech-stack__item,
.lc-project-tech-stack__item {
  border: 1px solid var(--lc-border-divider);
  background: var(--lc-surface-container-low);
  padding: 0.25rem 0.5rem;
  font-family: var(--lc-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--lc-on-surface-variant);
}

/* Project single: legacy wrapper resets (already rewritten markup) */
.lc-project-single__content,
.lc-project-single-wrap article {
  color: var(--lc-on-surface);
}

.lc-project-single__body {
  padding-block: var(--lc-unit-xl);
}

.lc-project-single__body > * + * {
  margin-top: var(--lc-unit-2xl);
  padding-top: var(--lc-unit-2xl);
  border-top: 1px solid var(--lc-outline-variant);
}

/* Gallery lightbox trigger */
.lc-lightbox-trigger {
  display: block;
}

.lc-lightbox-trigger img {
  display: block;
  width: 100%;
  height: auto;
}

/* Flow gallery: keep native screenshot ratios, column pack with gutter. */
.lc-project-gallery-grid {
  column-count: 2;
  column-gap: var(--lc-unit-md);
}

@media (min-width: 1024px) {
  .lc-project-gallery-grid {
    column-count: 3;
  }
}

.lc-project-gallery-grid__item {
  position: relative;
  display: block;
  overflow: hidden;
  break-inside: avoid;
  margin-bottom: var(--lc-unit-md);
  border: 1px solid var(--lc-outline-variant);
  background: var(--lc-surface-container-lowest);
}

.lc-project-gallery-grid__item img {
  width: 100%;
  height: auto;
}

.lc-project-gallery-grid__item[hidden] {
  display: none;
}

.lc-project-gallery-grid__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lc-surface-container-lowest);
  font-family: var(--lc-font-mono);
  font-size: var(--lc-text-caption);
  letter-spacing: 0.06em;
  color: var(--lc-on-surface);
}

/* Project single renderers that still output legacy class names */
.lc-project-meta-sticker,
.lc-project-sidebar-meta__row {
  font-family: var(--lc-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lc-on-surface-variant);
}

.lc-chip__icon {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
}

.lc-chip__icon svg {
  width: 1rem;
  height: 1rem;
}

.lc-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Demo videos: native files keep intrinsic ratio so controls are not clipped.
   oEmbed iframes still sit in a 16:9 frame. */
.lc-project-demo {
  border: 1px solid var(--lc-outline-variant);
  background: var(--lc-surface-container-low);
}

.lc-project-demo .lc-native-video {
  display: block;
  width: 100%;
  height: auto;
}

.lc-project-demo:has(iframe) {
  aspect-ratio: 16 / 9;
}

.lc-project-demo iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}