/* ==========================================================================
   LISTA WPISÓW — /blog/ oraz archiwa
   Odwzorowanie podglad-html/blog.html. Wszystkie wartości przepisane
   z inline'ów podglądu; kolory podstawione tokenami z style.css.
   Arkusz wczytuje się wyłącznie na ekranie „blog” (inc/enqueue.php).
   ========================================================================== */

.mp-blog{
  /* Odcienie z podglądu, dla których style.css nie ma jeszcze tokenu.
     Trzymane lokalnie, żeby nie dopisywać niczego do wspólnej palety. */
  --mp-blog-hairline:#EFE9E1;   /* linia pod wyróżnionym wpisem */
  --mp-blog-frame:#F4F0EA;      /* tło kadru, zanim wczyta się zdjęcie */
  --mp-blog-tile:#F0EBE3;       /* tło kadru bez zdjęcia */
  --mp-blog-tile-rule:#C9BCAB;  /* kreski w kadrze bez zdjęcia */
  --mp-blog-meta-rule:#D8CFC1;  /* kreska w metryce wyróżnionego wpisu */
  --mp-blog-kontakt-rule:#C4B7A6;
  --mp-blog-kontakt-line:#E2DAD0;
  --mp-blog-kontakt-hover:#E4DFD8;
}

/* --------------------------------------------------------------------------
   NAGŁÓWEK EKRANU
   Klasy .mp-hero są wspólne (style.css). Blog ma własny, nieco większy
   rytm — stąd nadpisania zamiast drugiego kompletu klas.
   -------------------------------------------------------------------------- */

.mp-blog .mp-hero--blog{
  padding:clamp(40px,5.4vw,78px) 0 clamp(34px,4.4vw,60px);
}
.mp-blog .mp-hero--blog .mp-hero__crumbs{
  line-height:1.7;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
}
/* Cel dotykowy okruszka — 44 px wysokości bez rozpychania linii. */
.mp-blog .mp-hero--blog .mp-hero__crumbs a{
  display:inline-flex; align-items:center; min-height:var(--mp-tap); padding:14px 0;
}
.mp-blog .mp-hero--blog .mp-hero__title{
  font-size:clamp(36px,5.4vw,76px); line-height:1.02;
}
.mp-blog .mp-hero--blog .mp-hero__lead{
  margin-top:18px; max-width:540px;
  font-size:15px; line-height:1.85; color:var(--mp-body-2);
}
.mp-blog .mp-hero--blog .mp-hero__lead p{ margin:0; }

/* --------------------------------------------------------------------------
   CHIPSY KATEGORII
   W podglądzie to <button> z aria-pressed; tutaj odnośniki do archiwów
   z aria-current — filtr zmienia adres, więc musi być linkiem.
   -------------------------------------------------------------------------- */

.mp-chips{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:clamp(16px,2.6vw,38px);
  margin-top:clamp(26px,3.4vw,44px);
}
.mp-chip{
  display:flex; align-items:center;
  min-height:var(--mp-tap); padding:0 2px;
}
.mp-chip__label{
  font:400 11px/1 var(--mp-sans);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--mp-body);
  padding-bottom:9px; border-bottom:1px solid transparent;
}
.mp-chip:hover .mp-chip__label{ color:var(--mp-ink); }
.mp-chip.is-on .mp-chip__label{
  font-weight:500; color:var(--mp-ink); border-bottom-color:var(--mp-ink);
}

/* --------------------------------------------------------------------------
   SEKCJA POWITALNA — wyróżniony najnowszy wpis
   -------------------------------------------------------------------------- */

.mp-blog__feature{ background:var(--mp-cream); padding:clamp(34px,4.6vw,72px) 0 0; }

