/* ===========================================================
   components.css — секційні блоки в межах архетипу
   (вертикальні списки-рядки, табло-цифри, повноширинні смуги,
    галерея-мозаїка, прайс-рядки) — НЕ «ряд однакових карток»
   =========================================================== */

/* ---------- Маніфест-блок: великий текст ліворуч, перелік праворуч ---------- */
.manifest {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.manifest__lead p { font-size: clamp(1.2rem, 2vw, 1.55rem); color: var(--ink); line-height: 1.5; }
.manifest__lead p .accent { font-weight: 700; }
.manifest__points { display: grid; gap: 1.6rem; }
.point {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--line);
}
.point:last-child { border-bottom: 0; padding-bottom: 0; }
.point__ic {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  color: var(--accent);
}
.point h3 { font-family: var(--ff-body); font-weight: 700; font-size: 1.05rem; margin-bottom: .3rem; }
.point p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* ---------- Перелік несправностей: широкі рядки на всю ширину ---------- */
.faults { display: grid; gap: 0; border-top: 1px solid var(--line); }
.fault {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(1.4rem, 3vw, 2.2rem) 0;
  border-bottom: 1px solid var(--line);
  transition: background .4s var(--ease), padding-left .4s var(--ease);
}
.fault:hover { background: rgba(56,225,255,.04); padding-left: clamp(.5rem,2vw,1.4rem); }
.fault__no {
  font-family: var(--ff-display);
  font-size: 1.1rem;
  color: var(--accent);
}
.fault__body h3 { font-family: var(--ff-body); font-weight: 700; font-size: clamp(1.1rem,2vw,1.4rem); margin-bottom: .25rem; }
.fault__body p { margin: 0; color: var(--ink-soft); max-width: 60ch; }
.fault__arrow { color: var(--ink-mute); transition: transform .4s var(--ease), color .4s var(--ease); }
.fault:hover .fault__arrow { color: var(--accent); transform: translateX(6px); }

/* ---------- Процес: вертикальна шкала-таймлайн (не нумеровані картки в ряд) ---------- */
.timeline {
  position: relative;
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  padding-left: clamp(2rem, 5vw, 3.4rem);
}
.timeline::before {
  content: "";
  position: absolute;
  left: clamp(.55rem, 1.5vw, 1rem); top: .4rem; bottom: .4rem;
  width: 1px;
  background: linear-gradient(var(--accent), transparent 92%);
}
.tstep { position: relative; }
.tstep::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(2rem, 5vw, 3.4rem) + clamp(.1rem,1vw,.55rem));
  top: .5rem;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(56,225,255,.14);
}
.tstep__k { font-family: var(--ff-display); color: var(--ink-mute); font-size: .85rem; letter-spacing: .16em; }
.tstep h3 { font-family: var(--ff-body); font-weight: 700; font-size: clamp(1.2rem,2.4vw,1.65rem); margin: .35rem 0 .5rem; }
.tstep p { margin: 0; color: var(--ink-soft); max-width: 56ch; }

/* ---------- Велике табло-смуга (повноширинна, темніша) ---------- */
.band {
  background:
    linear-gradient(120deg, rgba(56,225,255,.05), transparent 40%),
    var(--bg-3);
  border-block: 1px solid var(--line);
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  text-align: center;
}
.stat b {
  display: block;
  font-family: var(--ff-display);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1;
  color: var(--ink);
}
.stat b .accent { color: var(--accent); }
.stat span { display:block; margin-top:.6rem; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-mute); }

/* ---------- Галерея-мозаїка (різнорозмірна) ---------- */
.mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(150px, 22vw, 260px);
  gap: clamp(.7rem, 1.5vw, 1.1rem);
}
.tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}
.tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease), filter .9s var(--ease);
  filter: saturate(.92) contrast(1.02);
}
.tile:hover img { transform: scale(1.07); filter: none; }
.tile::after {
  content: attr(data-cap);
  position: absolute;
  left: 1rem; bottom: 1rem;
  font-size: .8rem; font-weight: 700;
  color: #fff;
  background: rgba(7,11,20,.55);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line-2);
  padding: .35rem .7rem;
  border-radius: var(--radius);
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.tile:hover::after { opacity: 1; transform: none; }
.tile--w2 { grid-column: span 2; }
.tile--w3 { grid-column: span 3; }
.tile--w4 { grid-column: span 4; }
.tile--h2 { grid-row: span 2; }

