/* ============================================================
   ПРАВКИ К ЗЕЛЁНОЙ ВЕРСИИ КП ДЛЯ 4 КЛАССА
   Замечания Ростислава от 30.09.2026, каждое - отдельный
   переключатель grN в панели «Варианты». Первое положение
   везде «как сейчас», второе - правка.

   Зелёный - олива #b9c255 из третьего набора цветов. На белом
   она даёт контраст 1.9, читать нечем, поэтому у текста свой
   затемнённый оттенок той же гаммы: --gr-ink, 5.8 на белом.

   Файл подключается только на страницах 4 класса и идёт после
   всех остальных: ему нужно перевешивать и варианты, и палитру.
   ============================================================ */
/* плашка под тарифами «Групповые фотографии во всех альбомах
   одинаковые» - содержание, а не вариант: есть во всех трёх цветах */
.c2-grpnote { margin-top: 26px; }
.c2-grpnote b {
  display: block; font-size: 19px; line-height: 1.25;
  font-weight: 800; text-transform: uppercase;
  color: var(--accent-ink, var(--text));
}
.c2-grpnote p { margin-top: 8px; color: var(--card-ink); }
@media (min-width: 900px) {
  .c2-grpnote { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 28px; align-items: center; }
  .c2-grpnote p { margin-top: 0; }
}

html[data-pal4="3"] body {
  --gr: #b9c255;          /* сам зелёный: подложки, тени, кнопки */
  --on-gr: #16202a;       /* текст на зелёном, контраст 8.6 */
  --gr-ink: #606b1c;      /* зелёный для текста на светлом */
  --gr-deep: #243007;     /* зелёный для текста на синем фоне, контраст 4.6 */
}

/* 1. Первый экран: заголовок белыми буквами */
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr1="1"] .c2-hero h1 { color: #ffffff; }

/* 2. Первый экран: кнопка «Смотреть тарифы» зелёная */
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr2="1"] .c2-hero .c2-btn {
  background: var(--gr); color: var(--on-gr);
}

/* 3. «Что за альбом»: плашка «Плотные страницы» зелёная */
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr3="1"] .c2-tiles .c2-card--graph {
  background: var(--gr); color: var(--on-gr);
  --card-ink: var(--on-gr);
  --card-dim: color-mix(in srgb, var(--on-gr) 80%, transparent);
}

/* 4. «Что за альбом»: плашка «180°» нежно-голубая, как таблица отличий */
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr4="1"] .c2-tiles .c2-card--ink {
  background: var(--soft); color: var(--text);
  --card-ink: var(--text);
  --card-dim: color-mix(in srgb, var(--text) 80%, transparent);
}

/* 5. «Снимаем там, где удобно»: заголовок белый */
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr5="1"] .c2-s[data-block="Съёмки"] > .c2-in > h2 {
  color: #ffffff;
}

/* 6. Съёмки: рамка с зелёной тенью. Сейчас карточки
   без рамок вовсе, поэтому рамка возвращается вместе с тенью */
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr6="1"] .c2-s[data-block="Съёмки"] .c2-card {
  --sh: var(--gr);
  border: 2.5px solid var(--edge);
  box-shadow: 5px 5px 0 var(--gr);
}

/* 7. Съёмки: заголовки «В студии» и «В школе» зелёные.
   Карточки стоят прямо на синем фоне секции, и светлая олива
   на нём даёт 1.6 - читать нечем. Берётся тёмная олива */
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr7="1"] .c2-s[data-block="Съёмки"] .c2-card h3 {
  color: var(--gr-deep);
}

/* 8. Тарифы: подложка Норма зелёная */
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr8="1"] .c2-plans .c2-plan--hit {
  background: var(--gr); color: var(--on-gr);
  --card-ink: var(--on-gr);
  --card-dim: color-mix(in srgb, var(--on-gr) 80%, transparent);
}
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr8="1"] .c2-plans .c2-plan--hit .c2-plan__top b,
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr8="1"] .c2-plans .c2-plan--hit .c2-plan__top h3 {
  color: var(--on-gr);
}

/* 9. Тарифы: цены остальных карточек зелёные */
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr9="1"] .c2-plans .c2-plan:not(.c2-plan--hit) .c2-plan__top b {
  color: var(--gr-ink);
}

/* 10. «Уже в цене»: заголовок белый */
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr10="1"] .c2-s[data-block="Что входит в цену"] > .c2-in > h2 {
  color: #ffffff;
}

/* 11. Дизайны: кнопка «Смотреть кадры» зелёная */
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr11="1"] .c2-styleopen {
  background: var(--gr); color: var(--on-gr);
}

/* 35. Дизайны: рамка карточек зелёная, на ПК и телефоне */
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr35="1"][data-v-gr35] .c2-s[data-block="Четыре стиля"] .c2-shots figure {
  border-color: var(--gr);
}

