/*
  page-catalog.css — Refactor (R2: clean structure + perf tiering)
  Focus:
  - Stable grid rendering (contain/content-visibility, fixed cover ratio)
  - Consistent gold/glass identity
  - Lower visual cost on low-tier devices (mobile + reduced motion)

  NOTE: This file assumes hero.css exists globally.
  It intentionally styles only what catalog.html uses.
*/

/* ─────────────────────────────────────────────────────────────────────────────
   0) Reset
   ───────────────────────────────────────────────────────────────────────────── */

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

/* Remove mobile tap highlight flash */
*{ -webkit-tap-highlight-color: transparent; }
a,button{ -webkit-tap-highlight-color: transparent; -webkit-touch-callout:none; }

:root{
  /* Brand + layout */
  --bg: #1a1a1a;
  --fg: #0b0c10;
  --text: #2c2b29;
  --text-muted: rgba(44,43,41,.78);

  --ff-ui: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial;
  --ff-serif: "Garamond", "Times New Roman", serif;

  --wrap-max: 1200px;
  --wrap-pad: 20px;

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;

  --gap-xs: 8px;
  --gap-sm: 14px;
  --gap-md: 22px;
  --gap-lg: 30px;

  /* Motion */
  --motion-fast: 140ms;
  --motion-normal: 240ms;
  --motion-slow: 360ms;
  --ease-soft: cubic-bezier(.16, .84, .44, 1);

  /* Gold glass system */
  --glass-bg: rgba(255, 214, 140, 0.22);
  --glass-bg-2: rgba(255, 214, 140, 0.14);
  --glass-border: rgba(255, 232, 190, 0.22);
  --glass-shadow: 0 10px 30px rgba(0,0,0,.18);
  --glass-inset: inset 0 1px 8px rgba(255,255,255,.18);

  /* Expensive effects (tiered) */
  --glass-blur: 10px;
  --glass-sat: 1.20;

  /* Scrollbar */
  --scrollbar-thumb: rgba(255,255,255,.38);
  --scrollbar-thumb-hover: rgba(255,255,255,.62);
  --scrollbar-track: rgba(58,58,58,.70);
  --scrollbar-width: 7px;

  /* safe-area for site-core.js (read via getComputedStyle) */
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}

html{ background: var(--bg); }

body{
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--fg);
  font: 16px/1.55 var(--ff-ui);
  background: transparent;
  opacity: 0;
  transition: opacity var(--motion-normal) var(--ease-soft);
}
body.is-active{ opacity: 1; }

/* Background (uses per-page vars from catalog.html body style) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events:none;
  background:
    var(--page-bg-desktop) center/cover no-repeat,
    radial-gradient(1200px 600px at 50% 0%, rgba(255,205,90,.14), transparent 60%);
  transform: translateZ(0);
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.wrap{
  position: relative;
  z-index: 1;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: var(--wrap-pad);
}

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

/* ─────────────────────────────────────────────────────────────────────────────
   1) Nav (catalog uses same HTML structure as other pages)
   ───────────────────────────────────────────────────────────────────────────── */

.nav{
  position: relative;
  z-index: 20;
  display:flex;
  justify-content:center;
  align-items:center;
  margin: 10px 0 6px;
}

.nav .menu{
  display:flex;
  align-items:center;
  gap: clamp(14px, 2.6vw, 28px);
  padding: clamp(6px, 1vw, 10px) clamp(12px, 2.4vw, 22px);
  border-radius: 999px;

  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)),
    var(--glass-bg);

  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);

  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

.nav .menu a{
  text-transform: uppercase;
  font-size: 1.1rem;
  letter-spacing: .12em;
  font-weight: 700;
  font-family: var(--ff-serif);
  text-decoration:none;
  color: #1a1917;
  opacity: .95;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);

  transition:
    color var(--motion-fast) var(--ease-soft),
    opacity var(--motion-fast) var(--ease-soft),
    transform var(--motion-fast) var(--ease-soft);
}

.nav .menu a:hover{
  color: #111;
  opacity: 1;
  transform: translateY(-1px);
}

.nav .menu a[aria-current="page"]{
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2) Controls (search + count)
   ───────────────────────────────────────────────────────────────────────────── */

.filters{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 10px;
  margin: 14px 0 10px;
}

.filters .search{
  flex: 1 1 420px;
  display:flex;
  justify-content:center;
}

