/* ===========================================================================
   HAPEI singles for new CPTs (v1.23): publication, report, trustee, gallery.
   Also fills in a small set of layout utility classes the earlier singles
   templates referenced but had never been styled.
   ======================================================================== */

/* Layout utilities used by the new singles. Aliases to the existing tokens
   so nothing else in the site changes. */
.hp-section { position: relative; padding: 4rem 0; }
.hp-section--mist { background: var(--hp-mist); }
.hp-section--soft { background: var(--hp-soft, #fff7f6); }
.hp-single__layout--single { grid-template-columns: 1fr; }

/* .hp-single__body used INSIDE .hp-single__layout takes the left grid column
   naturally; do not narrow it. When used standalone (e.g. inside .hp-wrap
   with no layout parent) it inherits the wrap's width. */
.hp-single__layout > .hp-single__body { min-width: 0; }

@media (max-width: 900px) { .hp-section { padding: 3rem 0; } }

/* Program aside cards used by publication/report singles. */
.hp-paside__card--facts { background: #fff; border: 1px solid var(--hp-line, #eee); }
.hp-paside__facts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.hp-paside__facts li { padding-bottom: 12px; border-bottom: 1px dashed var(--hp-line, #eee); }
.hp-paside__facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.hp-paside__facts li div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.hp-paside__label { color: #7a5959; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.hp-paside__facts li strong { color: var(--hp-ink, #1a0b0b); font-weight: 600; text-align: right; }

/* Publication single: cover-first hero. */
.hp-single--publication .hp-phero,
.hp-single--report .hp-phero { padding: 4.5rem 0 3rem; }
.hp-single--publication .hp-phero__sub,
.hp-single--report .hp-phero__sub { max-width: 640px; font-size: 1.15rem; line-height: 1.55; color: rgba(255,255,255,.9); }

/* Report single: stats grid inside body. */
.hp-single--report .hp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.hp-single--report .hp-stat { background: #fff; border-radius: 14px; padding: 22px 24px; text-align: center; box-shadow: 0 8px 24px -16px rgba(0,0,0,.12); }
.hp-single--report .hp-stat__num { display: block; font-family: var(--hp-head, Outfit), sans-serif; font-size: 2.2rem; font-weight: 800; color: var(--hp-primary, #E10D0D); line-height: 1; }
.hp-single--report .hp-stat__label { display: block; margin-top: 8px; color: #5a3a3a; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
@media (max-width: 720px) { .hp-single--report .hp-stats { grid-template-columns: 1fr; } }

/* =====================================================================
   Board of Trustees: portrait card with detail rows.
   ===================================================================== */

.hp-single--trustee { background: var(--hp-mist, #fbf6f5); padding-bottom: 5rem; }

.hp-trustee__hero {
	background: linear-gradient(140deg, #A40000 0%, #7a0000 55%, #E10D0D 100%);
	color: #fff;
	padding: 3.5rem 0 6rem;
	position: relative;
	overflow: hidden;
}
.hp-trustee__hero::before {
	content: "";
	position: absolute; right: -80px; top: -80px;
	width: 340px; height: 340px;
	background: radial-gradient(circle, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 70%);
	pointer-events: none;
}
.hp-trustee__hero .hp-crumbs a,
.hp-trustee__hero .hp-crumbs span { color: rgba(255,255,255,.85); }
.hp-trustee__hero .hp-crumbs a:hover { color: #fff; }

.hp-trustee__inner { position: relative; }

.hp-trustee__card {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 32px;
	background: #fff;
	color: var(--hp-ink, #1a0b0b);
	padding: 28px 32px;
	margin-top: 2rem;
	margin-bottom: -3.5rem; /* pulls the card down over the section below */
	border-radius: 18px;
	box-shadow: 0 24px 48px -20px rgba(0,0,0,.35);
	position: relative;
	z-index: 2;
}
@media (max-width: 720px) {
	.hp-trustee__card { grid-template-columns: 1fr; padding: 22px 24px; gap: 20px; }
}

.hp-trustee__portrait {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 14px;
	overflow: hidden;
	background: linear-gradient(135deg, #ffece9, #fbd6d3);
	display: flex; align-items: center; justify-content: center;
}
.hp-trustee__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-trustee__initials {
	font-family: var(--hp-head, Outfit), sans-serif;
	font-size: 4.5rem; font-weight: 800;
	color: var(--hp-primary, #A40000);
	letter-spacing: -.02em;
}
@media (max-width: 720px) { .hp-trustee__portrait { max-width: 180px; margin: 0 auto; } }

.hp-trustee__body { display: flex; flex-direction: column; gap: 6px; }
.hp-trustee__body .hp-eyebrow { color: var(--hp-primary, #E10D0D); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.hp-trustee__body h1 { margin: 4px 0 0; font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.15; color: var(--hp-ink, #1a0b0b); }

.hp-trustee__position { margin: 4px 0 0; color: #5a3a3a; font-size: 15px; font-weight: 500; }
.hp-trustee__affiliation { margin: 2px 0 0; color: #7a5959; font-size: 14px; }
.hp-trustee__reports { margin: 8px 0 0; color: #7a5959; font-size: 13px; }
.hp-trustee__reports a { color: var(--hp-primary, #A40000); text-decoration: none; font-weight: 600; }
.hp-trustee__reports a:hover { text-decoration: underline; }

.hp-trustee__meta {
	list-style: none; padding: 0; margin: 16px 0 0;
	display: flex; flex-direction: column; gap: 8px;
	border-top: 1px dashed var(--hp-line, #eadada); padding-top: 16px;
}
.hp-trustee__meta li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; }
.hp-trustee__meta li span { color: #7a5959; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.hp-trustee__meta li strong { color: var(--hp-ink, #1a0b0b); font-weight: 600; text-align: right; }

.hp-trustee__connect {
	display: flex; flex-wrap: wrap; gap: 8px;
	margin: 20px 0 0; padding-top: 20px;
	border-top: 1px dashed var(--hp-line, #eadada);
}
.hp-trustee__connect a {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 14px;
	background: var(--hp-mist, #fbf6f5);
	color: var(--hp-primary, #A40000);
	text-decoration: none;
	border-radius: 100px;
	font-size: 13px; font-weight: 600;
	border: 1px solid transparent;
	transition: all .15s ease;
}
.hp-trustee__connect a:hover {
	background: var(--hp-primary, #A40000);
	color: #fff;
}

/* Sub-trustees "Serving with" grid. */
.hp-trustee-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 20px;
	margin-top: 2rem;
}
.hp-trustee-card {
	background: #fff;
	border-radius: 14px;
	padding: 20px 22px;
	text-align: center;
	transition: transform .18s ease, box-shadow .18s ease;
	box-shadow: 0 6px 18px -12px rgba(0,0,0,.15);
}
.hp-trustee-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -16px rgba(164,0,0,.25); }
.hp-trustee-card img {
	width: 120px; height: 120px;
	border-radius: 50%; object-fit: cover;
	display: block; margin: 0 auto 14px;
}
.hp-trustee-card h3 { margin: 0 0 4px; font-size: 15px; }
.hp-trustee-card h3 a { color: var(--hp-ink, #1a0b0b); text-decoration: none; }
.hp-trustee-card h3 a:hover { color: var(--hp-primary, #A40000); }
.hp-trustee-card p { margin: 0; color: #7a5959; font-size: 13px; }

/* =====================================================================
   Gallery album single: proper photo journal, not just a wall.
   ===================================================================== */

.single-hapei_gallery .hp-page-hero {
	background: linear-gradient(160deg, #A40000 0%, #7a0000 50%, #4a0000 100%);
	color: #fff;
	padding: 4rem 0 3.5rem;
	position: relative;
	overflow: hidden;
	text-align: center;
}
.single-hapei_gallery .hp-page-hero::before {
	content: "";
	position: absolute; inset: 0;
	background: radial-gradient(ellipse at top, rgba(255,255,255,.14) 0%, transparent 60%);
	pointer-events: none;
}
.single-hapei_gallery .hp-page-hero .hp-wrap { position: relative; }
.single-hapei_gallery .hp-page-hero h1 { color: #fff; margin: 6px 0; font-size: clamp(2rem, 4vw, 3rem); }
.single-hapei_gallery .hp-page-hero__intro {
	display: inline-flex; align-items: center; gap: 8px;
	background: rgba(255,255,255,.15);
	padding: 6px 16px; border-radius: 100px;
	color: #fff; font-size: 13px; font-weight: 600;
	backdrop-filter: blur(6px);
	margin-top: 12px;
}
.single-hapei_gallery .hp-page-hero__intro::before {
	content: "📸";
}
.single-hapei_gallery .hp-crumbs a,
.single-hapei_gallery .hp-crumbs span { color: rgba(255,255,255,.85); }

/* Masonry-ish gallery grid replacing the old .hp-lightbox-grid look. */
.single-hapei_gallery .hp-single__body { max-width: 1240px; padding: 3rem 20px 4rem; }
.single-hapei_gallery .hp-lightbox-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-top: 24px;
}
@media (max-width: 900px) { .single-hapei_gallery .hp-lightbox-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .single-hapei_gallery .hp-lightbox-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .single-hapei_gallery .hp-lightbox-grid { grid-template-columns: 1fr; } }

.single-hapei_gallery .hp-lightbox-item {
	padding: 0; border: 0; background: transparent;
	position: relative; overflow: hidden; border-radius: 10px;
	cursor: zoom-in; aspect-ratio: 1 / 1;
	background: #f4eeed;
	transition: transform .2s ease, box-shadow .2s ease;
}
.single-hapei_gallery .hp-lightbox-item::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 60%, rgba(20,10,10,.35) 100%);
	opacity: 0; transition: opacity .2s ease;
	pointer-events: none;
}
.single-hapei_gallery .hp-lightbox-item:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -16px rgba(0,0,0,.35); }
.single-hapei_gallery .hp-lightbox-item:hover::after { opacity: 1; }
.single-hapei_gallery .hp-lightbox-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.single-hapei_gallery .hp-lightbox-item:hover img { transform: scale(1.06); }
.single-hapei_gallery .hp-lightbox-item.is-hidden { display: none; }

/* Full-screen photo viewer with prev/next/keyboard/swipe support. */
.hp-lightbox {
	position: fixed; inset: 0; z-index: 10000;
	background: rgba(15, 6, 6, .95);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: 30px 20px 80px;
}
.hp-lightbox[hidden] { display: none !important; }
.hp-lightbox__stage {
	position: relative;
	flex: 1;
	width: 100%;
	max-width: 1400px;
	display: flex; align-items: center; justify-content: center;
	min-height: 0;
}
.hp-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
	border-radius: 6px;
	box-shadow: 0 20px 60px rgba(0,0,0,.6);
	animation: hp-lightbox-in .25s ease;
}
@keyframes hp-lightbox-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.hp-lightbox__caption {
	position: absolute; left: 0; right: 0; bottom: -50px;
	text-align: center;
	color: rgba(255,255,255,.85);
	font-size: 14px;
	max-width: 800px; margin: 0 auto;
	padding: 0 20px;
}
.hp-lightbox__counter {
	position: fixed; top: 20px; left: 24px;
	color: rgba(255,255,255,.75);
	font-size: 13px; font-weight: 600;
	letter-spacing: .04em;
}
.hp-lightbox__close {
	position: fixed; top: 16px; right: 20px;
	width: 44px; height: 44px; border-radius: 50%;
	background: rgba(255,255,255,.12); color: #fff; border: 0;
	font-size: 26px; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background .15s ease, transform .15s ease;
}
.hp-lightbox__close:hover { background: rgba(255,255,255,.25); transform: scale(1.05); }
.hp-lightbox__nav {
	position: fixed; top: 50%; transform: translateY(-50%);
	width: 56px; height: 56px; border-radius: 50%;
	background: rgba(255,255,255,.12); color: #fff; border: 0;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; transition: all .15s ease;
	z-index: 2;
}
.hp-lightbox__nav:hover { background: rgba(255,255,255,.28); transform: translateY(-50%) scale(1.06); }
.hp-lightbox__nav[disabled] { opacity: .3; cursor: default; }
.hp-lightbox__nav[disabled]:hover { background: rgba(255,255,255,.12); transform: translateY(-50%); }
.hp-lightbox__nav svg { width: 28px; height: 28px; }
.hp-lightbox__nav--prev { left: 20px; }
.hp-lightbox__nav--next { right: 20px; }
@media (max-width: 640px) {
	.hp-lightbox__nav { width: 44px; height: 44px; }
	.hp-lightbox__nav svg { width: 22px; height: 22px; }
	.hp-lightbox__nav--prev { left: 10px; }
	.hp-lightbox__nav--next { right: 10px; }
	.hp-lightbox__caption { position: static; margin-top: 12px; bottom: auto; }
}

/* Thumbnail strip at the bottom of the viewer. */
.hp-lightbox__strip {
	display: flex; gap: 6px; overflow-x: auto;
	max-width: 100%; padding: 8px 20px;
	scrollbar-width: thin;
}
.hp-lightbox__strip::-webkit-scrollbar { height: 6px; }
.hp-lightbox__strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }
.hp-lightbox__strip-btn {
	flex: 0 0 auto;
	width: 60px; height: 60px;
	padding: 0; border: 2px solid transparent; border-radius: 6px;
	background: rgba(255,255,255,.08);
	overflow: hidden; cursor: pointer;
	transition: border-color .15s ease, opacity .15s ease;
	opacity: .55;
}
.hp-lightbox__strip-btn:hover { opacity: 1; }
.hp-lightbox__strip-btn.is-active { border-color: #fff; opacity: 1; }
.hp-lightbox__strip-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Gallery archive: give each album a proper card feel. */
.post-type-archive-hapei_gallery .hp-mosaic { margin-top: 2rem; }
.post-type-archive-hapei_gallery .hp-page-hero {
	background: linear-gradient(160deg, #A40000, #7a0000);
	color: #fff;
	padding: 3.5rem 0;
	text-align: center;
}
.post-type-archive-hapei_gallery .hp-page-hero h1 { color: #fff; margin: 6px 0; }
.post-type-archive-hapei_gallery .hp-page-hero__intro { color: rgba(255,255,255,.9); margin: 8px auto 0; max-width: 640px; }