/* ============================================
   Gallery / Portfolio Styles
   ============================================ */

.contenitore_gallery { display: grid; grid-template: auto / repeat(7, 1fr); margin-bottom: 50px; position: relative; }
.wrap_contenuto_gallery { grid-column: 1 / span 7; display: grid; grid-template-columns: repeat(7, 1fr); gap: 25px; margin-bottom: 50px; }
.info_progetto { grid-column: 1 / span 2; position: relative; display: flex; flex-direction: column; }
.info_progetto .titleField { margin-bottom: 20px; }
.info_progetto .titleField .label { font-family: var(--font-mono); font-size: 10px;  opacity: 0.5; display: block; margin-bottom: 5px; }
.info_progetto .titleField .text { font-family: var(--font-heading); font-size: 1.2em;  line-height: 1.1; }
.info_progetto .titleField .text a { text-decoration: none; }
.info_progetto .titleField .text a:hover { text-decoration: underline; }
.info_progetto .indent25 { text-indent: 25px; font-size: 12px; line-height: 1.4; margin-bottom: 20px; }
.sezioni_progetto { margin-top: auto; }
.wrap_dettagli_progetto { margin-bottom: 15px; }
.dettagli_progetto { margin-bottom: 10px; }
.dettagli_progetto h5 { font-family: var(--font-mono); font-size: 10px;  opacity: 0.5; margin-bottom: 2px; }
.dettagli_progetto p { font-family: var(--font-mono); font-size: 10px;  }
.numero_img_gallery { font-family: var(--font-mono); font-size: 10px;  margin-bottom: 10px; }
.gallery-nav { display: flex; gap: 10px; margin-top: 10px; }
.gallery-nav .button { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--foreground); border-radius: 50%; cursor: pointer; background: transparent; transition: all 0.3s ease; padding: 0; }
.gallery-nav .button:hover { background: var(--foreground); color: var(--background); }
.gallery-nav .button svg { width: 14px; height: 14px; }
.gallery_immagini { grid-column: 3 / span 5; position: relative; overflow: hidden; }
.swiper-container { width: 100%; overflow: hidden; position: relative; }
.swiper-wrapper { display: flex; transition: transform 0.5s ease; }
.swiper-slide { flex: 0 0 100%; min-width: 0; position: relative; }
.swiper-slide img { width: 100%; height: auto; display: block; object-fit: cover; }
.info_progetto .verticalLine { width: 1px; opacity: 0.15; background-color: var(--border); position: absolute; right: -12px; top: 0; bottom: 0; }

.tile { position: relative; display: block; text-decoration: none; color: inherit; grid-column: span 2; overflow: hidden; }
.tile.large { grid-column: 1 / span 4; }
.tile .imageContainer { width: 100%; position: relative; overflow: hidden; }
.tile .imageContainer picture::before { content: ""; display: block; padding-top: 75%; }
.tile .imageContainer img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; transition: transform 0.5s ease; }
.tile:hover .imageContainer img { transform: scale(1.05); }
.tile .tileContent { padding: 15px 0; }
.tile .titleContainer { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; }
.tile .titleContainer .caption { opacity: 0.5; display: block; margin-bottom: 5px; }
.tile .titleContainer .title { font-family: var(--font-heading); font-size: 16px;  line-height: 1.1; }
.tile .titleContainer .arrow svg { width: 18px; height: 18px; }
.tile .summaryContainer { padding: 0 0 10px; }
.tile .summary { font-size: 12px; line-height: 1.4; opacity: 0.7; }
.tile .meta { display: flex; gap: 15px; font-family: var(--font-mono); font-size: 10px;  opacity: 0.5; }

.product { position: relative; display: block; text-decoration: none; color: inherit; grid-column: span 2; overflow: hidden; }
.product.large { grid-column: 1 / span 4; }
.product .imageContainer { position: relative; overflow: hidden; }
.product .imageContainer picture::before { content: ""; display: block; padding-top: 75%; }
.product .imageContainer img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; transition: transform 0.5s ease; }
.product:hover .imageContainer img { transform: scale(1.05); }
.product .productContent { padding: 15px 0; }
.product .productContent .label { font-family: var(--font-mono); font-size: 10px;  opacity: 0.5; display: block; margin-bottom: 3px; }
.product .productContent .title { font-family: var(--font-heading); font-size: 16px;  line-height: 1.1; margin-bottom: 10px; }
.product .productFields { display: flex; flex-wrap: wrap; gap: 10px; }
.product .productFields .field { font-family: var(--font-mono); font-size: 10px;  opacity: 0.5; }

.article { display: block; text-decoration: none; color: inherit; grid-column: 1 / span 4; position: relative; padding-bottom: 30px; margin-bottom: 30px; }
.article .grid { display: grid; gap: var(--grid-gap-mobile); grid-template-columns: repeat(4, 1fr); }
.article .image { grid-column: 1 / span 4; position: relative; overflow: hidden; }
.article .image picture::before { content: ""; display: block; padding-top: 56.25%; }
.article .image img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; transition: transform 0.5s ease; }
.article:hover .image img { transform: scale(1.03); }
.article .content { grid-column: 1 / span 4; padding-top: 15px; }
.article .content .title { font-family: var(--font-heading); font-size: 20px;  line-height: 1.1; display: block; margin-bottom: 10px; }
.article .content .summary { font-size: 12px; line-height: 1.4; margin-bottom: 15px; opacity: 0.7; }
.article .content .metaInfo { display: flex; gap: 15px; font-family: var(--font-mono); font-size: 10px;  opacity: 0.5; }

@media (min-width: 768px) { .article .image { grid-column: 1 / span 2; } .article .content { grid-column: 3 / span 2; } }
@media (min-width: 1024px) {
    .tile { grid-column: span 1; }
    .tile.large { grid-column: span 2; }
    .product.large { grid-column: span 4; grid-row: span 2; }
    .article { grid-column: 1 / span 7; }
    .article .grid { grid-template-columns: repeat(7, 1fr); gap: var(--grid-gap-desktop); }
    .article .image { grid-column: 1 / span 3; }
    .article .content { grid-column: 4 / span 3; align-self: center; }
}