/* products.css - page-specific styles for products.html (prefix: s-prod-) */

.s-section { --s-section-y: 44px; }
#inspection-drone { padding-top: 56px; }

.s-prod__split { grid-template-columns: 1.15fr 1fr; gap: 72px; }
.s-prod--flip .s-prod__split { direction: rtl; }          /* media on the right */
.s-prod--flip .s-prod__split > * { direction: ltr; }

.s-prod__media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  overflow: hidden;
  background: var(--s-photo);
}
.s-prod__media img, .s-prod__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* transparent cut-out: keep the whole drone visible on a light ground */
/* transparent cut-outs sit directly on the section background: no box, no border */
.s-prod__media--contain { background: none; border: 0; border-radius: 0; overflow: visible; }
.s-prod__media--contain img { object-fit: contain; padding: 2%; filter: drop-shadow(0 18px 28px rgba(15, 23, 42, .12)); }

.s-prod .s-h2 + .s-lead { margin-top: 20px; }
.s-prod .s-link { margin-top: 28px; }

/* pause/play control for autoplaying clips (WCAG 2.2.2) */
.s-prod__pause {
  position: absolute; right: 14px; bottom: 14px;
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 999px; background: rgba(15, 23, 42, .6); color: #fff;
}
.s-prod__pause:hover { background: rgba(15, 23, 42, .8); }
.s-prod__pause svg { width: 20px; height: 20px; }
.s-prod__pause [hidden] { display: none; }

@media (max-width: 1099px) {
  .s-prod__split { grid-template-columns: 1fr; gap: 36px; }
  .s-prod--flip .s-prod__split { direction: ltr; }
  .s-prod__media { max-width: 720px; }
}
@media (max-width: 767px) {
  .s-section { --s-section-y: 32px; }
  #inspection-drone { padding-top: 40px; }
  .s-prod__media { aspect-ratio: 3 / 2; }
}

/* the confined-space drone is physically small: show it smaller than the patrol drone */
#inspection-drone .s-prod__media--contain img { padding: 10%; }