/**	Write your changes below	**/

/* =========================================================
   ПАЛИТРА ЛЁСС — вариант «Абрау» (тёплая тёмная тема)
   Осознанная тёмная тема: тёплый near-black + крем + золото.
   В теме Grapeland --white/--black перегружены (и фон, и текст),
   поэтому помимо переменных переопределяем конкретные плашки.
   ========================================================= */
:root {
  --black: #1a1512;        /* тёплый near-black (рамки, футер, кнопки) */
  --white: #efe4d1;        /* крем — текст на тёмном */
  --grey: #a1907b;         /* тёплый приглушённый */
  --light-grey: #241d18;   /* тёмная вторичная поверхность (была светлой) */
  --primary: #c6a45f;      /* золото/латунь */
}

/* Базовый фон и текст — тёмные/кремовые */
body {
  background: #1a1512;
  color: var(--white);
}

/* Светлые плашки темы -> тёмные поверхности */
.bg-white {
  background: #241d18;
}
.bg-light {
  background: #1a1512;
}

/* Заголовки — крем, eyebrow (h5) — золото */
h1, h2, h3, h4 {
  color: var(--white);
}
h5 {
  color: var(--primary);
}

/* Тонкая линия-разделитель — золото */
.title-line {
  background: var(--primary);
}

/* Кнопки: золотой контур, при наведении заливка золотом */
.btn {
  background: transparent;
  border: 0.1rem solid var(--primary);
  color: var(--white);
  transition: background var(--trnst), color var(--trnst);
}
.btn:hover {
  background: var(--primary);
  color: #1a1512;
}

/* Карточки вина и модалка 18+ -> тёмные */
.wine-card {
  background: #241d18;
  border-color: #35291f;
}
.age-gate__card {
  background: #241d18;
}

/* Поля формы -> тёмные с золотым фокусом */
.form input,
.form select,
.form textarea {
  background: #241d18;
  border-color: #35291f;
  color: var(--white);
}
.form input:focus,
.form select:focus,
.form textarea:focus {
  background: #2b221b;
  border-color: var(--primary);
}

/* Мобильное меню -> тёмное */
#navbar {
  background: #1a1512;
}

/* Секционные фото: заполняют колонку ровно по высоте соседнего текста
   (grid + align stretch), кадр обрезается по центру — высоты совпадают.
   Нижний порог, чтобы кадр не становился слишком узкой полосой. */
#o-vinodelne > img,
.service-block > img,
.service-block > a img {
  height: 100%;
  width: 100%;
  min-height: 24rem;
  object-fit: cover;
  object-position: center;
  align-self: stretch;
}

/* Фото «О винодельне» слишком яркое для тёмной темы — приглушаем
   (меньше насыщенности и яркости, чуть тёплого тона). Силу легко менять. */
#o-vinodelne > img {
  filter: saturate(0.72) brightness(0.86) sepia(0.11);
}

/* ============================================================
   МОБИЛЬНАЯ ВЁРСТКА (< 780px — ниже брейкпоинта темы)
   Тема фиксирует h1 2.6rem и отступы p-10x100 = padding:10%,
   из-за чего длинные заголовки («ПОСЕЩЕНИЕ», «О ВИНОДЕЛЬНЕ»)
   вылезают из узких карточек. Уменьшаем и разрешаем перенос.
   ============================================================ */
@media (max-width: 779px) {
  h1 {
    font-size: 1.9rem;
    margin-bottom: 1.4rem;
  }
  h2 {
    font-size: 1.45rem;
  }
  h1,
  h2,
  h3,
  h5 {
    overflow-wrap: break-word;
    word-break: break-word;
  }
  /* крупные внутренние отступы съедают ширину на телефоне */
  .p-10x100 {
    padding: 6%;
  }
  /* CTA-блоки поверх фонового фото — не двойной крупный отступ */
  .bg-img.p-10x100 {
    padding: 7% 5%;
  }
  /* заголовок героя не должен упираться в края */
  #heroSlider h1 {
    font-size: 1.75rem;
  }
}

/* Герой: тёплая градиентная подложка (темнее сверху/снизу — для читаемости
   логотипа и заголовка), плюс лёгкий общий тон в цвет темы. */
#heroSlider .overlay {
  background: linear-gradient(
    to bottom,
    rgba(26, 21, 18, 0.5) 0%,
    rgba(26, 21, 18, 0.25) 42%,
    rgba(26, 21, 18, 0.85) 100%
  );
}