/* ============================================================
   VINOACCS · Design System · Core Components
   Универсальные компоненты для всех страниц сайта.
   Подключается ПОСЛЕ tokens.css.

   Содержит:
     0. ACCESSIBILITY  — focus-state, skip-link, sr-only
     1. BUTTON         — .btn (+ модификаторы primary/outline/mini)
     2. SECTION        — .section-eyebrow, .section-title, .section-lead
     3. ISLAND         — .island (+ модификаторы cream/dark)
     4. REVEAL         — .reveal motion-класс
     5. UTILITIES      — .container, .container--wide, .container--narrow
     6. FORM           — поля + focus-эффекты
============================================================ */


/* ════════════════════════════════════════════════════
   0. ACCESSIBILITY — фундамент доступности
════════════════════════════════════════════════════ */

/* Skip-link — для людей с клавиатурой/screen-reader.
   По умолчанию скрыта, появляется при focus (Tab). */
.skip-link{
  position:absolute; top:-100px; left:16px;
  z-index:9999;
  padding:10px 20px;
  background:var(--accent); color:#fff;
  border-radius:var(--r-pill);
  font-family:var(--font-sans); font-size:13.5px; font-weight:500;
  text-decoration:none;
  transition: top .25s var(--ease-soft);
}
.skip-link:focus{ top:16px; outline:none; }

/* Screen-reader-only (для невидимых лейблов) */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Универсальный focus-ring (для клавиатурной навигации) */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:var(--r-xs);
}
/* Снимаем focus для mouse-clicks (только клавиатура) */
:focus:not(:focus-visible){ outline:none; }


/* ════════════════════════════════════════════════════
   1. BUTTON
════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════
   1. BUTTON
════════════════════════════════════════════════════ */

.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--btn-gap);
  padding:0 var(--btn-padding-x);
  height:var(--btn-h);
  border-radius:var(--btn-radius);
  border:1px solid var(--accent);
  background:var(--accent);
  color:#fff;
  font-family:var(--font-sans);
  font-size:var(--btn-font-size);
  font-weight:400;
  line-height:1;
  letter-spacing:.01em;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:
    background-color 700ms cubic-bezier(.22,1,.36,1),
    border-color 700ms cubic-bezier(.22,1,.36,1),
    gap 700ms cubic-bezier(.22,1,.36,1),
    box-shadow 900ms cubic-bezier(.22,1,.36,1),
    color .5s var(--ease-soft);
}
.btn:hover{
  background:var(--accent-hover);
  border-color:var(--accent-hover);
  box-shadow:var(--btn-shadow-hover);
}

/* стрелка внутри кнопки */
.btn .arr{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; line-height:1; color:inherit;
  transition:transform 700ms cubic-bezier(.22,1,.36,1);
}
.btn:hover .arr{ transform:rotate(-45deg); }

/* ── модификатор: outline ── */
.btn--outline{
  background:transparent;
  color:var(--accent);
}
.btn--outline:hover{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

/* ── модификатор: mini (для topbar) ── */
.btn--mini{
  height:32px;
  padding:0 16px;
  font-size:12px;
  font-weight:500;
  background:transparent;
  color:var(--text-2);
  border-color:var(--border-2);
  gap:8px;
}
.btn--mini:hover{
  background:var(--accent);
  color:var(--on-cta);
  border-color:var(--accent);
  gap:8px; /* не растёт */
  box-shadow:none;
}


/* ════════════════════════════════════════════════════
   2. SECTION TYPOGRAPHY — единые заголовки
════════════════════════════════════════════════════ */

/* eyebrow — mono uppercase plum, с тонкой чёрточкой слева */
.section-eyebrow{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--font-mono);
  font-size:11px; font-weight:500;
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 18px;
}
.section-eyebrow::before{
  content:"";
  width:28px; height:1px;
  background:currentColor;
}

/* заголовок секции — DM Sans 300, единый размер.
   Цвет: --accent (lighter Plum) по умолчанию — соответствует CLAUDE.md.
   Раньше было --accent-hover (deep Plum), что вызывало override на 11 страницах. */
