/* Посадочная страница «Сайты для питомников» (/pitomniki/).
   Подключается только там, где содержимое обёрнуто классом .kitamo-pitomniki, и опирается
   на токены и блоки лендинга (landing.scoped.css): здесь только то, чего у лендинга нет.
   Устройство страницы — docs/pitomniki.md. */

/* ---------- первый экран ---------- */
.kitamo-pitomniki .kp-hero .hero-t {max-width:20ch;font-size:2.5rem;}

.kitamo-pitomniki .kp-hero-text {display:flex;flex-direction:column;}
.kitamo-pitomniki .kp-hero-text .hero-t {margin:14px 0 18px;}

.kitamo-pitomniki .kp-stats {grid-template-columns:repeat(3,minmax(0,1fr));margin-top:28px;}
.kitamo-pitomniki .kp-stats .kpi {font-size:1.75rem;}
.kitamo-pitomniki .kp-stats .label {text-transform:none;letter-spacing:0;font-family:var(--font);font-size:0.8125rem;line-height:1.35;}

.kitamo-pitomniki .kp-actions {margin-top:24px;}
.kitamo-pitomniki .kp-note {flex-basis:100%;font-size:0.8125rem;line-height:1.5;color:var(--ink-60);margin-top:4px;}

/* Сайт питомника на компьютере, поверх — он же на телефоне. Не стоковые фото, а живые экраны. */
.kitamo-pitomniki .kp-devices {position:relative;padding:0 0 40px 0;}
.kitamo-pitomniki .kp-devices img {display:block;height:auto;}
.kitamo-pitomniki .kp-desktop {
  width:100%;border:1px solid var(--hairline-14);border-top:18px solid var(--header);
  border-radius:var(--r-lg);box-shadow:var(--sh-2);background:var(--card);
}
.kitamo-pitomniki .kp-phone {
  position:absolute;right:-8px;bottom:0;width:31%;
  border:7px solid var(--ink);border-radius:22px;box-shadow:var(--sh-2);background:var(--ink);
}

/* ---------- ситуации ---------- */
.kitamo-pitomniki .kp-pains {grid-template-columns:repeat(5,minmax(0,1fr));}
.kitamo-pitomniki .kp-pains .pain a {margin-top:auto;}

/* ---------- польза ---------- */
.kitamo-pitomniki .kp-benefits .mod {display:flex;flex-direction:column;gap:10px;}
.kitamo-pitomniki .kp-gain {
  color:var(--ink) !important;font-weight:500;background:var(--steel-soft);
  border-left:2px solid var(--steel);padding:8px 10px;border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.kitamo-pitomniki .kp-example {
  font-size:0.8125rem;font-weight:500;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--hairline-18);
}
.kitamo-pitomniki .kp-example:hover {text-decoration-color:var(--ink);}
.kitamo-pitomniki .kp-benefits .kp-example:first-of-type {margin-top:auto;}

.kitamo-pitomniki .kp-cta-row {margin-top:28px;display:flex;flex-wrap:wrap;gap:10px;}
.kitamo-pitomniki .kp-after {margin-top:24px;margin-bottom:0;}

/* ---------- кейс ---------- */
.kitamo-pitomniki .kp-case {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start;}
.kitamo-pitomniki .kp-case-story {display:flex;flex-direction:column;gap:10px;font-size:0.9375rem;line-height:1.6;}
.kitamo-pitomniki .kp-case-story h3.label,
.kitamo-pitomniki .kp-case-result h3.label {margin-top:8px;font-size:0.6875rem;font-weight:500;}
.kitamo-pitomniki .kp-case-result h3.label {margin:8px 0 12px;}
.kitamo-pitomniki .kp-case-result table {min-width:0;}
.kitamo-pitomniki .kp-case-result td {vertical-align:top;}
.kitamo-pitomniki .kp-case-result td:first-child {width:42%;color:var(--ink-60);}
.kitamo-pitomniki .kp-case-result td.k {font-weight:600;}

