/* ==========================================================================
   KP Teenuste Sisu — style.css  v1.4.1
   Navy #032e68 | Orange #e95e23 | White #ffffff
   Responsive: 1200 / 960 / 768 / 540 / 480
   ========================================================================== */

/* ── Reset & base ─────────────────────────────────────────────────── */
.kp-teenused, .kp-teenused * { box-sizing: border-box; }

.kp-teenused h3,
.kp-teenused h1 {
    font-family: 'Barlow Condensed', 'Dosis', sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    color: #032e68 !important;
    text-align: left !important;
    text-transform: none !important;
}

.kp-teenused p {
    font-family: 'Barlow', 'Nunito', sans-serif !important;
    font-size: clamp(15px, 1.7vw, 18px) !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    color: #444 !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    text-align: left !important;
}

.kp-teenused img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none !important;
    box-shadow: none !important;
}

/* ── Ikooniring ───────────────────────────────────────────────────── */
.kp-teen-icon-wrap {
    background: #032e68;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff !important;
    width: 52px;
    height: 52px;
}
.kp-icon-lg { width: 68px; height: 68px; }
.kp-icon-sm { width: 36px; height: 36px; }

/* ── Pädevusloend ─────────────────────────────────────────────────── */
.kp-teen-padevus {
    margin: 10px 0 14px !important;
    padding: 0 !important;
    list-style: none !important;
}
.kp-teen-padevus li {
    font-family: 'Barlow', 'Nunito', sans-serif;
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 400;
    color: #555;
    padding: 4px 0 4px 18px;
    position: relative;
    text-align: left !important;
    list-style: none !important;
}
.kp-teen-padevus li::before {
    content: '';
    position: absolute;
    left: 0; top: 11px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #e95e23;
}
.kp-padevus-2col { columns: 2; column-gap: 24px; }
@media (max-width: 480px) {
    .kp-padevus-2col { columns: 1; }
}

/* ── Nupud ────────────────────────────────────────────────────────── */
.kp-teen-btn {
    display: inline-block !important;
    align-self: flex-start !important;
    width: auto !important;
    max-width: fit-content !important;
    background: #e95e23 !important;
    color: #fff !important;
    font-family: 'Barlow Condensed', 'Dosis', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 10px 24px !important;
    border-radius: 3px !important;
    border: none !important;
    transition: background .2s !important;
    margin-top: 8px !important;
    cursor: pointer !important;
}
.kp-teen-btn:hover { background: #c94e1a !important; color: #fff !important; }

.kp-teen-btn.kp-cta-popup-trigger {
    display: inline-flex !important;
    align-items: center !important;
    align-self: flex-start !important;
    width: auto !important;
    max-width: fit-content !important;
    margin-left: 0 !important;
    margin-top: 16px !important;
}
.kp-teen-kontakt-wrap {
    display: block !important;
    text-align: left !important;
    width: 100% !important;
}

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

.kp-teen-textlink {
    display: inline-block !important;
    font-family: 'Barlow Condensed', 'Dosis', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #e95e23 !important;
    text-decoration: none !important;
    margin-top: 8px !important;
    border-bottom: 1px solid transparent !important;
    transition: border-color .2s !important;
}
.kp-teen-textlink:hover { border-bottom-color: #e95e23 !important; }


/* ==========================================================================
   ÜKSIK TEENUS — slug täissisu paigutus
   ========================================================================== */
.kp-teen-single { width: 100%; }

.kp-single-hero {
    width: 100%;
    aspect-ratio: 21 / 7;
    min-height: 200px;
    max-height: 480px;
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 32px;
    position: relative;
}
.kp-single-hero img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

.kp-single-title-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
    padding: 0 24px 22px;
    border-bottom: 2px solid #e4e8ef;
}

.kp-teen-single h1 {
    font-family: 'Barlow Condensed', 'Dosis', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(24px, 3.5vw, 40px) !important;
    color: #032e68 !important;
    line-height: 1.15 !important;
    margin: 0 !important; padding: 0 !important;
    text-align: left !important;
    text-transform: none !important;
}

.kp-single-body {
    width: 100%;
    padding: 0 24px;
    box-sizing: border-box;
}

.kp-single-2col {
    display: grid;
    grid-template-columns: 1fr clamp(260px, 28%, 340px);
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
}

.kp-single-text p {
    font-size: clamp(15px, 1.7vw, 18px) !important;
    line-height: 1.7 !important;
    color: #444 !important;
}

.kp-single-padevus-wrap {
    background: #f4f7fc;
    border-radius: 4px;
    border-left: 4px solid #e95e23;
    padding: clamp(16px, 2.5vw, 24px);
    position: sticky;
    top: 100px;
}
.kp-single-padevus-title {
    font-family: 'Barlow Condensed', 'Dosis', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #032e68;
    margin-bottom: 12px;
}
.kp-single-padevus-wrap .kp-teen-padevus { margin: 0 !important; columns: 1; }
.kp-single-padevus-wrap .kp-teen-padevus li {
    padding: 5px 0 5px 18px;
    border-bottom: 1px solid rgba(3,46,104,.07);
}
.kp-single-padevus-wrap .kp-teen-padevus li:last-child { border-bottom: none; }

@media (max-width: 900px) {
    .kp-single-2col { grid-template-columns: 1fr; gap: 24px; }
    .kp-single-padevus-wrap { position: static; }
    .kp-single-padevus-wrap .kp-teen-padevus { columns: 2; }
    .kp-single-hero { aspect-ratio: 16/5; }
}
@media (max-width: 540px) {
    .kp-single-hero { aspect-ratio: 16/6; border-radius: 4px; margin-bottom: 20px; }
    .kp-single-title-row { gap: 12px; margin-bottom: 18px; padding-bottom: 14px; }
    .kp-single-padevus-wrap .kp-teen-padevus { columns: 1; }
}


/* ==========================================================================
   VARIANT 1 — Kaardid (3-veerg → 2 → 1)
   ========================================================================== */
.kp-teen-v1 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: clamp(14px, 2vw, 24px);
}

.kp-teen-card {
    background: #fff;
    border: 1px solid #e4e8ef;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .2s, box-shadow .2s;
}
.kp-teen-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(3,46,104,.12);
}

.kp-card-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}
.kp-card-img img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.kp-teen-card:hover .kp-card-img img { transform: scale(1.04); }

.kp-teen-card-inner {
    padding: clamp(16px, 2.5vw, 22px);
    display: flex;
    flex-direction: column;
    flex: 1;
}
.kp-teen-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.kp-teen-num {
    font-family: 'Barlow Condensed', 'Dosis', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: rgba(3,46,104,.1);
    line-height: 1;
}
.kp-teen-card-rule {
    width: 32px; height: 3px;
    background: #e95e23;
    border-radius: 2px;
    margin-bottom: 10px;
}
.kp-teen-card h3,
.kp-teen-card h1 { font-size: clamp(16px, 1.6vw, 19px) !important; }
.kp-teen-card p  { font-size: clamp(14px, 1.5vw, 16px) !important; flex: 1; }
.kp-teen-card .kp-teen-padevus li { font-size: 13px; }

/* Solo V1 — horisontaalne kaart */
.kp-teen-v1.kp-solo { grid-template-columns: 1fr; }
.kp-teen-v1.kp-solo .kp-teen-card { flex-direction: row; }
.kp-teen-v1.kp-solo .kp-card-img {
    width: clamp(200px, 36%, 420px);
    aspect-ratio: auto;
    min-height: 220px;
    flex-shrink: 0;
}
.kp-teen-v1.kp-solo .kp-teen-card-inner { flex: 1; }

@media (max-width: 540px) {
    .kp-teen-v1.kp-solo .kp-teen-card { flex-direction: column; }
    .kp-teen-v1.kp-solo .kp-card-img { width: 100%; aspect-ratio: 16/9; min-height: 0; }
}


/* ==========================================================================
   VARIANT 2 — Numereeritud loend (2-veerg → 1)
   ========================================================================== */
.kp-teen-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
}

.kp-teen-num-item {
    display: flex;
    gap: 20px;
    padding: clamp(20px, 3.5vw, 36px) clamp(18px, 3.5vw, 32px);
    border-bottom: 1px solid #e4e8ef;
    border-right: 1px solid #e4e8ef;
    align-items: flex-start;
}
.kp-teen-num-item:nth-child(even) { border-right: none; }
.kp-teen-num-item:last-child { border-bottom: none; }
.kp-teen-num-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }

.kp-teen-big-num {
    font-family: 'Barlow Condensed', 'Dosis', sans-serif;
    font-weight: 800;
    font-size: clamp(48px, 5vw, 64px);
    line-height: 1;
    color: #e95e23;
    opacity: .22;
    flex-shrink: 0;
    width: clamp(54px, 6vw, 72px);
    text-align: right;
    margin-top: -4px;
}

.kp-teen-num-body { flex: 1; overflow: hidden; }
.kp-teen-num-body h3,
.kp-teen-num-body h1 { font-size: clamp(16px, 1.8vw, 20px) !important; }

