/**
 * Write Guide / Pro — премиум-слой (глянцевый журнал: контраст, ритм, акценты).
 *   • Откатить ВСЁ от этой точки — снять {{ attach_library('efist/wg_premium') }}
 *     в page--writeguide.html.twig и page--writeguidepro.html.twig
 *     (и удалить блоки {# ПРЕМИУМ-N … #} в шаблонах).
 *   • Откатить ОДИН пункт — удалить его блок между маркерами «ПРЕМИУМ-N».
 */

/* ===== ПРЕМИУМ-1: лента крупных цифр (разметка — в шаблоне, маркер «ПРЕМИУМ-1») ===== */
.wg26 .wg26-stats { position: relative; background: #fff; border-block: 1px solid var(--line); padding-block: clamp(46px, 6.5vw, 84px); }
.wg26 .wg26-stats__row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: clamp(28px, 4vw, 60px) clamp(30px, 5vw, 84px);
}
.wg26 .wg26-stat { flex: 0 1 auto; min-width: 128px; max-width: 260px; text-align: center; }
.wg26 .wg26-stat__num {
  display: block; font-family: "Inter", sans-serif; font-weight: 800;
  font-size: clamp(2.8rem, 6.2vw, 5rem); line-height: .9; letter-spacing: -.045em; color: #17150f;
}
.wg26 .wg26-stat__lbl {
  display: block; margin-top: clamp(9px, 1.1vw, 15px);
  font-size: clamp(.84rem, 1vw, .97rem); line-height: 1.35; color: #8b8578; letter-spacing: .01em;
}
/* тонкие вертикальные линейки-разделители между цифрами (только на широком экране) */
@media (min-width: 760px) {
  .wg26 .wg26-stat { position: relative; }
  .wg26 .wg26-stat + .wg26-stat::before {
    content: ""; position: absolute; left: calc(-1 * clamp(15px, 2.5vw, 42px)); top: 8%; bottom: 22%;
    width: 1px; background: var(--line);
  }
}
/* ===== /ПРЕМИУМ-1 ===== */

