.zpd-section { margin-block: 1.5rem; }
.zpd-section > h2 { margin: 0 0 .8rem; color: #214b64; font-size: 1.25rem; }
.zpd-document { display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr); gap: 1.25rem; padding: 1.1rem; border: 1px solid #d3e1e7; border-radius: .9rem; background: #fff; }
.zpd-cover { position: relative; display: grid; place-items: center; min-width: 0; aspect-ratio: 1 / 1.42; overflow: hidden; border-radius: .55rem; background: #f1f6f9; }
.zpd-cover img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-height: none; object-fit: contain; }
.zpd-cover--unavailable { color: #4b6578; font-size: .85rem; text-align: center; padding: 1rem; }
.zpd-body { display: flex; flex-direction: column; align-items: start; gap: .7rem; min-width: 0; }
.zpd-body > h3 { margin: 0; color: #173e58; font-size: 1.1rem; line-height: 1.5; }
.zpd-body > p { margin: 0; color: #496c81; font-size: .88rem; line-height: 1.75; }
.zpd-season { display: inline-block; padding: .28rem .55rem; border-radius: .4rem; color: #285b74; background: #eaf3fa; font-size: .8rem; font-weight: 700; }
.zpd-season--archive { color: #755a1a; background: #fff3d4; }
.zpd-body .zpd-notice { padding: .55rem .7rem; border-left: 3px solid #ddbc66; border-radius: .4rem; color: #715727; background: #fff8e7; font-size: .8rem; }
.zpd-body .zpd-source { color: #658092; font-size: .76rem; }
.zpd-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: auto; padding-top: .3rem; }
.zpd-action { display: inline-flex; justify-content: center; align-items: center; gap: .3rem; min-height: 44px; padding: .55rem .85rem; border: 1px solid #accde1; border-radius: .5rem; color: #215772; background: #eef6fb; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.45; text-decoration: none; }
.zpd-action:hover { background: #dfeef7; }
.zpd-action:focus-visible, .zpd-cover:focus-visible { outline: 3px solid #1769a4; outline-offset: 3px; }
.zrp-document-grid > .zpd-document { display: flex; flex-direction: column; gap: .8rem; padding: .6rem; }
.zrp-document-grid > .zpd-document .zpd-cover { flex: none; width: 100%; }
.zrp-document-grid > .zpd-document .zpd-body { flex: 1; gap: .6rem; }
.zrp-document-grid > .zpd-document h3 { font-size: .94rem; }
.zrp-document-grid > .zpd-document .zpd-body > p { font-size: .8rem; }
@media (max-width: 42rem) {
  .zpd-document { grid-template-columns: minmax(0, 1fr); gap: .9rem; padding: .9rem; }
  .zpd-document > .zpd-cover { width: min(100%, 18rem); justify-self: center; }
  .zpd-actions { width: 100%; }
  .zpd-actions > a { flex: 1 1 8rem; }
}
.zpd-document--wide { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.zpd-document--wide > .zpd-cover { width: 100%; max-width: 1200px; aspect-ratio: auto; justify-self: center; background: #fff; }
.zpd-document--wide > .zpd-cover img { position: static; inset: auto; width: 100%; height: auto; object-fit: contain; }
.zpd-document--wide .zpd-reading-tip { color: #285b74; font-weight: 700; }