/* Page-scoped CSS for gallery.css, lifted verbatim out of the inline <style> block
   gallery.html carried (#7007). A plain file rather than an inline block or a
   .razor.css: the selectors below use sibling and descendant combinators that
   Blazor's CSS isolation rewriter would silently change the meaning of, and a
   file caches while an inline block is re-sent with every page. */

  .g-hero{text-align:center;padding:4.5rem 0 1rem}
  .g-hero .lede{max-width:38rem;margin:1rem auto 0;color:var(--muted);font-size:1.15rem}
  .g-section h2{margin-bottom:.3rem}
  .g-section .sub{color:var(--muted);margin-bottom:1.5rem}
  .shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));gap:1.1rem}
  figure{margin:0;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface)}
  figure:hover{border-color:var(--border-strong)}
  .media{position:relative;aspect-ratio:16/10;background:linear-gradient(160deg,var(--bg-alt),#0b0b10);display:block}
  .media img,.media video{width:100%;height:100%;object-fit:cover;display:block}
  figcaption{padding:.8rem 1rem;font-size:.92rem;color:var(--text-strong)}
  figcaption small{display:block;color:var(--muted);font-weight:400;margin-top:.15rem}
  /* placeholder shown until the real file is added */
  .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;
    border:1.5px dashed var(--border-strong);border-radius:var(--radius-lg);color:var(--muted);text-align:center;padding:1rem}
  .ph .ico{font-size:1.6rem;opacity:.7}
  .ph code{font-size:.72rem;color:var(--muted-strong);background:transparent}
  figure.ready .ph{display:none}
  .videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(24rem,1fr));gap:1.2rem}
  .note{margin-top:2.5rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
    padding:1rem 1.2rem;color:var(--muted);font-size:.9rem}
  .note b{color:var(--text-strong)}