/* Pacientes — cada fala num vão de tamanho diferente da mesma parede; o jardim por trás. */
.pa-secao {
  --pa-b: 12px;                                   /* largura da barra */
  --pa-rec: clamp(.9rem, 1.4vw, 1.4rem);          /* recuo do retângulo de dentro */
  --pa-sombra: rgb(51 80 63 / .15);
  padding-right: 0;
}

.pa-parede {
  position: relative; isolation: isolate;
  display: grid; gap: var(--pa-b);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "cab cab cab cab cab and and and and and and and"
    "ren ren ren mrc mrc and and and and and and and"
    "jan jan jan jan jan not not not tha tha tha tha"
    "jan jan jan jan jan sab sab sab sab mar mar mar";
  padding: var(--pa-b) 0 var(--pa-b) var(--pa-b);
}
/* o jardim: a luz do fundo do retrato, contínua, vista por todos os vãos.
   Fica mais longe que a parede: desliza um pouco na rolagem (pa.js) e tem, desfocada, a treliça do outro lado. */
.pa-jardim { position: absolute; inset: 0; z-index: -1; overflow: clip; background: var(--verde-claro); }
.pa-jardim::before, .pa-jardim::after { content: ""; position: absolute; inset: -70px 0; transform: translate3d(0, var(--pa-y, 0px), 0); will-change: transform; }
.pa-jardim::before {
  background:
    linear-gradient(100deg in oklab, rgb(247 243 232 / .55) 0%, rgb(247 243 232 / .2) 42%, rgb(247 243 232 / .08) 100%),
    url("../img/pa-jardim.webp") 50% 50% / cover no-repeat;
}
.pa-jardim::after {
  background: url("../img/trelica.svg") 62% 40px / calc(var(--tile) * 1.3) calc(var(--tile) * 1.3);
  filter: blur(6px); opacity: .4;
  transform: translate3d(0, calc(var(--pa-y, 0px) * .45), 0);
}

/* trecho fechado da parede: o título */
.pa-cabeca {
  grid-area: cab; position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 1.1rem;
  margin: calc(var(--pa-b) * -1) 0 0 calc(var(--pa-b) * -1);
  padding: 0 clamp(1.25rem, 2.4vw, 2.5rem) clamp(2rem, 3.4vw, 3.5rem) 0;
  background: var(--creme);
}
.pa-h2 { max-width: 9.5em; }
.pa-apoio { max-width: 23em; }

/* barras que correm para fora */
.pa-fio { position: relative; z-index: 2; background: var(--trelica); box-shadow: 3px 4px 0 var(--pa-sombra); pointer-events: none; }
.pa-fio--a { grid-area: cab; align-self: end; height: var(--pa-b); margin: 0 0 calc(var(--pa-b) * -1) calc((var(--margem) + var(--pa-b)) * -1); }
.pa-fio--b { grid-area: cab; justify-self: end; width: var(--pa-b); margin: calc(var(--respiro) * -1) calc(var(--pa-b) * -1) 0 0; }
.pa-fio--c { grid-area: jan; justify-self: end; align-self: end; width: var(--pa-b); height: var(--respiro); margin: 0 calc(var(--pa-b) * -1) calc((var(--respiro) + var(--pa-b)) * -1) 0; }
.pa-fio--d { grid-area: jan; align-self: end; height: var(--pa-b); margin: 0 0 calc(var(--pa-b) * -1) calc((var(--margem) + var(--pa-b)) * -1); }

/* vão */
.pa-vao {
  position: relative; margin: 0; min-width: 0; display: flex;
  box-shadow: 0 0 0 var(--pa-b) var(--trelica), inset 3px 4px 0 var(--pa-sombra);
}
.pa-vao::before { /* retângulo concêntrico */
  content: ""; position: absolute; inset: var(--pa-rec); pointer-events: none;
  border: 1px solid rgb(27 47 38 / .22);
}
.pa-dentro {
  position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--pa-rec) + clamp(1rem, 1.7vw, 1.9rem));
}
.pa-vao--and { grid-area: and; }
.pa-vao--ren { grid-area: ren; }
.pa-vao--mrc { grid-area: mrc; }
.pa-vao--jan { grid-area: jan; }
.pa-vao--not { grid-area: not; }
.pa-vao--tha { grid-area: tha; }
.pa-vao--sab { grid-area: sab; }
.pa-vao--mar { grid-area: mar; }
.pa-vao--f1, .pa-vao--f2 { display: none; }

