
/* KENDOS – Pobierz Uprawnienia
   Unikalny prefiks kpu- zapobiega konfliktom z pozostałymi modułami. */

.kpu-section{
    --kpu-bg:#f7f7f7;
    --kpu-red:#d40000;
    --kpu-yellow:#f5c400;
    --kpu-cols:2;
    width:100%;
    margin:0;
    padding:72px 24px 82px;
    background:var(--kpu-bg);
    color:#111;
    font-family:inherit;
    box-sizing:border-box;
}
.kpu-section *,
.kpu-section *::before,
.kpu-section *::after{box-sizing:border-box}

.kpu-inner{
    width:min(1180px,100%);
    margin:0 auto;
}

.kpu-header{
    max-width:850px;
    margin:0 auto 34px;
    text-align:center;
}
.kpu-eyebrow{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:17px;
    margin:0 0 12px;
    color:var(--kpu-red);
    font-size:13px;
    line-height:1.2;
    font-weight:700;
}
.kpu-eyebrow span{
    display:block;
    width:52px;
    height:2px;
    background:var(--kpu-red);
}
.kpu-title{
    margin:0;
    padding:0;
    color:#111;
    font-size:clamp(36px,4.2vw,54px);
    line-height:1.05;
    font-weight:700;
    letter-spacing:-.035em;
}
.kpu-intro{
    margin:15px auto 0;
    color:#444;
    font-size:16px;
    line-height:1.6;
}
.kpu-rule{
    width:118px;
    height:4px;
    margin:20px auto 0;
    display:flex;
    overflow:hidden;
}
.kpu-rule i:nth-child(1){flex:1;background:#111}
.kpu-rule i:nth-child(2){flex:1;background:var(--kpu-red)}
.kpu-rule i:nth-child(3){flex:1;background:var(--kpu-yellow)}

.kpu-grid{
    display:grid;
    grid-template-columns:repeat(var(--kpu-cols),minmax(0,1fr));
    gap:15px;
}
.kpu-card{
    position:relative;
    display:flex;
    align-items:center;
    gap:16px;
    min-height:112px;
    padding:19px 20px;
    overflow:hidden;
    border:1px solid rgba(0,0,0,.065);
    border-radius:10px;
    background:#fff;
    color:#111;
    text-decoration:none !important;
    box-shadow:0 8px 28px rgba(0,0,0,.055);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.kpu-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:5px;
    background:var(--kpu-red);
}
.kpu-card:nth-child(even)::before{background:var(--kpu-yellow)}
.kpu-card:hover,
.kpu-card:focus-visible{
    transform:translateY(-2px);
    box-shadow:0 14px 34px rgba(0,0,0,.10);
    border-color:rgba(0,0,0,.12);
}
.kpu-card:focus-visible{
    outline:3px solid var(--kpu-yellow);
    outline-offset:3px;
}
.kpu-icon{
    width:50px;
    height:50px;
    flex:0 0 50px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:var(--kpu-red);
    background:rgba(212,0,0,.075);
}
.kpu-card:nth-child(even) .kpu-icon{
    color:#a98300;
    background:rgba(245,196,0,.13);
}
.kpu-icon svg{width:25px;height:25px}
.kpu-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.kpu-name{
    color:#171717;
    font-size:15px;
    line-height:1.35;
    font-weight:650;
}
.kpu-action{
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--kpu-red);
    font-size:11px;
    line-height:1;
    font-weight:650;
    letter-spacing:.025em;
}
.kpu-card:nth-child(even) .kpu-action{color:#a98300}
.kpu-action svg{
    width:16px;
    height:16px;
    transition:transform .18s ease;
}
.kpu-card:hover .kpu-action svg{transform:translateX(3px)}

@media(max-width:900px){
    .kpu-section{padding:58px 20px 64px}
    .kpu-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
    .kpu-section{padding:46px 16px 52px}
    .kpu-header{text-align:left;margin-bottom:26px}
    .kpu-eyebrow{justify-content:flex-start;gap:11px}
    .kpu-eyebrow span{width:34px}
    .kpu-title{font-size:34px}
    .kpu-intro{font-size:15px}
    .kpu-rule{margin-left:0}
    .kpu-card{min-height:96px;padding:15px 15px 15px 18px;gap:13px}
    .kpu-icon{width:43px;height:43px;flex-basis:43px}
    .kpu-icon svg{width:21px;height:21px}
    .kpu-name{font-size:14px}
    .kpu-action{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
    .kpu-card,.kpu-action svg{transition:none}
}