.section-title{
  font-family:var(--font-sans);
  font-weight:300;
  font-size:clamp(28px, 2.8vw, 38px);
  line-height:1.15;
  letter-spacing:var(--ls-tight);
  color:var(--accent);
  margin:0 0 14px;
}

/* lead-параграф под заголовком */
.section-lead{
  font-size:15.5px;
  line-height:1.6;
  color:var(--text-2);
  max-width:62ch;
  margin:0 0 32px;
}

/* ── Семантический маркер смысла в крупных заголовках ──
   <em> внутри h1/h2 выделяет ключевое слово (по смыслу блока).

   По умолчанию цвет em и базы заголовка ОДИНАКОВЫЕ — lighter --accent.
   Em служит маркером смысла, не цветовым контрастом.

   Единственное исключение в проекте — класс .hero-h1 в VINOACCS_Home.html:
   база --accent-hover (deep), em --accent (lighter), премиум-контраст.
   На новых страницах — всегда lighter, даже для hero.

   ОБЯЗАТЕЛЬНО только для КРУПНЫХ заголовков (h1, h2). В h3, eyebrow,
   tile-заголовках <em> не требуется (CSS сработает, но смысла нет). */
h1 em,
h2 em,
h3 em,
.section-title em{
  font-style: normal;
  color: var(--accent);
  font-weight: inherit;
}


/* ════════════════════════════════════════════════════
   3. ISLAND — обёртка-карточка для секций
════════════════════════════════════════════════════ */

.island{
  position:relative;
  border-radius:var(--r-xl);
  padding:48px 56px;
  background:var(--surface);
  border:1px solid rgba(126,108,137,0.06);
  box-shadow:var(--shadow-island);
}

/* ── модификатор: warm cream-elev фон ── */
.island--cream{
  background:var(--bg-elev);
}

/* ── модификатор: тёмный остров (для pipe-блока) ── */
.island--dark{
  background:var(--bg-dark);
  color:var(--text-ivory);
  border:none;
  box-shadow:var(--shadow-island-dark);
  overflow:hidden;
  isolation:isolate;
}


/* ════════════════════════════════════════════════════
   4. REVEAL — motion-класс для появления при scroll
════════════════════════════════════════════════════ */

.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:
    opacity 1.1s var(--ease-apple) calc(var(--reveal-delay, 0ms) + var(--i, 0) * 80ms),
    transform 1.1s var(--ease-apple) calc(var(--reveal-delay, 0ms) + var(--i, 0) * 80ms);
}
.reveal.is-in,
.is-in .reveal{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; opacity:1; transform:none; }
}


/* ════════════════════════════════════════════════════
   5. UTILITIES — контейнеры
════════════════════════════════════════════════════ */

.container{
  max-width:980px;
  margin:0 auto;
  padding:0 var(--side);
}
.container--wide{
  max-width:var(--max);   /* 1240 — каталог, футер */
}
.container--narrow{
  max-width:580px;        /* форма */
}


/* ════════════════════════════════════════════════════
   6. FORM — общие стили полей
════════════════════════════════════════════════════ */

.field input,
.field textarea,
.form-input,
.form-textarea{
  width:100%;
  border:1px solid var(--border-2);
  border-radius:var(--btn-radius);
  padding:var(--form-input-padding);
  background:transparent;
  font-family:var(--font-sans);
  font-size:var(--form-input-font-size); font-weight:300;
  color:var(--text-2);
  transition:
    border-color .5s var(--ease-soft),
    box-shadow .6s var(--ease-soft),
    background-color .5s var(--ease-soft),
    transform .5s var(--ease-apple);
}
.form-textarea,
.field textarea{
  border-radius:var(--r-lg);              /* 18px — мягче чем pill, семантично для растяжимого textarea */
  padding:var(--form-textarea-padding);
  min-height:var(--form-textarea-min-h);
  resize:vertical;
}
.field input:hover,
.field textarea:hover,
.form-input:hover,
.form-textarea:hover{
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border-2));
  background-color: color-mix(in srgb, var(--accent) 3%, transparent);
}
.field input:focus,
.field textarea:focus,
.form-input:focus,
.form-textarea:focus{
  outline:none;
  border-color:var(--accent);
  background-color:#fdfcfa;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent),
    0 8px 20px -12px rgba(126,108,137,0.30);
  transform:translateY(-1px);
}
.form-input::placeholder,
.form-textarea::placeholder,
.field input::placeholder,
.field textarea::placeholder{
  color:var(--text-4); font-weight:300;
  transition: color .5s var(--ease-soft);
}
.form-input:focus::placeholder,
.form-textarea:focus::placeholder,
.field input:focus::placeholder,
.field textarea:focus::placeholder{
  color:color-mix(in srgb, var(--text-4) 60%, transparent);
}