/* ---------- Розділ-сплит з фото (для «про нас» / CTA) ---------- */
.split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split--rev { direction: rtl; }
.split--rev > * { direction: ltr; }
.split__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.split__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.split__media--wide img { aspect-ratio: 3/2; }
.split__badge {
  position: absolute; left: 1.2rem; bottom: 1.2rem;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--ff-display); font-weight: 700; font-size: .82rem; letter-spacing: .06em;
  padding: .6rem .9rem; border-radius: var(--radius);
}
.checklist { list-style:none; margin: 1.6rem 0 0; padding:0; display:grid; gap:1rem; }
.checklist li { display:flex; gap:.8rem; color: var(--ink-soft); }
.checklist li svg { color: var(--accent); flex:0 0 auto; margin-top:.2rem; }

/* ---------- Прайс: рядки на всю ширину з пунктиром ---------- */
.pricegroup + .pricegroup { margin-top: clamp(2.5rem, 5vw, 4rem); }
.pricegroup__title {
  display:flex; align-items:baseline; gap:1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-2);
}
.pricegroup__title h3 { font-size: clamp(1.4rem,3vw,2rem); }
.pricegroup__title span { font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.priceline {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .5rem;
  padding: .95rem 0;
  border-bottom: 1px dashed var(--line);
}
.priceline__name { font-weight: 600; }
.priceline__name small { display:block; font-weight:400; font-size:.85rem; color: var(--ink-mute); margin-top:.15rem; }
.priceline__val { font-family: var(--ff-display); font-weight:700; color: var(--ink); white-space: nowrap; }
.priceline__val .from { font-family: var(--ff-body); font-weight:600; font-size:.78rem; color: var(--ink-mute); margin-right:.35rem; }
.pricenote {
  margin-top: 1.4rem; font-size: .9rem; color: var(--ink-mute);
  padding: 1rem 1.2rem; border:1px solid var(--line); border-radius: var(--radius); border-left: 2px solid var(--accent);
}

/* ---------- CTA-смуга ---------- */
.cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-2);
  padding: clamp(2.5rem, 6vw, 5rem);
  text-align: center;
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(56,225,255,.16), transparent 60%),
    var(--bg-3);
}
.cta h2 { font-size: clamp(2rem, 5vw, 3.4rem); margin-bottom: 1rem; }
.cta p { color: var(--ink-soft); max-width: 52ch; margin-inline: auto; margin-bottom: 2rem; }
.cta__btns { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }

/* ---------- Контакти ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contact-cards { display:grid; gap: 1rem; }
.ccard {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: center;
  padding: 1.4rem 1.5rem;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.ccard:hover { border-color: var(--accent); transform: translateY(-3px); }
.ccard__ic { width:48px; height:48px; display:grid; place-items:center; border:1px solid var(--line-2); border-radius:var(--radius); color:var(--accent); }
.ccard span { font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); }
.ccard b, .ccard a { display:block; font-family: var(--ff-display); font-weight:700; font-size:1.2rem; color:var(--ink); }
.ccard a:hover { color: var(--accent); }
.map {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
  min-height: 380px;
}
.map iframe { width:100%; height:100%; min-height:380px; border:0; filter: grayscale(.3) invert(.92) hue-rotate(180deg) contrast(.9); }

/* ---------- Текстова сторінка (політики) ---------- */
.prose { max-width: 760px; }
.prose h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 2.4rem 0 1rem; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul { padding-left: 1.2rem; display:grid; gap:.5rem; margin: 0 0 1rem; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Адаптив компонентів ---------- */
@media (max-width: 900px) {
  .manifest, .split, .contact-grid { grid-template-columns: 1fr; }
  .split--rev { direction: ltr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 2.4rem 1.5rem; }
  .mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(140px,30vw,200px); }
  .tile--w3, .tile--w4 { grid-column: span 4; }
  .tile--w2 { grid-column: span 2; }
}
@media (max-width: 560px) {
  .fault { grid-template-columns: 3rem 1fr; }
  .fault__arrow { display: none; }
  .mosaic { grid-template-columns: repeat(2, 1fr); }
  .tile--w2, .tile--w3, .tile--w4 { grid-column: span 2; }
  .tile--h2 { grid-row: span 1; }
}