/*
 * Card grids for The Supported Living Hub.
 * Every selector is prefixed .slh- so nothing leaks into Elementor's own widgets.
 */

.slh-cards {
	--slh-cols: 4;
	--slh-gap: 18px;
	--slh-navy: #002040;
	--slh-body: #5d6169;
	--slh-hairline: #e3e8ec;
	--slh-link: #1a3a8f;
	--slh-radius: 10px;

	display: grid;
	grid-template-columns: repeat(var(--slh-cols), minmax(0, 1fr));
	gap: var(--slh-gap);
	align-items: stretch;
}

/* Accents tint the disc, the ticks and the link together. */
.slh-accent--teal   { --slh-accent: #2e888e; --slh-accent-soft: #e6f2f2; }
.slh-accent--orange { --slh-accent: #f37c1b; --slh-accent-soft: #fdeede; }
.slh-accent--purple { --slh-accent: #8b5cb8; --slh-accent-soft: #f1eaf8; }
.slh-accent--green  { --slh-accent: #4f9d69; --slh-accent-soft: #e8f3ec; }
.slh-accent--navy   { --slh-accent: #002040; --slh-accent-soft: #e6ebf0; }

.slh-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	min-width: 0; /* flex/grid children refuse to shrink below content without this */
	padding: 20px 16px;
	text-align: center;
	background: #fff;
	border: 1px solid var(--slh-hairline);
	border-radius: var(--slh-radius);
	box-shadow: 0 1px 3px rgb(0 32 64 / 6%);
}

.slh-cards--plain .slh-card {
	background: none;
	border: 0;
	box-shadow: none;
}

.slh-card__disc {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	color: #fff;
	background: var(--slh-accent);
}

.slh-card__glyph { color: var(--slh-accent); line-height: 0; }

.slh-card__title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.22;
	color: var(--slh-navy);
}

.slh-card__media {
	width: 100%;
	overflow: hidden;
	border-radius: 6px;
}

.slh-card__media img {
	display: block;
	width: 100%;
	height: auto;
}

.slh-card__text {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--slh-body);
}

/* The bullet list arrives as a normal list block from the editor. */
.slh-card__list ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.slh-card__list li {
	position: relative;
	margin: 0 0 8px;
	padding-inline-start: 26px;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--slh-body);
}

.slh-card__list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.28em;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--slh-accent);
	/* tick drawn as a mask so it inherits the accent */
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm-.9 11.6L3.6 8.1l1.3-1.3 2.2 2.2 4.1-4.1 1.3 1.3-5.4 5.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm-.9 11.6L3.6 8.1l1.3-1.3 2.2 2.2 4.1-4.1 1.3 1.3-5.4 5.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.slh-card__link {
	margin-top: auto;
	padding-top: 2px;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--slh-link);
}

.slh-card__link:hover,
.slh-card__link:focus-visible {
	text-decoration: underline;
}

.slh-card__arrow {
	display: inline-block;
	margin-inline-start: 6px;
	transition: transform 0.15s ease;
}

.slh-card__link:hover .slh-card__arrow { transform: translateX(3px); }

/* Stat cards sit icon-beside-figure rather than stacked. */
.slh-cards--stat .slh-card {
	flex-direction: row;
	align-items: center;
	text-align: start;
	background: none;
	border: 0;
	box-shadow: none;
}

.slh-card__statrow {
	display: flex;
	align-items: center;
	gap: 14px;
}

.slh-card__stat {
	margin: 0;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--slh-accent);
}

.slh-cards--stat .slh-card__disc {
	color: var(--slh-accent);
	background: var(--slh-accent-soft);
}

/* Document rows: a wide, low card with the arrow on the end. */
.slh-cards--doc .slh-card {
	flex-direction: row;
	align-items: center;
	gap: 14px;
	text-align: start;
}

.slh-cards--doc .slh-card__disc {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	color: var(--slh-accent);
	background: var(--slh-accent-soft);
}

