/* ════════════════════════════════════════════════════
   shades.css — Color Shades pages
   ════════════════════════════════════════════════════ */

/* ── Archive page preview strip ── */
.shades-preview-strip {
  display: flex;
  height: 100px;
}
.shades-preview-cell {
  flex: 1;
}

/* ── Detail page grid ── */
.shades-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 3rem;
}

.shades-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--border);
}

.shades-row:last-child {
  border-bottom: none;
}

/* ── Individual shade card ── */
.shade-card {
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.shade-card:last-child {
  border-right: none;
}

.shade-card-empty {
  background: var(--bg2);
  opacity: 0.3;
}

.shade-preview {
  height: 100px;
  width: 100%;
  flex-shrink: 0;
}

.shade-info {
  padding: 10px 12px 12px;
  background: var(--bg2);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--border);
}

.shade-name {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

/* ── Value buttons (hex / rgb / hsl) — click to copy ── */
.shade-values {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.shade-value-btn {
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text3);
  text-align: left;
  padding: 2px 0;
  cursor: pointer;
  transition: color 0.12s;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shade-value-btn:hover { color: var(--accent); }
.shade-value-btn.copied { color: #5dca99; }
.shade-value-btn:focus { outline: none; }
.shade-value-btn:focus-visible {
  outline: none;
  color: var(--accent);
  text-decoration: underline;
}

/* ── Editorial content section ── */
.shades-content {
  max-width: 680px;
  margin-bottom: 2.5rem;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--text2);
}

.shades-content h2 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  margin: 2rem 0 0.75rem;
}

.shades-content p { margin-bottom: 1rem; }
.shades-content strong { color: var(--text); font-weight: 700; }

/* ── Related links ── */
.shades-related {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
}

.shades-related-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text3);
  padding-right: 6px;
  border-right: 1px solid var(--border2);
}

.shades-related-link {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text2);
  text-decoration: none;
  transition: color 0.15s;
}

.shades-related-link:hover { color: var(--accent); }

/* ── Responsive ── */
@media (max-width: 780px) {
  .shades-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .shade-card:nth-child(2)  { border-right: none; }
  .shade-card:nth-child(3)  { border-right: 1px solid var(--border); border-top: 1px solid var(--border); }
  .shade-card:nth-child(4)  { border-right: none; border-top: 1px solid var(--border); }

  .shade-value-btn { font-size: 0.55rem; }
}

@media (max-width: 480px) {
  .shade-preview { height: 70px; }
}