/* Pełne kadry zdjęć na telefonach i komputerach. */
.masonry figure,.portfolio-grid figure{aspect-ratio:auto;overflow:visible}
.masonry img,.portfolio-grid img{height:auto;object-fit:contain}
.about-image{min-height:0}.about-image img{height:auto;object-fit:contain}
.studio-thumbnails img{height:auto!important;object-fit:contain!important}

/* Tekst sekcji zawsze pozostaje w osobnym, jasnym bloku — nigdy na fotografii. */
.session-section{position:relative;isolation:isolate;background:var(--paper)}
.session-section.alt{background:var(--cream)}
.session-section .wrap{position:relative;z-index:1}
.session-section .session-head{position:relative;background:inherit}

/* Na telefonie nagłówek sesji musi być oddzielnym, nieprzezroczystym blokiem.
   Dzięki temu żadne zdjęcie z galerii nie może wejść pod tekst. */
#ciazowe .session-head{
  display:block;
  clear:both;
  width:100%;
  isolation:isolate;
  background:var(--paper) !important;
  margin-bottom:44px;
}
#ciazowe .portfolio-grid{clear:both;position:relative;z-index:1}

/* Trzy różne kombinacje zamiast dwóch bardzo podobnych portretów całej rodziny. */
.portfolio-grid.family-grid figure:first-child{grid-column:span 2}

/* Galeria noworodkowa ma pozostać zupełnie statyczna — bez automatycznego
   ani uruchamianego kursorem ruchu zdjęć. */
#noworodkowe + .masonry img {
  transform: none !important;
  transition: none !important;
}

#noworodkowe + .masonry figure:hover img {
  transform: none !important;
}

/* Każda galeria rozpoczyna się pod zamkniętym blokiem tekstu. */
.session-head + .portfolio-grid,
.session-head-wide + .masonry {
  clear: both;
  position: relative;
  z-index: 1;
}

/* Wspólne, równe obrzeże dla tekstu i galerii.  Nie pozwalamy, aby
   zawartość jednej sekcji dochodziła do krawędzi inaczej niż sąsiednia. */
.gallery.wrap,
.session-section > .wrap {
  width: min(1280px, 100%);
  margin-inline: auto;
  padding-inline: clamp(24px, 4vw, 50px);
}

/* Nagłówki sekcji są zawsze pełnym, zamkniętym blokiem tekstu. */
.session-head,
.session-head-wide {
  width: 100%;
  min-width: 0;
  overflow: visible;
}

.session-head h2,
.session-head p,
.session-head li,
.section-head h2,
.section-head p {
  max-width: 100%;
  overflow-wrap: break-word;
}

@media (max-width: 800px) {
  .gallery.wrap,
  .session-section > .wrap {
    padding-inline: 20px;
  }
}

/* Sesja ciążowa: opis i galeria są osobnymi elementami w pionowym układzie.
   To fizycznie uniemożliwia wejście zdjęcia na tekst na małym ekranie. */
#ciazowe > .wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

#ciazowe .session-head {
  order: 0;
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0 0 44px;
  padding: 0;
  background: var(--paper) !important;
}

#ciazowe .portfolio-grid {
  order: 1;
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
}

/* Jedna szerokość treści dla obu galerii. Padding wewnątrz elementu
   powodował na telefonie pozornie różne marginesy po lewej i prawej. */
.gallery.wrap,
.session-section > .wrap {
  box-sizing: border-box;
  width: min(1180px, calc(100% - 40px));
  max-width: 1180px;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

.masonry,
.portfolio-grid,
.masonry figure,
.portfolio-grid figure,
.masonry img,
.portfolio-grid img {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 800px) {
  /* Na małym ekranie naturalny układ kolumnowy gwarantuje równe marginesy
     i sprawia, że wysokość galerii zawsze obejmuje także ostatnie zdjęcie. */
  #portfolio,
  #ciazowe {
    display: flow-root;
    overflow: hidden;
  }

  #noworodkowe + .masonry,
  #ciazowe .portfolio-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
  }

  #noworodkowe + .masonry figure,
  #noworodkowe + .masonry figure.tall,
  #ciazowe .portfolio-grid figure {
    flex: 0 0 auto;
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    aspect-ratio: auto;
    overflow: hidden;
  }

  #noworodkowe + .masonry img,
  #ciazowe .portfolio-grid img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    object-fit: contain;
  }

  #portfolio .masonry {
    margin-bottom: 0;
  }
}