/*
 * OS CSR page (/csr/, client brief client-html/Orbital_ QK_CSR Page.pdf). Most sections reuse
 * Industries/Services/Partners components as is (results strip, automate cards, case study
 * testimonial, news/award cards, common OS FAQs, OS Post CTA) with no extra CSS. These rules
 * cover only the pieces that needed a new design: the image+text overview, the 4-up metrics
 * strip and the partner hospital cards, plus the CTA panel's section wrapper.
 */

/* ---------- Testimonials (os/csr-testimonial) ---------- */
/* The case study testimonial's own head-to-quote gap is 0 (reset by
   .os-case-detail-testimonial > * { margin-block: 0 }); the Partners L1 testimonial
   (os-partners-testimonial) adds 32px / 24px back, and this section follows it so the
   spacing matches the rest of the site rather than the flow layout's default block gap. */
.os-csr-testimonial > .os-industry-list__head + .os-case-detail-quotes { margin-top: 32px; }
@media (max-width: 768px) {
	.os-csr-testimonial > .os-industry-list__head + .os-case-detail-quotes { margin-top: 24px; }
}
/* Testimonials: an OS Slider (os-case-detail-quotes), a carousel once there are two or more
   quotes; its bars (centred, as every OS Slider) sit 32px under the quotes, 24px on phones. */
.os-csr-testimonial > .os-slider__controls { margin-top: 32px; }
@media (max-width: 768px) {
	.os-csr-testimonial > .os-slider__controls { margin-top: 24px; }
}

/* ---------- Overview (os/csr-overview) ---------- */
/* Product image on the left, eyebrow/H2/text on the right (stacked, image on top, below 1101px).
   The existing text-only overview/intro patterns (OS Service Overview, OS Industry Intro) have no
   image slot, so this is a new, small two-column layout rather than a card or a hero reuse. */
.os-csr-overview {
	padding-top: 48px;
	padding-bottom: 48px;
	background: var(--wp--preset--color--white);
}
.os-csr-overview > * { margin-block: 0; }
.os-csr-overview__body {
	display: grid;
	grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
	align-items: center;
	gap: 48px;
}
.os-csr-overview__body > * { margin: 0; }
.os-csr-overview__media {
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--lg);
	box-shadow: var(--wp--preset--shadow--soft);
}
.os-csr-overview__media img { display: block; width: 100%; height: auto; }
.os-csr-overview__text > * { margin: 0; }
.os-csr-overview__text > .os-csr-overview__title {
	margin-top: var(--wp--custom--section-head-gap);
	font-weight: 600;
}
.os-csr-overview__text > .os-csr-overview__title + p { margin-top: 24px; }
.os-csr-overview__text > p + p { margin-top: 16px; }

@media (max-width: 1100px) {
	.os-csr-overview__body { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.os-csr-overview__media { justify-self: center; max-width: 440px; width: 100%; }
}
@media (max-width: 768px) {
	.os-csr-overview { padding-top: 24px; padding-bottom: 24px; }
	.os-csr-overview__body { gap: 24px; }
}

/* ---------- Focus areas (os/csr-focus) ---------- */
/* The Home Six Pillars cards (OS Pillar Card, user 2026-10-14) in the OS Service Automate grid
   (3 / 2 ≤1100 / 1 ≤640), at auto height as the platform pages' key features (os-platforms-l2.css):
   no link under the text, so the card is as tall as its text, 32px above and below it, with the
   ring and icon centred on that height. os-partners-offering (os-partners.css) keeps the text
   clear of the icon. */
.os-csr-focus .os-partners-offering.is-style-os-pillar {
	min-height: 0;
	padding-top: 32px !important;
	padding-bottom: 32px !important;
}
.os-csr-focus .os-partners-offering.is-style-os-pillar::before { top: 50%; transform: translateY(-50%); }
.os-csr-focus .os-partners-offering.is-style-os-pillar > .wp-block-image { top: 50%; }

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

/* ---------- Partner hospitals (os/csr-hospitals) ---------- */
/* The brief asks for a plain list, not a heading per hospital: small cards with a hospital icon, the
   name and location as plain text. 3 across on desktop, 2 on tablets, 1 on phones. */
.os-csr-hospitals {
	padding-top: 48px;
	padding-bottom: 48px;
	background: var(--wp--preset--color--white);
}
.os-csr-hospitals > * { margin-block: 0; }
.os-csr-hospital-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	margin-top: 32px !important;
}
.os-csr-hospital-grid > * { margin: 0; }
.os-csr-hospital {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	flex: 0 0 calc((100% - 48px) / 3);
	min-width: 0;
	padding: 24px;
	border: 1px solid var(--wp--custom--color--card-blue);
	border-radius: var(--wp--preset--border-radius--lg);
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--soft);
}
.os-csr-hospital > * { margin: 0; }
/* Icon: the dark blue gradient tile with a white icon (user, 2026-10-14), as the L3 feature rows
   and the partner page's Where we work tiles (Home's Services tab icon): 48px, md corners. The
   icon is the Healthcare segments' hospital (industries/seg-hospital.svg, a line icon), white
   through a mask. */
.os-csr-hospital__icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: var(--wp--preset--border-radius--md);
	background: linear-gradient(141.3deg, #00509e 14.286%, #001f54 92.418%);
}
.os-csr-hospital__icon::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--wp--preset--color--white);
	mask: url("../images/industries/seg-hospital.svg") center / 24px no-repeat;
	-webkit-mask: url("../images/industries/seg-hospital.svg") center / 24px no-repeat;
}
.os-csr-hospital__name {
	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--ink);
}
.os-csr-hospital__place {
	margin-top: 4px !important;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--ink-soft);
}

