/**
 * Blog listing (os/blog-highlights, os/blog-list) and the Read More block styles.
 * Loads only where a block with an "os-blog-" class renders (os_interactive_styles).
 * Values are from Figma (Qwality Kiosk, nodes 11:17175 and 11:17514). Each section keeps
 * its own responsive rules.
 */

/* ---------- Read More: OS Green Button ---------- */
.wp-block-read-more.is-style-os-green {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	min-height: 44px;
	white-space: nowrap;
	transition: background-color var(--os-fast) var(--os-ease), box-shadow var(--os-base) var(--os-ease);
}
.wp-block-read-more.is-style-os-green::after {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("../images/arrow-tr.svg") center / 10px no-repeat;
	mask: url("../images/arrow-tr.svg") center / 10px no-repeat;
}
.wp-block-read-more.is-style-os-green:hover::after,
.wp-block-read-more.is-style-os-green:focus-visible::after { animation: os-arrow-out-in 0.45s ease; }
.wp-block-read-more.is-style-os-green:hover {
	background-color: var(--wp--preset--color--green-dark);
	box-shadow: 0 8px 20px rgba(1, 158, 132, 0.3);
	color: var(--wp--preset--color--white);
}

.wp-block-read-more:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-read-more::after { animation: none !important; }
}

/* Section spacing matches the post page (os-post.css, user 2026-10-03), so the breadcrumb sits in
   the same place on both: highlights = post hero (38px; 24 on phones), list = post body (48; 24). */
/* ---------- Highlights (os/blog-highlights) ---------- */
.os-blog-hero {
	position: relative;
	padding-top: 38px;
	padding-bottom: 38px;
	/* Two soft glows (Figma): teal low left, electric blue top right. */
	background:
		radial-gradient(circle at calc(50% + 572px) 117px, color-mix(in srgb, var(--wp--preset--color--electric) 16%, transparent) 0, transparent 307px),
		radial-gradient(circle at calc(50% - 537px) 673px, color-mix(in srgb, var(--wp--preset--color--teal) 16%, transparent) 0, transparent 257px),
		var(--wp--preset--color--white);
}
.os-blog-hero > * { margin-block: 0; }

.os-blog-hero > .os-blog-hero__head { margin-top: 32px; }
.os-blog-hero__head > * { max-width: 832px; margin: 0; }
.os-blog-hero__intro {
	margin-top: 2px !important;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.5;
}

.os-blog-hero > .os-blog-hero__query { margin-top: 32px; }

/* Feature card: text on the left, image on the right (408px tall). */
.os-blog-feature {
	box-sizing: border-box;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 24px;
	height: 408px;
	padding: 16px;
	border-radius: var(--wp--preset--border-radius--lg);
	background: linear-gradient(180deg, var(--wp--preset--color--brand) 0%, var(--wp--preset--color--navy-deep) 153.76%);
	color: var(--wp--preset--color--white);
}
.os-blog-feature > * { margin: 0; }

.os-blog-feature__body {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 0 1 515px;
	min-width: 0;
	padding: 16px;
}
.os-blog-feature__body > * { margin: 0; }
.os-blog-feature__body > .wp-block-read-more { margin-top: auto; }

.os-blog-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 1.15px;
	text-transform: uppercase;
	color: var(--wp--custom--color--on-brand);
}
.os-blog-meta > * { margin: 0; }
.os-blog-meta > .os-read-time::before { content: "/"; margin: 0 0.6em; }

.os-blog-feature__body > .os-blog-feature__title {
	margin-top: 8px;
	font-size: var(--wp--preset--font-size--title);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.5px;
	color: var(--wp--preset--color--white);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}
.os-blog-feature__title a,
.os-blog-feature__title a:hover,
.os-blog-feature__title a:focus { color: inherit; text-decoration: none; }

.os-blog-feature__body > .os-blog-feature__excerpt { margin-top: 4px; }
.os-blog-feature__excerpt p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

