/* ==========================================================================
   Kapihaldus / Locker Solutions — jagatud kujundus
   Sama fail teenindab kapihaldus.ee (ET) ja lockersolutions.eu (EN).
   Uks allikas = keeled ei saa kujunduslikult lahku minna.
   Kujundusalus: koolikapp.ee (Poppins + roheline brandigradient).
   ========================================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: #fff;
  font-family: 'Poppins', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #223019;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

.kh-brandgrad { background: linear-gradient(100deg,#2f8a3d 0%,#69a52c 52%,#bcd23f 100%); }

/* ---- Pildiraam ------------------------------------------------------------
   Proportsiooni hoiab RAAM, mitte pilt ise. img-le aspect-ratio panemine ei
   toimi usaldusvaarselt, kui HTML-is on height="..." atribuut — siis jaab
   pilt oma loomulikku korgusesse ja ruudustik laheb sakiliseks.
   -------------------------------------------------------------------------- */
.kh-shot { aspect-ratio: 4/3; background: #F7FAF2; overflow: hidden; }
.kh-shot.wide { aspect-ratio: 16/9; }
.kh-shot > img { width: 100%; height: 100%; object-fit: contain; }
.kh-shot.cover > img { object-fit: cover; }

/* ---- Komponendid ---------------------------------------------------------- */
.kh-card { background:#fff; border:1px solid #E0E9D3; border-radius:14px; }
.kh-chip { display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.06em;
           text-transform:uppercase; color:#2f8a3d; background:#EEF5E3;
           border-radius:999px; padding:5px 11px; }
.kh-btn        { display:inline-block; background:#fff; color:#2f8a3d; font-weight:700; font-size:15px; padding:13px 24px; border-radius:999px; }
.kh-btn-solid  { display:inline-block; background:#2f8a3d; color:#fff;  font-weight:700; font-size:15px; padding:13px 24px; border-radius:999px; }
.kh-btn-ghost  { display:inline-block; border:1.5px solid rgba(255,255,255,.75); color:#fff; font-weight:600; font-size:15px; padding:12px 22px; border-radius:999px; }
.kh-btn-line   { display:inline-block; border:1.5px solid #C9DBAE; color:#2f8a3d; font-weight:700; font-size:15px; padding:12px 22px; border-radius:999px; }

.kh-pad      { max-width:1200px; margin:0 auto; padding:0 56px; }
.kh-sec      { max-width:1200px; margin:0 auto; padding:64px 56px; }
.kh-sec-title{ font-size:30px; font-weight:800; color:#223019; margin:14px 0 12px; letter-spacing:-.01em; }
.kh-lead     { font-size:16.5px; line-height:1.65; color:#4A5A3E; margin:0 0 8px; max-width:800px; }

/* Keelevaheti */
.kh-lang { display:flex; align-items:center; gap:2px; background:rgba(255,255,255,.18);
           border-radius:999px; padding:3px; font-size:13px; font-weight:700; }
.kh-lang a { padding:6px 13px; border-radius:999px; color:rgba(255,255,255,.85); }
.kh-lang a[aria-current="true"] { background:#fff; color:#2f8a3d; }

/* Funktsionaalsuse nimekiri — kaks rolli (kasutaja + objekti haldur).
   Susteemiadmini vaade on teenusepakkuja sisevaade, lehele see ei kuulu. */
.kh-roles { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.kh-role  { background:#fff; border:1px solid #E0E9D3; border-radius:18px; padding:30px 28px; }
.kh-role h3 { font-size:19px; font-weight:800; color:#223019; margin:14px 0 4px; }
.kh-role .kh-who { font-size:13px; color:#6B7D58; font-weight:600; margin:0 0 18px; }
.kh-feat { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.kh-feat li { position:relative; padding-left:26px; font-size:14.5px; line-height:1.5; color:#4A5A3E; }
.kh-feat li::before {
  content:""; position:absolute; left:0; top:6px; width:15px; height:9px;
  border-left:2.5px solid #69a52c; border-bottom:2.5px solid #69a52c;
  transform:rotate(-45deg);
}

/* Automaatika / liidestused */
.kh-grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.kh-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.kh-tile  { background:#fff; border:1px solid #E0E9D3; border-radius:14px; padding:22px 22px; }
.kh-tile h4 { font-size:15.5px; font-weight:700; color:#223019; margin:0 0 6px; }
.kh-tile p  { font-size:14px; line-height:1.55; color:#4A5A3E; margin:0; }

/* Sissejuhatuse pohitekst — suurem kui tavaline kh-lead */
.kh-intro { font-size:19px; line-height:1.6; color:#3B4B2F; margin:0 0 32px; max-width:860px; }

/* Toendinumbrid (6 tk): koolid, kliendid, tellimused, tegevused,
   kasutusaasta, keeled. Kolm veergu, kaks rida. */
/* Laius on TAHTLIKULT piiramata — nii joonduvad numbririba servad
   allpool olevate kaartidega. max-width jattis riba kitsamaks. */
.kh-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:28px 40px;
            padding:28px 0; border-top:1px solid #E0E9D3; border-bottom:1px solid #E0E9D3; }
.kh-stat strong { display:block; font-size:32px; font-weight:800; color:#2f8a3d;
                  line-height:1; letter-spacing:-.02em; white-space:nowrap; }
.kh-stat span   { display:block; font-size:14px; color:#5B6B4C; margin-top:8px; line-height:1.35; }

/* Kaks korvutist paani (kolmas eemaldatud) */
.kh-grid2-tiles { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.kh-tile-lg { position:relative; padding:30px 28px 28px; border-radius:18px; }
.kh-tile-lg h4 { font-size:18px; margin:0 0 8px; }
.kh-tile-lg p  { font-size:15px; line-height:1.6; }
.kh-num { display:inline-flex; align-items:center; justify-content:center;
          width:32px; height:32px; margin-bottom:14px; border-radius:50%;
          background:#EEF5E3; color:#2f8a3d; font-size:15px; font-weight:800; }

/* ---- Hinnamudeli visuaal (CSS-iga joonistatud, pildifaili ei vaja) ------
   Kolm kapikobarat kasvavas jarjekorras: sama susteem, rohkem kappe.      */
.kh-scale { display:flex; align-items:flex-start; justify-content:center; gap:22px; flex-wrap:wrap; }
.kh-scale-item { display:flex; flex-direction:column; align-items:center; gap:12px; }
.kh-lockers { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; width:96px; }
.kh-lockers[data-n="small"] { width:96px; }
.kh-lockers i { display:block; aspect-ratio:1; background:#69a52c; border-radius:2px; opacity:.85; }
.kh-lockers i:nth-child(7n)  { background:#bcd23f; }
.kh-lockers i:nth-child(11n) { background:#C9DBAE; }
.kh-scale-cap { text-align:center; line-height:1.35; }
.kh-scale-cap strong { display:block; font-size:14.5px; font-weight:700; color:#223019; }
.kh-scale-cap span   { display:block; font-size:13px; color:#6B7D58; }
.kh-scale-arrow { align-self:center; font-size:22px; color:#9FB585; padding-top:26px; }
.kh-scale-note { max-width:660px; margin:26px auto 0; text-align:center;
                 font-size:15px; line-height:1.6; color:#4A5A3E; }

.kh-langs { display:flex; flex-wrap:wrap; gap:10px; }
.kh-langs span { background:#fff; border:1px solid #E0E9D3; border-radius:999px;
                 padding:9px 17px; font-size:14px; font-weight:600; color:#3A4A2E; }

/* Grid-elemendid ei tohi oma sisust laiemaks venida */
.kh-hero-grid > *, .kh-grid2 > *, .kh-grid3 > *, .kh-roles > *, .kh-footer > * { min-width: 0; }

/* ---- Kohanemine ----------------------------------------------------------- */
@media (max-width:1000px){
  /* .kh-roles jaab 2 veergu kuni 820px-ni — kaks kaarti mahuvad korvuti.
     (See lavi oli varem 1000px, sest rolle oli kolm.) */
  .kh-grid3 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px){
  .kh-pad, .kh-sec { padding-left:22px !important; padding-right:22px !important; }
  /* --- Mobiilisobivus ---
     1) Jaluse tekstilingid on vaikimisi vaid 20px korged - puutesihtmargiks
        liiga vaike. Padding tostab nad ~34px-ni.
     2) Sildid (kh-chip) 11.5px -> 12px, et jaada loetavaks. */
  .kh-footer a { display:inline-block; padding:7px 0; }
  .kh-chip { font-size:12px; }
  .kh-grid2-tiles { grid-template-columns:1fr !important; }
  .kh-scale { gap:14px; }
  .kh-scale-arrow { display:none; }
  .kh-intro { font-size:17px !important; }
  /* Telefonis kaks veergu — kolm oleks "1 986+" jaoks liiga kitsas */
  .kh-stats { grid-template-columns:repeat(2,1fr); gap:22px 18px; }
  .kh-stat strong { font-size:26px; }
  .kh-stat span { font-size:12.5px; }
  /* Mobiilis peidame AINULT sektsioonilingid. Keelevaheti ja CTA-nupp
     peavad jaama nahtavaks — muidu ei saa telefonis keelt vahetada
     ega kontakti juurde liikuda. */
  .kh-navlinks { display:none !important; }
  .kh-nav { gap:12px !important; }
  .kh-btn { padding:11px 18px !important; font-size:14px !important; }
  .kh-hero-grid { grid-template-columns:1fr !important; gap:30px !important; padding:20px 0 56px !important; }
  /* NB: siia EI tohi panna max-width:none — lai hero-pilt venitaks gridi
     viewpordist laiemaks ja sisu loigataks servast ara. */
  .kh-hero-grid img { margin:0 !important; width:100% !important; height:auto !important; }
  .kh-h1 { font-size:33px !important; }
  .kh-grid2 { grid-template-columns:1fr !important; gap:28px !important; }
  .kh-grid3 { grid-template-columns:1fr !important; }
  .kh-roles { grid-template-columns:1fr !important; }
  .kh-footer { grid-template-columns:1fr !important; gap:28px !important; }
  .kh-sec-title { font-size:24px !important; }
  .kh-cta { padding:38px 24px !important; }
}
@media (max-width:430px){
  /* Kitsal telefonil peavad pikad URL-id ja nupusildid murduma. */
  .kh-cta a, .kh-role a { overflow-wrap:anywhere; }
  .kh-role { padding:24px 20px; }
}