.kp-num-img {
    float: right;
    width: clamp(100px, 14vw, 160px);
    aspect-ratio: 3/2;
    overflow: hidden;
    border-radius: 3px;
    margin: 0 0 10px 16px;
    flex-shrink: 0;
    position: relative;
}
.kp-num-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Solo V2 */
.kp-teen-v2.kp-solo { grid-template-columns: 1fr; }
.kp-teen-v2.kp-solo .kp-teen-num-item {
    border-right: none !important;
    border-bottom: none !important;
    padding: clamp(24px, 4vw, 48px);
}
.kp-teen-v2.kp-solo .kp-teen-big-num { font-size: clamp(64px, 7vw, 90px); width: clamp(72px, 9vw, 100px); }

@media (max-width: 540px) {
    .kp-teen-v2 { grid-template-columns: 1fr; }
    .kp-teen-num-item { border-right: none !important; }
    .kp-teen-num-item:nth-last-child(2) { border-bottom: 1px solid #e4e8ef; }
    .kp-num-img {
        float: none;
        width: 100%;
        aspect-ratio: 16/7;
        margin: 0 0 14px 0;
    }
}


/* ==========================================================================
   VARIANT 3 — Ikoonidega read
   ========================================================================== */
.kp-teen-v3 { border-top: 1px solid #e4e8ef; }

.kp-teen-row {
    display: flex;
    gap: clamp(20px, 3.5vw, 40px);
    align-items: flex-start;
    padding: clamp(24px, 4vw, 40px) clamp(20px, 4.5vw, 48px);
    border-bottom: 1px solid #e4e8ef;
    background: #fff;
}
.kp-teen-row-alt { background: #f6f8fb; }
.kp-teen-row:last-child { border-bottom: none; }
.kp-teen-row-icon { flex-shrink: 0; }

.kp-teen-row-img {
    width: clamp(160px, 22vw, 280px);
    aspect-ratio: 4/3;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}
.kp-teen-row-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.kp-teen-row-body { flex: 1; }
.kp-teen-row-body h3,
.kp-teen-row-body h1 { font-size: clamp(17px, 2vw, 22px) !important; }
.kp-teen-row-body p  { max-width: 680px; }

/* Solo V3 */
.kp-teen-v3.kp-solo .kp-teen-row { border-bottom: none; }
.kp-teen-v3.kp-solo .kp-teen-row-img { width: clamp(220px, 30vw, 380px); aspect-ratio: 4/3; }

@media (max-width: 680px) {
    .kp-teen-row { flex-direction: column; gap: 16px; }
    .kp-teen-row-img { width: 100%; aspect-ratio: 16/9; }
}
@media (max-width: 540px) {
    .kp-teen-row { padding: 22px 18px; }
}


/* ==========================================================================
   VARIANT 4 — Akordeon
   ========================================================================== */
.kp-teen-v4 { border: 1px solid #e4e8ef; border-radius: 4px; overflow: hidden; }

.kp-acc-item { border-bottom: 1px solid #e4e8ef; }
.kp-acc-item:last-child { border-bottom: none; }

.kp-acc-header {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: clamp(14px, 2vw, 18px) clamp(16px, 2.5vw, 24px) !important;
    background: #fff !important;
    border: none !important;
    cursor: pointer !important;
    text-align: left !important;
    transition: background .15s !important;
    gap: 14px !important;
    font-size: inherit !important;
}
.kp-acc-header:hover { background: #f6f8fb !important; }
.kp-acc-item.kp-acc-open .kp-acc-header {
    background: #032e68 !important;
    border-left: 4px solid #e95e23 !important;
}
.kp-acc-item.kp-acc-open .kp-teen-icon-wrap { background: rgba(255,255,255,.15) !important; }

.kp-acc-left { display: flex; align-items: center; gap: 12px; }
.kp-acc-num {
    font-family: 'Barlow Condensed', 'Dosis', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: rgba(3,46,104,.4);
    min-width: 22px;
}
.kp-acc-item.kp-acc-open .kp-acc-num { color: rgba(255,255,255,.5); }
.kp-acc-title {
    font-family: 'Barlow Condensed', 'Dosis', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(16px, 1.8vw, 19px) !important;
    color: #032e68 !important;
    line-height: 1.2 !important;
}
.kp-acc-item.kp-acc-open .kp-acc-title { color: #fff !important; }

.kp-acc-chevron {
    width: 20px; height: 20px;
    flex-shrink: 0;
    position: relative;
    border-radius: 50%;
    border: 1.5px solid rgba(3,46,104,.2);
    transition: border-color .15s;
}
.kp-acc-chevron::before, .kp-acc-chevron::after {
    content: '';
    position: absolute;
    background: #032e68;
    border-radius: 1px;
    top: 50%; left: 50%;
    transition: background .15s;
}
.kp-acc-chevron::before { width: 8px; height: 1.5px; margin: -.75px 0 0 -4px; }
.kp-acc-chevron::after  { width: 1.5px; height: 8px; margin: -4px 0 0 -.75px; transition: transform .2s, background .15s; }
.kp-acc-item.kp-acc-open .kp-acc-chevron { border-color: rgba(255,255,255,.4); }
.kp-acc-item.kp-acc-open .kp-acc-chevron::before,
.kp-acc-item.kp-acc-open .kp-acc-chevron::after { background: #fff; }
.kp-acc-item.kp-acc-open .kp-acc-chevron::after { transform: scaleY(0); }

.kp-acc-body {
    padding: clamp(18px, 3vw, 28px) clamp(18px, 3vw, 32px);
    background: #f8f9fc;
    border-top: 1px solid #e4e8ef;
    overflow: hidden;
}
.kp-acc-body[hidden] { display: none !important; }
.kp-acc-body p { max-width: 760px; }
.kp-acc-body::after { content: ''; display: table; clear: both; }

.kp-acc-img {
    float: right;
    width: clamp(180px, 25vw, 300px);
    aspect-ratio: 3/2;
    border-radius: 4px;
    overflow: hidden;
    margin: 0 0 18px clamp(18px, 2.5vw, 32px);
    position: relative;
}
.kp-acc-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Solo V4 */
.kp-teen-v4.kp-solo .kp-acc-item { border-bottom: none; }
.kp-teen-v4.kp-solo .kp-acc-img { width: clamp(240px, 30vw, 380px); }

@media (max-width: 540px) {
    .kp-acc-img {
        float: none;
        width: 100%;
        aspect-ratio: 16/7;
        margin: 0 0 14px 0;
    }
}


/* ==========================================================================
   VARIANT 5 — Vahekaardid
   ========================================================================== */
.kp-teen-v5 { border: 1px solid #e4e8ef; border-radius: 4px; overflow: hidden; }

.kp-tab-nav {
    display: flex;
    overflow-x: auto;
    background: #f4f6fa;
    border-bottom: 2px solid #e4e8ef;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.kp-tab-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
    padding: clamp(10px, 1.8vw, 16px) clamp(12px, 1.8vw, 18px) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    color: #032e68 !important;
    transition: background .15s, border-color .15s !important;
    margin-bottom: -2px !important;
}
.kp-tab-btn:hover { background: #edf0f5 !important; }
.kp-tab-btn.kp-tab-active {
    background: #032e68 !important;
    border-bottom-color: #e95e23 !important;
    color: #fff !important;
}
.kp-tab-icon { display: flex; align-items: center; justify-content: center; }
.kp-tab-label {
    font-family: 'Barlow Condensed', 'Dosis', sans-serif;
    font-weight: 600;
    font-size: clamp(11px, 1.2vw, 13px);
    line-height: 1.2;
    max-width: 100px;
    text-align: center;
    white-space: normal;
}

.kp-tab-panels { background: #fff; }

.kp-tab-panel {
    display: flex;
    gap: clamp(20px, 3.5vw, 40px);
    align-items: flex-start;
    padding: clamp(24px, 4vw, 40px) clamp(20px, 4.5vw, 44px);
}
.kp-tab-panel[hidden] { display: none !important; }

.kp-tab-panel-icon { flex-shrink: 0; color: #032e68; margin-top: 4px; }

.kp-tab-panel-img {
    width: clamp(200px, 28vw, 320px);
    aspect-ratio: 4/3;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}
.kp-tab-panel-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.kp-tab-panel-body { flex: 1; }
.kp-tab-panel-body h3,
.kp-tab-panel-body h1 { font-size: clamp(18px, 2.2vw, 24px) !important; }
.kp-tab-panel-body p  { max-width: 680px; }

/* Solo V5 — peida tabbar */
.kp-teen-v5.kp-solo .kp-tab-nav { display: none; }
.kp-teen-v5.kp-solo .kp-tab-panel { border-top: none; padding: 0; }
.kp-teen-v5.kp-solo .kp-tab-panel-img { width: clamp(240px, 35vw, 420px); }

@media (max-width: 680px) {
    .kp-tab-panel { flex-direction: column; }
    .kp-tab-panel-img { width: 100%; aspect-ratio: 16/9; }
    .kp-teen-v5.kp-solo .kp-tab-panel-img { width: 100%; }
}
@media (max-width: 480px) {
    .kp-tab-label { max-width: 70px; font-size: 11px; }
}


/* ==========================================================================
   VARIANT 6 — Vahelduvad suured read (pilt 55% | tekst)
   ========================================================================== */
.kp-teen-v6 { border-top: 1px solid #e4e8ef; }

.kp-v6-row {
    display: flex;
    border-bottom: 1px solid #e4e8ef;
    overflow: hidden;
}
.kp-v6-row:last-child { border-bottom: none; }
.kp-v6-flip { flex-direction: row-reverse; }

.kp-v6-img-side {
    width: 52%;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    background: #d8e2ef;
    min-height: clamp(280px, 35vw, 520px);
}
.kp-v6-img-side img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.kp-v6-row:hover .kp-v6-img-side img { transform: scale(1.03); }

.kp-v6-no-img {
    width: 100%; height: 100%;
    background: #032e68;
    display: flex; align-items: center; justify-content: center;
}

.kp-v6-content {
    flex: 1;
    padding: clamp(32px, 5vw, 56px) clamp(24px, 5.5vw, 60px);
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.kp-v6-flip .kp-v6-content { background: #f6f8fb; }
.kp-v6-content .kp-teen-icon-wrap { margin-bottom: 14px; }
.kp-v6-content h3,
.kp-v6-content h1 { font-size: clamp(19px, 2.2vw, 28px) !important; }
.kp-v6-content p  { max-width: 500px; }

/* Solo V6 */
.kp-teen-v6.kp-solo .kp-v6-row {
    border-bottom: none;
    min-height: clamp(380px, calc(100vh - 240px), 95vh);
}
@media (min-width: 601px) {
    .kp-teen-v6.kp-solo .kp-v6-img-side { min-height: 0; }
}

@media (max-width: 768px) {
    .kp-v6-img-side { width: 48%; min-height: clamp(200px, 26vw, 360px); }
    .kp-v6-content { padding: clamp(24px, 4vw, 40px) clamp(20px, 4vw, 40px); }
}
@media (max-width: 600px) {
    .kp-v6-row { flex-direction: column !important; }
    .kp-v6-img-side,
    .kp-teen-v6.kp-solo .kp-v6-img-side {
        width: 100%;
        min-height: 0;
        aspect-ratio: 16/8;
    }
    .kp-v6-content { padding: 28px 22px; }
}


/* ==========================================================================
   VARIANT 7 — Pilditaustaga kaardid
   ========================================================================== */
.kp-teen-v7 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: clamp(12px, 1.8vw, 20px);
}

.kp-v7-card {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    aspect-ratio: 3/4;
    min-height: 240px;
    background: #032e68;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    transition: transform .2s;
    cursor: default;
}
.kp-v7-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(3,46,104,.22); }
.kp-v7-card.kp-v7-has-img:hover { background-size: 107%; }

.kp-v7-card::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top,
        rgba(3,46,104,.95) 0%,
        rgba(3,46,104,.6) 50%,
        rgba(3,46,104,.2) 100%);
    z-index: 1;
    transition: opacity .2s;
}

.kp-v7-inner {
    position: relative; z-index: 2;
    padding: clamp(18px, 2.5vw, 24px);
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: flex-end;
}
.kp-v7-icon { background: #e95e23 !important; margin-bottom: 12px; align-self: flex-start; }
.kp-v7-card h3,
.kp-v7-card h1 { color: #fff !important; font-size: clamp(16px, 1.7vw, 20px) !important; }
.kp-v7-card p  { color: rgba(255,255,255,.82) !important; font-size: clamp(14px, 1.5vw, 16px) !important; }
.kp-v7-card .kp-teen-padevus li { color: rgba(255,255,255,.75); }
.kp-v7-card .kp-teen-padevus li::before { background: #e95e23; }
.kp-link-white { color: rgba(255,255,255,.85) !important; border-bottom-color: rgba(255,255,255,.3) !important; }
.kp-link-white:hover { color: #fff !important; border-bottom-color: #e95e23 !important; }

/* Solo V7 */
.kp-teen-v7.kp-solo { grid-template-columns: 1fr; }
.kp-teen-v7.kp-solo .kp-v7-card {
    aspect-ratio: auto;
    min-height: clamp(380px, calc(100vh - 240px), 95vh);
}
.kp-teen-v7.kp-solo .kp-v7-inner { justify-content: flex-end; }
.kp-teen-v7.kp-solo .kp-v7-card h3,
.kp-teen-v7.kp-solo .kp-v7-card h1 { font-size: clamp(22px, 3vw, 36px) !important; }


/* ==========================================================================
   VARIANT 8 — Kompaktne 2-veeru loend
   ========================================================================== */
.kp-teen-v8 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    border: 1px solid #e4e8ef;
    border-radius: 4px;
    overflow: hidden;
}

.kp-v8-item {
    display: flex;
    gap: 16px;
    padding: clamp(20px, 2.8vw, 28px) clamp(18px, 3vw, 30px);
    border-right: 1px solid #e4e8ef;
    border-bottom: 1px solid #e4e8ef;
    align-items: flex-start;
    background: #fff;
    transition: background .15s;
}
.kp-v8-item:hover { background: #f8f9fc; }
.kp-v8-item:nth-child(even) { border-right: none; }
.kp-v8-item.kp-v8-last { border-bottom: none; }

.kp-v8-text { flex: 1; }
.kp-v8-text h3,
.kp-v8-text h1 { font-size: clamp(15px, 1.5vw, 17px) !important; margin-bottom: 6px !important; }
.kp-v8-text p  { font-size: clamp(14px, 1.5vw, 16px) !important; margin-bottom: 8px !important; }
.kp-v8-text .kp-teen-padevus li { font-size: 13px; }

/* Solo V8 */
.kp-teen-v8.kp-solo { grid-template-columns: 1fr; }
.kp-teen-v8.kp-solo .kp-v8-item { border-right: none !important; border-bottom: none; }

@media (max-width: 540px) {
    .kp-teen-v8 { grid-template-columns: 1fr; }
    .kp-v8-item { border-right: none !important; }
}


/* ==========================================================================
   VARIANT 9 — Navy (alati vasak) / Pilt paremal
   ========================================================================== */
.kp-v9-row {
    display: flex;
    border-bottom: 1px solid rgba(255,255,255,.07);
    overflow: hidden;
}
.kp-v9-row:last-child { border-bottom: none; }

.kp-v9-text {
    width: 50%;
    flex-shrink: 0;
    background: #032e68;
    padding: clamp(32px, 5.5vw, 64px) clamp(24px, 6vw, 72px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.kp-v9-icon { background: #e95e23 !important; margin-bottom: 18px; align-self: flex-start; }
.kp-v9-text h3,
.kp-v9-text h1 { color: #fff !important; font-size: clamp(20px, 2.5vw, 32px) !important; margin-bottom: 12px !important; }
.kp-v9-text p  { color: rgba(255,255,255,.82) !important; max-width: 480px; }
.kp-v9-text .kp-teen-padevus li { color: rgba(255,255,255,.75); }
.kp-v9-text .kp-teen-padevus li::before { background: #e95e23; }

.kp-v9-img {
    flex: 1;
    overflow: hidden;
    position: relative;
    background: #1a3d6e;
    min-height: clamp(300px, 36vw, 520px);
}
.kp-v9-img img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.kp-v9-row:hover .kp-v9-img img { transform: scale(1.03); }
.kp-v9-no-img {
    width: 100%; height: 100%;
    background: #1a3d6e;
    display: flex; align-items: center; justify-content: center;
}

.kp-teen-v9.kp-solo .kp-v9-row {
    border-bottom: none;
    min-height: clamp(380px, calc(100vh - 240px), 95vh);
}
@media (min-width: 581px) {
    .kp-teen-v9.kp-solo .kp-v9-img { min-height: 0; }
}

@media (max-width: 768px) {
    .kp-v9-text { width: 52%; padding: clamp(24px, 4vw, 44px) clamp(20px, 4vw, 44px); }
}
@media (max-width: 580px) {
    .kp-v9-row { flex-direction: column; }
    /* DOM-is on tekst enne pilti (see variant kuvab teksti alati vasakul
       desktopil) — mobiilis peab pilt aga esimesena olema, seega tõstame
       selle visuaalselt ette ilma DOM-i muutmata. */
    .kp-v9-img { order: -1; }
    .kp-v9-text { width: 100%; padding: clamp(28px, 6vw, 40px) clamp(20px, 6vw, 32px); }
    .kp-v9-img,
    .kp-teen-v9.kp-solo .kp-v9-img {
        min-height: 0;
        aspect-ratio: 16/9;
    }
}


/* ==========================================================================
   VARIANT 10 — Pilt vasakul / Valge tekst paremal (vahelduv)
   ========================================================================== */
.kp-v10-row {
    display: flex;
    border-bottom: 1px solid #e4e8ef;
    overflow: hidden;
    background: #fff;
}
.kp-v10-row.kp-v10-alt { background: #f6f8fb; }
.kp-v10-row:last-child { border-bottom: none; }

.kp-v10-img {
    width: 50%;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    background: #d8e2ef;
    min-height: clamp(300px, 36vw, 520px);
}
.kp-v10-img img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.kp-v10-row:hover .kp-v10-img img { transform: scale(1.03); }
.kp-v10-no-img {
    width: 100%; height: 100%;
    background: #032e68;
    display: flex; align-items: center; justify-content: center;
}

.kp-v10-text {
    flex: 1;
    padding: clamp(32px, 5.5vw, 64px) clamp(24px, 6vw, 72px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.kp-v10-icon { background: #032e68 !important; margin-bottom: 18px; align-self: flex-start; }
.kp-v10-text h3,
.kp-v10-text h1 { color: #032e68 !important; font-size: clamp(20px, 2.5vw, 32px) !important; margin-bottom: 12px !important; }
.kp-v10-text p  { color: #444 !important; max-width: 480px; }

.kp-teen-v10.kp-solo .kp-v10-row {
    border-bottom: none;
    min-height: clamp(380px, calc(100vh - 240px), 95vh);
}
@media (min-width: 581px) {
    .kp-teen-v10.kp-solo .kp-v10-img { min-height: 0; }
}

@media (max-width: 768px) {
    .kp-v10-img { width: 48%; min-height: clamp(200px, 26vw, 380px); }
    .kp-v10-text { padding: clamp(24px, 4vw, 44px) clamp(20px, 4vw, 40px); }
}
@media (max-width: 580px) {
    .kp-v10-row { flex-direction: column; }
    .kp-v10-img,
    .kp-teen-v10.kp-solo .kp-v10-img {
        width: 100%;
        min-height: 0;
        aspect-ratio: 16/9;
    }
    .kp-v10-text { padding: clamp(28px, 6vw, 40px) clamp(20px, 6vw, 32px); }
}


/* ==========================================================================
   VARIANT 11 — 50/50 oranži keskvooniga
   ========================================================================== */
.kp-v11-row {
    display: flex;
    border-bottom: 1px solid #e4e8ef;
    overflow: hidden;
    position: relative;
}
.kp-v11-row:last-child { border-bottom: none; }
.kp-v11-flip { flex-direction: row-reverse; }

/* Oranž vertikaalvoon */
.kp-v11-row::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: calc(50% - 2px);
    width: 4px;
    background: #e95e23;
    z-index: 3;
}
.kp-v11-flip::after { left: auto; right: calc(50% - 2px); }

.kp-v11-img {
    width: 50%;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    background: #d8e2ef;
    min-height: clamp(300px, 36vw, 520px);
}
.kp-v11-img img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.kp-v11-row:hover .kp-v11-img img { transform: scale(1.03); }
.kp-v11-no-img {
    width: 100%; height: 100%;
    background: #032e68;
    display: flex; align-items: center; justify-content: center;
}

.kp-v11-text {
    flex: 1;
    padding: clamp(32px, 5.5vw, 60px) clamp(24px, 6vw, 64px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
}
.kp-v11-flip .kp-v11-text { background: #f4f7fc; }
.kp-v11-icon { background: #e95e23 !important; margin-bottom: 16px; align-self: flex-start; }
.kp-v11-text h3,
.kp-v11-text h1 { color: #032e68 !important; font-size: clamp(20px, 2.5vw, 32px) !important; margin-bottom: 12px !important; }
.kp-v11-text p  { color: #444 !important; max-width: 480px; }

.kp-teen-v11.kp-solo .kp-v11-row {
    border-bottom: none;
    min-height: clamp(380px, calc(100vh - 240px), 95vh);
}
@media (min-width: 581px) {
    .kp-teen-v11.kp-solo .kp-v11-img { min-height: 0; }
}

@media (max-width: 768px) {
    .kp-v11-img { width: 50%; min-height: clamp(200px, 26vw, 380px); }
    .kp-v11-text { padding: clamp(24px, 4vw, 44px) clamp(18px, 4vw, 40px); }
}
@media (max-width: 580px) {
    .kp-v11-row { flex-direction: column !important; }
    .kp-v11-row::after { display: none; }
    .kp-v11-img,
    .kp-teen-v11.kp-solo .kp-v11-img {
        width: 100%;
        min-height: 0;
        aspect-ratio: 16/9;
    }
    .kp-v11-text { padding: clamp(28px, 6vw, 40px) clamp(20px, 6vw, 32px); width: 100%; }
}


/* ==========================================================================
   VARIANT 12 — 50/50 diagonaallõikega
   ========================================================================== */
.kp-v12-row {
    display: flex;
    border-bottom: 1px solid #e4e8ef;
    overflow: hidden;
}
.kp-v12-row:last-child { border-bottom: none; }
.kp-v12-flip { flex-direction: row-reverse; }

.kp-v12-img {
    width: 54%;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    background: #d8e2ef;
    min-height: clamp(300px, 36vw, 520px);
    clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%);
}
.kp-v12-flip .kp-v12-img {
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 12% 100%, 0 50%);
}
.kp-v12-img img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.kp-v12-row:hover .kp-v12-img img { transform: scale(1.04); }
.kp-v12-no-img {
    width: 100%; height: 100%;
    background: #032e68;
    display: flex; align-items: center; justify-content: center;
}

.kp-v12-text {
    flex: 1;
    padding: clamp(32px, 5.5vw, 60px) clamp(20px, 4vw, 48px) clamp(32px, 5.5vw, 60px) clamp(16px, 3vw, 44px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
    margin-left: -4%;
    position: relative; z-index: 1;
}
.kp-v12-flip .kp-v12-text {
    margin-left: 0;
    margin-right: -4%;
    padding: clamp(32px, 5.5vw, 60px) clamp(16px, 3vw, 44px) clamp(32px, 5.5vw, 60px) clamp(20px, 4vw, 48px);
}
.kp-v12-text.kp-v12-dark { background: #032e68; }

.kp-v12-icon { margin-bottom: 16px; align-self: flex-start; background: #e95e23 !important; }
.kp-v12-text h3,
.kp-v12-text h1 { color: #032e68 !important; font-size: clamp(20px, 2.5vw, 32px) !important; margin-bottom: 12px !important; }
.kp-v12-text p  { color: #444 !important; max-width: 460px; }
.kp-v12-dark h3,
.kp-v12-dark h1 { color: #fff !important; }
.kp-v12-dark p  { color: rgba(255,255,255,.82) !important; }
.kp-v12-dark .kp-teen-padevus li { color: rgba(255,255,255,.75); }
.kp-v12-dark .kp-teen-padevus li::before { background: #e95e23; }

.kp-teen-v12.kp-solo .kp-v12-row {
    border-bottom: none;
    min-height: clamp(380px, calc(100vh - 240px), 95vh);
}
@media (min-width: 581px) {
    .kp-teen-v12.kp-solo .kp-v12-img { min-height: 0; }
}

@media (max-width: 768px) {
    .kp-v12-img { width: 54%; min-height: clamp(200px, 26vw, 380px); }
    .kp-v12-text { padding: clamp(24px, 4vw, 44px) clamp(16px, 3vw, 36px); }
    .kp-v12-flip .kp-v12-text { padding: clamp(24px, 4vw, 44px) clamp(16px, 3vw, 36px); }
}
@media (max-width: 580px) {
    .kp-v12-row { flex-direction: column !important; }
    .kp-v12-img,
    .kp-teen-v12.kp-solo .kp-v12-img {
        width: 100% !important;
        min-height: 0 !important;
        aspect-ratio: 16/9 !important;
        clip-path: none !important;
    }
    .kp-v12-text { margin: 0 !important; padding: clamp(28px, 6vw, 40px) clamp(20px, 6vw, 32px) !important; width: 100%; clip-path: none !important; }
}


/* ==========================================================================
   VARIANT 13 — Diagonaal navy hover (kp-teenused-plugin L11 stiilis)
   Navy taust, \ diagonaal, hoverides pilt "kahaneb" (clip-path nihe)
   ========================================================================== */
.kp-v13-item {
    display: flex;
    position: relative;
    min-height: 460px;
    overflow: hidden;
    margin-bottom: 3px;
    background: #032e68;
}
.kp-v13-item:last-child { margin-bottom: 0; }

/* Pilt: order:-1 → visuaalselt vasakul, kuigi DOM-is sisu järel */
.kp-v13-img {
    order: -1;
    flex: 0 0 auto;
    width: 60%;
    position: relative;
    overflow: hidden;
    background: #0a3d82;
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
    will-change: clip-path;
    transition: clip-path .6s cubic-bezier(.4,0,.2,1);
}
.kp-v13-img img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.kp-v13-no-img { width: 100%; height: 100%; background: #0a3d82; }

.kp-v13-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(32px, 5.5vw, 60px) clamp(24px, 4.5vw, 64px) clamp(32px, 5.5vw, 60px) clamp(48px, 8vw, 152px);
    margin-left: -100px;
    position: relative; z-index: 1;
}
.kp-v13-content h3,
.kp-v13-content h1 { color: #fff !important; font-size: clamp(20px, 2.5vw, 32px) !important; margin-bottom: 12px !important; }
.kp-v13-content p  { color: rgba(255,255,255,.82) !important; max-width: 480px; }
.kp-v13-content .kp-teen-padevus li { color: rgba(255,255,255,.75); }
.kp-v13-content .kp-teen-padevus li::before { background: #e95e23; }

/* Hoverdades ITEM peale → pilt laieneb, diagonaal nihkub sisu poole */
.kp-v13-item:hover .kp-v13-img {
    clip-path: polygon(0 0, 100% 0, 93% 100%, 0 100%);
}

/* Rev: pilt paremale (order:1 tühistab base order:-1) */
.kp-v13-rev .kp-v13-img {
    order: 1;
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
}
.kp-v13-rev:hover .kp-v13-img {
    clip-path: polygon(7% 0, 100% 0, 100% 100%, 0 100%);
}
.kp-v13-rev .kp-v13-content {
    padding: clamp(32px, 5.5vw, 60px) clamp(48px, 8vw, 152px) clamp(32px, 5.5vw, 60px) clamp(24px, 4.5vw, 64px);
    margin-left: 0;
    margin-right: -100px;
}

.kp-teen-v13.kp-solo .kp-v13-item {
    min-height: clamp(380px, calc(100vh - 240px), 95vh);
}

@media (max-width: 800px) {
    .kp-v13-item { flex-direction: column; min-height: auto; }
    .kp-v13-img,
    .kp-v13-rev .kp-v13-img {
        order: -1;
        width: 100%;
        height: 260px;
        clip-path: none;
    }
    .kp-v13-content,
    .kp-v13-rev .kp-v13-content {
        padding: clamp(28px, 6vw, 40px) clamp(20px, 6vw, 32px);
        margin-left: 0;
        margin-right: 0;
    }
}


/* ==========================================================================
   VARIANDID 14–17 — Diagonaal navy hover, värvivariandid
   Taaskasutavad V13 struktuuri (img/content/hover), lisavad ainult
   rea taustavärvi ja nupuvärvi vaheldumise (nth-child)
   ========================================================================== */

/* ── V14 — navy + oranž ─────────────────────────────────────────── */
.kp-teen-v14 .kp-v14-item:nth-child(odd)  { background: #032e68; }
.kp-teen-v14 .kp-v14-item:nth-child(even) { background: #e95e23; }
.kp-teen-v14 .kp-v14-item:nth-child(odd)  .kp-v13-content { background-color: #032e68; }
.kp-teen-v14 .kp-v14-item:nth-child(even) .kp-v13-content { background-color: #e95e23; }
.kp-teen-v14 .kp-v14-item:nth-child(odd)  .kp-btn-white { background: #e95e23; border-color: #e95e23; color: #fff; }
.kp-teen-v14 .kp-v14-item:nth-child(even) .kp-btn-white { background: #032e68; border-color: #032e68; color: #fff; }
.kp-teen-v14 .kp-v14-item:nth-child(odd)  .kp-btn-white:hover { background: #fff; color: #032e68; }
.kp-teen-v14 .kp-v14-item:nth-child(even) .kp-btn-white:hover { background: #fff; color: #e95e23; }

/* ── V15 — navy + valge (oranž aktsentriba) ────────────────────── */
.kp-teen-v15 .kp-v15-item:nth-child(odd)  { background: #032e68; }
.kp-teen-v15 .kp-v15-item:nth-child(odd)  .kp-v13-accent-bar { display: none; }
.kp-teen-v15 .kp-v15-item:nth-child(odd)  .kp-btn-white { background: #e95e23; border-color: #e95e23; color: #fff; }
.kp-teen-v15 .kp-v15-item:nth-child(odd)  .kp-btn-white:hover { background: #fff; color: #032e68; }
.kp-teen-v15 .kp-v15-item:nth-child(even) { background: #ffffff; }
.kp-teen-v15 .kp-v15-item:nth-child(even) .kp-v13-content { background: transparent; }
.kp-teen-v15 .kp-v15-item:nth-child(even) .kp-v13-accent-bar {
    display: block; width: 4px; height: 44px; background: #e95e23;
    margin-bottom: 20px; flex-shrink: 0; align-self: flex-start;
}
.kp-teen-v15 .kp-v15-item:nth-child(even) h3,
.kp-teen-v15 .kp-v15-item:nth-child(even) h1,
.kp-teen-v15 .kp-v15-item:nth-child(even) p { color: #032e68 !important; }
.kp-teen-v15 .kp-v15-item:nth-child(even) p { opacity: 0.75; }
.kp-teen-v15 .kp-v15-item:nth-child(even) .kp-teen-padevus li { color: #444; }
.kp-teen-v15 .kp-v15-item:nth-child(even) .kp-teen-padevus li::before { background: #032e68; }
.kp-teen-v15 .kp-v15-item:nth-child(even) .kp-btn-white { background: #032e68; border-color: #032e68; color: #fff; }
.kp-teen-v15 .kp-v15-item:nth-child(even) .kp-btn-white:hover { background: #e95e23; border-color: #e95e23; color: #fff; }

/* ── V16 — navy + sinine ────────────────────────────────────────── */
.kp-teen-v16 .kp-v16-item:nth-child(odd)  { background: #032e68; }
.kp-teen-v16 .kp-v16-item:nth-child(even) { background: #1477c8; }
.kp-teen-v16 .kp-v16-item:nth-child(odd)  .kp-v13-content { background-color: #032e68; }
.kp-teen-v16 .kp-v16-item:nth-child(even) .kp-v13-content { background-color: #1477c8; }
.kp-teen-v16 .kp-v16-item:nth-child(odd)  .kp-btn-white { background: #1477c8; border-color: #1477c8; color: #fff; }
.kp-teen-v16 .kp-v16-item:nth-child(even) .kp-btn-white { background: #032e68; border-color: #032e68; color: #fff; }
.kp-teen-v16 .kp-v16-item:nth-child(odd)  .kp-btn-white:hover { background: #fff; color: #032e68; }
.kp-teen-v16 .kp-v16-item:nth-child(even) .kp-btn-white:hover { background: #fff; color: #1477c8; }

/* ── V17 — oranž + valge (navy aktsentriba) ────────────────────── */
.kp-teen-v17 .kp-v17-item:nth-child(odd)  { background: #e95e23; }
.kp-teen-v17 .kp-v17-item:nth-child(odd)  .kp-v13-accent-bar { display: none; }
.kp-teen-v17 .kp-v17-item:nth-child(odd)  .kp-btn-white { background: #032e68; border-color: #032e68; color: #fff; }
.kp-teen-v17 .kp-v17-item:nth-child(odd)  .kp-btn-white:hover { background: #fff; color: #e95e23; }
.kp-teen-v17 .kp-v17-item:nth-child(even) { background: #ffffff; }
.kp-teen-v17 .kp-v17-item:nth-child(even) .kp-v13-content { background: transparent; }
.kp-teen-v17 .kp-v17-item:nth-child(even) .kp-v13-accent-bar {
    display: block; width: 4px; height: 44px; background: #032e68;
    margin-bottom: 20px; flex-shrink: 0; align-self: flex-start;
}
.kp-teen-v17 .kp-v17-item:nth-child(even) h3,
.kp-teen-v17 .kp-v17-item:nth-child(even) h1,
.kp-teen-v17 .kp-v17-item:nth-child(even) p { color: #032e68 !important; }
.kp-teen-v17 .kp-v17-item:nth-child(even) p { opacity: 0.75; }
.kp-teen-v17 .kp-v17-item:nth-child(even) .kp-teen-padevus li { color: #444; }
.kp-teen-v17 .kp-v17-item:nth-child(even) .kp-teen-padevus li::before { background: #032e68; }
.kp-teen-v17 .kp-v17-item:nth-child(even) .kp-btn-white { background: #e95e23; border-color: #e95e23; color: #fff; }
.kp-teen-v17 .kp-v17-item:nth-child(even) .kp-btn-white:hover { background: #032e68; border-color: #032e68; color: #fff; }

@media (max-width: 800px) {
    .kp-teen-v14 .kp-v14-item,
    .kp-teen-v15 .kp-v15-item,
    .kp-teen-v16 .kp-v16-item,
    .kp-teen-v17 .kp-v17-item { margin-bottom: 3px; }
}


/* ==========================================================================
   VARIANDID 18–21 — Chevron (pilt alati vasakul, \ / \ / vaheldub)
   Read on seemeteta (gap:0), moodustavad pideva chevron-mustri
   ========================================================================== */
.kp-teen-v18 { display: flex; flex-direction: column; gap: 0; }

.kp-v18-item {
    display: flex;
    position: relative;
    min-height: 460px;
    overflow: hidden;
    background: #032e68;
}
.kp-v18-img {
    order: -1;
    flex: 0 0 auto;
    width: 60%;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
    will-change: clip-path;
    transition: clip-path .6s cubic-bezier(.4,0,.2,1);
}
.kp-v18-slash .kp-v18-img {
    clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%);
}
.kp-v18-no-img { width: 100%; height: 100%; background: #0a3d82; }

.kp-v18-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(32px, 5.5vw, 64px) clamp(24px, 4.5vw, 64px) clamp(32px, 5.5vw, 64px) clamp(48px, 8vw, 144px);
    margin-left: -100px;
    position: relative; z-index: 1;
}
.kp-v18-content h3,
.kp-v18-content h1 { color: #fff !important; font-size: clamp(20px, 2.5vw, 32px) !important; margin-bottom: 12px !important; }
.kp-v18-content p  { color: rgba(255,255,255,.82) !important; max-width: 480px; }
.kp-v18-content .kp-teen-padevus li { color: rgba(255,255,255,.75); }
.kp-v18-content .kp-teen-padevus li::before { background: #e95e23; }

.kp-v18-item:not(.kp-v18-slash):hover .kp-v18-img { clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%); }
.kp-v18-slash:hover .kp-v18-img { clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%); }

.kp-teen-v18.kp-solo .kp-v18-item { min-height: clamp(380px, calc(100vh - 240px), 95vh); }

@media (max-width: 800px) {
    .kp-v18-item { flex-direction: column; min-height: auto; }
    .kp-v18-img { order: -1; width: 100%; height: 260px; clip-path: none; }
    .kp-v18-content { padding: clamp(28px, 6vw, 40px) clamp(20px, 6vw, 32px); margin-left: 0; }
}

/* ── V18 — navy + oranž ─────────────────────────────────────────── */
.kp-teen-v18 .kp-v18-item:nth-child(odd)  { background: #032e68; }
.kp-teen-v18 .kp-v18-item:nth-child(even) { background: #e95e23; }
.kp-teen-v18 .kp-v18-item:nth-child(odd)  .kp-v18-content { background-color: #032e68; }
.kp-teen-v18 .kp-v18-item:nth-child(even) .kp-v18-content { background-color: #e95e23; }
.kp-teen-v18 .kp-v18-item:nth-child(odd)  .kp-btn-white { background: #e95e23; border-color: #e95e23; color: #fff; }
.kp-teen-v18 .kp-v18-item:nth-child(even) .kp-btn-white { background: #032e68; border-color: #032e68; color: #fff; }
.kp-teen-v18 .kp-v18-item:nth-child(odd)  .kp-btn-white:hover { background: #fff; color: #032e68; }
.kp-teen-v18 .kp-v18-item:nth-child(even) .kp-btn-white:hover { background: #fff; color: #e95e23; }

/* ── V19 — navy + valge (oranž aktsentriba) ────────────────────── */
.kp-teen-v19 .kp-v19-item:nth-child(odd)  { background: #032e68; }
.kp-teen-v19 .kp-v19-item:nth-child(odd)  .kp-v18-accent-bar { display: none; }
.kp-teen-v19 .kp-v19-item:nth-child(odd)  .kp-btn-white { background: #e95e23; border-color: #e95e23; color: #fff; }
.kp-teen-v19 .kp-v19-item:nth-child(odd)  .kp-btn-white:hover { background: #fff; color: #032e68; }
.kp-teen-v19 .kp-v19-item:nth-child(even) { background: #ffffff; }
.kp-teen-v19 .kp-v19-item:nth-child(even) .kp-v18-content { background: transparent; }
.kp-teen-v19 .kp-v19-item:nth-child(even) .kp-v18-accent-bar {
    display: block; width: 4px; height: 44px; background: #e95e23;
    margin-bottom: 20px; flex-shrink: 0; align-self: flex-start;
}
.kp-teen-v19 .kp-v19-item:nth-child(even) h3,
.kp-teen-v19 .kp-v19-item:nth-child(even) h1,
.kp-teen-v19 .kp-v19-item:nth-child(even) p { color: #032e68 !important; }
.kp-teen-v19 .kp-v19-item:nth-child(even) p { opacity: 0.75; }
.kp-teen-v19 .kp-v19-item:nth-child(even) .kp-teen-padevus li { color: #444; }
.kp-teen-v19 .kp-v19-item:nth-child(even) .kp-teen-padevus li::before { background: #032e68; }
.kp-teen-v19 .kp-v19-item:nth-child(even) .kp-btn-white { background: #032e68; border-color: #032e68; color: #fff; }
.kp-teen-v19 .kp-v19-item:nth-child(even) .kp-btn-white:hover { background: #e95e23; border-color: #e95e23; color: #fff; }

/* ── V20 — navy + sinine ────────────────────────────────────────── */
.kp-teen-v20 .kp-v20-item:nth-child(odd)  { background: #032e68; }
.kp-teen-v20 .kp-v20-item:nth-child(even) { background: #1477c8; }
.kp-teen-v20 .kp-v20-item:nth-child(odd)  .kp-v18-content { background-color: #032e68; }
.kp-teen-v20 .kp-v20-item:nth-child(even) .kp-v18-content { background-color: #1477c8; }
.kp-teen-v20 .kp-v20-item:nth-child(odd)  .kp-btn-white { background: #1477c8; border-color: #1477c8; color: #fff; }
.kp-teen-v20 .kp-v20-item:nth-child(even) .kp-btn-white { background: #032e68; border-color: #032e68; color: #fff; }
.kp-teen-v20 .kp-v20-item:nth-child(odd)  .kp-btn-white:hover { background: #fff; color: #032e68; }
.kp-teen-v20 .kp-v20-item:nth-child(even) .kp-btn-white:hover { background: #fff; color: #1477c8; }

/* ── V21 — oranž + valge (navy aktsentriba) ────────────────────── */
.kp-teen-v21 .kp-v21-item:nth-child(odd)  { background: #e95e23; }
.kp-teen-v21 .kp-v21-item:nth-child(odd)  .kp-v18-accent-bar { display: none; }
.kp-teen-v21 .kp-v21-item:nth-child(odd)  .kp-btn-white { background: #032e68; border-color: #032e68; color: #fff; }
.kp-teen-v21 .kp-v21-item:nth-child(odd)  .kp-btn-white:hover { background: #fff; color: #e95e23; }
.kp-teen-v21 .kp-v21-item:nth-child(even) { background: #ffffff; }
.kp-teen-v21 .kp-v21-item:nth-child(even) .kp-v18-content { background: transparent; }
.kp-teen-v21 .kp-v21-item:nth-child(even) .kp-v18-accent-bar {
    display: block; width: 4px; height: 44px; background: #032e68;
    margin-bottom: 20px; flex-shrink: 0; align-self: flex-start;
}
.kp-teen-v21 .kp-v21-item:nth-child(even) h3,
.kp-teen-v21 .kp-v21-item:nth-child(even) h1,
.kp-teen-v21 .kp-v21-item:nth-child(even) p { color: #032e68 !important; }
.kp-teen-v21 .kp-v21-item:nth-child(even) p { opacity: 0.75; }
.kp-teen-v21 .kp-v21-item:nth-child(even) .kp-teen-padevus li { color: #444; }
.kp-teen-v21 .kp-v21-item:nth-child(even) .kp-teen-padevus li::before { background: #032e68; }
.kp-teen-v21 .kp-v21-item:nth-child(even) .kp-btn-white { background: #e95e23; border-color: #e95e23; color: #fff; }
.kp-teen-v21 .kp-v21-item:nth-child(even) .kp-btn-white:hover { background: #032e68; border-color: #032e68; color: #fff; }

@media (max-width: 800px) {
    .kp-teen-v18 .kp-v18-item,
    .kp-teen-v19 .kp-v19-item,
    .kp-teen-v20 .kp-v20-item,
    .kp-teen-v21 .kp-v21-item { margin-bottom: 3px; }
}

/* ==========================================================================
   VARIANDID 22–25 — Kokkupuutuv siksak-diagonaal (rombinotš)
   Värviosa katab TERVE rea, pilt on kihina peal oma diagonaalse lõikega
   ========================================================================== */
.kp-teen-v22 { display: flex; flex-direction: column; }

.kp-v22-item {
    position: relative;
    min-height: 460px;
    overflow: hidden;
    margin-bottom: 3px;
    background: #032e68;
}
.kp-v22-img {
    position: absolute; inset: 0;
    z-index: 1;
    overflow: hidden;
    clip-path: polygon(0 0, 46% 0, 54% 100%, 0 100%);
}
.kp-v22-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.kp-v22-item:hover .kp-v22-img img { transform: scale(1.04); }
.kp-v22-no-img { width: 100%; height: 100%; background: #0a3d82; }

.kp-v22-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(32px, 5.5vw, 60px) clamp(24px, 4.5vw, 64px) clamp(32px, 5.5vw, 60px) calc(54% + 40px);
}
.kp-v22-content h3,
.kp-v22-content h1 { color: #fff !important; font-size: clamp(20px, 2.5vw, 32px) !important; margin-bottom: 12px !important; }
.kp-v22-content p  { color: rgba(255,255,255,.82) !important; max-width: 480px; }
.kp-v22-content .kp-teen-padevus li { color: rgba(255,255,255,.75); }
.kp-v22-content .kp-teen-padevus li::before { background: #e95e23; }

.kp-v22-rev .kp-v22-img { clip-path: polygon(54% 0, 100% 0, 100% 100%, 46% 100%); }
.kp-v22-rev .kp-v22-content { padding: clamp(32px, 5.5vw, 60px) calc(54% + 40px) clamp(32px, 5.5vw, 60px) clamp(24px, 4.5vw, 64px); }

.kp-teen-v22.kp-solo .kp-v22-item { min-height: clamp(380px, calc(100vh - 240px), 95vh); }

@media (max-width: 800px) {
    .kp-v22-item { display: flex; flex-direction: column; min-height: auto; }
    .kp-v22-img,
    .kp-v22-rev .kp-v22-img {
        position: static; width: 100%; height: 220px; clip-path: none; z-index: auto; order: -1;
    }
    .kp-v22-content,
    .kp-v22-rev .kp-v22-content {
        position: static; padding: clamp(28px, 6vw, 32px) clamp(20px, 6vw, 24px); z-index: auto;
    }
}

/* ── V22 — Suur diagonaal, navy + oranž ────────────────────────── */
.kp-teen-v22 .kp-v22-item:nth-child(odd)  { background: #032e68; }
.kp-teen-v22 .kp-v22-item:nth-child(even) { background: #e95e23; }
.kp-teen-v22 .kp-v22-item:nth-child(odd)  .kp-btn-white { background: #e95e23; border-color: #e95e23; color: #fff; }
.kp-teen-v22 .kp-v22-item:nth-child(even) .kp-btn-white { background: #032e68; border-color: #032e68; color: #fff; }
.kp-teen-v22 .kp-v22-item:nth-child(odd)  .kp-btn-white:hover { background: #fff; color: #032e68; }
.kp-teen-v22 .kp-v22-item:nth-child(even) .kp-btn-white:hover { background: #fff; color: #e95e23; }

/* ── V23 — Siksak navy + valge ─────────────────────────────────── */
.kp-teen-v23 .kp-v23-item:nth-child(odd)  { background: #032e68; }
.kp-teen-v23 .kp-v23-item:nth-child(even) { background: #ffffff; }
.kp-teen-v23 .kp-v23-item:nth-child(even) h3,
.kp-teen-v23 .kp-v23-item:nth-child(even) h1 { color: #032e68 !important; }
.kp-teen-v23 .kp-v23-item:nth-child(even) p  { color: #555 !important; }
.kp-teen-v23 .kp-v23-item:nth-child(even) .kp-teen-padevus li { color: #444; }
.kp-teen-v23 .kp-v23-item:nth-child(even) .kp-teen-padevus li::before { background: #032e68; }
.kp-teen-v23 .kp-v23-item:nth-child(odd)  .kp-btn-white { background: #e95e23 !important; border-color: #e95e23 !important; color: #fff !important; }
.kp-teen-v23 .kp-v23-item:nth-child(odd)  .kp-btn-white:hover { background: #c94e1a !important; border-color: #c94e1a !important; color: #fff !important; }

/* ── V24 — Siksak valge + oranž ────────────────────────────────── */
.kp-teen-v24 .kp-v24-item:nth-child(odd)  { background: #ffffff; }
.kp-teen-v24 .kp-v24-item:nth-child(odd) h3,
.kp-teen-v24 .kp-v24-item:nth-child(odd) h1 { color: #032e68 !important; }
.kp-teen-v24 .kp-v24-item:nth-child(odd) p  { color: #555 !important; }
.kp-teen-v24 .kp-v24-item:nth-child(odd) .kp-teen-padevus li { color: #444; }
.kp-teen-v24 .kp-v24-item:nth-child(odd) .kp-teen-padevus li::before { background: #032e68; }
.kp-teen-v24 .kp-v24-item:nth-child(even) { background: #e95e23; }
.kp-teen-v24 .kp-v24-item:nth-child(even) .kp-btn-white { background: #032e68; border-color: #032e68; color: #fff; }
.kp-teen-v24 .kp-v24-item:nth-child(even) .kp-btn-white:hover { background: #fff; color: #e95e23; }

/* ── V25 — Siksak oranž + navy ─────────────────────────────────── */
.kp-teen-v25 .kp-v25-item:nth-child(odd)  { background: #e95e23; }
.kp-teen-v25 .kp-v25-item:nth-child(even) { background: #032e68; }
.kp-teen-v25 .kp-v25-item:nth-child(odd)  .kp-btn-white { background: #032e68; border-color: #032e68; color: #fff; }
.kp-teen-v25 .kp-v25-item:nth-child(even) .kp-btn-white { background: #e95e23; border-color: #e95e23; color: #fff; }
.kp-teen-v25 .kp-v25-item:nth-child(odd)  .kp-btn-white:hover { background: #fff; color: #e95e23; }
.kp-teen-v25 .kp-v25-item:nth-child(even) .kp-btn-white:hover { background: #fff; color: #032e68; }


.kp-tsisu-switcher {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    padding: 10px 14px !important;
    margin-bottom: 24px !important;
    background: #f4f7fc !important;
    border: 1px solid #dde6f5 !important;
    border-radius: 6px !important;
}
.kp-tsisu-sw-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #032e68 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
.kp-tsisu-sw-cards {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    flex: 1 !important;
}
.kp-sw-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 6px 8px 5px !important;
    border: 2px solid #d0dced !important;
    border-radius: 5px !important;
    background: #fff !important;
    cursor: pointer !important;
    transition: border-color .15s, background .15s, transform .1s !important;
    min-width: 60px !important;
}
.kp-sw-card:hover { border-color: #032e68 !important; background: #eef3fb !important; transform: translateY(-1px) !important; }
.kp-sw-card.kp-sw-active { border-color: #e95e23 !important; background: #fff5f0 !important; }
.kp-sw-card.kp-sw-loading { opacity: .5 !important; pointer-events: none !important; }
.kp-sw-card svg { display: block !important; }
.kp-sw-vnum { font-size: 10px !important; font-weight: 700 !important; color: #e95e23 !important; line-height: 1 !important; }
.kp-sw-lbl { font-size: 9px !important; color: #667 !important; line-height: 1.2 !important; text-align: center !important; max-width: 72px !important; }
.kp-sw-save {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 6px 12px !important;
    background: #032e68 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background .15s !important;
    flex-shrink: 0 !important;
}
.kp-sw-save:hover { background: #021e4a !important; }
.kp-sw-save:disabled { opacity: .6 !important; cursor: default !important; }
.kp-sw-saved { font-size: 12px !important; color: #2a7a2a !important; font-weight: 600 !important; white-space: nowrap !important; }
.kp-tsisu-content { transition: opacity .2s !important; }

@media (max-width: 480px) {
    .kp-tsisu-switcher { padding: 8px 10px !important; gap: 8px !important; }
    .kp-sw-lbl { display: none !important; }
}

/* ==========================================================================
   KONTAKTNUPU ("Võta ühendust") ALTERNATIIVNE ASUKOHT
   Ainult diagonaal/siksak variantidel (13–25), kui admin seadetes on valitud
   "Pildi keskel" või "Pildi ja teksti piiril". Nupp tõstetakse sisu voost
   välja ja positsioneeritakse ülekattena pildi kohale.
   ========================================================================== */
.kp-cbtn-overlay {
    position: absolute !important;
    top: 50%;
    z-index: 6;
    /* .kp-teen-kontakt-wrap seab mujal width:100% !important — siin peab
       ülekattenupp jääma oma sisu laiuseks, muidu venib kogu rea laiuseks
       ja translate(-50%) nihutab selle täiesti valesse kohta. */
    width: max-content !important;
    display: inline-flex !important;
    text-align: left !important;
    margin: 0 !important;
}
.kp-cbtn-overlay .kp-teen-btn { margin-top: 0 !important; }

/* Diagonaal/chevron pere (v13 struktuur — kasutavad ka v14–v21), pilt ~60% laiune */
.kp-v13-item .kp-cbtn-pos-center.kp-cbtn-side-left  { left: 27%; transform: translate(-50%, -50%); }
.kp-v13-item .kp-cbtn-pos-center.kp-cbtn-side-right { left: 73%; transform: translate(-50%, -50%); }
.kp-v13-item .kp-cbtn-pos-edge.kp-cbtn-side-left    { left: 57%; transform: translate(-50%, -50%); }
.kp-v13-item .kp-cbtn-pos-edge.kp-cbtn-side-right   { left: 43%; transform: translate(-50%, -50%); }

.kp-v18-item .kp-cbtn-pos-center.kp-cbtn-side-left  { left: 27%; transform: translate(-50%, -50%); }
.kp-v18-item .kp-cbtn-pos-edge.kp-cbtn-side-left    { left: 57%; transform: translate(-50%, -50%); }

/* Siksak/romb pere (v22 struktuur — kasutavad ka v23–v25), pilt ~50% laiune */
.kp-v22-item .kp-cbtn-pos-center.kp-cbtn-side-left  { left: 25%; transform: translate(-50%, -50%); }
.kp-v22-item .kp-cbtn-pos-center.kp-cbtn-side-right { left: 75%; transform: translate(-50%, -50%); }
.kp-v22-item .kp-cbtn-pos-edge.kp-cbtn-side-left    { left: 50%; transform: translate(-50%, -50%); }
.kp-v22-item .kp-cbtn-pos-edge.kp-cbtn-side-right   { left: 50%; transform: translate(-50%, -50%); }

/* "Pildi nurgas" — alläär, samal x-teljel kus "piiril" variant (pildi/teksti
   piir), aga vertikaalselt tsentreerimise asemel alläärde kinnitatud, teksti-
   kasti poolele. Kui tekst on paremal (pilt vasakul) → nupp on all VASAKUL
   (teksti kasti vasak serv). Kui tekst on vasakul (pilt paremal) → nupp on
   all PAREMAL (teksti kasti parem serv). */
.kp-cbtn-pos-corner {
    top: auto;
    bottom: 28px;
    transform: none;
}
/* Ankurdame nupu SERVA (mitte keskkoha) piirjoonele — nii jääb nupp täielikult
   sinise/valge teksti-ala peale ega kattu pildiga. Kasutame sama 28px vahet
   nii allservast KUI diagonaaljoonest, et vahemaad oleksid võrdsed. % väärtused
   on arvutatud iga varianti clip-path'i tegeliku alläärepunkti järgi (mitte
   silma järgi), + 28px teksti poole turvavaruks:
   — v13 (pilt 60% laiune): pilt (vasakul) ulatub alläärel kuni ~56%-ni (hoveriga);
     pilt (paremal/rev) ulatub alläärel täisservani ehk 40%-ni (60% paremalt).
   — v18 (chevron, pilt alati vasakul): pilt ulatub alläärel kuni ~54%-ni (hoveriga).
   — v22–25 (romb, pilt kogu rea laiuses): clip-path'i enda tipud annavad
     täpselt 54% / 46% (sümmeetriline). */
.kp-v13-item .kp-cbtn-pos-corner.kp-cbtn-side-left  { left: calc(56% + 28px); right: auto; }
.kp-v13-item .kp-cbtn-pos-corner.kp-cbtn-side-right { left: auto; right: calc(60% + 28px); }
.kp-v18-item .kp-cbtn-pos-corner.kp-cbtn-side-left  { left: calc(54% + 28px); right: auto; }
.kp-v22-item .kp-cbtn-pos-corner.kp-cbtn-side-left  { left: calc(54% + 28px); right: auto; bottom: 28px; }
.kp-v22-item .kp-cbtn-pos-corner.kp-cbtn-side-right { left: auto; right: calc(54% + 28px); bottom: 28px; }

/* Üksikvaates (kp-solo) pole diagonaal-pilti, mille suhtes protsentuaalselt
   positsioneerida — nupp tagasi tavavoogu, joondub loomulikult tekstiga. */
.kp-solo .kp-cbtn-overlay {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin-top: 16px !important;
}

/* single()-vaates on kontaktnupp .kp-single-body'st väljas (otse .kp-teen-single
   lapsena) — sama 24px paddingut vajab ka tema, muidu tekib nihe teksti suhtes. */
.kp-teen-single > .kp-teen-kontakt-wrap {
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
}

/* Mobiilis (pilt+tekst virnastuvad) — nupp tagasi tavavoogu */
@media (max-width: 800px) {
    .kp-cbtn-overlay {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin-top: 16px !important;
        margin-left: 20px !important;
        margin-right: auto !important;
        margin-bottom: 30px !important;
        align-self: flex-start !important;
        text-align: left !important;
    }
}

/* ── Üksikvaates (kp-solo) ei piira teksti laiust ── */
/* Kõikides layout-variantides oli teksti max-width mõeldud pildi kõrval kuvatava
   lühikese teksti jaoks. Kui teenusel on ainult üks (üksikvaade), lubame tekstil
   täisulatuses laieneda, et pikem "Täielik kirjeldus" (nt pädevuse loend) mahuks paremini. */
.kp-solo p,
.kp-solo li,
.kp-solo ul,
.kp-solo ol {
    max-width: none !important;
}

/* ── "Punktid" puu — Grupp > Punkt > Alampunkt, akordeoniga ── */
/* Kasutame .kp-teen-padevus klassi (list ja list-elementidel), et automaatselt
   pärida sama tumeda/heleda tausta värvikohandus, mis kehtib juba "Pädevus" loendile
   kõigis 30 kujundusvariandis — nii ei pea me iga varianti eraldi üle katma. */
.kp-punktid {
    margin: 12px 0;
}

.kp-punktid-group {
    margin-bottom: 26px;
}

.kp-punktid-group:last-child {
    margin-bottom: 0;
}

/* Grupi pealkiri — suurem ja valge, selge visuaalne hierarhia punktide suhtes */
.kp-punktid-list.kp-teen-padevus > .kp-punktid-group-title {
    font-family: 'Dosis', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    color: #fff !important;
    padding: 0 0 12px !important;
    margin: 0 !important;
}

.kp-punktid-list.kp-teen-padevus > .kp-punktid-group-title.has-content {
    padding: 0 0 6px !important;
}

.kp-punktid-toggle--group {
    font-family: inherit;
    font-weight: 700;
    font-size: 1.3rem;
    color: #fff !important;
    padding: 2px 0 !important;
}

.kp-punktid-list.kp-teen-padevus > .kp-punktid-group-title::before {
    content: none !important;
}

.kp-punktid-list,
.kp-punktid-sublist {
    margin: 0 !important;
}

.kp-punktid-sublist {
    margin: 2px 0 2px 18px !important;
}

/* Nulli ära Pädevuse baasstiili täpp+vasak-padding meie enda punktidel —
   kasutame selle asemel oma noolt nupu sees. */
.kp-punktid-item,
.kp-punktid-subitem {
    padding: 0 !important;
}

.kp-punktid-item::before,
.kp-punktid-subitem::before {
    content: none !important;
}

/* Põhipunkt (Punkt-tasand) — üks kindel suurus/kaal, olenemata kas sisu on sees või mitte.
   Topeltvalitud (.kp-punktid ... ja lihtne klass) kõrgema spetsiifilisuse jaoks, et see
   kindlasti võidaks konkreetsete kujundusvariantide endi reeglid. */
.kp-punktid-item,
.kp-punktid .kp-punktid-item {
    margin-bottom: 1px;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
}

.kp-punktid-item:not(.has-content),
.kp-punktid-item > .kp-punktid-toggle,
.kp-punktid .kp-punktid-item:not(.has-content),
.kp-punktid .kp-punktid-item > .kp-punktid-toggle {
    padding: 6px 4px !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    color: #fff !important;
}

.kp-punktid-item.has-content:hover {
    opacity: 0.85;
}

.kp-punktid-item:last-child {
    margin-bottom: 0;
}

/* Alampunkt — vaiksem, väiksem, aga ühtlane suurus/kaal olenemata sisu olemasolust */
.kp-punktid-subitem,
.kp-punktid .kp-punktid-subitem {
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    border-bottom: 1px solid rgba(128,128,128,0.15);
}

.kp-punktid-subitem:not(.has-content),
.kp-punktid-subitem > .kp-punktid-toggle,
.kp-punktid .kp-punktid-subitem:not(.has-content),
.kp-punktid .kp-punktid-subitem > .kp-punktid-toggle {
    padding: 3px 0 !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    color: #fff !important;
}

.kp-punktid-subitem:last-child {
    border-bottom: none;
}

.kp-punktid-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    line-height: 1.4;
}

.kp-punktid-toggle:hover {
    opacity: 0.85;
}

.kp-punktid-arrow {
    display: inline-block;
    flex: 0 0 auto;
    font-size: 1.15rem;
    transition: transform 0.2s ease;
    color: #e95e23;
}

.kp-punktid-item > .kp-punktid-toggle .kp-punktid-arrow {
    font-size: 1.5rem;
}

.kp-punktid-item.is-open > .kp-punktid-toggle .kp-punktid-arrow,
.kp-punktid-subitem.is-open > .kp-punktid-toggle .kp-punktid-arrow,
.kp-punktid-group-title.is-open > .kp-punktid-toggle .kp-punktid-arrow {
    transform: rotate(90deg);
}

.kp-punktid-content {
    padding: 4px 0 6px 22px;
    color: inherit;
}

.kp-punktid-text p {
    margin: 0 0 6px;
    font-weight: 300;
    color: inherit;
    opacity: 0.9;
}

.kp-punktid-item .kp-punktid-text p,
.kp-punktid-subitem .kp-punktid-text p {
    color: #fff !important;
    opacity: 0.92;
}

.kp-punktid-text p:last-child {
    margin-bottom: 0;
}

/* Solo (üksikvaade) — punktide tekst ei ole laiuselt piiratud, kõik sisutekst valge */
.kp-solo .kp-punktid-text p {
    max-width: none !important;
}

.kp-solo p,
.kp-solo .kp-punktid-text p {
    color: #fff !important;
    opacity: 1 !important;
}