/**
 * Partners page (/partners/, Partners L0 Template, os/partners-* patterns; client brief
 * L0-Partners_Our_Partners_v3_061026.pdf, 2026-10-10) and the partner pages under it (Partners L1
 * Template, os/partners-l1-*; see the second half of this file). Most sections are existing components and
 * bring their own CSS: the hero, focus cards and centred heads (os-industry-list.css), overview,
 * FAQs, contact and the navy band (os-service-detail.css), award cards (os-theme.css + OS Carousel).
 * Only what is new lives here. Loads where a block with an "os-partners" class renders
 * (os_interactive_styles).
 *
 * 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.
 */

/* ---------- Partner logo strip (os/partners-logos-strip) ---------- */
/* Home's OS Logo Marquee (os-marquee.css, os-marquee.js) with the Strategic partners' logos and no
   heading (user, 2026-10-18), between the overview and the awards: the overview's 48px above it
   (24 on phones), the same below. */
.os-partners-logos-strip { padding-top: 0; padding-bottom: 48px; }
.os-partners-logos-strip > .wp-block-gallery { margin-block: 0; }
/* Logos with no margin in the file (UiPath's SVG) fill the 188 x 59 box and look bigger than the
   others: 70% of it, as the Strategic cards show UiPath at 104px beside 150px logos. */
.os-partners-logos-strip .os-partners-logos-strip__compact img { scale: 0.7; }
@media (max-width: 768px) {
	.os-partners-logos-strip { padding-bottom: 24px; }
}

/* ---------- Awards (os/partners-awards) ---------- */
/* The Home / Industries award card (os-theme.css) with the brief's content: logo, the award as an
   H3 and Know more at the bottom (the brief's link); no date (user, 2026-10-10). */
/* Editor: os-carousel.css isn't loaded there, so the cards wrap 3 to a row instead of stacking. */
.is-root-container .os-partners-awards > .is-style-os-carousel { display: flex; flex-wrap: wrap; gap: 24px; }
.is-root-container .os-partners-awards > .is-style-os-carousel > * { flex: 0 0 calc((100% - 48px) / 3); margin: 0 !important; }

/* ---------- Partners by focus (os/partners-focus) ---------- */
/* The industry focus cards on the site's blue gradient (user, 2026-10-10; the case study At a
   Glance / Industries stats card: 165deg brand → navy-deep, teal and electric corner glows, white
   text); "Best for:" in white, then what each group is best for as OS Chips (the Home Services
   panel's "-42% peak latency" pills; plain labels, not links), wrapping inside the card. */
.os-partners-focus .os-focus-card {
	isolation: isolate;
	border-color: transparent;
	background: linear-gradient(165deg, var(--wp--preset--color--brand) 0, var(--wp--preset--color--navy-deep) 100%);
}
.os-partners-focus .os-focus-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--wp--preset--color--teal) 20%, transparent) 0, transparent 300px),
		radial-gradient(circle at 0 0, color-mix(in srgb, var(--wp--preset--color--electric) 22%, transparent) 0, transparent 260px);
	pointer-events: none;
}
.os-partners-focus .os-focus-card > .os-focus-card__title { color: var(--wp--preset--color--white); }
.os-partners-focus .os-focus-card > .os-focus-card__text { color: var(--wp--custom--color--on-brand); }
.os-partners-focus__best strong { font-weight: 600; color: var(--wp--preset--color--white); }
.os-focus-card > .os-partners-focus__tags { margin-top: 10px; }
.os-partners-focus__tags > li { max-width: 100%; box-sizing: border-box; white-space: normal; }
.os-partners-focus .os-partners-focus__tags > li { color: var(--wp--preset--color--white); }

/* ---------- Strategic partners (os/partners-strategic) ---------- */
/* White section, centred head (os-industry-list__head), then the focus area cards in a grid:
   3 across, 2 at 1100px and below, 1 at 640px and below. The partner's name (H3, L1 cards) links to
   its partner page (brand on hover); proof links in the text are brand and underlined. Cards in a row
   share its height. */
