/*
 * PRODUCTS-A: CloudMaster 365™, ValidationMaster eQMS™, ValidationMaster IQ™.
 * Styles for the ss_proda_* modules (template-parts/modules/ss_proda_*.php).
 * Loads after base.css and uses its tokens.
 */

.ss-proda-flush-top { padding-top: 0; }

/* ---------- media / art slot ---------- */
.ss-proda-media { position: relative; }
.ss-proda-media img { width: 100%; height: auto; }
.ss-proda-media--art .ss-art-todo { min-height: 300px; }
.ss-proda-media--wide { max-width: 780px; margin: 0 auto; }

/* ---------- shared bits: chips, notes ---------- */
.ss-proda-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin: 32px 0 0; padding: 0; list-style: none; }
.ss-proda-chips--left { justify-content: flex-start; margin-top: 24px; }
.ss-proda-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid #cfe0f5; box-shadow: 0 4px 14px rgba(14, 43, 84, .06); font-family: var(--vm-font-head); font-size: 13.5px; font-weight: 500; color: var(--vm-navy-800); }
.ss-proda-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--vm-green); flex: none; }
.ss-section--dark .ss-proda-chip { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #fff; box-shadow: none; }

.ss-proda-note { margin: 28px auto 0; max-width: 820px; text-align: center; font-size: 14px; font-style: italic; color: var(--vm-muted); }
.ss-proda-note--left { margin-left: 0; text-align: left; }
.ss-section--dark .ss-proda-note { color: var(--vm-on-dark); }
.ss-proda-note__link { display: inline-flex; gap: 4px; margin-left: 6px; font-style: normal; font-weight: 600; }

/* ---------- ss_proda_intro ---------- */
.ss-proda-intro__panel { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(28px, 4.5vw, 60px); border-radius: var(--vm-radius-lg); background: linear-gradient(135deg, var(--vm-sky-50) 0%, var(--vm-sky-100) 100%); border: 1px solid #dbe8f8; box-shadow: var(--vm-shadow); }
.ss-proda-intro__lead .ss-h2 { margin: 0; }
.ss-proda-intro__body p { font-size: 15.5px; line-height: 1.75; }
@media (max-width: 860px) { .ss-proda-intro__panel { grid-template-columns: 1fr; } }

/* ---------- ss_proda_flow ---------- */
.ss-proda-flow__stages { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 0 0 8px; padding: 0; list-style: none; counter-reset: none; }
.ss-proda-flow__stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 18px; text-align: center; }
.ss-proda-flow__stage + .ss-proda-flow__stage::before { content: ""; position: absolute; left: -14px; top: 30px; width: 28px; height: 10px; background: linear-gradient(var(--vm-orange), var(--vm-orange)) left center / 22px 2px no-repeat; }
.ss-proda-flow__stage + .ss-proda-flow__stage::after { content: ""; position: absolute; left: 4px; top: 31px; width: 7px; height: 7px; border-top: 2px solid var(--vm-orange); border-right: 2px solid var(--vm-orange); transform: rotate(45deg); }
.ss-proda-flow__n { font-family: var(--vm-font-head); font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--vm-orange); }
.ss-proda-flow__label { font-family: var(--vm-font-head); font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--vm-ink); }
.ss-proda-flow__strip { max-width: 1180px; margin: 28px auto 0; }
.ss-proda-flow__strip img { width: 100%; height: auto; }
@media (max-width: 900px) {
	/* Val p.60/p.65: workflows become a vertical timeline on tablet and mobile. */
	.ss-proda-flow__stages { grid-template-columns: 1fr; gap: 22px; max-width: 360px; margin: 0 auto; }
	.ss-proda-flow__stage { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 12px 18px; border-radius: var(--vm-radius); background: var(--vm-sky-50); border: 1px solid var(--vm-line); text-align: left; }
	.ss-proda-flow__stage + .ss-proda-flow__stage::before { left: 50%; top: -20px; width: 10px; height: 18px; background: linear-gradient(var(--vm-orange), var(--vm-orange)) center top / 2px 14px no-repeat; }
	.ss-proda-flow__stage + .ss-proda-flow__stage::after { left: calc(50% + 1.5px); top: -9px; transform: rotate(135deg); }
}