/* o vão maior: um segundo quadro de barra, e a fala sai pela direita da página */
.pa-vao--and { --pa-q: clamp(1.25rem, 2.4vw, 2.5rem); }
.pa-vao--and::before {
  inset: var(--pa-q) calc(var(--margem) - var(--pa-b)) var(--pa-q) var(--pa-q);
  border: var(--pa-b) solid var(--trelica);
  box-shadow: 3px 4px 0 var(--pa-sombra), inset 3px 4px 0 var(--pa-sombra);
}
.pa-vao--and .pa-dentro {
  padding: calc(var(--pa-q) + var(--pa-b) + clamp(6rem, 11vw, 10rem)) calc(var(--margem) + clamp(1.25rem, 2.6vw, 2.75rem)) calc(var(--pa-q) + var(--pa-b) + clamp(1.5rem, 2.6vw, 2.75rem)) calc(var(--pa-q) + var(--pa-b) + clamp(1.5rem, 2.8vw, 3rem));
}
.pa-vao--jan .pa-dentro { padding-top: calc(var(--pa-rec) + clamp(4rem, 8vw, 8rem)); }
.pa-vao--tha .pa-dentro, .pa-vao--mar .pa-dentro { padding-right: calc(var(--margem) * .6); }
/* só os dois vãos maiores têm quadro de dentro; os menores são abertura simples */
.pa-vao--p::before, .pa-vao--liso::before { display: none; }
.pa-vao--jan::before { box-shadow: 0 0 0 5px rgb(247 243 232 / .0), inset 0 0 0 5px rgb(247 243 232 / .0); outline: 1px solid rgb(27 47 38 / .12); outline-offset: 5px; }

/* falas */
.pa-q { color: var(--tinta); text-wrap: pretty; text-indent: -.42em; }
.pa-q em { font-style: italic; color: var(--verde-fundo); }
.wf-fala .pa-q--g { font-size: clamp(1.85rem, 3.75vw, 3.6rem); line-height: 1.1; letter-spacing: -.012em; text-wrap: balance; }
.wf-fala .pa-q--m { font-size: clamp(1.4rem, 1.9vw, 1.85rem); line-height: 1.2; }
.wf-fala .pa-q--m2 { font-size: clamp(1.55rem, 2.5vw, 2.4rem); line-height: 1.16; letter-spacing: -.006em; }
.wf-fala .pa-q--p { font-size: clamp(1.25rem, 1.55vw, 1.5rem); line-height: 1.25; }
.pa-vao figcaption { color: var(--tinta); }
.pa-vao--and figcaption { font-size: 1.1875rem; margin-top: 1.3rem; }
.pa-vao--p .pa-dentro { padding: calc(var(--pa-rec) + clamp(.8rem, 1.1vw, 1.2rem)); }
.pa-vao--p figcaption { font-size: 1rem; margin-top: .6rem; white-space: nowrap; }
.pa-vao--p figcaption::before { display: none; }
.pa-vao--p figcaption { display: block; }
.pa-vao--p figcaption span { white-space: nowrap; }
.pa-vao--liso .pa-dentro, .pa-vao--p .pa-dentro { padding: clamp(1.25rem, 2vw, 2rem); }
.pa-vao--tha .pa-dentro, .pa-vao--mar .pa-dentro { padding-right: calc(var(--margem) * .6); }

