/*
 * Сторінка матеріалу: новини, інструкції, документи, картки пристроїв
 * (templates/materials/article.tpl).
 *
 * Окремий блок .prose — оформлення тексту, який приходить із бази у вигляді
 * готового HTML. Контент-менеджери верстають його візуальним редактором,
 * тож тут враховані таблиці, картинки, списки, <code> і чужі inline-стилі.
 */

.crumbs{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:22px; font-size:13.5px; color:var(--ink-3);
}
.crumbs a{color:var(--ink-2)}
.crumbs a:hover{color:var(--brand)}

/* «Головна» — іконкою: у крихтах важливіші розділ і назва матеріалу */
.crumbs-home{display:inline-flex; align-items:center}
.crumbs-home svg{width:15px; height:15px; fill:var(--ink-3)}
.crumbs-home:hover svg{fill:var(--brand)}

.article-grid{display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:56px; align-items:start}
.article-grid--wide{grid-template-columns:minmax(0,1fr)}
.article-main{min-width:0}

.article-head{margin-bottom:26px; padding-bottom:20px; border-bottom:1px solid var(--line)}
.article-head h1{font-size:36px; line-height:1.15}
.article-date{margin:10px 0 0; font-size:13px; color:var(--ink-3)}

/* ---------- текст матеріалу ---------- */
.prose{max-width:70ch; font-size:16.5px; line-height:1.65; color:var(--ink)}
.prose h2{margin:32px 0 12px; font-size:25px}
.prose h3{margin:28px 0 10px; font-size:20px}
.prose h4{margin:22px 0 8px; font-size:17px}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 16px; padding-left:22px}
.prose li{margin-bottom:6px}
.prose a{color:var(--brand); border-bottom:1px solid var(--brand-soft)}
.prose a:hover{border-bottom-color:var(--brand)}
/* рамку не малюємо: у фото пристроїв прозорий фон, і рамка навколо
   порожнечі виглядає як зайва коробка */
.prose img{display:block; height:auto; max-width:100%; margin:18px 0}
.prose hr{margin:26px 0; border:0; border-top:1px solid var(--line)}
.prose blockquote{
  margin:18px 0; padding:2px 0 2px 16px;
  border-left:3px solid var(--brand); color:var(--ink-2);
}

.prose code{
  padding:2px 6px; font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:13.5px; color:var(--ink);
  background:var(--surface-2); border-radius:2px;
}
.prose pre{
  overflow-x:auto; padding:14px 16px; margin:0 0 16px;
  background:var(--surface-2); border-radius:var(--radius);
}
.prose pre code{padding:0; background:none}

/* таблиці з редактора приходять із власними border і width — перебиваємо */
.prose table{
  display:block; overflow-x:auto; width:100% !important;
  border-collapse:collapse; margin:0 0 18px; font-size:14.5px;
}
.prose table td,.prose table th{
  padding:8px 12px !important;
  border:1px solid var(--line) !important;
  text-align:left; vertical-align:top;
}
.prose table th{background:var(--surface-2); font-weight:600}
.prose table tr:nth-child(even) td{background:color-mix(in srgb, var(--surface-2) 45%, transparent)}

/* редактор лишає жорсткі кольори тексту — на темній темі вони нечитабельні */
.prose [style*="color"]{color:inherit !important}
.prose [style*="background"]{background:none !important}

/* ---------- бічна навігація розділу ---------- */
.article-aside{
  position:sticky; top:24px;
  padding:18px 20px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius);
}
.article-aside h2{
  margin:0 0 12px; font-family:"IBM Plex Sans",sans-serif;
  font-size:11.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}
.article-aside ul{list-style:none; margin:0 0 14px; padding:0; display:grid; gap:9px}
.article-aside a{font-size:14.5px; color:var(--ink-2); line-height:1.4}
.article-aside a:hover{color:var(--brand)}
.article-aside li.is-current a{color:var(--ink); font-weight:600}
.aside-all{font-size:13.5px; color:var(--brand); border-bottom:1px solid var(--brand-soft)}

