/* =========================================================
   PASEK INFORMACJI O ARTYKULE (pod hero, tylko wpisy)
   Kolory wg webmountain-ux/BRANDBOOK-WWW.md (tokens.css):
   bez tła i obramowania; separatory forest 25%, etykieta forest 75%, wartość forest, link neoblue.
   ========================================================= */
.postMetaBar{
  --pm-line:   #C6CCCF; /* --wm-forest-25 */
  --pm-label:  #55666E; /* --wm-forest-75 — 6,0:1 na białym */
  --pm-text:   #1D333E; /* --wm-forest */
  --pm-link:   #2953FF; /* --wm-neoblue — 5,6:1 na białym */
  /* Odstępy jak w zaakceptowanym układzie (hero → pasek → treść), bez linii:
     81px + 28px dolnego paddingu hero = 109px nad paskiem, 109px pod paskiem */
  margin: 81px 0 109px;
}

/* Bez tła i obramowania — elementy rozłożone równo na całą szerokość kontenera */
.postMeta{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
}

.postMeta__item{
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 22px;
  border-left: 1px solid var(--pm-line);
  min-width: 0;
}
.postMeta__item:first-child{
  padding-left: 0;
  border-left: 0;
}

.postMeta__label{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pm-label);
}

.postMeta__value{
  font-size: 15px;
  font-weight: 600;
  color: var(--pm-text);
  text-decoration: none;
}

a.postMeta__value{
  color: var(--pm-link);
}
a.postMeta__value:hover{
  text-decoration: underline;
}
a.postMeta__value:focus-visible{
  outline: 2px solid var(--pm-link);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Telefon: siatka 2 × 2 zamiast jednego rzędu */
@media (max-width: 640px){
  .postMetaBar{
    margin: 0 0 28px; /* na telefonie linie motywu i tak są ukryte — odstępy jak na serwerze */
  }
  .postMeta{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    padding: 0;
  }
  .postMeta__item,
  .postMeta__item:first-child{
    padding: 0;
    border-left: 0;
  }
  .postMeta__value{
    font-size: 14px;
  }
}

/* Bez linii pod paskiem — pasek stoi w tej samej przestrzeni, którą wcześniej zajmowała linia (decyzja Michała) */
.postMetaBar + .rule{
  display: none;
}