/* Közös hírtartalom / GrapesJS grid és stílusok
   Ez a CSS kerül betöltésre:
   - a frontend híroldalakon (.news-detail-content alatt)
   - az admin GrapesJS vásznon (globálisan), hogy az oszlopok és képek ott is ugyanúgy viselkedjenek */

/* Alap grid – bootstrap‑szerű .row + .col-sm-* */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

[class*='col-'],
[class*='col-sm-'] {
  position: relative;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

/* Alapértelmezés: mobilon minden oszlop teljes szélességű (egymás alatt) */
.col-sm-6,
.col-sm-4 {
  flex: 0 0 100%;
  max-width: 100%;
}

/* 576px felett: 2 oszlopos / 3 oszlopos elrendezés (50–50%, 33–33–33) */
@media (min-width: 576px) {
  .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-sm-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

/* Hír‑background blokkok (bg1 / bg2) */
.bg1,
.bg-1 {
  background: #f3f4f6;
  color: #111827;
  border-radius: 24px;
  padding: 32px;
}

.bg2 {
  background: #f3f4f6;
  color: #111827;
  border-radius: 24px;
  padding: 24px;
}

.news {
  padding: 24px 0;
}

.news-list h4,
.news-list h5,
.news-list h6 {
  font-weight: 600;
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}

.news-list p {
  margin-bottom: 0.5rem;
}

.body {
  padding: 16px 0;
}

/* Képek legyenek reszponzívak, ne lógjanak ki az oszlopból */
img {
  max-width: 100%;
  height: auto;
  display: block;
}