/* A full image stays above a soft continuation of its own photographic scene.
   The backdrop is decorative; the foreground is never cropped or stretched. */
.image-frame {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  aspect-ratio: 4 / 3;
  flex: 0 0 auto;
}
.image-frame::before {
  content: '';
  position: absolute;
  inset: -36px;
  z-index: 0;
  background-image: var(--frame-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(28px) brightness(.48);
  pointer-events: none;
}
.image-frame > img {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  padding: 0;
  margin: 0;
  object-fit: contain;
  object-position: center;
  background: transparent;
  transform: none;
}

/* Every catalog tile has the same image and text geometry, including mobile. */
.catalog-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
}
.catalog-grid .product-card {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.catalog-grid .product-photo-field {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: transparent;
}
/* The six catalog photos have their own seamless 4:3 canvas. */
.catalog-grid .product-photo-field::before { content: none; }
.catalog-grid .product-photo-field > img,
.catalog-grid .product-card:hover .product-photo-field > img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  padding: 0;
  background: transparent;
  transform: none;
}
/* Center the full UNOS silhouette (x=82..1418 on its 1448px canvas).
   The small overscan removes only background and keeps both side margins equal. */
.catalog-grid .product-card[data-product="unos"] .product-photo-field > img,
.catalog-grid .product-card[data-product="unos"]:hover .product-photo-field > img {
  transform: translateX(-1.885%) scale(1.05);
  transform-origin: center;
}
.catalog-grid .card-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 24px;
}
.catalog-grid .card-content h3 { min-height: 1.2em; }
.catalog-grid .card-content p { min-height: 4.5em; }
.catalog-grid .card-link { margin-top: auto; }

/* Component cards share one ratio; images fill the frame without inner mats. */
.system-content .cards { grid-auto-rows: 1fr; align-items: stretch; }
.system-content .node-card { height: 100%; }
.system-content .node-card-image.image-frame,
.system-content .node-image.image-frame,
.system-content .inspector .node-image.image-frame {
  aspect-ratio: 3 / 2;
  height: auto;
  padding: 0;
  background: transparent;
  border: 0;
}
.system-content .node-card-image.image-frame {
  /* The negative margins extend to both card edges. */
  width: calc(100% + 60px);
}
.system-content .node-image.image-frame > img,
.system-content .node-card-image.image-frame > img { padding: 0; object-fit: contain; }
.system-content .node-card .eyebrow { min-height: 3em; }

/* Detail and option windows follow the original photo's proportions. */
.product-detail .detail-image,
.system-content .detail figure,
.system-content .assembly,
.option-image,
.options-photo a,
.object-cover {
  height: auto;
  aspect-ratio: auto;
  min-height: 0;
  padding: 0;
  background: transparent;
}
.product-detail .detail-image > img,
.system-content .detail figure > img,
.system-content .assembly > img,
.option-image > img,
.options-photo img,
.object-cover > img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  padding: 0;
  object-fit: contain;
  background: transparent;
}
.product-detail .detail-image .illustration {
  position: static;
  display: block;
  padding: 12px 0 0;
  color: var(--muted);
}
.system-content .detail figure { border: 0; }
.system-content .detail figcaption { padding: 0; }

/* Project photographs determine their own frame height, with no letterboxing. */
.completed-projects .project-image {
  aspect-ratio: auto;
  height: auto;
  min-height: 0;
  padding: 0;
  background: transparent;
}
.completed-projects .project-image > img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  padding: 0;
  object-fit: contain;
  transform: none;
}
.object-thumb.image-frame { width: 120px; aspect-ratio: 4 / 3; }
.object-thumb.image-frame > img { width: 100%; height: 100%; }
.object-thumb span { z-index: 2; }
.object-lightbox #object-photo-full {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100dvh - 210px);
  margin-inline: auto;
  background: transparent;
}

