/* ============================================================
   TEXT BLOCKS — Avatar Studio
   Blocuri generice de conținut: „Text + imagine" și „Text liber".
   Folosite pe paginile editoriale (ex: Despre).
   ============================================================ */

/* Degajarea sub header-ul fix pentru pagini fără hero e tratată generic
   în global.css (`#main-content > .section:first-child`). */

/* ── Text + imagine (2 coloane) ───────────────────────────── */
.text-image__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 45%);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.text-image--reversed .text-image__media { order: -1; }
/* Imaginea reflectată în stânga păstrează aceeași lățime proporțională */
.text-image--reversed .text-image__inner { grid-template-columns: minmax(320px, 45%) minmax(0, 1fr); }

/* Fără imagine → o singură coloană, lățime de lectură confortabilă */
.text-image__inner:not(:has(.text-image__media)) {
  grid-template-columns: 1fr;
  max-width: 760px;
  margin-inline: auto;
}

.text-image__title {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 22px;
  color: var(--text);
}

.text-image__text {
  color: var(--text-muted);
  line-height: 1.85;
  font-size: 1.02rem;
}
.text-image__text > :first-child { margin-top: 0; }
.text-image__text > :last-child { margin-bottom: 0; }
.text-image__text p { margin-bottom: 1.1em; }
.text-image__text strong { color: var(--text); font-weight: 600; }
.text-image__text a { color: var(--accent); }

.text-image__img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
  aspect-ratio: 4/5;
  box-shadow: var(--shadow-lg);
  display: block;
}

@media (max-width: 820px) {
  .text-image__inner,
  .text-image--reversed .text-image__inner { grid-template-columns: 1fr; }
  .text-image--reversed .text-image__media { order: 0; }
}

/* Aplatizare la 4/3 doar pe mobil — pe tabletă (stivuit) tot păstrăm
   raportul editorial 4/5, unde încă e loc suficient pe verticală. */
@media (max-width: 560px) {
  .text-image__img { aspect-ratio: 4/3; }
}

/* ── Text liber (prose) ───────────────────────────────────── */
.text-free__content {
  max-width: 760px;
  margin-inline: auto;
}

.prose {
  color: var(--text-muted);
  line-height: 1.85;
  font-size: 1.02rem;
}
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h2 {
  color: var(--text);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 20px;
}
.prose h2:not(:first-child) { margin-top: 1.8em; }
.prose h3 {
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 1.6em 0 12px;
}
.prose p { margin-bottom: 1.15em; }
.prose strong { color: var(--text); font-weight: 600; }
.prose em { font-style: italic; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.prose li { margin-bottom: .5em; }