/* === drberg_social_banners =========================================== */

.social-banner { margin: 24px 0; }

/* Aspect-ratio wrapper — position:relative so children can be absolute */
.sbwrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

/* Desktop: 2434 × 748  → padding-top = 748/2434 * 100 = 30.73% */
.sbwrap--desktop { padding-top: 30.73%; }

/* Mobile square: 1080 × 1080 → padding-top = 100% */
.sbwrap--mobile { padding-top: 100%; display: none; }

@media (max-width: 767px) {
    .sbwrap--desktop { display: none; }
    .sbwrap--mobile  { display: block; }
}

/* Banner image fills the padded box */
.sbi {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: block;
}

/* ── Messenger icons inside buttons ─────────────────────────────────── */
.sbtn img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    pointer-events: none;
}

/* ── Round click-target buttons ─────────────────────────────────────── */
/* Transparent overlay. Uncomment background for debug:                  */
/* background: rgba(255,0,0,0.25); border: 2px dashed red;              */
.sbtn {
    position: absolute;
    height: 0;               /* actual height comes from padding-bottom  */
    border-radius: 50%;
    cursor: pointer;
    display: block;
    transform: translate(-50%, -50%);
    z-index: 10;
    background: transparent;
}

/* ── DESKTOP button positions & sizes ─────────────────────────────────
   Banner 1: small inline icons after "в соцсетях" text
   Banner 2–4: large icons, lower-left of image
   Coordinates = (left%, top%) of original image  */

/* Banner 1 desktop — fixed buttons.
   Ширина баннера = ширине .container и меняется ступенями:
   1140px (≥1200) → 960px (992–1199) → 720px (768–991), ниже 768 — мобильный.
   Высота баннера считается от ширины (padding-top: 30.73%), поэтому размер
   кнопок и top пересчитаны для каждой ступени. */
.social-banner--1 .sbwrap--desktop .sbtn           { width: 64px; height: 64px; padding-bottom: 0; }
.social-banner--1 .sbwrap--desktop .sbtn--vk       { left: 42.3%; top: 125px; }
.social-banner--1 .sbwrap--desktop .sbtn--max      { left: 49%;   top: 125px; }
.social-banner--1 .sbwrap--desktop .sbtn--tg       { left: 55.7%; top: 125px; }

/* .container 960 → баннер 960×295 */
@media (max-width: 1199px) {
    .social-banner--1 .sbwrap--desktop .sbtn       { width: 48px; height: 48px; }
    .social-banner--1 .sbwrap--desktop .sbtn--vk,
    .social-banner--1 .sbwrap--desktop .sbtn--max,
    .social-banner--1 .sbwrap--desktop .sbtn--tg   { top: 106px; }
}

/* .container 720 → баннер 720×221 */
@media (max-width: 991px) {
    .social-banner--1 .sbwrap--desktop .sbtn       { width: 38px; height: 38px; }
    .social-banner--1 .sbwrap--desktop .sbtn--vk,
    .social-banner--1 .sbwrap--desktop .sbtn--max,
    .social-banner--1 .sbwrap--desktop .sbtn--tg   { top: 82px; }
}

/* Banner 2 desktop */
.social-banner--2 .sbwrap--desktop .sbtn           { width: 9.5%; height: 94px; padding-bottom: 0; }
.social-banner--2 .sbwrap--desktop .sbtn--vk       { left: 11.4%; top: 74.4%; }
.social-banner--2 .sbwrap--desktop .sbtn--max      { left: 22.6%; top: 74.4%; }
.social-banner--2 .sbwrap--desktop .sbtn--tg       { left: 33.4%; top: 74.4%; }

/* Banner 3 desktop */
.social-banner--3 .sbwrap--desktop .sbtn           { width: 8.5%; padding-bottom: 5.5%; height: 100px; }
.social-banner--3 .sbwrap--desktop .sbtn--vk       { left: 11.2%; top: 73.8%; }
.social-banner--3 .sbwrap--desktop .sbtn--max      { left: 22.4%; top: 73.8%; }
.social-banner--3 .sbwrap--desktop .sbtn--tg       { left: 33.4%; top: 73.8%; }

/* Banner 4 desktop */
.social-banner--4 .sbwrap--desktop .sbtn           { width: 8.8%; padding-bottom: 5.5%; height: 95px; }
.social-banner--4 .sbwrap--desktop .sbtn--vk       { left:  9.2%; top: 59%; }
.social-banner--4 .sbwrap--desktop .sbtn--max      { left: 20.2%; top: 59%; }
.social-banner--4 .sbwrap--desktop .sbtn--tg       { left: 31.2%; top: 59%; }

