:root{ --mp-promien:12px; }

/* --------------------------------------------------------------
   KAFLE WEDŁUG BUDŻETU
   Paleta i typografia jak w sekcji otwierającej:
   #141210, #BFA08E, #D1BAA9, #6C6866, biel
-------------------------------------------------------------- */
#mp-budzety{
  --czern:#141210;
  --zloty:#BFA08E;
  --zloty-jasny:#D1BAA9;
  --tekst:#6C6866;
  --biel:#FFFFFF;
  --display:'Outfit',ui-sans-serif,system-ui,sans-serif;
  --body:'DM Sans',ui-sans-serif,system-ui,sans-serif;
  font-family:var(--body);color:var(--tekst);background:var(--biel);line-height:1.6;
  position:relative;
  left:50%;
  width:calc(100vw - var(--mp-pasek, 0px));
  max-width:calc(100vw - var(--mp-pasek, 0px));
  margin-left:calc((100vw - var(--mp-pasek, 0px)) / -2);
  margin-right:calc((100vw - var(--mp-pasek, 0px)) / -2);
  padding:64px 0 72px;
}
#mp-budzety *{box-sizing:border-box}
#mp-budzety a{text-decoration:none;color:inherit}
#mp-budzety :focus-visible{outline:2px solid var(--zloty);outline-offset:3px}

.mpb-wrap{max-width:1400px;margin:0 auto;padding:0 24px}
.mpb-naglowek-wrap{max-width:1180px;margin:0 auto}

.mpb-naglowek{text-align:center;max-width:none;margin:0 auto 44px}
.mpb-eyebrow{font-family:var(--display);font-size:11px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--zloty)}
/* pierwsza linia nagłówka nie łamie się — stopień pisma dopasowuje się do szerokości */
.mpb-naglowek h2{font-family:var(--display);font-weight:300;letter-spacing:-.025em;color:var(--czern);
  font-size:clamp(22px,3.4vw,44px);line-height:1.14;margin:12px auto 14px;max-width:none}
.mpb-naglowek h2 .mpb-linia{display:block;white-space:nowrap}
/* akapit w dwóch liniach na szerokim ekranie */
.mpb-naglowek p{margin:0 auto;font-size:15.5px;max-width:96ch;text-wrap:pretty}
.mpb-zloty{display:block;color:var(--zloty);margin-top:2px}

.mpb-siatka{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

.mpb-kafel{display:flex;flex-direction:column;background:var(--czern);overflow:hidden;
  border-radius:var(--mp-promien, 12px);transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.mpb-kafel:hover{transform:translateY(-4px)}

.mpb-foto{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--zloty-jasny)}
.mpb-foto img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.mpb-kafel:hover .mpb-foto img{transform:scale(1.05)}

.mpb-opis{padding:24px 22px 26px;display:flex;flex-direction:column;flex:1;color:var(--biel)}
.mpb-kwota{font-family:var(--display);font-weight:400;font-size:clamp(21px,1.7vw,26px);
  letter-spacing:-.02em;color:var(--biel);margin:0 0 6px;line-height:1.1}
.mpb-podpis{font-size:13.5px;color:var(--zloty);margin:0 0 20px}

.mpb-btn{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:999px;padding:12px 20px;font-family:var(--display);font-weight:600;font-size:14px;
  transition:all .22s ease}

/* kolory odporne na style motywu */
#mp-budzety .mpb-btn,
#mp-budzety .mpb-btn:focus{background:var(--zloty) !important;color:var(--czern) !important;
  border:1px solid var(--zloty) !important}
#mp-budzety .mpb-btn:hover,
#mp-budzety .mpb-btn:active{background:var(--biel) !important;color:var(--czern) !important;
  border-color:var(--biel) !important}

@media(max-width:1080px){
  .mpb-siatka{grid-template-columns:repeat(2,1fr)}
  .mpb-naglowek p{max-width:62ch}
}
/* na wąskich ekranach jedna linia byłaby nieczytelna — pozwalamy jej się złamać */
@media(max-width:640px){
  .mpb-naglowek h2 .mpb-linia{white-space:normal}
  .mpb-naglowek h2{font-size:clamp(21px,5.6vw,30px)}
}
@media(max-width:560px){
  #mp-budzety{padding:44px 0 50px}
  .mpb-siatka{grid-template-columns:1fr;gap:12px}
  .mpb-foto{aspect-ratio:3/2}
}
@media (prefers-reduced-motion: reduce){ #mp-budzety *{transition:none !important} }