/* — Invalid state (required и не заполнено / неверный формат) — коралловая подсветка
   :user-invalid срабатывает только после взаимодействия пользователя (blur / submit),
   не на начальном рендере. Fallback :invalid:not(:placeholder-shown) для старых браузеров. — */
.form-input:user-invalid,
.form-textarea:user-invalid,
.field input:user-invalid,
.field textarea:user-invalid,
.form-input.is-error,
.form-textarea.is-error{
  border-color: var(--danger);
  background-color: color-mix(in srgb, var(--danger) 4%, transparent);
}
.form-input:user-invalid:focus,
.form-textarea:user-invalid:focus,
.field input:user-invalid:focus,
.field textarea:user-invalid:focus{
  border-color: var(--danger);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--danger) 14%, transparent),
    0 8px 20px -12px rgba(203,114,97,0.30);
}


/* ────────────────────────────────────────────
   FORM AGREE — стандартный чек-бокс согласия (политика конфиденциальности).
   Используется во всех формах сайта.
   Структура HTML:
     <label class="form-agree">
       <input type="checkbox">
       <span>Я согласен с <a href="/privacy">политикой конфиденциальности</a> сайта VINOACCS</span>
     </label>
──────────────────────────────────────────── */
.form-agree{
  display:flex;
  align-items:center;
  justify-content:center;     /* стандарт: чек-бокс + текст по центру */
  gap:10px;
  /* Default — для форм БЕЗ flex-gap родителя (cart, videos, blog). 18/12/8 равно ритму полей. */
  margin-top: var(--form-fields-gap);
  margin-bottom: var(--form-agree-margin-bottom);
  font-family:var(--font-sans);
  font-size:var(--form-agree-font-size);
  font-weight:300;
  color:var(--text-2);
  cursor:pointer;
  text-align:left;
  white-space:nowrap;          /* текст в одну строку */
}
/* Модификатор для случаев, когда нужно влево (например в боковой форме) */
.form-agree--left{
  justify-content:flex-start;
}
/* Когда form-agree находится ВНУТРИ flex-gap контейнера — родительский gap уже задаёт
   отступ сверху. Обнуляем margin, чтобы не было двойного зазора. Перечислены все
   контейнеры-клоны .form-fields, которые используются на страницах:
   - .form-fields           — основной системный класс (Home/bokaly/.../account)
   - .cust-form-fields      — custom
   - .smp-form-fields       — samples
   - .pop-sub-form          — popups subscribe */
.form-fields > .form-agree,
.cust-form-fields > .form-agree,
.smp-form-fields > .form-agree,
.pop-sub-form > .form-agree{
  margin-top: 0;
  margin-bottom: 0;
}
.form-agree input[type="checkbox"]{
  width:16px;
  height:16px;
  margin:0;
  flex-shrink:0;
  accent-color:var(--accent);
  cursor:pointer;
}
.form-agree a{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid var(--accent-soft);
  transition: border-color .35s var(--ease-soft), color .35s var(--ease-soft);
}
.form-agree a:hover{
  color:var(--accent-hover);
  border-bottom-color:var(--accent);
}


