/* Odisal Service Parts: "What's included", then photo beside text, sides alternating; one column on phones.
   Photo and text slide in from their own sides and meet in the middle; hovering a part zooms its photo slightly. */
.osx-service-parts { --osx-sp-soft: color-mix(in srgb, var(--osx-text) 86%, var(--osx-dark)); overflow-x: clip; }
.osx-service-parts .osx-sp { display: grid; }
.osx-service-parts .osx-sp-h2 { margin-bottom: 44px; font: 600 30px/1.2 var(--osx-head); color: var(--osx-text); }
.osx-service-parts .osx-sp-part { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: stretch; scroll-margin-top: 110px; }
.osx-service-parts .osx-sp-part--nophoto { grid-template-columns: minmax(0, 1fr); }
.osx-service-parts .osx-sp-part + .osx-sp-part { margin-top: 80px; padding-top: 80px; border-top: 1px solid rgba(255,255,255,.14); }
.osx-service-parts .osx-sp-part--flip .osx-sp-ph { order: 2; }
.osx-service-parts .osx-sp-ph { position: relative; min-height: 360px; margin: 0; border-radius: 24px; overflow: hidden; background: var(--osx-card); }
.osx-service-parts .osx-sp-ph img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.osx-service-parts .osx-sp-txt { display: grid; align-content: center; justify-items: start; gap: 14px; padding-block: 8px; }
.osx-service-parts .osx-sp-num { font: 400 12px/1 var(--osx-label); letter-spacing: 2px; color: var(--osx-accent); }
.osx-service-parts .osx-sp-h3 { font: 600 36px/1.15 var(--osx-head); color: var(--osx-accent); }
.osx-service-parts .osx-sp-txt > p { font-size: 16px; line-height: 1.7; color: var(--osx-sp-soft); }
.osx-service-parts .osx-sp-list { display: grid; gap: 11px; margin: 6px 0 0; padding: 0; list-style: none; }
.osx-service-parts .osx-sp-list li { display: flex; gap: 12px; align-items: flex-start; margin: 0; font-size: 15px; line-height: 1.5; color: var(--osx-sp-soft); }
.osx-service-parts .osx-sp-tick { flex: none; width: 22px; height: 22px; padding: 4px; margin-top: -1px; border-radius: 50%; background: color-mix(in srgb, var(--osx-accent) 16%, transparent); color: var(--osx-accent); stroke-width: 3; }
.osx-service-parts .osx-sp-more { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; color: var(--osx-accent); text-decoration: none; font: 700 11px/1 var(--osx-label); letter-spacing: 2px; text-transform: uppercase; }
.osx-service-parts .osx-sp-ar { width: 18px; height: 18px; flex: none; transition: transform 300ms var(--osx-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .osx-service-parts .osx-sp-more:hover .osx-sp-ar { transform: translateX(4px); }
  .osx-service-parts .osx-sp-ph img { transition: transform 900ms var(--osx-ease-out); }
  .osx-service-parts .osx-sp-part:hover .osx-sp-ph img { transform: scale(1.03); }
}

/* Slide in from the sides (instead of the usual rise) */
.osx-js .osx-service-parts .osx-sp-ph.osx-rv, .osx-js .osx-service-parts .osx-sp-part--flip .osx-sp-txt.osx-rv { transform: translateX(-60px); transition-duration: 1000ms; }
.osx-js .osx-service-parts .osx-sp-txt.osx-rv, .osx-js .osx-service-parts .osx-sp-part--flip .osx-sp-ph.osx-rv { transform: translateX(60px); transition-duration: 1000ms; }
.osx-js .osx-service-parts .osx-sp-part .osx-rv.in { transform: none; }

@media (max-width: 760px) {
  .osx-service-parts .osx-sp-h2 { margin-bottom: 30px; font-size: 26px; }
  .osx-service-parts .osx-sp-part { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .osx-service-parts .osx-sp-part + .osx-sp-part { margin-top: 50px; padding-top: 50px; }
  .osx-service-parts .osx-sp-part--flip .osx-sp-ph { order: 0; }
  .osx-service-parts .osx-sp-ph { aspect-ratio: 3 / 2; min-height: 0; border-radius: 16px; }
  .osx-service-parts .osx-sp-txt { padding-block: 0; }
  .osx-service-parts .osx-sp-h3 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .osx-service-parts .osx-sp-ar, .osx-service-parts .osx-sp-ph img { transition: none; }
  .osx-service-parts .osx-sp-part:hover .osx-sp-ph img { transform: none; }
}