/* =========================================================
   La Pinyol — PÀGINA QUI SOM (quisom.html)
   Depèn de global.css (tokens, reset, header, footer i
   utilitats d'animació .lp-reveal / .lp-stagger).
   ========================================================= */

/* ---- Secció (fons de color + foto arrodonida a un costat) ---- */
.qs-section{ position:relative; overflow:hidden; }
.qs-section--lilac{ background:var(--bg-lilac); }
.qs-section--yellow{ background:var(--bg-yellow); }

.qs-section__inner{
  position:relative; z-index:2;
  display:flex; align-items:center;
  min-height:420px; padding-block:64px;
}
.qs-section__inner--right{ justify-content:flex-end; }

.qs-section__text{ width:50%; max-width:470px; }
.qs-section--lilac .qs-section__text{ padding-right:30px; }
.qs-section__title{ font-size:30px; font-weight:800; color:var(--c-ink); margin:0 0 16px; }
.qs-section__subtitle{ font-size:16px; font-weight:400; color:var(--c-ink); line-height:1.4; margin:0 0 16px; }
.qs-section__body{ font-size:12px; font-weight:300; color:var(--c-gray); line-height:20px; margin:0 0 14px; }
.qs-section__body:last-child{ margin-bottom:0; }

/* ---- Foto (arrodonida pel costat interior, surt pel marge) ---- */
.qs-section__media{ position:absolute; top:0; height:100%; width:46%; max-width:680px; z-index:1; }
.qs-media--right{ right:0; }
.qs-media--left{ left:0; }
.qs-section__media img{ width:100%; height:100%; object-fit:cover; }
.qs-media--right img{ border-radius:9999px 0 0 9999px; }
.qs-media--left img{ border-radius:0 9999px 9999px 0; }

/* ---- Llista d'àmbits (pastilles blanques) ---- */
.qs-tags{ margin:24px 0 0; display:flex; flex-direction:column; gap:12px; }
.qs-tag{
  background:var(--c-white);
  border-radius:var(--radius-pill);
  padding:11px 26px;
  font-size:13px; font-weight:700; color:var(--c-ink);
  box-shadow:0 4px 14px rgba(0,0,0,.05);
}

/* ---- Pastilletes decoratives ---- */
.qs-pill{
  position:absolute; z-index:0;
  top:var(--t,40%);
  width:var(--w,260px); height:78px;
  border-radius:9999px;
}
.qs-pill--yellow{ background:#fdebb6; }
.qs-pill--lilac{ background:#e3e4f7; }
.qs-section--lilac .qs-pill--yellow{ left:-50px; transform-origin:left center; }
.qs-section--yellow .qs-pill--lilac{ right:-50px; transform-origin:right center; }

@media (prefers-reduced-motion: no-preference){
  @keyframes qs-pill-breathe{
    0%,100%{ scale:1 1; }
    50%    { scale:1.15 1; }
  }
  .qs-pill{ animation:qs-pill-breathe 8s ease-in-out infinite; }
  .qs-section--yellow .qs-pill:nth-of-type(2){ animation-duration:9.5s; animation-delay:-3s; }
}

/* ---- Responsive ---- */
@media (max-width:900px){
  .qs-section__inner{ flex-direction:column; align-items:flex-start; min-height:0; padding-block:40px; }
  .qs-section__inner--right{ justify-content:flex-start; }
  .qs-section__text{ width:100%; max-width:none; padding-right:0; }
  .qs-section{ display:flex; flex-direction:column; }
  .qs-section__media{ position:static; width:100%; height:280px; order:-1; margin-bottom:28px; }
  .qs-section--yellow .qs-section__media{ order:-1; }
  .qs-media--right img{ border-radius:9999px 0 0 9999px; }
  .qs-pill{ display:none; }
}

/* Text enriquit (WYSIWYG d'ACF) dins de Qui som */
.qs-richtext > p{ font-size:12px; font-weight:300; color:var(--c-gray); line-height:20px; margin:0 0 14px; }
.qs-richtext > p:last-child{ margin-bottom:0; }