@media (max-width: 1100px) {
	.os-csr-hospital { flex: 0 0 calc((100% - 24px) / 2); }
}
@media (max-width: 768px) {
	.os-csr-hospitals { padding-top: 24px; padding-bottom: 24px; }
	.os-csr-hospital-grid { gap: 16px; margin-top: 24px !important; }
}
@media (max-width: 640px) {
	.os-csr-hospital { flex: 1 1 100%; }
}

/* ---------- Founder's message (os/csr-founder) ---------- */
/* The blog post's author box (OS Author Box, os-theme.css; user 2026-10-14) under a centred H2,
   on a white section (48px rhythm, 24px on phones). The message comes first and the name + role
   sit at the bottom (the box's space-between column, reversed from the blog's order; user,
   2026-10-14). The message is a Quote block in the box's text slot (os-author-box__bio): no quote
   border/padding, a teal opening mark, and larger type than the blog's bio: Inter 500 x-large 24
   (the blog bio is 18), large 18 on phones (bio 16), as the testimonial's type. */
.os-csr-founder {
	padding-top: 48px;
	padding-bottom: 48px;
	background: var(--wp--preset--color--white);
}
.os-csr-founder > * { margin-block: 0; }
.os-csr-founder > .os-industry-list__head + .os-author-box { margin-top: 32px; }
.os-author-box > .os-csr-founder__quote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-style: normal;
}
.os-csr-founder__quote::before {
	content: "\201C";
	content: "\201C" / "";
	display: block;
	height: 40px;
	overflow: hidden;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 80px;
	font-weight: 700;
	line-height: 0.82;
	color: var(--wp--preset--color--teal);
}
.os-author-box > .os-author-box__body > .os-csr-founder__quote {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--preset--color--white);
}
.os-csr-founder__quote > p {
	margin: 0;
	font: inherit;
	color: inherit;
}
/* Name + designation tighter than the blog box (user, 2026-10-14: "narrower height wise"): same
   sizes, the name at line-height 1.2 (blog 1.4) and the designation 2px under it (blog 8px) at
   line-height 1.4 (blog 1.5). */
.os-csr-founder .os-author-box__head > .os-author-box__name { line-height: 1.2; }
.os-csr-founder .os-author-box__head > .os-author-box__name + .os-author-box__role { margin-top: 2px; }
.os-csr-founder .os-author-box__head > .os-author-box__role { line-height: 1.4; }

@media (max-width: 768px) {
	.os-csr-founder { padding-top: 24px; padding-bottom: 24px; }
	.os-csr-founder > .os-industry-list__head + .os-author-box { margin-top: 24px; }
	.os-csr-founder__quote::before { height: 32px; font-size: 64px; }
	.os-author-box > .os-author-box__body > .os-csr-founder__quote { font-size: var(--wp--preset--font-size--large); }
}

/* ---------- Closing CTA (os/csr-contact) ---------- */
/* The OS Post CTA panel on a white section, as the Platforms L0 / Contact page CTAs, but on the
   site's dark blue gradient (165deg brand → navy-deep, as the author box) without the panel's
   purple glow (user, 2026-10-14: "keep it dark, remove the background, keep a dark gradient").
   The copy on the left; the ways to reach the program as OS Contact Methods (os-theme.css,
   on-dark) right of the divider, 480px wide (the email on one line at 24px), given prominence (user). Below 1101px the rows go
   under the copy, full width, no divider. */
.os-csr-contact {
	padding-top: 48px;
	padding-bottom: 48px;
	background: var(--wp--preset--color--white);
}
.os-csr-contact > .os-post-cta {
	margin-block: 0;
	background: linear-gradient(165deg, var(--wp--preset--color--brand) 0%, var(--wp--preset--color--navy-deep) 100%);
	border-radius: var(--wp--preset--border-radius--lg);
}
.os-csr-contact > .os-post-cta::before { display: none; }
.os-csr-contact .os-post-cta .os-post-cta__title { max-width: 560px; }
.os-csr-contact .os-csr-contact__copy > * { margin: 0; }
.os-csr-contact .os-csr-contact__copy > .os-csr-contact__text {
	max-width: 560px;
	margin-top: 16px;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.6;
	color: rgb(255 255 255 / 0.85);
}
.os-csr-contact .os-post-cta > .os-post-cta__actions.os-contact-methods {
	flex-direction: column;
	align-items: stretch;
	gap: 16px;
	width: 480px;
}

@media (max-width: 1100px) {
	.os-csr-contact .os-post-cta { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
	.os-csr-contact .os-post-cta > .os-post-cta__actions.os-contact-methods { width: auto; min-width: 0; padding-left: 0; }
	.os-csr-contact .os-post-cta > .os-post-cta__actions.os-contact-methods::before { display: none; }
}
@media (max-width: 768px) {
	.os-csr-contact { padding-top: 24px; padding-bottom: 24px; }
	.os-csr-contact .os-csr-contact__copy > .os-csr-contact__text { font-size: 15px; }
	.os-csr-contact .os-post-cta { row-gap: 24px; }
	.os-csr-contact .os-post-cta > .os-post-cta__actions.os-contact-methods { gap: 12px; }
}