/* Author: photo, name, LinkedIn icon (os_author_linkedin). */
.os-author {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.5;
}
.os-author > * { margin: 0; }
.os-blog-feature__body > .os-author { margin-top: 24px; }
.os-author__photo,
.os-author__photo img {
	display: block;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
}
.os-author__linkedin {
	display: inline-flex;
	margin-left: 8px;
	color: currentColor;
	transition: opacity var(--os-fast) var(--os-ease);
}
.os-author__linkedin:hover { opacity: 0.8; }
.os-author__linkedin:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.os-blog-feature__image {
	flex: 0 1 auto;
	height: 100%;
	aspect-ratio: 1507 / 1044;
	max-width: 55%;
	margin: 0;
	overflow: hidden;
	border-radius: 8px;
}
.os-blog-feature__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--os-slow) var(--os-ease);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.os-blog-feature:hover .os-blog-feature__image img { transform: scale(1.04); }
}

/* Slider controls: bars across the row, arrows on the right (Figma 11:17173). */
.os-slider__controls.has-arrows {
	justify-content: space-between;
	gap: 32px;
	margin-top: 16px;
}
.os-slider__dots {
	display: flex;
	flex: 1 1 auto;
	gap: 2px;
	margin-inline: -3px;
}
.has-arrows .os-slider__dot { flex: 1 1 0; width: auto; }
.has-arrows .os-slider__dot::before { background: var(--wp--custom--color--track); }
.has-arrows .os-slider__dot[aria-current="true"]::before { background: var(--wp--preset--color--brand); }
.os-slider__arrows { display: flex; flex-shrink: 0; gap: 8px; }
.os-slider__arrows button {
	width: 35px;
	height: 35px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: url("../images/ui/carousel-next.svg") center / 35px no-repeat;
	cursor: pointer;
	transition: transform var(--os-base) var(--os-ease);
}
.os-slider__arrows .os-slider__prev { transform: scaleX(-1); }
.os-slider__arrows button:disabled { background-image: url("../images/ui/carousel-prev.svg"); cursor: default; transform: none; }
.os-slider__arrows .os-slider__next:disabled { transform: scaleX(-1); }
.os-slider__arrows .os-slider__next:not(:disabled):hover { transform: scale(1.08); }
.os-slider__arrows .os-slider__prev:not(:disabled):hover { transform: scaleX(-1) scale(1.08); }
.os-slider__arrows button:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 2px; }

/* Highlights transition. The blue card never fades (fading it let the white page show through,
   a flash between slides): only what's on it changes. The old slide sits on top with a
   see-through card; its text drifts out and its image fades away over the new image, which
   settles from a slight zoom; the new text drifts in line by line. Next drifts to the left,
   Previous to the right (data-direction, set by os-slider.js). Transform and opacity only. */
.os-blog-hero__slides { --os-drift: 1; }
.os-blog-hero__slides[data-direction="prev"] { --os-drift: -1; }
.os-blog-hero__slides > li > .os-blog-feature { min-height: 100%; }
@media (prefers-reduced-motion: no-preference) {
	.os-blog-hero__query .is-style-os-slider.os-slider--slide.has-changed > .is-leaving { animation: none; z-index: 1; }
	.os-blog-hero__query .is-style-os-slider.os-slider--slide.has-changed > .is-active > * { animation: none; }
	.os-blog-hero__query .is-style-os-slider.has-changed > .is-leaving > .os-blog-feature { background: none; }
	.os-blog-hero__query .is-style-os-slider.has-changed > .is-leaving .os-blog-feature__body > * { animation: os-hl-text-out 0.35s var(--os-ease-in) forwards; }
	.os-blog-hero__query .is-style-os-slider.has-changed > .is-leaving .os-blog-feature__image { animation: os-hl-fade-out 0.45s var(--os-ease) forwards; }
	.os-blog-hero__query .is-style-os-slider.has-changed > .is-active .os-blog-feature__body > * { animation: os-hl-text-in 0.7s var(--os-ease) 0.14s backwards; }
	.os-blog-hero__query .is-style-os-slider.has-changed > .is-active .os-blog-feature__body > :nth-child(2) { animation-delay: 0.2s; }
	.os-blog-hero__query .is-style-os-slider.has-changed > .is-active .os-blog-feature__body > :nth-child(3) { animation-delay: 0.26s; }
	.os-blog-hero__query .is-style-os-slider.has-changed > .is-active .os-blog-feature__body > :nth-child(4) { animation-delay: 0.32s; }
	.os-blog-hero__query .is-style-os-slider.has-changed > .is-active .os-blog-feature__body > :nth-child(n+5) { animation-delay: 0.38s; }
	.os-blog-hero__query .is-style-os-slider.has-changed > .is-active .os-blog-feature__image img { animation: os-hl-settle 1.1s var(--os-ease) backwards; }
}
@keyframes os-hl-text-out { to { opacity: 0; transform: translateX(calc(var(--os-drift) * -16px)); } }
@keyframes os-hl-text-in { from { opacity: 0; transform: translateX(calc(var(--os-drift) * 24px)); } }
@keyframes os-hl-fade-out { to { opacity: 0; } }
@keyframes os-hl-settle { from { transform: scale(1.06); } }