/* 12. «Правила класса»: тень карточек зелёная */
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr12="1"] .c2-s[data-block="Как выбрать тариф"] .c2-card {
  --sh: var(--gr); box-shadow: 5px 5px 0 var(--gr);
}

/* 13. «Как мы работаем»: подложка блока зелёная. Текст внутри
   тёмный: белый на оливе даёт 1.9 */
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr13="1"] .c2-s[data-block="Как мы работаем"] {
  --sec-bg: var(--gr); --sec-ink: var(--on-gr);
  --sec-acc: var(--deep); --sec-acc-ink: #ffffff;
  background: var(--gr); color: var(--on-gr);
}
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr13="1"] .c2-s[data-block="Как мы работаем"] h2,
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr13="1"] .c2-s[data-block="Как мы работаем"] .c2-lead,
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr13="1"] .c2-s[data-block="Как мы работаем"] .c2-note {
  color: var(--on-gr);
}

/* 14. «Сдаём до 20 марта»: подложка цвета цифр сроков, тень зелёная */
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr14="1"] .c2-guard {
  background: var(--accent-ink); color: #ffffff;
  --card-ink: #ffffff;
  --card-dim: #ffffff;
  --sh: var(--gr); box-shadow: 5px 5px 0 var(--gr);
}
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr14="1"] .c2-guard h3,
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr14="1"] .c2-guard .c2-hook {
  color: #ffffff;
}

/* ============================================================
   ВТОРОЙ ЗАХОД, замечания от 30.09.2026, 03:24
   Там, где Ростислав просит белый текст на светлой подложке,
   у переключателя есть третье положение «подложка темнее»:
   белый на оливе даёт 1.9, на синем 3.05 - мелкий текст так
   не читается. Фон не трогаем, пока он сам не выберет
   ============================================================ */

/* 22. Какой зелёный у текста: заголовки съёмки, цены, цифры правил.
   Тёмный читается везде; средний - 3.1 на белом, хватает только
   крупным буквам; светлый - ровно цвет тени, 1.9 на белом */
html[data-pal4="3"] body[data-v-gr22="1"] { --gr-ink: #8a9a2e; --gr-deep: #8a9a2e; }
html[data-pal4="3"] body[data-v-gr22="2"] { --gr-ink: var(--gr); --gr-deep: var(--gr); }

/* 15. «Что за альбом получается»: заголовок цветом первого экрана */
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr15="1"] .c2-s[data-block="Альбом"] > .c2-in > h2 {
  color: var(--or);
}

/* 16. Плашки «Толстая обложка» и «Плотные страницы»:
   1 - подписи белым, 2 - весь текст белым, 3 - то же на тёмной подложке */
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr16="1"] .c2-tiles .c2-card--or span,
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr16="1"] .c2-tiles .c2-card--graph span,
html[data-pal4="3"][data-pal4][data-pal4] body:is([data-v-gr16="2"], [data-v-gr16="3"]) .c2-tiles .c2-card--or,
html[data-pal4="3"][data-pal4][data-pal4] body:is([data-v-gr16="2"], [data-v-gr16="3"]) .c2-tiles .c2-card--graph,
html[data-pal4="3"][data-pal4][data-pal4] body:is([data-v-gr16="2"], [data-v-gr16="3"]) .c2-tiles .c2-card--or :is(b, span),
html[data-pal4="3"][data-pal4][data-pal4] body:is([data-v-gr16="2"], [data-v-gr16="3"]) .c2-tiles .c2-card--graph :is(b, span) {
  color: #ffffff; --card-ink: #ffffff; --card-dim: #ffffff;
}
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr16="3"] .c2-tiles .c2-card--or { background: var(--accent-ink); }
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr16="3"] .c2-tiles .c2-card--graph { background: #4e5a13; }

/* 17. Тариф Норм: весь текст белым */
html[data-pal4="3"][data-pal4][data-pal4] body:is([data-v-gr17="1"], [data-v-gr17="2"]) .c2-plans .c2-plan--hit {
  color: #ffffff; --card-ink: #ffffff; --card-dim: #ffffff;
}
html[data-pal4="3"][data-pal4][data-pal4] body:is([data-v-gr17="1"], [data-v-gr17="2"]) .c2-plans .c2-plan--hit :is(.c2-plan__top b, .c2-plan__top h3, .c2-meta, .c2-hook, li, .c2-plan__note) {
  color: #ffffff;
}
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr17="2"] .c2-plans .c2-plan--hit { background: #4e5a13; }

/* 18. «Уже в цене»: тень карточек зелёная */
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr18="1"] .c2-s[data-block="Что входит в цену"] .c2-card {
  --sh: var(--gr); box-shadow: 5px 5px 0 var(--gr);
}