.os-partners-strategic {
	padding-top: 48px;
	padding-bottom: 48px;
	background: var(--wp--preset--color--white);
}
.os-partners-strategic > * { margin-block: 0; }
.os-partners-strategic .os-industry-list__head > h2 { max-width: 897px; }
.os-partners-strategic > .os-partners-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: 32px;
}
.os-partners-grid > * { margin: 0; }
.os-partner-card__title a { color: inherit; text-decoration: none; }
.os-partner-card__title a:hover { color: var(--wp--preset--color--brand); text-decoration: underline; text-underline-offset: 3px; }
.os-partner-card__title a:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 2px; }
.os-partner-card__text a {
	color: var(--wp--preset--color--brand);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.os-partner-card__text a:hover { text-decoration-thickness: 2px; }
/* L0 cards (os-partner-card--logo; L1 offering cards keep their H3): the partner's logo in a 40px
   row (at most 150 wide, its own ratio), the text, then Learn more (Know more style, the Home
   award card link) at the bottom, so the links line up across a row. */
.os-partner-card--logo { display: flex; flex-direction: column; }
.os-partner-card--logo > .os-partner-card__logo { display: flex; align-items: center; height: 40px; margin: 0; }
.os-partner-card--logo > .os-partner-card__logo img { max-width: 100%; height: auto; }
.os-partner-card--logo > .os-partner-card__text { margin-top: 20px; }
.os-partner-card--logo > .os-partner-card__link { margin-top: auto; padding-top: 24px; }
/* The whole card is the link (user, 2026-10-10): Learn more stretched over it, as the Industries
   cards' title link (::before: the link's ::after is its arrow); os-hover-lift lifts the card and underlines Learn more on hover. Keyboard
   focus outlines the card. Not in the editor, where it would cover the card's blocks. */
.os-partner-card--logo .os-partner-card__link a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.os-partner-card--logo:has(.os-partner-card__link a:focus-visible) { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 3px; }
.os-partner-card--logo .os-partner-card__link a:focus-visible { outline: 0; }
.os-partner-card--logo:has(.os-partner-card__link a:focus-visible) .os-partner-card__link a { background-size: 100% 1px; }
.is-root-container .os-partner-card--logo .os-partner-card__link a::before { content: none; }

@media (max-width: 1100px) {
	.os-partners-strategic > .os-partners-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	.os-partners-strategic { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6); }
	.os-partners-strategic > .os-partners-grid { gap: 16px; margin-top: 24px; }
}
@media (max-width: 640px) {
	.os-partners-strategic > .os-partners-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Ecosystem (os/partners-ecosystem) ---------- */
/* The Technology Partners band and head (os-service-detail-partners), then its glass panel split
   into logo cells: 4 across, 3 at 1100px and below, 2 at 640px and below. Each cell holds a white
   logo, centred, at its own size, never wider than the cell; not a link (user, 2026-10-10), so no
   hover. */
/* White eyebrow on the band, named here so the editor shows it as the front end does (there the
   eyebrow style's brand colour otherwise wins over the head's white). */
.os-partners-ecosystem .os-service-detail-partners__head > .is-style-os-eyebrow { color: var(--wp--preset--color--white); }
.os-partners-ecosystem > .os-partners-logos {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	margin-top: 32px;
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--lg);
	background: rgb(255 255 255 / 0.08);
	filter: drop-shadow(0 8px 16px rgb(0 0 0 / 0.2));
}
.os-partners-logos > .os-partners-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 112px;
	box-sizing: border-box;
	margin: 0;
	padding: 16px 24px;
	box-shadow: 1px 0 0 rgb(255 255 255 / 0.15), 0 1px 0 rgb(255 255 255 / 0.15);
}
.os-partners-logo img { display: block; max-width: 100%; height: auto; }