/* ── MOBILE button positions & sizes ──────────────────────────────────
   All positions are % of the 1080×1080 image */

/* Banner 1 mobile — ряд кнопок внизу баннера (bottom вместо top).
   Размер в % от ширины баннера: ниже 576px контейнер тянется непрерывно
   вместе с окном, ступеней для медиазапросов нет, поэтому px «плавали бы».
   11.85% = 64px при баннере 540px (окно 576–767px), как было подобрано.
   aspect-ratio, а не height: у базового .sbtn height: 0 и иконка внутри
   (.sbtn img { height: 100% }) схлопнулась бы в ноль. */
.social-banner--1 .sbwrap--mobile .sbtn            { width: 11.85%; height: auto; aspect-ratio: 1; padding-bottom: 0; }
.social-banner--1 .sbwrap--mobile .sbtn--vk        { left: 12%; bottom: 0; }
.social-banner--1 .sbwrap--mobile .sbtn--max       { left: 32%; bottom: 0; }
.social-banner--1 .sbwrap--mobile .sbtn--tg        { left: 52%; bottom: 0; }

/* Banner 2 mobile — large centered icons */
.social-banner--2 .sbwrap--mobile .sbtn            { width: 19%; padding-bottom: 19%; }
.social-banner--2 .sbwrap--mobile .sbtn--vk        { left: 26.4%; top: 49%; }
.social-banner--2 .sbwrap--mobile .sbtn--max       { left: 50%;   top: 49%; }
.social-banner--2 .sbwrap--mobile .sbtn--tg        { left: 73.5%; top: 49%; }

/* Banner 3 mobile */
.social-banner--3 .sbwrap--mobile .sbtn            { width: 19%; padding-bottom: 19%; }
.social-banner--3 .sbwrap--mobile .sbtn--vk        { left: 27.8%; top: 38%; }
.social-banner--3 .sbwrap--mobile .sbtn--max       { left: 50%;   top: 38%; }
.social-banner--3 .sbwrap--mobile .sbtn--tg        { left: 71.8%; top: 38%; }

/* Banner 4 mobile — medium icons inside upper-left bubble */
.social-banner--4 .sbwrap--mobile .sbtn            { width: 13.5%; padding-bottom: 13.5%; }
.social-banner--4 .sbwrap--mobile .sbtn--vk        { left: 14.5%; top: 36%; }
.social-banner--4 .sbwrap--mobile .sbtn--max       { left: 32.7%; top: 36%; }
.social-banner--4 .sbwrap--mobile .sbtn--tg        { left: 51%;   top: 36%; }

/* ── Banner 6 (корзина) — без кнопок соцсетей ──────────────────────────
   Desktop: 2434 × 748  → padding-top = 30.73%
   Mobile:  1080 × 1080 → padding-top = 100%
   Подогнать padding-top под реальные размеры картинок. */
.social-banner--6 .sbwrap--desktop { padding-top: 30.73%; }
.social-banner--6 .sbwrap--mobile  { padding-top: 100%; }

/* ── Banner 5 (главная) «Участвуйте в челлендже в соцсетях» ────────────
   Desktop: иконок на картинке НЕТ → показываем vk/max/tg (нужна фикс.высота,
            чтобы <img> отрисовался). Mobile: иконки впечатаны → прозрачные зоны.
   Координаты стартовые — подогнать в devtools. */
.social-banner--5 .sbwrap--desktop .sbtn           { width: 64px; height: 64px; padding-bottom: 0; }
.social-banner--5 .sbwrap--desktop .sbtn--vk       { left: 15%; top: 75%; }
.social-banner--5 .sbwrap--desktop .sbtn--max      { left: 25%; top: 75%; }
.social-banner--5 .sbwrap--desktop .sbtn--tg       { left: 35%; top: 75%; }

.social-banner--5 .sbwrap--mobile .sbtn            { width: 7%; padding-bottom: 7%; }
.social-banner--5 .sbwrap--mobile .sbtn--vk        { left: 49%; top: 18.5%; }
.social-banner--5 .sbwrap--mobile .sbtn--max       { left: 57%; top: 18.5%; }
.social-banner--5 .sbwrap--mobile .sbtn--tg        { left: 65%; top: 18.5%; }