/* Section backgrounds — unified full-bleed layers and single overlay system */

main {
  background-color: var(--color-bg);
}

.section {
  background-color: var(--color-bg);
}

.section--alt:not(.section--has-bg-image) {
  background-color: var(--color-bg-elevated);
}

.section--has-bg-image {
  /* Настройка видимости фона (нет отдельного opacity на слое):
     --section-img-brightness — яркость картинки (0.35–0.85, выше = заметнее)
     --section-overlay-mid — плотность центральной маски (0.5–0.9, ниже = заметнее) */
  --section-img-brightness: 0.62;
  --section-overlay-mid: 0.78;
  --section-overlay-edge: 0.88;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--color-bg);
}

.section--alt.section--has-bg-image {
  background-color: var(--color-bg);
}

.section--has-bg-image > .container {
  position: relative;
  z-index: 2;
}

.section-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
  overflow: hidden;
}

.section-bg-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: saturate(0.8) contrast(1.04) brightness(var(--section-img-brightness, 0.62));
}

/* Маска поверх картинки — прозрачность через alpha в rgba(), не через opacity */
.section-bg-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(11, 9, 8, var(--section-overlay-edge, 0.88)) 0%,
      rgba(11, 9, 8, var(--section-overlay-mid, 0.78)) 12%,
      rgba(11, 9, 8, calc(var(--section-overlay-mid, 0.78) - 0.06)) 50%,
      rgba(11, 9, 8, var(--section-overlay-mid, 0.78)) 88%,
      rgba(11, 9, 8, var(--section-overlay-edge, 0.88)) 100%
    ),
    radial-gradient(
      ellipse 115% 80% at 50% 48%,
      rgba(11, 9, 8, 0.45) 0%,
      rgba(11, 9, 8, var(--section-overlay-mid, 0.78)) 100%
    );
}

/* Section-specific: image crop only, no separate masks */
.section-bg-image--advantages img {
  object-position: center 40%;
}

.section-bg-image--download img {
  object-position: center center;
}

.section-bg-image--news img {
  object-position: center 35%;
}

.section-bg-image--events img {
  object-position: center top;
}

.section-bg-image--about-preview img {
  object-position: center center;
}

.section-bg-image--community img {
  object-position: center bottom;
}

@media (max-width: 767px) {
  .section--has-bg-image {
    --section-img-brightness: 0.58;
    --section-overlay-mid: 0.82;
  }

  .section-bg-image::after {
    background: linear-gradient(
      180deg,
      rgba(11, 9, 8, 0.9) 0%,
      rgba(11, 9, 8, var(--section-overlay-mid, 0.82)) 20%,
      rgba(11, 9, 8, var(--section-overlay-mid, 0.82)) 80%,
      rgba(11, 9, 8, 0.9) 100%
    );
  }

  .section-bg-image--events img {
    object-position: center 30%;
  }

  .section-bg-image--community img {
    object-position: center 70%;
  }
}