/* =====================================================================
   03 · ПОВОД — КОЛОНКА-ВИТРИНА И ЛИСТ «ПОДРОБНЕЕ»  (09.10)

   Валентин прислал по каждому поводу длинный текст. На кадр он не
   помещается, поэтому блок живёт в двух состояниях:

     закрыто — на кадре колонка: реплика рукой, цена, одна фраза
               Валентина, «подробнее +» и кнопка;
     открыто — на правую часть кадра ложится лист с его текстом
               целиком, кадр сужается и тянется до конца листа.

   Метка состояния — data-open на .stage--povod (js/povod-sheet.js).
   Варианты, из которых это выбрано, — dev-v7/preview-povod-text/.

   Длинный текст набран тем же моноширинным, но строчными: капсом его
   не прочитать. Так же набраны подробные ответы в «Вопросах».
   ===================================================================== */

/* --- НАБОР ------------------------------------------------------------ */
.pv-t {
  font-family: var(--font-mono);
  text-transform: none;
  white-space: normal;
  color: var(--ink);
  margin: 0;
}

/* Подчёркивание маркером: красная черта переносится вместе со строкой
   (box-decoration-break). Без SVG и без clip-path. */
.mk {
  background-image: linear-gradient(var(--red), var(--red));
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 calc(100% - 1px);
  padding-bottom: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* =====================================================================
   КОЛОНКА НА КАДРЕ (закрыто)
   ===================================================================== */
.stage--povod .pack .pack__price { margin-bottom: 10px; }

/* Строка допуслуги под ценой (у свадьбы — выездная церемония). */
.pv-extra {
  font-size: var(--caption-fs);
  line-height: var(--caption-lh);
  white-space: nowrap;
}

.pv-quote {
  margin-top: 30px;
  max-width: 380px;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: 0.01em;
}

.pv-more {
  display: inline-block;
  margin-top: 14px;
  padding: 0 0 4px;
  border: 0;
  background: linear-gradient(var(--red), var(--red)) no-repeat 0 100% / 100% 2px;
  color: var(--ink);
  font-size: var(--caption-fs);
  line-height: var(--caption-lh);
  cursor: pointer;
  pointer-events: auto;     /* колонка мышь не ловит, ловят только выходы */
}
.pv-more:hover { color: var(--red); }
.pv-more:focus-visible,
.pv-close:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }

.stage--povod .pack .pack__exit { margin-top: 30px; }

/* Корпоратив: кадр тёмный, набор колонки белый — как цена в
   section-povod.css. Красное (реплика, черта, кнопка) не трогаем. */
.stage--povod[data-fmt="korporativ"] .pack .pv-quote,
.stage--povod[data-fmt="korporativ"] .pack .pv-more { color: var(--bg); }

/* =====================================================================
   ЛИСТ (открыто)
   ===================================================================== */
.stage--povod > .pv-sheet {
  display: none;
  left: 607px;
  top: 150px;
  width: 760px;
  box-sizing: border-box;
  padding: 44px 52px 0;
  background: var(--field);
  /* те же две тени, что у бланка заявки: контакт и глубина */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 10px 20px rgba(0, 0, 0, 0.12);
  z-index: 5;
}
.stage--povod[data-fmt="svadba"]     > .pv-sheet[data-when="svadba"],
.stage--povod[data-fmt="korporativ"] > .pv-sheet[data-when="korporativ"],
.stage--povod[data-fmt="vecherinka"] > .pv-sheet[data-when="vecherinka"],
.stage--povod[data-fmt="festival"]   > .pv-sheet[data-when="festival"] { display: block; }

.pv-close {
  position: absolute;
  right: 34px;
  top: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 13px;
  line-height: 18px;
  cursor: pointer;
}
.pv-close:hover { color: var(--red); }

/* Части листа разделены воздухом и рубрикой — без черт (решение Оксаны
   09.10). Весь текст одного кегля: первые фразы не крупнее остальных. */
.pv-sec { margin-top: 22px; }
.pv-sec:first-of-type { margin-top: 0; }

.pv-rub {
  font-size: 12px;
  line-height: 16px;
  opacity: 0.62;
  margin: 0 0 8px;
}

.pv-sheet .pv-t {
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

.pv-ticks,
.pv-clients { list-style: none; padding: 0; margin: 0 0 4px; }
.pv-ticks li { position: relative; padding-left: 24px; margin-bottom: 3px; }
.pv-ticks .tick { position: absolute; left: 0; top: 5px; width: 14px; height: 12px; overflow: visible; }
.pv-clients li { margin-bottom: 2px; }

/* Корешок: цена и кнопка под линией отрыва. Линия — та же перфорация,
   что у бланка заявки (.pad__perf): ряд пробитых дырок с шагом 10px. */
.pv-letter__stub {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin: 14px -52px 0;
  padding: 20px 52px 24px;
}
.pv-letter__stub::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background-image: radial-gradient(circle at 50% 50%,
    rgba(0, 0, 0, 0.55) 1.25px, transparent 1.35px);
  background-size: 10px 4px;
  background-repeat: repeat-x;
  opacity: 0.72;
}
.pv-letter__price { font-size: 40px; line-height: 44px; letter-spacing: -0.02em; margin: 0 0 8px; }
.pv-letter__btn { font-size: var(--mono-fs); line-height: var(--mono-lh); text-decoration: none; flex: 0 0 auto; }

