/* Sponsorship / students — loaded on the front end AND the editor canvas via enqueue_block_assets (see inc/students.php). */

/* scroll-margin-top is the anchor target for a full-refresh landing (keeps
   clear of the fixed header). */
.mhm-students.has-filters{display:grid;grid-template-columns:250px minmax(0,1fr);gap:30px;align-items:start;scroll-margin-top:100px}
@media(max-width:860px){.mhm-students.has-filters{grid-template-columns:1fr}}
.mhm-students__filters{display:flex;flex-direction:column;gap:12px;padding:22px 20px;background:var(--pw-surface,#fff);border:var(--mhm-card-border-width,1px) solid var(--mhm-card-border-color,var(--wp--preset--color--base-3,#C8C8C8));border-radius:16px}
@media(max-width:860px){.mhm-students__filters{position:static;flex-direction:row;flex-wrap:wrap;align-items:center}.mhm-students__filters-title{width:100%}}
.mhm-students__filters-title{margin:0 0 2px;font-weight:700;font-size:1.02rem;color:var(--wp--preset--color--contrast,#515266)}
.mhm-students__filters input,.mhm-students__filters select{width:100%;box-sizing:border-box;padding:11px 14px;border:var(--mhm-card-border-width,1px) solid var(--mhm-card-border-color,var(--wp--preset--color--base-3,#C8C8C8));border-radius:0;background:var(--pw-surface,#fff);font-size:.92rem;font-family:inherit;appearance:none;-webkit-appearance:none}
.mhm-students__filters select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a6a6a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}

.mhm-students__filters input:focus,.mhm-students__filters select:focus{outline:2px solid var(--wp--preset--color--surface-deep,#343877);outline-offset:1px;border-color:var(--wp--preset--color--surface-deep,#343877)}
.mhm-students__search{min-width:0}
.mhm-students__filter-btn{width:100%;box-sizing:border-box;padding:12px 24px;background:var(--wp--preset--color--accent,#EFC940);color:var(--wp--preset--color--on-action,#333);border:0;border-radius:var(--mhm-button-radius,999px);font-weight:600;cursor:pointer;font-family:inherit;transition:filter .2s}
.mhm-students__filter-btn:hover{filter:brightness(1.08)}
.mhm-students.has-filters>.wp-block-plinthworks-students-filter{align-self:start;position:sticky;top:96px}
@media(max-width:860px){.mhm-students.has-filters>.wp-block-plinthworks-students-filter{position:static;top:auto}}
/* Shortcode/compiled-block grid filter: vertically-centred sticky on desktop.
   Centred via the top offset (NOT a transform — a transform escapes the grid
   and overlays the sections above). Sticky keeps it clamped inside its own
   container, so it never leaves the grid. */
.mhm-students.has-filters>.mhm-students__filters{align-self:start;position:sticky;top:max(90px,calc(50vh - 220px));max-height:calc(100vh - 32px);overflow-y:auto}
@media(max-width:860px){.mhm-students.has-filters>.mhm-students__filters{position:static;top:auto;max-height:none;overflow:visible}}

/* ==========================================================================
   Horizontal filter bar — Filter layout: Horizontal on the grid and filter
   blocks. Every field on ONE row above the grid, not a sidebar beside it.

   Two independent pieces, because the filter has two homes:
     .has-filters--h  — on the GRID container, collapsing the 250px sidebar
                        column so the bar spans the full width.
     --h              — on the FORM itself, which is all the standalone
                        students-filter / elders-filter block needs.
   ========================================================================== */

/* Sidebar column collapses; the bar is a block above the cards. */
.mhm-students.has-filters--h{display:block}

.mhm-students__filters--h{
	flex-direction: row;
	/* nowrap is the whole point: "a single row" means fields compress rather
	   than drop to a second line. min-width:0 below is what lets them. */
	flex-wrap:      nowrap;
	align-items:    center;
	gap:            10px;
	margin:         0 0 24px;
	/* The vertical bar is a sticky sidebar. A full-width row has nothing to
	   stick to and would hang over the cards, so all of that is undone. */
	position:       static;
	top:            auto;
	max-height:     none;
	overflow:       visible;
}

/* "Find a child" would occupy a slot in a row that is meant to be all fields.
   The form keeps its aria-label, so the control group is still named for
   screen readers. Turning it back on from Appearance re-adds it to the row. */
.mhm-students__filters--h .mhm-students__filters-title{display:none}

/* flex:1 1 0 shares the row evenly; min-width:0 overrides the auto minimum
   that would otherwise stop a select shrinking below its longest option and
   push the row wider than its container. */
/*
 * stylelint no-descending-specificity: NOT reordered - doing so would
 * change rendering. Measured, not assumed.
 *
 * This rule is (0,1,1); stylelint wants it above
 *   .mhm-students__filters input:focus,.mhm-students__filters select:focus (L13, (0,2,1))
 *
 * Moving it up would jump it over these rules, which share a
 * declared property and are not outranked on specificity, so the
 * last-one-wins outcome would flip:
 *   L14 (0,1,0) [min-width] .mhm-students__search
 *   L15 (0,1,0) [width] .mhm-students__filter-btn
 */
/* stylelint-disable no-descending-specificity -- the selector list spans several lines, which disable-next-line cannot cover; see the note above. */
.mhm-students__filters--h input,
.mhm-students__filters--h select{
	width:     auto;
	flex:      1 1 0;
	min-width: 0;
}
/* stylelint-enable no-descending-specificity */

/* The search earns more of the row than a two-word dropdown. */
.mhm-students__filters--h .mhm-students__search{flex:2 1 0}

/* The button is as wide as its label, never a stretched sixth of the row. */
.mhm-students__filters--h .mhm-students__filter-btn{
	width:     auto;
	flex:      0 0 auto;
	min-width: 0;
}

/* Below 860px a nowrap row of six controls is unusable, so the horizontal bar
   becomes the vertical one. Same breakpoint the sidebar already collapses at. */
@media(max-width:860px){
	.mhm-students__filters--h{
		flex-direction: column;
		flex-wrap:      wrap;
		align-items:    stretch;
	}
	.mhm-students__filters--h .mhm-students__filters-title{display:block}
	.mhm-students__filters--h input,
	.mhm-students__filters--h select,
	.mhm-students__filters--h .mhm-students__filter-btn{
		width: 100%;
		flex:  0 0 auto;
	}
}

/* ==========================================================================
   Sticky horizontal bar — "Keep the bar visible while scrolling".

   MUST come after the block above, which sets position:static on the
   horizontal bar. Same specificity, so source order is what decides.

   Clearing the header is the whole point. The header is
   `position:sticky; top:0; z-index:100` (plinthworks.css), so the bar needs an
   offset AND a z-index below 100 — otherwise it either hides under the header
   or covers it. 96px matches the offset the vertical sidebar already uses, and
   --pw-filter-top makes it tunable per block for a taller header, because a
   hardcoded guess is exactly how the bar ends up overlapping.

   No shadow: the bar already carries a full border and an opaque background,
   which is enough separation from the cards passing underneath.
   ========================================================================== */
.mhm-students__filters--h.is-sticky{
	position: sticky;
	top:      var(--pw-filter-top, 96px);
	z-index:  20;
}

/* The standalone filter block sticks at the WRAPPER, not the form: its wrapper
   is only as tall as the form, so a sticky form inside would have no distance
   to travel. See blocks/students-filter/render.php. */
:is(.wp-block-plinthworks-students-filter, .wp-block-plinthworks-elders-filter).pw-filter-sticky{
	position: sticky;
	top:      var(--pw-filter-top, 96px);
	z-index:  20;
}

/* Desktop only. Pinning a stacked six-field form to the top of a phone screen
   would leave almost nothing of the grid visible. */
@media(max-width:860px){
	.mhm-students__filters--h.is-sticky,
	:is(.wp-block-plinthworks-students-filter, .wp-block-plinthworks-elders-filter).pw-filter-sticky{
		position: static;
		top:      auto;
		z-index:  auto;
	}
}

/* Grid + card */
.mhm-students .wp-block-post-template{align-items:stretch}
.mhm-students .wp-block-post-template>li{display:flex}
.mhm-student-card:hover{box-shadow:0 6px 18px rgba(17,24,39,.09)}

.mhm-students .wp-block-post-template>li>.mhm-student-card{width:100%}
/* Compiled block + shortcode grid (plinthworks/students-grid, [mhm_students], and the elder grid which reuses these classes) — honours the block's Columns setting via --mhm-cols, wrapping down on smaller screens. */
.mhm-students__grid{display:grid;grid-template-columns:repeat(var(--mhm-cols,4),minmax(0,1fr));gap:24px}
@media(max-width:900px){.mhm-students__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.mhm-students__grid{grid-template-columns:minmax(0,1fr)}}
/*
 * stylelint no-descending-specificity: NOT reordered - doing so would
 * change rendering. Measured, not assumed.
 *
 * This rule is (0,1,0); stylelint wants it above
 *   .mhm-student-card:hover (L143, (0,2,0))
 *
 * Moving it up would jump it over these rules, which share a
 * declared property and are not outranked on specificity, so the
 * last-one-wins outcome would flip:
 *   L147 (0,1,0) [display] .mhm-students__grid
 */
/* stylelint-disable-next-line no-descending-specificity */
.mhm-student-card{background:var(--pw-surface,#fff);border:var(--mhm-card-border-width,1px) solid var(--mhm-card-border-color,var(--wp--preset--color--base-3,#C8C8C8));border-radius:var(--mhm-card-radius,14px);overflow:hidden;transition:box-shadow .25s;display:flex;flex-direction:column;height:100%}

/* Photo (shorter, square) */
.mhm-student-card__photo,.mhm-student-card .wp-block-post-featured-image{position:relative;margin:0;aspect-ratio:1/1;background:var(--wp--preset--color--base-2,#F9F7F6);overflow:hidden}
.mhm-student-card__photo a,.mhm-student-card__photo img,.mhm-student-card .wp-block-post-featured-image a,.mhm-student-card .wp-block-post-featured-image img{display:block;width:100%;height:100%;object-fit:cover}
.mhm-student-card__photo-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--wp--preset--color--contrast-3,#727272)}
.mhm-student-card__photo-empty i,.mhm-student-card__photo-empty svg{width:48px;height:48px}

/* Body — tight spacing */
.mhm-student-card__body{padding:14px 15px 15px;display:flex;flex-direction:column;gap:3px;flex:1}
.mhm-student-card__body>*{margin:0}
.mhm-student-card__name,.mhm-student-card__body .wp-block-post-title{margin:0;font-size:1.05rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/*
 * stylelint no-descending-specificity: NOT reordered - doing so would
 * change rendering. Measured, not assumed.
 *
 * This rule is (0,2,1); stylelint wants it above
 *   .mhm-student-card__photo a,.mhm-student-card__photo img,.mhm-student-card .wp-block-post-featured-image a,.mhm-student-card .wp-block-post-featured-image img (L154, (0,2,1))
 *
 * Moving it up would jump it over these rules, which share a
 * declared property and are not outranked on specificity, so the
 * last-one-wins outcome would flip:
 *   L155 (0,1,0) [color] .mhm-student-card__photo-empty
 */
/* stylelint-disable-next-line no-descending-specificity */
.mhm-student-card__name a,.mhm-student-card__body .wp-block-post-title a{color:inherit;text-decoration:none}
.mhm-student-card__name a:hover,.mhm-student-card__body .wp-block-post-title a:hover{color:var(--wp--preset--color--surface-deep,#343877)}
.mhm-student-card__meta{margin:0;color:var(--wp--preset--color--contrast-2,#6F6F6F);font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mhm-student-card__code{margin:0;font-size:.72rem;font-weight:700;letter-spacing:.08em;color:var(--wp--preset--color--contrast-3,#727272)}
.mhm-student-card__profile{margin:2px 0 0;font-size:.85rem;color:var(--wp--preset--color--contrast-2,#6F6F6F);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* CTA area (button for waiting / tag for sponsored), pinned to the bottom */
.mhm-student-card__cta-area{display:contents}
.mhm-student-card__cta,.mhm-student-card__body .wp-block-button__link{margin-top:auto;display:block;text-align:center;width:100%;box-sizing:border-box;padding:9px 16px;background:transparent;color:var(--wp--preset--color--surface-deep,#343877);border:1.5px solid var(--wp--preset--color--surface-deep,#343877);border-radius:var(--mhm-button-radius,999px);font-weight:600;font-size:.88rem;text-decoration:none;transition:background .2s,color .2s}
.mhm-student-card__cta:hover,.mhm-student-card__body .wp-block-button__link:hover{background:var(--wp--preset--color--accent,#EFC940);color:var(--wp--preset--color--on-action,#333)}
.mhm-student-card__body .wp-block-buttons{margin-top:auto}
.mhm-student-card__body .wp-block-button{width:100%}
.mhm-student-card__status-tag{margin-top:auto;align-self:flex-start;padding:4px 12px;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:#d6e8dd;color:#1e4531}

.mhm-students__empty{padding:48px;text-align:center;color:var(--wp--preset--color--contrast-2,#6F6F6F);background:var(--wp--preset--color--base-2,#F9F7F6);border-radius:16px}

/* Single-child profile + hero (unchanged) */
.mhm-hero{background-color:var(--wp--preset--color--accent,#EFC940)}
.mhm-hero .wp-block-group{max-width:1080px;margin-inline:auto;width:100%;box-sizing:border-box;padding:0 clamp(20px,4vw,48px) clamp(26px,4vw,42px)}
.mhm-hero .wp-block-post-title{margin:0}
.mhm-profile{max-width:1080px;margin:0 auto;padding:clamp(32px,5vw,56px) clamp(20px,4vw,48px) clamp(48px,7vw,80px)}
.mhm-profile__actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.mhm-profile__layout{display:grid;grid-template-columns:minmax(240px,400px) 1fr;gap:clamp(24px,4vw,56px);align-items:start}
@media(max-width:720px){.mhm-profile__layout{grid-template-columns:1fr}}
.mhm-profile__photo{border-radius:var(--mhm-photo-radius,16px);overflow:hidden;background:var(--wp--preset--color--base-2,#F9F7F6);border:var(--mhm-card-border-width,1px) solid var(--mhm-card-border-color,var(--wp--preset--color--base-3,#C8C8C8))}
/*
 * stylelint no-descending-specificity: NOT reordered - doing so would
 * change rendering. Measured, not assumed.
 *
 * This rule is (0,1,1); stylelint wants it above
 *   .mhm-student-card__photo a,.mhm-student-card__photo img,.mhm-student-card .wp-block-post-featured-image a,.mhm-student-card .wp-block-post-featured-image img (L154, (0,2,1))
 *
 * Moving it up would jump it over these rules, which share a
 * declared property and are not outranked on specificity, so the
 * last-one-wins outcome would flip:
 *   L155 (0,1,0) [display, height] .mhm-student-card__photo-empty
 *   L156 (0,1,1) [width, height] .mhm-student-card__photo-empty i,.mhm-student-card__photo-empty svg
 *   L159 (0,1,0) [display] .mhm-student-card__body
 *   L166 (0,1,0) [display] .mhm-student-card__profile
 *   ...and 3 more
 */
/* stylelint-disable-next-line no-descending-specificity */
.mhm-profile__photo img{width:100%;height:auto;display:block}
.mhm-profile__photo .mhm-student-card__photo-empty{min-height:300px}
.mhm-profile__status{display:inline-block;margin:0 0 22px;padding:5px 14px;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.mhm-profile__status--waiting{background:#f6e7c4;color:#6b5312}
.mhm-profile__status--sponsored{background:#d6e8dd;color:#1e4531}
.mhm-profile__facts{margin:0 0 24px;padding:0;border-top:1px solid var(--wp--preset--color--base-3,#C8C8C8)}
.mhm-profile__facts div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:11px 2px;border-bottom:1px solid var(--wp--preset--color--base-3,#C8C8C8)}
.mhm-profile__facts dt{margin:0;font-size:.82rem;color:var(--wp--preset--color--contrast-3,#727272);font-weight:500}
.mhm-profile__facts dd{margin:0;font-weight:600;color:var(--wp--preset--color--contrast,#515266);text-align:right}
/* Editable facts built from group + paragraph blocks (bindings) */
.mhm-profile__fact-label{margin:0;font-size:.82rem;color:var(--wp--preset--color--contrast-3,#727272);font-weight:500}
.mhm-profile__fact-value{margin:0;font-weight:600;color:var(--wp--preset--color--contrast,#515266);text-align:right}
.mhm-profile__fact:has(.mhm-profile__fact-value:empty){display:none}
.mhm-profile__story-title{margin:0 0 12px;font-size:1.2rem;font-weight:700;color:var(--wp--preset--color--contrast,#515266)}
.mhm-profile__story{color:var(--wp--preset--color--contrast-2,#6F6F6F);line-height:1.7;font-size:1rem;margin:0 0 26px}
.mhm-profile__cta{display:inline-block;padding:14px 34px;background:var(--wp--preset--color--accent,#EFC940);color:var(--wp--preset--color--on-action,#333);font-weight:700;text-decoration:none;border-radius:var(--mhm-button-radius,999px);border:1.5px solid transparent;transition:filter .2s}
.mhm-profile__cta:hover{filter:brightness(1.08);color:var(--wp--preset--color--on-action,#333)}
.mhm-profile__cta--alt{background:transparent;color:var(--wp--preset--color--surface-deep,#343877);border:1.5px solid var(--wp--preset--color--surface-deep,#343877)}
.mhm-profile__cta--alt:hover{background:var(--wp--preset--color--accent,#EFC940);color:var(--wp--preset--color--on-action,#333);filter:none}
.mhm-profile__memo{margin:12px 0 0;font-size:.85rem;color:var(--wp--preset--color--contrast-3,#727272)}
.mhm-profile__sponsored-note{margin:0 0 14px;color:var(--wp--preset--color--contrast-2,#6F6F6F)}

/* ==========================================================================
   Mobile: student AND elder cards go horizontal — photo left, details right.

   Still scoped to the block wrappers rather than `.mhm-student-card` itself.
   The elders grid renders the SAME markup (.mhm-students__grid >
   .mhm-student-card, see inc/elders.php), so there is no class inside the card
   that tells the two apart — the wrapper is the only handle either has. Both
   grids now want the treatment, so both wrappers are listed.

   Deliberately NOT extended to the [mhm_students] / [mhm_elders] shortcodes or
   the archive Query Loops: neither renders inside a block wrapper, and both are
   laid out by page content we do not control. `:is()` keeps the specificity at
   one class, exactly as the single-wrapper selector had it.

   560px is where the grid already drops to a single column, so this is exactly
   the point at which a tall stacked card starts wasting the width.
   ========================================================================== */
@media (max-width: 560px) {
	:is(.wp-block-plinthworks-students-grid, .wp-block-plinthworks-elders-grid) .mhm-student-card {
		flex-direction: row;
	}

	/* Half the card, so the photo reads as a proper picture rather than a
	   thumbnail strip. `flex: 0 0 50%` (not `width`) keeps it from shrinking
	   when the name or meta line is long. aspect-ratio is released and the
	   photo stretches, so it fills the card's full height however tall the
	   details column ends up — object-fit: cover on the img handles the crop. */
	:is(.wp-block-plinthworks-students-grid, .wp-block-plinthworks-elders-grid) .mhm-student-card__photo,
	:is(.wp-block-plinthworks-students-grid, .wp-block-plinthworks-elders-grid) .mhm-student-card .wp-block-post-featured-image {
		flex: 0 0 50%;
		aspect-ratio: auto;
		align-self: stretch;
	}

	/* min-width:0 is what lets the existing text-overflow:ellipsis rules work:
	   a flex item defaults to min-width:auto and refuses to shrink below its
	   content, which would push the name and meta line out of the card.
	   Padding is even and a little tighter than the stacked card, because the
	   details now only get half the width. */
	:is(.wp-block-plinthworks-students-grid, .wp-block-plinthworks-elders-grid) .mhm-student-card__body {
		min-width: 0;
		padding: 12px;
	}

	/* The button is full-width in the stacked card; beside a photo it should
	   only be as wide as its label. Padding and size are deliberately left
	   alone so the Appearance → Button settings still win. */
	:is(.wp-block-plinthworks-students-grid, .wp-block-plinthworks-elders-grid) .mhm-student-card__cta,
	:is(.wp-block-plinthworks-students-grid, .wp-block-plinthworks-elders-grid) .mhm-student-card__body .wp-block-button__link {
		width: auto;
		align-self: flex-start;
	}

	:is(.wp-block-plinthworks-students-grid, .wp-block-plinthworks-elders-grid) .mhm-student-card__body .wp-block-button {
		width: auto;
	}
}

/* "Read more →" — a text link under the excerpt, never a button.

   It had no rule of its own, so it was picking up whatever the Appearance →
   Button settings emitted (border, radius, padding) and rendering as a bordered
   box around body text. It is out of that group now (inc/grid-appearance.php);
   these are its own, deliberately minimal styles. align-self keeps the link the
   width of its text — .mhm-student-card__body is a column flex container, so
   without it the anchor stretches the full card width. */
.mhm-student-card__more {
	align-self: flex-start;
	margin: 2px 0 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: .82rem;
	font-weight: 600;
	color: var(--wp--preset--color--surface-deep, #343877);
	text-decoration: none;
}
.mhm-student-card__more:hover {
	text-decoration: underline;
}