/* =========================================================================
   despre.css — Despre mine page only (enqueued on is_page('despre')).
   Shared pieces (.page-hero, .reveal, .section--brand, buttons) live in
   base.css.
   ========================================================================= */

.despre-page__grid { align-items: center; }
.despre-page__media { grid-column: 1 / span 5; }
.despre-page__media img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
}
.despre-page__body { grid-column: 7 / span 6; }
.despre-page__text { font-size: clamp(1.05rem, 1.6vw, 1.2rem); }
.despre-page__text + .despre-page__text { margin-top: 1.1em; }

/* The portrait section already carries a large bottom padding; without this the
   bio section adds its own top padding on top of it and the gap doubles. */
.section--despre-bio {
  padding-block-start: 0;
}

.despre-page__reading {
  max-width: 70ch;
  margin-inline: auto;
}
.despre-page__text--closing {
  font-size: clamp(1.2rem, 1.9vw, 1.4rem);
  color: var(--brand);
}

.despre-page__cities {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem; margin-top: 1.75rem;
}
.despre-page__cities-label {
  font-family: var(--font-display); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gray-500); margin-right: 0.35rem;
}
.despre-page__city {
  padding: 0.38em 0.9em; border-radius: 999px; font-size: 0.88rem;
  border: 1px solid var(--gray-200); color: var(--ink);
  background: var(--gray-50); white-space: nowrap;
}

.despre-page-cta { text-align: center; max-width: 640px; }
.despre-page-cta p { opacity: 0.9; }
.despre-page-cta__actions {
  display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;
  margin-top: 1.5rem;
}

@media (max-width: 768px) {
  .despre-page__grid { grid-template-columns: 1fr; }
  .despre-page__media { grid-column: auto; max-width: 420px; margin-inline: auto; width: 100%; }
  .despre-page__body { grid-column: auto; }
}