/*
Theme Name: MotoBlog
Theme URI: http://pan-mechanik.com.pl/
Description: Autorski motyw bloga motoryzacyjnego — czerwony akcent, rozbudowany i urozmaicony listing wpisów. Responsywny (mobile + desktop).
Author: SemTree
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: motoblog
*/

/* ============================================================
   1. TOKENY
   ============================================================ */
:root{
  --red:#D72638; --red-600:#B01C2A; --red-700:#8E1622; --red-050:#FCEBED;
  --ink:#15171C; --ink-800:#1E212A; --ink-600:#343A46; --ink-400:#5A616F;
  --paper:#FFFFFF; --mist:#F5F6F9; --mist-2:#EEF0F4; --line:#E6E8EE;
  --muted:#6B7280; --white:#fff;
  --sh-sm:0 1px 2px rgba(20,22,28,.06), 0 1px 3px rgba(20,22,28,.05);
  --sh-md:0 6px 18px rgba(20,22,28,.08), 0 2px 6px rgba(20,22,28,.05);
  --sh-lg:0 20px 50px rgba(20,22,28,.16), 0 8px 20px rgba(20,22,28,.08);
  --r:16px; --r-sm:10px; --r-lg:22px; --r-pill:999px;
  --maxw:1200px; --gut:clamp(16px,4vw,40px);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --disp:'Sora',var(--font);
}

/* ============================================================
   2. RESET / BAZA
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--disp); font-weight:700; line-height:1.12; letter-spacing:-.02em; margin:0}
p{margin:0 0 1.1em}
button{font-family:inherit}
::selection{background:var(--red); color:#fff}

.mb-container{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
.mb-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--disp); font-weight:700; font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--red);
}
.mb-eyebrow::before{content:""; width:22px; height:2px; background:var(--red); border-radius:2px}
.mb-sectionhead{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:0 0 26px}
.mb-sectionhead h2{font-size:clamp(1.5rem,3.2vw,2.15rem)}
.mb-sectionhead .mb-more{font-family:var(--disp); font-weight:600; font-size:.9rem; color:var(--red); white-space:nowrap}
.mb-sectionhead .mb-more:hover{color:var(--red-700)}

/* ============================================================
   3. PRZYCISKI / CHIPY
   ============================================================ */
