/* ============================================================================
   15BallPool — Public Image Gallery
   Scoped to the gallery pages. Reuses the site's palette from style.css so the
   gallery feels like part of 15ballpool.com. Loaded only on gallery routes.
   ========================================================================== */
.gal-body { background:#101216; }

.gal-shell { max-width:1180px; margin:0 auto; padding:22px 18px 40px; }

/* Breadcrumb */
.breadcrumb-sm { background:#0d1014; border-bottom:1px solid #1d232c; font-size:.82rem; }
.breadcrumb-sm .gal-shell { padding:10px 18px; color:#8b93a7; }
.breadcrumb-sm a { color:#00ffcc; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
.breadcrumb-sm a:hover { color:#7dffe6; }
.breadcrumb-sm .bc-sep { color:#4a5568; margin:0 6px; }

/* Headings + intro */
.gal-head { margin:6px 0 20px; }
.gal-head h1 { color:#fff; font-size:1.95rem; line-height:1.25; margin:0 0 10px; font-weight:800; letter-spacing:-.4px; }
.gal-intro { color:#b9c2d0; font-size:1rem; line-height:1.7; max-width:78ch; margin:0 0 14px; }
.gal-intro p { margin:0 0 10px; }
.gal-meta-line { color:#7d8798; font-size:.82rem; }
.gal-meta-line a { color:#00ffcc; text-decoration:underline; text-underline-offset:2px; }
.gal-meta-line a:hover { color:#7dffe6; }

/* CTA back to the game */
.gal-cta { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:18px 0 26px; }
.gal-btn { display:inline-flex; align-items:center; gap:8px; background:#00ffcc; color:#08110c; font-weight:800; font-size:.95rem;
  border:0; border-radius:28px; padding:13px 24px; text-decoration:none; min-height:48px; box-shadow:0 8px 22px rgba(0,255,204,.28); }
.gal-btn:hover { background:#00d9b0; }
.gal-btn--ghost { background:transparent; color:#cdd6e3; border:1px solid #2a3240; box-shadow:none; }
.gal-btn--ghost:hover { border-color:#00ffcc; color:#00ffcc; background:transparent; }

/* Category chips */
.gal-cats { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; padding:0; list-style:none; }
.gal-cats a { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:22px; background:#171b22;
  border:1px solid #262d38; color:#c8d1de; text-decoration:none; font-size:.85rem; font-weight:600; min-height:38px; }
.gal-cats a:hover, .gal-cats a[aria-current="page"] { border-color:#00ffcc; color:#00ffcc; }

/* Grid */
.gal-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; padding:0; margin:0; list-style:none; }
.gal-item { background:#171b22; border:1px solid #232a35; border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:border-color .18s, transform .18s; }
.gal-item:hover { border-color:#00ffcc; transform:translateY(-3px); }
.gal-item-media { display:block; position:relative; background:#0c0f13; aspect-ratio:4/3; overflow:hidden; }
.gal-item-media img { width:100%; height:100%; object-fit:cover; display:block; }
.gal-item-body { padding:12px 14px 14px; display:flex; flex-direction:column; gap:6px; flex:1; }
.gal-item-title { color:#fff; font-size:.95rem; font-weight:700; line-height:1.35; margin:0; }
.gal-item-title a { color:#fff; text-decoration:none; }
.gal-item-title a:hover { color:#00ffcc; }
.gal-item-cap { color:#98a2b3; font-size:.83rem; line-height:1.55; margin:0; }
/* WCAG 2.2 target size (minimum): the small text links inside a card still need a
   24px hit area at the narrowest supported width (320px). */
.gal-item-cat { color:#00ffcc; font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px; text-decoration:none;
  display:inline-flex; align-items:center; min-height:24px; }
.gal-item-title a { display:inline-block; min-height:24px; }
.gal-item-foot { margin-top:auto; padding-top:6px; color:#8b95a5; font-size:.74rem; }
.gal-figure { margin:0; }
.gal-figure figcaption { color:#98a2b3; font-size:.83rem; line-height:1.55; padding:10px 14px 14px; }

/* Prose and utility links that carry no class of their own. The browser default
   blue (#0000ee) only reaches 1.99:1 against this dark background, so every
   link that is not already styled as a button/card is given the site accent. */
.gal-intro a,
.gal-empty a,
.gal-facts dd a,
.gal-detail-body a:not(.gal-btn),
.gal-aside-card a:not(.gal-btn) { color:#00ffcc; text-decoration:underline; }
.gal-intro a:hover,
.gal-empty a:hover,
.gal-facts dd a:hover,
.gal-detail-body a:not(.gal-btn):hover,
.gal-aside-card a:not(.gal-btn):hover { color:#7dffe6; }

/* Empty state */
.gal-empty { background:#151920; border:1px dashed #2b3442; border-radius:14px; padding:34px 22px; text-align:center; color:#98a2b3; }

/* Pagination */
.gal-pager { display:flex; flex-wrap:wrap; align-items:center; gap:10px; justify-content:center; margin:30px 0 10px; }
.gal-pager a, .gal-pager span { display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px;
  padding:10px 16px; border-radius:10px; border:1px solid #262d38; background:#171b22; color:#c8d1de; text-decoration:none; font-size:.88rem; font-weight:600; }
.gal-pager a:hover { border-color:#00ffcc; color:#00ffcc; }
.gal-pager .is-current { background:#00ffcc; border-color:#00ffcc; color:#08110c; }
.gal-pager .is-disabled { opacity:.4; }

/* Detail page */
.gal-detail { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,.95fr); gap:28px; align-items:start; margin-top:8px; }
.gal-figure-main { margin:0; background:#0c0f13; border:1px solid #232a35; border-radius:14px; overflow:hidden; }
.gal-figure-main img { width:100%; height:auto; display:block; }
.gal-figure-main figcaption { padding:14px 16px; color:#b9c2d0; font-size:.9rem; line-height:1.6; border-top:1px solid #1d232c; }
.gal-facts { background:#151920; border:1px solid #232a35; border-radius:14px; padding:16px 18px; margin-top:16px; }
.gal-facts h2, .gal-facts h3 { color:#00ffcc; font-size:.95rem; margin:0 0 10px; }
.gal-facts dl { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0; font-size:.85rem; }
.gal-facts dt { color:#7d8798; }
.gal-facts dd { color:#dfe6ef; margin:0; word-break:break-word; }
.gal-aside-card { background:#151920; border:1px solid #232a35; border-radius:14px; padding:18px; margin-bottom:16px; }
.gal-aside-card h2 { color:#fff; font-size:1.02rem; margin:0 0 8px; }
.gal-aside-card p { color:#98a2b3; font-size:.86rem; line-height:1.6; margin:0 0 10px; }
.gal-detail-body { max-width:78ch; }
.gal-detail-body h2 { color:#00ffcc; font-size:1.25rem; margin:28px 0 10px; }
.gal-detail-body p { color:#c8d1de; font-size:.98rem; line-height:1.75; margin:0 0 12px; }

/* Related images */
.gal-related { margin-top:34px; }
.gal-related h2 { color:#fff; font-size:1.2rem; margin:0 0 14px; }
.gal-related .gal-grid { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }

/* Jump links / internal links list */
.gal-links { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 0; padding:0; list-style:none; }
.gal-links a { color:#00ffcc; font-size:.88rem; display:inline-block; min-height:24px; }
.gal-facts dd a { display:inline-block; min-height:24px; }

/* Utility */
.gal-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

@media (max-width:900px) {
  .gal-detail { grid-template-columns:1fr; }
  .gal-head h1 { font-size:1.55rem; }
}
@media (max-width:560px) {
  .gal-shell { padding:16px 14px 32px; }
  .gal-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
  .gal-item-body { padding:10px 11px 12px; }
  .gal-item-title { font-size:.86rem; }
  .gal-item-cap { font-size:.78rem; }
  .gal-head h1 { font-size:1.35rem; }
}
@media (prefers-reduced-motion:reduce) {
  .gal-item { transition:none; }
  .gal-item:hover { transform:none; }
}