/* =====================================================
   DUSH-HERO.css (FINAL)
   Hero DUSHISTO — Warm Artisan / Art Brand Premium
   (только hero-блок + его внутренности)
===================================================== */

/* Сам HERO */
.dushisto-hero{
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  overflow: hidden;

  color: var(--cream);
  background-image: url("https://dushisto.ru/wp-content/uploads/2026/02/1920х1080.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  filter: saturate(1.03) contrast(1.02);
}

/* Overlay — киношная глубина (один вариант, без дублей) */
.dushisto-hero__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background: linear-gradient(90deg,
    rgba(15,8,4,.88) 0%,
    rgba(20,12,6,.62) 46%,
    rgba(20,12,6,.18) 100%
  );
}

/* Виньетка */
.dushisto-hero__vignette{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background: radial-gradient(1200px 700px at 55% 40%,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.22) 55%,
    rgba(0,0,0,.55) 100%
  );
  opacity: .85;
}

/* Лёгкое зерно */
.dushisto-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: .06;
  mix-blend-mode: overlay;
}

/* Контейнер */
.dushisto-hero__container{
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 64px;
}

@media (max-width: 1200px){
  .dushisto-hero__container{ padding: 0 28px; }
}

.dushisto-hero__content{
  max-width: 640px;
}

/* Eyebrow */
.dushisto-hero__eyebrow{
  font-family: var(--font-ui) !important;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .92;
  margin: 0 0 16px 0;
}

/* Title (премиум-арт: воздух + мягкая “печать”) */
.dushisto-hero__title{
  font-family: var(--font-brand) !important;
  font-size: 68px;          /* оптимально для десктопа */
  letter-spacing: .18em;
  font-weight: 500;         /* 600 было тяжеловато, 300 слишком thin */
  margin: 0 0 16px 0;
  line-height: 1.02;
  color: var(--cream);
  text-shadow: 0 12px 34px rgba(0,0,0,.38);
}

/* Divider под логотипом */
.hero-divider{
  width: 118px;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(243,238,230,.08),
    rgba(243,238,230,.72),
    rgba(243,238,230,.08)
  );
  margin: 10px 0 18px 0;
}

/* Статусная строка (добавь в HTML при желании) */
.hero-status{
  font-family: var(--font-ui) !important;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .82;
  margin: 0 0 22px 0;
  max-width: 60ch;
}

/* Subtitle */
.dushisto-hero__subtitle{
  font-family: var(--font-ui) !important;
  font-size: 20px;
  line-height: 1.45;
  margin: 0 0 18px 0;
  text-shadow: 0 4px 14px rgba(0,0,0,.25);
}

/* Quality line */
.dushisto-hero__quality{
  font-family: var(--font-ui) !important;
  font-size: 15px;
  line-height: 1.65;
  opacity: .88;
  margin: 0 0 36px 0;
  max-width: 52ch;
}

/* Buttons wrapper */
.dushisto-hero__buttons{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

/* Кнопки — ремесленный премиум (если у тебя уже есть стили кнопок — этот блок можно не трогать) */
.dushisto-hero .dushisto-btn{
  border-radius: 999px;
  padding: 12px 22px;
  letter-spacing: .08em;
  font-family: var(--font-ui) !important;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.dushisto-hero .dushisto-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(0,0,0,.22);
}

/* MOBILE */
@media (max-width: 768px){
  .dushisto-hero{
    min-height: 92vh;
    align-items: flex-end;
    padding-bottom: 60px;
  }

  .dushisto-hero__container{ padding: 0 18px; }

  .dushisto-hero__title{
    font-size: 46px;
    letter-spacing: .16em;
  }

  .dushisto-hero__subtitle{ font-size: 17px; }

  .dushisto-hero__buttons{
    flex-direction: column;
    align-items: flex-start;
  }
}



/* === HERO TUNING (FINAL polish) === */
.dushisto-hero__overlay{
  background: linear-gradient(90deg,
    rgba(15,8,4,.82) 0%,
    rgba(20,12,6,.58) 44%,
    rgba(20,12,6,.12) 100%
  );
}

.dushisto-hero__title{
  font-size: 74px;
  font-weight: 500;
  letter-spacing: .19em;
}

.hero-status{
  font-size: 11px;
  letter-spacing: .22em;
  opacity: .75;
  margin: 0 0 18px 0;
  max-width: 46ch;
}



/* === HERO FINAL POLISH (Art-brand premium) === */

/* 1) Чуть поднимаем блок с текстом, чтобы он жил в "светлой" зоне кадра */
.dushisto-hero__content{
  max-width: 680px; /* было 640 — чуть свободнее */
  transform: translateY(-10px);
}

/* 2) Логотип: немного больше воздуха и "галерейности" */
.dushisto-hero__title{
  font-size: 76px;            /* было ~74/68 — на этом кадре лучше крупнее */
  letter-spacing: .20em;
  font-weight: 450;           /* если шрифт не поддерживает — будет ближайшее */
}

/* 3) Divider как "штрих" — чуть ниже и мягче */
.hero-divider{
  width: 126px;
  opacity: .92;
  margin: 12px 0 16px 0;
}

/* 4) Статус — тоньше и спокойнее */
.hero-status{
  font-size: 11px;
  letter-spacing: .24em;
  opacity: .72;
  margin: 0 0 20px 0;
  max-width: 44ch;
}

/* 5) Подзаголовок — чуть выразительнее */
.dushisto-hero__subtitle{
  font-size: 21px;
  margin-bottom: 18px;
}

/* 6) Кнопки: читаемость + "восковой штамп" */
.dushisto-hero .dushisto-btn{
  padding: 13px 26px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

.dushisto-hero .dushisto-btn--primary{
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.52);
  color: rgba(255,255,255,.96);
}

.dushisto-hero .dushisto-btn--primary:hover{
  background: rgba(255,255,255,.26);
}

.dushisto-hero .dushisto-btn--secondary{
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.34);
  color: rgba(255,255,255,.92);
}

