/* /assets/css/ocenka-istoriya.css
   TP BUILD: OCENKA-ISTORIYA v3 / cards + accordion / 2026-01-03 */

/* Scope */
.tp-ocenka .tp-hero { padding-top: 96px; padding-bottom: 44px; }
@media (max-width: 991px) { .tp-ocenka .tp-hero { padding-top: 84px; padding-bottom: 40px; } }
@media (max-width: 575px) { .tp-ocenka .tp-hero { padding-top: 74px; padding-bottom: 34px; } }

.tp-ocenka .tp-section { padding: 56px 0; }
.tp-ocenka .tp-section--gray { background: rgba(255,255,255,0.03); }
.tp-ocenka .tp-note { margin-top: 12px; opacity: .92; }
.tp-ocenka .tp-inline-links a { text-decoration: underline; }

/* Links: keep visited the same */
.tp-ocenka .tp-inline-links a,
.tp-ocenka .tp-inline-links a:visited { color: inherit; }
.tp-ocenka .tp-inline-links a:hover { text-decoration: underline; }

.tp-ocenka .tp-hero-cta { margin-top: 18px; }
.tp-ocenka .tp-demo-cta { margin-top: 26px; }

/* HERO image position (X,Y) */
/* Single control point for hero image movement (X,Y) */
.tp-ocenka{
  --ocenka-hero-x: 60px;
  --ocenka-hero-y: 70px;
  --ocenka-hero-scale: 1.21;
}
.tp-ocenka .main__img{
  transform: translate(var(--ocenka-hero-x), var(--ocenka-hero-y)) scale(var(--ocenka-hero-scale));
}

/* allow image to extend outside column if needed */
.tp-ocenka .main__r{ overflow: visible; }


/* Bigger CTA buttons (page-only) */
.tp-ocenka .tp-btn-cta { font-size: 18px; padding: 16px 28px; border-radius: 14px; }
@media (max-width: 575px) { .tp-ocenka .tp-btn-cta { font-size: 17px; padding: 15px 22px; width: 100%; max-width: 360px; } }

.tp-ocenka p { opacity: .95; }
.tp-ocenka .tp-subtitle { max-width: 760px; margin-left: auto; margin-right: auto; }
.tp-ocenka .tp-muted { opacity: .85; font-size: 14px; }

/* Cards */
.tp-ocenka .tp-cards { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; margin-top: 18px; }
.tp-ocenka .tp-card { grid-column: span 6; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); box-shadow: 0 12px 32px rgba(0,0,0,0.22); border-radius: 16px; padding: 18px 18px; }
.tp-ocenka .tp-card--full { grid-column: span 12; }
.tp-ocenka .tp-card__title { font-weight: 800; font-size: 18px; margin: 0 0 8px; }
.tp-ocenka .tp-card__text { margin: 0; line-height: 1.55; opacity: .95; }

/* Card hover */
.tp-ocenka .tp-card:hover{ background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.20); transform: translateY(-1px); }
.tp-ocenka .tp-card{ transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.tp-ocenka .tp-card ul { margin: 12px 0 0; padding-left: 18px; }
.tp-ocenka .tp-card li { margin: 0 0 8px; }
.tp-ocenka .tp-card li:last-child { margin-bottom: 0; }
@media (max-width: 991px) { .tp-ocenka .tp-card { grid-column: span 12; } }

/* Steps */
.tp-ocenka .tp-steps { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; margin-top: 18px; counter-reset: tpstep; }
.tp-ocenka .tp-step { grid-column: span 4; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); box-shadow: 0 12px 32px rgba(0,0,0,0.22); border-radius: 16px; padding: 18px 18px; position: relative; overflow: hidden; }
.tp-ocenka .tp-step:before { counter-increment: tpstep; content: counter(tpstep); position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; font-weight: 900; opacity: .95; }
.tp-ocenka .tp-step__title { font-weight: 800; font-size: 18px; margin: 0 0 8px; padding-right: 42px; }
.tp-ocenka .tp-step__text { margin: 0; line-height: 1.55; opacity: .95; }

/* Step hover */
.tp-ocenka .tp-step:hover{ background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.20); transform: translateY(-1px); }
.tp-ocenka .tp-step{ transition: transform .15s ease, background .15s ease, border-color .15s ease; }
@media (max-width: 991px) { .tp-ocenka .tp-step { grid-column: span 12; } }

