/* Content Type Engine — generic filterable card grid (block + [plinthworks_grid]). */

.pw-cptgrid.has-filters{display:grid;grid-template-columns:250px minmax(0,1fr);gap:30px;align-items:start}
@media(max-width:860px){.pw-cptgrid.has-filters{grid-template-columns:1fr}}
.pw-cptgrid{scroll-margin-top:100px}

/* Filter panel — sticky-centred on desktop, clamped inside its own group. */
.pw-cptgrid__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}
.pw-cptgrid.has-filters>.pw-cptgrid__filters{align-self:start;position:sticky;top:max(90px,calc(50vh - 220px));max-height:calc(100vh - 32px);overflow-y:auto}
@media(max-width:860px){.pw-cptgrid.has-filters>.pw-cptgrid__filters{position:static;top:auto;max-height:none;overflow:visible;flex-direction:row;flex-wrap:wrap;align-items:center}.pw-cptgrid__filters-title{width:100%}}
.pw-cptgrid__filters-title{margin:0 0 2px;font-weight:700;font-size:1.02rem;color:var(--wp--preset--color--contrast,#515266)}
.pw-cptgrid__filters input,.pw-cptgrid__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}
.pw-cptgrid__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}

.pw-cptgrid__filters input:focus,.pw-cptgrid__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)}
.pw-cptgrid__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}
.pw-cptgrid__filter-btn:hover{filter:brightness(1.08)}

/* ==========================================================================
   Horizontal filter bar — Filter layout: Horizontal.

   Mirrors the students/elders rules in students.css; see the long note there.
   This grid is the generic engine, so the number of controls is whatever the
   content type declares — flex:1 1 0 shares the row evenly however many there
   turn out to be, rather than assuming a count.
   ========================================================================== */
.pw-cptgrid.has-filters--h{display:block}

.pw-cptgrid__filters--h{
	flex-direction: row;
	flex-wrap:      nowrap;
	align-items:    center;
	gap:            10px;
	margin:         0 0 24px;
	position:       static;
	top:            auto;
	max-height:     none;
	overflow:       visible;
}

.pw-cptgrid__filters--h .pw-cptgrid__filters-title{display:none}

/*
 * stylelint no-descending-specificity: NOT reordered - doing so would
 * change rendering. Measured, not assumed.
 *
 * This rule is (0,1,1); stylelint wants it above
 *   .pw-cptgrid__filters input:focus,.pw-cptgrid__filters select:focus (L15, (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:
 *   L16 (0,1,0) [width] .pw-cptgrid__filter-btn
 */
/* stylelint-disable no-descending-specificity -- the selector list spans several lines, which disable-next-line cannot cover; see the note above. */
.pw-cptgrid__filters--h input,
.pw-cptgrid__filters--h select{
	width:     auto;
	flex:      1 1 0;
	min-width: 0;
}
/* stylelint-enable no-descending-specificity */

.pw-cptgrid__filters--h .pw-cptgrid__search{flex:2 1 0}

.pw-cptgrid__filters--h .pw-cptgrid__filter-btn{
	width:     auto;
	flex:      0 0 auto;
	min-width: 0;
}

/* A content type with many filterable fields makes an even longer row than the
   students grid, so the same 860px floor applies. */
@media(max-width:860px){
	.pw-cptgrid__filters--h{
		flex-direction: column;
		flex-wrap:      wrap;
		align-items:    stretch;
	}
	.pw-cptgrid__filters--h .pw-cptgrid__filters-title{display:block}
	.pw-cptgrid__filters--h input,
	.pw-cptgrid__filters--h select,
	.pw-cptgrid__filters--h .pw-cptgrid__filter-btn{
		width: 100%;
		flex:  0 0 auto;
	}
}

/* Sticky horizontal bar — must follow the rules above, which set
   position:static. z-index stays under the header's 100. See students.css. */
.pw-cptgrid__filters--h.is-sticky{
	position: sticky;
	top:      var(--pw-filter-top, 96px);
	z-index:  20;
}