/* Highlights: responsive. Side by side down to 901px, then stacked: image on top, text
   below (like the cards), 16:9 on tablets and the native ratio on phones. */
@media (max-width: 1200px) {
	.os-blog-feature__body > .os-blog-feature__title { font-size: var(--wp--preset--font-size--xx-large); line-height: 1.3; }
	.os-blog-feature__image { max-width: 50%; }
}
@media (max-width: 900px) {
	.os-blog-feature { flex-direction: column-reverse; justify-content: flex-end; height: auto; gap: 0; }
	.os-blog-feature__body { flex: 1 1 auto; padding: 24px 8px 8px; }
	.os-blog-feature__body > .wp-block-read-more { margin-top: 24px; }
	.os-blog-feature__image { width: 100%; height: auto; max-width: none; aspect-ratio: 16 / 9; }
}
@media (max-width: 880px) {
	.os-blog-hero h1 { font-size: var(--wp--preset--font-size--title); }
}
@media (max-width: 768px) {
	.os-blog-hero { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6); }
	.os-blog-hero > .os-blog-hero__head,
	.os-blog-hero > .os-blog-hero__query { margin-top: 24px; }
	.os-blog-hero__intro { font-size: var(--wp--preset--font-size--medium); }
	.os-blog-feature { padding: 12px; }
	.os-blog-feature__body { padding: 20px 4px 4px; }
	.os-blog-feature__body > .os-blog-feature__title { font-size: var(--wp--preset--font-size--x-large); line-height: 1.3; }
	.os-blog-meta { font-size: var(--wp--preset--font-size--x-small); }
	.os-slider__controls.has-arrows { gap: 16px; }
}
@media (max-width: 540px) {
	.os-blog-hero h1 { font-size: var(--wp--preset--font-size--xx-large); }
	.os-blog-feature__image { aspect-ratio: 1507 / 1044; }
}

/* ---------- List (os/blog-list) ---------- */

/* Read More: OS Explore Link — in os-theme.css (Home QKVerse cards use it too). */

.os-blog-list {
	padding-top: 48px;
	padding-bottom: 48px;
	background: var(--wp--preset--color--white);
}
.os-blog-list > * { margin-block: 0; }

.os-blog-list__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}
.os-blog-list__title > * { margin: 0; }
/* OS Eyebrow, the theme H2 and Home's head gap, as on Home (user, 2026-10-08). */
.os-blog-list__title > h2 { margin-top: var(--wp--custom--section-head-gap); }

/* Filters (os_render_blog_filters): one Filter button that opens a panel of checkboxes. */
.os-blog-filters { display: flex; align-items: center; }
.os-filter { position: relative; }
.os-filter > summary { list-style: none; cursor: pointer; }
.os-filter > summary::-webkit-details-marker { display: none; }

.os-filter__toggle {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 140px;
	height: 45px;
	padding: 12px 16px;
	border: 1px solid var(--wp--custom--color--field-border);
	border-radius: 8px;
	background: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: normal;
	color: var(--wp--preset--color--ink);
	transition: border-color var(--os-fast) var(--os-ease);
}
.os-filter__toggle:hover,
.os-filter[open] > .os-filter__toggle { border-color: var(--wp--preset--color--brand); }
.os-filter__toggle > svg { flex-shrink: 0; color: var(--wp--preset--color--brand); }
.os-filter__toggle:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 2px; }
.os-filter__toggle::after {
	content: "";
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-left: auto;
	background: url("../images/ui/nav-arrow-down.svg") center / 18px no-repeat;
	transition: transform var(--os-base) var(--os-ease);
}
.os-filter[open] > .os-filter__toggle::after { transform: rotate(180deg); }
.os-filter__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-filter__count {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--wp--preset--color--brand);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	color: var(--wp--preset--color--white);
}