/* Accordion */
.tp-ocenka .tp-acc { margin-top: 16px; }
.tp-ocenka .tp-acc details { border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); border-radius: 14px; padding: 0; overflow: hidden; }
.tp-ocenka .tp-acc details + details { margin-top: 10px; }
.tp-ocenka .tp-acc summary { list-style: none; cursor: pointer; padding: 16px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tp-ocenka .tp-acc summary::-webkit-details-marker { display: none; }
.tp-ocenka .tp-acc .tp-acc__q { font-weight: 800; font-size: 16px; line-height: 1.25; }
.tp-ocenka .tp-acc .tp-acc__icon { width: 30px; height: 30px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); flex: 0 0 auto; position: relative; }
.tp-ocenka .tp-acc .tp-acc__icon:before,
.tp-ocenka .tp-acc .tp-acc__icon:after { content: ""; position: absolute; background: rgba(255,255,255,0.9); border-radius: 2px; }
.tp-ocenka .tp-acc .tp-acc__icon:before { width: 14px; height: 2px; }
.tp-ocenka .tp-acc .tp-acc__icon:after { width: 2px; height: 14px; }
.tp-ocenka .tp-acc details[open] .tp-acc__icon:after { display: none; }
.tp-ocenka .tp-acc .tp-acc__a { padding: 0 16px 16px; opacity: .95; line-height: 1.55; }
.tp-ocenka .tp-acc .tp-acc__a p { margin: 0 0 10px; }
.tp-ocenka .tp-acc .tp-acc__a p:last-child { margin-bottom: 0; }

/* Models grid (same feel as cards) */
.tp-ocenka .tp-models-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.tp-ocenka .tp-models-grid .need-card { grid-column: span 3; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); box-shadow: 0 12px 32px rgba(0,0,0,0.22); border-radius: 16px; padding: 16px; text-decoration: none; display: block; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.tp-ocenka .tp-models-grid .need-card,
.tp-ocenka .tp-models-grid .need-card:visited { color: #fff; }
.tp-ocenka .tp-models-grid .need-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.08); }
.tp-ocenka .tp-models-grid .need-card__title { font-weight: 800; color: #fff; }
.tp-ocenka .tp-models-grid .need-card__text { opacity: .85; margin-top: 6px; color: rgba(255,255,255,0.82); }
@media (max-width: 991px) { .tp-ocenka .tp-models-grid .need-card { grid-column: span 6; } }
@media (max-width: 575px) { .tp-ocenka .tp-models-grid .need-card { grid-column: span 12; } }

/* Small helpers */
.tp-ocenka .tp-link-plain { color: inherit; text-decoration: none; }
.tp-ocenka .tp-link-plain:hover { text-decoration: none; }
.tp-ocenka .tp-mt-12 { margin-top: 12px; }
.tp-ocenka .tp-mt-18 { margin-top: 18px; }
.tp-ocenka .tp-mt-24 { margin-top: 24px; }
.tp-ocenka .tp-mt-32 { margin-top: 32px; }
/* Ensure breadcrumbs are above any overlays */
.tp-breadcrumbs {
  position: relative;
  z-index: 50;
}

.tp-breadcrumbs a {
  display: inline-block;
  pointer-events: auto !important;
  cursor: pointer;
}

/* If any blog hero/cover overlay blocks clicks */
.hero::before,
.hero::after,
.blog-hero::before,
.blog-hero::after,
.main::before,
.main::after {
  pointer-events: none !important;
}

/* === FINAL FIX: breadcrumbs must be above hero background === */
.tp-ocenka .tp-breadcrumbs {
  position: relative;
  z-index: 100;
}

.tp-ocenka .tp-breadcrumbs a {
  display: inline-block;
  pointer-events: auto;
  cursor: pointer;
}

/* Disable click interception by hero backgrounds */
.tp-ocenka .tp-hero::before,
.tp-ocenka .tp-hero::after {
  pointer-events: none !important;
}

/* NOTE: do NOT touch body.tp-ocenka::before on mobile.
   The unified mobile background is rendered by main.css via body:not(.page-home)::before.
*/

@media (max-width: 575px){
  .tp-ocenka .tp-hero{
    padding-top: 48px !important;
  }
}

/* Mobile: prevent hero image overflow, but keep it large */
@media (max-width: 768px){
  .tp-ocenka .tp-hero{ overflow: hidden; }
  .tp-ocenka .main__img{ transform-origin: center top; }
  .tp-ocenka .main__img img{ max-width: 100%; height: auto; }



  /* default mobile shifts (you can tweak later) */
  .tp-ocenka{
    --ocenka-hero-x: 0px;
    --ocenka-hero-y: -10px;
    --ocenka-hero-scale: 1.08;
  }
}


/* FIX mobile: /ocenka-istoriya/ hero image stays inside viewport */
@media (max-width: 991px){
  body.tp-ocenka{
    --ocenka-hero-x: -18px !important;   /* двигаем влево, чтобы не вылезало справа */
    --ocenka-hero-y: -10px !important;  /* немного вверх/вниз по вкусу */
    --ocenka-hero-scale: 1.02 !important; /* уменьшаем масштаб на мобилке */
  }

  body.tp-ocenka .tp-hero,
  body.tp-ocenka .main__r{
    overflow: hidden !important;
  }

  body.tp-ocenka img.main__img{
    transform-origin: center top !important;
    max-width: 100% !important;  /* перебиваем инлайн max-width:520px */
    height: auto !important;
  }
}