/**
 * Halal Mortgage page.
 *
 * Every rule is scoped under .ij-halal. The .advrow class is the design's own
 * name and is generic enough to collide, so scoping is not optional here.
 *
 * Layout lives in the template's inline styles, as on every other redesigned
 * page. This file carries only what an inline style attribute cannot express:
 * hover and focus states, and the breakpoints.
 */

.ij-halal { font-family: var(--font-sans); font-weight: 500; color: var(--color-text); -webkit-font-smoothing: antialiased; }

/* ---- Programs cards ----------------------------------------------------- */

.ij-halal .halal-program {
	transition:
		transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ij-halal .halal-program:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-overlay);
}

.ij-halal .halal-program-icon {
	color: var(--brand-green);
}

.ij-halal .halal-program-cta {
	transition: gap 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ij-halal .halal-program:hover .halal-program-cta {
	gap: 10px;
}

/* The whole card is the link, so the focus ring belongs on the card. */
.ij-halal .halal-program:focus-visible {
	outline: 2px solid var(--brand-green-dark);
	outline-offset: 3px;
}

/**
 * A card lifting under the pointer is decoration; a reader who has asked for
 * less motion still gets the shadow, which is what conveys the state.
 */
@media (prefers-reduced-motion: reduce) {
	.ij-halal .halal-program,
	.ij-halal .halal-program-cta {
		transition: none;
	}

	.ij-halal .halal-program:hover {
		transform: none;
	}
}

/* ---- Breakpoints -------------------------------------------------------- */

/* The advantage rows are a heading beside its paragraph. Below this the
   heading has no room to sit alongside, so it stacks above instead. */
@media (max-width: 860px) {
	.ij-halal .advrow {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 12px !important;
		padding: 36px 0 !important;
	}
}

@media (max-width: 960px) {
	.ij-halal .halal-programs {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 620px) {
	.ij-halal .halal-programs {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}