/* The popup on the site's blue gradient (user, 2026-10-18: "can all the cpt filter be blue
   background?" — first on the search results 2026-10-11, then QKVerse; the blog cards' hover
   panel, brand → navy-deep): white text and hairlines, ticks and the Filter button in green (as
   the 404 page's blue card), white Clear all, white focus rings. Every listing (blog + the 9
   listing types), the search results and the QKVerse feed share it. */
.os-filter__panel {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 20;
	box-sizing: border-box;
	width: min(600px, calc(100vw - 2 * var(--wp--custom--gutter)));
	padding: 24px;
	border: 1px solid transparent;
	border-radius: 12px;
	background: linear-gradient(165deg, var(--wp--preset--color--brand), var(--wp--preset--color--navy-deep));
	box-shadow: 0 24px 48px rgb(0 31 84 / 0.28);
	color: var(--wp--preset--color--white);
}
.os-filter[open] > .os-filter__panel { animation: os-filter-in var(--os-fast) var(--os-ease); }
@keyframes os-filter-in {
	from { opacity: 0; transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
	.os-filter[open] > .os-filter__panel { animation: none; }
}
.os-filter__groups {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	/* Long lists (20+ services or industries) scroll inside the popup; the buttons stay in view. */
	max-height: min(50vh, 380px);
	margin-right: -12px;
	padding-right: 12px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgb(255 255 255 / 0.4) transparent;
}
.os-filter__group {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.os-filter__list { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; }
.os-filter__legend {
	float: left;
	width: 100%;
	margin: 0 0 2px;
	padding: 0 0 10px;
	border-bottom: 1px solid rgb(255 255 255 / 0.18);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
}
.os-filter__legend + * { clear: both; }
/* Group header: a plain heading on wider screens; on phones it opens and closes its list. */
.os-filter__group-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	letter-spacing: inherit;
	text-align: left;
	text-transform: inherit;
	color: inherit;
}
.os-filter__group-toggle:disabled { cursor: default; }
.os-filter__picked {
	display: inline-grid;
	place-items: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	font-size: 11px;
	letter-spacing: 0;
	color: var(--wp--preset--color--brand);
}
.os-filter__option {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--white);
	cursor: pointer;
}
/* Checkbox: the Figma "square" icon (12px box in a 16px slot), a white outline, green fill with a
   tick when on. */
