/* ==========================================================================
   Component: datpro_device_frame

   Presentation layer around a real product screenshot. The frame is drawn in
   CSS — it is never baked into the image file, so the master screenshot in
   assets/img/products/ stays exactly as captured and can be replaced without
   re-editing artwork.

   Uses only existing tokens. Adds no colour, type or spacing of its own.
   ========================================================================== */

.dp-device {
  margin: 0;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--dp-border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Browser chrome: a quiet title bar, not a skeuomorphic window. */
.dp-device__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding-inline: 0.75rem;
  background: var(--dp-surface);
  border-bottom: 1px solid var(--dp-border);
}

.dp-device__bar span {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--dp-border-strong);
}

.dp-device__screen {
  display: block;
  width: 100%;
  height: auto;
}

/* Phone variant — for mobile product UI shown beside copy. */
.dp-device--phone {
  border-radius: 26px;
  border: 8px solid #20293a;
  box-shadow: var(--shadow-md);
  max-width: 17.5rem;
}

.dp-device--phone .dp-device__bar {
  display: none;
}

.dp-device--phone .dp-device__screen {
  border-radius: 18px;
}

@media (max-width: 767px) {
  .dp-device__bar {
    height: 24px;
  }

  .dp-device__bar span {
    width: 6px;
    height: 6px;
  }
}

/* ---------- Mobile zoom crop — flagship dashboard screenshots only -------
   A 3840px-wide desktop dashboard scaled to fit a ~360px phone column
   shrinks every label/number below legibility — the image is still fully
   visible, but nothing in it can actually be read. Opt-in via this
   modifier (not the .dp-device default) for the handful of "lead" shots
   where a visitor is meant to inspect the UI, not just recognise it as a
   dashboard: Homepage hero, the Products-page Enterprise showcase, and the
   Enterprise product-detail hero + main shot. Secondary/gallery shots keep
   the default full-image behaviour — they are supporting evidence, not the
   thing being read.
   Mechanism: fix the frame to a shorter-than-native aspect ratio and scale
   the screenshot up inside it (object-fit: cover, anchored top-left, where
   the app header and first KPI/table rows live), so the frame shows fewer
   source pixels at a larger effective size instead of the whole image
   shrunk down. `.dp-device` already clips overflow, so nothing needed
   there. Never introduces horizontal scroll — the frame itself stays
   within its normal responsive width. */
@media (max-width: 767px) {
  .dp-device--zoom-mobile {
    aspect-ratio: 4 / 3.1;
  }

  .dp-device--zoom-mobile .dp-device__screen {
    width: 185%;
    max-width: 185%;
    height: auto;
    object-fit: cover;
    object-position: top left;
  }
}