/* ── About: Problem Section ── */
.about-problem-section { padding: clamp(64px, 8vw, 96px) 0;     background: #f9fafe; padding-top:0px !important;}
.about-problem-section .container {
  width: 100%; max-width: var(--maxw,1240px);
  margin: 0 auto; padding: 0 var(--gutter,24px); box-sizing: border-box;
  padding-top: 20px;
}

/* Two-col grid */
.ab-problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8, 48px);
  align-items: stretch;
}
.ab-problem-grid > * { min-width: 0; }

/* Left: prose */
.ab-problem-grid .ab-prose {
  max-width: none; margin: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.ab-problem-grid .ab-prose h2 {
  font-family: 'Neue Haas Grotesk Display','Helvetica Neue',Arial,sans-serif;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.1; color: var(--ink,#0A0F1E);
  margin: 0 0 var(--s-5,20px);
}
.ab-problem-grid .ab-prose p {
  font-family: 'Neue Haas Grotesk Display','Helvetica Neue',Arial,sans-serif;
  font-size: 17px; font-weight: 500;
  color: var(--ink-mid,#4B5068); line-height: 1.65;
  margin: 0 0 var(--s-4,16px);
}
.ab-problem-grid .ab-prose p:last-child { margin-bottom: 0; }

/* Right: photo */
.ab-problem-photo { margin: 0; display: flex; flex-direction: column; align-self: start; }
.ab-problem-photo-frame {
  overflow: hidden; aspect-ratio: 16/10;
  border-radius: 12px; border: 1px solid var(--line,#E4E8F3); min-height: 380px;
}
.ab-problem-photo-placeholder {
  width: 100%; height: 100%; min-height: 380px;
  background: var(--bg,#FAFBFD);
}
.ab-problem-photo img {
  width: 100%; height: 100%; display: block; object-fit: cover;
}
.ab-problem-photo figcaption {
  margin-top: var(--s-3,12px); font-size: 14px;
  color: var(--ink-muted,#6B7088); font-style: italic; text-align: center;
}

@media (max-width: 920px) {
  .ab-problem-grid { grid-template-columns: 1fr; gap: var(--s-6,28px); }
  .ab-problem-photo-frame { min-height: 0; aspect-ratio: 16/10; }
  .ab-problem-photo-placeholder { min-height: 240px; }
  .about-problem-section {
    padding: 20px 0;
    background: #f9fafe;
}
}
/* ── Arabic RTL font override ───────────────────────────────────── */
html[dir="rtl"] .ab-problem-grid .ab-prose h2,
html[dir="rtl"] .ab-problem-grid .ab-prose p,
html[dir="rtl"] .ab-problem-photo figcaption {
  font-family: 'Noto Sans Arabic', 'Segoe UI', sans-serif;
}