/* ===== ПРЕМИУМ-2: ритм и воздух между секциями (удалить блок = откат) ===== */
.wg26 .wg26-why, .wg26 .wg26-gain, .wg26 .wg26-who, .wg26 .wg26-prog,
.wg26 .wg26-rev, .wg26 .wg26-final, .wg26 .wg26-price { padding-block: clamp(80px, 11vw, 168px) !important; }
/* чёткое чередование фона: белый ↔ молочный */
.wg26 .wg26-gain { background: #fff !important; }
.wg26 .wg26-who  { background: #f4f1ec !important; }
.wg26 .wg26-prog { background: #fff !important; }
.wg26 .wg26-rev  { background: #f4f1ec !important; }
.wg26 .wg26-price{ background: #fff !important; }
/* ===== /ПРЕМИУМ-2 ===== */

/* ===== ПРЕМИУМ-5: «Программа» как оглавление глянца (удалить блок = откат) ===== */
.wg26 .wg26-lesson { padding-block: clamp(22px, 2.8vw, 34px) !important; }
.wg26 .wg26-lesson__num {
  font-size: clamp(1rem, 1.8vw, 1.5rem) !important; font-weight: 800 !important;
  letter-spacing: .04em !important; opacity: 1 !important; align-self: center !important;
}
.wg26 .wg26-lesson__title { font-size: clamp(1.28rem, 2.4vw, 1.85rem) !important; letter-spacing: -.024em !important; }
/* ===== /ПРЕМИУМ-5 ===== */

/* ===== ПРЕМИУМ-8: блок цены — «обложка предложения» (удалить блок = откат) ===== */
.wg26 .wg26-price__card {
  max-width: 720px !important; padding: clamp(40px, 5.5vw, 72px) !important;
  border: 1px solid var(--line) !important; box-shadow: 0 40px 100px rgba(23,21,15,.08) !important;
}
.wg26 .wg26-price .wg26-h2 { font-size: clamp(2rem, 4.4vw, 3rem) !important; letter-spacing: -.03em !important; }
.wg26 .wg26-price__num { font-size: clamp(3.4rem, 9vw, 5.2rem) !important; letter-spacing: -.04em !important; }
.wg26 .wg26-price__list li { font-size: clamp(1.06rem, 1.4vw, 1.22rem) !important; padding: 4px 0 !important; }
.wg26 .wg26-price .wg26-btn--primary { width: 100% !important; justify-content: center !important; padding: 20px !important; font-size: 1.1rem !important; }
/* ===== /ПРЕМИУМ-8 ===== */

/* ===== ПРЕМИУМ-9: FAQ (снятие возражений) + гарантия под кнопкой ===== */
.wg26 .wg26-faq { background: #f4f1ec; padding-block: clamp(72px, 10vw, 140px); }
.wg26 .wg26-faq__list {
  max-width: 840px; margin: clamp(30px, 5vw, 54px) auto 0;
  display: flex; flex-direction: column; gap: clamp(8px, 1vw, 12px);
}
/* Плашка вопроса — без рамки; фон плавно появляется при наведении и раскрытии. */
.wg26 .wg26-faq__item {
  border: none !important; outline: none; box-shadow: none;
  border-radius: 16px; background: transparent;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.wg26 .wg26-faq__item:hover:not([open]) { background: rgba(255, 255, 255, .55); }
.wg26 .wg26-faq__item[open] {
  background: #fff;
  box-shadow: 0 12px 40px rgba(23, 21, 15, .06);
}
.wg26 .wg26-faq__q {
  list-style: none; cursor: pointer; position: relative;
  padding: clamp(18px, 2.4vw, 26px) clamp(52px, 5vw, 64px) clamp(18px, 2.4vw, 26px) clamp(18px, 2.2vw, 26px);
  font-weight: 700; font-size: clamp(1.06rem, 1.6vw, 1.3rem);
  letter-spacing: -.015em; color: #17150f;
  transition: color .2s ease;
}
.wg26 .wg26-faq__q:hover { color: #000; }
.wg26 .wg26-faq__q::-webkit-details-marker { display: none; }
.wg26 .wg26-faq__q::marker { content: ""; }
/* Значок «+» → плавно поворачивается в «×» при раскрытии. */
.wg26 .wg26-faq__q::after {
  content: "+"; position: absolute; right: clamp(18px, 2.2vw, 26px); top: 50%;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  transform: translateY(-50%) rotate(0deg); transform-origin: center;
  font-size: 1.7rem; font-weight: 300; line-height: 1; color: #17150f;
  transition: transform .34s cubic-bezier(.34, 1.2, .34, 1);
}
.wg26 .wg26-faq__item[open] .wg26-faq__q::after {
  transform: translateY(-50%) rotate(135deg);
}
/* Ответ появляется с плавным раскрытием. */
.wg26 .wg26-faq__a { padding: 0 clamp(18px, 2.2vw, 26px) clamp(20px, 2.6vw, 28px); }
.wg26 .wg26-faq__item[open] .wg26-faq__a { animation: wgFaqReveal .34s ease both; }
@keyframes wgFaqReveal {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.wg26 .wg26-faq__a p { margin: 0 0 .6em; font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.62; color: #3a352c; }
.wg26 .wg26-faq__a p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .wg26 .wg26-faq__item, .wg26 .wg26-faq__q::after { transition: none; }
  .wg26 .wg26-faq__item[open] .wg26-faq__a { animation: none; }
}
/* Гарантия под кнопкой */
.wg26 .wg26-price__guarantee {
  display: flex; gap: 12px; align-items: flex-start; text-align: left;
  max-width: 470px; margin: 18px auto 0; padding: 14px 18px;
  border: 1px solid var(--line); border-radius: 12px; background: #faf8f4;
}
.wg26 .wg26-price__guarantee svg { flex: 0 0 auto; width: 22px; height: 22px; color: #17150f; margin-top: 1px; }
.wg26 .wg26-price__guarantee span { font-size: .95rem; line-height: 1.45; color: #3a352c; }
/* ===== /ПРЕМИУМ-9 ===== */

/* ===== ПРЕМИУМ-10: кнопки-переходы между курсами — бренд жирным ===== */
.wg26 .wg26-btn--pro, .wg26 .wg26-btn--base { font-weight: 500; }
.wg26 .wg26-btn--pro .wg26-btn__brand,
.wg26 .wg26-btn--base .wg26-btn__brand { font-weight: 800; letter-spacing: -.01em; }
/* ===== /ПРЕМИУМ-10 ===== */

/* ===== ПРЕМИУМ-11: описание формата в блоке цены ===== */
.wg26 .wg26-price__format {
  max-width: 48ch; margin: clamp(4px,1vw,10px) auto clamp(24px,3.4vw,36px);
  font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.55; color: #3a352c; text-align: center;
}
/* ===== /ПРЕМИУМ-11 ===== */