/* ============================================================
   SOBRE NÓS — page-specific styles
============================================================ */

.nav-link--current { font-weight: 600; }

/* ============================================================
   HERO
============================================================ */
.sobre-hero {
  background: var(--dark);
  min-height: clamp(180px, 22.6vw, 326px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sobre-hero-title {
  font-family: var(--font-mono);
  font-weight: 200;
  font-size: clamp(56px, 14.2vw, 205px);
  letter-spacing: clamp(-3px, -0.71vw, -10.25px);
  line-height: 1;
  color: var(--red);
  white-space: nowrap;
  user-select: none;
}

/* ============================================================
   INTRO
============================================================ */
.sobre-intro {
  background: var(--cream);
  padding: clamp(48px, 5.3vw, 77px) clamp(24px, 5vw, 72px);
  display: flex;
  justify-content: center;
}

.sobre-intro p {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(18px, 2.4vw, 35px);
  line-height: 1.3;
  color: var(--dark);
  text-align: center;
  max-width: 70vw;
}

.sobre-intro u {
  text-underline-position: from-font;
  text-decoration-thickness: from-font;
}

/* ============================================================
   PERSON CARDS
============================================================ */
.sobre-person {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* height drives the row — both cells get exactly this, so photo fills fully */
  height: clamp(360px, 60vw, 864px);
  overflow: hidden;
}

.sobre-person-photo {
  overflow: hidden;
  background: #b0b0b0;
  display: flex;
}

.sobre-person-photo img {
  width: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.sobre-person-photo--bw img {
  filter: grayscale(100%);
  object-position: center 20%;
}

.sobre-person-photo--bottom img {
  object-position: center bottom;
}

.sobre-person-photo--carol img {
  object-fit: contain;
  object-position: center top;
}


.sobre-person-text {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vw, 72px);
  padding: clamp(32px, 5.3vw, 77px) clamp(24px, 6vw, 80px);
  overflow: hidden;
}

.sobre-person-text--red   { background: var(--red); }
.sobre-person-text--dark  { background: var(--dark); }
.sobre-person-text--cream { background: var(--cream); }

.sobre-person-name {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: clamp(40px, 7.2vw, 104px);
  line-height: 1.05;
  color: var(--dark);
}

.sobre-person-name--red { color: var(--red); }
.sobre-person-name--right { text-align: right; }

.sobre-person-body {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.5vw, 24px);
  min-height: 0;
  overflow: hidden;
  margin-top: auto;
}

.sobre-person-subtitle {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(11px, 1.3vw, 18px);
  line-height: 1.5;
  color: var(--dark);
  text-decoration: underline;
  text-underline-position: from-font;
}

.sobre-person-subtitle--red { color: var(--red); }

.sobre-person-bio {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(11px, 1.3vw, 18px);
  line-height: 1.5;
  color: var(--cream);
}

.sobre-person-bio--dark { color: var(--dark); }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 900px) {
  .sobre-hero-title {
    font-size: clamp(44px, 14vw, 80px);
  }

  .sobre-intro p {
    max-width: 100%;
    text-align: left;
  }

  .sobre-person {
    grid-template-columns: 1fr;
    height: auto;
  }

  .sobre-person-photo {
    aspect-ratio: 4 / 3;
    position: relative;
  }

  .sobre-person--reverse .sobre-person-photo {
    order: -1;
  }

  .sobre-person-text {
    padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 40px);
    height: auto;
  }
}