/* ============================================================
   Catalogs page (page-catalogs.php)
   Design system: bg #0a0a0a / gold #F1B300 / white / Roboto
   Title font (Barlow Condensed) + description font (Poppins)
   are applied globally via Additional CSS — do not redeclare.
   No background textures (flat #0a0a0a only).
   ============================================================ */

.cat-page { background:#0a0a0a; color:#fff; overflow-x:hidden; }
.cat-inner { width:min(1350px,100%); margin:0 auto; padding:0 32px; }

/* ---------- Hero: plain centred title, no banner image ---------- */
.cat-hero { padding:150px 0 46px; background:#0a0a0a; text-align:center; }
.cat-hero__title {
    font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
    color:#fff; font-size:clamp(32px,4.6vw,56px); font-weight:800;
    line-height:1.05; letter-spacing:3px; text-transform:uppercase;
    margin:0 auto; max-width:1100px;
}

/* ---------- Filter tabs ---------- */
.cat-body { padding:64px 0 90px; }
.cat-filter { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 0 46px; }
.cat-tab {
    appearance:none; cursor:pointer; background:transparent;
    border:1px solid rgba(255,255,255,.16); color:#cfcfcf;
    font-family:inherit; font-size:12px; font-weight:700; letter-spacing:1.6px;
    text-transform:uppercase; padding:11px 20px; border-radius:3px; line-height:1;
    transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.cat-tab:hover { border-color:rgba(241,179,0,.6); color:#fff; }
.cat-tab.is-active { background:#F1B300; border-color:#F1B300; color:#0a0a0a; }
.cat-tab__n { margin-left:7px; font-size:10px; opacity:.6; }
.cat-tab.is-active .cat-tab__n { opacity:.8; }

/* ---------- Grid ---------- */
.cat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px 26px; }

/* ---------- Card ---------- */
.cat-card {
    display:flex; flex-direction:column; background:#101010;
    border:1px solid rgba(255,255,255,.10); border-radius:6px; overflow:hidden;
    animation:cat-card-in .55s ease both; animation-delay:var(--d,0ms);
    transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
@keyframes cat-card-in {
    from { opacity:0; transform:translateY(18px); }
    to   { opacity:1; transform:translateY(0); }
}
.cat-card:hover {
    border-color:rgba(241,179,0,.55); transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.cat-card.is-hidden { display:none; }

.cat-card__media { position:relative; aspect-ratio:3/4; background:#0d0d0d; overflow:hidden; }
.cat-card__media img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .5s ease;
}
.cat-card:hover .cat-card__media img { transform:scale(1.04); }
.cat-card__ph {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:rgba(241,179,0,.32);
}
.cat-card__ph svg { width:56px; height:56px; }

.cat-card__badge {
    position:absolute; top:12px; left:12px; z-index:3;
    background:rgba(10,10,10,.82); border:1px solid rgba(241,179,0,.6); color:#F1B300;
    font-size:11px; font-weight:800; letter-spacing:1.4px; padding:5px 10px; border-radius:3px;
}

.cat-card__peek {
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    display:flex; align-items:center; justify-content:center; gap:9px;
    border:0; cursor:pointer; width:100%; padding:14px 12px;
    background:linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.86) 46%, rgba(10,10,10,.96) 100%);
    color:#F1B300; font-family:inherit; font-size:12px; font-weight:800;
    letter-spacing:1.6px; text-transform:uppercase;
    opacity:0; transform:translateY(10px);
    transition:opacity .3s ease, transform .3s ease;
}
.cat-card:hover .cat-card__peek,
.cat-card:focus-within .cat-card__peek { opacity:1; transform:translateY(0); }

.cat-card__peek-ic { display:inline-flex; }
.cat-card__peek-ic svg { width:17px; height:17px; display:block; }

.cat-card__body { display:flex; flex-direction:column; flex:1 1 auto; padding:22px 22px 24px; }
.cat-card__title {
    color:#fff; font-size:17px; font-weight:800; letter-spacing:1.2px;
    text-transform:uppercase; line-height:1.3; margin:0 0 10px;
}
.cat-card__desc { color:#9c9c9c; font-size:13px; line-height:1.75; margin:0 0 14px; }
.cat-card__meta {
    color:#7d7d7d; font-size:11px; letter-spacing:1px; text-transform:uppercase;
    margin:0 0 18px;
}
.cat-card__actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:auto; }

/* ---------- Buttons ---------- */
.cat-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 18px; border-radius:3px; border:1px solid transparent;
    font-family:inherit; font-size:11.5px; font-weight:800; letter-spacing:1.4px;
    text-transform:uppercase; text-decoration:none; line-height:1; cursor:pointer;
    transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.cat-btn--primary { background:#F1B300; border-color:#F1B300; color:#0a0a0a; }
.cat-btn--primary:hover { background:#ffc21f; border-color:#ffc21f; transform:translateY(-2px); }
.cat-btn--ghost { background:transparent; border-color:rgba(255,255,255,.22); color:#e8e8e8; }
.cat-btn--ghost:hover { border-color:#F1B300; color:#F1B300; }
.cat-btn--disabled {
    background:transparent; border-color:rgba(255,255,255,.10); color:#5a5a5a;
    cursor:not-allowed;
}

/* ---------- Empty ---------- */
.cat-empty { text-align:center; color:#8a8a8a; font-size:14px; padding:70px 0; margin:0; }

/* ---------- native reader: the browser's own PDF viewer inside an iframe ---------- */
.cat-native {
    border:1px solid rgba(255,255,255,.10); border-radius:6px; overflow:hidden; background:#141414;
}
.cat-native iframe { display:block; width:100%; height:min(90vh,1050px); border:0; background:#fff; }

/* ---------- inline PDF reader (PDF.js, page opens straight into it) ---------- */
.cat-body--reader { padding:56px 0 92px; }
.cat-switch { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 0 26px; }
.cat-reader {
    display:flex; flex-direction:column;
    background:#101010; border:1px solid rgba(255,255,255,.10);
    border-radius:6px; overflow:hidden;
}
.cat-reader__bar {
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    order:2;                                     /* toolbar sits UNDER the pages, like the reference */
    padding:12px 18px; background:#0f0f0f; border-top:1px solid rgba(255,255,255,.12);
}
.cat-reader__title {
    color:#fff; font-size:13px; font-weight:800; letter-spacing:1.4px;
    text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cat-reader__tools { display:flex; align-items:center; gap:8px; flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end; }
.cat-reader__btn {
    display:inline-flex; align-items:center; gap:8px; cursor:pointer;
    background:transparent; border:1px solid rgba(255,255,255,.2); color:#e8e8e8;
    font-family:inherit; font-size:11.5px; font-weight:800; letter-spacing:1.4px;
    text-transform:uppercase; padding:10px 15px; border-radius:3px; line-height:1;
    text-decoration:none; transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.cat-reader__btn:hover { border-color:#F1B300; color:#F1B300; }
.cat-reader__stage {
    position:relative; order:1;
    height:min(80vh,900px); background:#141414;
    display:flex; align-items:center; justify-content:center;
    overflow:auto; padding:22px 76px; outline:none;
    scrollbar-width:none; -ms-overflow-style:none;   /* no visible scrollbar / no drag handle */
}
.cat-reader__stage::-webkit-scrollbar { width:0; height:0; }
.cat-reader__stage:fullscreen { height:100vh; }
.cat-reader__stage::backdrop { background:#0a0a0a; }

/* ---------- sliding page swap: one page at a time, no 3D ---------- */
.cat-slider {
    position:relative; margin:auto; overflow:hidden;
    background:#fff; border-radius:3px;
    box-shadow:0 16px 38px rgba(0,0,0,.55);
}
.cat-slide {
    position:absolute; top:0; left:0; width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    will-change:transform;
}
.cat-slide canvas { display:block; }

/* ---------- side flip arrows (page turn) ---------- */
.cat-nav {
    position:absolute; top:50%; transform:translateY(-50%); z-index:3;
    width:54px; height:104px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    background:transparent; border:0; border-radius:8px;
    color:rgba(255,255,255,.40);
    transition:background .25s ease, color .25s ease, transform .25s ease;
}
.cat-nav svg { width:32px; height:32px; }
.cat-nav:hover:not(:disabled) { background:rgba(241,179,0,.14); color:#F1B300; }
.cat-nav:active:not(:disabled) { transform:translateY(-50%) scale(.94); }
.cat-nav:disabled { opacity:.16; cursor:default; }
.cat-nav--prev { left:10px; }
.cat-nav--next { right:10px; }

/* ---------- toolbar groups ---------- */
.cat-vgroup {
    display:inline-flex; align-items:center; gap:2px;
    border:1px solid rgba(255,255,255,.16); border-radius:3px; overflow:hidden;
}
.cat-vbtn {
    appearance:none; background:transparent; border:0; cursor:pointer;
    color:#e8e8e8; font-family:inherit; font-size:15px; font-weight:700; line-height:1;
    min-width:34px; height:34px; padding:0 8px;
    display:inline-flex; align-items:center; justify-content:center;
    transition:background .22s ease, color .22s ease;
}
.cat-vbtn:hover { background:rgba(241,179,0,.16); color:#F1B300; }
.cat-vbtn:disabled { opacity:.3; cursor:default; background:transparent; color:#e8e8e8; }
.cat-vbtn.is-on { background:#F1B300; color:#0a0a0a; }
.cat-vbtn--solo { border:1px solid rgba(255,255,255,.16); border-radius:3px; }
.cat-vnum {
    color:#dcdcdc; font-size:11.5px; font-weight:700; letter-spacing:.6px;
    padding:0 9px; min-width:58px; text-align:center; white-space:nowrap;
}

/* ---------- loading ---------- */
.cat-vloading {
    position:absolute; inset:0; z-index:4;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
    background:rgba(12,12,12,.9);
}
.cat-vloading[hidden] { display:none; }
.cat-vloading__tx { color:#9c9c9c; font-size:12px; letter-spacing:1.4px; text-transform:uppercase; }
.cat-vspinner {
    width:34px; height:34px; border-radius:50%;
    border:2px solid rgba(255,255,255,.16); border-top-color:#F1B300;
    animation:cat-spin .8s linear infinite;
}
@keyframes cat-spin { to { transform:rotate(360deg); } }
body.cat-lock { overflow:hidden; }

/* ---------- Responsive ---------- */
@media (max-width:1099px) {
    .cat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 20px; }
    .cat-hero { padding:132px 0 66px; }
}

@media (max-width:900px) {
    .cat-reader__stage { height:min(70vh,760px); padding:12px 48px; }
    .cat-nav { width:42px; height:80px; }
    .cat-nav svg { width:26px; height:26px; }
    .cat-nav--prev { left:2px; }
    .cat-nav--next { right:2px; }
}

@media (max-width:680px) {
    .cat-inner { padding:0 18px; }
    .cat-hero { padding:108px 0 30px; }
    .cat-hero__title { letter-spacing:2px; }
    .cat-body { padding:44px 0 64px; }
    .cat-filter { gap:8px; margin:0 0 30px; justify-content:flex-start; }
    .cat-tab { padding:10px 14px; font-size:11px; letter-spacing:1.2px; }
    .cat-grid { grid-template-columns:1fr; gap:26px; }
    .cat-card__actions .cat-btn { flex:1 1 auto; }
    .cat-card__peek { opacity:1; transform:none; }
    .cat-body--reader { padding:40px 0 60px; }
    .cat-native iframe { height:74vh; min-height:420px; }
    .cat-switch { justify-content:flex-start; gap:8px; margin-bottom:20px; }
    .cat-reader__title { display:none; }
    .cat-reader__bar { padding:10px 12px; flex-wrap:wrap; gap:8px; }
    .cat-reader__tools { gap:6px; justify-content:center; width:100%; }
    .cat-reader__btn { padding:9px 12px; font-size:11px; letter-spacing:1.1px; }
    .cat-vbtn { min-width:30px; height:30px; font-size:14px; padding:0 6px; }
    .cat-vnum { min-width:46px; font-size:10.5px; padding:0 6px; }
    .cat-reader__stage { height:auto; min-height:280px; padding:12px 40px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .cat-card { animation:none; }
    .cat-card__media img,
    .cat-card__peek,
    .cat-btn { transition:none; }
}