/* ═════════════════════════════════════════════════════════════════
   PAGE — LOQUAT IQ
   Standalone landing page (see /pages/page-loquat-iq.php). This
   stylesheet covers page-specific deltas: orange hero overlay,
   right-aligned italic tail, the "Ask your institution anything"
   3-card section with quoted example questions, and the inverted
   final CTA (orange band + green button).

   Class prefix: `.lq-*` (lq = loquat-iq).
   ═════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────
   THEME — Loquat IQ leans orange (it-tail / eyebrows / final CTA),
   while FAQ and Continue exploring keep their green accents inline.
   ───────────────────────────────────────────────────────────────── */
.loquat-iq.lq-theme-orange {
	--accent:      var(--orange);
	--accent-rgb:  255, 79, 0;
	--accent-tint: rgba(255, 79, 0, 0.16);
}


/* ─────────────────────────────────────────────────────────────────
   HERO — orange wash over the bg video (Figma: 0.9 alpha,
   mix-blend-screen). Italic tail "Not industry averages." pins to
   the right edge of the column.
   ───────────────────────────────────────────────────────────────── */
.loquat-iq .lq-hero .hero-headline .it-tail {
	text-align: right;
}


/* ─────────────────────────────────────────────────────────────────
   "ASK YOUR INSTITUTION ANYTHING" — section header + 3 cards of
   quoted example questions.
   ───────────────────────────────────────────────────────────────── */
.lq-questions {
	background: var(--cream);
}

.lq-questions-head {
	max-width: 1280px;
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 1.8vw, 32px);
	margin-bottom: clamp(40px, 5vw, 72px);
}

/* Headline mixes inline italic ("Real questions. Real answers.
   *Your data.*") at parent font-size — different from the bigger
   .it-tail treatment used elsewhere. */
.lq-questions-headline {
	text-transform: uppercase;
	/* Replicate the inter-line gap of .hl-line blocks. In a single block
	   element the visible gap between wrapped lines = line-height − font-size.
	   Target gap = split-word margin-bottom (clamp(6px,0.7vw,10px)).
	   So: line-height = fs-display-xl + margin = clamp(52+6, 7.8+0.7vw, 112+10). */
	line-height: clamp(58px, 8.5vw, 122px);
}
.lq-questions-headline .it-mid {
	font-family: var(--f-serif);
	font-style: italic;
	font-size: inherit;
	line-height: inherit;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: inherit;
}
.lq-questions-headline .it-mid.orange { color: var(--orange); }
.lq-questions-headline .it-mid.green  { color: var(--green); }

/* Caps-head tail — "Your institution's AI." must start on its own line.
   The shared caps-grid rule sets display:inline; override to block. */
.lq-caps .po-caps-head .display .it-tail { display: block; }


.lq-questions-grid {
	display: flex;
	gap: 32px;
	align-items: stretch;
}

.lq-question-card {
	flex: 1;
	min-width: 0;
	background: #EEEEED;
	border: 1px solid transparent;
	padding: 24px;
	border-radius: 14px;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 22px;

	transition:
		--shimmer-pos 0.55s ease,
		border-color  0.25s ease,
		transform     0.25s ease,
		box-shadow    0.25s ease;
}

.lq-question-card::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		120deg,
		transparent                       0%,
		transparent                       calc(var(--shimmer-pos) - 28%),
		rgba(255, 255, 255, 0.18)         calc(var(--shimmer-pos) - 12%),
		rgba(255, 255, 255, 0.45)         var(--shimmer-pos),
		rgba(255, 255, 255, 0.18)         calc(var(--shimmer-pos) + 12%),
		transparent                       calc(var(--shimmer-pos) + 28%),
		transparent                       100%
	);
}

.lq-question-card:hover {
	border-color: var(--green);
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.07);
	transition:
		--shimmer-pos 0.06s linear,
		border-color  0.25s ease,
		transform     0.25s ease,
		box-shadow    0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
	.lq-question-card {
		transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
	}
	.lq-question-card::after { display: none; }
	.lq-question-tile { transition: none; }
}

.lq-question-card-title {
	margin: 0;
	font-family: var(--f-sans);
	font-weight: 500;
	font-size: clamp(18px, 2vw, 26px);
	line-height: 1.44;
	color: var(--ink);
	white-space: nowrap;
}

.lq-question-tile {
	border: 1px solid #d7d5d0;
	border-radius: 14px;
	padding: 20px 16px;
	transition: border-color 0.2s ease;
}

.lq-question-tile:hover {
	border-color: var(--orange);
}

.lq-question {
	margin: 0;
	font-family: var(--f-sans);
	font-weight: 400;
	font-size: clamp(16px, 1.6vw, 22px);
	line-height: 1.5;
	color: rgba(26, 26, 26, 0.75);
	text-wrap: pretty;
}

.lq-quote {
	color: var(--orange);
	font-weight: 900;
	margin: 0 0.1em;
}

@media (max-width: 1024px) {
	.lq-questions-grid {
		flex-direction: column;
	}
}


/* ─────────────────────────────────────────────────────────────────
   FINAL CTA — INVERTED variant: orange band + green button.
   The base finalcta layout (display:flex column h2, etc.) comes
   from /assets/css/components/faq.css; this block only sets the
   colours specific to Loquat IQ.
   ───────────────────────────────────────────────────────────────── */
.lq-finalcta {
	background: var(--orange);
}
.lq-finalcta h2 {
	display: flex;
	flex-direction: column;
	letter-spacing: -0.02em;
	line-height: 0.9;
}
.lq-finalcta h2 .hl-line { line-height: 0.9; }
.lq-finalcta h2 .it-tail { line-height: 0.9; }
.lq-finalcta p {
	font-size: var(--fs-body-sm);
	line-height: 1.54;
}
.lq-finalcta .btn-orange {
	/* Override the base .btn-orange — Loquat IQ wants a green button
	   on the orange band so the colours read as inverted from the
	   other product pages. */
	background: var(--green);
	color: var(--cream);
	border: 1px solid rgba(26, 26, 26, 0.15);
	border-radius: 12px;
	padding: 22px 32px;
	font-weight: 600;
}
.lq-finalcta .btn-orange:hover {
	box-shadow: 0 10px 30px rgba(11, 102, 35, .35);
	transform: translateY(-1px);
}


/* ─────────────────────────────────────────────────────────────────
   "Continue exploring" — same anchor-in-timing-slot pattern CALM
   Portal uses, scoped to the Loquat IQ wrapper.
   ───────────────────────────────────────────────────────────────── */
.loquat-iq .lq-explore .po-agent-timing {
	white-space: normal;
}
.loquat-iq .lq-explore .po-agent-timing a {
	color: var(--green);
	text-decoration: none;
}
.loquat-iq .lq-explore .po-agent-timing a:hover {
	text-decoration: underline;
}