/* 19. «Правила класса»: цифры зелёные. Оттенок - переключатель 22 */
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr19="1"] .c2-s[data-block="Как выбрать тариф"] .c2-big {
  color: var(--gr-ink);
}

/* 20. «Как мы работаем»: заголовок белый. Только на ПК: там у блока
   синий фон, а на телефоне блок белый и белый заголовок пропал бы */
@media (min-width: 900px) {
  html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr20="1"] .c2-s[data-block="Как мы работаем"] > .c2-in > h2 {
    color: #ffffff;
  }
}

/* 21. «Сдаём до 20 марта»: текст белым */
html[data-pal4="3"][data-pal4][data-pal4] body:is([data-v-gr21="1"], [data-v-gr21="2"]) .c2-guard,
html[data-pal4="3"][data-pal4][data-pal4] body:is([data-v-gr21="1"], [data-v-gr21="2"]) .c2-guard :is(h3, .c2-hook) {
  color: #ffffff; --card-ink: #ffffff; --card-dim: #ffffff;
}
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr21="2"] .c2-guard { background: var(--accent-ink); }

/* ---- третий заход, замечания от 30.09.2026, 03:37 ---- */

/* 23. «Как мы работаем»: весь текст белым. Только на ПК, по той
   же причине, что и заголовок: на телефоне блок белый */
@media (min-width: 900px) {
  html[data-pal4="3"][data-pal4][data-pal4] body:is([data-v-gr23="1"], [data-v-gr23="2"]) .c2-s[data-block="Как мы работаем"] :is(h2, .c2-steps > .c2-card, .c2-steps > .c2-card > b, .c2-steps p) {
    color: #ffffff; --card-ink: #ffffff; --card-dim: #ffffff;
  }
  /* цифры в кружках и линия между ними - тоже белые */
  html[data-pal4="3"][data-pal4][data-pal4] body:is([data-v-gr23="1"], [data-v-gr23="2"]) .c2-s[data-block="Как мы работаем"] .c2-step {
    color: #ffffff; border-color: #ffffff;
  }
  html[data-pal4="3"][data-pal4][data-pal4] body:is([data-v-gr23="1"], [data-v-gr23="2"]) .c2-s[data-block="Как мы работаем"] .c2-steps::before {
    background: #ffffff;
  }
  html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr23="2"] .c2-s[data-block="Как мы работаем"],
  html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr23="2"] .c2-s[data-block="Как мы работаем"] .c2-step {
    --sec-bg: var(--accent-ink); background: var(--accent-ink);
  }
}

/* 26. Тарифы: названия голубые, как фон первого экрана. Кроме Норма:
   его подложка сама этого цвета, название на ней пропало бы.
   На белом голубой даёт 3.05 - крупным буквам хватает */
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr26="1"] .c2-plans .c2-plan:not(.c2-plan--hit) .c2-plan__top h3 {
  color: var(--or);
}

/* 27. Плашка про групповые фото: голубая, как фон первого экрана,
   текст белым. Белый на этом голубом - 3.05, мелкому тексту мало,
   поэтому есть положение потемнее (5.25) */
html[data-pal4="3"][data-pal4][data-pal4] body:is([data-v-gr27="1"], [data-v-gr27="2"]) .c2-grpnote {
  background: var(--or); color: #ffffff;
  --card-ink: #ffffff; --card-dim: #ffffff;
}
html[data-pal4="3"][data-pal4][data-pal4] body:is([data-v-gr27="1"], [data-v-gr27="2"]) .c2-grpnote :is(b, p) {
  color: #ffffff;
}
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr27="2"] .c2-grpnote { background: var(--accent-ink); }

/* 28. Плашка про групповые фото: тень зелёная */
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr28="1"] .c2-grpnote { --sh: var(--gr); }

/* 32. Фреймы с зелёной тенью - без чёрной обводки, на ПК и телефоне.
   Список снят с живой страницы: всё, у чего тень зелёная. Условие
   на переключатель тени рядом - если тень вернуть тёмной, вернётся
   и обводка. У «Цифр доверия» тень зелёная всегда, от палитры */
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr32="1"] .c2-s[data-block="Цифры доверия"] .c2-card,
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr32="1"][data-v-gr6="1"] .c2-s[data-block="Съёмки"] > .c2-in > .c2-card,
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr32="1"][data-v-gr24="1"] .c2-plans .c2-plan,
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr32="1"][data-v-gr28="1"] .c2-grpnote,
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr32="1"][data-v-gr18="1"] .c2-s[data-block="Что входит в цену"] .c2-card,
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr32="1"][data-v-gr12="1"] .c2-s[data-block="Как выбрать тариф"] .c2-card {
  border: 0;
}
@media (max-width: 899px) {
  html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr32="1"][data-v-gr30="1"] .c2-hero .c2-float { border: 0; }
}

/* ============================================================
   ТОЛЬКО ТЕЛЕФОН, замечания со стенда 4 класса, 30.09.2026.
   ПК эти правила не трогают
   ============================================================ */
@media (max-width: 899px) {
  /* 29. Съёмки: карточки. Рамка из правки 6 на телефоне стояла
     без боковых отступов и смотрелась угловато */
  /* 1 - без рамки, тень у самих фотографий */
  html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr29="1"] .c2-s[data-block="Съёмки"] > .c2-in > .c2-card {
    border: 0; box-shadow: none;
  }
  html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr29="1"] .c2-s[data-block="Съёмки"] .c2-shots img {
    box-shadow: 4px 4px 0 var(--gr);
  }
  /* 2 - белые карточки с мягко скруглёнными углами */
  html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr29="2"] .c2-s[data-block="Съёмки"] > .c2-in > .c2-card {
    background: #ffffff; border: 0; border-radius: 22px;
    padding: 20px 16px 16px;
    box-shadow: 5px 5px 0 var(--gr);
  }

  /* 34. «Уже в цене»: две карточки стояли вплотную, тень верхней
     ложилась на нижнюю. Разводим */
  html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr34="1"] .c2-s[data-block="Что входит в цену"] .c2-card + .c2-card {
    margin-top: 22px;
  }

  /* 30. Первый экран: тень у двух фотографий зелёная */
  html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr30="1"] .c2-hero .c2-float {
    box-shadow: 5px 5px 0 var(--gr);
  }

  /* 31. «Как мы работаем»: голубой фон, весь текст белым. На ПК
     так уже сделано правками 20 и 23 */
  html[data-pal4="3"][data-pal4][data-pal4] body:is([data-v-gr31="1"], [data-v-gr31="2"]) .c2-s[data-block="Как мы работаем"] {
    --sec-bg: var(--or); --sec-ink: #ffffff;
    background: var(--or); color: #ffffff;
  }
  html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr31="2"] .c2-s[data-block="Как мы работаем"] {
    --sec-bg: var(--accent-ink); background: var(--accent-ink);
  }
  html[data-pal4="3"][data-pal4][data-pal4] body:is([data-v-gr31="1"], [data-v-gr31="2"]) .c2-s[data-block="Как мы работаем"] :is(h2, .c2-steps > .c2-card, .c2-steps > .c2-card > b, .c2-steps p) {
    color: #ffffff; --card-ink: #ffffff; --card-dim: #ffffff;
  }
  /* кружки с цифрами - на цвете фона, обводка и цифра белые */
  html[data-pal4="3"][data-pal4][data-pal4] body:is([data-v-gr31="1"], [data-v-gr31="2"]) .c2-s[data-block="Как мы работаем"] .c2-step {
    color: #ffffff; border-color: #ffffff; background: var(--sec-bg);
  }
  html[data-pal4="3"][data-pal4][data-pal4] body:is([data-v-gr31="1"], [data-v-gr31="2"]) .c2-s[data-block="Как мы работаем"] .c2-steps::before {
    background: #ffffff;
  }
}

/* 33. Тарифы: карточки, кроме Норма, цвета фона блока
   «Чем они отличаются» - это --soft-deep, #d3e6f6 */
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr33="1"] .c2-plans .c2-plan:not(.c2-plan--hit) {
  background: var(--soft-deep);
}
/* положение 2: карточка белая, а обводка, что была чёрной, - зелёная.
   Атрибут повторён, чтобы перевесить правило 32 «без обводки» */
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr33="2"][data-v-gr33] .c2-plans .c2-plan:not(.c2-plan--hit) {
  background: #ffffff;
  border: 2.5px solid var(--gr);
}

/* 24. Тарифы: тень карточек зелёная */
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr24="1"] .c2-plans .c2-plan {
  --sh: var(--gr);
}

/* 25. Тариф Норм: плашки «Выбирают чаще всего» и про развороты
   зелёные, светлой оливой. Текст на них тёмный: белый дал бы 1.9 */
/* лишний .c2-plan в цепочке - чтобы перевесить белый текст Норма (17) */
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr25="1"] .c2-plans .c2-plan.c2-plan--hit .c2-tag,
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr25="1"] .c2-plans .c2-plan.c2-plan--hit .c2-plan__note,
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr25="1"] .c2-plans .c2-plan.c2-plan--hit .c2-plan__note * {
  background-color: var(--gr); color: var(--on-gr);
}
html[data-pal4="3"][data-pal4][data-pal4] body[data-v-gr25="1"] .c2-plans .c2-plan.c2-plan--hit .c2-plan__note * {
  background-color: transparent;
}