.os-filter__option input {
	appearance: none;
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	margin: 2px;
	border: 1px solid rgb(255 255 255 / 0.7);
	border-radius: 1px;
	background: transparent;
	cursor: pointer;
	transition: background-color var(--os-fast) var(--os-ease), border-color var(--os-fast) var(--os-ease);
}
.os-filter__option input:checked {
	border-color: var(--wp--preset--color--green);
	background: var(--wp--preset--color--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2 4.9 8.5 9.5 3.5' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.os-filter__option input:focus-visible { outline: 2px solid var(--wp--preset--color--white); outline-offset: 2px; }
.os-filter__option:hover input:not(:checked) { border-color: var(--wp--preset--color--white); }

.os-filter__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid rgb(255 255 255 / 0.18);
}
/* Filter and Clear all are the design system buttons (primary, and the secondary variation),
   without the sliding arrow. */
.os-filter__actions .wp-block-button { margin: 0; }
.os-filter__actions .wp-block-button__link::after { content: none; }
.os-filter__actions .wp-block-button:not(.is-style-os-secondary) .wp-block-button__link { background: var(--wp--preset--color--green); }
.os-filter__actions .wp-block-button:not(.is-style-os-secondary) .wp-block-button__link:hover {
	background: var(--wp--preset--color--green-dark);
	box-shadow: 0 8px 20px rgb(1 158 132 / 0.3);
}
.os-filter__panel :is(a, button, input):focus-visible { outline-color: var(--wp--preset--color--white); }
/* The secondary variation's colours (styles/blocks/button-secondary.json) only load on pages
   with a Button block; the listing has none, so they are set here too. */
.os-filter__actions .is-style-os-secondary .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

/* Results row (os_render_listing_results), between the section head and the cards: the count,
   the selected filters as removable chips, Clear all. */
.os-results {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 24px;
	padding: 14px 0;
	border-block: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--custom--color--tertiary);
}
.os-results__count { margin: 0; }
.os-results__count strong { font-weight: 700; color: var(--wp--preset--color--ink-deep); }
.os-results__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.os-results__chip {
	/* The design system badge (OS Badge, styles/blocks/paragraph-badge.json) with a close button. */
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px 6px 12px;
	border-radius: 100px;
	background: rgb(20 199 180 / 0.1);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	line-height: normal;
	text-decoration: none;
	color: var(--wp--preset--color--teal);
	transition: background-color var(--os-fast) var(--os-ease);
}
.os-results__close {
	position: relative;
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	opacity: 0.75;
	transition: opacity var(--os-fast) var(--os-ease);
}
.os-results__close::before {
	content: "";
	position: absolute;
	inset: 2px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='m1.5 1.5 7 7m0-7-7 7' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='m1.5 1.5 7 7m0-7-7 7' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.os-results__chip:hover { background: rgb(20 199 180 / 0.18); }
.os-results__chip:hover .os-results__close { opacity: 1; }
.os-results__chip:focus-visible { outline: 2px solid var(--wp--preset--color--teal); outline-offset: 2px; }

/* Cards: 3 / 2 / 1 per row (Figma: 408px, 24px apart). */
.os-blog-list > .os-blog-list__query { margin-top: 32px; }
.os-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.os-blog-grid > li { margin: 0; }

/* Cards (user, 2026-10-02). At rest: image, Service tag, title, and date · read time pinned
   bottom-left, with no border (a soft shadow defines the card). On hover (pointer devices) or
   keyboard focus, the panel slides up from the bottom over the whole card as frosted brand
   glass: the Platforms-card colours (brand blue, violet, then a denser brand blue at the
   bottom so the white date stays readable, with a teal glow in the bottom corner), the image blurred behind it, white text, and the excerpt and
   Know more fading in. The card lifts like the Platforms cards. Transform and opacity only, so
   the card never changes size; the blur is applied only while open. Touch screens keep the
   resting card; a tap anywhere opens the post (os-blog.js). */
.os-blog-card {
	--os-card-media: 250px;
	--os-card-panel: 168px;
	position: relative;
	box-sizing: border-box;
	height: calc(var(--os-card-media) + var(--os-card-panel));
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--lg);
	background: var(--wp--preset--color--white);
	box-shadow: 0 1px 2px rgb(0 80 158 / 0.06), 0 8px 24px rgb(0 80 158 / 0.08);
	cursor: pointer;
	transition: transform var(--os-base) var(--os-ease), box-shadow var(--os-base) var(--os-ease);
}
.os-blog-card > * { margin: 0; }

.os-blog-card__image {
	height: var(--os-card-media);
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}
.os-blog-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--os-slow) var(--os-ease);
}

/* The panel: as tall as the card, parked below the image; it slides up on hover. */
.os-blog-card__body {
	position: absolute;
	inset: 0;
	z-index: 2;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 24px 32px;
	background: var(--wp--preset--color--white);
	transform: translateY(var(--os-card-media));
	transition: transform var(--os-base) var(--os-ease), background-color var(--os-base) var(--os-ease);
}
.os-blog-card__body > * { position: relative; margin: 0; }
/* The colour fill: fades in as the panel rises (gradients can't transition, opacity can). */
.os-blog-card__body::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(165deg, var(--wp--preset--color--brand) 0, var(--wp--preset--color--navy-deep) 100%);
	opacity: 0;
	transition: opacity var(--os-base) var(--os-ease);
}

