/**
==========================================================================
@fileOverview
Feed grid and overlay styling for QueryKey marketing surfaces, powering the
cards rendered by `shared/components.js` and the knowledge feed modules.
Ensures cards share consistent radii, shadows, and modal experiences.
@author
 * QueryKey Cases Web Team
@maintainer
 * Cases Engineering Lead
@usage
<link rel="stylesheet" href="/assets/css/components/qkey-feed.css" />
@dependencies
Depends on theme variables defined in variables.css and typography in
fonts.css; overlays assume the modal root inserted by components.js.
@notes
- Keep color tokens aligned with the marketing palette and convert shadows
  to the modern `rgb()` notation for lint compliance.
@license
QueryKey™ is a trademark of Farrel Wilson. All rights reserved.
@timestamp
2025-11-04 19:45:30 UTC
========================================================================== */

:root {
  --qk-feed-card-radius: 12px;
  --qk-feed-card-border: 1px solid #e5e7eb;
  --qk-feed-card-shadow: 0 2px 8px rgb(15 23 42 / 8%);
  --qk-feed-overlay-backdrop: rgb(15 23 42 / 60%);
}

.qk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

.qk-card {
  background: #fff;
  border: var(--qk-feed-card-border);
  border-radius: var(--qk-feed-card-radius);
  box-shadow: var(--qk-feed-card-shadow);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  outline: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.qk-card:focus-visible {
  box-shadow: 0 0 0 3px rgb(37 99 235 / 45%);
}

.qk-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgb(15 23 42 / 12%);
}

.qk-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
  border-top-left-radius: var(--qk-feed-card-radius);
  border-top-right-radius: var(--qk-feed-card-radius);
}

.qk-card h3 {
  margin: 1rem 1rem 0.5rem;
  font-size: 1rem;
  line-height: 1.4;
}

.qk-card .qk-summary {
  margin: 0 1rem 1rem;
  color: #4b5563;
  line-height: 1.45;
}

.qk-card-footer {
  margin: auto 1rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.qk-tags {
  list-style: none;
  display: flex;
  gap: 0.4rem;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.qk-tags li {
  font-size: 0.75rem;
  color: #1f2937;
  background: #f3f4f6;
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
}

.qk-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
}

.qk-link:hover {
  text-decoration: underline;
}

#qk-overlay-root {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.qk-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 150ms ease-in;
}

.qk-overlay.is-open {
  opacity: 1;
}

.qk-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: var(--qk-feed-overlay-backdrop);
}

.qk-overlay__panel {
  position: relative;
  width: min(720px, calc(100% - 32px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 46px rgb(15 23 42 / 30%);
  padding: 1.5rem 1.75rem 2rem;
}

.qk-overlay__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-size: 1.5rem;
  background: transparent;
  border: none;
  color: #6b7280;
  cursor: pointer;
}

.qk-overlay__body h2 {
  margin: 0 0 0.75rem;
  font-size: 1.5rem;
}

.qk-overlay__image {
  max-width: 100%;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.qk-overlay__summary {
  color: #4b5563;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.qk-overlay__details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
  margin-bottom: 1.5rem;
}

.qk-overlay__details dt {
  font-weight: 600;
  color: #111827;
}

.qk-overlay__details dd {
  margin: 0;
  color: #4b5563;
}

.qk-overlay__actions {
  margin: 0;
}

.qk-button {
  display: inline-block;
  background: #2563eb;
  color: #fff;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-weight: 600;
}

.qk-button:hover {
  background: #1d4ed8;
}