/**
 * Quality Immigration — services hub + the five service pages.
 *
 * Scoped additions only. Everything structural lives in qi-design.css; this
 * sheet adds (a) the full-bleed canvas for these pages, (b) a shorter inner
 * hero, (c) the alternating service rows on the hub, and (d) a couple of small
 * editorial touches for the sub-area and related-service cards.
 */

/* --------------------------------------------------------------------------
   1. Full-bleed canvas for the services tree
   --------------------------------------------------------------------------
   qi-design.css exposes a `body.qi.qi-canvas` hook, but nothing in the child
   theme adds that class yet and functions.php is owned by another agent. WP
   core already gives every page a `page-id-N` class, and every child of the
   hub a `parent-pageid-4` class, so we hook onto those instead. The rules
   below mirror the `body.qi.home` block in qi-design.css.
   -------------------------------------------------------------------------- */

body.qi.page-id-4 #main-container .ct-container,
body.qi.parent-pageid-4 #main-container .ct-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

body.qi.page-id-4 .entry-content > *,
body.qi.parent-pageid-4 .entry-content > * {
	margin-block: 0;
	max-width: none;
}

body.qi.page-id-4 article.post,
body.qi.parent-pageid-4 article.post {
	padding: 0;
}

body.qi.page-id-4 .entry-header,
body.qi.page-id-4 .hero-section,
body.qi.parent-pageid-4 .entry-header,
body.qi.parent-pageid-4 .hero-section {
	display: none;
}

body.qi.page-id-4 .entry-content,
body.qi.parent-pageid-4 .entry-content {
	padding: 0;
}

body.qi.page-id-4 .ct-container-full,
body.qi.parent-pageid-4 .ct-container-full {
	padding-top: 0;
	padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   2. Inner-page hero
   --------------------------------------------------------------------------
   The homepage hero fills the viewport. On a service page the hero is an
   introduction rather than a destination, so it sits shorter and the headline
   is allowed a little more width.
   -------------------------------------------------------------------------- */

.qi-hero-sub,
body.qi .qi-hero-sub.wp-block-cover {
	min-height: min(64vh, 620px);
	padding-top: clamp(4.5rem, 3rem + 6vw, 7.5rem);
	padding-bottom: clamp(4.5rem, 3rem + 6vw, 7.5rem);
}

/* Several of the service photographs are darker than the homepage hero, so the
   duotone wash is eased a little here. The headline sits over the densest part
   of the gradient, where contrast is unchanged. */
body.qi .qi-hero-sub::after {
	background:
		linear-gradient(100deg, rgba(6, 47, 48, .86) 0%, rgba(6, 47, 48, .6) 48%, rgba(11, 68, 68, .24) 100%),
		linear-gradient(180deg, rgba(6, 47, 48, .1) 0%, rgba(6, 47, 48, .3) 100%);
}

body.qi .qi-hero-sub h1 {
	max-width: 20ch;
}

body.qi .qi-hero-sub .qi-lead {
	max-width: 56ch;
}

/* Core's constrained layout writes `margin-left/right: auto !important` onto
   every direct child of a cover's inner container, which centres anything with
   a max-width. The hero is left-aligned by design, so the headline and lead
   have to opt out at the same weight. */
body.qi .qi-hero-sub > .wp-block-cover__inner-container > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* --------------------------------------------------------------------------
   3. Services hub — alternating editorial rows
   -------------------------------------------------------------------------- */

.qi-service-rows > * + * {
	margin-top: clamp(3.5rem, 2rem + 5vw, 6.5rem);
}

body.qi .qi-service-row.wp-block-media-text {
	gap: clamp(1.75rem, 1rem + 3vw, 4.5rem);
	align-items: center;
}

body.qi .qi-service-row .wp-block-media-text__media img {
	border-radius: var(--qi-radius-lg);
	aspect-ratio: 5 / 4;
	object-fit: cover;
	width: 100%;
}

body.qi .qi-service-row .wp-block-media-text__content {
	padding: 0;
}

body.qi .qi-service-row h2 {
	font-size: clamp(1.65rem, 1.3rem + 1.1vw, 2.3rem);
	margin: 0 0 1rem;
}

body.qi .qi-service-row p {
	max-width: 46ch;
}

/* A short index of what sits inside each service, under the summary. */
.qi-service-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem .55rem;
	list-style: none;
	margin: 1.4rem 0 1.6rem;
	padding: 0;
}

.qi-service-tags li {
	font-family: var(--qi-font-body);
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .01em;
	color: var(--qi-ink-muted);
	border: 1px solid var(--qi-hairline);
	border-radius: 999px;
	padding: .35rem .8rem;
	background: var(--qi-white);
}

/* Core writes the column split inline, so stacking needs the same weight core
   itself uses for is-stacked-on-mobile. */
@media (max-width: 820px) {
	body.qi .qi-service-row.wp-block-media-text {
		grid-template-columns: 100% !important;
	}

	body.qi .qi-service-row p {
		max-width: none;
	}
}

/* --------------------------------------------------------------------------
   4. Small editorial touches
   -------------------------------------------------------------------------- */

/* Sub-area cards carry a hairline index number rather than an icon. */
.qi-card .qi-card-index {
	display: block;
	font-family: var(--qi-font-body);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--qi-gold-ink);
	margin-bottom: .85rem;
}

/* Related services read as an index of links, not as boxes. */
.qi-related .qi-card-plain {
	border-top: 1px solid var(--qi-hairline);
	border-radius: 0;
	padding-top: 1.5rem;
	padding-bottom: 0;
}

body.qi .qi-related .qi-card-plain:hover {
	transform: none;
	border-color: transparent;
	border-top-color: var(--qi-gold-soft);
}

/* The "not sure where to start" band on the hub. */
.qi-startpoint {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
}

body.qi .qi-startpoint .wp-block-buttons {
	justify-content: center;
	margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   Mobile pass — service pages
   Enqueued after qi-design.css, so the §10 band there cannot reach these.
   -------------------------------------------------------------------------- */

@media (max-width: 782px), (max-height: 500px) and (pointer: coarse) {
	body.qi .qi-service-tags li {
		font-size: .9375rem;
	}
}