/* nota: o único trecho escuro da parede */
.pa-vao--not { background: var(--verde-botao); box-shadow: 0 0 0 var(--pa-b) var(--trelica); }
.pa-vao--not::before { inset: 6px; border-color: rgb(247 243 232 / .26); }
.pa-vao--not .pa-dentro { padding: clamp(1.4rem, 2.1vw, 2.1rem); justify-content: space-between; gap: 1rem; }
.pa-nota { display: grid; gap: .55rem; justify-items: start; color: var(--creme-luz); }
.pa-nota__n { font-family: var(--f-titulo); font-size: clamp(3rem, 4.8vw, 4.6rem); line-height: .9; letter-spacing: -.02em; }
.pa-nota__e { color: var(--verde-claro); }
.pa-nota__t { font-size: var(--t-mini); letter-spacing: .14em; text-transform: uppercase; color: var(--creme); }
.pa-todas { align-self: flex-start; color: var(--creme-luz); }
.pa-todas svg { transition: transform .3s var(--suave); }
.pa-todas:hover svg { transform: translate(2px, -2px); }
.pa-vao--not :focus-visible { outline-color: var(--creme-luz); }

@media (max-width: 1100px) {
  .pa-secao { padding-right: var(--margem); }
  .pa-parede {
    padding-right: var(--pa-b);
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      "cab cab cab cab cab cab"
      "and and and and and and"
      "ren ren ren ren mrc mrc"
      "jan jan jan jan jan jan"
      "tha tha tha mar mar mar"
      "sab sab sab sab not not";
  }
  .pa-cabeca { margin-right: calc(var(--pa-b) * -1); }
  .pa-fio--b, .pa-fio--c { display: none; }
  .pa-fio--a, .pa-fio--d { margin-right: calc((var(--margem) + var(--pa-b)) * -1); }
  .pa-vao--and::before { right: var(--pa-q); }
  .pa-vao--and .pa-dentro { padding-right: calc(var(--pa-q) + var(--pa-b) + clamp(1.25rem, 2.6vw, 2.75rem)); }
  .pa-vao--tha .pa-dentro, .pa-vao--mar .pa-dentro { padding-right: clamp(1.25rem, 2vw, 2rem); }
}
@media (max-width: 620px) {
  .pa-secao { --pa-b: 9px; --pa-rec: .65rem; }
  .pa-parede {
    grid-template-areas:
      "cab cab cab cab cab cab"
      "and and and and and and"
      "ren ren ren ren ren f1"
      "mrc mrc mrc tha tha tha"
      "jan jan jan jan jan jan"
      "f2 mar mar mar mar mar"
      "sab sab sab sab sab sab"
      "not not not not not not";
  }
  .pa-vao--f1 { display: block; grid-area: f1; }
  .pa-vao--f2 { display: block; grid-area: f2; }
  .pa-vao--f1::before, .pa-vao--f2::before { inset: .55rem; }
  .pa-cabeca { padding-bottom: 2rem; }
  .pa-dentro { padding: calc(var(--pa-rec) + .85rem); }
  .pa-vao--liso .pa-dentro, .pa-vao--p .pa-dentro, .pa-vao--tha .pa-dentro, .pa-vao--mar .pa-dentro { padding: 1.15rem 1.1rem 1.1rem 1.25rem; }
  .pa-vao--ren .pa-dentro { padding-top: 2.75rem; }
  .pa-fio--d { display: none; }
  .pa-vao--p figcaption span { display: block; }
  .pa-vao--mar figcaption span { display: inline; }
  .pa-vao--and { --pa-q: .9rem; }
  .pa-vao--and .pa-dentro { padding: 7.5rem calc(var(--pa-q) + var(--pa-b) + 1rem) calc(var(--pa-q) + var(--pa-b) + 1.1rem) calc(var(--pa-q) + var(--pa-b) + 1.15rem); }
  .wf-fala .pa-q--g { font-size: clamp(1.75rem, 8vw, 2.2rem); }
  .pa-vao--jan .pa-dentro { padding-top: 4.5rem; }
  .pa-vao--p figcaption { white-space: normal; }
  .pa-vao--not .pa-dentro { padding: 1.5rem 1.4rem 1.1rem; gap: .6rem; }
}