.kitamo-pitomniki .kp-list {display:flex;flex-direction:column;gap:6px;}
.kitamo-pitomniki .kp-list li {padding-left:16px;position:relative;}
.kitamo-pitomniki .kp-list li::before {content:"";position:absolute;left:0;top:0.75em;width:7px;height:1px;background:var(--ink-60);}

/* Галерея снимков — лента с прокруткой: на компьютере три снимка в кадре, на телефоне один с краем следующего. */
.kitamo-pitomniki .kp-gallery {display:flex;gap:16px;margin-top:40px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;}
.kitamo-pitomniki .kp-gallery .case-shot {flex:0 0 calc((100% - 32px)/3);scroll-snap-align:start;}
.kitamo-pitomniki .kp-gallery figcaption {font-size:0.75rem;margin-top:8px;}

/* ---------- находки и разделы ---------- */
.kitamo-pitomniki #findings .mod .kpi {font-size:2rem;}
.kitamo-pitomniki #kitamo .mod {display:flex;flex-direction:column;gap:14px;}
.kitamo-pitomniki #kitamo .mod .kp-list {font-size:0.875rem;}
.kitamo-pitomniki #kitamo .kp-example {margin-top:auto;}

/* ---------- шаги и факты ---------- */
.kitamo-pitomniki .kp-steps {grid-template-columns:repeat(4,minmax(0,1fr));}
.kitamo-pitomniki .kp-steps .ro p {font-size:0.8125rem;color:var(--ink-60);}

.kitamo-pitomniki .kp-facts {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden;}
.kitamo-pitomniki .kp-facts li {background:var(--card);padding:18px 20px;font-size:0.9375rem;line-height:1.55;}

/* ---------- форма ---------- */
.kitamo-pitomniki .kp-promise {font-size:1.5rem;line-height:1.3;font-weight:600;letter-spacing:-0.015em;max-width:30ch;margin:0 0 28px;}
.kitamo-pitomniki textarea {
  font-family:var(--font);font-size:0.8125rem;color:var(--ink);background:var(--card);
  border:1px solid var(--hairline-14);border-radius:var(--r-md);padding:8px 10px;width:100%;resize:vertical;
}
.kitamo-pitomniki textarea:focus {outline:none;border-color:var(--steel);}
.kitamo-pitomniki .field .label {text-transform:none;letter-spacing:0;font-family:var(--font);font-size:0.8125rem;color:var(--ink);}
.kitamo-pitomniki .kp-agree {flex-direction:row;align-items:flex-start;gap:8px;font-size:0.8125rem;line-height:1.45;}
.kitamo-pitomniki .kp-agree input {width:auto;margin-top:2px;flex:none;}
.kitamo-pitomniki .kp-agree a {text-decoration:underline;}
.kitamo-pitomniki #lp-hint {text-transform:none;letter-spacing:0;font-family:var(--font);font-size:0.8125rem;}
.kitamo-pitomniki #lp-hint.is-error {color:var(--error);}
.kitamo-pitomniki #lp-hint.is-ok {color:var(--success);}

/* ---------- снимок крупно ----------
   Окно живёт в body, вне обёртки страницы, поэтому цвета заданы прямо, а не токенами лендинга. */