/* --- РЕПЛИКА РУКОЙ НА КАДРЕ (открыто) ---------------------------------
   Колонка уходит, а её реплика переезжает на светлое место в левом
   верхнем углу узкого кадра. Рецепт тот же, что у .pack__hand. */
.stage--povod > .pv-hand-open {
  display: none;
  left: 110px;
  top: 247px;
  z-index: 4;
  margin: 0;
  font-size: var(--hand-fs);
  letter-spacing: 0.02em;
  line-height: 1.28;
  color: var(--red-hand);
  transform: rotate(-4deg);
  transform-origin: 0 100%;
}
.stage--povod[data-fmt="svadba"]     > .pv-hand-open[data-for="svadba"],
.stage--povod[data-fmt="korporativ"] > .pv-hand-open[data-for="korporativ"],
.stage--povod[data-fmt="vecherinka"] > .pv-hand-open[data-for="vecherinka"],
.stage--povod[data-fmt="festival"]   > .pv-hand-open[data-for="festival"] { display: block; }
/* день рождения: кадр опущен, надпись над головой */
.stage--povod > .pv-hand-open[data-for="vecherinka"] { left: 96px; top: 200px; }

/* --- КАДР В ОТКРЫТОМ ВИДЕ ---------------------------------------------
   Габарит пишет скрипт (--frame-w / --frame-h), здесь — только кадровка
   узкого высокого окна под каждый снимок. */
.stage--povod[data-open] .shot--svadba     { object-position: 54% 50%; }
.stage--povod[data-open] .shot--korporativ { object-position: 50% 20%; }
.stage--povod[data-open] .shot--vecherinka { object-position: 50% 8%; }
.stage--povod[data-open] .shot--festival   { object-position: 50% 50%; }

/* =====================================================================
   ДВИЖЕНИЕ — родня отрыва бланка в форме (section-form.css .pad__body):
   та же кривая и 0.62s, то же направление. «Свернуть» — ровно уход
   оторванного бланка вниз-вправо с доворотом 2.6°, «подробнее» — он же
   наоборот: лист кладут на кадр. Плоские translate/rotate, без 3D и
   will-change (см. CLAUDE.md, «Телефон падает от слоёв»).
   ===================================================================== */
/* Закрытое состояние с :not([data-open]) — НЕ ПРОСТО «> .pv-sheet».
   В section-povod.css стоит правило показа текущего повода
   (.stage--povod[data-fmt="…"] [data-when="…"] → opacity 1, visible),
   и лист с data-when оно тоже ловит. Без лишнего веса закрытый лист
   оставался видимым поверх кадра. */
.stage--povod > .pv-sheet { transform-origin: 30% 0; }
.stage--povod:not([data-open]) > .pv-sheet {
  transform: translate(58px, 104px) rotate(2.6deg);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 0.62s cubic-bezier(0.2, 0.7, 0.3, 1),
    opacity 0.48s ease 0.14s,
    visibility 0s linear 0.62s;
}
.stage--povod[data-open] > .pv-sheet {
  transform: rotate(0.7deg);
  opacity: 1;
  visibility: visible;
  transition:
    transform 0.62s cubic-bezier(0.2, 0.7, 0.3, 1),
    opacity 0.36s ease,
    visibility 0s;
}

