:root {
  --violet: rgb(109, 109, 212);
  --violet-transparent: rgba(109, 109, 212, 0.9);
  --violet-strong-transparent: rgba(109, 109, 212, 0.5);
  --violet-light-transparent: rgba(233, 233, 249);
  --dark-gray: #525252;
  --darker-gray: #313131;
  --devdraw: #0b2b53;
}
.background-container {
    /* display: flex; */
    position: fixed;
    top:0;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    justify-content: center;
    align-items: end;
 
    background-position-x: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: center;
    background-image: url(/assets/my_cover.webp);
    opacity:.2;

}

.background-cover-mask {
    /* display: flex; */
    position: absolute;
    top:0;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    justify-content: center;
    align-items: end;
 
    background-position-x: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: center;
    background-image: url(/assets/cover_mask.png);
    opacity:.8;

}
/* NIC co tworzy BFC! (czyli: bez flex/grid/overflow/inline-block itd.) */
.persona{
  position: relative;     /* ok, to nie tworzy BFC */
  z-index: 1;
  /* padding: 160px 16px 32px; */
  /* max-width: 820px; */
  margin: 0 auto;
}

/* klucz: float + shape-outside */
.wrap-shape{
  float: right;
  border: none!important;   
  outline: none !important;
  /* padding: 160px 16px 32px; */
  width: 100vw;
  height: 100dvh;

  shape-outside: url('/assets/cover_mask.png');
  -webkit-shape-outside: url('/assets/cover_mask.png');
  shape-image-threshold: .15;
  shape-margin: 12px;

  /* na czas strojenia:
  background: url('/assets/cover_mask.png') center/cover no-repeat;
  opacity: .18;
  */
}

/* wyczyść float na końcu, żeby sekcja miała wysokość */
.persona::after{ content:""; display:block; clear:both; }

/* upewnij się, że AKAPITY też nie tworzą BFC */
.persona p{
  /* żadnego: overflow:hidden/auto; display:inline-block; position:absolute; */
  margin: 0 0 1rem;
  color:var(--darker-gray);
  font-style: italic;
  text-indent: 2rem;
  font-size:clamp(1rem, 2vw, 1.5rem);
  text-align: justify;
  /* overflow-y: scroll; */
}
.text-content{
  padding: 2rem 8vw;    /* boczny margines, jeśli chcesz */
  /* overflow-y: scroll; */
  max-width:1400px;
  margin:0 auto 2rem auto;
  position: relative;
}
/* przykład korekty na wąskich ekranach */
@media (max-width: 420px){
  /* .wrap-shape{ width: 62vw; height: 58vh; } */
}

.profile-photo {
    border-radius: 50%;
    float:left;
    margin:.5rem 2rem .5rem 0;
    max-width:45%;
    height:auto;
    shape-outside: circle(50%);
    transform: translateY(-0px);
    margin-top:0px;
}

.persona h1 {
  text-transform: uppercase;
  color: var(--violet);
  font-size: clamp(1.4rem, 4vw, 2.3rem);
  text-align: center;
  margin-bottom: 2rem;
  line-height: 1.3;
  padding-top:250px;
}

.barbara-info,
.barbara-faq {
  width: 100%;
  padding: 4rem 1.5rem;
  /* background: #fff; */
  position: relative;
  z-index:1;
}

.barbara-info__inner,
.barbara-faq__inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.barbara-info h2,
.barbara-faq h2 {
  text-transform: uppercase;
  color: var(--violet);
  font-size: clamp(1.3rem, 4vw, 2rem);
  text-align: center;
  margin-bottom: 2rem;
}

.barbara-info p,
.barbara-faq p {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  line-height: 1.8;
  color: var(--dark-gray);
}

.barbara-info p {
  margin-bottom: 1.2rem;
  color:var(--darker-gray);
  font-style: italic;
  text-indent: 2rem;
  font-size:clamp(1rem, 2vw, 1.5rem);
  text-align: justify;
}

.barbara-info a,
.barbara-faq a {
  color: var(--violet);
  text-underline-offset: 4px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  border: 1px solid rgba(109, 109, 212, 0.22);
  background: var(--violet-light-transparent);
  overflow: hidden;
}

.faq-item summary {
  display: grid;
  grid-template-columns: 1fr 24px;
  align-items: start;
  column-gap: 1rem;
  cursor: pointer;
  color: var(--violet);
  text-transform: uppercase;
  font-size: clamp(1rem, 2.8vw, 1.15rem);
  line-height: 1.5;
  list-style: none;
  padding: 1rem 1.25rem;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  display: block;
  align-self: start;
  justify-self: end;
  color: var(--violet);
  font-size: 1.4rem;
  line-height: 1;
  margin-top: 0.05rem;
}

.faq-item[open] summary::after {
  content: "–";
}

.faq-item p {
  margin: 0;
  padding: 1.1rem 1.25rem 1.25rem 1.25rem;
  background: #fff;
  border-top: 1px solid rgba(109, 109, 212, 0.15);
}

@media (min-width: 900px) {
  .barbara-info,
  .barbara-faq {
    padding: 5rem 2rem;
  }
}