/* 10-archive-collection-cards.css — home work archive, part 3: the drag-scroll
   card strip, cards, tag pills and browser/poster thumbnails; ends
   with the featured panel's 900px stack, which must load after 09. */

/* collection cards */
.archive-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(190px, 23vw, 300px);
  padding: 0 var(--gutter);            /* card strip honours the page gutter too */
  scroll-padding: 0 var(--gutter);
  overflow-x: auto;
  overflow-y: hidden;                  /* CSS quirk: setting only overflow-x makes overflow-y compute
                                           to 'auto' too, so this strip could silently vertical-scroll
                                           itself (and stutter/eat the page scroll) on 1px height diffs
                                           between cards. Force it off — this strip is x-only. */
  cursor: grab;                        /* affordance: the strip is drag-scrollable */
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-bottom: 1px solid var(--rule);
}
.archive-strip::-webkit-scrollbar { display: none; }

.archive-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  text-align: left;
  background: none;
  border-right: 1px solid var(--rule);
  padding: var(--item-space) var(--item-space) var(--block-space);
  cursor: pointer;
  transition: background 240ms var(--ease-out);
}
.archive-card:hover { background: var(--bg-raised); }
.archive-card.is-active { background: var(--bg-raised); color: var(--ink); border-right-color: var(--rule); }

.archive-card-frame {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg);
  margin-bottom: var(--item-space);
  position: relative;
}
.archive-card-frame img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 800ms var(--ease-out);
}
.archive-card:hover .archive-card-frame img { transform: scale(1.04); }

/* tag chips under the title — vibrant fill, knockout (page-bg) text */
.archive-card-tags {
  display: flex; flex-wrap: wrap; gap: var(--sp-1);
  margin: 0;
  pointer-events: none;
}
.archive-tag {
  font-family: var(--sans);
  font-size: var(--text-label-small);
  font-weight: 400;
  line-height: 1;
  text-box: trim-both cap alphabetic;  /* trim font leading → symmetric padding truly centers the glyphs */
  letter-spacing: 0.04em;
  padding: var(--pill-padding);
  border-radius: 999px;       /* pill — matches .project-tags on detail pages */
  background: var(--c, var(--accent));
  color: var(--bg);        /* text = page background → knockout */
  white-space: nowrap;
}

/* mini browser chrome on web-project thumbnails */
.archive-card[data-frame="browser"] .archive-card-frame {
  background: transparent;   /* no black mat — the mini-window floats on the page bg */
  padding: 5%;          /* % = always relative to frame WIDTH → scales proportionally */
  display: block;
  aspect-ratio: auto;   /* drop the fixed 4/3 → window matches each image's ratio */
  align-self: start;    /* don't stretch the window to the row height */
}
.archive-card[data-frame="browser"] .archive-card-frame::before {
  content: '';
  display: block;       /* grid flow, not absolute — always flush with image */
  height: 10px;
  background: #1A1A18;
  background-image:
    radial-gradient(circle at 7px 5px, #FF5F57 1.8px, transparent 2.2px),
    radial-gradient(circle at 15px 5px, #FEBC2E 1.8px, transparent 2.2px),
    radial-gradient(circle at 23px 5px, #28C840 1.8px, transparent 2.2px);
  border-bottom: 1px solid var(--rule);
  border-radius: 3px 3px 0 0;
}
.archive-card[data-frame="browser"] .archive-card-frame img {
  width: 100%; height: auto;   /* natural ratio drives the window height — no crop */
  object-fit: contain;
  background: transparent;
  transition: filter 600ms var(--ease-out);
}
/* override default scale-on-hover so the image stays glued to the bar */
.archive-card[data-frame="browser"]:hover .archive-card-frame img {
  transform: none;
  filter: brightness(1.08);
}

/* poster thumbnails: full poster, no crop — keep the 4/3 card height */
.archive-card[data-frame="poster"] .archive-card-frame { background: transparent; }
.archive-card[data-frame="poster"] .archive-card-frame img { object-fit: contain; }
.archive-card[data-frame="poster"]:hover .archive-card-frame img { transform: none; filter: brightness(1.06); }

.archive-card-meta { display: flex; flex-direction: column; gap: var(--tight-space); }
.archive-card-num {
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  color: var(--muted);
}
.archive-card.is-active .archive-card-num { color: var(--accent); }
.archive-card-title { font-size: var(--text-body); letter-spacing: 0.01em; }
.archive-card-byline, .archive-card-year {
  font-size: var(--text-label);
  letter-spacing: 0.04em;
  color: var(--muted);
}
.archive-card.is-active .archive-card-byline,
.archive-card.is-active .archive-card-year { color: var(--muted); }

/* tablet / mobile — featured panel stacks (stage on top, info full-width below).
   Stack at the site's tablet breakpoint (900px, same as the about grid and the
   project info row), not at 1200px: stacked, a 1280px laptop window — which is
   narrower than 1280 once the browser's own chrome and scrollbar are counted —
   got one long column with the text a screen away from its image. Side by side
   the text column is still ~390px at 901px, a comfortable measure. */
@media (max-width: 900px) {
  .featured-panel { grid-template-columns: 1fr; padding-right: 0; }  /* stacked: stage back to full-bleed */
  .featured-panel-info { border-right: none; border-bottom: 1px solid var(--rule); padding-right: var(--gutter); }
  .featured-panel-stage { order: -1; --stage-h: clamp(280px, 42vw, 480px); height: var(--stage-h); }
  .featured-panel-specs { margin-top: var(--block-space); }
}