.os-blog-card__tag {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.35;
	color: var(--wp--preset--color--brand);
	transition: color var(--os-base) var(--os-ease);
}
.os-blog-card__tag a { position: relative; z-index: 2; color: inherit; text-decoration: none; }
.os-blog-card__tag a:hover { text-decoration: underline; }
.os-blog-card__tag .wp-block-post-terms__separator { color: inherit; opacity: 0.6; }

.os-blog-card__body > .os-blog-card__title {
	margin-top: 8px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.35;
	color: var(--wp--preset--color--ink);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	/* Two lines, even where the clamp isn't applied (narrow two-column cards). */
	max-height: 2.7em;
	overflow: hidden;
	transition: color var(--os-base) var(--os-ease);
}
.os-blog-card__title a { color: inherit; text-decoration: none; }

/* Excerpt + Know more: hidden at rest, rise into place after the panel. */
.os-blog-card__body > .os-blog-card__desc {
	margin-top: 12px;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity var(--os-base) var(--os-ease), transform var(--os-base) var(--os-ease);
}
.os-blog-card__desc > * { margin: 0; }
.os-blog-card__excerpt p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.5;
	color: inherit;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
}
.os-blog-card__desc > .wp-block-read-more { position: relative; z-index: 2; margin-top: 24px; }

/* Date · read time, pinned bottom-left over everything. */
.os-blog-card__meta {
	position: absolute;
	left: 32px;
	right: 32px;
	bottom: 24px;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.35;
	color: var(--wp--preset--color--ink);
	pointer-events: none;
	transition: color var(--os-base) var(--os-ease);
}
.os-blog-card__meta > * { margin: 0; }
.os-blog-card__meta .os-read-time::before { content: "·"; margin: 0 0.45em; }

/* Open: hover (pointer devices) or keyboard focus. */
@media (hover: hover) {
	.os-blog-card:hover { transform: translateY(-6px); box-shadow: 0 32px 64px rgb(23 72 232 / 0.18); }
	.os-blog-card:hover .os-blog-card__image img { transform: scale(1.06); }
	.os-blog-card:hover .os-blog-card__body { transform: none; background-color: rgb(255 255 255 / 0); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); }
	.os-blog-card:hover .os-blog-card__body::before { opacity: 1; }
	.os-blog-card:hover :is(.os-blog-card__tag, .os-blog-card__title, .os-blog-card__desc, .os-blog-card__meta, .wp-block-read-more) { color: var(--wp--custom--color--on-brand); }
	.os-blog-card:hover .os-blog-card__desc { opacity: 1; transform: none; transition-delay: 0.1s; }
	.os-blog-card:hover .wp-block-read-more.is-style-os-explore { background-size: 100% 1px; }
}
.os-blog-card:has(:focus-visible) { transform: translateY(-6px); box-shadow: 0 32px 64px rgb(23 72 232 / 0.18); }
.os-blog-card:has(:focus-visible) .os-blog-card__body { transform: none; background-color: rgb(255 255 255 / 0); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); }
.os-blog-card:has(:focus-visible) .os-blog-card__body::before { opacity: 1; }
.os-blog-card:has(:focus-visible) :is(.os-blog-card__tag, .os-blog-card__title, .os-blog-card__desc, .os-blog-card__meta, .wp-block-read-more) { color: var(--wp--custom--color--on-brand); }
.os-blog-card:has(:focus-visible) .os-blog-card__desc { opacity: 1; transform: none; }
/* The title is line-clamped (overflow hidden), which clips its link's focus ring: ring the card. */
.os-blog-card:has(.os-blog-card__title a:focus-visible) { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 3px; }
.os-blog-card__title a:focus-visible { outline: 0; }
.os-blog-card :is(.os-blog-card__tag, .wp-block-read-more) :focus-visible,
.os-blog-card .wp-block-read-more:focus-visible { outline-color: var(--wp--custom--color--on-brand); }

/* Press feedback. */
.os-blog-card:active { transform: translateY(-6px) scale(0.99); }
@media (hover: none) {
	.os-blog-card:active { transform: scale(0.99); }
}

@media (prefers-reduced-motion: reduce) {
	.os-blog-card,
	.os-blog-card *,
	.os-blog-card *::before { transition-duration: 0.01s !important; transition-delay: 0s !important; }
	.os-blog-card:hover,
	.os-blog-card:has(:focus-visible),
	.os-blog-card:hover .os-blog-card__image img,
	.os-blog-card:active { transform: none; }
}

