/* ==========================================================================
   KP Ettevõtte Tutvustus — style.css
   Navy #032e68 | Orange #e95e23 | White #ffffff
   Fonts: Dosis (pealkirjad) | Nunito (keha)
   ========================================================================== */

/* ---------- Reset ---------- */
.kp-tutvustus,
.kp-tutvustus * {
    box-sizing: border-box;
}

.kp-tutvustus h2 {
    font-family: 'Dosis', sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.kp-tutvustus p {
    font-family: 'Nunito', sans-serif !important;
    line-height: 1.65 !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
}

/* ---------- Buttons ---------- */
.kpt-btn {
    display: inline-block !important;
    padding: 11px 26px !important;
    border-radius: 3px !important;
    font-family: 'Dosis', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0.7px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: background 0.2s, color 0.2s, border-color 0.2s !important;
    cursor: pointer !important;
    line-height: 1 !important;
}

.kpt-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}
.kpt-center { justify-content: center; }

.btn-orange          { background: #e95e23 !important; color: #fff !important; border: 2px solid #e95e23 !important; }
.btn-orange:hover    { background: #c94e1a !important; border-color: #c94e1a !important; }

.btn-navy            { background: #032e68 !important; color: #fff !important; border: 2px solid #032e68 !important; }
.btn-navy:hover      { background: #021e47 !important; }

.btn-white-navy      { background: #fff !important; color: #032e68 !important; border: 2px solid #fff !important; }
.btn-white-navy:hover{ background: #f0f2f5 !important; }

.btn-outline-white      { background: transparent !important; color: #fff !important; border: 2px solid rgba(255,255,255,0.6) !important; }
.btn-outline-white:hover{ border-color: #fff !important; background: rgba(255,255,255,0.1) !important; }

.btn-outline-navy      { background: transparent !important; color: #032e68 !important; border: 2px solid #032e68 !important; }
.btn-outline-navy:hover{ background: #032e68 !important; color: #fff !important; }

/* ---------- Shared helpers ---------- */
.kpt-eyebrow {
    display: block;
    font-family: 'Dosis', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    margin-bottom: 8px;
}
.kpt-orange { color: #e95e23 !important; }


/* ==========================================================================
   VARIANT 1 — Navy + Concentric Rings
   ========================================================================== */
.kp-v1 {
    background: #032e68;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 240px;
    padding: 56px 72px;
}

.kp-v1-text {
    position: relative;
    z-index: 2;
    max-width: 600px;
}
.kp-v1-text h2 { color: #fff !important; font-size: clamp(22px, 3.2vw, 36px) !important; }
.kp-v1-text p  { color: rgba(255,255,255,0.82) !important; font-size: 23px !important; font-weight: 300 !important; max-width: 500px; }

.kp-v1-deco {
    position: absolute;
    right: -50px;
    top: 50%;
    transform: translateY(-50%);
    width: 370px;
    height: 370px;
    pointer-events: none;
    z-index: 1;
}
.kp-v1-deco svg { width: 100%; height: 100%; }


/* ==========================================================================
   VARIANT 2 — Orange + Diagonal Navy Panel
   ========================================================================== */
.kp-v2 {
    background: #e95e23;
    position: relative;
    overflow: hidden;
    min-height: 220px;
    padding: 56px 72px;
    display: flex;
    align-items: center;
}

.kp-v2-diag {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 38%;
    background: #032e68;
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0% 100%);
    z-index: 1;
}
.kp-v2-diag::after {
    content: '';
    position: absolute;
    top: 0; left: 28px; bottom: 0;
    width: 2px;
    background: rgba(255,255,255,0.12);
}

.kp-v2-text {
    position: relative;
    z-index: 2;
    max-width: 580px;
}
.kp-v2-text h2 { color: #fff !important; font-size: clamp(22px, 3.2vw, 36px) !important; }
.kp-v2-text p  { color: rgba(255,255,255,0.88) !important; font-size: 23px !important; font-weight: 300 !important; max-width: 480px; }


/* ==========================================================================
   VARIANT 3 — Split Panel (Navy vasakul / Valge paremal)
   ========================================================================== */
.kp-v3 {
    display: flex;
    min-height: 260px;
    overflow: hidden;
}

.kp-v3-left {
    background: #032e68;
    width: 230px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    text-align: center;
    gap: 16px;
    clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%);
}
.kp-v3-left span {
    font-family: 'Dosis', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: rgba(255,255,255,0.8);
    line-height: 1.3;
}

.kp-v3-right {
    flex: 1;
    background: #fff;
    padding: 50px 56px 50px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #e4e8ef;
    border-left: none;
}
.kp-v3-right h2 { color: #032e68 !important; font-size: clamp(20px, 2.8vw, 30px) !important; text-align: left !important; }
.kp-v3-right p  { color: #444 !important; font-size: 23px !important; font-weight: 300 !important; max-width: 580px; text-align: left !important; }


/* ==========================================================================
   VARIANT 4 — Kerge taust + Gradient äärjeriba
   ========================================================================== */
.kp-v4 {
    background: #f4f6fa;
    padding: 52px 64px;
}

.kp-v4-inner {
    display: flex;
    align-items: center;
    gap: 40px;
}

.kp-v4-bar {
    width: 5px;
    min-height: 170px;
    background: linear-gradient(180deg, #e95e23 0%, #032e68 100%);
    border-radius: 3px;
    flex-shrink: 0;
}

.kp-v4-text { flex: 1; }
.kp-v4-text h2 { color: #032e68 !important; font-size: clamp(20px, 2.8vw, 30px) !important; }
.kp-v4-text p  { color: #555 !important; font-size: 23px !important; font-weight: 300 !important; max-width: 560px; }

.kp-v4-rings {
    position: relative;
    width: 160px;
    height: 160px;
    flex-shrink: 0;
}
.kp-v4-ring {
    position: absolute;
    border-radius: 50%;
}
.kp-v4-ring.r1 { width: 140px; height: 140px; top: 10px; left: 10px; border: 2.5px solid #032e68; opacity: 0.07; }
.kp-v4-ring.r2 { width: 96px;  height: 96px;  top: 32px; left: 32px; border: 2.5px solid #e95e23; opacity: 0.14; }
.kp-v4-ring.r3 { width: 52px;  height: 52px;  top: 54px; left: 54px; border: 2.5px solid #032e68; opacity: 0.18; }


/* ==========================================================================
   VARIANT 5 — Navy + Suur asutamisaasta
   ========================================================================== */
.kp-v5 {
    background: #032e68;
    position: relative;
    overflow: hidden;
    min-height: 220px;
    padding: 56px 72px;
    display: flex;
    align-items: center;
}

.kp-v5-year {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Dosis', sans-serif;
    font-weight: 800;
    font-size: clamp(110px, 16vw, 210px);
    color: rgba(255,255,255,0.045);
    line-height: 1;
    letter-spacing: -6px;
    user-select: none;
    pointer-events: none;
}

.kp-v5-text {
    position: relative;
    z-index: 2;
    max-width: 600px;
}
.kp-v5-since {
    font-family: 'Dosis', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #e95e23;
    margin-bottom: 10px;
}
.kp-v5-text h2 { color: #fff !important; font-size: clamp(22px, 3.2vw, 36px) !important; }
.kp-v5-text p  { color: rgba(255,255,255,0.8) !important; font-size: 23px !important; font-weight: 300 !important; }


/* ==========================================================================
   VARIANT 6 — Valge taust, tsentreeritud
   ========================================================================== */
.kp-v6 {
    background: #fff;
    padding: 72px 60px;
    text-align: center;
}

.kp-v6-inner {
    max-width: 720px;
    margin: 0 auto;
}

.kp-v6-dot {
    width: 10px;
    height: 10px;
    background: #e95e23;
    border-radius: 50%;
    margin: 0 auto 20px;
}

.kp-v6 h2 { color: #032e68 !important; font-size: clamp(22px, 3.2vw, 36px) !important; }

.kp-v6-rule {
    width: 72px;
    height: 2px;
    background: rgba(3,46,104,0.14);
    margin: 18px auto;
    border-radius: 1px;
}

.kp-v6 p { color: #555 !important; font-size: 23px !important; font-weight: 300 !important; font-weight: 300 !important; line-height: 1.7 !important; }


/* ==========================================================================
   VARIANT 7 — Oranž noolpaneel + Valge
   ========================================================================== */
.kp-v7 {
    display: flex;
    min-height: 260px;
    overflow: hidden;
}

.kp-v7-left {
    background: #e95e23;
    width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 14px;
    text-align: center;
    gap: 14px;
    clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%);
}
.kp-v7-left span {
    font-family: 'Dosis', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: rgba(255,255,255,0.92);
    letter-spacing: 1px;
}

.kp-v7-right {
    flex: 1;
    background: #fff;
    padding: 50px 56px 50px 76px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #e4e8ef;
    border-left: none;
}
.kp-v7-right h2 { color: #032e68 !important; font-size: clamp(20px, 2.8vw, 30px) !important; text-align: left !important; }
.kp-v7-right p  { color: #444 !important; font-size: 23px !important; font-weight: 300 !important; max-width: 580px; text-align: left !important; }


/* ==========================================================================
   VARIANT 8 — Navy hero + statistika riba
   ========================================================================== */
.kp-v8 { overflow: hidden; }

.kp-v8-top {
    background: #032e68;
    padding: 56px 72px 48px;
}
.kp-v8-top h2 { color: #fff !important; font-size: clamp(22px, 3.2vw, 34px) !important; max-width: 680px; }
.kp-v8-top p  { color: rgba(255,255,255,0.8) !important; font-size: 23px !important; font-weight: 300 !important; max-width: 600px; }

.kp-v8-stats {
    display: flex;
    background: #fff;
    border-top: 3px solid #e95e23;
    box-shadow: 0 4px 12px rgba(3,46,104,0.08);
}
.kp-v8-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 22px 16px;
    border-right: 1px solid #e4e8ef;
}
.kp-v8-stat:last-child { border-right: none; }

.kp-v8-num {
    font-family: 'Dosis', sans-serif;
    font-weight: 700;
    font-size: 36px;
    color: #e95e23;
    line-height: 1;
    margin-bottom: 5px;
}
.kp-v8-lbl {
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    color: #032e68;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
}


/* ==========================================================================
   VARIANT 9 — Diagonaalne oranž / navy lõige
   ========================================================================== */
.kp-v9 {
    background: #032e68;
    position: relative;
    overflow: hidden;
    min-height: 240px;
    padding: 56px 72px;
    display: flex;
    align-items: center;
}

.kp-v9-orange {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 44%;
    background: #e95e23;
    clip-path: polygon(24% 0, 100% 0, 100% 100%, 0% 100%);
    z-index: 1;
}
.kp-v9-orange::before {
    content: '';
    position: absolute;
    top: 0; left: 36px; bottom: 0;
    width: 2px;
    background: rgba(255,255,255,0.18);
}

.kp-v9-text {
    position: relative;
    z-index: 2;
    max-width: 550px;
}
.kp-v9-text h2 { color: #fff !important; font-size: clamp(22px, 3.2vw, 34px) !important; }
.kp-v9-text p  { color: rgba(255,255,255,0.85) !important; font-size: 23px !important; font-weight: 300 !important; max-width: 480px; }


/* ==========================================================================
   VARIANT 10 — Kerge taust, äärtest kaart
   ========================================================================== */
.kp-v10 {
    background: #edf1f8;
    padding: 40px 50px;
}

.kp-v10-card {
    background: #fff;
    position: relative;
    box-shadow: 0 4px 24px rgba(3,46,104,0.1), 0 1px 4px rgba(3,46,104,0.06);
    border-radius: 2px;
}

.kp-v10-corner {
    position: absolute;
    width: 48px;
    height: 48px;
    display: block;
}
.kp-c-tl { top: -3px; left: -3px; border-top: 4px solid #e95e23; border-left: 4px solid #e95e23; }
.kp-c-br { bottom: -3px; right: -3px; border-bottom: 4px solid #032e68; border-right: 4px solid #032e68; }

.kp-v10-inner { padding: 50px 60px; }

.kp-v10-badge {
    display: inline-block;
    background: #032e68;
    color: #fff;
    font-family: 'Dosis', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 2px;
    margin-bottom: 14px;
}
.kp-v10-inner h2 { color: #032e68 !important; font-size: clamp(20px, 2.8vw, 30px) !important; }
.kp-v10-inner p  { color: #555 !important; font-size: 23px !important; font-weight: 300 !important; max-width: 640px; }


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
    /* Dark-bg variants — lühenda küljepooled */
    .kp-v1, .kp-v2, .kp-v5, .kp-v9 { padding: 44px 36px; }
    .kp-v8-top { padding: 44px 36px 36px; }
}

@media (max-width: 680px) {
    /* Tumedad taustaga variandid */
    .kp-v1, .kp-v2, .kp-v5, .kp-v9 { padding: 40px 24px; }

    /* Peidetud dekoratiivelementid */
    .kp-v1-deco  { display: none; }
    .kp-v2-diag  { display: none; }
    .kp-v4-rings { display: none; }
    .kp-v9-orange{ display: none; }

    /* Aasta — väiksem font */
    .kp-v5-year  { font-size: 90px; right: 0; letter-spacing: -2px; }

    /* Split-variandid — stack vertically */
    .kp-v3, .kp-v7 { flex-direction: column; }

    .kp-v3-left, .kp-v7-left {
        width: 100%;
        clip-path: none;
        padding: 28px 24px;
    }
    .kp-v3-right {
        padding: 30px 24px;
        border: none;
        border-top: 1px solid #e4e8ef;
    }
    .kp-v7-right {
        padding: 30px 24px;
        border: none;
        border-top: 3px solid #e95e23;
    }

    /* V4 */
    .kp-v4 { padding: 32px 24px; }
    .kp-v4-inner { flex-direction: column; align-items: flex-start; gap: 0; }
    .kp-v4-bar {
        width: 52px;
        min-height: 0;
        height: 4px;
        background: linear-gradient(90deg, #e95e23, #032e68);
        margin-bottom: 20px;
    }

    /* V6 */
    .kp-v6 { padding: 48px 24px; }

    /* V8 stats */
    .kp-v8-top { padding: 40px 24px 32px; }
    .kp-v8-stats { flex-direction: column; }
    .kp-v8-stat { border-right: none; border-bottom: 1px solid #e4e8ef; }
    .kp-v8-stat:last-child { border-bottom: none; }

    /* V10 */
    .kp-v10 { padding: 20px; }
    .kp-v10-inner { padding: 28px 20px; }
}