/* ============================================================
   HOME — главная: hero с видео-фоном + строка поиска.
   ============================================================ */

.el-hero{position:relative;overflow:hidden;min-height:74vh;display:flex;align-items:center;width:100%}
.el-hero .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.el-hero .hero-overlay{position:absolute;inset:0;background:rgba(20,14,6,.52);z-index:1}
.el-hero .hero-content{position:relative;z-index:2;text-align:center;padding-top:90px;padding-bottom:100px;max-width:960px}
.el-hero h1{color:#fff;font-size:clamp(2.75rem,6vw,4.5rem);font-weight:800;line-height:1.08;letter-spacing:0.05em;margin-bottom:22px}
.el-hero .lead{color:rgba(255,255,255,.94);font-size:clamp(1.1875rem,2.2vw,1.5rem);line-height:1.5;margin:0 auto 36px;max-width:44ch}
.el-hero .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.el-hero .hero-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.el-hero .hero-ghost:hover{border-color:#fff}

.el-home-search{padding:34px 24px}
.el-home-search .el-search{max-width:680px;margin:0 auto}

@media(max-width:560px){
  .el-hero{min-height:56vh}
  .el-hero .hero-content{padding-top:54px;padding-bottom:60px}
}

/* --- Витрины главной: ссылка «весь словарь», промо-карточка материала, шаги --- */

/* Промо материала: широкая карточка (пока материалов один-два — сетка была бы пустой) */
.el-promos{display:flex;flex-direction:column;gap:18px}
.el-promo{display:grid;grid-template-columns:minmax(0,42%) 1fr;background:var(--surface);
  border:1px solid var(--card-border);border-radius:var(--r-card);box-shadow:var(--shadow-soft);
  overflow:hidden;text-decoration:none;transition:box-shadow .15s}
.el-promo:hover{box-shadow:var(--shadow)}
.el-promo .img{display:block;background:var(--band);aspect-ratio:2/1}
.el-promo .img img{width:100%;height:100%;object-fit:cover;display:block}
.el-promo .body{display:flex;flex-direction:column;gap:10px;padding:26px 28px;justify-content:center}
.el-promo .chip{align-self:flex-start;padding:3px 12px;border-radius:var(--r-pill);
  background:var(--p-mint);color:var(--d-mint);font-size:.75rem;font-weight:700}
.el-promo .t{font-size:1.375rem;font-weight:800;color:var(--ink);line-height:1.25;letter-spacing:-.01em}
.el-promo .x{font-size:1rem;color:var(--body);line-height:1.55}
.el-promo .more{color:var(--orange-deep);font-weight:700;font-size:.9375rem}

/* Три шага: номер в пастельном кружке (цвет чередуется токенами) */
.el-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.el-step{background:var(--surface);border:1px solid var(--card-border);border-radius:var(--r-card);
  box-shadow:var(--shadow-soft);padding:24px 26px}
.el-step .n{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:13px;
  font-weight:800;font-size:1.125rem;margin-bottom:14px}
.el-step:nth-child(1) .n{background:var(--p-sage);color:var(--d-sage)}
.el-step:nth-child(2) .n{background:var(--p-mint);color:var(--d-mint)}
.el-step:nth-child(3) .n{background:var(--p-lilac);color:var(--d-lilac)}
.el-step h3{margin:0 0 8px;font-size:1.1875rem;font-weight:700}
.el-step p{margin:0;font-size:1rem;color:var(--body);line-height:1.55}

@media(max-width:760px){
  .el-promo{grid-template-columns:1fr}
  .el-promo .body{padding:22px}
  .el-promo .t{font-size:1.1875rem}
}