/* UG School documents grid */
.ugdocs { padding-top: 10px; padding-bottom: 50px; }
.ugdocs .row > div { margin-top: 30px; }

.ugdoc { max-width: 320px; margin: 0 auto; }

.ugdoc-book {
  display: block; position: relative; perspective: 1200px; text-decoration: none !important;
}
.ugdoc-cover {
  position: relative; aspect-ratio: 1 / 1.414; background: #fff; border-radius: 2px 6px 6px 2px; overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 10px 24px rgba(0,0,0,.14);
  transform-origin: left center; transition: transform .35s ease, box-shadow .35s ease;
}
.ugdoc-cover canvas { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }
/* spine shading */
.ugdoc-cover::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 14px; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, rgba(0,0,0,.18), rgba(0,0,0,.04) 60%, rgba(0,0,0,0));
}
/* loading shimmer */
.ugdoc:not(.is-loaded) .ugdoc-cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 70%) #eee;
  background-size: 200% 100%; animation: ugdoc-shimmer 1.3s linear infinite;
}
.ugdoc.is-failed .ugdoc-cover::after { animation: none; background: #eee; }
@keyframes ugdoc-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }

.ugdoc-open {
  position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%) scale(.9);
  background: rgba(20,20,20,.78); color: #fff; border-radius: 30px; padding: 9px 18px; font-size: 14px;
  opacity: 0; transition: opacity .25s, transform .25s; white-space: nowrap; pointer-events: none;
}
.ugdoc-open i { margin-right: 6px; }

.ugdoc-book:hover .ugdoc-cover, .ugdoc-book:focus-visible .ugdoc-cover {
  transform: rotateY(-14deg) translateX(4px);
  box-shadow: 0 4px 8px rgba(0,0,0,.1), 18px 22px 40px rgba(0,0,0,.25);
}
.ugdoc-book:hover .ugdoc-open, .ugdoc-book:focus-visible .ugdoc-open { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.ugdoc-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 8px; }
.ugdoc-pages { color: #888; font-size: 13px; }
.ugdoc-actions { display: flex; gap: 6px; }
.ugdoc-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 17px;
  font-size: 13px; text-decoration: none !important; border: 1px solid #ddd; color: #333 !important; background: #fff;
  transition: background-color .15s, border-color .15s, color .15s;
}
.ugdoc-btn:hover { border-color: #ed2c32; color: #ed2c32 !important; }
.ugdoc-btn.is-primary { background: #ed2c32; border-color: #ed2c32; color: #fff !important; }
.ugdoc-btn.is-primary:hover { background: #cf1f25; border-color: #cf1f25; color: #fff !important; }

@media (hover: none) {
  .ugdoc-open { display: none; }
}