/**
 * HumanKind Funerals — single tribute page.
 *
 * Fresh template informed by the FCRM enhanced-classic look: banner
 * with overlapping portrait, calm typography, sections that simply
 * don't render when a tribute lacks their data. Fonts inherit from
 * the theme. Same custom-property seam as the grid.
 */

.hk-tribute-single {
	--hk-accent: #3b82f6;
	--hk-text: #111827;
	--hk-muted: #6b7280;
	--hk-card-bg: #ffffff;
	--hk-card-radius: 16px;
	--hk-button-radius: 8px;
	--hk-border: #e5e7eb;

	max-width: 900px;
	margin: 0 auto;
	/* Padding, not margin: the last section's margin can collapse out
	   of the article, leaving the gallery hard against the footer. */
	padding-bottom: 3.5rem;
}

/* Banner + header */
.hk-tribute-banner {
	border-radius: var(--hk-card-radius);
	overflow: hidden;
	aspect-ratio: 3 / 1;
	background: #f3f4f6;
}

.hk-tribute-banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hk-tribute-header {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin: 1.5rem 0 2rem;
}

.hk-tribute-header.has-banner {
	margin-top: -3.5rem;
	padding-left: 1.5rem;
	align-items: flex-start;
}

/* The photo overlaps the banner by 3.5rem; the heading must not —
   start its text just below the banner edge. */
.hk-tribute-header.has-banner .hk-tribute-heading {
	padding-top: 4.25rem;
}

.hk-tribute-photo {
	width: 10rem;
	height: 10rem;
	object-fit: cover;
	object-position: 50% 25%;
	border-radius: var(--hk-card-radius);
	border: 4px solid var(--hk-card-bg);
	background: #f9fafb;
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
	flex-shrink: 0;
}

.hk-tribute-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}

.hk-tribute-placeholder span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	background: var(--hk-border);
	color: var(--hk-muted);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.hk-tribute-heading h1 {
	margin: 0 0 0.25rem;
	line-height: 1.15;
	color: var(--hk-text);
}

.hk-tribute-lifespan {
	margin: 0;
	color: var(--hk-muted);
	font-size: 1.125rem;
	font-weight: 500;
}

.hk-tribute-share {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: 0.875rem;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-button-radius);
	background: var(--hk-card-bg);
	color: var(--hk-muted);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 500;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.hk-tribute-share:hover {
	color: var(--hk-accent);
	border-color: var(--hk-accent);
}

/* Sections */
.hk-tribute-single section {
	margin-bottom: 2.5rem;
}

.hk-tribute-single section h2 {
	font-size: 1.25rem;
	margin: 0 0 1rem;
	color: var(--hk-text);
}

.hk-tribute-obituary {
	color: var(--hk-text);
	line-height: 1.7;
}

/* Events */
.hk-tribute-events ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.hk-events-held,
.hk-events-pending {
	margin: 0;
	padding: 1rem 1.25rem;
	border: 1px solid var(--hk-border);
	border-radius: calc(var(--hk-card-radius) / 2);
	background: var(--hk-card-bg);
	color: var(--hk-muted);
}

.hk-tribute-event {
	display: grid;
	gap: 0.125rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--hk-border);
	border-radius: calc(var(--hk-card-radius) / 2);
	background: var(--hk-card-bg);
}

.hk-event-name {
	font-weight: 700;
	color: var(--hk-text);
}

.hk-event-when {
	color: var(--hk-accent);
	font-weight: 500;
}

.hk-event-venue {
	color: var(--hk-text);
}

.hk-event-address {
	color: var(--hk-muted);
	font-size: 0.9375rem;
}

/* Buttons. Labels can be long staff-entered text (donation causes,
   graphic link names) — keep wrapped lines centred and balanced. */
.hk-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.65rem 1.5rem;
	background: var(--hk-accent);
	color: #ffffff;
	border-radius: var(--hk-button-radius);
	font-weight: 500;
	text-decoration: none;
	transition: filter 0.2s ease;
	margin: 0 0.5rem 0.5rem 0;
	text-align: center;
	text-wrap: balance;
}

