/* gpcl.css — technique-card styling for the Mystery Cache Solving Checklist.
   Layers on ../Shared/theme.css; uses design tokens only. */

/* Per-category grid of technique cards (inside each open <details>). */
.gpcl-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: var(--nltm-sp-4);
   margin: var(--nltm-sp-4) 0 0;
}

/* A single technique card — two parts: body (name + description) and xref links. */
.gpcl-card {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: var(--nltm-sp-2);
   background: var(--nltm-surface);
   border: 1px solid var(--nltm-line);
   border-left: 3px solid var(--nltm-accent);
   border-radius: var(--nltm-radius-sm);
   box-shadow: var(--nltm-shadow-1);
   padding: var(--nltm-sp-4);
   transition: transform 140ms ease, box-shadow 140ms ease;
}
.gpcl-card:hover {
   transform: translateY(-2px);
   box-shadow: var(--nltm-shadow-2);
}

.gpcl-card-name {
   font-family: var(--nltm-font-display);
   font-style: italic;
   font-weight: 600;
   font-size: var(--nltm-fs-4);
   line-height: var(--nltm-lh-tight);
   color: var(--nltm-primary-deep);
}

.gpcl-card-desc {
   font-size: var(--nltm-fs-2);
   line-height: var(--nltm-lh-base);
   color: var(--nltm-ink);
   margin: 0;
}
.gpcl-card-desc.is-pending {
   color: var(--nltm-muted);
   font-style: italic;
}

/* Cross-reference link cluster, pinned to the bottom of the card. */
.gpcl-xref {
   display: flex;
   flex-wrap: wrap;
   gap: var(--nltm-sp-2);
   margin-top: auto;
   padding-top: var(--nltm-sp-1);
}

/* Pills: a tool link (primary) and a video link (accent/YouTube). */
.gpcl-pill {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: var(--nltm-sp-1) var(--nltm-sp-3);
   border-radius: 999px;
   font: 600 var(--nltm-fs-1)/1 var(--nltm-font-body);
   text-decoration: none;
   border: 1px solid transparent;
   transition: background-color 120ms ease, color 120ms ease, transform 120ms ease;
}
.gpcl-pill:hover { transform: translateY(-1px); }
.gpcl-pill .fa { font-size: 0.95em; }

.gpcl-pill--tool {
   background: var(--nltm-primary-soft);
   color: var(--nltm-primary-deep);
   border-color: var(--nltm-primary-soft);
}
.gpcl-pill--tool:hover {
   background: var(--nltm-primary-deep);
   color: #fdf6e7;
}

.gpcl-pill--video {
   background: var(--nltm-accent-soft);
   color: var(--nltm-primary-deep);
   border-color: var(--nltm-accent-soft);
}
.gpcl-pill--video:hover {
   background: var(--nltm-accent);
   color: #fff;
}
.gpcl-pill--video .fa { color: #c4302b; }
.gpcl-pill--video:hover .fa { color: #fff; }

/* Small per-category count chip in the summary. */
.gpcl-count {
   margin-left: auto;
   font-family: var(--nltm-font-body);
   font-style: normal;
   font-weight: 600;
   font-size: var(--nltm-fs-1);
   color: var(--nltm-muted);
   background: var(--nltm-surface-2);
   border: 1px solid var(--nltm-line);
   border-radius: 999px;
   padding: 2px 10px;
}

@media (max-width: 520px) {
   .gpcl-grid { grid-template-columns: 1fr; }
}