/* BB Field Resources: the one standard for "go deeper" links on lessons and posts.
   Two groups, each with one job:
   - Watch it: YouTube videos. Red is reserved for these, matching the blog's "Watch it" cards,
     so red always means "opens a YouTube video".
   - Read the source: official docs and references, in BB green.
   Markup:
   <section class="intel-section field-resources"><div class="intel-content">
     <h2>Field Resources</h2><p class="fr-lead">…</p>
     <h3 class="fr-h">Watch it</h3><div class="fr-vids"><a class="fr-vid" …>…</a></div>
     <h3 class="fr-h">Read the source</h3><div class="fr-docs"><a class="fr-doc" …>…</a></div>
   </div></section> */
.field-resources { --fr-line: var(--theme-component-ink-8); --fr-panel: var(--theme-component-surface-13); --fr-muted: var(--theme-component-muted-1); --fr-dim: var(--theme-component-muted-2); --fr-green: var(--bb-kelly, var(--theme-component-primary-1)); --fr-red: var(--theme-component-error-7); --fr-mono: "JetBrains Mono", Consolas, ui-monospace, monospace; }
.field-resources .fr-lead { color: var(--fr-muted); max-width: 70ch; margin: 0 0 8px; }
.field-resources .fr-h { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; font: 800 14px var(--fr-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fr-green); }
.field-resources .fr-h::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.field-resources .fr-h.watch { color: var(--fr-red); }

/* Watch it: video cards */
.fr-vids { display: grid; gap: 10px; }
.fr-vid { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 16px; align-items: center; text-decoration: none; color: var(--theme-component-ink-2); border: 1px solid var(--fr-line); border-radius: 10px; background: var(--fr-panel); padding: 10px; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
.fr-vid:hover { transform: translateY(-3px); border-color: var(--theme-component-error-10); box-shadow: 0 14px 30px -18px var(--theme-component-error-11); color: var(--theme-component-ink-2); }
.fr-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; background: radial-gradient(ellipse at 30% 30%, var(--theme-component-primary-35), transparent 60%), linear-gradient(135deg, var(--theme-component-surface-14), var(--theme-component-page-3)); border: 1px solid var(--fr-line); display: grid; place-items: center; overflow: hidden; }
.fr-thumb .fr-play { width: 44px; height: 30px; border-radius: 8px; background: var(--fr-red); position: relative; transition: transform 0.2s; box-shadow: 0 6px 18px -6px var(--theme-component-error-12); }
.fr-thumb .fr-play::after { content: ""; position: absolute; left: 18px; top: 9px; border-left: 11px solid var(--theme-component-border-7); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.fr-vid:hover .fr-play { transform: scale(1.12); }
.fr-thumb .fr-len { position: absolute; right: 6px; bottom: 6px; font: 800 14px var(--fr-mono); background: var(--theme-component-page-17); color: var(--theme-component-ink-5); padding: 1px 5px; border-radius: 3px; }
.fr-tx { display: grid; gap: 3px; min-width: 0; }
.fr-tx small { font: 700 15px var(--fr-mono); color: var(--fr-dim); letter-spacing: 0.06em; text-transform: uppercase; }
.fr-tx b { font-size: 1.02rem; font-weight: 800; color: var(--theme-component-ink-2); }
.fr-tx span { font-size: max(14px, 0.88rem); color: var(--fr-muted); line-height: 1.5; }
.fr-go { font-weight: 800; font-size: 14px; color: var(--theme-component-ink-5); background: var(--theme-component-error-13); border-radius: 6px; padding: 9px 14px; white-space: nowrap; }
.fr-vid:hover .fr-go { background: var(--fr-red); }

/* Read the source: reference cards */
.fr-docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.fr-doc { display: flex; align-items: flex-start; gap: 14px; padding: 16px; background: var(--theme-component-primary-36); border: 1px solid var(--theme-component-primary-37); border-radius: 10px; text-decoration: none; transition: background 0.2s, border-color 0.2s, transform 0.2s; }
.fr-doc:hover { background: var(--theme-component-primary-3); border-color: var(--fr-green); transform: translateY(-3px); }
.fr-doc i { font-size: 1.5rem; color: var(--fr-green); width: 1.8rem; text-align: center; flex: none; margin-top: 2px; }
.fr-doc b { display: block; color: var(--theme-component-ink-5); font-weight: 800; font-size: max(14px, 0.98rem); margin-bottom: 3px; }
.fr-doc span { display: block; color: var(--fr-muted); font-size: 14px; line-height: 1.5; }
.fr-doc small { display: block; margin-top: 6px; font: 700 15px var(--fr-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fr-green); }

/* Keep going: links to related BB lessons */
.fr-next { display: flex; flex-wrap: wrap; gap: 8px; }
.fr-next a { font: 700 14px var(--fr-mono); color: var(--fr-green); border: 1px solid var(--theme-component-primary-34); border-radius: 999px; padding: 7px 14px; text-decoration: none; transition: background 0.2s, color 0.2s; }
.fr-next a:hover { background: var(--fr-green); color: var(--theme-component-on-primary-2); }

@media (max-width: 760px) {
  .fr-vid { grid-template-columns: 110px minmax(0, 1fr); }
  .fr-go { grid-column: 1 / -1; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .fr-vid, .fr-doc, .fr-play { transition: none; }
  .fr-vid:hover, .fr-doc:hover { transform: none; }
}