/* Digital Greenhouse — topics.css
   The topic hubs: /topics (one card per topic) and each topic's own hub
   page (/electronics first). Same shape as the /music hub: a feature block
   with a picture, then shelves of cards. Cards themselves come from
   tools.css (.tool-card). */

.tp-feature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--space-6, 2rem); align-items: start;
  padding: var(--space-5, 1.5rem);
  background: var(--bg-card, #fff);
  border: 1px solid var(--color-line, #d8e2db);
  border-radius: var(--radius, 10px);
  margin-bottom: var(--space-6, 2rem);
}
.tp-feature img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-sm, 6px); display: block; }
/* A tall photo whose subject sits low in the frame (the multimeter in its case). */
.tp-feature img.tp-img--low { object-position: 50% 80%; }
/* A tall screenshot whose subject is at the top (the Ironbark meters). */
.tp-feature img.tp-img--top { object-position: 50% 0; }
/* A photo that needs its credit shown: wrap it in a figure with a caption. */
.tp-feature figure { margin: 0; }
.tp-feature figcaption { margin-top: .5rem; font-size: var(--fs-xs, .78rem); line-height: 1.45; color: var(--text-muted, #5b6b62); }
.tp-credit a { color: inherit; }
.tp-feature h2 { margin-top: 0; }
.tp-feature h2 a { color: inherit; text-decoration: none; }
.tp-feature h2 a:hover { text-decoration: underline; }
.tp-links { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0 1rem; padding: 0; list-style: none; }
.tp-links a {
  display: inline-block; padding: .3rem .7rem;
  border: 1px solid var(--color-line, #d8e2db); border-radius: 999px;
  font-size: var(--fs-sm, .9rem); text-decoration: none; color: var(--text, #10261b);
}
.tp-links a:hover { border-color: var(--color-emerald, #1f6b4a); color: var(--color-emerald, #1f6b4a); }
[data-theme="dark"] .tp-links a:hover { border-color: var(--color-sprout, #8fd6a9); color: var(--color-sprout, #8fd6a9); }
.tp-sub { margin: 1rem 0 .2rem; font-size: var(--fs-xs, .78rem); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted, #5b6b62); }
.tp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--space-4, 1rem); margin-bottom: var(--space-6, 2rem); }
.tp-h2 { margin: var(--space-7, 3rem) 0 var(--space-2, .5rem); }
.tp-lead { margin: 0 0 var(--space-4, 1rem); color: var(--text-muted, #5b6b62); max-width: 46rem; }

/* A topic with no pages yet: a card that is plainly not a link. */
.tp-soon { cursor: default; }
.tp-soon .tool-card__cat { color: var(--text-muted, #5b6b62); }

/* The gear shelf (includes/<topic>-gear.html). */
.tp-gear {
  padding: var(--space-5, 1.5rem);
  background: var(--bg-card, #fff);
  border: 1px solid var(--color-line, #d8e2db);
  border-radius: var(--radius, 10px);
  margin-bottom: var(--space-4, 1rem);
}
.tp-gear h3 { margin: 0 0 .4rem; font-size: var(--fs-lg, 1.15rem); }
.tp-gear p { margin: 0 0 .9rem; max-width: 46rem; }
.tp-gear__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.tp-note { font-size: var(--fs-sm, .9rem); color: var(--text-muted, #5b6b62); max-width: 46rem; }

@media (max-width: 760px) {
  .tp-feature { grid-template-columns: minmax(0, 1fr); gap: var(--space-4, 1rem); }
}