/*
  style.css
  Description:
    - Fixed-cell gallery grid (200px base cell)
    - Responsive: 1..5 columns depending on viewport (max 5)
    - Columns are centered horizontally on the page
    - Cut corners (chamfer) instead of rounded corners
    - Smart loading: skeleton only when JS sets .is-loading
    - Mosaic on listing pages via .is-portrait / .is-landscape
    - Gallery page override: uniform grid + object-fit: contain
    - UI prefs (cookies) via body classes:
        * hide-cats
        * hide-counts
    - Badge categories row:
        * Full tile width (left/right insets)
        * Up to 5 badges (JS enforces + CSS safety net)
        * One-row marquee (hover-to-scroll)
    - Categories panel:
        * Supports both legacy checkbox list and new button grid (.catPick)
        * Match mode supports radio OR checkbox inputs
    - Theme:
        * html[data-theme="dark"] (default)
        * html[data-theme="light"]
  Created: 2025-12-30
  Updated: 2026-01-16
*/

:root {
  --cell: 200px;
  --gap: 8px;            /* 1-2px tighter than before */
  
  /* Max width of the centered 5-column grid (matches left thumb column alignment) */
  --gridMax: calc((5 * var(--cell)) + (4 * var(--gap)));
  --cut: 14px;
  --cutSmall: 10px;
  --max: 2600px;

  /* Dark theme defaults */
  --bg: #0b0c10;
  --card: #11131a;
  --text: #e8e8ea;
  --muted: #a7a7ab;
  --line: rgba(255,255,255,0.08);

  --sk1: rgba(255,255,255,0.06);
  --sk2: rgba(255,255,255,0.10);

  --badgeBg: rgba(0,0,0,0.78);
  --badgeLine: rgba(255,255,255,0.18);

  /* Accent used by checkboxes (ensure it's set somewhere; keep existing behavior) */
  --accent: #5aa0ff;
}

html[data-theme="light"] {
  --bg: #f6f7fb;
  --card: #ffffff;
  --text: #101214;
  --muted: #4d5560;
  --line: rgba(0,0,0,0.10);

  --sk1: rgba(0,0,0,0.04);
  --sk2: rgba(0,0,0,0.08);

  --badgeBg: rgba(0,0,0,0.72);
  --badgeLine: rgba(255,255,255,0.22);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.wrap {
  width: min(var(--gridMax), calc(100% - 24px));
  margin: 0 auto;
}

/* Breadcrumbs (single-line, inline with grid) */
.breadcrumbs{
  text-align: left;
  margin: 10px 0 6px;
  font-size: 13px;
  color: var(--muted);
}

.breadcrumbs ol{
  justify-content: flex-start;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}

.breadcrumbs li{
  list-style: none !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 !important;
  margin: 0 !important;
}

.breadcrumbs li + li::before{
  content: "→";
  opacity: 0.6;
}

.breadcrumbs a{
  color: var(--muted);
  text-decoration: none;
}

.breadcrumbs a:hover{
  color: var(--text);
  text-decoration: underline;
}

.breadcrumbs span[aria-current="page"]{
  color: var(--text);
  font-weight: 500;
}

/* Top bar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(5,42,92,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
html[data-theme="light"] .topbar{
  background: rgba(165,205,255,0.92);
}

.topbarInner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  gap: 12px;
}

.topLeft{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.brand {
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.topRight{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

/* Button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  background: transparent;
  cursor: pointer;
}
.btn:hover { border-color: rgba(255,255,255,0.18); }
html[data-theme="light"] .btn:hover { border-color: rgba(0,0,0,0.22); }

.btnWide {
  width: 100%;
  max-width: 360px;
}

/* Preferences panel */
.prefsPanel{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 230px;
  padding: 10px 10px;
  border: 1px solid var(--line);
  background: rgba(17,19,26,0.95);
  backdrop-filter: blur(10px);
  z-index: 50;
}
html[data-theme="light"] .prefsPanel{
  background: rgba(255,255,255,0.95);
}

/* Categories panel */
.catsPanel{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 320px;
  max-width: calc(100vw - 24px);
  padding: 10px 10px;
  border: 1px solid var(--line);
  background: rgba(17,19,26,0.95);
  backdrop-filter: blur(10px);
  z-index: 50;
}
html[data-theme="light"] .catsPanel{
  background: rgba(255,255,255,0.95);
}

.catsTitle{
  font-weight: 700;
  font-size: 13px;
  margin: 2px 0 8px;
  color: var(--text);
}

.catsList{
  max-height: 55vh;
  overflow: auto;
  padding-right: 4px;
}

/* Legacy checkbox rows (kept for backward compatibility) */
.catsRow{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 2px;
  font-size: 13px;
  color: var(--text);
}

.catsRow input[type="checkbox"]{
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.catLink{
  color: var(--text);
  text-decoration: none;
  line-height: 1.1;
}

.catLink:hover{
  text-decoration: underline;
}

/* NEW: button grid category picker (.catsGrid + .catPick) */
.catsGrid{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 6px;
  padding: 2px 2px;
}

.catPick{
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.20);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 8px 10px;
  text-decoration: none;
  user-select: none;
}

html[data-theme="light"] .catPick{
  background: rgba(0,0,0,0.06);
}

.catPick:hover{
  border-color: rgba(255,255,255,0.18);
}
html[data-theme="light"] .catPick:hover{
  border-color: rgba(0,0,0,0.22);
}

.catPick.is-selected{
  border-color: rgba(90,160,255,0.65);
  box-shadow: 0 0 0 2px rgba(90,160,255,0.22) inset;
}

.catPick:focus-visible{
  outline: 2px solid rgba(90,160,255,0.65);
  outline-offset: 2px;
}

/* Categories actions */
.catsActions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}

