/* kamieniorz.com — o-nas.css
   Strona „O nas". Tokeny i chrome (nagłówek/stopka) z app.css; tu tylko układ treści.
   Treść wstrzykuje skrypt na stronie z /api/cms/site (pola aboutLead/aboutTitle/aboutBody + aboutImage). */

.about {
  width: 100%;
  padding-block: clamp(1.8rem, 5vw, 3.4rem);
}

.about__lead {
  margin-bottom: 0.9rem;
}

.about__title {
  margin: 0 0 1.2rem;
  font-size: clamp(1.8rem, 5vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.about__figure {
  margin: 0 0 1.6rem;
}

.about__img {
  display: block;
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.about__body {
  max-width: 68ch;
  font-size: 1.04rem;
  color: var(--text);
}

.about__body p {
  margin: 0 0 1.05rem;
}

.about__body p:last-child {
  margin-bottom: 0;
}

.about__empty {
  color: var(--muted);
  font-style: italic;
}

/* §5.L — bogaty artykuł (markdown): nagłówki, listy, linki */
.about__body h2 {
  margin: 1.8rem 0 0.7rem;
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.about__body h3 {
  margin: 1.4rem 0 0.5rem;
  font-size: clamp(1.1rem, 2.4vw, 1.25rem);
  font-weight: 700;
}
.about__body h2:first-child,
.about__body h3:first-child {
  margin-top: 0;
}
.about__body ul {
  margin: 0 0 1.05rem;
  padding-left: 1.3rem;
}
.about__body li {
  margin: 0.3rem 0;
}
.about__body a {
  text-decoration: underline;
}
.about__body strong {
  font-weight: 700;
}

/* §5.L — galeria „O nas" (wiele zdjęć) */
.about__gallery {
  clear: both;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.9rem;
  margin-top: 2rem;
}
.about__gimg {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

@media (min-width: 880px) {
  /* zdjęcie obok tekstu: figura unosi się w prawo, tekst opływa */
  .about__figure {
    float: right;
    width: min(46%, 440px);
    margin: 0.2rem 0 1.2rem 1.8rem;
  }
  .about__body { overflow: hidden; } /* domknięcie opływania */
}