.hk-button:hover {
	filter: brightness(0.9);
	color: #ffffff;
}

.hk-button-outline {
	background: transparent;
	border: 2px solid var(--hk-accent);
	color: var(--hk-accent);
}

.hk-button-outline:hover {
	background: var(--hk-accent);
	color: #ffffff;
	filter: none;
}

/* Gallery: wrapping thumbnail grid + native dialog lightbox.
   Thumbs crop square; the lightbox shows each image uncropped. */
.hk-gallery-strip {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 9rem, 1fr ) );
	gap: 0.75rem;
}

.hk-gallery-thumb {
	border: none;
	padding: 0;
	background: none;
	cursor: pointer;
	border-radius: calc(var(--hk-card-radius) / 2);
	overflow: hidden;
	aspect-ratio: 1;
}

.hk-gallery-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hk-gallery-lightbox {
	border: none;
	border-radius: var(--hk-card-radius);
	padding: 0;
	background: transparent;
	max-width: min(92vw, 1100px);
}

.hk-gallery-lightbox::backdrop {
	background: rgb(0 0 0 / 0.8);
}

.hk-gallery-lightbox img {
	display: block;
	max-width: 100%;
	max-height: 85vh;
	border-radius: var(--hk-card-radius);
}

.hk-gallery-lightbox button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	border: none;
	background: rgb(255 255 255 / 0.9);
	color: #111827;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	font-size: 1.25rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hk-gallery-lightbox .hk-gallery-prev {
	left: 0.75rem;
}

.hk-gallery-lightbox .hk-gallery-next {
	right: 0.75rem;
}

.hk-gallery-lightbox .hk-gallery-close {
	top: 0.75rem;
	right: 0.75rem;
	transform: none;
}

/* Messages */
.hk-messages-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.hk-messages-header h2 {
	margin: 0;
}

/* Full-width rows separated by dividers (wireframe decision, 13 Jul
   2026) — not cards. The heart sits left, the candle sits right; the
   edit affordance joins the right side when the edit flow lands. */
.hk-messages-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin-top: 1.25rem;
}

.hk-message-card {
	border-top: 1px solid var(--hk-border);
	padding: 1.1rem 0;
}

.hk-message-card:last-child {
	border-bottom: 1px solid var(--hk-border);
}

.hk-message-card header {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin-bottom: 0.375rem;
}

.hk-message-name {
	font-weight: 700;
	color: var(--hk-text);
}

.hk-message-date {
	margin-left: auto;
	color: var(--hk-muted);
	font-size: 0.8125rem;
	white-space: nowrap;
}

.hk-message-card p {
	margin: 0 0 0.5rem;
	color: var(--hk-text);
	line-height: 1.6;
}

.hk-message-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* A small candle in the author's chosen colour (inline SVG uses
   currentColor; the span's color carries the choice). */
.hk-message-candle {
	display: inline-flex;
	color: var(--hk-accent);
	flex-shrink: 0;
}

.hk-message-candle svg {
	filter: drop-shadow(0 0 2.5px currentColor);
}

.hk-message-like {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	border: none;
	background: none;
	padding: 0.25rem 0;
	color: var(--hk-muted);
	cursor: pointer;
	font-size: 0.875rem;
}

.hk-message-like[aria-pressed="true"] {
	color: #c0392b;
}

.hk-message-like[aria-pressed="true"] svg path {
	fill: currentColor;
}

.hk-messages-empty {
	color: var(--hk-muted);
	margin-top: 1rem;
}

.hk-messages-more-wrap {
	text-align: center;
	margin-top: 1.5rem;
}

/* Message form */
.hk-message-form-wrap {
	margin-top: 1.25rem;
	border: 1px solid var(--hk-border);
	border-radius: calc(var(--hk-card-radius) / 2);
	padding: 1.5rem;
	background: var(--hk-card-bg);
}