/* Tablet: never more than three across, and finger-sized targets from here down. */
@media (max-width: 1024px) {
	.slh-cards { grid-template-columns: repeat(min(var(--slh-cols), 3), minmax(0, 1fr)); }
	.slh-card__text { font-size: 0.875rem; }
	.slh-card__link { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (max-width: 767px) {
	.slh-cards { grid-template-columns: repeat(min(var(--slh-cols), 2), minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.slh-cards { grid-template-columns: 1fr; --slh-gap: 16px; }
	.slh-card { padding: 22px 18px; }
}

/* -------------------------------------------------------------------------
 * Presentations added for the home page.
 *
 * inline  - icon beside a label, no card chrome (the hero feature strip)
 * side    - boxed card, icon left, title and copy stacked to its right
 * step    - numbered process steps with a connector arrow between them
 *
 * .slh-on-navy is a modifier, passed through the shortcode's class attribute,
 * for a grid sitting on the navy band.
 * ---------------------------------------------------------------------- */

/* Icon sizes: the SVG carries width/height attributes, so override both. */
.slh-cards--icon .slh-icon { width: 32px; height: 32px; }
.slh-cards--inline .slh-icon { width: 26px; height: 26px; }
.slh-cards--side .slh-icon { width: 36px; height: 36px; }
.slh-cards--stat .slh-icon { width: 42px; height: 42px; }
.slh-on-navy .slh-icon { width: 40px; height: 40px; }

/* --- inline ------------------------------------------------------------ */

.slh-cards--inline .slh-card {
	flex-direction: row;
	align-items: center;
	gap: 12px;
	padding: 0;
	text-align: start;
	background: none;
	border: 0;
	box-shadow: none;
}

.slh-cards--inline .slh-card__glyph { flex: 0 0 auto; line-height: 0; }
.slh-cards--inline .slh-card__title { font-size: 0.9375rem; }

/* --- side -------------------------------------------------------------- */

.slh-cards--side .slh-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"icon title"
		"icon text"
		"icon link";
	align-items: start;
	column-gap: 16px;
	row-gap: 6px;
	padding: 18px 18px;
	text-align: start;
}

.slh-cards--side .slh-card__glyph,
.slh-cards--side .slh-card__disc { grid-area: icon; align-self: center; line-height: 0; }
.slh-cards--side .slh-card__title { grid-area: title; font-size: 1.0625rem; }
.slh-cards--side .slh-card__text { grid-area: text; }
.slh-cards--side .slh-card__link { grid-area: link; margin-top: 4px; }

/* --- step -------------------------------------------------------------- */

/* A wide gutter: the connector arrow lives in it, clear of the next badge. */
.slh-cards--step { counter-reset: slh-step; --slh-gap: 46px; }

.slh-cards--step .slh-card {
	counter-increment: slh-step;
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"icon title"
		"icon text";
	align-items: start;
	column-gap: 16px;
	row-gap: 6px;
	padding: 4px 0 4px 42px;
	text-align: start;
	background: none;
	border: 0;
	box-shadow: none;
}

.slh-cards--step .slh-card::before {
	content: counter(slh-step);
	position: absolute;
	inset-inline-start: 0;
	top: 50%;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--slh-accent);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 700;
	transform: translateY(-50%);
}

/* The connector between steps; meaningless once the row stacks. */
.slh-cards--step .slh-card:not(:last-child)::after {
	content: "";
	position: absolute;
	inset-inline-end: calc(-0.5 * var(--slh-gap) - 9px);
	top: 50%;
	width: 18px;
	height: 11px;
	background: #9aa3ad;
	transform: translateY(-50%);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath fill='%23fff' d='M0 4.6h17.2V0L24 6l-6.8 6V7.4H0z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath fill='%23fff' d='M0 4.6h17.2V0L24 6l-6.8 6V7.4H0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.slh-cards--step .slh-card__disc {
	grid-area: icon;
	align-self: center;
	width: 62px;
	height: 62px;
	color: var(--slh-accent);
	background: #fff;
	border: 1.5px solid var(--slh-accent);
}

.slh-cards--step .slh-card__title { grid-area: title; font-size: 1rem; }
.slh-cards--step .slh-card__text { grid-area: text; }

/* --- on a navy band ----------------------------------------------------- */

.slh-cards.slh-on-navy .slh-card {
	gap: 10px;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

.slh-cards.slh-on-navy .slh-card__glyph { color: #fff; line-height: 0; }
.slh-cards.slh-on-navy .slh-card__title { color: #fff; font-size: 0.9375rem; font-weight: 500; }
.slh-cards.slh-on-navy .slh-card__text { color: rgb(255 255 255 / 78%); }

/* --- stat --------------------------------------------------------------- */

/* The design draws the stat icon as a bare outline, not in a filled disc. */
.slh-cards--stat .slh-card__disc {
	width: auto;
	height: auto;
	color: var(--slh-accent);
	background: none;
}

.slh-cards--stat .slh-card { padding: 8px 4px; }
.slh-card__stat { font-size: 2.1rem; }

/* A non-numeric "stat" is a phrase, and the design sets those in navy. */
.slh-card--stat-text .slh-card__stat {
	font-size: 1.5rem;
	color: var(--slh-navy);
}

@media (max-width: 767px) {
	/* Must repeat :not(:last-child): the base rule scores (0,3,1) and a
	   plainer selector here loses on specificity, not on order. */
	.slh-cards--step .slh-card:not(:last-child)::after { content: none; }
}

@media (max-width: 560px) {
	.slh-cards--inline .slh-card,
	.slh-cards--step .slh-card { padding-block: 0; }
	.slh-cards--step .slh-card { padding-inline: 42px 0; }
}

/* Three steps side by side need ~300px each; below that the copy column is
   squeezed to about 70px and every word wraps. Stack from the tablet edge. */
@media (max-width: 1024px) {
	.slh-cards--step {
		grid-template-columns: 1fr;
		--slh-gap: 22px;
	}

	/* Must repeat :not(:last-child): the base rule scores (0,3,1) and a
	   plainer selector here loses on specificity, not on order. */
	.slh-cards--step .slh-card:not(:last-child)::after { content: none; }
}

/* Six partner labels share a 62% column on the navy band; between the tablet
   edge and ~1280 that leaves "Organisations" exactly filling its cell. */
@media (min-width: 1025px) and (max-width: 1280px) {
	.slh-cards.slh-on-navy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}