/* ==========================================================================
   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;
  }
}