.hk-form-note {
	margin-top: 0;
	color: var(--hk-muted);
	font-size: 0.9375rem;
}

.hk-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-bottom: 1rem;
}

@media (max-width: 640px) {
	.hk-form-row {
		grid-template-columns: 1fr;
	}
}

.hk-message-form label {
	display: block;
	font-weight: 600;
	color: var(--hk-text);
	font-size: 0.9375rem;
}

.hk-message-form input[type="text"],
.hk-message-form input[type="email"],
.hk-message-form input[type="tel"],
.hk-message-form textarea,
.hk-message-verify input {
	display: block;
	width: 100%;
	margin-top: 0.25rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--hk-border);
	border-radius: 8px;
	font: inherit;
	color: var(--hk-text);
	background: #ffffff;
}

.hk-form-message {
	margin-bottom: 1rem;
}

.hk-form-candle {
	border: none;
	padding: 0;
	margin: 0 0 1rem;
}

.hk-candle-toggle {
	display: flex !important;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
}

.hk-candle-colors {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.hk-candle-color input {
	position: absolute;
	opacity: 0;
}

.hk-candle-color span {
	display: block;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	cursor: pointer;
	border: 3px solid transparent;
}

.hk-candle-color input:checked + span {
	border-color: var(--hk-text);
}

/* Honeypot — visually removed, present for bots. */
.hk-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hk-form-error,
.hk-verify-error {
	color: #b32d2e;
	font-size: 0.9375rem;
}

.hk-message-verify .hk-form-row {
	grid-template-columns: 1fr auto;
	align-items: center;
}

.hk-message-success {
	color: #1a7f37;
	font-weight: 600;
}

/* Not found */
.hk-tribute-not-found {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
	padding: 3rem 1rem;
}

/* Responsive */
@media (max-width: 640px) {
	/* Some themes run this page edge-to-edge on phones; give the
	   content its own breathing room either way. */
	.hk-tribute-single {
		padding-inline: 1rem;
	}

	.hk-tribute-single .hk-tribute-banner {
		aspect-ratio: 2 / 1;
	}

	.hk-tribute-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
		margin: 1.25rem 0 1.75rem;
	}

	.hk-tribute-header.has-banner {
		margin-top: -2.5rem;
		padding-left: 0.75rem;
	}

	/* Stacked on mobile: the photo does the overlapping, the heading
	   flows normally below it. */
	.hk-tribute-header.has-banner .hk-tribute-heading {
		padding-top: 0;
	}

	.hk-tribute-photo {
		width: 7rem;
		height: 7rem;
	}

	.hk-tribute-single section {
		margin-bottom: 2rem;
	}

	.hk-tribute-single section h2 {
		margin-bottom: 0.75rem;
	}
}

/* ------------------------------------------------------------------ */
/* Layout variants — wireframe decisions, 13 Jul 2026                  */
/* (docs/design-brief-refs/wireframes-single-layouts/DECISIONS.md)     */
/* ------------------------------------------------------------------ */

/* Quick-answer strip: one line under the identity answering "when is
   the service", with jump links to the details and livestream. */
.hk-tribute-quick {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem 1.25rem;
	margin: 0 0 2.5rem;
	padding: 0.875rem 0;
	border-top: 1px solid var(--hk-border);
	border-bottom: 1px solid var(--hk-border);
	color: var(--hk-text);
}

.hk-quick-label {
	color: var(--hk-muted);
}

.hk-tribute-quick a {
	color: var(--hk-accent);
	font-weight: 500;
}

/* Jump targets must not land under sticky theme headers. */
.hk-tribute-single section[id] {
	scroll-margin-top: 6rem;
}

/* The wireframe layouts treat the banner as a quiet 4:1 strip — the
   portrait is the subject, the banner is scenery. Applies at every
   width (overrides the classic 2:1 mobile rule by order). */
