/* Aktualnosci - ten sam jasny styl co reszta strony */

/* Index.css nie jest tu uzywany, ale na wszelki wypadek ustawiamy tlo sekcji */
#sec-aktualnosci{ background: var(--bg); }

.news-wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 12px 34px;
}

.news-title{
  text-align: center;
  margin: 6px 0 18px;
}

/* tytul strony ma byc identyczny jak na innych podstronach */
.news-title .lex-page-title{ margin: 0; }

.news-title .subtitle{
  margin-top: 6px;
  font-size: 18px;
  color: var(--muted);
}

.news-card{
  background: var(--card);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
  border: 1px solid var(--line);
  overflow: hidden;
  margin: 18px 0 26px;
}

.news-head{ padding: 18px 20px 0; }

.news-badge{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(139,106,58,.12);
  color: #5a3f10;
  font-size: 14px;
  border: 1px solid rgba(139,106,58,.22);
}

.news-card h2{
  margin: 12px 0 10px;
  font-size: 28px;
  color: var(--brand2);
  line-height: 1.2;
}

.news-media{ padding: 0 20px 14px; }

.news-img{
  width: 100%;
  border-radius: 14px;
  display: block;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  object-fit: cover;
  height: 190px;
}

/* pierwsze, duze zdjecie na gorze - poprawiony kadr (zeby nie ucinalo glow) */
.news-img.hero{
  height: 230px;
  max-height: none;
  /* lekko w dol, zeby twarze byly widoczne (bez sufitu i bez dolu oltarza) */
  object-position: 50% 35%;
}

.news-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 860px){
  .news-grid.two{ grid-template-columns: 1fr 1fr; }
  .news-grid.three{ grid-template-columns: 1fr 1fr 1fr; }
  .news-img{ height: 210px; }
  .news-img.hero{ height: 260px; }
}

@media (max-width: 520px){
  .news-img{ height: 170px; }
  .news-img.hero{ height: 210px; }

  /* mobil: zeby nic sie nie rozjezdzalo */
  .news-head{ padding: 16px 16px 0; }
  .news-media{ padding: 0 16px 12px; }
  .news-content{ padding: 0 16px 16px; font-size: 16px; }
  .news-card h2{ font-size: 22px; }
}

.news-content{
  padding: 0 20px 20px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text);
}

.news-content p{ margin: 0 0 12px; }


.collage-retreat{
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 145px;
  gap: 12px;
}

.collage-retreat .news-img{
  height: 100%;
}

.collage-retreat .collage-wide{
  grid-column: span 2;
  grid-row: span 2;
}

.collage-retreat .collage-tall{
  grid-row: span 2;
}

@media (max-width: 900px){
  .collage-retreat{
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 160px;
  }

  .collage-retreat .collage-wide,
  .collage-retreat .collage-tall{
    grid-column: span 1;
    grid-row: span 1;
  }

  .collage-retreat .collage-wide{
    grid-column: span 2;
  }
}

@media (max-width: 520px){
  .collage-retreat{
    grid-template-columns: 1fr;
    grid-auto-rows: 190px;
  }

  .collage-retreat .collage-wide,
  .collage-retreat .collage-tall{
    grid-column: span 1;
    grid-row: span 1;
  }
}


/* V4 fix: wymuszony kolaż także po wrzuceniu na serwer */
.news-grid.collage-retreat{display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; grid-auto-rows:145px; gap:12px;}
.news-grid.collage-retreat > .news-img{width:100%; height:100%;}
@media (max-width: 900px){
  .news-grid.collage-retreat{grid-template-columns:repeat(2,minmax(0,1fr)) !important; grid-auto-rows:160px;}
  .news-grid.collage-retreat .collage-wide{grid-column:span 2; grid-row:span 1;}
  .news-grid.collage-retreat .collage-tall{grid-column:span 1; grid-row:span 1;}
}
@media (max-width: 520px){
  .news-grid.collage-retreat{grid-template-columns:repeat(2,minmax(0,1fr)) !important; grid-auto-rows:150px;}
  .news-grid.collage-retreat .collage-wide,
  .news-grid.collage-retreat .collage-tall{grid-column:span 1; grid-row:span 1;}
}


.news-card-docs .news-media-docs{
  padding-top: 2px;
}

.news-content-intro{
  padding-top: 0;
  padding-bottom: 8px;
}


.news-media-docs{
  padding-top: 6px;
}

.news-docs-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.news-card-docs{
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.news-doc-figure{
  margin: 0;
  padding: 12px;
  border-radius: 16px;
  background: #f7f7f7;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

.news-doc-image{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

@media (max-width: 900px){
  .news-docs-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px){
  .news-doc-figure{
    padding: 8px;
  }
}