/* Breakpoints:

    xl  → ≥ 1400px  (touch table / tv desktop)

    lg  → < 1400px  (desktop)

    md  → < 1024px  (tablet landscape)

    sm  → <  768px  (tablet portrait / mobile landscape)

    xs  → <  480px  (mobile portrait)

*/



/* ── Tipografia */



h1 {

  font-size: clamp(2.2rem, 5vw, 3.5rem);

}



h2 {

  font-size: clamp(1.6rem, 4vw, 2.8rem);

  letter-spacing: clamp(1px, 0.5vw, 4px);

}



p {

  font-size: clamp(1rem, 1.5vw, 1.3rem);

}



/* ── Layout */



#app {

  padding: clamp(1.5rem, 5vw, 4rem);

  gap: clamp(0.5rem, 2vh, 1.5rem);

  justify-content: center;

}



/* ── Logo */



.logo {

  width: clamp(8rem, 20vw, 15rem);

}



/* ── CTA Pergamene / Incisioni */



.buttons {

  flex-wrap: wrap;

  gap: clamp(0.5rem, 2vw, 1rem);

}



button {

  padding: clamp(0.8rem, 2vw, 1.3rem) clamp(1rem, 3vw, 1.8rem);

  font-size: clamp(2rem, 4vw, 3rem);

  touch-action: manipulation; /* elimina il 300ms delay su touch */

}



/* ── Info btn */



.info-btn {

  font-size: clamp(0.85rem, 1.5vw, 1.1rem);

  padding: clamp(0.5rem, 1.5vw, 0.8rem) clamp(1rem, 2vw, 1.5rem);

}



/* ── Close button (solo per electron) */



body.web-mode .close-btn {

  display: none;

}



/* ── Back btn */



.back-btn {

  top: clamp(12px, 2vh, 24px);

  left: clamp(12px, 2vw, 24px);

  font-size: clamp(1.4rem, 3vw, 2rem);

  padding: clamp(0.3rem, 1vw, 0.5rem) clamp(0.6rem, 1.5vw, 1rem);

}



/* ── Separator */



.separator {

  max-width: clamp(200px, 50vw, 400px);

  margin: clamp(12px, 3vh, 30px) 0;

}



/* ── Footer */



.institutional-footer {

  flex-wrap: wrap;

  gap: clamp(8px, 2vw, 16px);

  padding: clamp(8px, 2vw, 10px) clamp(12px, 3vw, 20px);

}



.footer-left {

  display: flex;

  flex-direction: column;

  flex: 1;

  align-items: center;

  gap: 4px;

}



.footer-center {

  display: flex;

  align-items: center;

  flex: 1;

  align-items: center;

  justify-content: center;

  gap: clamp(12px, 2vw, 20px)

}



.footer-logo {

  height: clamp(2.5rem, 6vw, 5rem);

}



.footer-text {

  font-size: clamp(0.62rem, 1vw, 0.72rem);

}



.footer-tea-logo {

  height: clamp(28px, 4vw, 42px);

}



.footer-museo-logo {

  height: clamp(32px, 5vw, 55px);

  width: auto;

  object-fit: contain;

}



/* ── Gallery */



.gallery {

  gap: clamp(12px, 2vw, 24px);

  margin-top: clamp(20px, 4vh, 40px);

}



.img-cover {

  height: clamp(120px, 18vw, 200px);

}



/* ── Pagination */



.pagination {

  gap: clamp(4px, 1vw, 8px);

  padding: clamp(16px, 3vh, 32px) 0 clamp(8px, 2vh, 16px);

  flex-wrap: wrap;

}



.page-btn {

  width: clamp(32px, 5vw, 40px);

  height: clamp(32px, 5vw, 40px);

  font-size: clamp(0.8rem, 1.2vw, 0.95rem);

}



/* ── Carosello / modale */



.modal-content {

  max-width: clamp(320px, 92vw, 90vw);

  max-height: clamp(400px, 92vh, 90vh);

  border-radius: clamp(12px, 2vw, 20px);

}



.modal-toolbar {

  padding: clamp(10px, 2vw, 16px) clamp(12px, 2.5vw, 20px);

  gap: 8px;

  flex-wrap: wrap;

}



.carousel-title {

  font-size: clamp(1.1rem, 2.5vw, 1.8rem);

  min-width: 0;

}



