/* Hall of Fame inductee pages (round 5): a museum label header, clean prose, a grey Burial band.
   Markup: single.php HoF branch prints the featured image, title and the_content; the post content itself
   carries .hof-dates, .hof-inducted and the <div class="band hof-burial"> (deploy/content-r5/hof/). */

/* Header: eyebrow, title, then the content's own .hof-dates and .hof-inducted lines, beside a mounted portrait
   (the featured image) floated right. The first thing after .hof-inducted clears it and draws the rule. */
.hof-portrait { float: right; box-sizing: border-box; width: 220px; margin: 0 0 32px 40px; padding: 10px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(0,0,0,.08); }
.hof-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; margin: 0; background: var(--soft); } /* 600x450 letterboxed portraits and 150px squares crop to one frame */
.hof-name { font: 400 clamp(34px, 5vw, 52px)/1.1 var(--head); color: var(--ink); margin: 4px 0 12px; overflow-wrap: anywhere; }
.hof-body .hof-dates { margin: 0 0 20px; font: italic 400 20px/1.4 var(--serif); color: var(--muted); }
.hof-body .hof-inducted { display: inline-block; margin: 0 0 32px; padding: 6px 14px; border: 1px solid var(--gold); border-radius: 999px; font: 600 12px/1.4 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dark); background: #fffaf0; }
.hof-body .hof-inducted + * { clear: both; position: relative; margin-top: 0; padding-top: 48px; border-top: 1px solid var(--line); }
.hof-body .hof-inducted + *::before { content: ""; position: absolute; left: 0; top: -1px; width: 96px; border-top: 2px solid var(--gold); }
@media (max-width: 600px) {
	.hof-portrait { width: 112px; margin: 0 0 24px 16px; padding: 6px; }
	.hof-body .hof-dates { font-size: 17px; margin-bottom: 14px; }
	.hof-body .hof-inducted { margin-bottom: 24px; }
	.hof-body .hof-inducted + * { padding-top: 32px; }
}

/* Biography prose. */
.hof-body { font-size: 18px; }
.hof-body h2, .hof-body h3, .hof-body h4 { font: 400 26px/1.25 var(--head); color: var(--ink); margin: 48px 0 16px; clear: both; }
.hof-body h4 { font-size: 21px; margin-top: 32px; }
/* Images in the text: floats stay 300px wide; everything else is a centred plate up to 640px, never upscaled. */
.hof-body img:not(.hof-burial *) { height: auto; border: 1px solid var(--line); background: #fff; padding: 6px; }
.hof-body img.alignleft, .hof-body img.alignright { width: 300px; max-width: 45%; margin-top: 6px; }
.hof-body img:not(.alignleft):not(.alignright):not(.hof-burial *), .hof-body figure:not(.alignleft):not(.alignright):not(.gallery-item, .hof-gallery, .hof-gallery__item):not(.hof-burial *) { max-width: min(100%, 640px); margin: 32px auto; }
.hof-body figure:not(.alignleft):not(.alignright):not(.hof-burial *) > img { margin: 0 auto; }
.hof-body figure.wp-caption { width: 300px !important; max-width: 45% !important; }
.hof-body figure.wp-caption img { width: 100%; margin: 0; }
.hof-body figcaption:not(.hof-burial *), .hof-body .wp-caption-text { font: 400 14px/1.5 var(--ui); color: var(--muted); margin-top: 8px; }
.hof-body .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 24px 0; clear: both; }
.hof-body .gallery-item { margin: 0; }
.hof-body .gallery-item img { width: 100%; margin: 0; }
.hof-body::after { content: ""; display: block; clear: both; }
@media (max-width: 600px) {
	.hof-body { font-size: 17px; }
	.hof-body blockquote { margin-left: 0; margin-right: 0; padding-left: 24px; }
	.hof-body img.alignleft, .hof-body img.alignright, .hof-body figure.wp-caption { width: auto !important; max-width: 100% !important; float: none; margin: 24px auto; }
}

/* Burial: map and grave marker side by side in a grey band, stacked on phones; the back link closes the band. */
.hof-burial h2 { font: 700 26px/1.25 var(--head); color: var(--ink); margin: 0 0 24px; }
.hof-burial__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; align-items: start; }
.hof-burial__grid > :only-child { grid-column: 1 / -1; }
.hof-burial figure { margin: 0; }
.hof-burial .hof-burial__map iframe { display: block; width: 100%; height: 320px; border: 1px solid var(--line); background: #fff; }
.hof-burial__marker img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin: 0; padding: 0; border: 1px solid var(--line); background: #fff; } /* markers are 400x450 with white bands top and bottom */
.hof-burial figcaption { font: 400 14px/1.5 var(--ui); color: var(--muted); margin-top: 8px; }
@media (max-width: 600px) {
	.hof-burial__grid { grid-template-columns: 1fr; }
	.hof-burial .hof-burial__map iframe { height: 260px; }
}

.hof-back { clear: both; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); }
.hof-back .arrow { transform: scaleX(-1); }
.hof-back .cta:hover .arrow { transform: translateX(-4px) scaleX(-1); }
.hof-body > .hof-burial:last-child { margin-bottom: 0; padding-bottom: 24px; }
.hof-single:has(.hof-body > .hof-burial:last-child) .hof-back { position: relative; margin: 0 0 56px; padding: 0 0 48px; border: 0; background: var(--soft); box-shadow: 0 0 0 100vmax var(--soft); clip-path: inset(0 -100vmax); }

/* Photo galleries (round 7): photos the old carousels and grids showed. Same 4:3 frame for every photo (portraits and postcards are 600x450 files), whole picture shown. */
.hof-body .hof-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 32px 0; clear: both; }
.hof-body .hof-gallery__item { margin: 0; }
.hof-body .hof-gallery__item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; margin: 0; }
@media (max-width: 600px) {
	.hof-body .hof-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}