/* ==========================================================================
   Component: datpro_about_preview
   Full-width standalone section — visual bleeds off the left edge, copy sits
   on the right and keeps its right edge aligned with .dp-container.
   ========================================================================== */

.dp-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 48%) minmax(0, 52%);
  align-items: stretch;
}

.dp-about__media {
  position: relative;
  min-height: clamp(24rem, 32vw, 32rem);
  background: var(--dp-surface-2);
  overflow: hidden;
}

.dp-about__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.dp-about__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--section-py);
  padding-left: clamp(2rem, 5vw, 5rem);
  /* keeps the right edge aligned with .dp-container on every viewport */
  padding-right: max(
    var(--container-pad),
    calc(50vw - var(--container-max) / 2 + var(--container-pad))
  );
}

.dp-about__desc {
  margin-top: var(--sp-5);
  font-size: var(--fs-lead);
  color: var(--dp-text-muted);
  text-wrap: pretty;
}

.dp-about__cta {
  margin-top: clamp(1.75rem, 2.6vw, 2.25rem);
}

/* ---------- Responsive ---------------------------------------------------- */

@media (max-width: 1023px) {
  .dp-about__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dp-about__media {
    min-height: clamp(13rem, 40vw, 22rem);
  }

  .dp-about__content {
    padding-inline: var(--container-pad);
    max-width: var(--container-max);
    width: 100%;
    margin-inline: auto;
  }
}