.os-blog-list__empty {
	margin: 0;
	padding: 48px 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--large);
}

/* Pagination (os_render_pagination). Desktop: round arrows and page numbers (Figma 50:12167). */
.os-pagination .wp-block-query-pagination-previous,
.os-pagination .wp-block-query-pagination-next {
	width: 35px;
	height: 35px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: url("../images/ui/carousel-next.svg") center / 35px no-repeat;
	cursor: pointer;
	transition: transform var(--os-base) var(--os-ease);
}
.os-pagination .wp-block-query-pagination-previous { transform: scaleX(-1); }
.os-pagination .is-disabled { background-image: url("../images/ui/carousel-prev.svg"); cursor: default; transform: none; }
.os-pagination .wp-block-query-pagination-next.is-disabled { transform: scaleX(-1); }
.os-pagination a.wp-block-query-pagination-next:hover { transform: scale(1.08); }
.os-pagination a.wp-block-query-pagination-previous:hover { transform: scaleX(-1) scale(1.08); }
.os-pagination a:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 2px; }
.os-blog-list__query > .os-pagination {
	gap: 24px 30px;
	margin-top: 48px;
}
.os-pagination > * { margin: 0 !important; }
.os-pagination .wp-block-query-pagination-previous { order: 1; }
.os-pagination .os-pagination__status { order: 2; }
.os-pagination .wp-block-query-pagination-numbers { order: 3; }
.os-pagination .wp-block-query-pagination-next { order: 4; }
.os-pagination .wp-block-query-pagination-previous,
.os-pagination .wp-block-query-pagination-next {
	display: inline-block;
	flex-shrink: 0;
	overflow: hidden;
	font-size: 0;
	color: transparent;
}
.os-pagination .wp-block-query-pagination-numbers {
	display: flex;
	align-items: center;
	gap: 32px;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.5;
}
.os-pagination .page-numbers {
	color: var(--wp--custom--color--muted);
	text-decoration: none;
	transition: color var(--os-fast) var(--os-ease);
}
.os-pagination a.page-numbers:hover { color: var(--wp--preset--color--brand); }
.os-pagination .page-numbers.current { font-weight: 800; color: var(--wp--preset--color--brand); }
.os-pagination .page-numbers.dots { color: var(--wp--preset--color--ink-deep); }
.os-pagination__status { display: none; }

