/* Each incoming surface overlaps the space reserved by its neighbour.
   Its mask clips the real photograph/colour, not a matching paint swatch. */
.site-frame{
  --onda-grande:clamp(61px,11.7cqw,180px);
  --onda-media:clamp(43px,7.6cqw,118px);
  --onda-suave:clamp(31px,4.8cqw,75px);
  --onda-rodape:clamp(20px,2.8cqw,42px);
  --onda-respiro:clamp(13px,1.65cqw,26px);
}
.ep-surface,.or-journal,.lo-shell{display:flex;flex-direction:column}
.ep-surface>section,.or-journal>section,.lo-shell>section{width:100%;flex:none;min-width:0}
[data-onda="crista"]{--recorte:url('./assets/ondas/crista.svg')}
[data-onda="enseada"]{--recorte:url('./assets/ondas/enseada.svg')}
[data-onda="deriva"]{--recorte:url('./assets/ondas/deriva.svg')}
[data-altura-onda="grande"]{--onda-h:var(--onda-grande)}
[data-altura-onda="media"]{--onda-h:var(--onda-media)}
[data-altura-onda="suave"]{--onda-h:var(--onda-suave)}
[data-altura-onda="rodape"]{--onda-h:var(--onda-rodape)}
[data-saida-onda="grande"]{--saida:var(--onda-grande)}
[data-saida-onda="media"]{--saida:var(--onda-media)}
[data-saida-onda="suave"]{--saida:var(--onda-suave)}
[data-saida-onda="rodape"]{--saida:var(--onda-rodape)}

