/* Single-material view, visually aligned with the category screen. */
.inner-hero.compact {
  min-height:185px;
  display:flex; align-items:center;
  background-color:#043b34;
  background-image:linear-gradient(90deg,rgba(3,46,39,.28),rgba(3,46,39,.86)),url('library-hero.webp');
  background-position:center;
  background-size:cover;
  border-bottom:4px solid rgba(199,155,75,.6);
  position:relative;
}
.inner-hero.compact::before { content:""; position:absolute; inset:10px; border:1px solid rgba(223,184,98,.2); pointer-events:none; }
.inner-hero.compact .container { position:relative; z-index:1; }
.inner-hero.compact h1 { font-size:39px; line-height:1.55; max-width:980px; text-shadow:0 3px 12px rgba(0,0,0,.3); }
.inner-hero.compact h1::after { content:"✦ ───── ✦"; display:block; color:#d6ac59; font:15px Amiri; letter-spacing:4px; margin-top:2px; }
.inner-hero.compact .pill { margin-top:12px; }
.material-layout { gap:28px; align-items:start; padding-top:30px; }
.material-layout > article { min-width:0; }
.custom-player {
  border-radius:12px;
  padding:27px 30px;
  background:linear-gradient(135deg,#064b41,#022f2a);
  box-shadow:0 13px 26px rgba(1,48,41,.18);
  border:1px solid rgba(230,195,117,.25);
}
.big-play {
  width:62px; height:62px;
  color:#fff; background:linear-gradient(135deg,#d4ad5e,#9b702c);
  box-shadow:0 5px 0 rgba(78,51,13,.45), 0 10px 18px rgba(0,0,0,.2);
}
.custom-player b { font-size:18px; }
.progress { height:6px; background:#57847a; border-radius:5px; }
.progress span { background:#e3c075; border-radius:5px; }
.custom-player>a { color:#f0ce84; padding:8px; border:1px solid rgba(255,255,255,.24); border-radius:50%; font-size:20px; }
.material-body,.share {
  background:#fff; border:1px solid #eee9df; padding:27px 30px;
}
.material-body { margin-top:17px; border-radius:12px 12px 0 0; padding-bottom:18px; }
.material-body h2 { border-bottom:2px solid #d6ac59; padding-bottom:10px; display:inline-block; }
.material-body p { color:#4c5d57; }
.share { margin-top:0; border-top:1px dashed #e5ddce; border-radius:0 0 12px 12px; justify-content:flex-start; }
.share b { color:#073d35; margin-left:auto; }
.share a,.share button { border-radius:7px; padding:8px 13px; color:#195347; transition:.18s; }
.share a:hover,.share button:hover { color:#fff; background:#0b4a40; border-color:#0b4a40; }
.material-meta {
  padding:0; overflow:hidden; border:1px solid #eee7db; border-radius:12px;
  box-shadow:0 9px 24px rgba(4,55,46,.08); background:#fff;
}
.material-meta h3 { font-size:24px; margin:0; padding:21px 23px; border-bottom:1px solid #eee5d8; }
.material-meta dl { padding:8px 20px 17px; }
.material-meta dt {
  position:relative; padding:13px 28px 0 0; color:#8b918e; font-size:11px;
}
.material-meta dt::before { content:"◈"; position:absolute; right:2px; top:12px; color:#ba8b3d; }
.material-meta dd { padding:2px 28px 11px; border-bottom:1px solid #f0ece5; font-size:14px; font-weight:700; color:#26443d; }
.material-meta dd:last-child { border:0; }
.download-button { margin:0 16px 17px; border-radius:8px; background:linear-gradient(135deg,#c79b4b,#96702e); box-shadow:0 7px 15px rgba(151,111,42,.18); }
.next-prev { grid-template-columns:repeat(2,1fr); margin-top:24px; }
.next-prev a { border:1px solid #ebe6dc; border-radius:10px; background:#fff; transition:.2s; }
.next-prev a:hover { transform:translateY(-3px); border-color:#d5b572; box-shadow:0 9px 18px rgba(3,48,41,.1); }
@media(max-width:800px) {
  .inner-hero.compact { min-height:205px; }
  .inner-hero.compact h1 { font-size:28px; }
  .material-layout { padding-top:24px; }
  .material-meta { order:0; }
  .custom-player { padding:20px 16px; }
  .material-body,.share { padding:20px; }
}
@media(max-width:500px) {
  .custom-player b { font-size:15px; }
  .big-play { width:50px; height:50px; }
  .share b { width:100%; margin:0 0 5px; }
  .next-prev { grid-template-columns:1fr; }
}