/**
 * QKVerse hub page (/qkverse/, os/qkverse-* patterns). Built on the Industries/Services rhythm:
 * 48px section padding (24 on phones), centred section heads (OS Eyebrow where kept + theme H2 +
 * paragraphs at the theme's own paragraph size, not OS Lead — user, 2026-10-18), spaced by the OS
 * Section Head style's gap alone, as Platforms; the blog cards for every item card. Loads where a
 * block with an "os-qkverse" class renders (os_interactive_styles).
 */

/* ---------- Shared: section spacing ---------- */
.os-qkverse-welcome,
.os-qkverse-picks-section,
.os-qkverse-explore,
.os-qkverse-feed,
.os-qkverse-events,
.os-qkverse-qkast {
	padding-top: 48px;
	padding-bottom: 48px;
}
:is(.os-qkverse-welcome, .os-qkverse-picks-section, .os-qkverse-explore, .os-qkverse-feed, .os-qkverse-events, .os-qkverse-qkast) > * { margin-block: 0; }
.os-qkverse-welcome,
.os-qkverse-events { background: var(--wp--preset--color--white); }

.os-qkverse-picks-section > .is-style-os-section-head + *,
.os-qkverse-explore > .is-style-os-section-head + *,
.os-qkverse-feed > .is-style-os-section-head + *,
.os-qkverse-qkast > .is-style-os-section-head + * { margin-top: 32px; }

@media (max-width: 768px) {
	:is(.os-qkverse-welcome, .os-qkverse-picks-section, .os-qkverse-explore, .os-qkverse-feed, .os-qkverse-events, .os-qkverse-qkast) {
		padding-top: calc(var(--wp--preset--spacing--90) * 0.6);
		padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6);
	}
	.os-qkverse-picks-section > .is-style-os-section-head + *,
	.os-qkverse-explore > .is-style-os-section-head + *,
	.os-qkverse-feed > .is-style-os-section-head + *,
	.os-qkverse-qkast > .is-style-os-section-head + * { margin-top: 24px; }
}

/* ---------- 1. Hero (os/qkverse-hero) ---------- */
/* No image in the brief: the copy is centred instead of split with a media column, on the
   Home/Industries hero-glow background, at the blog hero's 38px spacing. */
.os-qkverse-hero.os-blog-hero { background: var(--wp--preset--gradient--hero-glow); }
.os-qkverse-hero__body {
	max-width: 760px;
	margin-top: 24px !important;
	margin-inline: auto;
	text-align: center;
}
.os-qkverse-hero__body > * { margin: 0; }
.os-qkverse-hero__title { margin-top: 16px; color: var(--wp--preset--color--ink-deep); }
.os-qkverse-hero__lead {
	max-width: 640px;
	margin-top: 20px;
	margin-inline: auto;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
}
.os-qkverse-hero__actions { margin-top: 32px; }

@media (max-width: 768px) {
	.os-qkverse-hero__lead { font-size: var(--wp--preset--font-size--medium); }
}

/* ---------- 2. Welcome (os/qkverse-welcome) ---------- */
.os-qkverse-welcome__head { max-width: 760px; margin-inline: auto; }
.os-qkverse-welcome__head > * { margin: 0; margin-inline: auto; }

/* ---------- 3. Editor's Picks (os/qkverse-picks) ---------- */
/* The blog highlights slider and card (os-blog.css: .os-blog-hero__query, .os-blog-feature),
   with the content type first in the meta line ("Case Study / October 3, 2026 / 5 min read"). */
.os-qkverse-picks .os-blog-meta > .os-qkverse-pick__type + *::before { content: "/"; margin: 0 0.6em; }
.os-qkverse-picks .os-blog-meta > .os-qkverse-pick__type:empty { display: none; }
.os-qkverse-picks .os-blog-meta > .os-qkverse-pick__type:empty + *::before { content: none; }

/* ---------- 4. Explore QKVerse (os/qkverse-explore) ---------- */

.os-qkverse-formats__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin-top: 40px;
}
.os-qkverse-formats__grid > * { margin: 0; }

/* Format card: the "Module card" look (Figma Page Patterns, design-system.md) — the same recipe
   as the Services page's .os-service-card, copied here rather than shared across stylesheets, so
   this page doesn't depend on os-service-detail.css loading (it only loads where an
   "os-service-detail" class renders). */
