/* Modali di approfondimento (<dialog>): entrano dall'alto, testo con una foto o con una galleria */
.modal{position:fixed;inset:0;width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--ts-ink);color:var(--ts-sand);overflow:hidden}
.modal::backdrop{background:rgba(0,0,0,.6)}
.modal[open]{animation:modal-in var(--modal-in) cubic-bezier(.2,.7,.2,1)}
.modal.is-closing{animation:modal-out var(--modal-out) ease forwards}
@keyframes modal-in{from{transform:translateY(-100%)}to{transform:none}}
@keyframes modal-out{to{transform:translateY(-100%)}}
.modal__close{position:absolute;top:1.6vw;right:2vw;z-index:5;width:44px;height:44px;background:none;border:0;cursor:pointer;color:var(--ts-lavender)}
.modal__close::before,.modal__close::after{content:"";position:absolute;left:6px;right:6px;top:50%;height:2px;background:currentColor;transform:rotate(45deg)}
.modal__close::after{transform:rotate(-45deg)}
.modal__inner{display:grid;height:100%}
.modal__text{overflow-y:auto;padding:6vw 3.5vw 4vw 5vw;display:flex;flex-direction:column;justify-content:center}
.modal__text .display{color:var(--ts-sand);font-size:var(--fs-modal)}
.modal__text .sub{margin-top:1vw;color:var(--ts-olive)}
.modal__text .copy{margin-top:1.8vw;line-height:1.8}
.modal__text .list{margin-top:1.2em}
.modal--split .modal__inner{grid-template-columns:1fr 2fr}
.modal--split .display{font-size:var(--fs-modal-split)}
.modal__photo{position:relative;overflow:hidden}
.modal__photo img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover}
.modal--gallery .modal__inner{grid-template-columns:48% 52%}
.modal__masonry{overflow-y:auto;padding:6vw 5vw 4vw 1vw}
.modal__cols{columns:2;column-gap:1vw}
.modal__zoom{display:block;width:100%;padding:0;border:0;background:none;margin-bottom:1vw;break-inside:avoid;cursor:zoom-in}
.modal__zoom img{width:100%}
@media (prefers-reduced-motion:reduce){.modal[open],.modal.is-closing{animation:none}}

@media (max-width:1024px){
  .modal--split .modal__inner{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .modal{overflow-y:auto}
  .modal__inner,.modal--split .modal__inner,.modal--gallery .modal__inner{grid-template-columns:1fr;height:auto}
  .modal__text{padding:22vw 8% 8vw;overflow:visible}
  .modal__text .copy{margin-top:5vw}
  .modal__photo{height:70vw}
  .modal__masonry{overflow:visible;padding:0 8% 10vw}
  .modal__cols{column-gap:3vw}
  .modal__zoom{margin-bottom:3vw}
  .modal__close{top:4vw;right:4vw}
}