/* =========================================================
   Кровля Фасад — единый шаблон текстовых страниц
   Файл: /local/templates/profnastil/css/textpage.css
   Префикс .tp- выбран, чтобы не пересекаться с существующим CSS.
   Шрифт намеренно не задаётся — наследуется от шаблона сайта.
   ========================================================= */

:root{
  --tp-or:#ee8c21;
  --tp-or-dark:#d9760f;
  --tp-or-deep:#b95f06;
  --tp-or-tint:#fdf0e2;
  --tp-ink:#1f2429;
  --tp-ink-2:#3d454c;
  --tp-muted:#6d757d;
  --tp-line:#e7e3de;
  --tp-ground-2:#f7f5f2;
}

.tp{
  display:flex;
  flex-direction:column;
  gap:22px;
  padding:22px 0 0;
  color:var(--tp-ink);
  line-height:1.6;
}
.tp,.tp *,.tp-adv,.tp-adv *{box-sizing:border-box}

/* ---------- заголовки ---------- */
.tp__title{
  margin:0;
  font-size:clamp(26px,3.4vw,40px);
  line-height:1.18;
  font-weight:800;
  letter-spacing:-.015em;
  text-wrap:balance;
  max-width:26ch;
}
.tp__h2{
  margin:14px 0 0;
  font-size:clamp(22px,2.4vw,28px);
  line-height:1.25;
  font-weight:700;
  text-align:center;
  letter-spacing:-.01em;
}