.catsActions .btn{
  flex: 1;
}

/* Match mode */
.catsMatch{
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.catsMatchLabel{
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
}

.catsMatchOpt{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 2px;
  font-size: 13px;
  color: var(--text);
}

/* Support BOTH radio and checkbox (we currently use checkbox + JS mutual exclusion) */
.catsMatchOpt input[type="radio"],
.catsMatchOpt input[type="checkbox"]{
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.prefsTitle{
  font-weight: 700;
  font-size: 13px;
  margin: 2px 0 8px;
  color: var(--text);
}

.prefsRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 2px;
  font-size: 13px;
  color: var(--text);
}
.prefsRow input[type="checkbox"]{
  width: 18px;
  height: 18px;
}

/* ====== GRID ====== */
.grid {
  width: 100%;
  padding: 16px 0 24px;
  display: grid;
  gap: var(--gap);

  grid-auto-rows: var(--cell);
  grid-auto-flow: row;
  justify-content: center;

  grid-template-columns: repeat(2, var(--cell));
}
@media (min-width: 430px) { .grid { grid-template-columns: repeat(2, var(--cell)); } }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, var(--cell)); } }
@media (min-width: 850px) { .grid { grid-template-columns: repeat(4, var(--cell)); } }
@media (min-width: 1060px) { .grid { grid-template-columns: repeat(5, var(--cell)); } }

/* ====== TILE ====== */
.tile {
  background: var(--card);
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;

  content-visibility: auto;
  contain-intrinsic-size: var(--cell) var(--cell);
}

.tile.is-portrait {
  contain-intrinsic-size: var(--cell) calc(var(--cell) * 2);
}

.tile.is-landscape {
  contain-intrinsic-size: calc(var(--cell) * 2) var(--cell);
}

/* Anchor fills tile */
.tileLink {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Admin remove badge (only rendered server-side for admin IPs) */
.adminRemove{
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  border-radius: 999px;
  color: #fff;
  background: rgba(200,0,0,0.86);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(2px);
}
.adminRemove:hover{
  transform: scale(1.05);
}
html[data-theme="light"] .adminRemove{
  border-color: rgba(0,0,0,0.22);
}

.adminRemoveLink{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  border-radius: 999px;
  color: #fff;
  background: rgba(200,0,0,0.86);
  border: 1px solid rgba(255,255,255,0.22);
}
html[data-theme="light"] .adminRemoveLink{
  border-color: rgba(0,0,0,0.22);
}

.btn.btnDanger{
  background: rgba(200,0,0,0.16);
  border-color: rgba(200,0,0,0.55);
}
.btn.btnDanger:hover{
  border-color: rgba(200,0,0,0.75);
}

/* Images */
.thumb {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;

  opacity: 1;
  transition: opacity 180ms ease;
  transform: translateZ(0);
}

/* Smart loading */
.tile.is-loading .tileLink {
  background: linear-gradient(90deg, var(--sk1), var(--sk2), var(--sk1));
  background-size: 240% 100%;
  animation: skeleton 1.2s ease-in-out infinite;
}
.tile.is-loading .thumb { opacity: 0; }

.tile.is-loaded .tileLink { animation: none; background: none; }
.tile.is-loaded .thumb { opacity: 1; }

.tile.is-lcp.is-loading .tileLink {
  animation: none !important;
  background: none !important;
}

/* Error / rate-limit */
.tile.is-error .tileLink{
  background: rgba(0,0,0,0.18);
}
html[data-theme="light"] .tile.is-error .tileLink{
  background: rgba(0,0,0,0.06);
}

.tile.is-rate-limited .tileLink::after{
  content: "Rate limited";
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 5;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,0.72);
  padding: 4px 6px;
  pointer-events: none;
}