.mb-btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--disp); font-weight:600; font-size:.95rem;
  padding:13px 22px; border-radius:var(--r-pill); border:0; cursor:pointer;
  background:var(--red); color:#fff; transition:transform .15s, box-shadow .2s, background .2s;
  box-shadow:0 6px 16px rgba(215,38,56,.28);
}
.mb-btn:hover{background:var(--red-600); transform:translateY(-2px); box-shadow:0 10px 22px rgba(215,38,56,.34)}
.mb-btn--ghost{background:transparent; color:var(--ink); box-shadow:none; border:1.5px solid var(--line)}
.mb-btn--ghost:hover{background:var(--ink); color:#fff; border-color:var(--ink)}
.mb-btn svg{width:16px; height:16px}

.mb-chip{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--disp); font-weight:600; font-size:.8rem; letter-spacing:.01em;
  padding:7px 14px; border-radius:var(--r-pill);
  background:var(--red-050); color:var(--red-700);
}
.mb-chip--ink{background:rgba(255,255,255,.14); color:#fff; backdrop-filter:blur(4px)}
.mb-chip--count b{opacity:.6; font-weight:600}

/* ============================================================
   4. HEADER / NAWIGACJA
   ============================================================ */
.mb-header{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.86); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--line)}
.mb-header__bar{display:flex; align-items:center; gap:24px; height:74px}
.mb-logo{display:flex; align-items:center; gap:12px; font-family:var(--disp); font-weight:800; letter-spacing:-.02em}
.mb-logo img{width:42px; height:42px; border-radius:11px}
.mb-logo__txt{display:flex; flex-direction:column; line-height:1}
.mb-logo__txt b{font-size:1.06rem; color:var(--ink)}
.mb-logo__txt span{font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-top:3px}
.mb-nav{display:flex; align-items:center; gap:4px; margin-left:auto}
.mb-nav a{font-family:var(--disp); font-weight:600; font-size:.94rem; padding:10px 15px; border-radius:10px; color:var(--ink-600); transition:color .15s, background .15s}
.mb-nav a:hover, .mb-nav .current-menu-item>a{color:var(--red); background:var(--red-050)}
.mb-header__cta{margin-left:6px}
.mb-burger{display:none; margin-left:auto; width:46px; height:46px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px}
.mb-burger span{width:20px; height:2px; background:var(--ink); border-radius:2px; transition:.25s}
body.mb-menu-open .mb-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.mb-menu-open .mb-burger span:nth-child(2){opacity:0}
body.mb-menu-open .mb-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobilne menu */
.mb-mobile{position:fixed; inset:74px 0 0 0; background:#fff; z-index:55; transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); padding:26px var(--gut); overflow-y:auto; display:flex; flex-direction:column; gap:6px}
body.mb-menu-open .mb-mobile{transform:translateX(0)}
.mb-mobile a{font-family:var(--disp); font-weight:600; font-size:1.15rem; padding:16px 12px; border-bottom:1px solid var(--line); color:var(--ink); display:flex; justify-content:space-between; align-items:center}
.mb-mobile a:hover{color:var(--red)}
.mb-mobile .mb-btn{margin-top:18px; justify-content:center}

/* ============================================================
   5. HERO (wyróżniony wpis)
   ============================================================ */
.mb-hero{padding:clamp(28px,5vw,56px) 0 clamp(20px,3vw,34px)}
.mb-hero__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,52px); align-items:center}
.mb-hero__media{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-lg); aspect-ratio:3/2; background:var(--mist)}
.mb-hero__media img{width:100%; height:100%; object-fit:cover; transition:transform .6s}
.mb-hero__media:hover img{transform:scale(1.04)}
.mb-hero__media .mb-chip{position:absolute; top:18px; left:18px}
.mb-hero__eyebrow{margin-bottom:16px}
.mb-hero h1{font-size:clamp(2rem,4.4vw,3.3rem); margin:0 0 18px}
.mb-hero h1 a:hover{color:var(--red)}
.mb-hero__excerpt{font-size:1.08rem; color:var(--ink-400); margin:0 0 22px; max-width:46ch}
.mb-meta{display:flex; align-items:center; gap:14px; font-size:.86rem; color:var(--muted); font-weight:500}
.mb-meta__dot{width:4px; height:4px; border-radius:50%; background:var(--line)}
.mb-hero__foot{display:flex; align-items:center; gap:22px; margin-top:26px; flex-wrap:wrap}

/* ============================================================
   6. PASEK KATEGORII
   ============================================================ */
.mb-cats{padding:8px 0 30px}
.mb-cats__row{display:flex; gap:10px; flex-wrap:wrap}
.mb-cats__row a{
  font-family:var(--disp); font-weight:600; font-size:.88rem;
  padding:10px 17px; border-radius:var(--r-pill); border:1.5px solid var(--line);
  color:var(--ink-600); background:#fff; transition:.18s; white-space:nowrap;
}
.mb-cats__row a:hover{border-color:var(--red); color:var(--red); background:var(--red-050); transform:translateY(-1px)}
.mb-cats__row a b{opacity:.45; font-weight:600; margin-left:5px}

/* ============================================================
   7. SIATKA WPISÓW / KARTY
   ============================================================ */
.mb-section{padding:clamp(34px,6vw,64px) 0}
.mb-section--mist{background:var(--mist)}
.mb-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:26px}

.mb-card{background:#fff; border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-sm); border:1px solid var(--line); display:flex; flex-direction:column; transition:transform .2s, box-shadow .25s}
.mb-card:hover{transform:translateY(-5px); box-shadow:var(--sh-md)}
.mb-card__media{position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--mist)}
.mb-card__media img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.mb-card:hover .mb-card__media img{transform:scale(1.05)}
.mb-card__media .mb-chip{position:absolute; top:14px; left:14px}
.mb-card__body{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1}
.mb-card__body h3{font-size:1.24rem; margin:0 0 10px}
.mb-card__body h3 a:hover{color:var(--red)}
.mb-card__excerpt{color:var(--ink-400); font-size:.96rem; margin:0 0 18px}
.mb-card__foot{margin-top:auto; display:flex; align-items:center; gap:12px; font-size:.82rem; color:var(--muted); font-weight:500}

