/* =========================================================================
 * SWGS Alumni — stylesheet
 *
 * This is a bespoke, single-site plugin (South Wilts Grammar School), so the
 * finished SWGS styling lives here in the plugin rather than in a separate
 * child-theme override. This file is the master copy.
 *
 * NOTE ON UPDATES: reinstalling the plugin from an OLDER zip would overwrite
 * this file. Treat the latest zip as the source of truth, and make later tweaks
 * by editing this file (do not re-flash an earlier build over it).
 *
 * The brand colours are CSS variables on .faces-wrap:
 *   --brand  SWGS lighter green  (links, roles, accents, buttons)
 *   --ink    SWGS darker green   (names / headings)
 *   --staff  gold                (former-staff highlight)
 * Class names are stable and used by the PHP output — don't rename them.
 * ====================================================================== */

.faces-wrap {
	--brand:#068141;   /* SWGS lighter green */
	--ink:#074820;     /* SWGS darker green */
	--staff:#b8860b;   /* gold: former-staff highlight */
	font-family:inherit;
}

/* -------------------------------------------------------------------------
 * 1. Contribute buttons
 * ---------------------------------------------------------------------- */
.faces-contribute { display:flex; flex-wrap:wrap; gap:.75rem; margin:0 0 1.75rem; }
.faces-contribute__btn {
	display:inline-block; padding:.7rem 1.5rem; border-radius:8px;
	background:var(--brand); color:#fff; text-decoration:none; font-weight:600; font-size:.95rem;
	transition:filter .15s ease;
}
.faces-contribute__btn:hover { filter:brightness(1.08); }
.faces-contribute__btn--staff { background:var(--staff); }

/* -------------------------------------------------------------------------
 * 2. Controls (live search + filters)
 *    Hidden until faces.js adds .faces--js, so no-JS users get a clean grid
 *    rather than inert controls.
 * ---------------------------------------------------------------------- */
.faces-controls { display:none; flex-wrap:wrap; gap:.75rem; margin:0 0 2rem; }
.faces--js .faces-controls { display:flex; }

.faces-search,
.faces-filter-type,
.faces-filter-decade {
	padding:.65rem .9rem; border:1px solid #d8e2dc; border-radius:10px; background:#fff; font-size:.95rem;
	transition:border-color .15s ease, box-shadow .15s ease;
}
.faces-search { flex:1 1 220px; min-width:180px; }
.faces-search:focus,
.faces-filter-type:focus,
.faces-filter-decade:focus {
	outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(6,129,65,.15);
}

/* -------------------------------------------------------------------------
 * 3. Card grid
 *    Column count is driven by the shortcode's `columns` attribute via
 *    --faces-cols, e.g. [alumni columns="5"]. Default 4.
 * ---------------------------------------------------------------------- */
.faces-grid { display:grid; grid-template-columns:repeat(var(--faces-cols, 4), 1fr); gap:1.75rem; }
@media (max-width:1100px){ .faces-grid { grid-template-columns:repeat(3, 1fr); } }
@media (max-width:700px){ .faces-grid { grid-template-columns:repeat(2, 1fr); } }

.faces-card {
	position:relative; background:#fff; border:1px solid #e7ece9; border-radius:14px; overflow:hidden;
	box-shadow:0 4px 14px rgba(7,72,32,.06); transition:transform .18s ease, box-shadow .18s ease;
}
.faces-card:hover { transform:translateY(-5px); box-shadow:0 16px 32px rgba(7,72,32,.14); }
.faces-card[hidden] { display:none; }

.faces-card__link { display:flex; flex-direction:column; height:100%; text-decoration:none; color:inherit; }

/* Green accent bar that slides in across the top on hover */
.faces-card__link::before {
	content:""; position:absolute; left:0; top:0; right:0; height:4px; z-index:1;
	background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
.faces-card:hover .faces-card__link::before { transform:scaleX(1); }

/* Photo / placeholder area. The silhouette SVG is transparent, so this soft
   branded tint shows behind it and empty cards read as intentional. */
.faces-card__media {
	position:relative; display:block; aspect-ratio:1 / 1; overflow:hidden;
	background:linear-gradient(160deg,#f1f6f3 0%,#e2ebe6 100%);
}
.faces-card__photo { width:100%; height:100%; object-fit:cover; display:block; }

/* Type label: a slim full-width band across the bottom of the photo. Green for
   students, gold for former staff — the colour does the differentiation. */
.faces-card__type {
	position:absolute; left:0; right:0; bottom:0;
	text-align:center; padding:.4rem .5rem;
	font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
	color:#fff; background:var(--brand);
}

.faces-card__body { display:flex; flex-direction:column; gap:.3rem; padding:1.1rem 1.15rem 1.25rem; }
.faces-card__name { font-size:1.1rem; font-weight:600; line-height:1.25; color:var(--ink); }
.faces-card__role { font-size:.9rem; font-weight:600; color:var(--brand); }
.faces-card__year { font-size:.82rem; color:#7a8a82; letter-spacing:.02em; }

/* Former-staff cards are visually differentiated (the reference highlights
   staff). Driven by the faces-card--staff class, which comes from the term
   slug, so the Staff term's slug must be "staff". */
.faces-card--staff { border-color:var(--staff); box-shadow:0 4px 14px rgba(184,134,11,.18); }
.faces-card--staff .faces-card__type { background:var(--staff); }

/* -------------------------------------------------------------------------
 * 4. Empty / no-results states
 * ---------------------------------------------------------------------- */
.faces-empty,
.faces-noresults {
	grid-column:1 / -1; text-align:center; padding:3rem 1rem; color:#6a7a72; font-size:1.05rem;
}
.faces-noresults { margin:0; }

/* -------------------------------------------------------------------------
 * 5. Single-person detail block ([alumni_details])
 * ---------------------------------------------------------------------- */
.faces-single { display:flex; flex-wrap:wrap; gap:1.75rem; align-items:flex-start; margin:0 0 1.5rem; }
.faces-single__media {
	flex:0 0 240px; max-width:240px; border-radius:14px; overflow:hidden;
	background:linear-gradient(160deg,#f1f6f3 0%,#e2ebe6 100%);
	box-shadow:0 4px 14px rgba(7,72,32,.08);
}
.faces-single__media img { width:100%; height:auto; display:block; }
.faces-single__meta { flex:1 1 200px; }
.faces-single__type {
	display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
	color:#fff; background:var(--brand); padding:.3rem .65rem; border-radius:999px; margin:0 0 .6rem;
}
.faces-single__role { margin:0 0 .35rem; font-size:1.15rem; font-weight:600; color:var(--ink); }
.faces-single__year { margin:0; font-size:1.05rem; color:#5a6b62; }