/* ══════════════════════════════════════════════════
   UNMCG — dijagonala.css
   Modul za časopis Dijagonala: grid + PDF.js viewer
   ══════════════════════════════════════════════════ */

/* ── Arhiva (archive-dijagonala.php) — jednostavan naslov ─────────── */
.dij-archive-main{padding:2rem 0 3rem;}
.dij-archive-head{margin:0 0 1.75rem;}
.dij-archive-title{color:#0a2342;font-weight:800;font-size:2rem;margin:0 0 .4rem;}
.dij-archive-sub{color:#4b5563;font-size:1.02rem;margin:0;}
/* Sakrij eventualni duplirani naslov iz shortcode-a unutar arhive */
.dij-archive-body .us-section-title{display:none;}

/* ── Section header ───────────────────────────────── */
.us-dij-section { }
.us-dij-filter {
  display: flex; flex-wrap: wrap; gap: .6rem;
  align-items: center; margin-bottom: 1.25rem;
}
.us-dij-search-wrap { flex: 1; min-width: 200px; }
.us-dij-filter .us-select { min-width: 120px; }

/* ── Grid ─────────────────────────────────────────── */
.us-dij-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

/* ── Card ─────────────────────────────────────────── */
.us-dij-card {
  background: var(--us-white, #fff);
  border: 1px solid var(--us-border, #dde3ef);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
  display: flex;
  flex-direction: column;
}
.us-dij-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.11);
  transform: translateY(-2px);
}

/* ── Cover ────────────────────────────────────────── */
.us-dij-cover-link {
  display: block;
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  text-decoration: none;
  background: #0a2342;
}
.us-dij-cover-link img,
.us-dij-cover-link canvas,
.us-dij-cover-link .dij-cover-img {
  width: 100%; height: 100%; object-fit: cover; display:block;
  transition: transform .3s;
}
.us-dij-card:hover .us-dij-cover-link img,
.us-dij-card:hover .us-dij-cover-link .dij-cover-img { transform: scale(1.04); }
/* PDF.js fallback naslovnica u arhivi (dok/ako nema slike) */
.us-dij-cover-link .dij-cover-canvas{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;background:#0a2342;}
.us-dij-cover-link .dij-hero-placeholder{width:100%;height:100%;aspect-ratio:auto;border-radius:0;
  background:linear-gradient(135deg,#0a2342,#1a3d6b);color:#c9a84c;}

.us-dij-cover-placeholder {
  width: 100%; height: 100%; min-height: 220px;
  background: linear-gradient(135deg, #0a2342, #1a3d6b);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .5rem; color: #fff;
}
.us-dij-delta { font-size: 3.5rem; opacity: .5; font-family: serif; }
.us-dij-br-num { font-size: 1rem; font-weight: 700; letter-spacing: .08em; }

.us-dij-cover-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 100%);
  padding: .75rem .7rem .6rem;
  display: flex; align-items: flex-end; justify-content: space-between;
}
.us-dij-num-badge  { color: #c9a84c; font-size: .78rem; font-weight: 700; }
.us-dij-year-badge { color: rgba(255,255,255,.75); font-size: .75rem; }

.us-dij-lock-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
}

/* ── Card body ────────────────────────────────────── */
.us-dij-card-body {
  padding: .85rem;
  display: flex; flex-direction: column; gap: .45rem; flex: 1;
}
.us-dij-card-title { font-size: .9rem; font-weight: 600; color: var(--us-navy, #0a2342); margin: 0; }
.us-dij-card-title a { color: inherit; text-decoration: none; }
.us-dij-card-title a:hover { text-decoration: underline; }
.us-dij-card-autori { font-size: .78rem; color: var(--us-muted, #6b7a99); margin: 0; }
.us-dij-card-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.us-dij-card-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: auto; padding-top: .5rem; }

/* ═══════════════════════════════════════════════════
   VIEWER / FLIPBOOK
   ═══════════════════════════════════════════════════ */
.us-dij-viewer-wrap { }

.us-dij-viewer-header {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--us-border, #dde3ef);
}
.us-dij-viewer-meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .6rem; }
.us-dij-vautori { font-size: .84rem; color: var(--us-muted, #6b7a99); }
.us-dij-viewer-header h2 { margin: .25rem 0; color: var(--us-navy, #0a2342); font-size: 1.3rem; }
.us-dij-viewer-desc { font-size: .9rem; color: var(--us-muted, #6b7a99); margin-top: .4rem; }
.us-dij-viewer-desc p { margin: 0; }

.us-dij-keywords { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.us-dij-kw {
  background: var(--us-bg, #f4f6fa);
  border: 1px solid var(--us-border, #dde3ef);
  border-radius: 20px; padding: .15rem .55rem;
  font-size: .75rem; color: var(--us-muted, #6b7a99);
}

/* ── Flipbook container ───────────────────────────── */
.us-dij-flipbook {
  background: #1a1a2e;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 32px rgba(0,0,0,.25);
}

/* ── Toolbar ──────────────────────────────────────── */
.us-dij-viewer-toolbar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .6rem; padding: .75rem 1rem;
  background: #0a2342; border-bottom: 1px solid rgba(255,255,255,.1);
}
.us-dij-nav, .us-dij-zoom {
  display: flex; align-items: center; gap: .4rem;
}
.us-dij-nav { margin-right: auto; }
.us-dij-btn {
  background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,255,255,.2); border-radius: 6px;
  padding: .3rem .65rem; font-size: .85rem; cursor: pointer;
  transition: background .15s; line-height: 1;
}
.us-dij-btn:hover { background: rgba(255,255,255,.22); }
.us-dij-btn:disabled { opacity: .4; cursor: default; }
.us-dij-page-info { color: rgba(255,255,255,.8); font-size: .82rem; white-space: nowrap; }
#usDijZoomLevel { color: rgba(255,255,255,.7); font-size: .8rem; min-width: 40px; text-align: center; }

.us-dij-dl-btn { flex-shrink: 0; background: var(--us-gold, #c9a84c) !important; color: #0a2342 !important; font-weight: 700 !important; }
.us-dij-dl-btn:hover { background: #b8943d !important; color: #0a2342 !important; }
.us-dij-dl-locked { color: rgba(255,255,255,.6); font-size: .8rem; }
.us-dij-dl-locked a { color: var(--us-gold, #c9a84c); }

/* ── Canvas area ──────────────────────────────────── */
.us-dij-canvas-wrap {
  background: #2d2d2d;
  min-height: 500px;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  overflow: auto;
  position: relative;
}
.us-dij-canvas {
  display: block;
  box-shadow: 0 4px 24px rgba(0,0,0,.5);
  max-width: 100%;
  user-select: none;
  -webkit-user-select: none;
}
.us-dij-loading {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: rgba(255,255,255,.7); gap: 1rem;
}
.us-dij-loading p { margin: 0; font-size: .9rem; }
.us-dij-spinner {
  width: 40px; height: 40px;
  border: 3px solid rgba(255,255,255,.15);
  border-top-color: var(--us-gold, #c9a84c);
  border-radius: 50%;
  animation: dij-spin .8s linear infinite;
}
@keyframes dij-spin { to { transform: rotate(360deg); } }

/* ── Page input bar ───────────────────────────────── */
.us-dij-page-input-wrap {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem 1rem;
  background: #0d1b33; border-top: 1px solid rgba(255,255,255,.08);
  font-size: .82rem; color: rgba(255,255,255,.6);
}
.us-dij-goto-input {
  width: 54px; padding: .25rem .4rem;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  border-radius: 5px; color: #fff; font-size: .82rem; text-align: center;
}
.us-dij-goto-input:focus { outline: none; border-color: var(--us-gold, #c9a84c); }

/* ── Gate (restricted content) ───────────────────── */
.us-dij-gate {
  background: var(--us-bg, #f4f6fa);
  border: 2px dashed var(--us-border, #dde3ef);
  border-radius: 14px; padding: 3rem 1.5rem;
  text-align: center;
}
.us-dij-gate-inner { max-width: 420px; margin: 0 auto; }
.us-dij-gate-icon  { font-size: 3rem; margin-bottom: 1rem; }
.us-dij-gate h3 { font-size: 1.15rem; color: var(--us-navy, #0a2342); margin: 0 0 .6rem; }
.us-dij-gate p  { color: var(--us-muted, #6b7a99); margin: 0 0 1.25rem; }
.us-dij-gate .us-btn { display: inline-flex; margin: .3rem; }

/* ── Public page (template-dijagonala) ────────────── */
.us-dij-public-wrap { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem; font-family: system-ui, sans-serif; }
.us-dij-public-wrap .us-section-title { margin-bottom: 1.5rem; }
.us-dij-public-wrap .us-section-title h2 { font-size: 1.75rem; color: #0a2342; margin: 0 0 .35rem; }
.us-dij-public-wrap .us-section-title p  { color: #6b7a99; margin: 0; }

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 768px) {
  .us-dij-grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: .85rem; }
  .us-dij-viewer-toolbar { gap: .4rem; padding: .6rem .75rem; }
  .us-dij-btn { padding: .28rem .5rem; font-size: .78rem; }
  .us-dij-canvas-wrap { padding: .75rem; min-height: 340px; }
  .us-dij-filter { flex-direction: column; }
  .us-dij-search-wrap, .us-dij-filter .us-select { width: 100%; }
}
@media (max-width: 480px) {
  .us-dij-grid { grid-template-columns: repeat(2, 1fr); }
  .us-dij-viewer-toolbar { flex-direction: column; align-items: flex-start; }
  .us-dij-nav { order: 1; }
  .us-dij-zoom { order: 2; }
  .us-dij-dl-btn, .us-dij-dl-locked { order: 3; }
}

/* ══════════════════════════════════════════════════
   Istaknuti (posljednji) broj + arhiva naslov + kratak opis
   ══════════════════════════════════════════════════ */
.us-dij-featured{
  display:grid;grid-template-columns:260px 1fr;gap:1.75rem;align-items:stretch;
  background:linear-gradient(135deg,#0a2342 0%,#13315c 100%);
  border-radius:18px;padding:1.5rem;margin-bottom:2rem;color:#fff;
  box-shadow:0 16px 40px rgba(10,35,66,.18);border:1px solid rgba(201,168,76,.25);
}
.us-dij-featured-cover{display:block;border-radius:12px;overflow:hidden;background:#0e2a52;line-height:0;}
.us-dij-featured-cover img,
.us-dij-featured-cover canvas,
.us-dij-featured-cover .dij-cover-img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:1/1.414;}
/* PDF.js fallback naslovnica na istaknutom broju (shimmer dok se ne izrenderuje) */
.us-dij-featured-cover .dij-cover-canvas{position:relative;width:100%;aspect-ratio:1/1.414;background:#eef1f6;overflow:hidden;}
.us-dij-featured-cover .dij-cover-canvas .dij-cover-img{position:absolute;inset:0;height:100%;}
.us-dij-featured-cover .dij-hero-placeholder{aspect-ratio:1/1.414;border-radius:0;background:#0e2a52;color:#c9a84c;}
.us-dij-featured-cover .us-dij-cover-placeholder{aspect-ratio:3/4;display:flex;flex-direction:column;
  align-items:center;justify-content:center;color:#c9a84c;}
.us-dij-featured-cover .us-dij-delta{font-size:3rem;font-weight:800;line-height:1;}
.us-dij-featured-cover .us-dij-br-num{margin-top:.4rem;color:#cfe0ff;font-size:.9rem;}
.us-dij-featured-body{display:flex;flex-direction:column;justify-content:center;}
.us-dij-featured-label{display:inline-block;align-self:flex-start;background:#c9a84c;color:#0a2342;
  font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:.25rem .7rem;border-radius:20px;margin-bottom:.75rem;}
.us-dij-featured-title{margin:0 0 .5rem;font-size:1.5rem;line-height:1.2;}
.us-dij-featured-title a{color:#fff;text-decoration:none;}
.us-dij-featured-title a:hover{color:#c9a84c;}
.us-dij-featured-meta{display:flex;flex-wrap:wrap;gap:.4rem .9rem;color:#aebfda;font-size:.85rem;margin-bottom:.75rem;}
.us-dij-featured-desc{color:rgba(255,255,255,.82);line-height:1.6;margin:0 0 1.15rem;max-width:60ch;}

.us-dij-archive-title{font-size:1.15rem;color:#0a2342;margin:0 0 1rem;
  padding-bottom:.4rem;border-bottom:2px solid #c9a84c;}

.us-dij-card-meta{display:flex;flex-wrap:wrap;gap:.35rem .75rem;color:#6b7a99;font-size:.8rem;margin-bottom:.4rem;}
.us-dij-card-desc{color:#4b5563;font-size:.85rem;line-height:1.5;margin:.25rem 0 .6rem;}
.us-dij-dl-note{font-size:.8rem;color:#6b7a99;font-style:italic;align-self:center;}

@media (max-width:640px){
  .us-dij-featured{grid-template-columns:1fr;gap:1rem;text-align:center;}
  .us-dij-featured-cover{max-width:220px;margin:0 auto;}
  .us-dij-featured-label{align-self:center;}
  .us-dij-featured-meta{justify-content:center;}
  .us-dij-card-actions{justify-content:center;}
}

/* ── Grupisanje arhive po godinama ─────────────────── */
.us-dij-count{color:#6b7a99;font-size:.88rem;margin:0 0 1rem;}
.us-dij-year-group{margin-bottom:2rem;}
.us-dij-year-heading{display:flex;align-items:baseline;gap:.5rem;font-size:1.1rem;color:#0a2342;
  margin:0 0 1rem;padding-bottom:.4rem;border-bottom:1px solid #dde3ef;}
.us-dij-year-heading::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#c9a84c;transform:translateY(-2px);}
.us-dij-year-count{color:#6b7a99;font-size:.82rem;font-weight:400;}

/* ══════════════════════════════════════════════════
   SINGLE broj — profesionalni prikaz (hero + navigacija)
   ══════════════════════════════════════════════════ */
.dij-single-main{padding:2rem 0 3rem;}
.dij-hero{display:grid;grid-template-columns:320px 1fr;gap:2.5rem;align-items:center;
  background:linear-gradient(135deg,#0a2342 0%,#13315c 100%);border-radius:20px;padding:2.25rem;
  color:#fff;box-shadow:0 18px 48px rgba(10,35,66,.2);border:1px solid rgba(201,168,76,.22);margin-bottom:2rem;}
.dij-hero-cover{position:relative;line-height:0;border-radius:14px;overflow:hidden;
  box-shadow:0 16px 38px rgba(0,0,0,.4);border:2px solid rgba(201,168,76,.55);background:#fff;}
.dij-hero-cover img,.dij-hero-cover canvas{width:100%;height:auto;display:block;aspect-ratio:1/1.414;object-fit:cover;}
/* Naslovnica (img ili PDF.js canvas) — izgled pravog časopisa (A4) */
.dij-cover-img{width:100%;height:auto;display:block;aspect-ratio:1/1.414;object-fit:cover;}
.dij-cover-canvas{position:relative;width:100%;aspect-ratio:1/1.414;background:#eef1f6;overflow:hidden;}
.dij-cover-canvas .dij-cover-img{position:absolute;inset:0;height:100%;}
.dij-cover-shimmer{position:absolute;inset:0;
  background:linear-gradient(100deg,#eef1f6 30%,#e2e6ee 50%,#eef1f6 70%);
  background-size:200% 100%;animation:drmShimmer 1.2s linear infinite;}
.dij-hero-placeholder{aspect-ratio:1/1.414;background:#0e2a52;display:flex;flex-direction:column;
  align-items:center;justify-content:center;color:#c9a84c;border-radius:12px;}
.dij-hero-placeholder span{font-size:4rem;font-weight:800;line-height:1;}
.dij-hero-placeholder small{margin-top:.5rem;color:#cfe0ff;font-size:.95rem;}
.dij-hero-badges{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.85rem;}
.dij-badge{background:rgba(255,255,255,.12);color:#e9f0fb;font-size:.78rem;font-weight:700;
  padding:.28rem .78rem;border-radius:20px;}
.dij-badge-gold{background:#c9a84c;color:#0a2342;}
.dij-hero-title{color:#fff;font-size:2rem;line-height:1.15;margin:0 0 .75rem;}
/* Uredne stavke (Broj / Školska godina / Datum / Status) */
.dij-hero-meta{list-style:none;margin:0 0 1.15rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem .75rem;}
.dij-hero-meta li{display:flex;flex-direction:column;gap:.15rem;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:10px;padding:.4rem .7rem;min-width:110px;}
.dij-meta-k{font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:#8fa4c8;}
.dij-meta-v{font-size:.92rem;font-weight:700;color:#eef3fb;}
.dij-hero-desc{color:rgba(255,255,255,.85);line-height:1.65;margin:0 0 1.5rem;max-width:60ch;}
.dij-hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;}
.dij-hero-actions .btn--outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5);}
.dij-hero-actions .btn--outline:hover{background:rgba(255,255,255,.12);color:#fff;}
.dij-dl-note{color:#cfe0ff;font-size:.9rem;font-style:italic;}

.dij-flip-wrap{margin-bottom:2rem;scroll-margin-top:90px;}

.dij-nav{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:space-between;align-items:center;}
.dij-nav-link{display:inline-flex;align-items:center;justify-content:center;padding:.7rem 1.2rem;
  border-radius:12px;font-weight:600;text-decoration:none;border:1px solid #dde3ef;color:#0a2342;
  background:#fff;transition:border-color .15s,color .15s,background .15s;}
.dij-nav-link:hover{border-color:#c9a84c;color:#9a7a35;}
.dij-nav-archive{background:#0a2342;color:#fff;border-color:#0a2342;}
.dij-nav-archive:hover{background:#13315c;color:#fff;}
.dij-nav-disabled{opacity:.4;pointer-events:none;}

@media (max-width:860px){
  .dij-hero{grid-template-columns:1fr;gap:1.5rem;text-align:center;padding:1.5rem;}
  .dij-hero-cover{max-width:260px;margin:0 auto;}
  .dij-hero-badges,.dij-hero-meta,.dij-hero-actions{justify-content:center;}
  .dij-hero-title{font-size:1.6rem;}
}
@media (max-width:560px){
  .dij-nav{flex-direction:column;}
  .dij-nav-link{width:100%;}
}

/* ══════════════════════════════════════════════════
   FLIPBOOK READER (fullscreen modal, StPageFlip)
   ══════════════════════════════════════════════════ */
/* Zaključavanje stranice: position:fixed čuva poziciju skrola i pokriva header/footer */
body.dij-reader-open{position:fixed;left:0;right:0;width:100%;overflow:hidden;}
.dij-reader-modal{position:fixed;inset:0;z-index:2147483000;display:none;flex-direction:column;
  background:radial-gradient(circle at 50% 30%,#12294d 0%,#060f1e 75%);color:#fff;}
.dij-reader-modal[aria-hidden="false"]{display:flex;}

/* Klik na naslovnicu otvara isti reader */
.dij-hero-cover.dij-open-reader{cursor:pointer;position:relative;}
.dij-hero-cover.dij-open-reader:focus-visible{outline:3px solid #c9a84c;outline-offset:3px;}
.dij-cover-cta{position:absolute;left:50%;bottom:14px;transform:translateX(-50%) translateY(8px);
  background:#0a2342;color:#fff;padding:.55rem 1.1rem;border-radius:999px;font-weight:700;
  font-size:.9rem;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.35);
  opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;}
.dij-hero-cover.dij-open-reader:hover .dij-cover-cta,
.dij-hero-cover.dij-open-reader:focus-visible .dij-cover-cta{opacity:1;transform:translateX(-50%) translateY(0);}

/* Toolbar — SVE u jednom uskom redu, bez lomljenja */
.drm-topbar{display:flex;align-items:center;gap:.6rem;flex-wrap:nowrap;
  height:54px;min-height:54px;padding:0 .75rem;
  background:rgba(0,0,0,.45);border-bottom:1px solid rgba(255,255,255,.08);}
.drm-title{flex:1 1 auto;min-width:0;font-weight:700;font-size:.9rem;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.drm-tools{display:flex;align-items:center;gap:.3rem;flex:0 0 auto;flex-wrap:nowrap;}
.drm-page{font-size:.82rem;color:#cfe0ff;padding:0 .35rem;white-space:nowrap;flex:0 0 auto;}
.drm-zoom{font-size:.78rem;color:#cfe0ff;min-width:38px;text-align:center;flex:0 0 auto;}
.drm-sep{width:1px;height:20px;background:rgba(255,255,255,.15);margin:0 .15rem;flex:0 0 auto;}
.drm-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  flex:0 0 auto;border-radius:8px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);
  color:#fff;font-size:.95rem;line-height:1;cursor:pointer;text-decoration:none;
  transition:background .15s,border-color .15s;}
.drm-btn:hover{background:#c9a84c;border-color:#c9a84c;color:#0a2342;}
.drm-close:hover{background:#e11d48;border-color:#e11d48;color:#fff;}
.drm-dl{font-weight:700;}

.drm-stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;
  padding:1rem;overflow:hidden;}
.drm-book{transform-origin:center center;transition:transform .2s;}
.drm-book canvas,.drm-book img{box-shadow:0 14px 40px rgba(0,0,0,.5);}

/* Stranice flipbook-a (HTML mod StPageFlip-a) — poseban naziv da ne kolidira sa .drm-page (broj strane) */
.drm-sheet{width:100%;height:100%;background:#fff;overflow:hidden;}
.drm-sheet canvas{width:100%;height:100%;display:block;}
.drm-page-ph{width:100%;height:100%;
  background:linear-gradient(100deg,#f2f2f2 30%,#e9e9e9 50%,#f2f2f2 70%);
  background-size:200% 100%;animation:drmShimmer 1.2s linear infinite;}
@keyframes drmShimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

.drm-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1rem;color:#cfe0ff;}
.drm-spinner{width:46px;height:46px;border:4px solid rgba(255,255,255,.2);border-top-color:#c9a84c;
  border-radius:50%;animation:drmSpin .8s linear infinite;}
@keyframes drmSpin{to{transform:rotate(360deg);}}

.drm-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:52px;height:52px;
  border-radius:50%;border:none;background:rgba(0,0,0,.4);color:#fff;font-size:2rem;line-height:1;
  cursor:pointer;transition:background .15s,transform .15s;}
.drm-arrow:hover{background:#c9a84c;color:#0a2342;}
.drm-arrow-prev{left:14px;}
.drm-arrow-next{right:14px;}

@media (max-width:768px){
  .drm-topbar{height:52px;min-height:52px;gap:.35rem;padding:0 .5rem;}
  /* Ako nema mjesta — prvo sakrij naslov, kontrole ostaju u jednom redu */
  .drm-title{display:none;}
  .drm-arrow{width:44px;height:44px;font-size:1.6rem;bottom:14px;top:auto;transform:none;}
  .drm-arrow-prev{left:12px;}
  .drm-arrow-next{right:12px;}
  .drm-page{font-size:.8rem;padding:0 .2rem;}
  .drm-zoom{font-size:.76rem;min-width:34px;}
}

/* ══════════════════════════════════════════════════
   MOBILE-FIRST REDIZAJN ARHIVE (magazin izgled)
   #0a2342 plava · #d4af37 zlatna · bijela
   ══════════════════════════════════════════════════ */
.us-dij-latest-title{color:#0a2342;}
.us-dij-archive-title{color:#0a2342;font-weight:800;}

/* Kompaktne kartice starijih brojeva */
.us-dij-card{background:#fff;border:1px solid #e6e9f0;border-radius:14px;overflow:hidden;
  box-shadow:0 6px 18px rgba(10,35,66,.08);display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s;}
.us-dij-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(10,35,66,.14);}
.us-dij-cover-link{position:relative;display:block;aspect-ratio:210/297;background:#0a2342;overflow:hidden;}
.us-dij-cover-link .dij-cover-img,.us-dij-cover-link img,.us-dij-cover-link canvas{width:100%;height:100%;object-fit:cover;display:block;}
.us-dij-cover-overlay{position:absolute;left:8px;top:8px;right:auto;bottom:auto;
  background:none;padding:0;display:block;}
.us-dij-num-badge{background:#0a2342;color:#fff;font-size:.72rem;font-weight:800;padding:.15rem .5rem;border-radius:20px;
  border:1px solid rgba(212,175,55,.6);}
.us-dij-card-body{padding:.6rem .7rem .7rem;display:flex;flex-direction:column;gap:.4rem;}
.us-dij-card-line{display:flex;align-items:baseline;justify-content:space-between;gap:.4rem;}
.us-dij-card-broj{font-weight:800;color:#0a2342;font-size:.92rem;}
.us-dij-card-year{color:#6b7a99;font-size:.78rem;font-weight:600;}
.us-dij-card-icons{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;}
.us-dij-ico-read{display:inline-flex;align-items:center;gap:.25rem;background:#0a2342;color:#fff;text-decoration:none;
  font-size:.76rem;font-weight:700;padding:.28rem .6rem;border-radius:8px;}
.us-dij-ico-read:hover{background:#13315c;color:#fff;}
.us-dij-lock-pill{display:inline-flex;align-items:center;gap:.2rem;background:#fff7e0;color:#7a5a00;
  border:1px solid #f0dca0;font-size:.68rem;font-weight:700;padding:.2rem .5rem;border-radius:20px;}
.us-dij-year-pill{background:rgba(212,175,55,.18);color:#7a5a00;border:1px solid rgba(212,175,55,.45);
  font-size:.78rem;font-weight:700;padding:.15rem .6rem;border-radius:20px;}

/* Istaknuti broj — cover kao magazin (A4), zlatni okvir */
.us-dij-featured-cover{border-radius:16px;overflow:hidden;box-shadow:0 16px 40px rgba(10,35,66,.28);
  border:2px solid rgba(212,175,55,.55);display:block;aspect-ratio:210/297;background:#0a2342;}
/* Tamna kartica → svijetli tekst; pill-ovi se NE rastežu (align-self) */
.us-dij-featured-body{align-items:flex-start;}
.us-dij-featured-broj{display:inline-block;align-self:flex-start;background:#d4af37;color:#0a2342;
  font-weight:800;font-size:.78rem;padding:.2rem .7rem;border-radius:20px;}
.us-dij-featured-title{color:#fff;margin:.5rem 0;font-size:1.6rem;}
.us-dij-featured-title a{color:#fff;text-decoration:none;}
.us-dij-featured-title a:hover{color:#d4af37;}
.us-dij-featured-meta{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-bottom:.8rem;}
.us-dij-featured-meta .us-dij-year-pill{background:rgba(212,175,55,.2);color:#f0e2b8;border:1px solid rgba(212,175,55,.5);}
.us-dij-featured .us-dij-card-actions{margin-top:.4rem;}

/* Grid: 2 kolone (mobile-first) → šire kolone na većim ekranima */
.us-dij-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;}
@media(min-width:560px){.us-dij-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;}}
@media(min-width:900px){.us-dij-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1.25rem;}}

/* Mobilni spacing — manje margine, kompaktnija tipografija, dugmad manja */
@media(max-width:600px){
  .us-dij-section{padding:0;}
  .us-dij-archive-title{font-size:1.1rem;margin:1.1rem 0 .6rem;}
  .us-dij-year-group{margin-bottom:1.1rem;}
  .us-dij-year-heading{font-size:.95rem;margin:0 0 .6rem;}
  .us-dij-featured{display:grid;grid-template-columns:1fr;gap:.8rem;text-align:center;}
  .us-dij-featured-cover{max-width:230px;margin:0 auto;}
  .us-dij-featured-meta{justify-content:center;}
  .us-dij-card-actions{justify-content:center;flex-wrap:wrap;gap:.4rem;}
  .us-dij-card-actions .us-btn{padding:.5rem .9rem;font-size:.85rem;}
}