/* =========================================================================
   Software product pages - /software/redplum-connect/, redplum-live/,
   redplum-validator/. Every structural piece (.product-hero, .spec-block,
   .faq, .contact-grid, .form-grid, .eco-flow, .chip, .icon-tile) already
   lives in site.css; this file adds only what software needs that no
   hardware page did (the hero artwork, the screenshot layouts and the
   device bezel), so all three product pages share them unchanged.
   ========================================================================= */

/* ---------- Hero art: key art, not a product render ---------------------
   Software has no physical cabinet to render, so .product-hero__art (sized
   4:5 by site.css) holds a 1080 x 1350 key art image with rounded corners.

   The figcaption chip normally sits in flow below the image, which collides
   with site.css's negative bottom margin on .product-hero__art at <=860px
   (RPGW-35). Badge it onto the image instead, so it can't collide at any
   width - scoped to .product-hero__art since site.css gives it no
   positioning of its own. */
.product-hero__art { position: relative; }
.product-hero__art > .product-hero__image { object-fit: cover; border-radius: var(--radius-lg); }
.product-hero__art .chip { position: absolute; left: var(--sp-4); bottom: var(--sp-4); margin: 0; }

/* Badging the chip removes it from flow, so the figure no longer carries the
   chip's height - site.css's -sp-7 bottom margin (tuned for that extra
   height) now pulls the copy block too far up on narrow viewports. */
@media (max-width: 860px) {
  .product-hero__art { margin-block-end: 0; }
}

/* ---------- Screenshot grid ---------------------------------------------- */
.shot-grid { margin-top: var(--sp-8); display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--grid-gap); }
.shot-grid figure { margin: 0; }
.shot-grid figcaption { margin-top: var(--sp-3); font: var(--text-body-sm); color: var(--text-secondary); text-align: center; }

/* ---------- Real app screens ---------------------------------------------
   Connect's web dashboards are 2:1 captures, so they sit as plain rounded
   shots: the first one full width, the other two side by side under it.
   Live's and Validator's are portrait phone captures, so they sit
   in a CSS device bezel and wrap centred, two to a row on a phone. */
.shot { display: block; width: 100%; height: auto; border-radius: var(--radius-md); background: var(--surface-inverse); box-shadow: var(--shadow-lg); }
.shot-grid--lead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shot-grid--lead > figure:first-child { grid-column: 1 / -1; }
@media (max-width: 700px) {
  .shot-grid--lead { grid-template-columns: minmax(0, 1fr); }
}

.shot-row { margin-top: var(--sp-8); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--grid-gap); }
.shot-row figure { flex: 0 1 280px; min-width: 140px; margin: 0; }
@media (max-width: 600px) {
  .shot-row figure { flex-basis: 150px; }
}
.shot-row figcaption { margin-top: var(--sp-4); font: var(--text-body-sm); color: var(--text-secondary); text-align: center; text-wrap: pretty; }

.device { display: block; padding: 3.2%; border-radius: 13% / 6%; background: var(--surface-inverse); box-shadow: var(--shadow-lg); }
.device img { display: block; width: 100%; height: auto; border-radius: 10% / 4.6%; }