/* ---------- ss_proda_cards ---------- */
.ss-proda-cards__figure { margin: 0 auto clamp(32px, 4vw, 52px); }
.ss-proda-cards__grid { --gap: 24px; --cols: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.ss-proda-cards__grid > * { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; }
.ss-proda-cards__grid--c2 { --cols: 2; }
.ss-proda-cards__grid--c3 { --cols: 3; }
.ss-proda-cards__grid--c4 { --cols: 4; }
.ss-proda-cards__grid--c5 { --cols: 5; --gap: 20px; }
@media (max-width: 1180px) { .ss-proda-cards__grid--c5 { --cols: 3; } }
@media (max-width: 1080px) { .ss-proda-cards__grid--c4, .ss-proda-cards__grid--c5 { --cols: 2; } }
@media (max-width: 860px) { .ss-proda-cards__grid--c3 { --cols: 2; } }
@media (max-width: 600px) { .ss-proda-cards__grid > * { flex-basis: 100%; } }

.ss-proda-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ss-proda-card .ss-card__icon { margin-left: auto; margin-right: auto; }
.ss-proda-card .ss-card__title { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.ss-proda-card p { margin-bottom: 0; }
.ss-proda-card__link { margin-top: auto; padding-top: 14px; font-family: var(--vm-font-head); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; }
.ss-card--dark .ss-proda-card__link { color: #7fb0ff; }
.ss-proda-card__num { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 16px; border-radius: 50%; background: var(--vm-orange-100); color: var(--vm-orange); font-family: var(--vm-font-head); font-weight: 600; }
.ss-card--dark .ss-proda-card__num { background: rgba(241, 140, 33, .14); }
.ss-proda-card--dash { align-items: flex-start; text-align: left; }
.ss-proda-card--dash .ss-card__title { justify-content: flex-start; }
.ss-proda-card__viz { width: 100%; margin-bottom: 18px; padding: 14px 0; border-radius: var(--vm-radius); background: linear-gradient(160deg, var(--vm-sky-50), var(--vm-sky-100)); }
.ss-section--dark .ss-proda-card--dash { border-color: rgba(255, 255, 255, .5); }
.ss-section--dark .ss-proda-card--dash p { color: var(--vm-text); }
.ss-section--dark .ss-proda-card--light p { color: var(--vm-text); }

/* compact check tiles (CloudMaster "Validation Assets Included") */
.ss-proda-cards__grid--tiles { --gap: 18px; }
.ss-proda-tile { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 14px 18px; border-radius: var(--vm-radius); background: #fff; border: 1px solid #dbe7f7; box-shadow: 0 8px 22px rgba(7, 21, 51, .14); font-family: var(--vm-font-head); font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--vm-navy-800); }
.ss-proda-tile__check { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--vm-green-100); }
.ss-proda-tile__check::after { content: ""; position: absolute; left: 7px; top: 4px; width: 6px; height: 11px; border: solid var(--vm-green-700); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

/* abstract dashboard glyphs (no numbers, no real UI) */
.ss-proda-viz { display: block; width: 120px; height: 72px; margin: 0 auto; overflow: visible; }
.ss-proda-viz__track { fill: none; stroke: #d3e2f5; stroke-width: 8; }
.ss-proda-viz__track--thin { stroke-width: 6; }
.ss-proda-viz__ring { fill: none; stroke: var(--vm-blue-600); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 28; transform: rotate(-90deg); transform-origin: 60px 36px; transition: stroke-dashoffset 1.4s var(--vm-ease); }
.ss-proda-viz--gauge .ss-proda-viz__ring { transform: none; stroke-dashoffset: 34; }
.ss-proda-viz__ring--b { stroke: var(--vm-orange); stroke-width: 6; stroke-dashoffset: 46; }
.ss-proda-viz__axis { stroke: #b8cce6; stroke-width: 1.5; }
.ss-proda-viz__bar { fill: var(--vm-blue-600); transform-box: fill-box; transform-origin: bottom; transition: transform .9s var(--vm-ease); transition-delay: calc(var(--i, 0) * 80ms); }
.ss-proda-viz__bar:last-child { fill: var(--vm-orange); }
.ss-proda-viz__line { fill: none; stroke: var(--vm-blue-600); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--vm-ease); }
.ss-proda-viz__dot { fill: var(--vm-orange); }
.ss-proda-viz__dot--0 { fill: var(--vm-green); }
.ss-proda-viz__dot--1 { fill: var(--vm-blue-400); }
.ss-proda-viz__pill { fill: #c9dbf2; transform-box: fill-box; transform-origin: left; transition: transform .9s var(--vm-ease); transition-delay: calc(var(--i, 0) * 120ms); }
.ss-proda-viz__cell { transition: opacity .6s var(--vm-ease); transition-delay: calc(var(--i, 0) * 30ms); }
.ss-proda-viz__cell--1 { fill: #dbe8f8; }
.ss-proda-viz__cell--2 { fill: #9fc1ec; }
.ss-proda-viz__cell--3 { fill: var(--vm-blue-600); }
.ss-proda-viz__cell--4 { fill: var(--vm-orange); }
/* Start state, only when motion is on (products-a.js adds .is-in on scroll). */
.ss-motion .ss-proda-viz:not(.is-in) .ss-proda-viz__ring { stroke-dashoffset: 100; }
.ss-motion .ss-proda-viz:not(.is-in) .ss-proda-viz__line { stroke-dashoffset: 100; }
.ss-motion .ss-proda-viz:not(.is-in) .ss-proda-viz__bar { transform: scaleY(0); }
.ss-motion .ss-proda-viz:not(.is-in) .ss-proda-viz__pill { transform: scaleX(0); }
.ss-motion .ss-proda-viz:not(.is-in) .ss-proda-viz__cell { opacity: 0; }

/* ---------- ss_proda_split ---------- */
.ss-proda-split__grid { align-items: center; }
.ss-proda-split__grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.ss-proda-split__head { margin-bottom: 18px; }
.ss-proda-split__text { font-size: 15.5px; line-height: 1.75; }
.ss-section--dark .ss-proda-split__text { color: var(--vm-on-dark); }
.ss-proda-panel { padding: clamp(28px, 4.5vw, 60px); border-radius: var(--vm-radius-lg); background: linear-gradient(135deg, var(--vm-sky-50) 0%, var(--vm-sky-100) 100%); border: 1px solid #dbe8f8; box-shadow: var(--vm-shadow); }

.ss-proda-listbox { margin-top: 26px; }
.ss-proda-listbox__title { margin: 0 0 16px; font-size: 18px; font-weight: 500; color: var(--vm-ink); }
.ss-proda-listbox--white { padding: 26px 28px; border-radius: var(--vm-radius-lg); background: #fff; border: 1px solid var(--vm-line); box-shadow: var(--vm-shadow); }
.ss-proda-listbox--dark { padding: 26px 28px; border-radius: var(--vm-radius-lg); background: linear-gradient(160deg, #0f2d5e 0%, var(--vm-navy-900) 100%); box-shadow: 0 0 22px rgba(42, 108, 220, .18) inset, 0 16px 34px rgba(7, 21, 51, .2); }
.ss-proda-listbox--dark .ss-proda-listbox__title { color: #fff; }
.ss-proda-listbox--dark .ss-checklist { gap: 0; }
.ss-proda-listbox--dark .ss-checklist li { padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.ss-proda-listbox--dark .ss-checklist li:last-child { border-bottom: 0; }
.ss-proda-listbox--dark .ss-checklist li::before { top: calc(12px + .45em); }

.ss-proda-minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.ss-proda-mini { padding: 20px 20px 18px; border-radius: var(--vm-radius); background: #fff; border: 1px solid var(--vm-line); border-top: 3px solid var(--vm-blue-600); box-shadow: var(--vm-shadow); }
.ss-proda-mini__title { margin: 0 0 6px; font-size: 16px; font-weight: 500; }
.ss-proda-mini p { font-size: 14px; line-height: 1.6; }
@media (max-width: 560px) { .ss-proda-minis { grid-template-columns: 1fr; } }

/* ---------- ss_proda_diagram ---------- */
.ss-proda-diagram__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.ss-proda-diagram__top--solo { grid-template-columns: minmax(0, 1fr); max-width: 960px; }
.ss-proda-diagram--center .ss-proda-diagram__top--solo { margin: 0 auto; text-align: center; }
.ss-proda-diagram__head { margin-bottom: 18px; }
.ss-proda-diagram__text { font-size: 15.5px; line-height: 1.75; }
.ss-proda-diagram__stage { position: relative; }
@media (max-width: 900px) { .ss-proda-diagram__top { grid-template-columns: 1fr; } }

.ss-proda-alongside { margin-top: clamp(32px, 4vw, 48px); padding: clamp(22px, 3vw, 32px) clamp(20px, 3vw, 36px); border-radius: var(--vm-radius-lg); background: radial-gradient(120% 120% at 80% 0%, #163a73 0%, var(--vm-navy-800) 45%, var(--vm-navy-900) 100%); box-shadow: 0 18px 40px rgba(7, 21, 51, .22); color: var(--vm-on-dark); }
.ss-proda-alongside__title { margin: 0 0 8px; font-size: 19px; font-weight: 500; color: #fff; }
.ss-proda-alongside__list { margin: 0; padding: 0; list-style: none; }
.ss-proda-alongside__item { display: grid; grid-template-columns: minmax(180px, 290px) minmax(0, 1fr); gap: 6px 24px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 14.5px; }
.ss-proda-alongside__item:last-child { border-bottom: 0; }
.ss-proda-alongside__name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--vm-font-head); font-weight: 600; color: #fff; }
.ss-proda-alongside__name a { color: #fff; }
.ss-proda-alongside__name a:hover { color: #9cc3ff; }
.ss-proda-alongside__desc { color: #c3cfe4; }
@media (max-width: 700px) { .ss-proda-alongside__item { grid-template-columns: 1fr; } }

/* hover / tap / focus callouts over a diagram (products-a.js toggles .is-open) */
.ss-proda-hotspot { position: absolute; z-index: 2; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.ss-proda-hotspot__dot { position: absolute; inset: 7px; border-radius: 50%; background: var(--vm-orange); box-shadow: 0 0 0 4px rgba(241, 140, 33, .3); }
.ss-motion .ss-proda-hotspot__dot { animation: ss-proda-pulse 2.4s ease-out infinite; }
@keyframes ss-proda-pulse { 0% { box-shadow: 0 0 0 0 rgba(241, 140, 33, .5); } 70% { box-shadow: 0 0 0 12px rgba(241, 140, 33, 0); } 100% { box-shadow: 0 0 0 0 rgba(241, 140, 33, 0); } }
.ss-proda-hotspot__tip { position: absolute; left: 50%; bottom: calc(100% + 10px); width: max-content; max-width: 260px; padding: 10px 12px; border-radius: var(--vm-radius); background: var(--vm-navy-900); color: #dbe5f6; font-size: 13px; line-height: 1.5; text-align: left; box-shadow: 0 12px 30px rgba(7, 21, 51, .35); opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .2s, transform .2s, visibility .2s; pointer-events: none; }
.ss-proda-hotspot__tip strong { color: #fff; font-family: var(--vm-font-head); font-weight: 600; }
.ss-proda-hotspot:hover .ss-proda-hotspot__tip, .ss-proda-hotspot:focus-visible .ss-proda-hotspot__tip, .ss-proda-hotspot.is-open .ss-proda-hotspot__tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ---------- ss_proda_platforms ---------- */
.ss-proda-platforms__top { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: center; margin-bottom: clamp(28px, 4vw, 44px); }
.ss-proda-platforms__top--solo { grid-template-columns: minmax(0, 1fr); }
.ss-proda-platforms__top .ss-head { margin-bottom: 0; }
@media (max-width: 900px) { .ss-proda-platforms__top { grid-template-columns: 1fr; } }

.ss-proda-platforms__grid { display: grid; gap: 18px; align-items: start; }
.ss-proda-platforms__grid--c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ss-proda-platforms__grid--c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ss-proda-platforms__grid--c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .ss-proda-platforms__grid--c3, .ss-proda-platforms__grid--c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ss-proda-platforms__grid { grid-template-columns: 1fr !important; } }

.ss-proda-cat { padding: 6px; border: 1px solid #d6e4f6; border-bottom: 1px solid #d6e4f6; border-radius: 10px; background: #f6faff; box-shadow: 0 6px 18px rgba(14, 43, 84, .05); scroll-margin-top: 140px; }
.ss-proda-cat__heading { margin: 0; font-size: inherit; }
.ss-proda-cat__btn, .ss-proda-cat__heading--static span { display: flex; width: 100%; min-height: 64px; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px 12px 16px; border-radius: 6px; background: linear-gradient(160deg, var(--vm-navy-800), var(--vm-navy-900)); font-family: var(--vm-font-head); font-size: 14.5px; font-weight: 600; line-height: 1.35; color: #fff; text-align: left; }
.ss-proda-cat__btn::after { content: "+"; display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 4px; background: var(--vm-blue-600); color: #fff; font-size: 20px; font-weight: 400; line-height: 1; transform: none; transition: background-color .2s; }
.ss-proda-cat__btn[aria-expanded=true]::after { content: "\2212"; transform: none; }
.ss-proda-cat__btn:hover::after { background: var(--vm-blue-400); }
.ss-proda-cat.is-flash { animation: ss-proda-flash 1.6s ease-out 1; }
@keyframes ss-proda-flash { 0% { box-shadow: 0 0 0 0 rgba(241, 140, 33, .7); } 100% { box-shadow: 0 0 0 14px rgba(241, 140, 33, 0); } }
.ss-proda-cat__body { padding: 16px 10px 10px; }
.ss-proda-cat__label { margin: 0 0 10px; font-family: var(--vm-font-head); font-size: 14px; font-weight: 600; color: var(--vm-navy-800); }
.ss-proda-cat__note { margin: 12px 0 0; font-size: 12.5px; font-style: italic; color: var(--vm-muted); }
.ss-proda-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ss-proda-pill { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid #9fb8da; background: #fff; font-size: 12.5px; line-height: 1.5; color: var(--vm-ink); }
.ss-proda-pill .ss-badge { padding: 2px 8px; font-size: 9.5px; }

/* ---------- ss_proda_notice ---------- */
.ss-proda-notice { padding-top: 0; }
.ss-proda-notice__text { margin: 0; text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--vm-muted); }

/* ---------- small screens ---------- */
@media (max-width: 600px) {
	.ss-proda-listbox--white, .ss-proda-listbox--dark { padding: 22px 18px; }
	.ss-proda-hotspot__tip { max-width: 200px; }
}

/* ---------- hero product logo (Val global #7) ----------
 * The shared hero sets logos on a white chip for dark-text marks. CloudMaster
 * uses the light-text lockup from the design, so it sits straight on the
 * navy band, larger. eQMS uses Val's official 2026 color logo (dark
 * "Master"), so it keeps the white chip, sized up. */
.ss-page--solutions-cloudmaster-365 .ss-core-hero__logo { padding: 0; background: none; box-shadow: none; border-radius: 0; max-width: 360px; }
.ss-page--solutions-cloudmaster-365 .ss-core-hero__logo img { max-height: 84px; }
.ss-page--solutions-validationmaster-eqms .ss-core-hero__logo { max-width: 340px; padding: 14px 22px; }
.ss-page--solutions-validationmaster-eqms .ss-core-hero__logo img { max-height: 92px; }
.ss-page--solutions-validationmaster-eqms .ss-core-cta__panel .ss-panel__logo { width: 300px; padding: 14px 22px; border-radius: var(--vm-radius); background: rgba(255, 255, 255, .95); box-sizing: border-box; }
@media (max-width: 600px) {
	.ss-page--solutions-cloudmaster-365 .ss-core-hero__logo img { max-height: 64px; }
	.ss-page--solutions-validationmaster-eqms .ss-core-hero__logo img { max-height: 72px; }
}