/*
 * /insights/3d-models — 3D drillhole model archive (MHD-1253).
 *
 * Layered on top of /insights/insights.css (page chrome — breadcrumb,
 * header, tab strip, feature row, spinner, ins-empty) AND
 * /insights/interviews.css (filter row + numbered pager — reused verbatim
 * to keep every Insights archive surface feeling identical). Selectors
 * here are prefixed `.tdm-` to scope the grid + card rules, which are the
 * one place this page's design diverges from interviews.
 *
 * Card design mirrors the landing page's `.lp-3d-card` — dark 16:9 card,
 * thumbnail as background, "3D" badge top-right, company/project/date
 * overlaid at the bottom with a gradient. The landing card comment in
 * static/landing/landing.css was the reference. Kept as a separate file
 * from landing.css so /insights/3d-models doesn't need to pull the whole
 * landing bundle.
 *
 * Breakpoints match interviews: 4-col ≥1100px, 2-col 720–1099px, 1-col
 * <720px.
 */

/* ---- Grid --------------------------------------------------------------- */
.tdm-archive {
  margin-top: 4px;
}

.tdm-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 28px 24px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1099px) {
  .tdm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  .tdm-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Card --------------------------------------------------------------- */
.tdm-card {
  list-style: none;
  /* Same subtle fade-in as interviews so filter/page changes don't snap. */
  animation: tdm-card-in 0.32s ease-out both;
}
.tdm-card:nth-child(4n+1) { animation-delay: 0ms; }
.tdm-card:nth-child(4n+2) { animation-delay: 28ms; }
.tdm-card:nth-child(4n+3) { animation-delay: 56ms; }
.tdm-card:nth-child(4n)   { animation-delay: 84ms; }

@keyframes tdm-card-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .tdm-card { animation: none; }
}

/* The card itself — dark base with thumbnail overlaid + a top-to-bottom
   gradient that darkens the bottom third so the company / project / date
   overlay stays legible over any thumbnail. Aspect ratio matches the
   landing card (16:9). */
.tdm-card-link {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0b1220;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(25, 35, 66, 0.08), 0 0 0 1px rgba(25, 35, 66, 0.05);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.tdm-card-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(25, 35, 66, 0.15), 0 0 0 1px rgba(25, 35, 66, 0.08);
}
.tdm-card-link:focus-visible {
  outline: 3px solid #30a5bf;
  outline-offset: 3px;
}

.tdm-card-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center center;
  background-color: #0b1220;
}
/* Gradient overlay — dark at the bottom so the text block reads, fading
   to transparent at the top so the thumbnail stays visible. */
.tdm-card-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.20) 55%,
    rgba(0, 0, 0, 0) 100%);
}

/* "3D" badge — top-right, soft translucent chip matching the landing card. */
.tdm-card-badge {
  position: absolute; top: 12px; right: 12px;
  z-index: 2;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 4px;
  pointer-events: none;
}

/* Text block anchored to the bottom of the card. */
.tdm-card-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 16px;
}
.tdm-card-company {
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
  color: #fff;
  /* Cap at two lines — mirrors the interview card's title clamp. Rarely
     needed since company names are short, but keeps card heights aligned
     when a long name shows up. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tdm-card-project {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.35;
  color: #e5e7eb;
  /* Single-line clamp for projects. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tdm-card-date {
  font-size: 11px;
  color: #cbd5e1;
  font-variant-numeric: tabular-nums;
}