/* ============================================================
   Экспертиза — экран 7 (хендофф, десктоп 5a).
   Верхний блок 6fr/5fr (интро + CSS-сцена цеха) → три опоры → CTA-плашка
   «спросить технолога». Значения — 1:1 из reference/vykras-storefront.dc.html
   (десктоп, строки 501–549).
   ============================================================ */

/* ---- 1. Верхний блок: интро + сцена цеха ---- */
.vk-exp-hero{
  display:grid;grid-template-columns:6fr 5fr;gap:48px;
  padding:56px var(--pad) 20px;align-items:center;
}
.vk-exp-h1{font:500 48px/1.08 var(--ff-serif);letter-spacing:-.02em;margin:0 0 18px}
.vk-exp-hero__lead{font:400 16px/1.65 var(--ff-sans);color:var(--ink-65);margin:0;max-width:52ch}
/* Медиа «цех» — фото-заглушка (правка владельца: photo-slot вместо CSS-сцены). */
.vk-exp-hero__media{height:260px}

/* ---- 2. Три опоры ---- */
.vk-exp-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:28px var(--pad) 40px}
.vk-exp-pillar{background:var(--surface);border-radius:16px;padding:26px 28px}
.vk-exp-pillar__eyebrow{
  font:500 11px var(--ff-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--terracotta-ink);margin-bottom:12px;
}
.vk-exp-pillar__title{font:600 19px var(--ff-sans);margin-bottom:8px}
.vk-exp-pillar__text{font:400 14px/1.55 var(--ff-sans);color:var(--ink-62);margin:0}
.vk-exp-pillar__text--tight{margin:0 0 12px}
.vk-exp-pillar__receipt{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;
  font:400 13px var(--ff-sans);background:var(--canvas);border-radius:9px;padding:10px 14px;
}
.vk-exp-pillar__receipt-price{font-weight:600}

/* ---- 3. CTA: спросить технолога ---- */
.vk-exp-cta{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  margin:0 var(--pad) var(--pad);background:var(--graphite);color:var(--surface);
  border-radius:16px;padding:26px 32px;
}
.vk-exp-cta__title{font:600 19px var(--ff-sans);margin-bottom:4px}
.vk-exp-cta__text{font:400 13.5px var(--ff-sans);color:rgba(251,249,245,.65)}
.vk-exp-cta__btn{padding:14px 28px;flex:none}

/* ============================================================
   Адаптив
   ============================================================ */
@media (max-width:1024px){
  .vk-exp-hero{grid-template-columns:1fr;gap:24px;padding:40px var(--pad) 12px}
  .vk-exp-hero__media{height:220px}
  .vk-exp-h1{font-size:38px}
  .vk-exp-pillars{grid-template-columns:repeat(2,1fr);padding:24px var(--pad) 32px}
}

@media (max-width:600px){
  .vk-exp-hero{padding:32px var(--pad) 8px}
  .vk-exp-hero__media{height:180px}
  .vk-exp-h1{font-size:30px}
  .vk-exp-hero__lead{font-size:15px}
  .vk-exp-pillars{grid-template-columns:1fr;gap:14px;padding:20px var(--pad) 28px}
  .vk-exp-pillar{padding:22px 20px}
  .vk-exp-cta{flex-direction:column;align-items:flex-start;gap:16px;padding:24px 22px}
  .vk-exp-cta__btn{width:100%}
}