/* ════════════════════════════════════════════════════
   7. FORM UTILITIES — обёртки и компоновка полей

   Использование (стандарт после Samples):
     <form class="form-fields">
       <div class="form-row-2">                  ← 2 поля в ряд (mobile: складываются)
         <div class="field">
           <label for="name" class="sr-only">Имя</label>
           <input id="name" class="form-input" placeholder="Имя">
         </div>
         <div class="field"> ... </div>
       </div>
       <div class="field">
         <label for="msg" class="sr-only">Сообщение</label>
         <textarea id="msg" class="form-textarea" placeholder="Сообщение"></textarea>
         <small class="field-note">Подсказка под полем.</small>
       </div>
       <label class="form-agree"> ... </label>
       <button type="submit" class="btn">Отправить</button>
     </form>

   Видимый текст поля = placeholder. <label class="sr-only"> — для a11y.
════════════════════════════════════════════════════ */

/* ── .form-fields — вертикальный flex-контейнер с gap между группами ── */
.form-fields{
  display:flex;
  flex-direction:column;
  gap:var(--form-fields-gap);
}

/* ── .form-row-2 — 2 поля в ряд (на mobile складываются в столбец) ── */
.form-row-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--form-fields-gap);
}
@media (max-width: 767px){
  .form-row-2{ grid-template-columns:1fr; }
}

/* ── .form-row-3 — 3 поля в ряд: 3 col desktop / 2 col tablet / 1 col mobile ── */
.form-row-3{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:var(--form-fields-gap);
}
@media (max-width: 1024px){
  .form-row-3{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 767px){
  .form-row-3{ grid-template-columns:1fr; }
}

/* ── .field-note — подсказка под полем (мелкий italic-текст) ── */
.field-note{
  display:block;
  font-size:12px;
  font-style:italic;
  color:var(--text-3);
  margin-top:6px;
  line-height:1.4;
}


/* ════════════════════════════════════════════════════
   8. TABLET PRIMITIVES — адаптация под планшет (769–1024px).
   Промежуточные размеры: между desktop и mobile.
   Идёт ПЕРЕД mobile-блоком в каскаде, mobile (≤768) перебивает.
════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

  /* — Контейнер: 32px по бокам (между desktop 48 и mobile 16) — */
  .container,
  .container--wide,
  .container--narrow {
    padding: 0 32px;
  }

  /* — Островок: средний padding — */
  .island {
    padding: 40px 32px;
  }

  /* — Заголовки секции: плавный переход — */
  .section-eyebrow {
    margin: 0 0 16px;
  }
  .section-title {
    font-size: clamp(26px, 3.4vw, 34px);
    line-height: 1.18;
  }
  .section-lead {
    font-size: 15.5px;
    margin: 0 0 28px;
  }

  /* Form-поля font-size — управляется через --form-input-font-size в tokens.css */
}


/* ════════════════════════════════════════════════════
   9. MOBILE PRIMITIVES — единая адаптация всех «кирпичиков»
   под мобильную (≤768px). Применяется автоматически на любой
   странице, где используются эти классы.

   Page-specific mobile-стили (hero, header, footer, сетки
   страницы) — в mobile-блоке самой страницы, не здесь.
════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* — Контейнер: 16px по бокам вместо 48px — */
  .container,
  .container--wide,
  .container--narrow {
    padding: 0 var(--side-mobile);
  }

  /* — Заголовки секции: компактнее, помещаются на 393px — */
  .section-eyebrow {
    font-size: 10.5px;
    margin: 0 0 14px;
    gap: 10px;
  }
  .section-eyebrow::before {
    width: 20px;
  }
  .section-title {
    font-size: clamp(24px, 5.6vw, 30px);
    line-height: 1.2;
    margin: 0 0 12px;
  }
  .section-lead {
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 24px;
  }

  /* — Островок: уменьшаем внутренний padding до touch-friendly — */
  .island {
    padding: 28px 18px;
    border-radius: var(--r-lg);
  }

  /* — Form-поля: размеры через переменные --form-input-* в chrome.css mobile-блоке.
       Font 16px на mobile задан через --form-input-font-size (iOS не зумит). — */
}