/**
 * Hajj Qualification page.
 *
 * Every rule is scoped under .ij-hajj. 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 — here, the breakpoint.
 */

.ij-hajj { font-family: var(--font-sans); font-weight: 500; color: var(--color-text); -webkit-font-smoothing: antialiased; }
/* bb-theme's skin sets Helvetica on h1-h6 directly, so the headings do not
   inherit the design's face from .ij-hajj above. */
.ij-hajj h1, .ij-hajj h2, .ij-hajj h3 { font-family: var(--font-sans); }

/* The design's two columns are a fixed 1fr 1fr, which below roughly a tablet
   squeezes the ruling's card into a column too narrow for its 140px label
   gutter. One column, image last, keeps the reading order intact. */
@media (max-width: 900px) {
	.ij-hajj .hqgrid {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	/* The photograph is decorative beside the ruling, so it gives up most of
	   its height once it is no longer setting the row's height. */
	.ij-hajj .hqgrid > div:last-child {
		min-height: clamp(260px, 52vw, 380px) !important;
	}
}

/* The design sets the ayah as a plain paragraph. This uses <figure> and
   <blockquote> instead, because that is what the markup actually is — but the
   parent theme's Bootstrap base styles every blockquote with a 5px left rule
   and 20px of padding, which the design's <p> never picked up. Reset to the
   design's appearance without giving up the semantics. */
.ij-hajj figure {
	margin: 20px 0 0;
}

.ij-hajj blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
	quotes: none;
}

.ij-hajj blockquote::before,
.ij-hajj blockquote::after {
	content: none;
}