/* ---------- коментарі ---------- */
.comments{margin-top:40px; padding-top:24px; border-top:1px solid var(--line)}
.comments h2{margin-bottom:18px; font-size:22px}
.comment{margin-bottom:18px}
.comment-meta{font-size:12.5px; color:var(--ink-3); margin-bottom:6px}
.comment-text{
  padding:10px 14px; font-size:15px;
  background:var(--surface); border-left:2px solid var(--line-2); border-radius:0 2px 2px 0;
}
.comment--answer{margin:10px 0 0 24px}
.comment--answer .comment-text{border-left-color:var(--brand)}
.comment-form{display:grid; gap:10px; max-width:70ch; margin-top:24px}
.comment-form label{font-size:14px; color:var(--ink-2)}
.comment-form textarea{
  font:inherit; font-size:15px; min-height:120px; padding:11px 13px; resize:vertical;
  color:var(--ink); background:var(--surface);
  border:1px solid var(--line-2); border-radius:2px;
}
.comment-form textarea:focus{outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand)}

@media (max-width: 900px){
  .article-grid{grid-template-columns:1fr; gap:32px}
  .article-head h1{font-size:28px}
  .article-aside{position:static}
}

/* ---------------------------------------------------------------------------
 * Тарифи (templates/materials/tariffs.tpl)
 * --------------------------------------------------------------------------- */
.tariffs .section-head h1{font-size:34px; margin-bottom:12px}

/* попередження про зміну цін — помітне, але не тривожне */
.price-notice{
  margin-bottom:28px; padding:14px 18px;
  font-size:15px; line-height:1.55; color:var(--ink);
  background:var(--brand-soft); border-left:3px solid var(--brand); border-radius:0 2px 2px 0;
}
.price-notice b{display:block; margin-bottom:2px}

.plans{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-bottom:40px}
.plan{
  position:relative; display:flex; flex-direction:column;
  padding:26px 22px 24px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius);
}
/* виділяємо рекомендований план рамкою, а не заливкою: ціни лишаються головним */
.plan--featured{border-color:var(--brand); box-shadow:var(--shadow-2)}
.plan-badge{
  position:absolute; top:-11px; left:22px;
  padding:3px 10px; font-size:11px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--brand-ink); background:var(--brand); border-radius:2px;
}
.plan h2{margin-bottom:10px; font-size:21px}
.plan-price{display:flex; align-items:baseline; gap:8px; margin:0 0 6px}
.plan-price b{font-family:"Roboto Slab",Georgia,serif; font-size:38px; line-height:1}
.plan-price span{font-size:13.5px; color:var(--ink-3); max-width:11em; line-height:1.35}
.plan-note{margin:0 0 16px; font-size:13.5px; color:var(--ink-3)}
.plan-items{
  list-style:none; margin:0 0 20px; padding:0 0 20px;
  display:grid; gap:9px; border-bottom:1px solid var(--line);
}
.plan-items li{position:relative; padding-left:20px; font-size:14.5px; color:var(--ink-2)}
.plan-items li::before{
  content:""; position:absolute; left:0; top:7px; width:9px; height:5px;
  border-left:2px solid var(--brand); border-bottom:2px solid var(--brand);
  transform:rotate(-45deg);
}
.plan .nbtn{margin-top:auto; justify-content:center; text-align:center}

/* Додаткові послуги — картками, але навмисно легшими за тарифні:
   без рамки-акценту, з міткою «додатково» і ціною зі знаком «+»,
   щоб їх не читали як четвертий тариф. */
.extras{margin-bottom:40px}
.extras-head{margin-bottom:18px}
.extras-head h2{margin:0; font-size:25px}

.extras-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.extra{
  padding:18px 20px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--radius);
}
.extra-tag{
  display:inline-block; margin-bottom:10px;
  font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3);
}
.extra h3{margin-bottom:8px; font-size:17px}
.extra-price{display:flex; align-items:baseline; gap:7px; margin:0 0 8px}
.extra-price b{font-family:"Roboto Slab",Georgia,serif; font-size:26px; line-height:1}
.extra-price span{font-size:13px; color:var(--ink-3)}
.extra-note{margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.5}

.tariffs-foot{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:44px;
  padding-top:28px; border-top:1px solid var(--line);
}
.tariffs-foot p{margin:0; font-size:14.5px; color:var(--ink-2); line-height:1.55}
.tariffs-doc{font-size:14.5px}
.tariffs-doc p{margin:0}

