.detail-hero { padding: var(--space-lg) 0 var(--space-md); }
.detail-hero__grid { display: grid; gap: var(--space-lg); align-items: center; }
.detail-hero__media { margin: 0; overflow: hidden; border-radius: var(--radius); order: -1; }
.detail-hero__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; max-height: 70vh; }
.detail-hero .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-lg); }
@media (min-width: 900px) {
  .detail-hero { padding: var(--space-xl) 0; }
  .detail-hero__grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-xl); }
  .detail-hero__media { order: 0; }
}

.detail__grid { display: grid; gap: var(--space-xl); }
.detail__aside { background: var(--color-bg-alt); border-radius: var(--radius); padding: 28px; align-self: start; }
.detail__aside-title { font-size: var(--fs-h3); }
.detail__meta { font-size: var(--fs-14); color: var(--color-text-soft); margin-top: 14px; }
@media (min-width: 900px) { .detail__grid { grid-template-columns: 1.4fr 1fr; } .detail__aside { position: sticky; top: calc(var(--header-h) + 24px); } }

.photo-strip { list-style: none; padding: 0 var(--gutter); margin: 0 calc(var(--gutter) * -1); display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.photo-strip::-webkit-scrollbar { display: none; }
.photo-strip li { scroll-snap-align: start; }
.photo-strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
@media (min-width: 768px) { .photo-strip { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; margin: 0; padding: 0; gap: 16px; } }

.related { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--color-line); }
.related__link { display: flex; align-items: baseline; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--color-line); font-family: var(--font-heading); font-size: var(--fs-h3); color: var(--color-primary); text-decoration: none; transition: padding var(--transition), color var(--transition); }
.related__link:hover { padding-left: 10px; color: var(--color-accent); }
.related__num { font-style: italic; color: var(--color-accent); font-size: var(--fs-16); }