.mp-feature{
  display:grid; grid-template-columns:1.15fr 1fr; align-items:center;
  gap:clamp(24px,3.6vw,64px);
  padding-bottom:clamp(34px,4.4vw,60px);
  border-bottom:1px solid var(--mp-blog-hairline);
}
.mp-feature__media{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:4/3; background:var(--mp-blog-frame);
}
.mp-feature__img{
  position:absolute; inset:0; display:block;
  width:100%; height:100%; object-fit:cover;
}
.mp-feature__blank{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:0 18px; background:var(--mp-blog-tile);
  font:300 clamp(24px,2.6vw,38px)/1.25 var(--mp-serif); color:var(--mp-focus);
}
.mp-feature__body{ display:flex; flex-direction:column; gap:16px; }
.mp-feature__meta{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; }
.mp-feature__kicker{
  font:400 11px/1 var(--mp-sans);
  letter-spacing:.17em; text-transform:uppercase; color:var(--mp-taupe);
}
.mp-feature__rule{ width:18px; height:1px; background:var(--mp-blog-meta-rule); }
.mp-feature__date{ font:300 12px/1 var(--mp-sans); color:var(--mp-body); }
.mp-feature__title{
  margin:0; font:300 clamp(26px,3.2vw,44px)/1.14 var(--mp-serif);
  color:var(--mp-ink); text-wrap:balance;
}
.mp-feature__lead{
  font:300 15px/1.88 var(--mp-sans); color:var(--mp-body-2);
  letter-spacing:.004em; max-width:56ch; text-wrap:pretty;
}
.mp-feature__cta{ display:flex; align-items:center; gap:16px; margin-top:6px; }
.mp-feature__cta-label{
  font:400 11px/1 var(--mp-sans);
  letter-spacing:.17em; text-transform:uppercase; color:var(--mp-ink);
  border-bottom:1px solid var(--mp-rule); padding-bottom:8px;
}
.mp-feature__time{ font:300 12px/1 var(--mp-sans); color:var(--mp-body); }

/* --------------------------------------------------------------------------
   SIATKA WPISÓW
   -------------------------------------------------------------------------- */

.mp-blog__list{
  background:var(--mp-cream);
  padding:clamp(34px,4.6vw,64px) 0 clamp(56px,8vw,110px);
}
.mp-blog__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(30px,3.6vw,54px) clamp(18px,2.6vw,40px);
}

.mp-post{ margin:0; }
.mp-post__link{ display:flex; flex-direction:column; height:100%; }
.mp-post__media{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:3/2; background:var(--mp-blog-frame);
}
/* Bez efektu na hover — podgląd nie daje kaflowi wpisu żadnego stanu
   najechania, a widoczny focus zapewnia globalne :focus-visible. */
.mp-post__img{
  position:absolute; inset:0; display:block;
  width:100%; height:100%; object-fit:cover;
}
.mp-post__blank{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; background:var(--mp-blog-tile);
}
.mp-post__blank-rule{ width:26px; height:1px; background:var(--mp-blog-tile-rule); }
.mp-post__blank-text{
  padding:0 18px; text-align:center; text-wrap:balance;
  font:300 clamp(19px,1.9vw,26px)/1.25 var(--mp-serif); color:var(--mp-bronze);
}
.mp-post__body{ padding-top:18px; display:flex; flex-direction:column; gap:10px; }
.mp-post__meta{ display:flex; align-items:center; gap:12px; }
.mp-post__cat{
  font:400 11px/1 var(--mp-sans);
  letter-spacing:.16em; text-transform:uppercase; color:var(--mp-body);
}
.mp-post__rule{ width:14px; height:1px; background:var(--mp-line-3); flex:0 0 auto; }
.mp-post__date{ font:300 12.5px/1 var(--mp-sans); color:var(--mp-muted); }
.mp-post__title{
  margin:0; font:400 clamp(18px,1.6vw,23px)/1.32 var(--mp-serif);
  color:var(--mp-ink); text-wrap:balance;
}
.mp-post__excerpt{
  font:300 13.5px/1.8 var(--mp-sans); color:var(--mp-body); text-wrap:pretty;
}
.mp-post__time{
  margin-top:2px; font:300 12.5px/1 var(--mp-sans); color:var(--mp-muted);
}

/* --------------------------------------------------------------------------
   STARSZE WPISY
   Bez JavaScriptu zwykły odnośnik do kolejnej strony, ze skryptem —
   przycisk doładowywania. Wygląd ten sam w obu przypadkach.
   -------------------------------------------------------------------------- */

