/* DocuSphere360 DMS — R18 responsive mobile screenshot gallery.
   Marketing gallery only. Activates from the existing mobile filter's aria-pressed
   state; desktop/all filters and lightbox behavior are intentionally unchanged. */

/* Figures default to 1em 40px margins in browsers; remove those only in the
   filtered mobile gallery so four equal-width columns really fill the row. */
body.d360-market.d360-enterprise-page
#engineering-screens.d360-gallery-r15:has(
  .d360-gallery-filter [data-d360-filter="mobile"][aria-pressed="true"]
) .d360-proof-grid > .d360-proof-card {
  margin:0;
  width:100%;
  min-width:0;
  max-width:none;
  justify-self:stretch;
  align-self:stretch;
}

/* Desktop: showcase all four portrait/mobile engineering captures in one row. */
@media (min-width:1180px) {
  body.d360-market.d360-enterprise-page
  #engineering-screens.d360-gallery-r15:has(
    .d360-gallery-filter [data-d360-filter="mobile"][aria-pressed="true"]
  ) .d360-proof-grid {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
  }
  body.d360-market.d360-enterprise-page
  #engineering-screens.d360-gallery-r15:has(
    .d360-gallery-filter [data-d360-filter="mobile"][aria-pressed="true"]
  ) .d360-proof-visual--mobile {
    height:395px;
  }
  body.d360-market.d360-enterprise-page
  #engineering-screens.d360-gallery-r15:has(
    .d360-gallery-filter [data-d360-filter="mobile"][aria-pressed="true"]
  ) .d360-proof-card figcaption {
    padding:17px 16px 18px;
  }
  body.d360-market.d360-enterprise-page
  #engineering-screens.d360-gallery-r15:has(
    .d360-gallery-filter [data-d360-filter="mobile"][aria-pressed="true"]
  ) .d360-proof-card figcaption strong {
    font-size:15px;
    line-height:1.4;
  }
}
/* Intermediate screens: retain comfortably readable two-column cards. */
@media (min-width:681px) and (max-width:1179px) {
  body.d360-market.d360-enterprise-page
  #engineering-screens.d360-gallery-r15:has(
    .d360-gallery-filter [data-d360-filter="mobile"][aria-pressed="true"]
  ) .d360-proof-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:17px;
  }
  body.d360-market.d360-enterprise-page
  #engineering-screens.d360-gallery-r15:has(
    .d360-gallery-filter [data-d360-filter="mobile"][aria-pressed="true"]
  ) .d360-proof-visual--mobile {
    height:365px;
  }
}
/* Narrow phones: one card per row, without horizontal scroll. */
@media (max-width:680px) {
  body.d360-market.d360-enterprise-page
  #engineering-screens.d360-gallery-r15:has(
    .d360-gallery-filter [data-d360-filter="mobile"][aria-pressed="true"]
  ) .d360-proof-grid {
    grid-template-columns:minmax(0,1fr);
    gap:16px;
  }
  body.d360-market.d360-enterprise-page
  #engineering-screens.d360-gallery-r15:has(
    .d360-gallery-filter [data-d360-filter="mobile"][aria-pressed="true"]
  ) .d360-proof-visual--mobile {
    height:335px;
  }
}
/* Portrait previews: centered and larger without cropping their QA screenshot. */
body.d360-market.d360-enterprise-page
#engineering-screens.d360-gallery-r15:has(
  .d360-gallery-filter [data-d360-filter="mobile"][aria-pressed="true"]
) .d360-proof-visual--mobile {
  background:radial-gradient(circle at 50% 44%,rgba(255,255,255,.95),rgba(225,233,242,.65) 47%,rgba(211,224,237,.85));
}
body.d360-market.d360-enterprise-page
#engineering-screens.d360-gallery-r15:has(
  .d360-gallery-filter [data-d360-filter="mobile"][aria-pressed="true"]
) .d360-proof-visual--mobile img {
  display:block;
  width:auto;
  height:100%;
  max-width:94%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
}
html[data-theme="dark"] body.d360-market.d360-enterprise-page
#engineering-screens.d360-gallery-r15:has(
  .d360-gallery-filter [data-d360-filter="mobile"][aria-pressed="true"]
) .d360-proof-visual--mobile {
  background:radial-gradient(circle at 50% 44%,#2d455d,#1f344b 55%,#14263a);
}