/* Halaman kompos memakai kartu ringkas dan poster yang tidak terpotong. */
.compost-overview-page .detail-content {
  width: min(calc(100% - 48px), 1180px);
  margin: 0 auto;
  padding: 36px 0 56px;
}
.compost-overview-page .detail-main {
  padding: 28px;
  border: 1px solid #e1e5dc;
  border-radius: 18px;
  background: #ffffff;
}
.compost-overview-page .detail-main > h2 {
  margin: 0 0 12px;
  color: var(--forest);
  font-family: Georgia, serif;
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
}
.compost-overview-page #detailBody p {
  max-width: 760px;
  margin: 0;
  color: #536158;
  font: 400 16px/1.7 Arial, sans-serif;
}
.compost-overview-page .detail-sections {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  grid-auto-rows: 1fr;
  margin-top: 28px;
}
.compost-overview-page .detail-guide {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d8dfd0;
  border-radius: 14px;
  background: #fffdf7;
  box-shadow: none;
}
.compost-overview-page .detail-guide-media {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  aspect-ratio: 2 / 3;
  padding: 0;
  border-radius: 0;
  background: #eee8db;
}
.compost-overview-page .detail-guide-media::after { display: none; }
.compost-overview-page .detail-guide-media img {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  object-fit: contain;
  border-radius: 0;
}
.compost-overview-page .detail-guide-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 22px;
}
.compost-overview-page .detail-guide-series {
  align-self: flex-start;
  padding: 5px 9px;
  border-radius: 6px;
  background: #e9efdf;
  color: var(--forest);
  font: 700 11px/1.4 Arial, sans-serif;
  letter-spacing: 1px;
}
.compost-overview-page .detail-guide-content h3 {
  max-width: none;
  margin: 0;
  color: var(--forest);
  font: 700 20px/1.4 Arial, sans-serif;
}
.compost-overview-page .detail-guide-content p {
  margin: 0 0 6px;
  color: #536158;
  font: 400 16px/1.7 Georgia, serif;
}
.compost-overview-page .guide-button {
  align-self: stretch;
  margin-top: auto;
  border-radius: 8px;
  font: 700 13px/1.4 Arial, sans-serif;
}
.compost-content {
  width: min(calc(100% - 48px), 1180px);
  margin: 0 auto;
  padding: 36px 0 56px;
  border: 0;
  box-shadow: none;
}
.compost-reading-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 36px;
  padding: 28px;
  border: 1px solid #e1e5dc;
  border-radius: 18px;
  background: #ffffff;
}
.compost-poster { min-width: 0; margin: 0; padding: 16px; border: 1px solid #ddd4c5; border-radius: 14px; background: #fffdf7; }
.compost-poster img { display: block; width: 100%; height: auto; border-radius: 6px; }
.compost-poster a:focus-visible { display: block; outline: 3px solid var(--green); outline-offset: 4px; }
.compost-poster figcaption { margin-top: 12px; color: #657063; font-size: 12px; text-align: center; line-height: 1.5; }
.compost-explanation { min-width: 0; }
.compost-explanation > .eyebrow { margin: 0 0 10px; }
.compost-explanation h2 { margin: 0 0 22px; color: var(--forest); font: 700 clamp(24px, 2.5vw, 30px)/1.45 Georgia, serif; letter-spacing: 0; }
.compost-points { display: grid; gap: 14px; counter-reset: compost-point; }
.compost-points article { position: relative; padding: 20px 20px 20px 64px; border: 1px solid #dce2d5; border-radius: 12px; background: #fffdf7; counter-increment: compost-point; }
.compost-points article::before { content: counter(compost-point, decimal-leading-zero); position: absolute; top: 20px; left: 18px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #e9efdf; color: var(--forest); font: 700 12px Arial, sans-serif; }
.compost-points h3 { margin: 0 0 8px; color: var(--forest); font: 700 20px/1.4 Georgia, serif; letter-spacing: 0; }
.compost-points p { margin: 0; color: #536158; font: 400 16px/1.75 Georgia, serif; }
.compost-navigation { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.compost-navigation .button { margin: 0; min-height: 44px; border-radius: 8px; text-align: center; font-size: 13px; }
.compost-navigation .button {
  background: #173f2b;
  border: 1px solid #173f2b;
  color: #ffffff;
}
.compost-navigation .button.secondary {
  background: #ffffff;
  border-color: #b8c8ae;
  color: #173f2b;
}
@media (hover: hover) {
  .compost-navigation .button:hover {
    background: #2e6847;
    border-color: #2e6847;
    color: #ffffff;
  }
  .compost-navigation .button.secondary:hover {
    background: #e9efdf;
    border-color: #789858;
    color: #173f2b;
  }
}
.compost-navigation .button:focus-visible {
  outline: 3px solid #91ae76;
  outline-offset: 3px;
}
@media (max-width: 1000px) {
  .compost-overview-page .detail-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compost-reading-grid { gap: 24px; }
}
@media (max-width: 760px) {
  .compost-reading-grid { grid-template-columns: 1fr; gap: 28px; }
  .compost-poster { width: min(100%, 540px); margin: 0 auto; }
}
@media (max-width: 600px) {
  .compost-overview-page .detail-main, .compost-reading-grid { padding: 18px; border-radius: 14px; }
  .compost-overview-page .detail-content, .compost-content { width: calc(100% - 32px); padding: 24px 0 36px; }
  .compost-overview-page .detail-sections { grid-template-columns: 1fr; gap: 18px; margin-top: 22px; }
  .compost-overview-page .detail-guide-media { height: auto; }
  .compost-overview-page .detail-guide-content { padding: 20px; }
  .compost-navigation .button { flex: 1 1 140px; }
  .compost-series-page nav > a:last-child { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .compost-overview-page .detail-guide, .compost-overview-page .guide-button { transition: none; }
  .compost-overview-page .detail-guide:hover, .compost-overview-page .guide-button:hover { transform: none; }
}