@media (max-width: 900px){
  .plans,.extras-grid,.tariffs-foot{grid-template-columns:1fr; gap:24px}
}

/* ---------------------------------------------------------------------------
 * Контакти (templates/materials/contacts.tpl)
 * --------------------------------------------------------------------------- */

/* верх: намір ліворуч, телефони праворуч великим кеглем */
.contacts-top{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start; margin-bottom:48px}
.contacts-intro h1{margin:12px 0 14px; font-size:34px}
.contacts-intro p{margin:0; font-size:16.5px; color:var(--ink-2)}

.contacts-phones{display:grid; gap:10px}
.phone-card{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:14px 18px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius);
}
.phone-card:hover{border-color:var(--brand)}
.phone-op{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-3)}
/* позначка Telegram — іконкою: назва месенджера впізнається за логотипом
   і не сперечається з номером за увагу.
   Колір фірмовий (#26A5E4) і не залежить від теми сайту — логотип месенджера
   впізнають саме синім, тому тут навмисно не використано токени палітри. */
.phone-tg{display:inline-flex; align-items:center}
.phone-tg svg{width:17px; height:17px; fill:#26A5E4}
.phone-card:hover .phone-tg svg{fill:#1D96D1}
.phone-num{font-size:21px; font-weight:500; white-space:nowrap}
.phone-mail{
  padding:12px 18px; font-size:15.5px; color:var(--ink-2);
  background:var(--surface-2); border-radius:var(--radius); text-align:center;
}
.phone-mail:hover{color:var(--brand)}

/* три типові звернення */
.contacts-cases{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-bottom:8px}
.case-card{
  display:flex; flex-direction:column; padding:22px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
}
.case-card h2{margin-bottom:8px; font-size:19px}
.case-card p{margin:0 0 16px; font-size:14.5px; color:var(--ink-2); line-height:1.55}
.case-cta{
  margin-top:auto; font-size:14.5px; font-weight:600; color:var(--brand);
  border-bottom:1px solid var(--brand-soft); align-self:flex-start;
}
.case-cta:hover{border-bottom-color:var(--brand)}

/* смуга з монтажем: список ліворуч, карта на всю ширину під ним */
.service-band{margin-top:56px; padding-top:44px; border-top:1px solid var(--line)}
.service-band h2{margin-bottom:8px; font-size:25px}
.service-lead{max-width:60ch; margin:0 0 24px; font-size:16px; color:var(--ink-2)}
.service-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-bottom:28px}
.service-card{
  padding:18px 20px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius);
}
.service-card h3{margin-bottom:6px; font-size:18px}
.service-addr{margin:0 0 8px; font-size:14.5px; color:var(--ink-2)}
.service-person{margin:0 0 4px; font-size:14px; color:var(--ink-3)}
.service-tel{font-size:17px; font-weight:500}
/* карта в межах колонки контенту, а не на всю ширину екрана */
.service-map{
  height:380px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface-2);
}
.service-map .leaflet-popup-content{font-family:"IBM Plex Sans",sans-serif; font-size:14px}
.service-map .leaflet-popup-content a{color:var(--brand)}

/* форма — окремою смугою, а не колонкою поруч із контактами */
.contacts-form-band{
  display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; align-items:start;
  margin-top:48px; padding-top:36px; border-top:1px solid var(--line);
}
.contacts-form-band h2{margin-bottom:10px; font-size:25px}
.contacts-form-band p{margin:0; font-size:15.5px; color:var(--ink-2)}
.contact-form{display:grid; gap:12px; max-width:520px}
.contact-form input,.contact-form textarea{
  font:inherit; font-size:16px; width:100%; padding:11px 13px;
  color:var(--ink); background:var(--surface);
  border:1px solid var(--line-2); border-radius:2px;
}
.contact-form textarea{min-height:110px; resize:vertical}
.contact-form input:focus,.contact-form textarea:focus{
  outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand);
}
.contacts-note{margin-top:36px; padding-top:24px; border-top:1px solid var(--line)}

@media (max-width: 900px){
  .contacts-top,.contacts-cases,.service-list,.contacts-form-band{grid-template-columns:1fr; gap:26px}
  .contacts-intro h1{font-size:27px}
  .service-map{height:300px}
}