/**
 * Thula Card block.
 *
 * The thula-blocks plugin owns Card structure and behaviour.
 * The theme owns the Card's visual presentation.
 */

/* -------------------------------------------------------------------------- */
/* Shared Card defaults                                                       */
/* -------------------------------------------------------------------------- */

:root :where(.thula-card) {
	--thula-card-padding-block: 1.75rem;
	--thula-card-padding-inline: 1.35rem;
}

/* -------------------------------------------------------------------------- */
/* Icon Card                                                                  */
/* -------------------------------------------------------------------------- */

:root :where(.thula-card--icon) {
	--thula-card-icon-heading-gap: 1rem;
	--thula-card-heading-text-gap: 0.625rem;

	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	height: 100%;
	padding:
		var(--thula-card-padding-block)
		var(--thula-card-padding-inline);

	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--medium-grey);
	border-radius: var(--wp--preset--border-radius--standard);
}

:root :where(.thula-card--icon) > :where(
	.wp-block-icon,
	.wp-block-heading,
	p,
	.wp-block-list
) {
	margin-block: 0;
}

:root :where(.thula-card--icon) > .wp-block-icon {
	margin-block-end: var(--thula-card-icon-heading-gap);
}

:root :where(.thula-card--icon) > .wp-block-heading {
	margin-block-end: var(--thula-card-heading-text-gap);
	color: var(--wp--preset--color--thula-blue);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 450;
	text-wrap: balance;
}

/* -------------------------------------------------------------------------- */
/* Horizontal Icon Card                                                       */
/* -------------------------------------------------------------------------- */

:root :where(.thula-card--icon-horizontal) {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	/* Implicit third row is created only for Paragraph + List Cards. */
	grid-auto-rows: auto;
	column-gap: clamp(0.75rem, 2vw, 1rem);
	row-gap: var(--thula-card-heading-text-gap);
	align-items: start;
	align-content: start;
}

:root :where(.thula-card--icon-horizontal) > .wp-block-icon {
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: start;
	margin-block-end: 0;
}

:root :where(.thula-card--icon-horizontal) > .wp-block-heading {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
	margin-block-end: 0;
}

:root :where(.thula-card--icon-horizontal) > :where(p, .wp-block-list) {
	grid-column: 2;
	grid-row: 2;
	min-width: 0;
}

/* -------------------------------------------------------------------------- */
/* Impact Card                                                                */
/* -------------------------------------------------------------------------- */

/**
 * Match the established Figures Banner Card treatment.
 *
 * Impact Cards use the same visual language as the existing homepage figures:
 * white background, light-grey 1.5px border, Standard radius, spacing-20
 * padding and centred content.
 */
:root :where(.thula-card--impact) {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	padding: var(--wp--preset--spacing--20);

	background-color: var(--wp--preset--color--white);
	border: 1.5px solid var(--wp--preset--color--light-grey);
	border-radius: var(--wp--preset--border-radius--standard);

	text-align: center;
}

/**
 * Impact Card controls its own internal spacing rather than inheriting Core
 * block margins.
 */
:root :where(.thula-card--impact) > :where(
	.wp-block-icon,
	.wp-block-heading,
	p,
	.wp-block-list
) {
	margin-block: 0;
}

/* -------------------------------------------------------------------------- */
/* Responsive Impact Card spacing                                             */
/* -------------------------------------------------------------------------- */

/**
 * Reduce Impact Card padding as available screen space becomes tighter.
 *
 * The Card Grid remains responsible for deciding how many columns can fit.
 * These adjustments simply give Impact Card content more usable width on
 * smaller tablet and phone-sized screens.
 */
@media (max-width: 782px) {
	:root :where(.thula-card--impact) {
		padding: 1.25rem;
	}
}

@media (max-width: 480px) {
	:root :where(.thula-card--impact) {
		padding: 1rem;
	}
}


/* -------------------------------------------------------------------------- */
/* Impact Figure                                                              */
/* -------------------------------------------------------------------------- */