@media (max-width: 900px) {
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .system-content .node-card-image.image-frame { width: calc(100% + 48px); }
  .system-content .inspector .node-image.image-frame { max-width: none; }
}
@media (max-width: 600px) {
  .catalog-grid { grid-template-columns: minmax(0, 1fr); }
  .catalog-grid .card-content { padding: 24px; }
  .object-lightbox #object-photo-full { max-height: calc(100dvh - 240px); }
}

/* STOS node windows follow the photo itself: no forced landscape crop or blurred mats. */
.stos-system .inspector .node-image.image-frame,
.stos-system .node-card-image.image-frame{aspect-ratio:auto;height:auto;min-height:0;background:transparent}
.stos-system .inspector .node-image.image-frame::before,
.stos-system .node-card-image.image-frame::before{content:none}
.stos-system .inspector .node-image.image-frame>img,
.stos-system .node-card-image.image-frame>img{position:static;inset:auto;display:block;width:100%;height:auto;max-height:none;object-fit:contain;transform:none}
.stos-system .inspector .node-image.image-frame{margin:24px 0}
.stos-system .inspector{align-self:start}
@media(max-width:760px){.stos-system .inspector{display:flex;flex-direction:column;gap:0}.stos-system .inspector .node-image.image-frame{width:100%;margin:22px 0}.stos-system .inspector .button{width:100%}}
.stos-system .inspector .node-image.image-frame>img,.stos-system .node-card-image.image-frame>img{padding:0}
.stos-system .detail figure>img{display:block;width:100%;height:auto;max-height:none;padding:0;object-fit:contain}
.stos-system #node-configurator-link[hidden]{display:none}

/* Separate portrait and square rows: short cards no longer inherit tank height. */
.stos-system .node-catalog {
  display: grid;
  gap: 18px;
}
.stos-system .node-catalog .cards {
  grid-auto-rows: 1fr;
}
.stos-system .node-catalog .node-card {
  padding: 24px;
  background: var(--surface);
}
.stos-system .node-catalog .node-card:hover {
  background: var(--surface);
}
.stos-system .node-catalog .node-card-image.image-frame {
  width: calc(100% + 48px);
  margin: -24px -24px 24px;
  aspect-ratio: 1;
}
.stos-system .node-catalog .node-card-primary .node-card-image.image-frame {
  aspect-ratio: 3 / 4;
}
.stos-system .node-catalog .node-card-image.image-frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Only the extended side fields sit behind the original, unmodified cabinet. */
.stos-system .node-catalog .node-card-image.has-card-backdrop {
  background-image: var(--card-backdrop);
  background-size: cover;
  background-position: center;
}
.stos-system .node-catalog .node-card-image.has-card-backdrop > img {
  inset: 0 auto 0 50%;
  width: auto;
  height: 100%;
  max-width: 100%;
  transform: translateX(-50%);
  mask-image: linear-gradient(to right, transparent, #000 2%, #000 98%, transparent);
}
.stos-system .node-catalog .node-card .eyebrow {
  min-height: 0;
  margin-bottom: 12px;
  font-size: 13px;
}
.stos-system .node-catalog .node-card h3 {
  margin-bottom: 14px;
  line-height: 1.2;
}
.stos-system .node-catalog .node-card p {
  line-height: 1.5;
}
.stos-system .node-catalog .node-card .text-link {
  margin-top: 20px;
}
/* Principles cards use the pneumatic cabinet's square canvas on every screen.
   Extended scene images fill it edge to edge; the tall control cabinet is a crop. */
.stos-system .node-catalog-compact .node-card-image.image-frame > img {
  object-fit: cover;
}
.stos-system .node-catalog-compact [data-node-card="control"] .node-card-image > img {
  object-position: center top;
}
@media (min-width: 761px) {
  .stos-system .node-catalog-primary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .stos-system .node-catalog-primary .node-card {
    padding: 20px;
  }
  .stos-system .node-catalog-primary .node-card-image.image-frame {
    width: calc(100% + 40px);
    margin: -20px -20px 20px;
  }
  .stos-system .node-catalog-primary .node-card h3 {
    font-size: 21px;
  }
}