body .site-frame [data-onda]{
  position:relative;
  margin-block-start:calc(0px - var(--onda-h));
  padding-block-start:calc(var(--onda-h) + var(--onda-respiro));
  mask-image:var(--recorte),linear-gradient(#000,#000);
  mask-size:100% var(--onda-h),100% calc(100% - var(--onda-h) + 2px);
  mask-position:top center,bottom center;
  mask-repeat:no-repeat;
}
body .site-frame [data-onda]::before{content:none}
body .site-frame [data-saida-onda]{padding-block-end:calc(var(--saida) + var(--onda-respiro))}
.onda-laminas{
  display:block;position:absolute;inset:0 0 auto;z-index:2;width:100%;height:var(--onda-h);
  overflow:hidden;pointer-events:none;user-select:none;
  filter:drop-shadow(0 2px 1.7px rgb(18 34 53 / .28));
}
[data-relevo="petroleo"]{--folio:#3d7577;--miolo:#3d7577}
[data-relevo="oliva"]{--folio:#4a4b1f;--miolo:#4a4b1f}
[data-relevo="biblioteca"]{--folio:#bdbebf;--miolo:#3d7577}
[data-relevo="oficina"]{--folio:#fba311;--miolo:#3d7577}
[data-relevo="vinho"]{--folio:#e32d12;--miolo:#fba311}
[data-relevo="catalogo"]{--folio:#fba311;--miolo:#fba311}
.onda-fundo{fill:var(--folio)}
.onda-meio{fill:var(--miolo)}
.onda-sombra{fill:#122235;opacity:.24}
.onda-luz{fill:#fba311;opacity:.26}

/* Keep the home compact. These sections previously reserved space for an
   older wave as well; the new rise belongs to the section, not its content. */
body .home-surface .hero[data-saida-onda]{padding-bottom:0;--depth:var(--saida)}
.home-surface .hero .scene-note{bottom:calc(var(--saida) + 10px)}
body .home-surface .numbers-layout{padding-block:0}
body .home-surface .home-impact[data-onda]{--onda-respiro:clamp(8px,1.2cqw,18px)}
body .home-surface .products-scene[data-onda]{--onda-respiro:clamp(15px,1.8cqw,28px)}
body .home-surface .news-scene[data-onda]{padding-bottom:clamp(36px,4cqw,64px)}
.site-frame .products-list>.product-line+.product-line{border-left:0}

body .ep-hero[data-saida-onda]>.wrap{padding-bottom:var(--onda-respiro)}
.ep-section>.ep-jump{background:none;color:#122235;margin-bottom:clamp(19px,2.6cqw,38px)}
.ep-section>.ep-jump>.wrap{padding-block:0;gap:8px clamp(13px,1.9cqw,28px)}
.ep-section>.ep-jump a{color:#122235;text-decoration-color:#3d7577}
body .ep-paper+ .ep-paper[data-onda]>.wrap{border-top:0;padding-top:0}
.pagina-escolas #colecoes[data-onda]{--bg:#e5e5e5}
body .ep-product-intro[data-saida-onda] .wrap{padding-bottom:var(--onda-respiro)}

/* Allow the image to continue underneath the Clube wave. Its scene controls
   stay above the uppermost point of the cut. */
body .lo-hero[data-saida-onda]{padding-bottom:0}
.lo-hero[data-saida-onda] .lo-band{border-bottom:0}
.lo-hero[data-saida-onda] .lo-slide-inner{padding-bottom:calc(var(--saida) + 66px)}
.lo-hero[data-saida-onda] .lo-controls{bottom:calc(var(--saida) + 6px)}
body .or-news-cover[data-saida-onda]{padding-bottom:var(--saida)}
body .or-news-cover[data-saida-onda]>.wrap{padding-bottom:var(--onda-respiro)}

/* A catalogue uses the same full-width cut as the long pages. */
.pagina-produtos #produtos{padding-block:0}
.cat-abertura{background:#fba311 url('./assets/grao-fosco.png')}
.cat-corpo{background:var(--shelf,#e5e5e5);padding-bottom:clamp(36px,4.5cqw,66px)}
.pagina-produtos .cat-abertura .products-heading{padding:clamp(34px,4.5cqw,70px) 0 0}
.pagina-produtos .cat-abertura .products-heading::before,.pagina-produtos .cat-abertura .products-heading::after{content:none}
.pagina-produtos .cat-corpo .products-list{padding-top:0}

body .site-frame footer{padding-bottom:0}
body .site-frame .rodape-base[data-onda]{background:#14213d;--onda-respiro:4px;padding-bottom:clamp(16px,1.9cqw,28px)}
body .site-frame .footer-top[data-saida-onda]{padding-bottom:calc(var(--saida) + 9px)}
body .site-frame .rodape-base>.footer-bottom{border-top:0;padding-top:0}

@container page (max-width:620px){
  body .ep-hero[data-saida-onda],body .or-news-cover[data-saida-onda]{padding-bottom:0}
  body .ep-hero[data-saida-onda]>.wrap,body .or-news-cover[data-saida-onda]>.wrap{padding-bottom:20px}
}
@container page (max-width:590px){
  .lo-hero[data-saida-onda] .lo-slide-inner{padding-bottom:24px}
  .lo-hero[data-saida-onda] .lo-controls{bottom:auto;padding-bottom:calc(var(--saida) + 10px)}
}
@media print{
  body .site-frame [data-onda]{mask-image:none;margin-top:0;padding-top:16px}
  .onda-laminas{display:none}
  body .site-frame [data-saida-onda]{padding-bottom:16px}
}

/* Both sides of the footer joint use the same silhouette. Subtract it from
   the content and keep it on the footer, translated down by the open gap. */
@media screen {
  .site-frame {
    --onda-encaixe: url('./assets/ondas/deriva.svg');
    --altura-encaixe: clamp(40px, 7.8cqw, 120px);
    --fresta-encaixe: clamp(9px, 1.05cqw, 16px);
  }
  .site-frame > #conteudo {
    -webkit-mask-image: linear-gradient(#000, #000), var(--onda-encaixe);
    mask-image: linear-gradient(#000, #000), var(--onda-encaixe);
    mask-size: 100% 100%, 100% var(--altura-encaixe);
    mask-position: center, bottom center;
    mask-repeat: no-repeat;
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
  }
  .site-frame > #conteudo > :is(.home-surface,.ep-surface,.or-journal,.lo-shell) > section:last-of-type,
  .site-frame > #conteudo .cat-corpo,
  .site-frame > #conteudo > .closing-scene,
  .site-frame > #conteudo .jr-relacionadas {
    padding-block-end: calc(var(--altura-encaixe) + var(--onda-respiro));
  }
  .site-frame > #rodape {
    margin-block-start: calc(var(--fresta-encaixe) - var(--altura-encaixe));
    padding-block-start: calc(var(--altura-encaixe) * .77 + var(--onda-respiro));
    -webkit-mask-image: var(--onda-encaixe), linear-gradient(#000, #000);
    mask-image: var(--onda-encaixe), linear-gradient(#000, #000);
    mask-size: 100% var(--altura-encaixe), 100% calc(100% - var(--altura-encaixe) + 1px);
    mask-position: top center, bottom center;
    mask-repeat: no-repeat;
  }
}