/* Community gallery: dense square tiles, left-aligned bar, lightbox. Builds on site.css tokens. */
.cg { width: 100%; max-width: 1320px; margin: 0 auto; padding: 14px 20px 90px; flex: 1; }

/* ---------- Bar: search + type + sort, and the gnome's invitation on the right ---------- */
.cg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.cg-search { position: relative; flex: 0 1 300px; min-width: 200px; margin: 0; }
.cg-search .lucide { position: absolute; left: 14px; top: 50%; margin-top: -9px; color: var(--ink-muted); pointer-events: none; }
.cg-search input[type="search"] { width: 100%; padding: 10px 14px 10px 40px; border-radius: 14px; border: 1.5px solid var(--line-medium); background: #fff; color: var(--ink); font: 500 15px var(--font-sans); outline: none; }
.cg-search input[type="search"]:focus { border-color: var(--brand-red); box-shadow: 0 0 0 4px var(--brand-red-light); }
.cg-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--sand-pill); border-radius: 999px; }
.cg-seg__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 13px; border-radius: 999px; color: var(--ink-soft); font: 700 13.5px var(--font-sans); text-decoration: none; white-space: nowrap; }
.cg-seg__btn:hover { color: var(--ink); }
.cg-seg__btn.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(43, 31, 23, .14); }
.cg-seg__btn.is-active .lucide { color: var(--brand-red); }
.cg-tip { margin-left: auto; }
.result-summary { margin: 12px 0 10px; }

