/* ══ PlanMuzyczny BLOG — prefiks mbg- ══════════════════════════════════════
   Wszystkie reguły są oparte na klasach z prefixem mbg- lub osadzone
   w kontekście .mbg-s — żaden globalny tag (nav, article, aside) nie
   jest używany jako selektor, by uniknąć kolizji z globalnym style.css
   ════════════════════════════════════════════════════════════════════════ */

/* ── Sekcja główna ── */
.mbg-s  { padding: 3rem 0; background: #faf9f7; box-sizing: border-box }
.mbg-w  { max-width: 1200px; margin: 0 auto; padding: 0 1.4rem; box-sizing: border-box }

/* ── Breadcrumb ── */
.mbg-bread       { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.5rem; font-size: .82rem }
.mbg-bread-link  { color: #6b7280; text-decoration: none; transition: color .15s }
.mbg-bread-link:hover { color: #0d0d0d }
.mbg-bread-sep   { color: #d1d5db }
.mbg-bread-cur   { color: #0d0d0d; font-weight: 600 }

/* ── Intro (strona główna bloga) ── */
.mbg-intro      { margin-bottom: 2.5rem }
.mbg-intro-chip { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #e8440f; margin-bottom: .5rem }
.mbg-intro-h2   { font-size: 1.85rem; font-weight: 800; color: #0d0d0d; margin: 0 0 .5rem; line-height: 1.25 }
.mbg-intro-p    { font-size: .95rem; color: #6b7280; max-width: 600px; margin: 0 }

/* ══════════════════════════════════════════════════════════════════════
   KAFLE KATEGORII (strona główna bloga)
   ══════════════════════════════════════════════════════════════════════ */
.mbg-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.mbg-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--tile-grad, #fff);
  border: 1.5px solid var(--tile-border, #e5e2d9);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .25s;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  min-height: 200px;
  will-change: transform;
}
.mbg-tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
  border-color: var(--tile-accent, #e8440f);
}

/* Pasek kolorowy na górze kafla */
.mbg-tile-accent-bar {
  height: 4px;
  width: 100%;
  flex-shrink: 0;
  border-radius: 18px 18px 0 0;
  transition: height .25s;
}
.mbg-tile:hover .mbg-tile-accent-bar { height: 6px }

.mbg-tile-inner {
  padding: 1.5rem 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.mbg-tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.mbg-tile-emoji {
  font-size: 2.2rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.1));
  transition: transform .25s;
}
.mbg-tile:hover .mbg-tile-emoji { transform: scale(1.12) rotate(-4deg) }

.mbg-tile-cnt {
  font-size: .75rem;
  font-weight: 700;
  background: rgba(255,255,255,.7);
  border: 1px solid var(--tile-border, #e5e2d9);
  padding: .22rem .65rem;
  border-radius: 100px;
  white-space: nowrap;
}

.mbg-tile-h3 {
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 .55rem;
}

.mbg-tile-p {
  font-size: .86rem;
  color: #6b7280;
  line-height: 1.6;
  margin: 0 0 1rem;
  flex: 1;
}

/* Podkategorie jako tagi */
.mbg-tile-subs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .9rem;
}
.mbg-tile-sub {
  font-size: .72rem;
  font-weight: 600;
  color: #6b7280;
  background: rgba(255,255,255,.8);
  border: 1px solid #e5e2d9;
  padding: .15rem .55rem;
  border-radius: 100px;
}

.mbg-tile-go {
  font-size: .84rem;
  font-weight: 700;
  margin-top: auto;
  transition: letter-spacing .2s, gap .2s;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.mbg-tile:hover .mbg-tile-go { letter-spacing: .03em }

/* ══════════════════════════════════════════════════════════════════════
   LAYOUT DWUKOLUMNOWY (kategoria + artykuł)
   ══════════════════════════════════════════════════════════════════════ */
.mbg-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

/* Sidebar */
.mbg-sidebar {
  width: 250px;
  min-width: 250px;
  max-width: 250px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.mbg-main { flex: 1; min-width: 0 }
.mbg-art  { flex: 1; min-width: 0; animation: mbgIn .4s cubic-bezier(.22,1,.36,1) both }

/* ── Nagłówek kategorii (w widoku listy) ── */
.mbg-kat-hero {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.4rem 1.6rem;
  border: 1.5px solid;
  border-radius: 16px;
  margin-bottom: 2rem;
}
.mbg-kat-hero-emoji { font-size: 2.5rem; line-height: 1; flex-shrink: 0 }
.mbg-kat-hero-body  { flex: 1; min-width: 0 }
.mbg-kat-hero-h1    { font-size: 1.45rem; font-weight: 800; margin: 0 0 .25rem; line-height: 1.2 }
.mbg-kat-hero-p     { font-size: .88rem; color: #6b7280; margin: 0; line-height: 1.5 }
.mbg-kat-hero-cnt   { font-size: 2rem; font-weight: 800; line-height: 1; text-align: center; flex-shrink: 0 }
.mbg-kat-hero-cnt span { display: block; font-size: .72rem; font-weight: 600; color: #9ca3af; margin-top: .1rem }

/* ══════════════════════════════════════════════════════════════════════
   SIDEBAR — bloki
   ══════════════════════════════════════════════════════════════════════ */
.mbg-sidebar-block {
  background: #fff;
  border: 1.5px solid #e5e2d9;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.mbg-sb-head {
  padding: .55rem 1rem;
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #9ca3af;
  background: linear-gradient(135deg, #f9f8f5, #fff);
  border-bottom: 1px solid #e5e2d9;
}

/* Badge aktywnej kategorii w sidebarze */
.mbg-sidebar-kat {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1rem;
  border: 1.5px solid;
  border-radius: 14px;
  background: #fff;
}
.mbg-sidebar-kat-emoji { font-size: 1.6rem; line-height: 1; flex-shrink: 0 }
.mbg-sidebar-kat-label { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #9ca3af; margin-bottom: .15rem }
.mbg-sidebar-kat-name  { font-size: .9rem; font-weight: 800; line-height: 1.2 }

/* Linki nawigacji (podkategorie / inne kategorie) */
.mbg-snav-link,
.mbg-snav-other {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .58rem 1rem;
  font-size: .84rem;
  font-weight: 600;
  color: #374151;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.mbg-snav-link:hover,
.mbg-snav-other:hover { background: #f9f8f5; color: #0d0d0d }
.mbg-snav-link--on    { color: #e8440f; border-left-color: #e8440f; background: #fff8f5; font-weight: 700 }

.mbg-snav-other { border-left-width: 3px; border-left-style: solid }

.mbg-snav-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.mbg-snav-cnt  {
  font-size: .7rem;
  font-weight: 700;
  color: #9ca3af;
  background: #f4f2ec;
  padding: .12rem .45rem;
  border-radius: 100px;
  flex-shrink: 0;
}

/* Artykuły w sidebarze (widok artykułu) */
.mbg-sal {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .6rem 1rem;
  text-decoration: none;
  color: #374151;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.mbg-sal + .mbg-sal { border-top: 1px solid #f0ede5 }
.mbg-sal:hover      { background: #f9f8f5; color: #0d0d0d; border-left-color: #e5e2d9 }
.mbg-sal--cur       { background: #fff8f5; border-left-color: #e8440f; color: #e8440f }

.mbg-sal-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  margin-top: .4rem;
  opacity: .4;
}
.mbg-sal--cur .mbg-sal-dot { opacity: 1 }
.mbg-sal-body { display: flex; flex-direction: column; min-width: 0 }
.mbg-sal-t    { font-size: .81rem; font-weight: 600; line-height: 1.35; word-break: break-word }
.mbg-sal-m    { font-size: .68rem; color: #9ca3af; margin-top: .1rem }
.mbg-sal--cur .mbg-sal-m { color: #f4a97a }

/* Przycisk powrotu */
.mbg-sidebar-back {
  display: block;
  text-align: center;
  padding: .5rem 1rem;
  font-size: .8rem;
  font-weight: 600;
  color: #6b7280;
  text-decoration: none;
  border: 1.5px solid #e5e2d9;
  border-radius: 10px;
  background: #fff;
  transition: color .15s, border-color .15s, background .15s;
}
.mbg-sidebar-back:hover { color: #e8440f; border-color: #e8440f; background: #fff8f5 }

/* ══════════════════════════════════════════════════════════════════════
   LISTA ARTYKUŁÓW (widok kategorii)
   ══════════════════════════════════════════════════════════════════════ */
.mbg-alist { display: flex; flex-direction: column; gap: 1rem }

.mbg-alist-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.2rem 1.4rem;
  background: #fff;
  border: 1.5px solid #e5e2d9;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  box-shadow: 0 1px 6px rgba(0,0,0,.04);
}
.mbg-alist-item:hover {
  border-color: #e8440f;
  box-shadow: 0 6px 24px rgba(232,68,15,.1);
  transform: translateX(4px);
}

.mbg-alist-body { flex: 1; min-width: 0 }

.mbg-alist-meta {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .45rem;
  flex-wrap: wrap;
}
.mbg-alist-tag {
  font-size: .71rem;
  font-weight: 700;
  padding: .15rem .55rem;
  border-radius: 100px;
  border: 1px solid;
  white-space: nowrap;
}
.mbg-alist-time { font-size: .72rem; color: #9ca3af }

.mbg-alist-h3 {
  font-size: 1.04rem;
  font-weight: 700;
  color: #0d0d0d;
  margin: 0 0 .4rem;
  line-height: 1.4;
}
.mbg-alist-ex {
  font-size: .86rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mbg-alist-go {
  font-size: .85rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: letter-spacing .2s;
  white-space: nowrap;
}
.mbg-alist-item:hover .mbg-alist-go { letter-spacing: .04em }

/* ══════════════════════════════════════════════════════════════════════
   ARTYKUŁ
   ══════════════════════════════════════════════════════════════════════ */
.mbg-ameta  { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; flex-wrap: wrap }
.mbg-badge  { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .8rem; border-radius: 100px; font-size: .78rem; font-weight: 700; border: 1.5px solid; text-decoration: none; transition: opacity .15s }
.mbg-badge:hover { opacity: .85 }
.mbg-atime  { font-size: .79rem; color: #9ca3af }
.mbg-ah1    { font-size: 1.75rem; font-weight: 800; line-height: 1.28; color: #0d0d0d; margin: 0 0 .5rem }
.mbg-atemat { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #9ca3af; margin: .2rem 0 .5rem }
.mbg-alead  { font-size: 1rem; color: #4b5563; font-style: italic; line-height: 1.65; border-left: 3px solid #e8440f; padding: .6rem 1rem; margin: 0 0 1.5rem; background: #fff8f5; border-radius: 0 8px 8px 0 }
.mbg-abody  { font-size: .97rem; line-height: 1.8; color: #1f2937; white-space: pre-wrap; word-break: break-word }
.mbg-abody p,.mbg-abody h2,.mbg-abody h3,.mbg-abody ul,.mbg-abody ol,.mbg-abody blockquote { white-space: normal }
.mbg-abody h2 { font-size: 1.22rem; font-weight: 700; margin: 2rem 0 .6rem; color: #0d0d0d; padding-bottom: .35rem; border-bottom: 2px solid #f0ede5 }
.mbg-abody h3 { font-size: 1.03rem; font-weight: 700; margin: 1.4rem 0 .4rem; color: #0d0d0d }
.mbg-abody a  { color: #e8440f; text-decoration: underline }
.mbg-abody strong { font-weight: 700 }
.mbg-abody ul,.mbg-abody ol { padding-left: 1.5rem; margin: .5rem 0 }
.mbg-abody li { margin-bottom: .35rem }
.mbg-abody blockquote { border-left: 3px solid #e8440f; padding: .6rem 1rem; margin: 1.2rem 0; background: #fff8f5; border-radius: 0 10px 10px 0; color: #4b5563; font-style: italic }
.mbg-abody img { max-width: 100%; height: auto; border-radius: 8px; margin: .75rem 0; display: block }

/* Zdjęcie wyróżniające artykułu (hero) */
.mbg-art-hero {
  margin: 0 0 1.5rem;
  border-radius: 14px;
  overflow: hidden;
  height: 360px;
  max-height: 400px;
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
  background: #f0ede5;       /* placeholder przed załadowaniem */
}
.mbg-art-hero-img {
  width: 100%;
  height: 100%;
  max-height: 400px;
  object-fit: cover;
  display: block;
  will-change: auto;
}

/* Miniatura artykułu na liście */
.mbg-alist-thumb {
  width: 90px;
  height: 72px;
  min-width: 90px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f0ede5;
}
.mbg-alist-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mbg-alist-thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mbg-afoot  { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #e5e2d9 }
.mbg-fbtn   { display: inline-flex; align-items: center; gap: .4rem; padding: .52rem 1.2rem; background: #fff; border: 1.5px solid #e5e2d9; border-radius: 9px; font-size: .86rem; font-weight: 600; color: #374151; text-decoration: none; transition: all .2s }
.mbg-fbtn:hover { border-color: #e8440f; color: #e8440f; background: #fff8f5 }

/* ── Puste stany ── */
.mbg-empty { color: #9ca3af; text-align: center; padding: 3rem 0; font-size: .95rem }

/* ── Mobile — przewijane linki artykułów ── */
.mbg-mobile { display: none }

/* ── Animacje ── */
@keyframes mbgUp { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) } }
@keyframes mbgIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: translateY(0) } }
.mbg-anim-up { animation: mbgUp .5s cubic-bezier(.22,1,.36,1) both; will-change: transform, opacity }

/* ══════════════════════════════════════════════════════════════════════
   IKONKI (pomocnicze)
   ══════════════════════════════════════════════════════════════════════ */
.mbg-ico-img   { width: 1.05rem; height: 1.05rem; display: inline-block; flex-shrink: 0; object-fit: contain; vertical-align: -.18rem; max-width: 1.05rem; max-height: 1.05rem }
.mbg-ico-emoji { line-height: 1 }

/* ── Kafel SVG ikona ── */
.mbg-tile-svg { display: block; overflow: visible; flex-shrink: 0; will-change: transform }

/* ── Globalne keyframes animacji ikon SVG ── */
@keyframes mbgFloat  { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-4px) rotate(3deg)} }
@keyframes mbgPulse  { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.06);opacity:.88} }
@keyframes mbgSpin   { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes mbgDraw   { to{stroke-dashoffset:0} }
@keyframes mbgPop    { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes mbgFadeIn { from{opacity:0} to{opacity:1} }
@keyframes mbgGrow   { to{transform:scaleY(1)} }
@keyframes mbgRay    { 0%,100%{opacity:.6;transform:scaleX(1)} 50%{opacity:1;transform:scaleX(1.3)} }
@keyframes mbgSlide  { from{transform:translateY(10px);opacity:0} to{transform:translateY(0);opacity:1} }

/* ══════════════════════════════════════════════════════════════════════
   RESPONSYWNOŚĆ
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .mbg-tiles { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 768px) {
  .mbg-layout  { flex-direction: column; gap: 1.2rem }
  .mbg-sidebar { display: none }
  .mbg-art, .mbg-main { width: 100% }
  .mbg-mobile {
    display: flex; gap: .5rem; overflow-x: auto;
    padding: .5rem 0 .75rem; margin-bottom: 1.25rem;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .mbg-mobile::-webkit-scrollbar { display: none }
  .mbg-ml {
    display: inline-block; white-space: nowrap;
    font-size: .77rem; font-weight: 600;
    padding: .35rem .85rem; border-radius: 100px;
    border: 1.5px solid #e5e2d9; background: #fff; color: #374151;
    text-decoration: none; flex-shrink: 0;
    transition: border-color .18s, color .18s;
  }
  .mbg-ml--cur { background: #e8440f; border-color: #e8440f; color: #fff }
  .mbg-ah1     { font-size: 1.4rem }
  .mbg-kat-hero { flex-wrap: wrap }
  .mbg-kat-hero-cnt { display: none }
  .mbg-alist-go { display: none }
  .mbg-alist-thumb { width: 70px; height: 56px; min-width: 70px }
  .mbg-art-hero { height: 220px; max-height: 260px }
  .mbg-art-hero-img { max-height: 260px }
}
@media (max-width: 560px) {
  .mbg-tiles     { grid-template-columns: 1fr }
  .mbg-ah1       { font-size: 1.2rem }
  .mbg-intro-h2  { font-size: 1.45rem }
  .mbg-tile-inner { padding: 1.2rem }
}