.kitamo-pitomniki .kp-zoomable {cursor:zoom-in;transition:filter 240ms ease;}
.kitamo-pitomniki .kp-zoomable:hover {filter:brightness(0.96);}
.kitamo-pitomniki .kp-zoomable:focus-visible {outline:2px solid #3a5a7e;outline-offset:3px;}
html.kp-zoom-on {overflow:hidden;}
.kp-zoom {
  position:fixed;inset:0;z-index:100000;background:rgba(15,20,25,0.92);
  display:flex;align-items:center;justify-content:center;padding:56px 64px 24px;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
.kp-zoom[hidden] {display:none;}
.kp-zoom-fig {margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:12px;}
.kp-zoom-fig img {
  display:block;max-width:100%;max-height:calc(100vh - 140px);width:auto;height:auto;
  border-radius:6px;background:#fff;cursor:zoom-in;box-shadow:0 12px 40px rgba(0,0,0,0.35);
}
.kp-zoom-fig figcaption {color:#e6e9ed;font-size:0.875rem;line-height:1.5;text-align:center;max-width:70ch;}
.kp-zoom-fig figcaption:empty {display:none;}
/* Натуральная величина: снимок не ужимается, окно прокручивается. */
.kp-zoom.is-actual {display:block;overflow:auto;padding:56px 16px 24px;}
.kp-zoom.is-actual .kp-zoom-fig {max-height:none;}
.kp-zoom.is-actual .kp-zoom-fig img {max-width:none;max-height:none;cursor:zoom-out;}
.kp-zoom button {
  position:fixed;border:none;background:rgba(255,255,255,0.12);color:#fff;cursor:pointer;
  width:44px;height:44px;border-radius:50%;font-size:28px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background 200ms ease;
}
.kp-zoom button:hover {background:rgba(255,255,255,0.24);}
.kp-zoom button:focus-visible {outline:2px solid #fff;outline-offset:2px;}
.kp-zoom-close {top:10px;right:12px;}
.kp-zoom-prev {left:12px;top:50%;transform:translateY(-50%);}
.kp-zoom-next {right:12px;top:50%;transform:translateY(-50%);}

@media (max-width:1080px) {
  .kitamo-pitomniki .kp-pains {grid-template-columns:repeat(2,minmax(0,1fr));}
  .kitamo-pitomniki .kp-case {grid-template-columns:minmax(0,1fr);}
  .kitamo-pitomniki .kp-gallery .case-shot {flex-basis:calc((100% - 16px)/2);}
  .kitamo-pitomniki .kp-steps {grid-template-columns:repeat(2,minmax(0,1fr));}
  .kitamo-pitomniki .kp-phone {right:0;width:26%;}
}

@media (max-width:760px) {
  /* Заголовок не длиннее четырёх строк на 375 точках, главная кнопка — на первом экране. */
  .kitamo-pitomniki .kp-hero .hero-t {font-size:1.375rem;line-height:1.22;letter-spacing:-0.02em;max-width:none;}
  .kitamo-pitomniki .kp-actions {order:3;margin-top:18px;}
  .kitamo-pitomniki .kp-stats {order:4;}
  .kitamo-pitomniki .kp-actions .btn {width:100%;justify-content:center;white-space:normal;text-align:center;}
  .kitamo-pitomniki .kp-stats {
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;
    background:none;border:none;border-radius:0;margin-top:22px;
  }
  .kitamo-pitomniki .kp-stats .stat {flex:0 0 72%;scroll-snap-align:start;border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--card);}
  .kitamo-pitomniki .kp-devices {padding-bottom:24px;}
  .kitamo-pitomniki .kp-pains {grid-template-columns:1fr;}
  .kitamo-pitomniki .kp-gallery {gap:12px;}
  .kitamo-pitomniki .kp-gallery .case-shot {flex:0 0 78%;scroll-snap-align:start;}
  .kitamo-pitomniki .kp-steps {grid-template-columns:1fr;}
  .kitamo-pitomniki .kp-facts {grid-template-columns:1fr;}
  .kitamo-pitomniki .kp-promise {font-size:1.25rem;}
  .kitamo-pitomniki .kp-cta-row .btn {width:100%;justify-content:center;white-space:normal;text-align:center;}
  .kp-zoom {padding:56px 8px 72px;}
  .kp-zoom-fig img {max-height:calc(100vh - 210px);}
  .kp-zoom-prev, .kp-zoom-next {top:auto;bottom:12px;transform:none;}
}