@media (max-width: 1100px) {
	.os-partners-ecosystem > .os-partners-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	.os-partners-ecosystem > .os-partners-logos { margin-top: 24px; }
	.os-partners-logos > .os-partners-logo { height: 88px; padding: 12px 16px; }
}
@media (max-width: 640px) {
	.os-partners-ecosystem > .os-partners-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================================================
   Partner pages (/partners/<slug>/, Partners L1 Template, os/partners-l1-* patterns; client brief
   L1-Partners_DevRev_v3_061026.pdf, 2026-10-10). Same rhythm as above.
   ========================================================================================= */

/* ---------- Offerings (os/partners-l1-offerings) ---------- */
/* The Home Six Pillars cards (OS Pillar Card, user 2026-10-10), 2 across (1 at 640px and below).
   The cards are wider and the text longer than on Home, so the card grows with its text (at least
   Home's 246px): the text keeps clear of the icon (top right, as Home) and Learn more sits in the
   flow at the bottom (Home pins it 194px from the top). Cards in a row share its height. */
.os-partners-strategic > .os-partners-grid--2up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.os-partners-offering.is-style-os-pillar {
	display: flex;
	flex-direction: column;
	height: auto;
	min-height: 246px;
	padding-bottom: 32px !important;
}
.os-partners-offering.is-style-os-pillar > .wp-block-heading,
.os-partners-offering.is-style-os-pillar > p { max-width: calc(100% - 150px); }
.os-partners-offering.is-style-os-pillar > .wp-block-buttons { position: static; margin-top: auto; padding-top: 24px; }
@media (max-width: 768px) {
	.os-partners-offering.is-style-os-pillar { min-height: 236px; padding-bottom: 30px !important; }
	.os-partners-offering.is-style-os-pillar > .wp-block-heading,
	.os-partners-offering.is-style-os-pillar > p { max-width: 62%; }
}
@media (max-width: 640px) {
	.os-partners-strategic > .os-partners-grid--2up { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Where we work (os/partners-l1-where) ---------- */
/* The live site's Industries and Geos, as 2 rows (user, 2026-10-10: "on rows instead of column";
   2 columns came first). White section, centred head, then one panel at the wide width: the
   testimonial panel's surface (on-brand, teal and violet corner glows, Line edge, 16px corners,
   TechnIQk 3px hairline on top), split into rows by a 1px Line rule. Row: the label (an H4 with
   the theme's H3 typography in brand blue, left-aligned: set on the block, no CSS here), 16px, then its items 4 across (2 at 1100px and below, 1 at
   640px and below): a 48px picture (an industry's white icon on the L3 feature rows' navy icon
   tile, or a region's photo), the name (as the feature row titles) and an optional detail line.
   No boxes or rules between items. Not links, so no hover. */
.os-partners-where {
	padding-top: 48px;
	padding-bottom: 48px;
	background: var(--wp--preset--color--white);
}
.os-partners-where > * { margin-block: 0; }
.os-partners-where > .os-partners-where__panel {
	position: relative;
	margin-top: 32px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--preset--border-radius--lg);
	background:
		radial-gradient(70% 140% at 100% 0%, rgb(20 199 180 / 0.08) 0, rgb(20 199 180 / 0) 60%),
		radial-gradient(60% 120% at 0% 100%, rgb(108 92 231 / 0.07) 0, rgb(108 92 231 / 0) 60%),
		var(--wp--custom--color--on-brand);
}
.os-partners-where__panel::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: var(--wp--preset--gradient--techniqk);
}
.os-partners-where__panel > .os-partners-where__item { margin: 0; padding: 32px 40px; }
.os-partners-where__item + .os-partners-where__item { border-top: 1px solid var(--wp--preset--color--line); }
.os-partners-where__item > * { margin: 0; }
.os-partners-where__item > .os-partners-where__tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px 24px;
	margin-top: 16px;
}
.os-partners-where__tiles > .os-partners-where__tile { display: flex; align-items: center; gap: 16px; margin: 0; }
.os-partners-where__tile > * { margin: 0; }
.os-partners-where__tile > .os-partners-where__icon,
.os-partners-where__tile > .os-partners-where__photo { flex: 0 0 48px; width: 48px; height: 48px; }
.os-partners-where__tile > .os-partners-where__icon {
	display: grid;
	place-items: center;
	border-radius: var(--wp--preset--border-radius--md);
	background: linear-gradient(141.3deg, #00509e 14.286%, #001f54 92.418%); /* The L3 feature rows' icon tile (Home's Services tab icon). */
}
.os-partners-where__icon img { display: block; }
.os-partners-where__photo img { display: block; border-radius: var(--wp--preset--border-radius--md); }
.os-partners-where__tile > .os-partners-where__copy { min-width: 0; }
.os-partners-where__copy > * { margin: 0; }
.os-partners-where__copy > .os-partners-where__name {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
}
.os-partners-where__copy > .os-partners-where__detail {
	margin-top: 2px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--custom--color--muted);
}
@media (max-width: 1100px) {
	.os-partners-where__panel > .os-partners-where__item { padding: 32px; }
	.os-partners-where__item > .os-partners-where__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	.os-partners-where { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6); }
	.os-partners-where > .os-partners-where__panel { margin-top: 24px; }
	.os-partners-where__panel > .os-partners-where__item { padding: 24px; }
	.os-partners-where__copy > .os-partners-where__name { font-size: var(--wp--preset--font-size--medium); }
}
@media (max-width: 640px) {
	.os-partners-where__item > .os-partners-where__tiles { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Success metrics (os/partners-l1-results) ---------- */
/* The L3 results strip (--3up: roomier cells, 16px labels); its 4 cells sit 4 across above 1100px
   through --3up's own counts (os-service-detail.css). */

/* ---------- Computer modules (os/partners-l1-features) ---------- */
/* The Home "Services that scale with you" tabs (user, 2026-10-10): the same tab list on the left
   (os-services__tabs, os-theme.css: icon tile + name, selected = blue tint and ring; 2 by 2 above
   the panel at 1100px and below, a sideways chip row on phones), on Services Wash. The panel is a
   navy box like Home's, sized to its text (Home's is a fixed 498px around a photo; the modules
   have no photos): the module's title (Home's panel title, 32px) and the brief's paragraphs. It
   is at least as tall as the tab list, so short modules don't leave the list hanging. */
.os-partners-modules { padding-top: 48px; padding-bottom: 48px; }
.os-partners-modules > * { margin-block: 0; }
.os-partners-modules > .os-partners-modules__tabs { align-items: stretch; margin-top: 32px !important; }
.os-partners-modules__tabs > .os-tabs__panels { display: grid; }
.os-partners-module {
	position: relative;
	margin: 0;
	padding: 48px;
	overflow: hidden;
	border-radius: 24px;
	background:
		radial-gradient(circle at 100% 0, rgb(23 72 232 / 0.35) 0, rgb(23 72 232 / 0) 420px),
		radial-gradient(circle at 0 100%, rgb(20 199 180 / 0.16) 0, rgb(20 199 180 / 0) 360px),
		var(--wp--preset--color--navy-deep);
	color: var(--wp--preset--color--white);
	isolation: isolate;
}
.os-partners-module > * { margin: 0; }
.os-partners-module > .os-partners-module__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: 32px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--wp--preset--color--white);
}
.os-partners-module > .os-partners-module__text {
	margin-top: 16px;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: 1.75;
	color: rgb(255 255 255 / 0.85);
}
.os-partners-module > .os-partners-module__title + .os-partners-module__text { margin-top: 20px; }
@media (max-width: 1100px) {
	.os-partners-module { padding: 40px; }
}
@media (max-width: 768px) {
	.os-partners-modules { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6); }
	.os-partners-modules > .os-partners-modules__tabs { margin-top: 24px !important; gap: 20px; }
	.os-partners-module { padding: 28px 24px; border-radius: 20px; }
	.os-partners-module > .os-partners-module__title { font-size: 26px; }
	.os-partners-module > .os-partners-module__text { font-size: 15px; }
}