@media(max-width:860px){
	.pw-cptgrid__filters--h.is-sticky{
		position: static;
		top:      auto;
		z-index:  auto;
	}
}

/* Grid + cards. */
.pw-cptgrid__grid{display:grid;grid-template-columns:repeat(var(--pw-cols,3),minmax(0,1fr));gap:24px}
@media(max-width:900px){.pw-cptgrid__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.pw-cptgrid__grid{grid-template-columns:minmax(0,1fr)}}
.pw-cptgrid__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%}
.pw-cptgrid__card:hover{box-shadow:0 6px 18px rgba(17,24,39,.09)}
.pw-cptgrid__media{position:relative;display:block;aspect-ratio:4/3;background:var(--wp--preset--color--base-2,#F9F7F6);overflow:hidden}
.pw-cptgrid__media img{width:100%;height:100%;object-fit:cover;display:block}
.pw-cptgrid__media-empty{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--wp--preset--color--base-2,#F9F7F6),var(--wp--preset--color--base-3,#C8C8C8))}
.pw-cptgrid__body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.pw-cptgrid__title{margin:0;font-size:1.1rem;line-height:1.3}
.pw-cptgrid__title a{color:inherit;text-decoration:none}
.pw-cptgrid__title a:hover{color:var(--wp--preset--color--surface-deep,#343877)}
.pw-cptgrid__excerpt{margin:0;color:var(--wp--preset--color--contrast-2,#6F6F6F);font-size:.9rem;line-height:1.5}
.pw-cptgrid__meta{margin:0;font-size:.82rem;color:var(--wp--preset--color--contrast-2,#6F6F6F)}
.pw-cptgrid__meta-label{font-weight:600;color:var(--wp--preset--color--contrast,#515266)}
/*
 * stylelint no-descending-specificity: NOT reordered - doing so would
 * change rendering. Measured, not assumed.
 *
 * This rule is (0,1,1); stylelint wants it above
 *   .pw-cptgrid__title a:hover (L103, (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:
 *   L104 (0,1,0) [color] .pw-cptgrid__excerpt
 *   L105 (0,1,0) [color] .pw-cptgrid__meta
 *   L106 (0,1,0) [color] .pw-cptgrid__meta-label
 */
/* stylelint-disable-next-line no-descending-specificity */
.pw-cptgrid__meta a{color:var(--wp--preset--color--surface-deep,#343877);text-decoration:none}
.pw-cptgrid__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;grid-column:1/-1}

/* ==========================================================================
   Mobile: content cards go horizontal — image left, details right.

   Same approach and reasoning as the students/elders grids (see the long note
   in students.css): scoped to the block wrapper, so the [plinthworks_grid]
   shortcode keeps the stacked card.

   This grid is the generic engine, so a card carries a variable number of meta
   rows and the details column height is unpredictable. That is exactly why the
   image is `align-self: stretch` with aspect-ratio released — the photo follows
   the details column rather than dictating the card height. A card rendered
   with images turned off has one child, and flex-direction has no effect.

   560px is where .pw-cptgrid__grid already drops to one column.
   ========================================================================== */
@media (max-width: 560px) {
	.wp-block-plinthworks-cpt-grid .pw-cptgrid__card {
		flex-direction: row;
	}

	.wp-block-plinthworks-cpt-grid .pw-cptgrid__media {
		flex: 0 0 50%;
		aspect-ratio: auto;
		align-self: stretch;
	}

	.wp-block-plinthworks-cpt-grid .pw-cptgrid__body {
		min-width: 0;
		padding: 12px;
	}

	/* The excerpt is trimmed to 24 words server-side, which is ~7 lines in a
	   half-width column and dwarfs the image beside it. This is the only place
	   the excerpt is clamped — at full width the 24 words are already short. */
	.wp-block-plinthworks-cpt-grid .pw-cptgrid__excerpt {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}