/* karta pozioma (wyróżnienia) */
.mb-feat{display:grid; grid-template-columns:1fr 1fr; gap:26px}
.mb-fcard{display:grid; grid-template-columns:minmax(0,1fr); background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-sm); transition:transform .2s, box-shadow .25s}
.mb-fcard:hover{transform:translateY(-5px); box-shadow:var(--sh-md)}
.mb-fcard__media{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--mist)}
.mb-fcard__media img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.mb-fcard:hover .mb-fcard__media img{transform:scale(1.05)}
.mb-fcard__media .mb-chip{position:absolute; top:14px; left:14px}
.mb-fcard__body{padding:22px 24px 26px}
.mb-fcard__body h3{font-size:1.4rem; margin:0 0 12px}
.mb-fcard__body h3 a:hover{color:var(--red)}
.mb-fcard__body p{color:var(--ink-400); font-size:1rem; margin:0 0 16px}

/* ============================================================
   8. MOZAIKA TEMATÓW
   ============================================================ */
.mb-topics{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.mb-topic{
  position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:26px;
  min-height:150px; padding:20px; border-radius:var(--r); overflow:hidden;
  background:var(--ink); color:#fff; transition:transform .2s;
}
.mb-topic:nth-child(3n+1){background:linear-gradient(150deg,#1B1E25,#2A2E37)}
.mb-topic:nth-child(3n+2){background:linear-gradient(150deg,var(--red),var(--red-700))}
.mb-topic:nth-child(3n+3){background:linear-gradient(150deg,#22262F,#14161A)}
.mb-topic:hover{transform:translateY(-4px)}
.mb-topic__ico{width:38px; height:38px; border-radius:11px; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center}
.mb-topic__ico svg{width:20px; height:20px; stroke:#fff}
.mb-topic__name{font-family:var(--disp); font-weight:700; font-size:1.08rem; line-height:1.2}
.mb-topic__count{font-size:.78rem; opacity:.7; font-weight:500}
.mb-topic__arrow{position:absolute; top:20px; right:20px; opacity:.5; transition:.2s}
.mb-topic:hover .mb-topic__arrow{opacity:1; transform:translate(3px,-3px)}

/* ============================================================
   9. PASMO "O BLOGU"
   ============================================================ */
.mb-about__grid{display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center}
.mb-about__logo{width:112px; height:112px; border-radius:26px; box-shadow:var(--sh-md)}
.mb-about h2{font-size:clamp(1.5rem,3vw,2rem); margin:0 0 12px}
.mb-about p{color:var(--ink-400); margin:0 0 16px; max-width:64ch}

/* ============================================================
   10. CTA (czerwone pasmo)
   ============================================================ */
.mb-cta{position:relative; overflow:hidden; background:linear-gradient(135deg,var(--red),var(--red-700)); color:#fff; border-radius:var(--r-lg); padding:clamp(34px,6vw,60px); text-align:center}
.mb-cta::before, .mb-cta::after{content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.08)}
.mb-cta::before{width:280px; height:280px; top:-120px; right:-60px}
.mb-cta::after{width:200px; height:200px; bottom:-110px; left:-40px}
.mb-cta__inner{position:relative; z-index:1; max-width:640px; margin-inline:auto}
.mb-cta h2{font-size:clamp(1.6rem,3.6vw,2.5rem); margin:0 0 14px; color:#fff}
.mb-cta p{color:rgba(255,255,255,.9); font-size:1.06rem; margin:0 0 26px}
.mb-cta .mb-btn{background:#fff; color:var(--red-700); box-shadow:0 10px 24px rgba(0,0,0,.18)}
.mb-cta .mb-btn:hover{background:var(--ink); color:#fff}

/* ============================================================
   11. STOPKA
   ============================================================ */
.mb-footer{background:var(--ink); color:#B9BEC9; padding:clamp(40px,6vw,64px) 0 28px; margin-top:0}
.mb-footer__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px}
.mb-footer__brand .mb-logo__txt b{color:#fff}
.mb-footer__brand p{margin:16px 0 0; max-width:40ch; font-size:.92rem; color:#8A909C}
.mb-footer h4{color:#fff; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; margin:0 0 16px; font-family:var(--disp)}
.mb-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.mb-footer ul a{font-size:.94rem; color:#B9BEC9; transition:color .15s}
.mb-footer ul a:hover{color:var(--red)}
.mb-footer ul a b{opacity:.45; font-weight:500}
.mb-footer__bottom{margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,.09); display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:.84rem; color:#7C828E; flex-wrap:wrap}
.mb-footer__bottom a{color:#B9BEC9}
.mb-footer__bottom a:hover{color:var(--red)}

/* ============================================================
   12. WPIS / STRONA / ARCHIWUM
   ============================================================ */
.mb-single{padding:clamp(26px,4vw,44px) 0 0}
.mb-crumbs{font-size:.82rem; color:var(--muted); margin-bottom:20px; display:flex; gap:8px; flex-wrap:wrap}
.mb-crumbs a:hover{color:var(--red)}
.mb-article__head{max-width:760px; margin:0 auto 30px; text-align:center}
.mb-article__head h1{font-size:clamp(2rem,4.4vw,3rem); margin:16px 0 18px}
.mb-article__head .mb-meta{justify-content:center}
.mb-article__hero{max-width:1040px; margin:0 auto 40px; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-lg); aspect-ratio:2/1; background:var(--mist)}
.mb-article__hero img{width:100%; height:100%; object-fit:cover}
.mb-article__body{max-width:720px; margin:0 auto; font-size:1.08rem; line-height:1.75}
.mb-article__body>*{margin-bottom:1.25em}
.mb-article__body h2{font-size:1.6rem; margin:1.6em 0 .5em}
.mb-article__body h3{font-size:1.28rem; margin:1.4em 0 .4em}
.mb-article__body ul,.mb-article__body ol{padding-left:1.3em}
.mb-article__body li{margin-bottom:.5em}
.mb-article__body a{color:var(--red); text-decoration:underline; text-underline-offset:2px}
.mb-article__body blockquote{margin:1.5em 0; padding:6px 0 6px 22px; border-left:3px solid var(--red); font-style:italic; color:var(--ink-600)}
.mb-article__body img{border-radius:var(--r-sm); margin-block:1.4em}
.mb-tags{max-width:720px; margin:34px auto 0; display:flex; gap:8px; flex-wrap:wrap}
.mb-share{max-width:720px; margin:26px auto 0; padding-top:24px; border-top:1px solid var(--line); display:flex; align-items:center; gap:14px; color:var(--muted); font-size:.9rem}

.mb-pagehead{padding:clamp(30px,5vw,52px) 0 8px; text-align:center}
.mb-pagehead h1{font-size:clamp(1.9rem,4vw,2.8rem); margin:12px 0 10px}
.mb-pagehead p{color:var(--ink-400); max-width:60ch; margin-inline:auto}

.mb-page{max-width:760px; margin:0 auto; padding:8px 0 10px}
.mb-page__body{font-size:1.06rem; line-height:1.75}
.mb-page__body h2{font-size:1.5rem; margin:1.5em 0 .4em}
.mb-page__body a{color:var(--red); text-decoration:underline}

/* ============================================================
   13. RESPONSYWNOŚĆ
   ============================================================ */
@media(max-width:960px){
  .mb-hero__grid{grid-template-columns:1fr; gap:26px}
  .mb-hero__media{order:-1}
  .mb-topics{grid-template-columns:repeat(2,1fr)}
  .mb-footer__grid{grid-template-columns:1fr 1fr}
  .mb-about__grid{grid-template-columns:1fr; text-align:center; justify-items:center}
}
@media(max-width:820px){
  .mb-nav,.mb-header__cta{display:none}
  .mb-burger{display:flex}
  .mb-feat{grid-template-columns:1fr}
}
@media(max-width:560px){
  body{font-size:16px}
  .mb-header__bar{height:64px}
  .mb-mobile{inset:64px 0 0 0}
  .mb-grid{grid-template-columns:1fr; gap:20px}
  .mb-topics{grid-template-columns:1fr 1fr; gap:12px}
  .mb-footer__grid{grid-template-columns:1fr; gap:30px}
  .mb-footer__bottom{flex-direction:column; text-align:center}
  .mb-logo__txt span{display:none}
  .mb-sectionhead{flex-direction:column; align-items:flex-start; gap:6px}
}

/* ---- Poprawki po QA ---- */
.mb-nav{list-style:none; padding:0}
.mb-nav>li{list-style:none; margin:0}
.mb-hero__media .mb-chip, .mb-fcard__media .mb-chip, .mb-card__media .mb-chip{
  background:var(--red); color:#fff; box-shadow:0 4px 12px rgba(0,0,0,.20);
}