/* ==========================================================================
   Catalog images — equipment photos from the Marea AI catalogs.
   Loaded after styles.css on the fruit-processing and waste-recovery pages only.

   Every image sits in the same frame: 4:3 box, 1px #DCE3EC border, 8px radius
   (equipment cards: bleeds into the card top, top corners follow the card).
   Two treatments, chosen per image (border-ring test, see v9 notes;
   white-ground shots whose machine is cut by the photo edge count as scenes):
     .cat-media--cutout  product shot on white -> soft studio stage, contained,
                         common floor line, faint elliptical floor shadow
     .cat-media--scene   photo with a real background -> full-bleed cover,
                         light uniform grade + faint vignette
   .cat-media--focus-bottom  scene whose subject sits low in the photo
   .cat-media--icon          no photo: line icon on the same stage
   ========================================================================== */

/* Frame (shared) */
.cat-media {
  --cat-py: 9%;    /* cutout inset, % of box height */
  --cat-px: 10%;   /* cutout inset, % of box width  */
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;               /* multiply blending stays inside the frame */
  background: #F2F5F8;
  background: linear-gradient(180deg, #F7F9FB 0%, #EDF1F5 100%);
  border: 1px solid #DCE3EC;
  border-radius: 8px;
}
.cat-media::before { content: ""; display: block; padding-top: 75%; }   /* 4:3 in every engine */

/* Default and cutout: contained on the stage, standing on one floor line */
.cat-media img {
  position: absolute;
  z-index: 1;
  top: var(--cat-py);
  left: var(--cat-px);
  display: block;
  width: calc(100% - 2 * var(--cat-px));
  height: calc(100% - 2 * var(--cat-py));
  object-fit: contain;
  object-position: 50% 100%;
}
.cat-media--cutout img { mix-blend-mode: multiply; }   /* white photo ground melts into the stage */
.cat-media--cutout::after {                             /* floor shadow, under the object */
  content: "";
  position: absolute;
  z-index: 0;
  left: 18%;
  right: 18%;
  bottom: 5%;
  height: 10%;
  background: radial-gradient(closest-side, rgba(22, 36, 56, .14), rgba(22, 36, 56, 0));
  pointer-events: none;
}

/* Scene: full bleed, light uniform grade */
.cat-media--scene img {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  -webkit-filter: saturate(.92) contrast(1.02);
  filter: saturate(.92) contrast(1.02);
  mix-blend-mode: multiply;   /* any white ground in the photo takes the stage tone */
}
.cat-media--focus-bottom img { object-position: 50% 100%; }
.cat-media--scene::after {                              /* faint inner vignette */
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(16, 28, 44, 0) 62%, rgba(16, 28, 44, .07) 100%);
  pointer-events: none;
}

/* No photo: line icon centred on the same stage */
.cat-media--icon { color: var(--muted); }
.cat-media--icon > svg {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 44px;
  height: 44px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* Equipment cards: frame bleeds into the card top, full card width */
.spec-card--media > .cat-media {
  order: -1;              /* above the 01/02 counter */
  margin: -20px -22px 16px;
  border-width: 0 0 1px;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}

/* Packaging list: thumbnail in place of the icon */
.usecase--media > .cat-media {
  flex: none;
  width: 132px;
}

/* Disclaimer under each equipment grid */
.cat-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.5;
}
.section--dark .cat-note { color: var(--on-dark-muted); }

@media (min-width: 641px) {
  .usecase--media { align-items: center; }
}
@media (max-width: 640px) {
  .spec-card--media > .cat-media { margin: -16px -16px 14px; }
  .usecase--media { flex-direction: row; gap: 14px; }
  .usecase--media > .cat-media { --cat-py: 6%; --cat-px: 7%; width: 104px; }
}

/* Phones: compact cards — thumbnail left, text right, key spec full width */
@media (max-width: 560px) {
  .spec-card--media {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    column-gap: 14px;
    align-content: start;
  }
  .spec-card--media > .cat-media {
    --cat-py: 6%;
    --cat-px: 7%;
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: start;
    margin: 0;
    border-width: 1px;
    border-radius: 8px;
  }
  .spec-card--media::before,
  .spec-card--media > h4,
  .spec-card--media > p:not(.spec-card-spec) { grid-column: 2; }
  .spec-card--media > .spec-card-spec { grid-column: 1 / -1; margin-top: 0; }
  .cat-media--icon > svg { width: 36px; height: 36px; }
}