/**
 * In Memoriam - front end. 1.6.0
 *
 * Restyled for the white card layout the site now uses: a light filter bar,
 * white portrait cards with the square portrait on black, gold year tags,
 * and the gold-ruled group headings the other pages carry.
 *
 * Reads the Brand Kit tokens with fallbacks; no variable is redefined here
 * (1.3.0 redefined each in terms of itself, which browsers treat as a cycle
 * and discard, so every colour in the block failed).
 */

.jmaa-mem { padding-block: 4px 32px; text-align: left; font-family: var(--jmaa-font, system-ui, sans-serif); color: var(--jmaa-ink, #121212); }
.elementor-widget-shortcode:has(.jmaa-mem) { width: 100%; }

/* ---------- Filter ------------------------------------------------------- */

.jmaa-mem-filter {
	background: var(--jmaa-off-white, #F6F6F7);
	border-left: 4px solid var(--jmaa-gold, #FFC20E);
	border-radius: 0 6px 6px 0;
	padding: 18px 22px 16px;
	margin: 0 0 26px;
}
.jmaa-mem-filter-row { display: flex; gap: 16px 22px; align-items: flex-end; flex-wrap: wrap; }
.jmaa-mem-filter-field { flex: 1 1 220px; min-width: 0; }
.jmaa-mem-filter-field:first-child { flex: 0 1 260px; }
.jmaa-mem-filter-actions { flex: 0 0 auto; display: flex; gap: 10px; }

.jmaa-mem-label {
	display: block;
	font-size: .74rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--jmaa-ink, #121212);
	margin-bottom: 6px;
}
.jmaa-mem-filter .jmaa-field {
	width: 100%;
	background: #fff;
	color: var(--jmaa-ink, #121212);
	border: 1px solid var(--jmaa-grey, #A7A9AC);
	border-radius: 4px;
	padding: 10px 13px;
	font: inherit;
	font-size: .96rem;
	line-height: 1.4;
}
.jmaa-mem-filter .jmaa-field::placeholder { color: #8a8d91; }
.jmaa-mem-filter select.jmaa-field {
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23121212' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 36px;
}
.jmaa-mem-filter .jmaa-field:focus {
	outline: none;
	border-color: var(--jmaa-gold-dark, #D99F00);
	box-shadow: 0 0 0 3px rgba(255, 194, 14, .3);
}
.jmaa-mem-jsnote { margin: 10px 0 0; font-size: .82rem; color: var(--jmaa-grey, #6b6d70); }
.jmaa-mem-hide-js { display: none; }

.jmaa-mem .jmaa-btn {
	display: inline-flex;
	align-items: center;
	padding: 11px 20px;
	border-radius: 3px;
	font: inherit;
	font-weight: 700;
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
}
.jmaa-mem .jmaa-btn--gold { background: var(--jmaa-black, #000); color: #fff; border-color: var(--jmaa-black, #000); }
.jmaa-mem .jmaa-btn--gold:hover { background: var(--jmaa-gold, #FFC20E); color: #111; border-color: var(--jmaa-gold, #FFC20E); }
.jmaa-mem .jmaa-btn--ghost { background: transparent; color: var(--jmaa-ink, #121212); border-color: var(--jmaa-grey, #A7A9AC); }
.jmaa-mem .jmaa-btn--ghost:hover { border-color: var(--jmaa-black, #000); }

/* ---------- Counts and empty states -------------------------------------- */

.jmaa-mem-count {
	font-size: .76rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--jmaa-gold-dark, #D99F00);
	margin: 0 0 20px;
}
.jmaa-mem-empty {
	background: var(--jmaa-off-white, #F6F6F7);
	border: 1px dashed var(--jmaa-grey, #A7A9AC);
	border-radius: 8px;
	padding: 30px 22px;
	text-align: center;
	color: var(--jmaa-grey, #6b6d70);
	margin: 0;
}

/* ---------- Year groups -------------------------------------------------- */

.jmaa-mem-group { margin-bottom: 44px; }
.jmaa-mem-group:last-child { margin-bottom: 0; }
.jmaa-mem-group-title,
.jmaa-mem .jmaa-section-title {
	font-size: 1.35rem;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	color: var(--jmaa-ink, #121212);
	margin: 0 0 8px;
	text-align: left;
}
.jmaa-mem .jmaa-rule { display: block; width: 64px; height: 4px; border-radius: 2px; background: var(--jmaa-gold, #FFC20E); margin: 0 0 20px; }

/* ---------- Cards -------------------------------------------------------- */

/* 1.4.1: every card in a row is the same height; the name holds two lines so
   the year tags line up; a long tribute is trimmed with a Read more. */
.jmaa-mem-grid { display: grid; grid-template-columns: repeat(var(--jmaa-cols, 4), minmax(0, 1fr)); gap: 20px; align-items: stretch; }

.jmaa-mem-card {
	height: 100%;
	background: #fff;
	border: 1px solid var(--jmaa-grey-light, #E4E5E7);
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
	transition: transform .2s ease, box-shadow .2s ease;
}
.jmaa-mem-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.10); }
/* 1.6.1: a card the name search rules out really goes (the display: flex
   above would otherwise override the hidden attribute). */
.jmaa-mem-card[hidden] { display: none; }
/* 1.6.1: an opened tribute grows its own card only. In that row the open
   card takes its own height and the other cards keep the height they share,
   lined up at the top (the script sets that height). */
.jmaa-mem-card.is-open,
.jmaa-mem-card.is-beside-open { align-self: start; height: auto; }

.jmaa-mem-photo-wrap { position: relative; aspect-ratio: 1 / 1; background: #0b0b0b; overflow: hidden; border-bottom: 4px solid var(--jmaa-gold, #FFC20E); }
.jmaa-mem-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 1.5.0: an entry without a photograph carries a "JMAA Remembers" card in a
   script face (Great Vibes, SIL Open Font Licence, bundled), with the crest
   faded to the right. */
@font-face {
	font-family: 'JMAA Script';
	src: url('../fonts/GreatVibes-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
.jmaa-mem-photo--none {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 8% 10%;
	background: radial-gradient(circle at 30% 40%, #2e2e2e 0%, #0a0a0a 70%);
	overflow: hidden;
}
.jmaa-mem-photo--none::before {
	content: '';
	position: absolute;
	top: 12%;
	right: -22%;
	width: 78%;
	aspect-ratio: 1 / 1;
	background: var(--jmaa-mem-crest, none) center / contain no-repeat;
	opacity: .18;
	filter: grayscale(1) brightness(1.6);
	pointer-events: none;
}
.jmaa-mem-photo--none::after {
	content: '';
	position: absolute;
	left: 10%;
	bottom: 12%;
	width: 26%;
	height: 3px;
	background: var(--jmaa-gold, #FFC20E);
	border-radius: 2px;
}
.jmaa-mem-remembers {
	position: relative;
	z-index: 1;
	font-family: 'JMAA Script', 'Brush Script MT', 'Segoe Script', cursive;
	font-weight: 400;
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem);
	line-height: 1.05;
	color: var(--jmaa-gold, #FFC20E);
	text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
	letter-spacing: .01em;
}

.jmaa-mem-body { padding: 14px 16px 18px; display: flex; flex-direction: column; flex: 1 1 auto; }
.jmaa-mem-name { font-size: 1.04rem; font-weight: 700; line-height: 1.3; min-height: 2.6em; margin: 0 0 8px; color: var(--jmaa-ink, #121212); text-align: left; }
.jmaa-mem-meta { margin: 0; font-size: .84rem; color: var(--jmaa-grey, #6b6d70); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.jmaa-mem-year {
	font-weight: 700; color: #111; background: var(--jmaa-gold, #FFC20E);
	border-radius: 3px; padding: 3px 8px; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
}
.jmaa-mem-sep { display: none; }
.jmaa-mem-tribute { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--jmaa-grey-light, #E4E5E7); font-size: .9rem; line-height: 1.6; color: #3a3d40; }
.jmaa-mem-tribute.is-clamped { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.jmaa-mem .jmaa-mem-more {
	margin-top: auto; padding-top: 10px; align-self: flex-start;
	background: none; border: 0; padding-inline: 0; font: inherit; font-size: .84rem; font-weight: 700;
	color: var(--jmaa-ink, #121212); text-decoration: underline; text-decoration-color: var(--jmaa-gold, #FFC20E); text-decoration-thickness: 2px; cursor: pointer;
}
.jmaa-mem .jmaa-mem-more:hover { color: var(--jmaa-gold-dark, #D99F00); }
.jmaa-mem-tribute p { margin: 0 0 .7em; }
.jmaa-mem-tribute p:last-child { margin-bottom: 0; }

@media (max-width: 1024px) { .jmaa-mem-grid { grid-template-columns: repeat(min(var(--jmaa-cols, 4), 3), minmax(0, 1fr)); } }
@media (max-width: 760px)  { .jmaa-mem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .jmaa-mem-filter-field:first-child { flex-basis: 100%; } }
@media (max-width: 460px)  { .jmaa-mem-grid { grid-template-columns: 1fr; } }

@media print {
	.jmaa-mem-filter, .jmaa-mem-count { display: none; }
	.jmaa-mem-card { break-inside: avoid; box-shadow: none; }
	.jmaa-mem-card:hover { transform: none; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
	.jmaa-mem-card { transition: none; }
	.jmaa-mem-card:hover { transform: none; }
}

/* ---------- "Remember a classmate" (1.6.0): small and quiet -------------- */

.jmaa-mem-list { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 12px; margin: 0 0 12px; font-size: .86rem; }
.jmaa-mem-list__note { color: var(--jmaa-grey, #6b6d70); }
.jmaa-mem .jmaa-mem-list__btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px; border: 1px solid var(--jmaa-grey, #A7A9AC); border-radius: 999px;
	color: var(--jmaa-ink, #121212); background: #fff; text-decoration: none;
	font-weight: 600; font-size: .82rem; line-height: 1.2;
	transition: border-color .15s ease, background .15s ease;
}
.jmaa-mem .jmaa-mem-list__btn span { font-weight: 700; color: var(--jmaa-gold-dark, #D99F00); }
.jmaa-mem .jmaa-mem-list__btn:hover { border-color: var(--jmaa-gold-dark, #D99F00); background: #FFF6D6; }
.jmaa-mem .jmaa-mem-list__btn:focus-visible { outline: 2px solid var(--jmaa-gold-dark, #D99F00); outline-offset: 2px; }
@media (max-width: 520px) { .jmaa-mem-list { justify-content: flex-start; } }
@media print { .jmaa-mem-list { display: none; } }