.os-qkverse-format-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
	min-height: 210px;
	overflow: hidden;
	padding: 24px;
	border: 1px solid var(--wp--custom--color--brand-accent);
	border-radius: var(--wp--preset--border-radius--lg);
	background:
		url("../images/industries/focus/card-glow.svg") right -168px top -232px / 439px 439px no-repeat,
		var(--wp--preset--color--ice);
}
.os-qkverse-format-card > *,
.os-qkverse-format-card__copy > * { margin: 0; }
/* The copy right under the thumbnail, the link at the bottom: titles line up across a row. */
.os-qkverse-format-card { justify-content: flex-start; }
.os-qkverse-format-card > .os-qkverse-format-card__actions { margin-top: auto; }
.os-qkverse-format-card__copy > .os-qkverse-format-card__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.4;
	color: var(--wp--preset--color--brand);
}
.os-qkverse-format-card__copy > .os-qkverse-format-card__text {
	margin-top: 8px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-soft);
}
.os-qkverse-format-card__actions .wp-block-button__link { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--brand); }
/* Thumbnail (user, 2026-10-18: "each item will also have an image of its own, as thumbnail"): the
   "Card image" Image block at the top of the card, edge to edge (the card's padding cancelled),
   in a 16:9 frame the image covers, so any upload fits; the card's corners clip it. Defaults:
   glass artwork per format (assets/images/qkverse/<format>.svg, 640x360). Uploads: 16:9,
   960x540 px (the largest display is 450x254 CSS px, 2 across at 1024; about 300x169 at 1440). */
.os-qkverse-format-card > .os-qkverse-format-card__image {
	margin: -24px -24px 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-bottom: 1px solid rgb(23 72 232 / 0.08);
	background: var(--wp--preset--color--white);
}
.os-qkverse-format-card > .os-qkverse-format-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--os-slow) var(--os-ease);
}
.os-qkverse-format-card:hover > .os-qkverse-format-card__image img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
	.os-qkverse-format-card > .os-qkverse-format-card__image img { transition: none; }
	.os-qkverse-format-card:hover > .os-qkverse-format-card__image img { transform: none; }
}

@media (max-width: 1100px) {
	.os-qkverse-formats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.os-qkverse-formats__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 24px; }
	.os-qkverse-format-card { min-height: 0; padding: 24px; }
}

/* ---------- 5. Latest from QKVerse (os/qkverse-feed) ---------- */
/* One feed of every format, newest first (user, 2026-10-18), on the blog listing's machinery: the
   section is also .os-blog-list (loader, pagination landing, os-blog.js) and the results row,
   Filter button, grid and pagination are the blog's (os-blog.css). Here: the head stays centred
   like every other section, and the Filter sits at the right end of the results found line, as
   on the search results (os-search.css). */
.os-qkverse-feed.os-blog-list { background: transparent; }
.os-qkverse-feed > .os-qkverse-feed__body { position: relative; }
.os-qkverse-feed__body > * { margin-block: 0; }
.os-qkverse-feed__filter {
	position: absolute;
	top: 9px; /* The line's top border + padding. */
	right: 0;
	z-index: 2;
}
.os-qkverse-feed .os-results { padding-block: 8px; }
.os-qkverse-feed .os-results__count { padding-block: 12px; }
.os-qkverse-feed__body:has(.os-blog-filters) .os-results { padding-right: 156px; }
/* Three groups (Formats, Services, Industries) side by side in a wider panel. */
.os-qkverse-feed .os-filter__panel { width: min(840px, calc(100vw - 2 * var(--wp--custom--gutter))); }
.os-qkverse-feed .os-filter__groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Cards: the Home QKVerse card (.os-insight; user, 2026-10-17) — format label on the image, no
   tags or date. Its Query Loop rules live with the card in os-theme.css (.wp-block-post-template
   .os-insight), shared with Home QKVerse and Reliability OS Resources. */