.filters .search input[type="search"]{
  font-family: var(--ff-serif);
  flex: 1 1 320px;
  min-width: 260px;

  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 10px 18px;
  font-size: 1.1rem;
  color: #222;

  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)),
    var(--glass-bg);

  box-shadow: var(--glass-shadow);

  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));

  outline: none;
  transition:
    border-color var(--motion-fast) var(--ease-soft),
    box-shadow var(--motion-normal) var(--ease-soft),
    transform var(--motion-fast) var(--ease-soft);
}

.filters .search input[type="search"]::placeholder{ color:#1d1d1d; opacity:.88; }

.filters .search input[type="search"]:focus{
  border-color: rgba(255,255,255,.55);
  box-shadow: 0 8px 26px rgba(0,0,0,.16);
}

.toolbar{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 14px;
  margin: 6px 0 14px;
}

.toolbar .count{
  color: #3a392f;
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3) Grid + card (stable render)
   ───────────────────────────────────────────────────────────────────────────── */

.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
  justify-content:center;
  gap: var(--gap-md);
  align-items:start;
}

/* Avoid layout thrash when paging */
#grid{ transition: opacity .18s linear; }

.card{
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;

  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    var(--glass-bg-2);

  border: 1px solid var(--glass-border);
  box-shadow: 0 6px 18px rgba(0,0,0,.20);

  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));

  transition:
    transform var(--motion-normal) var(--ease-soft),
    box-shadow var(--motion-normal) var(--ease-soft),
    border-color var(--motion-fast) var(--ease-soft);

  will-change: transform;

  /* Performance: isolate and allow skipping offscreen paint */
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: 360px 560px;
}

.card:hover{
  transform: translateY(-7px);
  box-shadow: 0 14px 34px rgba(0,0,0,.26);
  border-color: rgba(255,255,255,.30);
}

.cover-link{ display:block; text-decoration:none; color:inherit; }

/* Cover area */
.card .cover-wrap,
.card .cover-link{
  display:block;
  aspect-ratio: 2 / 3;
  overflow:hidden;
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(255, 229, 180, .35), rgba(255, 214, 140, .10) 55%, rgba(0,0,0,.18) 100%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

.card .cover{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;

  border-bottom: 1px solid rgba(0,0,0,.10);

  transition: opacity 320ms ease, filter 420ms ease;
  opacity: 0;
  filter: blur(14px) saturate(.95) contrast(.95);

  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.card .cover.is-loaded{
  opacity: 1;
  filter: none;
}

.card .cover.is-fallback{
  opacity: 1;
  filter: none;
}

.card .meta{
  padding: 14px;
  text-align:center;
  color: var(--text);
}

.card .meta .title{
  margin: 6px 0 4px;
  font-family: var(--ff-serif);
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text);
}

.card .meta .subtitle{
  margin: 6px 0 0;
  font-family: var(--ff-serif);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  font-size: .95rem;
  color: rgba(44,43,41,.95);
  opacity: .95;
}

/* Subtitle marquee (JS toggles .is-marquee + inner spans) */
.subtitle{
  position: relative;
  display:block;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.subtitle .marquee-inner{
  display:inline-flex;
  gap: var(--marquee-gap, 10px);
  white-space: nowrap;
  animation-name: none;
}

.subtitle .marquee-segment{ display:inline-block; white-space: nowrap; }

.subtitle.is-marquee .marquee-inner{
  animation-name: marquee;
  animation-duration: var(--marquee-duration, 8s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

@keyframes marquee{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(calc(var(--marquee-distance) * -1)); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   4) Pagination
   ───────────────────────────────────────────────────────────────────────────── */

.loadbar{
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 22px 0;
  padding: 6px 8px;
}

.pagination{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap: 8px;
  user-select: none;
}

.pagination button,
.pagination .page-btn,
.pagination .page-prev,
.pagination .page-next{
  appearance: none;
  border: 1px solid var(--glass-border);
  border-radius: 10px;

  padding: 8px 12px;
  min-width: 44px;

  font: 600 .95rem/1 var(--ff-ui);
  color: #111;

  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)),
    var(--glass-bg);

  box-shadow: 0 6px 18px rgba(0,0,0,.12), var(--glass-inset);

  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));

  cursor:pointer;
  transition: transform var(--motion-fast) var(--ease-soft), box-shadow var(--motion-fast) var(--ease-soft);
}

.pagination button:hover{ transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.16), var(--glass-inset); }

.pagination .page-btn.current,
.pagination .page-btn[aria-current="page"]{
  background: linear-gradient(180deg, rgba(20,20,20,.92), rgba(20,20,20,.82));
  color: #fff;
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  transform: translateY(-1px);
  font-weight: 800;
}

.pagination .page-prev,
.pagination .page-next{ min-width: 76px; }