/* Low-res strategy: blurred background via --thumb-bg */
.tile.is-lowres .tileLink::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--thumb-bg);
  background-size: cover;
  background-position: center;
  filter: blur(18px);
  transform: scale(1.08);
  opacity: 0.55;
}
.tile.is-lowres .thumb{
  position: relative;
  z-index: 1;
}

/* ====== MOSAIC ====== */
.tile.is-portrait { grid-row: span 2; }

@media (min-width: 850px) and (max-width: 1059px) {
  .tile.is-landscape { grid-column: span 2; }
}
@media (min-width: 1060px) {
  .tile.is-landscape { grid-column: auto; }
}

/* Badge: count (top-right) */
.badgeCount {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 6;

  background: var(--badgeBg);
  color: #fff;

  font-size: 12px;
  font-weight: 700;
  line-height: 1;

  padding: 6px 8px;
  pointer-events: none;
}

/* Hide count if pref says so */
body.hide-counts .badgeCount{ display:none !important; }

/* Categories row (bottom) */
.badgeCats{
  position: absolute;
  left: 6px;
  right: 6px;      /* full tile width */
  bottom: 6px;
  z-index: 6;

  /*
    Keep pills inside the chamfer. Container spans full width;
    we inset contents via padding.
  */
  padding: 0 calc(var(--cut) - 6px) calc(var(--cut) - 6px);

  display: flex;
  flex-wrap: nowrap;        /* one row */
  gap: 4px;
  justify-content: center;  /* visually tidy */
  align-items: center;

  max-width: none;
  overflow: hidden;         /* never spill outside tile */
  pointer-events: none;
}

/* Hide cats if pref says so */
body.hide-cats .badgeCats{ display:none !important; }

.badgeCat{
  pointer-events: auto; /* each link clickable */
  display: inline-flex;
  align-items: center;
  white-space: nowrap;

  font-size: 12px;
  font-weight: 700;
  line-height: 1;

  color: #fff;
  background: rgba(0,0,0,0.72);
  border: 1px solid rgba(255,255,255,0.14);

  padding: 4px 7px;
  text-decoration: none;
}
html[data-theme="light"] .badgeCat{
  background: rgba(0,0,0,0.62);
  border-color: rgba(255,255,255,0.18);
}

.badgeCat:hover{
  border-color: rgba(255,255,255,0.28);
}

/* NOTE: We no longer cap category badges (show all; overflow handled via marquee). */

/* Gallery page category row (under title) */
.galleryCatsRow{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 4px 4px;
  margin: 0 0 12px;
  overflow: hidden;
}

.galleryCatsRow .badgeCat{
  /* Double height vs tile badges */
  padding: 8px 12px;
}

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

/* Bottom */
.pagerBottom {
  padding: 0 0 24px;
  display: flex;
  justify-content: center;
}
.sentinel { height: 1px; }

@keyframes skeleton {
  0%   { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}

/* ====== CUT CORNERS ====== */
.tile,
.tileLink,
.thumb,
.badgeCount,
.btn {
  border-radius: 0 !important;

  -webkit-clip-path: polygon(
    var(--cut) 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut)),
    0 var(--cut)
  );
  clip-path: polygon(
    var(--cut) 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut)),
    0 var(--cut)
  );
}

/* Small chamfer for category pills */
.badgeCat{
  -webkit-clip-path: polygon(
    var(--cutSmall) 0,
    calc(100% - var(--cutSmall)) 0,
    100% var(--cutSmall),
    100% calc(100% - var(--cutSmall)),
    calc(100% - var(--cutSmall)) 100%,
    var(--cutSmall) 100%,
    0 calc(100% - var(--cutSmall)),
    0 var(--cutSmall)
  );
  clip-path: polygon(
    var(--cutSmall) 0,
    calc(100% - var(--cutSmall)) 0,
    100% var(--cutSmall),
    100% calc(100% - var(--cutSmall)),
    calc(100% - var(--cutSmall)) 100%,
    var(--cutSmall) 100%,
    0 calc(100% - var(--cutSmall)),
    0 var(--cutSmall)
  );
}