@media (max-width: 1100px) {
	.os-qkverse-feed .os-filter__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	/* The count beside the button, the chips on their own row below; the panel opens across the
	   page from the button's right edge (as the search results). */
	.os-qkverse-feed__body:has(.os-blog-filters) .os-results { padding-right: 0; }
	.os-qkverse-feed__body:has(.os-blog-filters) .os-results__count { box-sizing: border-box; padding-right: 156px; }
	.os-qkverse-feed__filter .os-filter__panel { left: auto; right: 0; width: calc(100vw - 2 * var(--wp--custom--gutter)); }
	.os-qkverse-feed .os-filter__groups { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 540px) {
	/* The Filter button is its icon alone (with the number chosen). */
	.os-qkverse-feed__filter .os-filter__toggle { min-width: 0; padding-inline: 13px; }
	.os-qkverse-feed__filter .os-filter__toggle::after { content: none; }
	.os-qkverse-feed__filter .os-filter__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.os-qkverse-feed__body:has(.os-blog-filters) .os-results__count { padding-right: 92px; }
}
/* Editor: the Filter block (a search field there) goes back in the flow above the results. */
.is-root-container .os-qkverse-feed__filter { position: static; margin-bottom: 16px; }

/* ---------- 6. Events (os/qkverse-events) ---------- */
.os-qkverse-events__head { align-items: flex-end; gap: 24px; margin-bottom: 32px; }
.os-qkverse-events__head > * { margin: 0; }
.os-qkverse-events__link .wp-block-button__link { font-size: var(--wp--preset--font-size--small); }

@media (max-width: 768px) {
	.os-qkverse-events__head { flex-wrap: wrap; align-items: flex-start; margin-bottom: 24px; }
}

/* ---------- 7. QKast promo (os/qkverse-qkast) ---------- */
/* Head typography/spacing = every other section (OS Eyebrow, theme H2, paragraphs, the shared
   section-head-gap rules above) — only the white colour and the dimmed second line are this
   section's own, since it sits on a dark background (ink-deep) unlike the others. */
.os-qkverse-qkast__head { max-width: 760px; margin-inline: auto; }
.os-qkverse-qkast__head > * { margin: 0; }
/* The two intro lines at paragraph size (user, 2026-10-18), not OS Lead: the body font size and
   line height from theme.json, dimmed white. */
.os-qkverse-qkast__lead { opacity: 0.85; }

.os-qkverse-qkast-card {
	align-items: center;
	gap: 32px;
	padding: 32px;
	background: rgb(255 255 255 / 0.06);
	border: 1px solid rgb(255 255 255 / 0.14);
	border-radius: var(--wp--preset--border-radius--lg);
}
.os-qkverse-qkast-card__image { flex: 0 0 240px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--wp--preset--border-radius--md); }
.os-qkverse-qkast-card__image img { width: 100%; height: 100%; object-fit: cover; }
.os-qkverse-qkast-card__body { flex: 1 1 auto; min-width: 0; }
.os-qkverse-qkast-card__body > * { margin: 0; color: var(--wp--preset--color--white); }
/* The services as OS Tags (user, 2026-10-18: "needs to have tag style"): one rounded label per
   term, the OS Tags type (12.5/600) and shape (7 x 14, 6px), in white on the dark card instead of
   the light grey; the Post Terms separators are hidden. Each label still links to its filter. */
.os-qkverse-qkast-card__body > .os-qkverse-qkast-card__tag { display: flex; flex-wrap: wrap; gap: 8px; }
.os-qkverse-qkast-card__tag .wp-block-post-terms__separator { display: none; }
.os-qkverse-qkast-card__tag a {
	padding: 7px 14px;
	border-radius: 6px;
	background: rgb(255 255 255 / 0.1);
	font-size: 12.5px;
	font-weight: 600;
	line-height: normal;
	white-space: nowrap;
	color: rgb(255 255 255 / 0.9);
	text-decoration: none;
	transition: background-color var(--os-fast) var(--os-ease);
}
.os-qkverse-qkast-card__tag a:hover { background: rgb(255 255 255 / 0.18); }
.os-qkverse-qkast-card__tag a:focus-visible { outline: 2px solid var(--wp--preset--color--white); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	.os-qkverse-qkast-card__tag a { transition: none; }
}
.os-qkverse-qkast-card__title { margin-top: 12px; font-size: var(--wp--preset--font-size--x-large); }
.os-qkverse-qkast-card__title a { color: inherit; text-decoration: none; }
.os-qkverse-qkast-card__excerpt p { margin: 0; margin-top: 10px; font-size: var(--wp--preset--font-size--small); line-height: 1.5; opacity: 0.8; }
.os-qkverse-qkast-card__meta { gap: 0; margin-top: 16px; font-size: var(--wp--preset--font-size--x-small); opacity: 0.75; }
.os-qkverse-qkast-card__meta > * { margin: 0; }
.os-qkverse-qkast-card__meta .os-read-time::before { content: "·"; margin: 0 0.45em; }
/* Don't set `display` here: `.wp-block-read-more.is-style-os-green` (os-blog.css) already sets
   `inline-flex` to centre the label against the arrow icon — overriding it to `inline-block`
   left the arrow and text misaligned (user, 2026-10-14). */
.os-qkverse-qkast-card .wp-block-read-more { margin-top: 16px; }
.os-qkverse-qkast__button { margin-top: 40px; }

@media (max-width: 768px) {
	.os-qkverse-qkast-card { flex-direction: column; align-items: flex-start; padding: 24px; }
	.os-qkverse-qkast-card__image { flex-basis: auto; width: 100%; aspect-ratio: 16 / 9; }
}