/* Dyskretna, autorska mapa regionu — nie jest kopią mapy zewnętrznego dostawcy. */

.area-preview {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 7vw, 104px);
  background: #f1f0ec url("../../img/area-preview-1800.webp") center center / cover no-repeat;
  border-top: 1px solid rgba(11, 36, 57, .08);
  border-bottom: 1px solid rgba(11, 36, 57, .08);
}
.area-preview::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(248,246,241,.74) 0%, rgba(248,246,241,.18) 51%, rgba(248,246,241,.04) 100%); pointer-events: none; }
.area-preview__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .44fr) minmax(0, .56fr);
  min-height: clamp(290px, 25vw, 410px);
  align-items: center;
}
.area-preview__copy h2 { margin-top: 14px; max-width: 12ch; }
.area-preview__copy .prose { max-width: 35ch; margin-top: var(--space-5); }
@media (max-width: 899px) {
  .area-preview { background-position: 60% center; }
  .area-preview::before { background: linear-gradient(90deg, rgba(248,246,241,.9) 0%, rgba(248,246,241,.68) 50%, rgba(248,246,241,.2) 100%); }
  .area-preview__grid { grid-template-columns: minmax(0, .7fr) minmax(0, .3fr); min-height: 330px; }
}

@media (max-width: 560px) {
  .area-preview { padding-block: var(--space-7); }
  .area-preview { background-image: url("../../img/area-preview-1000.webp"); background-position: 58% center; }
  .area-preview__grid { grid-template-columns: minmax(0, .88fr) minmax(0, .12fr); min-height: 300px; }
}