/* Interaction-only details for /projects cards. Keep base card chrome in page CSS. */
.project-card-grid {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
}

#projects .project-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.detail-card .card-main,
.detail-card .card-hook {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.detail-card {
  min-height: 232px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  isolation: isolate;
  cursor: pointer;
}
.detail-card:focus { outline: 2px solid var(--accent, #F05454); outline-offset: 3px; }
.detail-card:focus-visible { box-shadow: 0 0 0 4px rgba(240,84,84,0.12); }
.detail-card .card-main { position: relative; z-index: 1; }
.detail-card::after {
  content: 'Hover / tap for details';
  position: absolute;
  left: 1.45rem;
  bottom: 1.12rem;
  z-index: 1;
  color: var(--text-dim, rgba(221,221,221,0.54));
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  pointer-events: none;
}
.detail-card:hover::after,
.detail-card:focus::after,
.detail-card:focus-within::after { content: 'Click / tap to open'; color: var(--accent-dim, #F05454); }
.detail-card .tags { padding-bottom: 1.7rem; }
.detail-card .actions { display: none !important; }

.card-hook {
  color: var(--text, #DDDDDD) !important;
  font-size: clamp(1.08rem, 2.1vw, 1.42rem) !important;
  line-height: 1.2 !important;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0.8rem 0 0 !important;
  max-width: 14ch;
}
.card-hook.wide { max-width: 20ch; }

.hover-preview {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.7rem;
  padding: 1.45rem;
  border-radius: inherit;
  background: var(--bg-card-hover, #30475E);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  pointer-events: none;
  overflow: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(240,84,84,0.45) rgba(255,255,255,0.05);
}
.hover-preview h4 { margin: 0; color: var(--text, #DDDDDD); font-size: clamp(1rem, 0.9vw, 1.12rem); line-height: 1.22; letter-spacing: -0.015em; }
.hover-preview .preview-kicker,
.hover-preview .detail-kicker { color: var(--accent, #F05454); font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }
.hover-preview .preview-text {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  color: var(--text-muted, rgba(221,221,221,0.82)) !important;
  font-size: clamp(0.9rem, 0.86vw, 1rem) !important;
  line-height: 1.52 !important;
  margin: 0 !important;
}
.hover-preview p,
.hover-preview li { color: var(--text-muted, rgba(221,221,221,0.82)) !important; font-size: 0.9rem !important; line-height: 1.52 !important; margin: 0; }
.hover-preview ul { margin: 0.2rem 0 0 1rem; padding: 0; }
.hover-preview li + li { margin-top: 0.24rem; }
.hover-preview strong { color: var(--text, #DDDDDD); }
.hover-preview .detail-actions,
.hover-preview .detail-proof { display: none !important; }

.detail-modal {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0,0,0,0.58);
}
.detail-modal.open { display: flex; }
.detail-dialog {
  width: min(860px, calc(100vw - 2rem));
  max-height: min(86vh, 820px);
  overflow: auto;
  background: var(--bg-card, #30475E);
  border: 1px solid var(--border-hover, rgba(240,84,84,0.58));
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.45);
  color: var(--text, #DDDDDD);
}
.detail-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--border, rgba(221,221,221,0.18));
  position: sticky;
  top: 0;
  background: var(--bg-card, #30475E);
  z-index: 1;
}
.detail-dialog-title { font-size: 1.15rem; line-height: 1.25; margin: 0; }
.detail-close { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--border, rgba(221,221,221,0.18)); background: rgba(34,40,49,0.52); color: var(--text, #DDDDDD); cursor: pointer; font-size: 1.2rem; line-height: 1; flex: 0 0 auto; }
.detail-body { padding: 1.2rem 1.25rem 1.35rem; }
.detail-body p,
.detail-body li { color: var(--text-muted, rgba(221,221,221,0.74)); font-size: 0.9rem; line-height: 1.7; }
.detail-body p + p,
.detail-body ul + p,
.detail-body p + ul { margin-top: 0.8rem; }
.detail-body ul { margin-left: 1.1rem; }
.detail-body strong { color: var(--text, #DDDDDD); }
.detail-body .detail-kicker { font-family: 'JetBrains Mono', monospace; color: var(--accent, #F05454); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.6rem; }
.detail-body .detail-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.detail-body a.inline { color: var(--accent, #F05454); text-decoration: none; border-bottom: 1px solid rgba(240,84,84,0.38); }
.detail-body a.inline:hover { border-bottom-color: var(--accent, #F05454); }
.detail-body .detail-section { padding: 0.95rem 0; border-top: 1px solid var(--border, rgba(221,221,221,0.18)); }
.detail-body .detail-section:first-of-type { border-top: 0; padding-top: 0; }
.detail-body .detail-section h4 { color: var(--text, #DDDDDD); font-size: 1rem; margin-bottom: 0.4rem; }
.detail-proof { margin-top: 1.15rem; border: 1px solid var(--border, rgba(221,221,221,0.18)); border-radius: 13px; overflow: hidden; background: var(--bg, #222831); }
.letter-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--border, rgba(221,221,221,0.18)); font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted, rgba(221,221,221,0.74)); }
.letter-head a { color: var(--accent, #F05454); text-decoration: none; white-space: nowrap; }
.letter-preview-link { display: block; text-decoration: none; background: var(--bg, #222831); }
.letter-preview { display: block; width: 100%; max-height: 520px; object-fit: contain; background: #0b1020; }

@media (hover: hover) and (pointer: fine) {
  .detail-card:hover .hover-preview,
  .detail-card:focus .hover-preview,
  .detail-card:focus-within .hover-preview { opacity: 1; transform: translateY(0); }
}

@media (max-width: 960px) {
  .project-card-grid, .project-card-grid.three, #projects .project-card-grid { grid-template-columns: 1fr; }
  .project-card-grid .span-2 { grid-column: span 1; }
  .detail-card { min-height: 210px; }
  .card-hook { max-width: 18ch; }
}

@media (max-width: 640px) {
  .detail-card { min-height: 190px; }
  .detail-card::after { content: 'Tap for details'; left: 1.25rem; bottom: 1.05rem; }
  .detail-card .tags { padding-bottom: 1.6rem; }
  .hover-preview { display: none; }
  .detail-dialog { width: 100%; max-height: calc(100vh - 1.4rem); }
  .detail-dialog-head, .detail-body { padding-left: 1rem; padding-right: 1rem; }
  .letter-head { align-items: flex-start; flex-direction: column; gap: 0.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .detail-card,
  .hover-preview,
  .detail-modal,
  .detail-dialog { transition: none !important; }
}