/**
 * Give figures the same visual slot as Impact Icons.
 *
 * The x-large font preset is fluid, so the rendered figure becomes smaller
 * at narrower widths. A shared minimum height keeps the bottom edge of the
 * figure aligned with the bottom edge of an Icon in neighbouring Cards.
 *
 * The figure is anchored to the bottom of the slot rather than vertically
 * centred so mixed Figure/Icon Impact Grids remain visually aligned.
 */
:root :where(.thula-impact-card__figure) {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-height: 2.5rem;
	margin-block: 0 0.625rem;

	color: var(--wp--preset--color--thula-blue);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 450;
	line-height: 1.1;
}

/* -------------------------------------------------------------------------- */
/* Impact Icon                                                                */
/* -------------------------------------------------------------------------- */

/**
 * Use the same visual height and bottom spacing as Impact Figures so mixed
 * Impact Card treatments align consistently across a Grid.
 */
:root :where(.thula-card--impact-icon)
	> .thula-impact-card__icon {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-height: 2.7rem;
	margin-block: 0 0.625rem;

	color: var(--wp--preset--color--thula-blue);
}

/**
 * Keep the actual SVG at the established Impact Icon size.
 */
:root :where(.thula-card--impact-icon)
	> .thula-impact-card__icon svg {
	display: block;
	width: 2.7rem;
	height: 2.7rem;
}

/* -------------------------------------------------------------------------- */
/* Impact Heading                                                             */
/* -------------------------------------------------------------------------- */

/**
 * Match the medium-weight label underneath each homepage figure while using
 * an H3 for appropriate section/card heading semantics.
 */
:root :where(.thula-card--impact)
	> .thula-impact-card__heading {
	margin-block: 0;

	color: var(--wp--preset--color--thula-blue);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 450;

	text-wrap: balance;
}

/* -------------------------------------------------------------------------- */
/* Impact Description                                                         */
/* -------------------------------------------------------------------------- */

/**
 * Match the small separation used by the existing Figures Banner description.
 */
:root :where(.thula-card--impact)
	> .thula-impact-card__description {
	margin-block-start: 0.2rem;
	font-size: var(--wp--preset--font-size--base);
}

/* -------------------------------------------------------------------------- */
/* Card description lists                                                     */
/* -------------------------------------------------------------------------- */

/**
 * Preserve native list semantics and bullets, with consistent spacing.
 * Applies to vertical and horizontal Icon Cards, Impact Icon Cards and
 * Impact Figure Cards. Existing Paragraph Cards retain their styling.
 */
:root :where(.thula-card--icon, .thula-card--impact)
	> .wp-block-list {
	padding-inline-start: 1.35em;
	list-style-position: outside;
	text-align: start;
}

/**
 * Add breathing room only between successive bullet points.
 * This shared rule applies to both Icon Card layouts and both Impact types;
 * the horizontal Card's grid row spacing is a separate setting.
 * Approximately 7px to 10px as the viewport grows (at 16px root size).
 */
:root :where(.thula-card--icon, .thula-card--impact)
	> .wp-block-list > li + li {
	margin-block-start: clamp(
		0.4375rem,
		calc(0.25rem + 0.35vw),
		0.625rem
	);
}

/*
 * The List alone uses row two. When a Paragraph precedes it, move the List
 * into a third grid row so the two blocks never overlap.
 */
:root :where(.thula-card--icon-horizontal) > p + .wp-block-list {
	grid-row: 3;
}

/* Give a combined vertical Card a small gap between its text and bullets. */
:root :where(.thula-card--icon:not(.thula-card--icon-horizontal))
	> p + .wp-block-list {
	margin-block-start: 0.625rem;
}

/* Impact List retains description typography with left-aligned bullets. */
:root :where(.thula-card--impact)
	> .thula-impact-card__description.wp-block-list {
	align-self: stretch;
	margin-block-start: 0.2rem;
	font-size: var(--wp--preset--font-size--base);
}

/* Separate the two descriptions in combined Impact Cards. */
:root :where(.thula-card--impact)
	> p.thula-impact-card__description + .wp-block-list {
	margin-block-start: 0.625rem;
}