/* ---------- карточка ---------- */
.tp-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--tp-line);
  border-radius:14px;
  background:#fff;
  padding:26px 28px;
  display:flex;
  gap:18px;
  align-items:flex-start;
}
.tp-card__body{
  position:relative;
  z-index:1;
  max-width:66ch;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.tp-card__body p{margin:0;color:var(--tp-ink-2)}
.tp-card__h{margin:0;font-size:22px;font-weight:700;line-height:1.3}

/* акцентная карточка (итог, призыв) */
.tp-card--accent{background:var(--tp-or-tint);border-color:#f6e2cd}

/* карточка-предупреждение (только для действительно важных условий) */
.tp-card--warn{background:#fdeceb;border-color:#f4d2ce}
.tp-card--warn .tp-ico{background-color:#f9dcd8}
.tp-card--warn .tp-card__h{color:#a32b1c}
.tp-card--warn .tp-list li::before{background-color:#c0392b}

/* декоративная графика справа — файлы в /local/templates/profnastil/images/ */
.tp-card--deco::after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:40%;
  z-index:0;
  pointer-events:none;
  background-position:right bottom;
  background-repeat:no-repeat;
  background-size:contain;
}
.tp-card--deco-pay::after{background-image:url(/assets/images/tp-deco-pay.svg)}
.tp-card--deco-check::after{background-image:url(/assets/images/tp-deco-check.svg)}
.tp-card--deco-map::after{background-image:url(/assets/images/tp-deco-map.svg)}
.tp-card--deco-store::after{background-image:url(/assets/images/tp-deco-store.svg)}

/* ---------- иконка-бейдж ---------- */
.tp-ico{
  flex:0 0 auto;
  width:44px;
  height:44px;
  border-radius:50%;
  background-color:var(--tp-or-tint);
  background-position:center;
  background-repeat:no-repeat;
  background-size:22px 22px;
}
.tp-ico--globe{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b95f06' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a15 15 0 0 1 0 18a15 15 0 0 1 0-18'/%3E%3C/svg%3E")}
.tp-ico--like{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b95f06' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 22V11l5-9a2.5 2.5 0 0 1 2.4 3.2L13.5 9H19a2 2 0 0 1 2 2.4l-1.6 8A2 2 0 0 1 17.4 21H7z'/%3E%3Crect x='2' y='11' width='5' height='11' rx='1'/%3E%3C/svg%3E")}
.tp-ico--info{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b95f06' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.6h.01'/%3E%3C/svg%3E")}
.tp-ico--card{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b95f06' stroke-width='1.9' stroke-linecap='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2.5'/%3E%3Cpath d='M2 10h20M6 15h4'/%3E%3C/svg%3E")}
.tp-ico--bank{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b95f06' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10 12 4l9 6'/%3E%3Cpath d='M5 10v8M10 10v8M14 10v8M19 10v8M3 20h18'/%3E%3C/svg%3E")}
.tp-ico--qr{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b95f06' stroke-width='1.9' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Cpath d='M14 14h3v3h-3zM20 14v3M14 20h7'/%3E%3C/svg%3E")}
.tp-ico--shield{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b95f06' stroke-width='1.9' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M12 3 20 6v6c0 5-3.4 8.2-8 9.6C7.4 20.2 4 17 4 12V6z'/%3E%3Cpath d='m8.8 12.2 2.2 2.2 4.2-4.6'/%3E%3C/svg%3E")}
.tp-ico--truck{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b95f06' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7h11v9H2zM13 10h4.5l3.5 3.5V16h-8z'/%3E%3Ccircle cx='6.5' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E")}
.tp-ico--support{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b95f06' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Crect x='2' y='14' width='4.5' height='6' rx='2'/%3E%3Crect x='17.5' y='14' width='4.5' height='6' rx='2'/%3E%3Cpath d='M20 20v.5a2.5 2.5 0 0 1-2.5 2.5H13'/%3E%3C/svg%3E")}
.tp-ico--box{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b95f06' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8 12 3l9 5v8l-9 5-9-5z'/%3E%3Cpath d='M3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E")}
.tp-ico--ruler{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b95f06' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.5' y='8' width='21' height='8' rx='2' transform='rotate(-45 12 12)'/%3E%3Cpath d='M9 7.5 10.5 9M12 4.5 13.5 6M15 7.5 16.5 9'/%3E%3C/svg%3E")}
.tp-ico--factory{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b95f06' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20V10l5 3.5V10l5 3.5V10l5 3.5V20z'/%3E%3Cpath d='M3 20h18M6 6h3v4'/%3E%3C/svg%3E")}
.tp-ico--clock{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b95f06' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.2l3.4 2'/%3E%3C/svg%3E")}
.tp-ico--warn{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a32b1c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E")}
.tp-ico--doc{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b95f06' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E")}

/* ---------- маркированный список ---------- */
.tp-list{
  margin:6px 0 0;
  padding:0;
  list-style:none;
  columns:2;
  column-gap:34px;
}
.tp-list li{
  position:relative;
  padding-left:30px;
  margin:0 0 16px;
  color:var(--tp-ink-2);
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
}
.tp-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.28em;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--tp-or) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px 11px no-repeat;
}
.tp-list--one{columns:1}

/* ---------- плитки ---------- */
.tp-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tp-tiles--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tp-tiles--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tp-tiles--auto{grid-template-columns:repeat(auto-fit,minmax(205px,1fr))}
.tp-tile--compact{padding:16px 18px}
.tp-tile--compact .tp-ico{width:38px;height:38px;background-size:19px 19px}
.tp-tile{
  border:1px solid var(--tp-line);
  border-radius:14px;
  background:#fff;
  padding:20px 22px;
  display:flex;
  gap:16px;
  align-items:center;
}
.tp-tile>*{min-width:0}
.tp-tile__t{font-weight:700;line-height:1.35}

/* ---------- чипы: короткий перечень без описаний ---------- */
.tp-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.tp-chip{
  display:inline-flex;
  align-items:center;
  gap:9px;
  border:1px solid var(--tp-line);
  border-radius:99px;
  background:#fff;
  padding:10px 20px;
  font-weight:600;
  line-height:1.3;
}
.tp-chip::before{
  content:"";
  position:static;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--tp-or);
  flex:0 0 auto;
}
.tp-tile__s{font-size:14px;color:var(--tp-muted);line-height:1.45}

/* ---------- CTA ---------- */
.tp-cta{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  background:linear-gradient(100deg,#d9760f 0%,#ee8c21 52%,#f39b3a 100%);
  color:#fff;
  padding:38px 40px;
  min-height:190px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.tp-cta::after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:54%;
  background:url(/assets/images/tp-deco-cta.svg) right bottom / contain no-repeat;
  pointer-events:none;
}
.tp-cta__in{
  position:relative;
  z-index:1;
  max-width:44ch;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-start;
}
.tp-cta h2{margin:0;font-size:clamp(24px,2.8vw,32px);line-height:1.2;font-weight:800;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.tp-cta p{margin:0;font-size:16px;line-height:1.55;color:#fff;opacity:.95}
.tp-btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:#fff;
  color:var(--tp-or-deep);
  font-weight:700;
  font-size:15px;
  padding:13px 24px;
  border-radius:9px;
  margin-top:4px;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(120,60,0,.16);
  transition:transform .15s ease,box-shadow .15s ease;
}
.tp-btn::before{
  content:"";
  position:static;
  flex:0 0 auto;
  width:17px;
  height:17px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b95f06' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.tp-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(120,60,0,.22);color:var(--tp-or-deep)}
.tp-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---------- полоса преимуществ (на всю ширину экрана) ---------- */
.tp-adv{background:#f7f5f2;margin-top:36px}
.tp-adv__in{
  max-width:1250px;
  margin:0 auto;
  padding:26px 15px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
}
.tp-adv__i{display:flex;gap:14px;align-items:center}
.tp-adv__i>*{min-width:0}
.tp-adv__t{font-weight:700;font-size:15px;line-height:1.3;color:#1f2429}
.tp-adv__s{font-size:13px;color:#6d757d;line-height:1.35}

/* ---------- адаптив ---------- */
@media (max-width:900px){
  .tp-tiles,.tp-tiles--2,.tp-tiles--4{grid-template-columns:1fr}
  .tp-tiles--auto{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .tp-adv__in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tp-card--deco::after,.tp-cta::after{display:none}
  .tp-card__body,.tp-cta__in{max-width:none}
}
@media (max-width:640px){
  .tp-list{columns:1}
  .tp-card{padding:20px 18px;flex-direction:column;gap:14px}
  .tp-cta{padding:26px 22px}
  .tp-adv__in{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .tp-btn{transition:none}
}

/* ---------- «Распродажа» из подвала: скрываем только на текстовых страницах ----------
   Блок живёт в footer.php и выводится на всех страницах, кроме главной.
   Действует, пока в footer.php нет условия HIDE_SALE. */
body:has(.tp) .gc-section.gc-section_bg{display:none}