/* Make .catPick match chamfer style too */
.catPick{
  -webkit-clip-path: polygon(
    var(--cutSmall) 0,
    calc(100% - var(--cutSmall)) 0,
    100% var(--cutSmall),
    100% calc(100% - var(--cutSmall)),
    calc(100% - var(--cutSmall)) 100%,
    var(--cutSmall) 100%,
    0 calc(100% - var(--cutSmall)),
    0 var(--cutSmall)
  );
  clip-path: polygon(
    var(--cutSmall) 0,
    calc(100% - var(--cutSmall)) 0,
    100% var(--cutSmall),
    100% calc(100% - var(--cutSmall)),
    calc(100% - var(--cutSmall)) 100%,
    var(--cutSmall) 100%,
    0 calc(100% - var(--cutSmall)),
    0 var(--cutSmall)
  );
}

/* ====== GALLERY PAGE OVERRIDES ====== */
.pageGallery .wrap {
  width: min(var(--gridMax), calc(100% - 24px));
  margin: 0 auto;
}

.pageGallery .tile.is-portrait { grid-row: auto; }
.pageGallery .tile.is-landscape { grid-column: auto; }

body.pageGallery a.tileLink {
  background: #000 !important;
}

body.pageGallery img.thumb {
  object-fit: contain !important;
}

/* Badge marquee (hover-to-scroll) */
.badgeCats{
  overflow: hidden; /* required so inner can slide without spilling outside tile */
}

.badgeCatsInner{
  flex-wrap: nowrap;

  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  transform: translateX(0);
  will-change: transform;
}

.badgeCats.is-hover .badgeCatsInner,
.galleryCatsRow.is-hover .badgeCatsInner{
  flex-wrap: nowrap;

  animation: badgeMarquee var(--marqueeDur, 6s) ease-in-out infinite alternate;
}

@keyframes badgeMarquee{
  from { transform: translateX(0); }
  to   { transform: translateX(var(--marqueeShift, 0px)); }
}

/* ====== FOOTER LINK COLORS (THEME-AWARE) ======
   Description:
     Ensures footer links are white in dark theme and black in light theme.
   Created: 2026-01-12
*/
.siteFooter .footerLinks .footerLink,
.siteFooter .footerLinks .footerLink:visited{
  color: #fff;
}

.siteFooter .footerLinks .footerLink:hover,
.siteFooter .footerLinks .footerLink:focus{
  color: #fff;
  text-decoration: underline;
}

html[data-theme="light"] .siteFooter .footerLinks .footerLink,
html[data-theme="light"] .siteFooter .footerLinks .footerLink:visited{
  color: #000;
}

html[data-theme="light"] .siteFooter .footerLinks .footerLink:hover,
html[data-theme="light"] .siteFooter .footerLinks .footerLink:focus{
  color: #000;
  text-decoration: underline;
}


/* ====== SITE FOOTER LAYOUT (CENTERED, SINGLE ROW) ======
   Description:
     Centers footer content and keeps it on one row (copyright + links).
   Created: 2026-01-12
*/
.siteFooter{
  text-align: center;
}

.siteFooter .footerInner{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.siteFooter .footerLeft{
  display: inline-flex;
  align-items: center;
}

.siteFooter .footerLinks{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.siteFooter .footerCopy{
  white-space: nowrap;
}

/* Recommendations blocks */
.recBlock{ margin-top: 18px; }
.recBlock.is-hidden{ display:none; }
.recHead{ display:flex; align-items:center; justify-content:flex-start; gap:12px; margin:18px 0 8px; }
.recTitle{ font-size:15px; font-weight:700; letter-spacing:.2px; }
.recGrid{ padding-top:0; }
.recFoot{ display:flex; justify-content:flex-end; margin:10px 0 0; }
.recMore{ white-space:nowrap; }

.recEmpty{
  grid-column: 1 / -1;
  padding: 12px 0;
  font-size: 14px;
  color: var(--muted);
}

.recLoading{
  grid-column: 1 / -1;
  padding: 12px 0;
  font-size: 14px;
  color: var(--muted);
}
/* Force left aligned gallery category badges (created 2026-01-21) */
body.pageGallery .galleryCatsRow{
  width: 100%;
  justify-content: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}