.zoom-btn {

  min-width: clamp(32px, 4vw, 40px);

  height: clamp(32px, 4vw, 40px);

}



.zoom-btn img {

  width: clamp(14px, 2vw, 18px);

  height: clamp(14px, 2vw, 18px);

}



/* ── Info modal */



.info-modal-content {

  border-radius: clamp(12px, 2vw, 20px);

}



.info-header {

  padding: clamp(16px, 3vw, 32px) clamp(40px, 6vw, 60px) clamp(12px, 2vw, 24px) clamp(16px, 3vw, 32px);

}



.info-header h2 {

  font-size: clamp(1.4rem, 3vw, 2rem);

}



.info-body {

  padding: clamp(16px, 3vw, 24px) clamp(16px, 3vw, 32px) clamp(20px, 4vw, 32px);

}



.accordion-header {

  padding: clamp(14px, 2vw, 20px) clamp(16px, 3vw, 24px);

  font-size: clamp(1rem, 1.5vw, 1.2rem);

}



.accordion-content p,

.accordion-content li {

  font-size: clamp(0.9rem, 1.3vw, 1.1rem);

  animation: none;

}



/* md — tablet landscape (< 1024px) */

@media (max-width: 1024px) {



  .modal-body {

    flex-direction: column;

  }



  .thumbs {

    flex-direction: row;

    width: 100%;

    height: auto;

    max-height: 110px;

    overflow-x: auto;

    overflow-y: hidden;

    justify-content: flex-start;

    padding-right: 0;

    padding-bottom: 4px;

  }



  .thumbs img {

    width: 80px;

    height: 80px;

    flex-shrink: 0;

  }



  .image-wrapper {

    flex: none;

    height: clamp(280px, 55vh, 500px);

  }

}



/* sm — Tablet portrait / mobile landscape (< 768px) */

@media (max-width: 768px) {



  .institutional-footer {

    flex-direction: column;

    align-items: center;

    text-align: center;

  }



  .footer-left,

.footer-center,

.footer-tea {

  align-items: center;

}



  .gallery-item {

    width: calc(50% - 12px);

  }



  .buttons {

    flex-direction: column;

    align-items: center;

  }



  .zoom-btn.reset-btn {

    font-size: 0.75rem;

    padding: 6px 10px;

  }

}



/* xs — Mobile portrait (< 480px) */

@media (max-width: 480px) {



  #app {

    padding: 1.2rem 1rem;

  }



  .gallery-item {

    width: 100%;

  }



  .close-btn {

    width: 40px;

    height: 40px;

    font-size: 20px;

    top: 12px;

    right: 12px;

  }



  .zoom-btn.reset-btn {

    display: none;

  }



  .thumbs img {

    width: 60px;

    height: 60px;

  }



  .image-wrapper {

    height: clamp(220px, 50vh, 400px);

  }



  .accordion-header {

    gap: 8px;

  }



  .accordion-icon {

    font-size: 1.4rem;

  }

}



/* Touch ottimizzazioni */

@media (pointer: coarse) {



  button,

  .page-btn,

  .zoom-btn,

  .thumbs img,

  .accordion-header {

    min-height: 44px;

    touch-action: manipulation;

  }



  .gallery-item:hover {

    transform: none;

  }



  .gallery-item:active {

    transform: scale(0.98);

    box-shadow: 0 4px 12px rgba(74, 124, 140, 0.2);

  }



  button:hover {

    transform: none;

  }



  button:active {

    transform: translateY(-2px);

  }



  .thumbs img:hover {

    transform: none;

  }



  .thumbs img:active {

    transform: scale(1.05);

    border-color: var(--col-accent-teal);

  }



  .buttons {

    gap: 1.2rem;

  }



  .pagination {

    gap: 10px;

  }



  .page-btn {

    width: 44px;

    height: 44px;

  }



  .thumbs img {

    width: 80px;

    height: 80px;

  }

}



/* xl — Touch table / large desktop (≥ 1400px) */

@media (min-width: 1400px) {



  .gallery-item {

    width: calc(20% - 20px);

  }



  @media (pointer: coarse) {

    .thumbs {

      width: 130px;

    }



    .thumbs img {

      width: 100px;

      height: 100px;

    }

  }

}