.stage--povod .frame {
  transition: height 0.62s cubic-bezier(0.2, 0.7, 0.3, 1),
              width 0.62s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Колонка уходит сразу и возвращается, когда лист уже ушёл. */
.stage--povod .pack { transition: opacity 0.3s ease 0.4s; }
.stage--povod[data-open] .pack { opacity: 0; transition: opacity 0.2s ease; }

/* Реплика на кадре — наоборот: появляется, когда лист почти лёг. */
.stage--povod > .pv-hand-open {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.stage--povod[data-open] > .pv-hand-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.36s ease 0.4s, visibility 0s;
}

/* Мгновенное закрытие (лист ушёл из виду — см. povod-sheet.js) и
   спокойный режим: без движения. */
.stage--povod[data-instant] > .pv-sheet,
.stage--povod[data-instant] .frame,
.stage--povod[data-instant] .pack,
.stage--povod[data-instant] > .pv-hand-open { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .stage--povod > .pv-sheet,
  .stage--povod .frame,
  .stage--povod .pack,
  .stage--povod > .pv-hand-open { transition: none !important; }
}

/* =====================================================================
   ТЕЛЕФОН

   Колонка и так стоит под кадром, на бумаге (mobile.css), поэтому лист
   ложится не на кадр, а в ленту под ним — на место колонки, во всю
   ширину полей. Кадр не сужается и не тянется: на 390 узкая полоса
   снимка рядом с листом не поместится. Реплика на кадр не переезжает.
   Все размеры — в мобильной мере --u, как во всём mobile.css.
   ===================================================================== */
@media (max-width: 760px) {
  .stage--povod .pv-extra {
    font-size: calc(14 * var(--u)) !important;
    line-height: calc(20 * var(--u)) !important;
    white-space: normal !important;
  }
  .stage--povod .pack .pv-quote {
    max-width: none !important;
    margin-top: calc(18 * var(--u)) !important;
    font-size: calc(16 * var(--u)) !important;
    line-height: calc(24 * var(--u)) !important;
  }
  .stage--povod .pack .pv-more {
    margin-top: calc(12 * var(--u)) !important;
    padding-bottom: calc(4 * var(--u)) !important;
    font-size: calc(15 * var(--u)) !important;
    line-height: calc(21 * var(--u)) !important;
    background-size: 100% calc(2 * var(--u)) !important;
  }
  /* колонка на бумаге, не на тёмном кадре — набор чёрный у всех */
  .stage--povod .pack .pv-quote,
  .stage--povod .pack .pv-more { color: var(--ink) !important; }

  .stage--povod > .pv-sheet {
    /* в поля, как колонка: левее 40 стоит сквозная линия */
    left: calc(44 * var(--u)) !important;
    top: calc(400 * var(--u)) !important;
    width: calc(318 * var(--u)) !important;
    padding: calc(46 * var(--u)) calc(20 * var(--u)) 0 !important;
  }
  .stage--povod .pv-close {
    top: calc(16 * var(--u)) !important;
    right: calc(18 * var(--u)) !important;
    font-size: calc(13 * var(--u)) !important;
    line-height: calc(18 * var(--u)) !important;
  }
  .stage--povod .pv-sec { margin-top: calc(20 * var(--u)) !important; }
  .stage--povod .pv-sec:first-of-type { margin-top: 0 !important; }
  .stage--povod .pv-rub {
    font-size: calc(12 * var(--u)) !important;
    line-height: calc(16 * var(--u)) !important;
    margin-bottom: calc(8 * var(--u)) !important;
  }
  .stage--povod .pv-sheet .pv-t {
    font-size: calc(14 * var(--u)) !important;
    line-height: calc(21 * var(--u)) !important;
    margin-bottom: calc(8 * var(--u)) !important;
  }
  .stage--povod .mk {
    background-size: 100% calc(2 * var(--u)) !important;
    padding-bottom: calc(3 * var(--u)) !important;
  }
  .stage--povod .pv-ticks li {
    padding-left: calc(22 * var(--u)) !important;
    margin-bottom: calc(4 * var(--u)) !important;
  }
  .stage--povod .pv-ticks .tick {
    top: calc(5 * var(--u)) !important;
    width: calc(13 * var(--u)) !important;
    height: calc(11 * var(--u)) !important;
  }
  .stage--povod .pv-letter__stub {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: calc(14 * var(--u)) !important;
    margin: calc(14 * var(--u)) calc(-20 * var(--u)) 0 !important;
    padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(24 * var(--u)) !important;
  }
  .stage--povod .pv-letter__stub::before {
    height: calc(4 * var(--u)) !important;
    background-size: calc(10 * var(--u)) calc(4 * var(--u)) !important;
    background-image: radial-gradient(circle at 50% 50%,
      rgba(0, 0, 0, 0.55) calc(1.25 * var(--u)), transparent calc(1.35 * var(--u))) !important;
  }
  .stage--povod .pv-letter__price {
    font-size: calc(34 * var(--u)) !important;
    line-height: calc(40 * var(--u)) !important;
    margin-bottom: calc(6 * var(--u)) !important;
  }
  /* кнопка — той же плашкой, что выход колонки на телефоне */
  .stage--povod .pv-letter__btn {
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: calc(54 * var(--u)) !important;
    /* во всю ширину корешка, надпись по центру: с полями 24 по бокам
       «написать и назвать дату» шире листа и кнопка вылезала за край
       (Оксана 10.10) */
    box-sizing: border-box !important;
    width: 100% !important;
    justify-content: center !important;
    padding: 0 calc(10 * var(--u)) !important;
    white-space: nowrap !important;
    font-size: calc(15 * var(--u)) !important;
    line-height: calc(22 * var(--u)) !important;
  }
  .stage--povod > .pv-hand-open { display: none !important; }
  /* в корешке листа строка допуслуги — одной строкой, чуть мельче */
  .stage--povod .pv-letter__stub .pv-extra {
    white-space: nowrap !important;
    font-size: calc(13 * var(--u)) !important;
  }

  /* Карусель держит колонки видимыми (opacity 1 !important у
     [data-swipe] .frame [data-when]) — под открытым листом колонку
     прячем весом побольше, иначе из-под листа торчит реплика рукой. */
  .stage--povod[data-swipe][data-open] .frame .pack { opacity: 0 !important; visibility: hidden !important; }
}