/* =============================================================================
   POMELO — komponent .new-cytat (opinia / cytat influencera)
   Wersja wtyczkowa: tokeny systemu „new" (--pom-*) z FALLBACKAMI,
   więc działa też bez pomelo-new.css.
   Breakpoint: 767/768px (spójny z systemem new-).
   ============================================================================= */

.new-cytat{
  /* konfigurowalne z Elementora (mają wartości domyślne) */
  --pom-cytat-photo-w:246px;
  --pom-cytat-photo-h:266px;
  --pom-cytat-photo-left:36px;
  --pom-cytat-gap:40px;

  position:relative;
  max-width:1152px;
  margin:0 auto;
  font-family:var(--pom-font-body, 'Montserrat', system-ui, sans-serif);
  color:var(--pom-text, #1F1F1F);
}

/* --- zdjęcie --- */
.new-cytat__img{display:block;pointer-events:none;}
.new-cytat__img--desktop{
  width:var(--pom-cytat-photo-w);
  height:var(--pom-cytat-photo-h);
  object-fit:contain;
  object-position:bottom left;
}
.new-cytat__img--mobile{
  display:none;
  width:auto;
  max-width:100%;
  height:auto;
}

/* --- cytat --- */
.new-cytat__quote{
  margin:0;
  font-family:var(--pom-font-body, 'Montserrat', system-ui, sans-serif);
  font-weight:400;
  font-style:italic;
  font-size:16px;
  line-height:1.6;
  color:var(--pom-text, #1F1F1F);
}
.new-cytat__quote p{margin:0 0 1.6em;}
.new-cytat__quote p:last-child{margin-bottom:0;}

/* --- karta z tłem --- */
.new-cytat__card{
  position:relative;
  background:var(--pom-bg-subtle, #F8F8F8);
  border-radius:20px;
}

/* blok zdjęcia mobilnego — tylko na mobile */
.new-cytat__top{display:none;}

/* =========================== DESKTOP (>=768px) ============================ */
@media (min-width:768px){
  .new-cytat{padding-top:96px;}          /* miejsce na zdjęcie wychodzące ponad kartę */

  .new-cytat__card{
    display:flex;
    align-items:center;
    /* lewy padding = odsunięcie + szerokość zdjęcia + odstęp do cytatu */
    padding:12px 24px 12px calc(var(--pom-cytat-photo-left) + var(--pom-cytat-photo-w) + var(--pom-cytat-gap));
    min-height:180px;
  }
  .new-cytat__quote{flex:1 1 0;min-width:0;}

  .new-cytat__figure--desktop{
    position:absolute;
    left:var(--pom-cytat-photo-left);
    bottom:0;
    z-index:2;
    margin:0;
  }

  /* --- wariant: zdjęcie z PRAWEJ strony karty (kontrolka „Strona zdjęcia") --- */
  .new-cytat--right .new-cytat__card{
    /* lustrzane odbicie paddingów: miejsce na zdjęcie po prawej */
    padding:12px calc(var(--pom-cytat-photo-left) + var(--pom-cytat-photo-w) + var(--pom-cytat-gap)) 12px 24px;
  }
  .new-cytat--right .new-cytat__figure--desktop{
    left:auto;
    right:var(--pom-cytat-photo-left);
  }
  .new-cytat--right .new-cytat__img--desktop{
    object-position:bottom right;
  }
}

/* =========================== MOBILE (<=767px) ============================= */
@media (max-width:767px){
  .new-cytat{padding-top:0;}

  .new-cytat__img--desktop{display:none;}
  .new-cytat__img--mobile{display:block;}
  .new-cytat__figure--desktop{display:none;}

  .new-cytat__top{display:block;width:100%;}

  .new-cytat__card{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:24px;
    margin-top:2px;
  }
}