/* ---------- TITLE SECTION ---------- */
.tooltips.charity-amount-tooltips {
	margin-bottom: 0;
}

/* ---------- CATEGORY SECTION ---------- */
.charity-section {
	margin-top: 14px;
}

.charity-section:first-of-type h3 {
	margin-top: 0;
}

.charity-section__head {
	display: inline-block;
	font-family: 'Hey August', sans-serif;
	font-size: 34px;
	line-height: 1;
	margin: 44px 0 18px;
	transform: rotate(-1.5deg);
}

/* ---------- GRID ---------- */
.charity-grid {
	--gap: 22px;
	align-items: start;
	justify-content: center;
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(auto-fill, 220px);
	/**grid-template-columns: repeat(auto-fit,
			minmax(min(200px, calc((100% - var(--gap)) / 2)), 1fr));*/
	justify-content: start;
}

/* ---------- CARD ---------- */
/* Not clickable as a whole: selection goes through the "Choisir" button, so the
   card carries no hover lift. `position: relative` anchors the selected badge. */
.charity-card {
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
}

.charity-card__photo {
	aspect-ratio: 1.5 / 1;
	display: block;
	flex-shrink: 0;
	/* Torn bottom edge (same asset as the legacy charity card): the SVG is solid
	   on top and jagged along its bottom ~7%, so the photo dissolves into the card
	   in a ripped-paper line. `auto 100%` scales the mask to the photo height and
	   `repeat` tiles the teeth horizontally, keeping them a constant size whatever
	   the card width. */
	-webkit-mask: url("../../../../images/components/mask/charity-image-mask-ZbMguW-.svg") repeat;
	mask: url("../../../../images/components/mask/charity-image-mask-ZbMguW-.svg") repeat;
	-webkit-mask-size: auto 100%;
	mask-size: auto 100%;
	object-fit: cover;
	width: 100%;
}

.charity-card__photo--empty {
	display: block;
}

.charity-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 14px 16px 18px;
}

.charity-card__name {
	--visible-line-number: 2;
	display: -webkit-box;
	font-size: 15px;
	font-weight: 800;
	height: calc(var(--visible-line-number) * 19px);
	line-height: 19px;
	margin: 0 0 9px;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--visible-line-number);
}

.charity-card__desc {
	--visible-line-number: 4;
	display: -webkit-box;
	height: calc(var(--visible-line-number) * 18px);
	font-size: 12px;
	line-height: 18px;
	margin: 0 0 9px;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--visible-line-number);
}

.charity-card__more {
	align-self: flex-start;
	cursor: pointer;
	font-size: 11px;
	line-height: 16px;
	margin-bottom: 14px;
	max-width: 100%;
	overflow-wrap: anywhere;
	text-decoration: underline;
}

/* Primary "Choisir" button, pinned to the bottom of the card body. Visuals come
   from the .btn charte component; this only handles placement. */
.charity-card__choose {
	margin-top: auto;
}

/* ---------- SELECTION ---------- */
/* The real radio drives the selected state but stays out of the visual flow; the
   card's button (a <label for>) checks it. */
.charity-card__input {
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	width: 1px;
}

/* Selected: a raspberry ring hugging the card (replaces the resting drop shadow) and
   an accented name; the button flip is handled below. */
.charity-card:has(.charity-card__input:checked) {
	box-shadow: 0 0 0 3px var(--color-raspberry);
}

.charity-card:has(.charity-card__input:checked) .charity-card__name {
	color: var(--color-raspberry);
}

/* Keyboard focus on the (visually hidden) radio keeps a visible ring on its card. */
.charity-card:has(.charity-card__input:focus-visible) {
	outline: 2px solid var(--color-raspberry);
	outline-offset: 2px;
}

/* Selected badge over the photo, hidden until the card's radio is checked. */
.charity-card__check {
	align-items: center;
	background: var(--color-raspberry);
	border-radius: 50%;
	color: var(--color-white);
	display: flex;
	height: 26px;
	justify-content: center;
	opacity: 0;
	position: absolute;
	right: 10px;
	top: 10px;
	transform: scale(0.5);
	transition: opacity 150ms ease, transform 180ms cubic-bezier(.34, 1.56, .64, 1);
	width: 26px;
	z-index: 1;
}

.charity-card:has(.charity-card__input:checked) .charity-card__check {
	opacity: 1;
	transform: scale(1);
}

.charity-card__check svg {
	height: 14px;
	width: 14px;
}

/* Read-only (edition: the form is frozen while a cancellation is pending). The
   chosen card keeps full contrast; the others are muted, and the button no longer
   reacts (its radio is disabled anyway). */
.charity-card--disabled .charity-card__choose {
	pointer-events: none;
}

.charity-card--disabled:not(:has(.charity-card__input:checked)) {
	opacity: 0.55;
}

/* ---------- SELECT BUTTON STATES ---------- */
/* Idle = primary "Choisir" (from .btn). Selected = the same pill flipped to a soft
   nude fill with raspberry text and the "asso sélectionnée" label (the check lives
   in the corner badge) — only one of the two label spans shows at a time. The var
   overrides beat .btn:hover, so the selected pill stays nude on hover. */
.charity-card__choose-selected {
	display: none;
}

.charity-card:has(.charity-card__input:checked) .charity-card__choose {
	--btn-primary-color: var(--color-nude);
	--btn-secondary-color: var(--color-raspberry);
}

.charity-card:has(.charity-card__input:checked) .charity-card__choose-idle {
	display: none;
}

.charity-card:has(.charity-card__input:checked) .charity-card__choose-selected {
	display: inline;
}

/* ---------- CAROUSEL (narrow viewports) ---------- */
@media screen and (max-width: 875px) {

	/* Up to 875px each action section (Santé, Éducation, …) turns into a swipeable
	   carousel: its cards lay out in a single row that scrolls sideways with snap,
	   one card in view and the next one peeking to signal there's more. The
	   wrapping grid above only takes over past 875px, where enough cards fit to be
	   worth a grid. Note the two_part desktop layout still kicks in at 720px, so
	   between 720-875px the carousel runs inside the two-column desktop shell.
	   Scrolls in place thanks to the `two_part` wrapper clamp (min-width: 0), so it
	   never widens the page. */
	.charity-grid {
		grid-auto-flow: column;
		grid-auto-columns: min(80%, 244px);
		grid-template-columns: none;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.charity-grid::-webkit-scrollbar {
		display: none;
	}

	.charity-card {
		scroll-snap-align: start;
	}
}