/**
 * Platforms page (/platforms/, Platforms L0 Template, os/platforms-l0-* patterns; client brief
 * L0-Platforms_v2_041026.pdf, 2026-10-10). Most sections are existing components and bring their
 * own CSS: the hero (os-industry-list.css + the L1 hero eyebrow, os-service-detail.css), the
 * overview (Industry intro) and the focus cards (os-industry-list.css), FAQs and contact
 * (os-faq.css, os-service-detail.css). Only what is new lives here. Loads where a block with an
 * "os-platforms-l0" class renders (os_interactive_styles); not "os-platforms", Home's section.
 *
 * Section rhythm = Industries / Services: 48px above and below (24 on phones), 32px from the head to
 * the content (24 on phones), cards with 16px corners.
 */

/* ---------- Platform families (os/platforms-l0-families) ---------- */
/* The Home Platforms cards (user, 2026-10-10): os-platform (the 1.5px TechnIQk / AgentIQk gradient
   frame, 26px corners, set on the block) around os-platform-card (white, 24.5px corners, Home's
   padding, lift on hover) — all from os-theme.css. Here: 2 across the full width in the industry
   focus row (user, 2026-10-18: QK AI Labs card removed, "make the other 2 cards take over the whole
   width"; was 3 across), 1 on phones (≤640), cards in a row the same height
   with Know more on one line, the name as an H3 for screen readers only (the logo shows it), and
   the capsules (OS Tags) between the text and the button. Home's 2px offset of the second card
   and its fixed card heights are switched off. */
.os-platforms-l0-families .os-industry-focus__row { --os-focus-cols: 2; }
@media (max-width: 640px) {
	.os-platforms-l0-families .os-industry-focus__row { --os-focus-cols: 1; }
}
.os-industry-focus__row > .os-platforms-l0-family.os-platform {
	box-sizing: border-box;
	flex: 0 0 calc((100% - (var(--os-focus-cols) - 1) * var(--os-focus-gap)) / var(--os-focus-cols));
	min-width: 0;
	margin-top: 0;
}
.os-industry-focus__row > .os-platforms-l0-family.os-platform > .os-platform-card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
	min-height: 0;
}
/* Hidden on the site only: in the editor the name stays visible, so it can be edited. */
.os-platforms-l0-family .os-platforms-l0-family__name:not(.block-editor-block-list__block) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.os-platforms-l0-family .os-platform-card > .os-platform-card__logo { max-width: 100%; }
.os-platforms-l0-family .os-platform-card > .os-platform-card__logo img { max-width: 100%; height: auto; }
.os-platforms-l0-family .os-platform-card > .os-platform-card__text { max-width: none; }
.os-platforms-l0-family .os-platform-card > .os-platforms-l0-card__tags { margin-top: 24px; }
/* The button sits on the card's bottom edge, so the two line up whatever the copy's length. */
.os-platforms-l0-family .os-platform-card > .os-platform-card__link { margin-top: auto; padding-top: 28px; }
@media (max-width: 768px) {
	.os-platforms-l0-family .os-platform-card > .os-platforms-l0-card__tags { margin-top: 20px; }
	.os-platforms-l0-family .os-platform-card > .os-platform-card__link { padding-top: 20px; }
}

/* Card image (user, 2026-10-18: the client wants glass icons or an image in the two cards, "give in
   admin panel uploading option for image in each card", then "keep the image above logo and make it
   full width", "not columns"): the last block of each card is an Image block "Card image"
   (os-platforms-l0-card__image; Replace / Upload in the editor, where it stays in the flow under
   Know more to be easy to select). On the site it is the top of the card: edge to edge (the card's
   padding cancelled, its top corners), a 12:5 frame the image covers (centred), then the logo, text,
   capsules and Know more as before. Empty slot = the plain card. Default artwork:
   platforms/<family>-glass.svg (840×350, the client's Platforms-overview style); uploads: wide,
   about 12:5 (e.g. 1200×500), subject in the middle. */
.os-platforms-l0-family .os-platform-card > .os-platforms-l0-card__image { margin: 24px 0 0; max-width: 240px; }
.os-platforms-l0-family .os-platform-card > .os-platforms-l0-card__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
	box-shadow: none;
}
.os-platforms-l0-family .os-platform-card > .os-platforms-l0-card__image:not(.block-editor-block-list__block) {
	--os-card-pad-x: 42.5px;
	order: -1;
	align-self: stretch;
	max-width: none;
	margin: -38.5px calc(-1 * var(--os-card-pad-x)) 4px;
	overflow: hidden;
	border-radius: 24.5px 24.5px 0 0;
}
.os-platforms-l0-family .os-platform-card > .os-platforms-l0-card__image:not(.block-editor-block-list__block) img {
	aspect-ratio: 12 / 5;
	object-fit: cover;
	object-position: center;
}
@media (max-width: 1200px) {
	.os-platforms-l0-family .os-platform-card > .os-platforms-l0-card__image:not(.block-editor-block-list__block) { --os-card-pad-x: 32px; }
}
@media (max-width: 768px) {
	.os-platforms-l0-family .os-platform-card > .os-platforms-l0-card__image:not(.block-editor-block-list__block) { --os-card-pad-x: 22px; margin-top: -28px; }
}

/* ---------- Call to action (os/platforms-l0-cta) ---------- */
/* The OS Post CTA panel (os-post.css: ink-deep, glow, headline, divider, green button) across the
   wide width in a white section with the page's spacing (48, 24 on phones), as the case study
   CTA. Here the headline is an H2 (the brief's) with a line of text under it, so the two sit in
   one "copy" group in the panel's first column. */
.os-platforms-l0-cta {
	padding-top: 48px;
	padding-bottom: 48px;
	background: var(--wp--preset--color--white);
}
.os-platforms-l0-cta > .os-post-cta { margin-block: 0; }
.os-platforms-l0-cta .os-platforms-l0-cta__copy > * { margin: 0; }
.os-platforms-l0-cta .os-post-cta .os-post-cta__title { max-width: 760px; }
.os-platforms-l0-cta .os-platforms-l0-cta__copy > .os-platforms-l0-cta__text {
	max-width: 760px;
	margin-top: 12px;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.6;
	color: rgb(255 255 255 / 0.8);
}
@media (max-width: 768px) {
	.os-platforms-l0-cta { padding-top: 24px; padding-bottom: 24px; }
	.os-platforms-l0-cta .os-platforms-l0-cta__copy > .os-platforms-l0-cta__text { font-size: 15px; }
}

/* ---------- Framed focus cards (os/platforms-l2-benefits) ---------- */
/* The industry focus cards (Aurora, 3/2/1, padding 40/32/28) with the Home Platforms cards'
   1.5px gradient frame instead of the Card Blue edge: TechnIQk or AgentIQk. Was the Platforms
   page's family card until 2026-10-10; the platform pages' Benefits still use it. */
.os-platforms-l0-card {
	border: 1.5px solid transparent;
	background:
		linear-gradient(var(--wp--preset--color--white), var(--wp--preset--color--white)) padding-box,
		var(--wp--preset--gradient--techniqk) border-box;
}
.os-platforms-l0-card--agentiqk {
	background:
		linear-gradient(var(--wp--preset--color--white), var(--wp--preset--color--white)) padding-box,
		var(--wp--preset--gradient--agentiqk) border-box;
}
.os-platforms-l0-card > .os-platforms-l0-card__tags {
	margin-top: 24px;
}
.os-platforms-l0-card__tags li {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
	white-space: normal;
}
@media (max-width: 768px) {
	.os-platforms-l0-card > .os-platforms-l0-card__tags { margin-top: 20px; }
}