/* Бежевая плашка с фразой и кнопкой. Точечная карта в правой части —
   та же графика, что в подвале, приглушённая до 20 %. */

.callout {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  overflow: hidden;
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-2xl);
  background: var(--bg-surface-alt);
}

.callout__texture {
  position: absolute;
  top: -79.29%;
  inset-inline-start: 26.07%;
  width: 100%;
  height: 733.15%;
  opacity: 0.2;
  background-image: var(--decor-image, url("../../img/hero/world-map.webp"));
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

.callout__text {
  position: relative;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-strong);
}

.callout__action {
  position: relative;
  align-self: flex-start;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .callout__action { align-self: flex-end; }
}

@media (min-width: 1024px) {
  .callout {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-10);
  }

  .callout__text { font-size: var(--fs-lg); }

  .callout__action { align-self: auto; }
}