/* ---------- Testimonial (os/partners-l1-testimonial) ---------- */
/* The case study testimonial with a centred head above it, 32px (24 on phones) to the panel. */
.os-partners-testimonial > .os-industry-list__head + .os-case-detail-quote { margin-top: 32px; }
@media (max-width: 768px) {
	.os-partners-testimonial > .os-industry-list__head + .os-case-detail-quote { margin-top: 24px; }
}

/* ---------- Success stories + Insights (os/partners-l1-stories) ---------- */
/* The service page's Success Stories / Insights tabs (os-service-detail-insights, user 2026-10-10:
   "Challenges we've solved" and "Leading thoughts" in one tabbed section): its cards (231px panel,
   3 title lines), with 4 title lines where the brief's long titles wrap once more: 1101 to 1340px
   (narrowest cards in the 3-up view) and phones. Doubled class to win over os-service-detail.css. */
@media (min-width: 1101px) and (max-width: 1340px), (max-width: 540px) {
	.os-partners-cards.os-service-detail-insights .os-case-grid .os-blog-card { --os-card-panel: 258px; }
	.os-partners-cards.os-service-detail-insights .os-case-grid .os-blog-card__body > .os-blog-card__title { max-height: 5.4em; -webkit-line-clamp: 4; line-clamp: 4; }
}