/* Causes / appeals — front end AND editor canvas via enqueue_block_assets (see
   inc/causes.php), so the Query-Loop cards preview styled in the block editor. */

/* Grid — the archive Query Loop */
.mhm-causes .wp-block-post-template{align-items:stretch}
.mhm-causes .wp-block-post-template>li{display:flex}
.mhm-cause-card:hover{box-shadow:0 6px 18px rgba(17,24,39,.09)}

.mhm-causes .wp-block-post-template>li>.mhm-cause-card{width:100%}
/* Compiled block + shortcode grid (plinthworks/causes-grid, [mhm_causes]) — honours the Columns setting via --mhm-cols. */
.mhm-causes__grid{display:grid;grid-template-columns:repeat(var(--mhm-cols,3),minmax(0,1fr));gap:26px}
@media(max-width:900px){.mhm-causes__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.mhm-causes__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-cause-card:hover (L7, (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:
 *   L11 (0,1,0) [display] .mhm-causes__grid
 */
/* stylelint-disable-next-line no-descending-specificity */
.mhm-cause-card{position:relative;display:flex;flex-direction:column;height:100%;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,16px);overflow:hidden;transition:box-shadow .25s}

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

/* Category chip (shared card + single) */
.mhm-cause-card__chip,.mhm-cause__chip{display:inline-block;padding:4px 12px;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:var(--wp--preset--color--accent,#EFC940);color:var(--wp--preset--color--on-action,#333)}

/* Card body */
.mhm-cause-card__body{display:flex;flex-direction:column;gap:8px;padding:20px;flex:1}
.mhm-cause-card__body>*{margin:0}
.mhm-cause-card__title,.mhm-cause-card__body .wp-block-post-title{margin:0;font-size:1.2rem;line-height:1.25}
/*
 * 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-cause-card__photo a,.mhm-cause-card__photo img,.mhm-cause-card .wp-block-post-featured-image a,.mhm-cause-card .wp-block-post-featured-image img (L18, (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:
 *   L19 (0,1,0) [color] .mhm-cause-card__photo-empty
 *   L23 (0,1,0) [color] .mhm-cause-card__chip,.mhm-cause__chip
 */
/* stylelint-disable-next-line no-descending-specificity */
.mhm-cause-card__title a,.mhm-cause-card__body .wp-block-post-title a{color:inherit;text-decoration:none}
.mhm-cause-card__title a:hover,.mhm-cause-card__body .wp-block-post-title a:hover{color:var(--wp--preset--color--surface-deep,#343877)}
.mhm-cause-card__summary{margin:0;color:var(--wp--preset--color--contrast-2,#6F6F6F);font-size:.92rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mhm-cause-card__cta-area{margin-top:auto;display:flex}
.mhm-cause-card__more{margin-top:auto;align-self:flex-start;font-size:.86rem;font-weight:600;color:var(--wp--preset--color--surface-deep,#343877);text-decoration:none}
.mhm-cause-card__more:hover{text-decoration:underline}
.mhm-causes__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 cause */
.mhm-cause{max-width:820px;margin:0 auto;padding:clamp(32px,5vw,56px) clamp(20px,4vw,48px) clamp(48px,7vw,80px)}
.mhm-cause__meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 20px}
.mhm-cause__loc{color:var(--wp--preset--color--contrast-3,#727272);font-size:.9rem}

.mhm-cause__chip:empty,.mhm-cause__loc:empty,.mhm-cause-card__chip:empty{display:none}
.mhm-cause__story{color:var(--wp--preset--color--contrast-2,#6F6F6F);line-height:1.75;font-size:1.02rem}
.mhm-cause__story p{margin:0 0 1.1em}
.mhm-cause__actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:30px}
.mhm-cause__cta{display:inline-block;padding:14px 34px;border-radius:var(--mhm-button-radius,999px);border:1.5px solid transparent;background:var(--wp--preset--color--accent,#EFC940);color:var(--wp--preset--color--on-action,#333);font-weight:700;text-decoration:none;transition:filter .2s}
.mhm-cause__cta:hover{filter:brightness(1.08);color:var(--wp--preset--color--on-action,#333)}
.mhm-cause__cta--alt{background:transparent;color:var(--wp--preset--color--surface-deep,#343877);border-color:var(--wp--preset--color--surface-deep,#343877)}
.mhm-cause__cta--alt:hover{background:var(--wp--preset--color--accent,#EFC940);color:var(--wp--preset--color--on-action,#333);filter:none}

/* Category chip on the shortcode/block grid card.
   It used to sit inside .mhm-cause-card__photo, which is an aspect-ratio box with
   overflow:hidden — the img filled it, so the inline-block chip flowed past the
   bottom edge and got clipped. Present in the DOM, invisible on screen. It is now
   a sibling of the photo, overlaid on the card. The `position:relative` this
   overlay needs lives in the single .mhm-cause-card rule above; nothing between
   the two ever set `position` on the card, so folding it in changed no
   cascade. */
.mhm-cause-card>.mhm-cause-card__chip{position:absolute;top:12px;left:12px;z-index:2;text-decoration:none}
a.mhm-cause-card__chip{transition:filter .2s}
a.mhm-cause-card__chip:hover,a.mhm-cause-card__chip:focus-visible{filter:brightness(1.12);color:#fff}

/* Category filter (plinthworks/causes-filter) */
.mhm-causes__filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 28px}
.mhm-causes__filters-title{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--wp--preset--color--contrast-3,#727272);margin-right:4px}
.mhm-causes__filter-chip{display:inline-block;padding:7px 16px;border-radius:999px;border:1px solid var(--mhm-card-border-color,var(--wp--preset--color--base-3,#C8C8C8));background:transparent;color:var(--wp--preset--color--contrast-2,#6F6F6F);font-size:.84rem;font-weight:600;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.mhm-causes__filter-chip:hover,.mhm-causes__filter-chip:focus-visible{border-color:var(--wp--preset--color--surface-deep,#343877);color:var(--wp--preset--color--surface-deep,#343877)}
.mhm-causes__filter-chip.is-active{background:var(--wp--preset--color--accent,#EFC940);border-color:var(--wp--preset--color--accent,#EFC940);color:var(--wp--preset--color--on-action,#333)}

/* ==========================================================================
   Mobile: cause cards go horizontal — photo left, summary right.

   Same approach and the same reasoning as the students/elders grids (see the
   long note in students.css): scoped to the block wrapper because the archive
   Query Loop and the [mhm_causes] shortcode render the same card classes
   outside any block wrapper, and their surrounding layout is not ours.

   560px is where .mhm-causes__grid already drops to one column.
   ========================================================================== */
@media (max-width: 560px) {
	.wp-block-plinthworks-causes-grid .mhm-cause-card {
		flex-direction: row;
	}

	/* aspect-ratio is released so the 16/10 photo stretches to whatever height
	   the summary column ends up; object-fit: cover on the img does the crop. */
	.wp-block-plinthworks-causes-grid .mhm-cause-card__photo,
	.wp-block-plinthworks-causes-grid .mhm-cause-card .wp-block-post-featured-image {
		flex: 0 0 50%;
		aspect-ratio: auto;
		align-self: stretch;
	}

	.wp-block-plinthworks-causes-grid .mhm-cause-card__body {
		min-width: 0;
		padding: 14px;
	}

	/* Three lines of summary in a half-width column runs the card far taller
	   than the photo it sits beside. Two keeps the two halves in proportion. */
	.wp-block-plinthworks-causes-grid .mhm-cause-card__summary {
		-webkit-line-clamp: 2;
	}
}