/* Shared Film/Person detail composition. Modern tokens, panels and buttons own the visuals. */
.hr-modern-body .hr-detail-page {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.hr-detail-page > .Breadcrumbs { margin: 0 0 18px; font-size: .86rem; }
.hr-detail-hero {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 20px 32px;
  padding: clamp(20px, 3vw, 32px);
}
.hr-detail-hero .DetailHeader { grid-column: 2; margin: 0; }
.hr-detail-hero .DetailTitle { font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.15; margin: 0; overflow-wrap: anywhere; }
.hr-detail-hero .DetailSubtitle { margin: 10px 0 0; color: var(--hr-muted); }
.hr-detail-hero :is(.CinemaDetailLead, .hr-person-lead) { display: contents; }
.hr-detail-hero .DetailImage { grid-column: 1; grid-row: 1 / span 3; margin: 0; width: 220px; }
.hr-detail-hero .DetailImage img { display: block; width: 100%; height: auto; aspect-ratio: 220 / 326; object-fit: contain; background: var(--hr-surface-2); }
.hr-detail-hero .DetailMetadata {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 16px 24px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.hr-detail-hero .MetadataItem { min-width: 0; color: var(--hr-text); line-height: 1.6; }
.hr-detail-hero .MetadataItem:last-child { grid-column: 1 / -1; }
.hr-detail-hero dt { color: var(--hr-muted); font-size: .78rem; font-weight: 700; }
.hr-detail-hero dd { margin: 3px 0 0; overflow-wrap: anywhere; }
.hr-detail-hero dd a { display: inline-block; }
.hr-detail-hero :is(.CinemaDetailActions, .hr-person-summary) { grid-column: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; }
.hr-film-vote { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.hr-film-vote span { color: var(--hr-muted); font-size: .82rem; }
.hr-film-vote strong { color: var(--hr-brand); font-size: 1.1rem; }
.hr-detail-page .CinemaDetailOpinioniLink { margin: 0; min-width: 0; max-width: 100%; }
.hr-detail-jumps { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 22px 0; }
.hr-detail-jumps a { display: inline-flex; min-height: 44px; align-items: center; gap: 6px; font-size: .9rem; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
.hr-detail-reading { padding: clamp(20px, 4vw, 40px); }
.hr-detail-section { max-width: 74ch; margin-inline: auto; scroll-margin-top: 15rem; }
.hr-detail-section + .hr-detail-section { border-top: 1px solid var(--hr-line); margin-top: 32px; padding-top: 28px; }
.hr-detail-section h2, .hr-film-related h2 { font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.3; margin: 0 0 18px; }
.hr-detail-section .DetailBody { max-width: none; margin: 0; padding: 0; font-size: 1rem; line-height: 1.85; overflow-wrap: anywhere; }
.hr-detail-section .DetailBody p { margin: 0 0 1em; }
.hr-detail-section .DetailBody a { text-decoration: underline; text-underline-offset: 3px; }
.hr-film-byline { font-size: .87rem; color: var(--hr-muted); margin: -8px 0 18px; }
.hr-film-empty, .hr-film-related { margin-top: 24px; }
.hr-film-related .DetailRelated { margin: 0; padding: 0; }
.hr-film-related ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.hr-film-related li { margin: 0; border-top: 1px solid var(--hr-line); padding-top: 12px; overflow-wrap: anywhere; }
.hr-film-related a { display: inline-block; padding-block: 6px; color: var(--hr-text); font-weight: 650; }
@media (max-width: 760px) {
  .hr-detail-hero { grid-template-columns: 160px minmax(0, 1fr); gap: 20px; }
  .hr-detail-hero .DetailImage { width: 160px; }
  .hr-detail-hero .DetailMetadata { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .hr-detail-hero { grid-template-columns: 1fr; }
  .hr-detail-hero .DetailHeader { grid-column: 1; grid-row: 1; }
  .hr-detail-hero .DetailImage { grid-column: 1; grid-row: 2; justify-self: center; width: 170px; }
  .hr-detail-hero .DetailMetadata { grid-column: 1; grid-row: 3; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hr-detail-hero :is(.CinemaDetailActions, .hr-person-summary) { grid-column: 1; grid-row: 4; }
  .hr-detail-section .DetailBody { line-height: 1.75; }
}

/* Person profiles reuse the same hero and reading sections; only the catalogue differs. */
.hr-person-summary { color: var(--hr-muted); font-size: .9rem; }
.hr-person-summary p { margin: 0; }
.hr-person-summary strong { color: var(--hr-text); }
.hr-person-photo-note { width: 100%; font-size: .82rem; }
.hr-person-back { display: inline-flex; align-items: center; min-height: 44px; font-size: .9rem; }
.hr-person-empty { margin: 0 0 22px; font-size: .9rem; }
.hr-person-empty p { margin: 0; color: var(--hr-muted); }
.hr-person-filmography { margin-top: 24px; scroll-margin-top: 15rem; }
.hr-person-filmography .DetailRelated { margin: 0; }
.hr-person-filmography h2 { font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.3; margin: 0 0 12px; }
.hr-filmography-note { color: var(--hr-muted); font-size: .87rem; margin: 0 0 20px; max-width: 80ch; }
.hr-filmography ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; list-style: none; margin: 0; padding: 0; }
.hr-filmography li { min-width: 0; margin: 0; padding: 12px 0; border-top: 1px solid var(--hr-line); overflow-wrap: anywhere; }
.hr-filmography-title { display: block; font-weight: 700; line-height: 1.45; }
.hr-filmography-title a { display: inline-block; padding-bottom: 5px; text-decoration: underline; text-underline-offset: 3px; }
.hr-filmography .RelatedMeta { display: block; margin-top: 6px; color: var(--hr-muted); font-size: .82rem; line-height: 1.6; }
.hr-filmography-status { display: block; color: var(--hr-muted); font-size: .75rem; margin-top: 9px; }
@media (max-width: 640px) { .hr-filmography ul { grid-template-columns: 1fr; } }

.hr-detail-hero--text-only { grid-template-columns: 1fr; gap: 16px; }
.hr-detail-hero--text-only .DetailHeader,
.hr-detail-hero--text-only .DetailMetadata,
.hr-detail-hero--text-only .hr-person-summary { grid-column: 1; grid-row: auto; }
.hr-detail-hero--text-only .DetailMetadata { grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }