/* ==========================================================================
   Прототип: палитра поверх обесцвеченного site.css

   Ниже переопределены только цвета. Шрифты, сетка, отступы и скругления
   берутся из настоящих стилей — специально, чтобы согласовывать реальную
   композицию, а не приблизительную.
   ========================================================================== */

:root {
  --deep:       #17191b;   /* тёмные секции и шапка */
  --deep-2:     #24272a;
  --deep-3:     #303438;

  --gold:       #ffffff;   /* акцент на тёмном фоне */
  --gold-deep:  #17191b;   /* акцент на светлом: кнопки, подчёркивания */
  --gold-soft:  #e7e9ea;

  --mint:       #c6cacd;
  --cream:      #dcdfe1;

  --sand:       #f5f6f7;   /* фон светлых секций */
  --sand-2:     #e9ebed;
  --text:       #16181a;
  --text-muted: #5c6165;
  --line:       rgba(22, 24, 26, .14);
  --line-gold:  rgba(22, 24, 26, .22);
}

/* Главная кнопка — чёрная, как и просили: один акцент на весь макет */
.btn--primary { background: var(--gold-deep); color: #fff; border-color: var(--gold-deep); }
.btn--primary:hover { background: #000; color: #fff; }
.btn--ghost { border-color: #fff; color: #fff; }

/* На тёмных секциях чёрная кнопка сливается с фоном — там она белая */
.section--dark .btn--primary,
.footer .btn--primary {
  background: #fff;
  border-color: #fff;
  color: var(--deep);
}
.section--dark .btn--primary:hover,
.footer .btn--primary:hover { background: var(--gold-soft); color: var(--deep); }

/* На тёмных секциях золотой текст становится белым */
.section--dark .eyebrow,
.footer__title,
.hero__offer { color: #fff; }

/* --- Заглушки вместо фотографий -------------------------------------------- */

.ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--sand-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: .04em;
  overflow: hidden;
}

.ph::before, .ph::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, transparent calc(50% - .5px),
              var(--line) 50%, transparent calc(50% + .5px));
}
.ph::after { transform: scaleX(-1); }

.ph span {
  position: relative;
  z-index: 1;
  padding: 4px 12px;
  background: var(--sand-2);
  border-radius: 20px;
}

/* На первом экране подпись уводим в угол: по центру она ложилась
   прямо на заголовок и мешала читать композицию. */
.ph--hero {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 0;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 20px;
}
.ph--wide    { aspect-ratio: 16 / 6; }
.ph--cover   { aspect-ratio: 16 / 9; }
.ph--card    { aspect-ratio: 4 / 3; }
.ph--portrait{ aspect-ratio: 3 / 4; }
.ph--tile    { aspect-ratio: 3 / 4; }
.ph--map     { aspect-ratio: 4 / 3; }

/* В карточках заглушка занимает то же место, что фотография */
.card__media .ph,
.post__media .ph,
.program__media .ph,
.master-card__photo .ph,
.split__media .ph,
.page-hero__media .ph { height: 100%; border-radius: inherit; }

/* Логотип настоящий, но обесцвеченный: цвет мы сняли со всего макета,
   и знак не исключение. */
.logo img,
.footer img { filter: grayscale(1) contrast(1.05); }

/* Появление блоков при прокрутке на боевом сайте включает скрипт.
   В прототипе его нет, поэтому блоки просто видны сразу. */
.reveal { opacity: 1; transform: none; }

/* --- Чего в прототипе нет ---------------------------------------------------- */

/* Колесо удачи и плавающая кнопка отвлекают от структуры */
.wheel, .wheel-fab, .float-cta, .cookie { display: none !important; }