/* /elektrikilbi-koostamine only. Every class is prefixed kp-. Tokens come from styles.css, which this file never changes. */

/* Hero: text left, scheme right */
.kp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.kp-hero-grid h1 { margin: 12px 0 18px; }
.kp-hero-grid .lede { margin: 0; }

/* Drawing frame, shared by both drawings */
.kp-drawing {
  margin: 0;
  padding: clamp(16px, 2.2vw, 28px);
  background-color: var(--surface);
  background-image:
    linear-gradient(rgba(14, 71, 188, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 71, 188, .05) 1px, transparent 1px);
  background-size: 22px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.kp-drawing svg { display: block; width: 100%; height: auto; }
.kp-drawing figcaption { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .86rem; line-height: 1.45; color: var(--ink-faint); }
.kp-drawing--plain { background-image: none; }

.kp-svg-text { font-family: var(--font-body); font-size: 15px; font-weight: 500; fill: var(--ink); }
.kp-svg-box { font-family: var(--font-head); font-size: 14px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.kp-svg-muted { font-family: var(--font-body); font-size: 13px; fill: var(--ink-soft); }
.kp-svg-pin { font-family: var(--font-head); font-size: 19px; font-weight: 800; fill: #fff; text-anchor: middle; }
.kp-svg-tag { font-family: var(--font-head); font-size: 18px; font-weight: 800; fill: var(--ink); text-anchor: middle; }

/* Three checkable facts under the hero */
.kp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(32px, 4vw, 52px); border-top: 1px solid var(--line); }
.kp-fact { padding: 18px 24px 0; }
.kp-fact:first-child { padding-left: 0; }
.kp-fact + .kp-fact { border-left: 1px solid var(--line); }
.kp-fact strong { display: block; font-family: var(--font-head); font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.kp-fact span { display: block; margin-top: 2px; font-size: .94rem; color: var(--ink-soft); }

/* Contents row under the facts */
.kp-toc { display: flex; flex-wrap: wrap; gap: 0 20px; align-items: center; margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--line); font-size: .93rem; }
.kp-toc span { font-family: var(--font-head); font-weight: 700; color: var(--ink); }
.kp-toc a { display: inline-block; padding: 10px 0; color: var(--ink-soft); text-decoration: none; }
.kp-toc a:hover { color: var(--brand); }
main section[id], #algus { scroll-margin-top: calc(var(--nav-h) + 12px); }

/* What it means: prose and summary */
.kp-intro { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.kp-intro h2 { margin: 0 0 18px; }
.kp-intro p:last-child { margin-bottom: 0; }
.kp-summary { padding: clamp(22px, 2.6vw, 32px); background: var(--surface-blue); border-radius: var(--radius-lg); }
.kp-summary h3 { margin: 0 0 14px; }
.kp-summary ul { margin: 0; padding: 0; list-style: none; }
.kp-summary li { padding: 11px 0; border-top: 1px solid rgba(14, 71, 188, .16); font-size: .97rem; color: var(--ink); }
.kp-summary li:first-child { border-top: 0; padding-top: 0; }
.kp-summary li:last-child { padding-bottom: 0; }

.kp-card-link { display: inline-block; margin-top: 12px; font-family: var(--font-head); font-weight: 700; font-size: .92rem; }

/* What is inside: drawing and numbered legend */
.kp-anatomy { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.kp-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  font-family: var(--font-head); font-size: 1rem; font-weight: 800; color: #fff; background: var(--brand);
}
.kp-legend { margin: 0; padding: 0; list-style: none; }
.kp-legend li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--line); }
.kp-legend li:first-child { border-top: 0; padding-top: 0; }
.kp-legend li:last-child { padding-bottom: 0; }
.kp-legend h3 { margin: 0 0 3px; font-size: 1.08rem; }
.kp-legend p { margin: 0; font-size: .97rem; }

/* How the work runs: a line of five steps, vertical on small screens. Each step draws the line to the next one. */
.kp-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.kp-step { position: relative; }
.kp-step:not(:last-child)::after { content: ""; position: absolute; top: 18px; left: 48px; right: -18px; height: 2px; background: #BFCDE6; }
.kp-step .kp-num { position: relative; margin-bottom: 16px; }
.kp-step h3 { margin: 0 0 6px; font-size: 1.08rem; }
.kp-step p { margin: 0; font-size: .95rem; }

/* Photo caption and the named job under the list */
.kp-photo-note { margin: 12px 0 0; font-size: .86rem; color: var(--ink-faint); }
.kp-proof { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink); }

/* Price: what sets it and what to send */
.kp-price { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.kp-price h2 { margin: 12px 0 16px; }
.kp-price .checklist { margin-top: 18px; }
.kp-send { padding: clamp(22px, 2.6vw, 32px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.kp-send h3 { margin: 0 0 14px; }
.kp-send ul { margin: 0 0 22px; padding: 0; list-style: none; }
.kp-send li { padding: 10px 0; border-top: 1px solid var(--line); font-size: .97rem; color: var(--ink); }
.kp-send li:first-child { border-top: 0; padding-top: 0; }
.kp-send-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Common mistakes */
.kp-errors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); }
.kp-error { padding: 22px 0; border-top: 1px solid var(--line); }
.kp-error h3 { margin: 0 0 6px; font-size: 1.12rem; }
.kp-error p { margin: 0; font-size: .97rem; }
.kp-error .kp-fix { margin-top: 8px; color: var(--ink); }
.kp-error .kp-fix::before { content: ""; display: inline-block; width: 18px; height: 2px; margin: 0 8px 4px 0; background: var(--energy); }

/* Contact heading spacing, the shared block has none */
.kp-contact h2 { margin: 12px 0 14px; }

/* Rules and documents */
.kp-note { max-width: 860px; margin: 24px auto 0; font-size: .9rem; text-align: center; color: var(--ink-soft); }

@media (max-width: 1000px) {
  .kp-hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; }
  .kp-steps { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .kp-step { padding-left: 56px; }
  .kp-step .kp-num { position: absolute; left: 0; top: 0; margin: 0; }
  .kp-step h3 { padding-top: 7px; }
  .kp-step:not(:last-child)::after { top: 48px; bottom: -14px; left: 18px; right: auto; width: 2px; height: auto; }
}

@media (max-width: 760px) {
  .kp-hero-grid, .kp-intro, .kp-anatomy, .kp-price { grid-template-columns: minmax(0, 1fr); }
  .kp-errors { grid-template-columns: minmax(0, 1fr); }
  .kp-facts { grid-template-columns: minmax(0, 1fr); }
  .kp-fact, .kp-fact:first-child { padding: 14px 0; }
  .kp-fact + .kp-fact { border-left: 0; border-top: 1px solid var(--line); }
}