.mp-blog__more{ display:flex; justify-content:center; margin-top:clamp(36px,4.6vw,62px); }
.mp-blog__more-link{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--mp-tap); padding:18px 44px;
  border:1px solid var(--mp-rule);
  font:400 11px/1 var(--mp-sans);
  letter-spacing:.17em; text-transform:uppercase; color:var(--mp-ink);
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
.mp-blog__more-link:hover{
  background:var(--mp-ink); color:var(--mp-paper); border-color:var(--mp-ink);
}
.mp-blog__more-link[aria-disabled="true"]{ pointer-events:none; opacity:.6; }

/* --------------------------------------------------------------------------
   KONTAKT
   -------------------------------------------------------------------------- */

.mp-kontakt{ background:var(--mp-band); padding:clamp(56px,8vw,116px) 0; }
.mp-kontakt__eyebrow{
  margin:0 0 20px; display:flex; align-items:center; gap:16px;
  font:400 11px/1 var(--mp-sans);
  letter-spacing:.15em; text-transform:uppercase; color:var(--mp-body);
}
.mp-kontakt__rule{ width:32px; height:1px; background:var(--mp-blog-kontakt-rule); }
.mp-kontakt__title{
  margin:0 0 clamp(30px,4vw,52px);
  font:300 clamp(32px,4.4vw,58px)/1.05 var(--mp-serif);
  color:var(--mp-ink); text-wrap:balance;
}
.mp-kontakt__title em{ font-style:italic; color:var(--mp-focus); }
.mp-kontakt__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(32px,4.5vw,80px);
}
.mp-kontakt__rows{ margin:0; display:flex; flex-direction:column; }
.mp-kontakt__row{
  display:flex; align-items:baseline; gap:20px;
  padding:20px 0; border-bottom:1px solid var(--mp-blog-kontakt-line);
}
.mp-kontakt__row dt{
  flex:0 0 128px;
  font:400 11px/1.4 var(--mp-sans);
  letter-spacing:.17em; text-transform:uppercase; color:var(--mp-body);
}
.mp-kontakt__row dd{
  margin:0; font:300 15px/1.6 var(--mp-sans); color:var(--mp-deep);
}
.mp-kontakt__sub{
  margin:0 0 22px;
  font:400 clamp(20px,1.8vw,26px)/1.3 var(--mp-serif); color:var(--mp-ink);
}
.mp-kontakt__socials{
  display:flex; flex-direction:column; gap:1px;
  background:var(--mp-blog-kontakt-line); border:1px solid var(--mp-blog-kontakt-line);
}
.mp-kontakt__social{
  display:flex; align-items:center; gap:16px;
  padding:18px 20px; min-height:var(--mp-tap);
  background:var(--mp-stone);
}
.mp-kontakt__social:hover{ background:var(--mp-blog-kontakt-hover); }
.mp-kontakt__badge{
  width:30px; height:30px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:var(--mp-ink); color:var(--mp-paper);
  font:400 11px/1 var(--mp-sans);
}
.mp-kontakt__social-name{
  flex:1; font:300 14px/1 var(--mp-sans); color:var(--mp-deep);
}
.mp-kontakt__arrow{ font:300 14px/1 var(--mp-sans); color:var(--mp-body); }

/* --------------------------------------------------------------------------
   TELEFON — próg 860 px, ten sam co w podglądzie (mobile = vw < 860)
   -------------------------------------------------------------------------- */

@media (max-width:860px){
  .mp-blog__grid{ grid-template-columns:repeat(2,1fr); }
  .mp-feature{ grid-template-columns:1fr; }
}

@media (max-width:480px){
  /* Dwie kolumny przy 430 px dają kafel około 190 px — metryka schodzi
     wtedy do dwóch linii, żeby data nie łamała się w środku. */
  .mp-post__meta{ flex-wrap:wrap; gap:6px 12px; }
  .mp-post__rule{ display:none; }
  .mp-kontakt__row{ flex-direction:column; gap:6px; }
  .mp-kontakt__row dt{ flex:0 0 auto; }
}