.pagination .page-ellipsis{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 8px;
  color: rgba(17,17,17,.55);
  font-size: 1.1rem;
}

.pagination button:disabled,
.pagination .page-btn[disabled]{
  opacity: .46;
  cursor: default;
  transform:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5) Accessibility focus
   ───────────────────────────────────────────────────────────────────────────── */

:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,209,60,0.25), 0 10px 30px rgba(0,0,0,0.12);
  border-radius: 10px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6) Scrollbar
   ───────────────────────────────────────────────────────────────────────────── */

html,body{
  scrollbar-width: auto;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar{ width: var(--scrollbar-width); height: var(--scrollbar-width); }

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track{ background: var(--scrollbar-track); }

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb{
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover{ background: var(--scrollbar-thumb-hover); }

/* ─────────────────────────────────────────────────────────────────────────────
   7) Performance tiering (low-tier devices)
   ───────────────────────────────────────────────────────────────────────────── */

/* Reduce motion = reduce all transitions/animations */
@media (prefers-reduced-motion: reduce){
  *{ animation: none!important; transition: none!important; scroll-behavior: auto!important; }
  .subtitle.is-marquee .marquee-inner{ animation: none!important; }
  .subtitle{ white-space: nowrap; text-overflow: ellipsis; }
}

/* Mobile / coarse pointer: reduce blur cost while keeping look */
@media (max-width: 900px), (hover: none){
  :root{
    --glass-blur: 0px;      /* blur OFF */
    --glass-sat: 1.00;      /* saturate OFF */
    --scrollbar-width: 6px;

    /* “fake blur” look: malo jači translucent sloj */
    --glass-bg: rgba(255, 214, 140, 0.30);
    --glass-bg-2: rgba(255, 214, 140, 0.20);
    --glass-border: rgba(255, 232, 190, 0.28);
  }

  /* Turn off expensive backdrop-filter entirely on touch devices */
  .nav .menu,
  .filters .search input[type="search"],
  .card,
  .pagination button,
  .pagination .page-btn,
  .pagination .page-prev,
  .pagination .page-next{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Cheap “glass” imitation: subtle highlight + inset */
  .nav .menu,
  .filters .search input[type="search"],
  .card,
  .pagination button,
  .pagination .page-btn,
  .pagination .page-prev,
  .pagination .page-next{
    background:
      radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,.16), rgba(255,255,255,0) 55%),
      linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
      var(--glass-bg);
    box-shadow: 0 10px 26px rgba(0,0,0,.14), var(--glass-inset);
  }

  /* Background switches to mobile var; keeps brand glow */
  body::before{
    background:
      var(--page-bg-mobile) center/cover no-repeat,
      radial-gradient(1200px 600px at 50% 0%, rgba(255,205,90,.14), transparent 60%);
  }

  /* Disable hover lift on touch devices (avoid accidental composite work) */
  .card:hover{ transform:none; box-shadow: 0 6px 18px rgba(0,0,0,.20); }
}

/* Very small phones: tighter grid */
@media (max-width: 520px){
  :root{ --wrap-pad: 14px; }

  .nav{ margin: 0 0 30px; }
  .nav .menu{ gap: 8px; padding: 7px 14px; }
  .nav .menu a{ font-size: .95rem; letter-spacing: .10em; }

  .filters{ gap: 8px; margin: 10px 0; }
  .filters .search{ flex: 1 1 100%; }
  .filters .search input[type="search"]{ min-width: 0; width: 100%; padding: 10px 14px; font-size: 1.0rem; }

  .toolbar{ margin: 4px 0 10px; }

  .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .card{ border-radius: 16px; contain-intrinsic-size: 180px 330px; }

  .card .meta{ padding: 10px 12px; }
  .card .meta .title{ font-size: .82rem; }
  .card .meta .subtitle{ font-size: .82rem; }

  .pagination{ gap: 6px; }
  .pagination .page-btn{ padding: 6px 8px; min-width: 36px; font-size: .88rem; }
  .pagination .page-prev,
  .pagination .page-next{ min-width: 56px; padding: 6px 8px; }
}

/* Tablets: 2-column grid and larger type */
@media (min-width: 768px) and (max-width: 1024px){
  .wrap{ padding: 18px; }
  .nav{ margin: 20px 0 40px; }
  .nav .menu a{ font-size: 1.25rem; letter-spacing: .10em; }

  .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .filters .search input[type="search"]{ padding: 12px 17px; font-size: 1.35rem; }
  .card .meta .title{ font-size: 1.45rem; }
  .card .meta .subtitle{ font-size: 1.18rem; }
}