/* === MSPEC: siatka 5 banerów (2+3), responsywna === */
.mspec-promo{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:16px;
  width:100%;
  margin:24px 0;
}

/* Karta baneru */
.mspec-promo__item{
  position:relative;
  display:block;
  border-radius:8px;
  overflow:hidden;
  background:var(--bg) center/cover no-repeat;
  aspect-ratio:16 / 9;
  isolation:isolate;
  transition:transform .25s ease, box-shadow .25s ease;
}
.mspec-promo__item:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(0,0,0,.15);
}

/* Wnętrze + typografia */
.mspec-promo__inner{
  position:absolute;
  inset:14px 16px;
  z-index:1;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:6px;
}
.mspec-promo__title{
  font-weight:800;
  font-size:clamp(18px, 2.2vw, 28px);
  line-height:1.1;
  margin:0;
}
.mspec-promo__subtitle{
  font-size:clamp(12px, 1.2vw, 16px);
  opacity:.95;
  margin:0 0 8px;
}

/* Link CTA */
.mspec-promo__link{
  display:inline-block;
  font-weight:700;
  font-size:clamp(12px, 1.1vw, 14px);
  text-decoration:none;
  color:#33b33b;
}
.mspec-promo__link:hover{ text-decoration:underline; }

/* Rozkład w siatce (desktop) */
.mspec-promo__item--lg{ grid-column:span 6; } /* 2 w rzędzie */
.mspec-promo__item--md{ grid-column:span 4; } /* 3 w rzędzie */

/* Tablet (≤1199px) — ukryj tylko 5. kafel, układ 2+2 na dole */
@media (max-width:1199.98px){
  .mspec-promo{ gap:14px; }
  .mspec-promo__item--lg{ grid-column:span 6; }
  .mspec-promo__item--md{ grid-column:span 6; } /* 2 w wierszu */
  .mspec-promo > a.mspec-promo__item:nth-of-type(5){ display:none !important; }
}

/* Mobile (≤767px) — ukryj całą dolną trójkę (3.,4.,5.), zostają 2 górne */
@media (max-width:767.98px){
  .mspec-promo{ gap:12px; }
  .mspec-promo > a.mspec-promo__item{
    grid-column:1 / -1;
    aspect-ratio:16 / 10;
  }
  .mspec-promo > a.mspec-promo__item:nth-of-type(3),
  .mspec-promo > a.mspec-promo__item:nth-of-type(4),
  .mspec-promo > a.mspec-promo__item:nth-of-type(5){
    display:none !important;
  }
}

/* === Drobne korekty wizualne: odstępy i kolory tekstu === */

/* GÓRNE bannery (duże) – przesunięcie tekstu w prawo i większa responsywność */
.mspec-promo__item--lg .mspec-promo__inner {
  inset: 14px clamp(20px, 3vw, 48px);  /* większy margines poziomy */
}

.mspec-promo__item--lg .mspec-promo__title {
  font-size: clamp(22px, 2.8vw, 36px); /* bardziej dynamiczny wzrost tytułu */
}

.mspec-promo__item--lg .mspec-promo__subtitle {
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.3;
}

/* DOLNE bannery – zmiana koloru drugiej linii (podtytułu) na czarny */
.mspec-promo__item--md .mspec-promo__subtitle {
  color: #000;
}

/* Zachowujemy oryginalny kolor tekstu w górnych */
.mspec-promo__item--lg .mspec-promo__subtitle {
  color: #fff;
}