.dushisto-hero .dushisto-btn--secondary:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.42);
}

/* MOBILE — чтобы не было тесно */
@media (max-width: 768px){
  .dushisto-hero__content{ transform: none; }
  .dushisto-hero__title{ font-size: 50px; letter-spacing: .16em; }
  .hero-status{ max-width: 100%; }
}


.dushisto-hero .dushisto-btn--primary{
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.45);
  color: rgba(255,255,255,.95);
}

.dushisto-hero .dushisto-btn--secondary{
  background: rgba(0,0,0,.10);
  border: 1px solid rgba(255,255,255,.28);
  color: rgba(255,255,255,.92);
}
.dushisto-hero .dushisto-btn--secondary:hover{
  background: rgba(255,255,255,.10);
}

/* ===== HERO ULTIMATE TUNING ===== */

/* 1. Логотип чуть выразительнее */
.dushisto-hero__title{
  text-shadow: 
    0 10px 35px rgba(0,0,0,.45),
    0 0 1px rgba(255,255,255,.3);
}

/* 2. Чуть поднимаем весь текстовый блок */
.dushisto-hero__content{
  transform: translateY(-18px);
}

/* 3. Немного усилим читаемость subtitle */
.dushisto-hero__subtitle{
  font-weight: 500;
}

/* 4. Primary кнопка — более “восковая” */
.dushisto-hero .dushisto-btn--primary{
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 12px 35px rgba(0,0,0,.25);
}

/* 5. Лёгкий hover-эффект глубины */
.dushisto-hero .dushisto-btn:hover{
  transform: translateY(-3px);
}


/* === HERO MICRO FINAL (optional) === */
.dushisto-hero__eyebrow{
  opacity: .78;
  font-size: 12px;
  letter-spacing: .24em;
}

.dushisto-hero__title{
  letter-spacing: .18em;
}

/* =========================
   HERO — MOBILE OVERRIDE (FINAL)
   ВСТАВИТЬ САМЫМ ПОСЛЕДНИМ В ФАЙЛ
   ========================= */
@media (max-width: 768px){

  /* 0) Геометрия hero */
  .dushisto-hero{
    min-height: 92vh;
    align-items: flex-end;
    padding-bottom: 60px;
  }
  .dushisto-hero__container{ padding: 0 18px; }
  .dushisto-hero__content{ transform: none !important; }

  /* 1) Типографика */
  .dushisto-hero__title{
    font-size: 50px !important;
    letter-spacing: .16em !important;
  }

  .dushisto-hero__subtitle{
    font-size: 17px !important;
    line-height: 1.7 !important;   /* ✅ как ты просил */
  }

  .hero-status{ max-width: 100% !important; }

  /* 2) Кнопки — вертикально + воздух */
  .dushisto-hero__buttons{
    margin-top: 22px !important;   /* ✅ +6–8px */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .dushisto-hero__buttons .dushisto-btn{
    width: 100%;
    max-width: 320px;
  }

  /* 3) CTA: primary заливка, secondary outline */
  .dushisto-hero .dushisto-btn--primary{
    background: #c2a98b !important;
    border: 1px solid #c2a98b !important;
    color: #2a1f17 !important;
    box-shadow: 0 12px 35px rgba(0,0,0,.18) !important;
  }

  .dushisto-hero .dushisto-btn--secondary{
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.55) !important;
    color: rgba(255,255,255,.95) !important;
  }
}

/* =========================
   HERO MOBILE FINAL
   ========================= */
@media (max-width: 768px){

  /* 1. Подзаголовок — больше воздуха */
  .dushisto-hero__subtitle{
    line-height: 1.7 !important;
    margin-bottom: 20px !important;
  }

  /* 2. Качество (список) — чуть мягче */
  .dushisto-hero__quality{
    line-height: 1.7 !important;
    margin-bottom: 28px !important;
  }

  /* 3. Отступ перед кнопками */
  .dushisto-hero__buttons{
    margin-top: 24px !important;
    gap: 14px !important;
  }

  /* 4. Кнопки — более дорогие */
  .dushisto-hero .dushisto-btn{
    padding: 14px 24px !important;
    font-size: 15px !important;
    letter-spacing: .06em !important;
  }

  /* 5. Primary — мягкий беж */
  .dushisto-hero .dushisto-btn--primary{
    background: #c8ad8c !important;
    border: 1px solid #c8ad8c !important;
    color: #2a1f17 !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.18) !important;
  }

  /* 6. Secondary — чистый outline */
  .dushisto-hero .dushisto-btn--secondary{
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.6) !important;
    color: rgba(255,255,255,.95) !important;
  }

}


/* ===== HERO MOBILE PREMIUM WIDTH ===== */
@media (max-width: 768px){

  .dushisto-hero__buttons{
    align-items: center !important;
    margin-top: 26px !important;
  }

  .dushisto-hero__buttons .dushisto-btn{
    width: 100% !important;
    max-width: 320px;
  }

}

@media (max-width: 768px){

  .dushisto-hero__title{
    margin-top: 6px !important;
    margin-bottom: 18px !important;
    
    .dushisto-hero .dushisto-btn--primary{
  background: #c2a98b !important;   /* чуть темнее беж */
  border: 1px solid #c2a98b !important;
  color: #2a1f17 !important;

  }

}