/**
 * Über mich — DT_Über mich / MO_Über Mich
 */

.page-about {
  /* Primary top + logo + primary bottom + 40px under nav → image */
  padding-top: calc(1.5rem + 3.5rem + 1.5rem + 2.5rem);
  padding-bottom: 5rem;
  overflow-x: clip;
}

@media (min-width: 1024px) {
  .page-about {
    /* Figma: ~50px under nav (adjusted for real header pad) */
    padding-top: calc(1.5rem + 4.375rem + 3.125rem);
    padding-bottom: 6rem;
  }
}

/* ——— Intro: portrait + copy ——— */
/* Side-by-side via col-dt-* ≥ 1024; stack < 1024.
   Phone (<768): media col-6 full. Stacked tablet (768–1023): half grid (3/6). */

.page-about__intro {
  align-items: start;
  row-gap: 3.9375rem; /* ~63px — Figma MO / stacked */
}

@media (min-width: 1024px) {
  .page-about__intro {
    align-items: stretch;
    row-gap: var(--grid-gutter);
  }
}

.page-about__media {
  position: relative;
}

/* Stacked but not phone: portrait half of 6-col grid */
@media (min-width: 768px) and (max-width: 1023px) {
  .page-about__media {
    grid-column-end: span 3;
  }
}

.page-about__portrait {
  aspect-ratio: 347 / 511;
  border-radius: 1.875rem;
  overflow: clip;
  background: var(--color-gray-light);
}

@media (min-width: 1024px) {
  .page-about__portrait {
    aspect-ratio: 505 / 728;
  }
}

.page-about__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Phone / mail — desktop only, overlay on portrait top-right (Figma DT) */
.page-about__contact {
  display: none;
}

@media (min-width: 1024px) {
  .page-about__contact {
    position: absolute;
    top: 2rem; /* 32px from portrait top */
    right: 2.0625rem; /* 33px inset — inside image, not gutter */
    display: flex;
    flex-direction: column;
    gap: 1.375rem; /* 22px */
    z-index: 1;
  }
}

.page-about__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5.5rem; /* text → CTA ~88px MO */
  color: var(--color-cd);
  min-width: 0;
}

/* Side-by-side equal-height content layout ≥ 1024 */
@media (min-width: 1024px) {
  .page-about__content {
    gap: 0;
    justify-content: space-between;
    padding-block: 0; /* no gap above H1 until 1200 */
    min-height: 100%;
  }
}

/* ≥ 1200: restore spacing above H1 (heading ~72px under portrait top) */
@media (min-width: 1200px) {
  .page-about__content {
    padding-block: 4.5rem 0;
  }
}

.page-about__copy {
  display: flex;
  flex-direction: column;
  gap: 2.875rem; /* ~46px MO heading → text */
  max-width: 38.125rem;
}

@media (min-width: 1024px) {
  .page-about__copy {
    gap: 3.25rem;
  }
}

.page-about__heading {
  margin: 0;
  color: var(--color-cd);
}

.page-about__text {
  margin: 0;
  color: var(--color-cd);
}

.page-about__cta {
  margin: 0;
}

/* ——— Testimonials scroller ——— */

.page-about__testimonials {
  --about-grid-width: min(
    calc(100vw - (var(--page-margin) * 2)),
    var(--container-max)
  );
  --about-inline: calc((100vw - var(--about-grid-width)) / 2);
  --about-col: calc(
    (var(--about-grid-width) - ((var(--grid-columns) - 1) * var(--grid-gutter))) /
      var(--grid-columns)
  );
  /* Mobile ~4.5 cols peek next card; desktop 5 cols = 505px */
  --about-card: calc((var(--about-col) * 4.5) + (var(--grid-gutter) * 3.5));

  margin-top: 14.6875rem; /* ~235px MO button → cards */
}

@media (min-width: 1024px) {
  .page-about__testimonials {
    --about-card: calc((var(--about-col) * 5) + (var(--grid-gutter) * 4));
    margin-top: 7rem; /* ~112px DT */
  }
}

.page-about__scroller {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}

.page-about__scroller.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.page-about__scroller::-webkit-scrollbar {
  display: none;
}

.page-about__track {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--about-card);
  column-gap: 0.75rem; /* 12px MO */
  padding-left: var(--about-inline);
  padding-right: var(--about-inline);
  vertical-align: top;
}

@media (min-width: 1024px) {
  .page-about__track {
    column-gap: var(--grid-gutter); /* 20px */
  }
}

.page-about__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  width: var(--about-card);
  max-width: var(--about-card);
  min-height: 31.125rem; /* 498px */
  margin: 0;
  padding: 3.5rem 2.1875rem 3rem; /* 56 / 35 / 48 */
  border-radius: 1.875rem;
  background: var(--color-cd);
  color: var(--color-white);
}

@media (min-width: 1024px) {
  .page-about__card {
    min-height: 33rem; /* 528px */
    padding: 4.375rem 2.1875rem 1.9375rem; /* 70 / 35 / 31 */
  }
}

.page-about__quote {
  margin: 0;
  color: var(--color-white);
}

.page-about__author {
  margin: 0;
  color: var(--color-white);
}