.hk-layout-centred .hk-tribute-banner,
.hk-layout-sidebar .hk-tribute-banner {
	/* Explicit width stops the max-height transferring into the width
	   via the aspect ratio — the cap must only clamp the height. */
	width: 100%;
	aspect-ratio: 4 / 1;
	max-height: 200px;
}

/* Centred layout: the hero stacks and centres; the portrait is the
   focus, so it runs larger than the classic square. */
.hk-layout-centred .hk-tribute-header {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1rem;
}

.hk-layout-centred .hk-tribute-photo {
	width: 13rem;
	height: 16rem;
}

.hk-layout-centred .hk-tribute-header.has-banner {
	margin-top: -5rem;
	padding-left: 0;
}

.hk-layout-centred .hk-tribute-header.has-banner .hk-tribute-heading {
	padding-top: 0;
}

.hk-layout-centred .hk-tribute-quick {
	justify-content: center;
}

/* Sidebar layout: practical details in a panel beside the obituary on
   wide containers, ahead of it (DOM order) when the columns collapse.
   Container queries measure the theme's content area, not the
   viewport; without support the layout stays single-column. */
.hk-tribute-single.hk-layout-sidebar {
	max-width: 1100px;
	container-type: inline-size;
}

.hk-layout-sidebar .hk-tribute-photo {
	width: 12.5rem;
	height: 15rem;
}

.hk-tribute-columns {
	display: grid;
	gap: 2.5rem;
}

.hk-tribute-aside {
	align-self: start;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-card-radius);
	background: var(--hk-card-bg);
	box-shadow: var(--hk-shadow, none);
	padding: 1.5rem;
}

.hk-tribute-aside section {
	margin-bottom: 1.75rem;
}

.hk-tribute-aside section:last-child {
	margin-bottom: 0;
}

.hk-tribute-aside section h2 {
	font-size: 1.05rem;
}

/* Inside the panel the events read as a stacked list — the panel
   supplies the frame, so the cards drop theirs. */
.hk-tribute-aside .hk-tribute-event {
	padding: 0 0 1rem;
	border: none;
	border-bottom: 1px solid var(--hk-border);
	border-radius: 0;
	background: transparent;
}

.hk-tribute-aside .hk-tribute-event:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.hk-tribute-aside .hk-button {
	display: flex;
	justify-content: center;
	margin-right: 0;
}

@container (min-width: 56rem) {
	.hk-tribute-columns.hk-has-aside {
		grid-template-columns: minmax(0, 1fr) 21rem;
		align-items: start;
	}

	/* DOM keeps the aside first (details-first when stacked); on wide
	   containers it moves to the right column and follows the scroll. */
	.hk-tribute-columns.hk-has-aside > .hk-tribute-aside {
		order: 2;
		position: sticky;
		top: 1.5rem;
	}
}

@media (max-width: 640px) {
	/* On phones the banner turns into a cover photo: taller, holding
	   more of the portrait, instead of the desktop's quiet strip. */
	.hk-layout-centred .hk-tribute-banner,
	.hk-layout-sidebar .hk-tribute-banner {
		aspect-ratio: 2 / 1;
		max-height: none;
	}

	/* Once the columns collapse the sidebar hero centres too — one
	   cover treatment across both new layouts on phones. */
	.hk-layout-centred .hk-tribute-photo,
	.hk-layout-sidebar .hk-tribute-photo {
		width: 9.5rem;
		height: 11.75rem;
	}

	.hk-layout-sidebar .hk-tribute-header {
		align-items: center;
		text-align: center;
		gap: 1rem;
	}

	.hk-layout-centred .hk-tribute-header.has-banner,
	.hk-layout-sidebar .hk-tribute-header.has-banner {
		margin-top: -5.5rem;
		padding-left: 0;
	}

	.hk-tribute-aside {
		padding: 1.25rem;
	}

	.hk-tribute-quick {
		margin-bottom: 2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hk-button {
		transition: none;
	}
}