/* Each story stays beside its photograph. RTL changes the image side from
   right to left between rows; mobile retains a consistent text/photo order. */
.perspective-rows {
  display: grid;
  gap: clamp(36px, 5vw, 76px);
  max-width: 1440px;
  margin-inline: auto;
}
.perspective-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "photo copy";
  gap: clamp(24px, 3.6vw, 56px);
  align-items: stretch;
  scroll-margin-top: calc(var(--header) + 28px);
}
.perspective-row:nth-child(even) { grid-template-areas: "copy photo"; }
.perspective-row .perspective-copy {
  grid-area: copy;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(28px, 3.4vw, 52px);
  max-width: none;
}
.perspective-row .perspective-copy > :is(h2, h3) {
  font-size: clamp(1.625rem, 2.5vw, 2.5rem);
  line-height: 1.65;
  margin-bottom: 22px;
}
.perspective-row .perspective-copy > p { font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 2; }
.perspective-row .perspective-copy > .perspective-lead { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); color: var(--panel-ink); }
.perspective-row .perspective-copy .text-link { margin-top: 28px; min-height: 44px; }
.perspective-copy .info-panel__icon { width: 48px; height: 48px; flex-basis: 48px; margin-bottom: 20px; }
.perspective-photo { grid-area: photo; min-width: 0; }
.perspective-photo .landmark { display: flex; flex-direction: column; height: 100%; margin: 0; }
.perspective-photo .landmark-frame {
  flex: 1;
  min-height: clamp(380px, 35vw, 560px);
  height: auto;
  border-radius: var(--content-radius);
}
.perspective-photo .landmark-frame img { position: absolute; inset: 0; }
.perspective-photo .landmark-kafd img { object-position: 50% 20%; }
.perspective-photo .landmark-caption { flex: none; }
@media (max-width: 760px) {
  .perspective-rows { gap: 40px; }
  .perspective-row, .perspective-row:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "photo";
    gap: 18px;
  }
  .perspective-row .perspective-copy { padding: 26px 24px; }
  .perspective-row .perspective-copy > :is(h2, h3) { margin-bottom: 18px; }
  .perspective-row .perspective-copy .text-link { margin-top: 20px; }
  .perspective-photo .landmark { height: auto; }
  .perspective-photo .landmark-frame { flex: none; min-height: 0; aspect-ratio: 4 / 5; }
}