/**
 * Block: Approach / Подход (#pichy-approach)
 * Editorial blue mesh + 2×2 сетка с воздухом.
 */

#pichy-approach.pichy-block--approach {
  --app-blue: #302C73;
  --app-blue-deep: #1E1B4B;
  --app-cream: #FAEDE5;
  --app-peach: #F2A474;
  --app-orange: #DE6916;
  --app-periwinkle: #7989BF;
  background-color: var(--app-blue-deep);
}

#pichy-approach .approach-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

#pichy-approach .approach-bg__mesh {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 52% 44% at 0% 88%, rgba(242, 164, 116, 0.14) 0%, transparent 58%),
    radial-gradient(ellipse 48% 40% at 100% 12%, rgba(121, 137, 191, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% -10%, rgba(121, 137, 191, 0.18) 0%, transparent 62%),
    linear-gradient(
      168deg,
      #3A3575 0%,
      var(--app-blue) 40%,
      #252258 72%,
      var(--app-blue-deep) 100%
    );
}

#pichy-approach .approach-bg__warm {
  position: absolute;
  width: min(56vw, 30rem);
  height: min(56vw, 30rem);
  top: 18%;
  left: -12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(222, 105, 22, 0.12) 0%, transparent 68%);
  filter: blur(52px);
}

#pichy-approach .approach-bg__depth {
  position: absolute;
  width: min(44vw, 22rem);
  height: min(44vw, 22rem);
  bottom: -8%;
  right: -6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(48, 44, 115, 0.45) 0%, transparent 66%);
  filter: blur(44px);
}

/* ─── Section ─── */
#pichy-approach .approach-section {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding-top: 3.5rem;
  padding-bottom: 3.75rem;
}

@media (min-width: 768px) {
  #pichy-approach .approach-section {
    gap: 4rem;
    padding-top: 5rem;
    padding-bottom: 5.25rem;
  }
}

@media (min-width: 1024px) {
  #pichy-approach .approach-section {
    gap: 4.75rem;
    padding-top: 5.5rem;
    padding-bottom: 6rem;
  }
}

/* ─── Header ─── */
#pichy-approach .approach-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 44rem;
}

@media (min-width: 768px) {
  #pichy-approach .approach-header {
    gap: 1.25rem;
    max-width: 48rem;
  }
}

@media (min-width: 1024px) {
  #pichy-approach .approach-header {
    gap: 1.5rem;
    max-width: 52rem;
  }
}

#pichy-approach .approach-header__label {
  margin: 0;
  font-family: var(--pichy-font-body);
  font-size: var(--pichy-sm2);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--app-peach);
  opacity: 0.88;
}

#pichy-approach .approach-header__title {
  margin: 0;
  max-width: 16ch;
  color: var(--app-cream);
  text-wrap: balance;
}

@media (min-width: 768px) {
  #pichy-approach .approach-header__title {
    max-width: 18ch;
  }
}

#pichy-approach .approach-header__lead {
  margin: 0;
  font-family: var(--pichy-font-body);
  font-size: var(--pichy-sm1);
  line-height: 1.68;
  letter-spacing: var(--pichy-tracking-body);
  color: var(--app-cream);
  opacity: 0.82;
  max-width: 52ch;
}

@media (min-width: 768px) {
  #pichy-approach .approach-header__lead {
    font-size: calc(var(--pichy-sm1) * 1.06);
    line-height: 1.72;
    max-width: 54ch;
  }
}

/* ─── Grid: 2×2 с воздухом ─── */
#pichy-approach .approach-grid {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 768px) {
  #pichy-approach .approach-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.5rem 3rem;
  }
}

@media (min-width: 1024px) {
  #pichy-approach .approach-grid {
    gap: 4rem 4.5rem;
  }
}

#pichy-approach .approach-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

@media (min-width: 768px) {
  #pichy-approach .approach-card {
    gap: 1.5rem;
  }
}

#pichy-approach .approach-card__num {
  display: block;
  font-family: var(--pichy-font-display);
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--app-orange);
}

#pichy-approach .approach-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

@media (min-width: 768px) {
  #pichy-approach .approach-card__body {
    gap: 1rem;
  }
}

#pichy-approach .approach-card__title {
  margin: 0;
  font-family: var(--pichy-font-display);
  font-size: var(--pichy-t0);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--app-cream);
  text-wrap: balance;
  max-width: 22ch;
}

@media (min-width: 768px) {
  #pichy-approach .approach-card__title {
    font-size: calc(var(--pichy-t0) * 1.06);
    line-height: 1.26;
  }
}

#pichy-approach .approach-card__text {
  margin: 0;
  font-family: var(--pichy-font-body);
  font-size: var(--pichy-sm1);
  line-height: 1.64;
  letter-spacing: var(--pichy-tracking-body);
  color: var(--app-cream);
  opacity: 0.78;
  max-width: 42ch;
}