/* List: responsive. */
@media (max-width: 1100px) {
	.os-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.os-blog-list__head { flex-direction: column; align-items: stretch; }
	.os-blog-filters { position: relative; }
	.os-blog-filters > .os-filter { position: static; flex: 1 1 auto; min-width: 0; }
	.os-filter__toggle { width: 100%; }
	.os-filter__panel { left: 0; right: 0; width: auto; }
}
@media (max-width: 768px) {
	.os-blog-list { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6); }
	.os-blog-list > .os-blog-list__query { margin-top: 24px; }
	/* Filter popup: Services and Industries are accordions (os-blog.js), one column. */
	.os-filter__groups { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.os-filter__group + .os-filter__group { margin-top: 4px; }
	.os-filter__legend { padding: 0; }
	.os-js .os-filter__group-toggle { min-height: 44px; cursor: pointer; }
	/* The site's accordion icon (FAQs, os-faq.css) in white on the blue popup: a white plus in a
	   faint ring that turns into a brand minus on a white circle when open. */
	.os-js .os-filter__group-toggle::after {
		content: "";
		flex-shrink: 0;
		box-sizing: border-box;
		width: 20px;
		height: 20px;
		margin-left: auto;
		border: 1px solid rgb(255 255 255 / 0.35);
		border-radius: 50%;
		background:
			linear-gradient(currentColor, currentColor) center / 8px 1.5px no-repeat,
			linear-gradient(currentColor, currentColor) center / 1.5px 8px no-repeat;
		color: var(--wp--preset--color--white);
		transition: transform var(--os-base) var(--os-ease), background-size var(--os-base) var(--os-ease), background-color var(--os-base) var(--os-ease), border-color var(--os-base) var(--os-ease), color var(--os-base) var(--os-ease);
	}
	.os-js .os-filter__group-toggle[aria-expanded="true"]::after {
		transform: rotate(180deg);
		border-color: var(--wp--preset--color--white);
		background-size: 8px 1.5px, 1.5px 0;
		background-color: var(--wp--preset--color--white);
		color: var(--wp--preset--color--brand);
	}
	.os-js .os-filter__group-toggle:focus-visible { outline: 2px solid var(--wp--preset--color--white); outline-offset: 2px; }
	/* A panel with one group is no accordion (os-blog.js switches its header off): no icon. */
	.os-js .os-filter__group-toggle:disabled { cursor: default; }
	.os-js .os-filter__group-toggle:disabled::after { content: none; }
	.os-js .os-filter__group:not(.is-open) .os-filter__list { display: none; }
	/* A closed last group: its line would sit on the buttons' line, so it goes. */
	.os-js .os-filter__group:last-child:not(.is-open) .os-filter__legend { border-bottom: 0; }
	.os-filter__actions { margin-top: 8px; }
	.os-filter__list { padding-block: 14px 18px; }
	/* Results row: the count on its own line, the chips in one row that scrolls sideways,
	   running to the screen edges. */
	.os-results__count { flex-basis: 100%; }
	.os-results__chips {
		flex: 1 1 100%;
		flex-wrap: nowrap;
		margin-inline: calc(-1 * var(--wp--custom--gutter));
		padding: 4px var(--wp--custom--gutter);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}
	.os-results__chips::-webkit-scrollbar { display: none; }
	.os-results__chip { flex-shrink: 0; white-space: nowrap; }
	.os-blog-card { --os-card-media: 220px; --os-card-panel: 160px; }
	.os-blog-card__body { padding: 20px 20px; }
	.os-blog-card__meta { left: 20px; right: 20px; bottom: 20px; }

	/* Mobile pagination (client findings): Previous · Page X of Y · Next, 44px controls. */
	.os-blog-list__query > .os-pagination { justify-content: space-between !important; flex-wrap: nowrap; gap: 12px; margin-top: 32px; }
	.os-pagination .wp-block-query-pagination-numbers { display: none; }
	.os-pagination__status {
		display: block;
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 600;
		color: var(--wp--preset--color--ink);
		white-space: nowrap;
	}
	.os-pagination .wp-block-query-pagination-previous,
	.os-pagination .wp-block-query-pagination-next {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		width: auto;
		min-width: 44px;
		height: 44px;
		border-radius: 0;
		background: none;
		transform: none !important;
		font-family: var(--wp--preset--font-family--heading);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 600;
		text-transform: uppercase;
		text-decoration: none;
		color: var(--wp--preset--color--ink);
	}
	.os-pagination .wp-block-query-pagination-previous::before,
	.os-pagination .wp-block-query-pagination-next::after {
		content: "";
		flex-shrink: 0;
		width: 35px;
		height: 35px;
		background: url("../images/ui/carousel-next.svg") center / 35px no-repeat;
	}
	.os-pagination .wp-block-query-pagination-previous::before { transform: scaleX(-1); }
	.os-pagination .is-disabled { color: var(--wp--custom--color--muted); }
	.os-pagination .is-disabled::before,
	.os-pagination .is-disabled::after { background-image: url("../images/ui/carousel-prev.svg"); }
	.os-pagination .wp-block-query-pagination-previous.is-disabled::before { transform: none; }
	.os-pagination .wp-block-query-pagination-next.is-disabled::after { transform: scaleX(-1); }
}
@media (max-width: 540px) {
	.os-blog-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.os-filter__panel { padding: 20px 16px; }
	.os-filter__groups { max-height: min(50vh, 380px); }
}

/* Editor (Site Editor → Blog Home / Single Posts): the editor makes every block
   position: relative; the card's panel and meta must stay absolute to show. */
.is-root-container .os-blog-card__body,
.is-root-container .os-blog-card__meta { position: absolute; }
.is-root-container .os-blog-card__meta.os-blog-card__meta { display: flex; flex-wrap: wrap; }
.is-root-container .os-blog-card__meta.os-blog-card__meta > .wp-block { margin-block: 0; }