/* ---------- Dense grid of square tiles ---------- */
.cg-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 22px 16px; }
.tile { margin: 0; display: flex; flex-direction: column; border-radius: var(--radius-card); background: linear-gradient(175deg, #ffffff 0%, #fdfbf7 60%, #f7f1e7 100%); border: 1px solid var(--line-subtle); box-shadow: var(--shadow-card); overflow: hidden; transition: transform .28s cubic-bezier(.34, 1.4, .5, 1), box-shadow .28s ease, border-color .28s ease; }
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: rgba(184, 58, 40, .2); }
.tile-link { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--bg-canvas-alt, #efe8dc); color: #fff; }
.tile-link img, .tile-link video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s cubic-bezier(0.34, 1.2, 0.64, 1); }
.tile-link:hover img, .tile-link:hover video, .tile-link:focus-visible img { transform: scale(1.04); }
.tile-link:focus-visible { outline: 3px solid var(--brand-red); outline-offset: -3px; }
.tile-play { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(43, 31, 23, .55); color: #fff; }
.tile-meta { display: grid; gap: 8px; padding: 12px 14px 14px; }
.tile-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tile-name { font: 800 17px/1.2 var(--font-serif); color: var(--ink); text-decoration: none; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tile-name:hover { color: var(--brand-red); }
.tile-author { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--ink-muted); }
.tile-author .lucide { flex: none; width: 15px; height: 15px; color: var(--ink-muted); }
.tile-by { display: inline-flex; align-items: center; gap: 1px; color: var(--brand-red); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(184, 58, 40, .35); text-underline-offset: 3px; }
.tile-by .lucide { transition: transform .2s ease; }
.tile-by:hover { text-decoration-color: currentColor; }
.tile-by:hover .lucide { transform: translateX(2px); }
.tile-caption { margin: 0; padding: 9px 11px; border-radius: 12px; background: #fff; border: 1px solid var(--line-subtle); font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.tile-like { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-medium); background: #fff; color: var(--ink-soft); font: 700 13px var(--font-sans); cursor: pointer; }
.tile-like b { font-weight: 700; min-width: 0; }
.tile-like:hover { background: var(--brand-red-light); color: var(--brand-red); }
.tile-like[aria-pressed="true"] { background: var(--brand-red-light); border-color: rgba(184, 58, 40, .35); color: var(--brand-red); }
.cg-sentinel { height: 1px; }
.cg-empty { text-align: center; padding: 50px 16px; border: 2px dashed rgba(184, 58, 40, .22); border-radius: 24px; background: rgba(255, 255, 255, .55); margin-top: 10px; }
.cg-empty__emoji { font-size: 40px; margin: 0; }
.cg-empty h2 { font: 800 22px var(--font-serif); margin: 6px 0; }
.cg-empty p { color: var(--ink-soft); }
.cg-empty a { color: var(--brand-red); text-decoration: underline; }

/* ---------- Lightbox ---------- */
.cg-lightbox { width: min(1000px, 94vw); max-height: 92vh; padding: 0; border: 0; border-radius: var(--radius-card); background: var(--bg-canvas); color: var(--ink); box-shadow: var(--shadow-hover); overflow: hidden; }
.cg-lightbox[open] { display: grid; grid-template-columns: minmax(0, 1fr) 280px; }
.cg-lightbox::backdrop { background: rgba(244, 237, 225, .72); backdrop-filter: blur(6px); }
.cg-stage { position: relative; display: grid; place-items: center; min-height: 320px; max-height: 92vh; background: var(--bg-canvas-alt); }
.cg-stage img, .cg-stage video { display: block; max-width: 100%; max-height: 92vh; object-fit: contain; }
.cg-side { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px; overflow-y: auto; }
.cg-subject { font: 800 20px/1.15 var(--font-serif); color: var(--ink); text-decoration: none; }
.cg-subject:hover { text-decoration: underline; }
.cg-caption { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.45; white-space: pre-wrap; }
.cg-caption:empty { display: none; }
.cg-by { margin: 0; color: var(--ink-muted); font-size: 13px; }
.cg-by a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.cg-ref { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; background: var(--surface-card); border: 1px solid var(--line-subtle); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink); }
.cg-ref[hidden] { display: none; }
.cg-ref:hover { border-color: rgba(184, 58, 40, .35); }
.cg-ref img { width: 64px; height: 64px; flex: none; object-fit: contain; border-radius: 10px; background: var(--bg-canvas-alt); }
.cg-ref span { display: grid; gap: 2px; min-width: 0; font-size: 14px; }
.cg-ref small { color: var(--ink-muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cg-actions { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.cg-like, .cg-report { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-medium); background: transparent; color: var(--ink-soft); font: 700 14px var(--font-sans); cursor: pointer; }
.cg-like:hover { background: var(--brand-red-light); color: var(--brand-red); }
.cg-like[aria-pressed="true"] { background: var(--brand-red-light); border-color: rgba(184, 58, 40, .35); color: var(--brand-red); }
.cg-report { border-color: transparent; color: var(--ink-muted); font-weight: 600; }
.cg-report:hover { color: var(--ink); }
.cg-report-form { display: flex; flex-wrap: wrap; gap: 6px; }
.cg-report-form input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-medium); background: var(--surface-card); color: var(--ink); font: inherit; font-size: 13px; }
.cg-report-form button { padding: 8px 14px; border: 0; border-radius: 999px; background: var(--brand-red); color: #fff; font: 700 13px var(--font-sans); cursor: pointer; }
.cg-report-form output { width: 100%; font-size: 13px; color: var(--ink-soft); }
.cg-x { position: absolute; top: 8px; right: 8px; z-index: 5; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: var(--shadow-sm); color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer; }
.cg-nav { position: absolute; top: 50%; z-index: 4; width: 40px; height: 40px; margin-top: -20px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: var(--shadow-sm); color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer; }
.cg-nav--prev { left: 10px; }
.cg-nav--next { right: 290px; }
.cg-x:hover, .cg-nav:hover { background: #fff; color: var(--brand-red); }

@media (max-width: 760px) {
  .cg { padding: 10px 10px 90px; }
  .cg-search { flex-basis: 100%; }
  .cg-tip { margin-left: auto; }
  .cg-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 10px; }
  .tile-meta { padding: 10px 11px 12px; }
  .tile-name { font-size: 15px; }
  .cg-lightbox[open] { grid-template-columns: 1fr; max-height: 94vh; overflow-y: auto; }
  .cg-stage { min-height: 0; max-height: 62vh; }
  .cg-stage img, .cg-stage video { max-height: 62vh; }
  .cg-nav--next { right: 10px; }
}
@media (prefers-reduced-motion: reduce) { .tile-link img, .tile-link video { transition: none; } }
.cg-nav[hidden], .cg-report[hidden] { display: none; }

.cg-empty__gnome { width: 120px; height: 120px; object-fit: contain; display: block; margin: 0 auto; }

/* Author on one line: profile photo + name */
.tile-author { gap: 7px; min-width: 0; }
.tile-avatar { flex: none; width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: var(--bg-canvas-alt); border: 1px solid var(--line-medium); }
.tile-author .tile-by { min-width: 0; white-space: nowrap; }
.tile-by .tile-by-name { overflow: hidden; text-overflow: ellipsis; }