/* =================================================== */
/* 1. FONT IMPORT (Self-hosted) */
/* =================================================== */

@font-face {
 font-family: 'Satoshi';
 src: url('../fonts/Satoshi-Light.woff2') format('woff2');
 font-weight: 300;
 font-style: normal;
 font-display: swap;
}
@font-face {
 font-family: 'Satoshi';
 src: url('../fonts/Satoshi-Regular.woff2') format('woff2');
 font-weight: 400;
 font-style: normal;
 font-display: swap;
}
@font-face {
 font-family: 'Satoshi';
 src: url('../fonts/Satoshi-Medium.woff2') format('woff2');
 font-weight: 500;
 font-style: normal;
 font-display: swap;
}
@font-face {
 font-family: 'Satoshi';
 src: url('../fonts/Satoshi-Bold.woff2') format('woff2');
 font-weight: 700;
 font-style: normal;
 font-display: swap;
}
@font-face {
 font-family: 'Satoshi';
 src: url('../fonts/Satoshi-Black.woff2') format('woff2');
 font-weight: 900;
 font-style: normal;
 font-display: swap;
}

/* =================================================== */
/* 2. ROOT & VARIABILI */
/* =================================================== */
:root {
 --font-primary: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 --fw-light: 300;
 --fw-regular: 400;
 --fw-medium: 500;
 --fw-bold: 700;
 --fw-black: 900;

 --color-text: #333;
 --color-text-light: #F0F0F0;
 --color-bg-dark: #3a1d12;
 --color-bg-light: #ffffff;
 --color-primary: #D94E27;
 --color-white: #ffffff;
 --color-black: #000000;
 --color-text-red: #511809;
 --color-bg-cta: #d95214;
 --color-border: #d9d9d9;

 --padding-container: clamp(20px, 4.2vw, 65px);
 --site-header-height: 90px;
 --main-nav-height: 70px;

 --font-h1: clamp(2.5rem, 5vw, 6rem);
 --font-h1-sm: clamp(2.5rem, 4.5vw, 5.5rem);
 --font-h2: clamp(2rem, 2.5vw, 3.5rem);
 --font-body: clamp(1rem, 1.1vw, 1.125rem);
}

/* =================================================== */
/* 3. RESET & BASE */
/* =================================================== */
*,
*::before,
*::after {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

html {
 scroll-behavior: smooth;
}

body {
 font-family: var(--font-primary);
 font-weight: var(--fw-regular);
 font-size: var(--font-body);
 line-height: 1.6;
 color: var(--color-text);
 background-color: var(--color-bg-light);
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: reduce) {
 html:focus-within {
  scroll-behavior: auto;
 }
 *, *::before, *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
 }
}

img, video {
 max-width: 100%;
 height: auto;
 display: block;
}

ul {
 list-style: none;
}

a {
 text-decoration: none;
 color: inherit;
}

/* =================================================== */
/* 4. LAYOUT UTILITY */
/* =================================================== */
.container {
 width: 100%;
 max-width: 1903px;
 margin-left: auto;
 margin-right: auto;
 padding-left: var(--padding-container);
 padding-right: var(--padding-container);
}

.full-width {
 width: 100%;
 padding-left: 0;
 padding-right: 0;
}
.full-width > .container {
 max-width: none;
 padding: 0;
}


/* =================================================== */
/* 5. HEADER (Logo + Burger) */
/* =================================================== */
.site-header {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 1002;
 padding: 20px 0;
  pointer-events: none;
}

.site-header .header-container {
 width: 100%;
 max-width: 1903px;
 margin-left: auto;
 margin-right: auto;
 padding-left: var(--padding-container);
 padding-right: var(--padding-container);
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 height: auto;
 padding-top: var(--padding-container);
 padding-bottom: var(--padding-container);
}

.site-header .logo-link {
 width: 265px;
}

@media (max-width: 1024px) {
 .site-header .header-container {
  align-items: center;
 }
}

.header-right-col {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 20px;
 pointer-events: all;
}

.header-discover-link {
 display: flex;
 flex-direction: row;
 order: 2;
 align-items: center;
 color: var(--color-white);
 text-decoration: none;
 font-family: var(--font-primary);
 font-weight: var(--fw-medium);
 font-size: 0.9rem;
 line-height: 1.4;
 white-space: nowrap;

 writing-mode: vertical-rl;
 transform: rotate(180deg);

 transition: opacity 0.3s ease;
}

.header-discover-link:hover {
 opacity: 0.7;
}

.header-discover-link .discover-text {
 margin-bottom: 0.75rem;
}

.header-discover-link .discover-arrow {
 width: 0.8rem;
 height: auto;
 fill: currentColor;
 transform: rotate(180deg);
}

@media (max-width: 768px) {
 .header-discover-link {
  display: none;
 }
}


/* =================================================== */
/* NUOVA SEZIONE: OVERLAY MENU MOBILE */
/* =================================================== */
.mobile-nav-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100vh;
 height: 100dvh;
 z-index: 998;

 background-color: #0a0a0a;

 opacity: 0;
 visibility: hidden;
 transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    visibility 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.mobile-nav-overlay.is-visible {
 opacity: 1;
 visibility: visible;
}

.mobile-nav-background {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
 opacity: 0.3;

 background-image: repeating-linear-gradient(
  to bottom,
  rgba(255, 255, 255, 0.2) 0px,
  rgba(255, 255, 255, 0.2) 1px,
  transparent 1px,
  transparent 3px
 );
 background-size: 100% 3px;
}

.mobile-nav-content {
 position: relative;
 z-index: 2;
 width: 100%;
 height: 100%;
 display: flex;
 flex-direction: column;
 justify-content: flex-start;
 padding-top: var(--padding-container);
 padding-bottom: var(--padding-container);
}

.logo-link--overlay {
 width: 265px;
 flex-shrink: 0;
 margin-bottom: 3rem;
 opacity: 0;
}

.overlay-nav {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 flex-grow: 1;
 overflow-y: auto;
 scrollbar-width: none;
}
.overlay-nav::-webkit-scrollbar {
    display: none; /* Nasconde la barra */
}

.overlay-nav .nav-menu {
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
}

.overlay-nav .nav-menu li {
 opacity: 0;
}

.overlay-nav .nav-menu a {
 display: block;
 color: var(--color-white);
 font-size: clamp(1.5rem, 3vw, 2.2rem);
 font-weight: var(--fw-bold);
 text-transform: uppercase;
 line-height: 1.3;
 padding: 0.5rem 0;
 transition: color 0.3s ease;
 text-wrap: balance;
}

.overlay-nav .nav-menu a:hover {
 color: var(--color-primary);
}

.overlay-nav .social-links {
 margin-top: 2rem;
 flex-direction: column;
 align-items: flex-start;
 gap: 1rem;
 opacity: 0;
}

.overlay-nav .social-links .social-links-label {
 color: var(--color-white);
 opacity: 0.7;
 margin-right: 0;
}

.overlay-nav .social-links li {
 display: inline-block;
 margin-right: 1rem;
}

.overlay-nav .social-links a svg path,
.overlay-nav .social-links a svg circle {
 fill: var(--color-white);
}
.overlay-nav .social-links a:hover svg path,
.overlay-nav .social-links a:hover svg circle {
 fill: var(--color-primary);
}

.body-no-scroll {
 overflow: hidden;
}

/* ------------------------------------------- */
/* Stili Hamburger Menu (<a>) */
/* ------------------------------------------- */
.hamburger-menu-link {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 width: 30px;
 height: 20px;
 cursor: pointer;
 background: none;
 border: none;
 padding: 0;
 position: relative;
 z-index: 1001;
 text-decoration: none;
}

.hamburger-menu-link .line {
 display: block;
 width: 100%;
 height: 2px;
 background-color: white;
 transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.hamburger-menu-link.is-active .line--top {
 transform: translateY(9px) rotate(45deg);
}

.hamburger-menu-link.is-active .line--middle {
 opacity: 0;
}

.hamburger-menu-link.is-active .line--bottom {
 transform: translateY(-9px) rotate(-45deg);
}

/* ------------------------------------------- */
/* Stili "Scopri di più" */
/* ------------------------------------------- */
.discover-more-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.7);
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 999;
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.discover-more-overlay.is-visible {
 opacity: 1;
 visibility: visible;
}

.discover-more-link {
 display: flex;
 flex-direction: column;
 align-items: center;
 color: white;
 text-decoration: none;
 font-family: Arial, sans-serif;
 font-size: 1.1rem;
 line-height: 1.5;
 position: relative;
 transform: rotate(90deg);
 transform-origin: center;
 white-space: nowrap;
}

.discover-more-link .discover-text {
 margin-bottom: 0.5rem;
}

.discover-more-link .discover-arrow {
 width: 1.2rem;
 height: auto;
 fill: currentColor;
 transform: rotate(0deg);
}

/* =================================================== */
/* 6. WELCOME SCREEN (Hero + Nav Wrapper) */
/* =================================================== */
.welcome-screen {
 height: 100vh;
 height: 100dvh;
 display: flex;
 flex-direction: column;
 background-color: var(--color-black);
 min-height: 568px;
}

/* =================================================== */
/* 7. SEZIONE 1: HERO */
/* =================================================== */
.hero {
 flex-grow: 1;
 position: relative;
 overflow: hidden;
 display: flex;
 align-items: flex-end;
 justify-content: center;
}

.video-background {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
}

.video-background video {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.hero-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 2;

 background-image: repeating-linear-gradient(
  to bottom,
  rgba(0, 0, 0, 0.3) 0px,
  rgba(0, 0, 0, 0.3) 1px,
  transparent 1px,
  transparent 3px
 );
 background-size: 100% 3px;
}

.hero-title-svg {
 position: relative;
 z-index: 3;
 width: 100%;
 bottom: -1px;
}
.hero-title-svg img {
 width: 100%;
 display: block;
}

.scroll-down-arrow {
 position: absolute;
 bottom: 20px;
 left: 50%;
 transform: translateX(-50%);
 z-index: 3;
 color: var(--color-white);
 width: 40px;
 height: 40px;
}

/* =================================================== */
/* 8. SEZIONE 2: MAIN NAV */
/* =================================================== */
.main-nav {
 height: var(--main-nav-height);
 flex-shrink: 0;
 background-color: var(--color-bg-light);
 z-index: 1003;
}
body.body-no-scroll .main-nav {
    z-index: 101;
}

.main-nav.is-sticky {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 border-bottom: 1px solid var(--color-border);
}

.nav-container {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100%;
 max-width: 1903px;
 margin: 0 auto;
 padding: 0 var(--padding-container);
 border-bottom: 1px solid var(--color-border);
}

.main-nav.is-sticky .nav-container {
 border-bottom: none;
}

.nav-menu {
 display: flex;
 gap: 2rem;
 flex-grow: 1;
 justify-content: start;
}

.main-nav .nav-menu li a:hover {
    text-decoration: underline;
}

.nav-menu a {
 font-weight: var(--fw-medium);
}

.social-links {
 display: flex;
 gap: 8px;
 align-items: center;
}

.social-links a svg {
 width: 25px;
}

.social-links a svg path, .social-links a svg circle {
 fill: var(--color-text);
 transition: .5s;
}
.social-links a:hover svg path, .social-links a:hover svg circle {
 fill: #000;
}
.social-links a svg path.black {
    transition: .5s;
}
.social-links a svg path.black,
.social-links a:hover svg path.black {
 fill: transparent;
}

.social-links a svg path.white {
    transition: .5s;
}
.social-links a svg path.white,
.social-links a:hover svg path.white {
 fill: #fff;
}

span.social-links-label {
 margin-right: 10px;
 font-weight: var(--fw-medium);
 line-height: 1.2;
}
.main-nav span.social-links-label {
    text-align: right;
}

.main-nav .nav-menu li {
 position: relative;
 text-wrap: balance;
 text-align: center;
 line-height: 1.2;
}

.main-nav .nav-menu li:after {
 content: '';
 position: absolute;
 right: -1rem;
 height: 100%;
 width: 1px;
 background: var(--color-border);
 top: 50%;
 transform: translateY(-50%);
}

.main-nav .nav-menu li:last-child:after {
 display: none;
}

.main-nav .social-links li {
    line-height: 0;
}

/* =================================================== */
/* 9. SEZIONE 3: INTRO */
/* =================================================== */
.intro-section {
 padding: 80px 0;
}

.intro-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: var(--padding-container);
 align-items: center;
}

.intro-title h1,
.wave-title h2 {
 font-size: var(--font-h2);
 font-weight: var(--fw-light);
 line-height: 1.1;
}

.intro-title h1 strong {
 font-size: var(--font-h1);
 font-weight: var(--fw-black);
}
.wave-title h2 strong {
 font-size: var(--font-h1-sm);
 font-weight: var(--fw-black);
}

.intro-title .offset-text {
 margin-left: 3rem;
}

.text-columns {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 4rem;
 margin-bottom: 2rem;
}

.cta-button {
 display: inline-block;
 background-color: var(--color-primary);
 color: var(--color-white);
 padding: 1rem 2rem;
 font-weight: var(--fw-bold);
 text-transform: uppercase;
 transition: transform 0.3s ease;
}
.cta-button:hover {
 transform: scale(1.05);
}

/* =================================================== */
/* 10. SEZIONE 4: GALLERY */
/* =================================================== */
.gallery-section {
 background-color: #f4f4f4;
}

.gallery-grid {
 display: grid;
 grid-template-columns: repeat(8, 1fr);
}

@media (max-width: 1600px) {
 .gallery-grid {
  grid-template-columns: repeat(6, 1fr);
 }
 .gallery-grid .gallery-item:nth-last-child(-n+4) {
        display: none;
    }
}

@media (max-width: 1200px) {
 .gallery-grid {
  grid-template-columns: repeat(4, 1fr);
 }
}

@media (max-width: 768px) {
 .gallery-grid {
  grid-template-columns: repeat(2, 1fr);
 }
 .gallery-grid .gallery-item:nth-last-child(-n+10) {
        display: none;
    }
}

.gallery-item {
 position: relative;
 aspect-ratio: 1 / 1;
 overflow: hidden;
 display: block;
}

.gallery-item img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gallery-item-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: var(--color-bg-cta);
 opacity: 0;
 transition: opacity 0.3s ease;
 padding: 2rem;
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
 align-items: flex-start;
}

.gallery-item-title {
 color: var(--color-white);
 font-weight: var(--fw-bold);
 font-size: 1.2rem;
 transform: translateY(20px);
 opacity: 0;
 transition: transform 0.4s ease, opacity 0.4s ease;
 line-height: normal;
}

.gallery-item-zoom-icon {
 position: absolute;
 top: 2rem;
 right: 2rem;
 width: 30px;
 height: 30px;
 transform: scale(0.8);
 opacity: 0;
 transition: transform 0.4s ease, opacity 0.4s ease;
}
.gallery-item-zoom-icon svg {
 width: 100%;
 height: 100%;
}

.gallery-item:hover img {
 transform: scale(1.05);
}

.gallery-item:hover .gallery-item-overlay {
 opacity: 1;
}

.gallery-item:hover .gallery-item-title {
 transform: translateY(0);
 opacity: 1;
}

.gallery-item:hover .gallery-item-zoom-icon {
 transform: scale(1);
 opacity: 1;
}


/* =================================================== */
/* 11. SEZIONE 5: WAVE */
/* =================================================== */
.wave-section {
 width: 100%;
 position: relative;
 overflow: hidden;

 background-color: var(--color-bg-dark);
 color: var(--color-text-light);

 display: flex;
 align-items: center;

 padding: 8rem 0;
}

.wave-background {
 position: absolute;
 top: -15%;
 left: 0;
 width: 100%;
 height: 170%;
 background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
     url('../images/massa-2028-sfondo-apuane.jpg');
 background-size: cover;
 background-position: center center;
 background-repeat: no-repeat;
 z-index: 1;
}

.wave-content {
 position: relative;
 z-index: 2;
 width: 100%;
}

.wave-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: var(--padding-container);
 align-items: center;
}

.wave-divider-bottom {
 position: absolute;
 bottom: -1px;
 left: 0;
 width: 100%;
 overflow: hidden;
 line-height: 0;
 z-index: 3;
 pointer-events: none;
}

.wave-divider-bottom svg {
 display: block;
 width: 100%;
 height: 200px;
}

@media (max-width: 768px) {
 .wave-divider-bottom svg {
  height: 80px;
 }
}

.wave-text {
 font-size: 1.1rem;
 font-weight: var(--fw-light);
}

.wave-text p {
 margin-bottom: 1.5rem;
 text-wrap: balance;
 max-width: 768px;
}

svg#arrow-bottom {
    width: 32px;
}

.cta-button-light {
 display: inline-block;
 background-color: var(--color-white);
 color: var(--color-bg-dark);
 padding: 1rem 2rem;
 font-weight: var(--fw-bold);
 text-transform: uppercase;
 transition: transform 0.3s ease;
}
.cta-button-light:hover {
 transform: scale(1.05);
}

.wave-title {
 align-self: start;
 margin-top: -4.8em;
}
@media screen and (max-width: 1024px) {
 .wave-title {
  margin-top: 0;
 }
}


/* =================================================== */
/* 13. CTA */
/* =================================================== */
.scopri-btn {
 display: inline-flex;
 background-color: #d95214;
 color: #fff;
 text-decoration: none;
 font-weight: 500;
 font-size: 1rem;
 padding: 0.9rem 1.4rem;

 border-radius: 1.2rem 0 1.2rem 0;

 transition: background-color 0.2s ease;
}
.scopri-btn.btn-dark {
  background-color: var(--color-text);
}

.scopri-btn:hover {
  background-color: #c04a12;
}
.scopri-btn.btn-dark:hover {
  background-color: #000;
}

.scopri-btn > span {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.scopri-btn b {
  font-weight: 800;
  text-transform: uppercase;
}

.scopri-btn svg {
  width: 0.9rem;
  height: auto;
}


/* =================================================== */
/* 12. FOOTER */
/* =================================================== */
.site-footer-main {
 background-color: var(--color-black);
 color: #aaa;
 padding: 3rem var(--padding-container);
 text-align: center;
 font-size: 0.9rem;
}

/* =================================================== */
/* 14. SEZIONE 6: TEMI (La città si mostra) */
/* =================================================== */
.temi-section {
 padding: 0 0 8rem;
 background-color: var(--color-bg-light);
 color: var(--color-text);
}

.temi-grid {
 display: grid;
 grid-template-columns: 1fr 2fr;
 gap: var(--padding-container);
 align-items: flex-start;
}

.temi-right-col {
  align-self: end;
}

.temi-left-col {
 display: flex;
 flex-direction: column;
 gap: 2rem;
}

.temi-title h2 {
 font-size: var(--font-h2);
 font-weight: var(--fw-light);
 line-height: .8;
 color: var(--color-text);
}

.temi-title h2 strong {
 font-size: var(--font-h1);
 font-weight: var(--fw-black);
}
#temi .temi-title {
    position: relative;
    top: -60px;
    margin-bottom: -60px;
    z-index: 10;
    padding-bottom: 40px;
}
@media screen and (max-width: 1024px) {
    #temi .temi-title {
        top: 0;
        margin-bottom: 0;
        text-align: center;
    }
}

.temi-text p {
 line-height: 1.7;
 text-wrap: balance;
}
.temi-text p:first-of-type {
 margin-bottom: 1rem;
}

.temi-right-col .temi-intro {
 font-size: 1.1rem;
 margin-bottom: 40px;
 max-width: 400px;
}

.temi-columns-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 2.5rem;
}

.temi-column h3 {
 font-size: clamp(1.6rem, 3.2vw, 2.8rem);
 font-weight: var(--fw-light);
 color: var(--color-text);
 margin-bottom: 1rem;
 line-height: 1;
}
.temi-column h3 b {
  font-weight: 900;
}

.temi-column p {
 margin-bottom: 1.5rem;
 line-height: 1.7;
 text-wrap: balance;
}

/* =================================================== */
/* 15. SEZIONE PROGETTI (Slider) */
/* =================================================== */
.progetti-wrapper {
 margin-top: 6rem;
}

.progetti-separator {
    padding-bottom: 9px;
    border-bottom: 2px solid var(--color-text);
    margin-bottom: 3rem;
    width: fit-content;
    position: relative;
    border: none;
}

.progetti-separator:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: calc(100% + var(--padding-container));
    height: 1px;
    background: var(--color-text);
    left: calc(-1 * var(--padding-container));
}

.progetti-separator h2 {
 font-size: 1.5rem;
 font-weight: var(--fw-light);
 line-height: 1;
}
.progetti-separator h2 b {
 font-weight: var(--fw-bold);
}

.progetti-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 1rem; 
    margin-bottom: 4rem; 
}

.progetti-group {
 margin-bottom: 0;
 overflow: hidden;
}

.progetti-group > h3 {
    font-size: var(--font-h2);
 font-weight: var(--fw-light);
 margin-bottom: 1rem;
 line-height: normal;
 color: var(--group-color, var(--color-text));
}
.progetti-group > h3 b {
 font-weight: var(--fw-black);
}

.project-card {
 display: block;
 height: 100%;
 background-color: var(--group-color, var(--color-primary));
 color: var(--group-text-color, var(--color-white));
 padding: 1.5rem;
 border-radius: 8px;
 text-decoration: none;
 position: relative;
 min-height: 300px;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 transition: background-color .3s ease;
}

.project-card:hover {
    background-color: color-mix(in srgb, var(--group-color, var(--color-primary)), black 10%);
}

.project-card .card-content {
}

.project-card h4 {
 font-size: 1.25rem;
 font-weight: var(--fw-bold);
 margin-bottom: 0.75rem;
 line-height: 1.3;
}

.project-card p {
 font-size: 1rem;
 line-height: 1.5;
 opacity: 0.9;
 line-height: normal;
}

.project-card span {
 font-size: 0.9rem;
 font-weight: var(--fw-bold);
 opacity: 0.7;
 display: block;
 margin-top: auto;
 line-height: normal;
 margin-bottom: 1rem;
}

.card-info-icon {
 position: absolute;
 bottom: 3px;
 right: 3px;
 width: 28px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: currentColor;
}
.card-info-pnrr {
    height: 28px;
    width: 70px;
    background: #646464;
    border-radius: 5px;
    position: absolute;
    color: #fff;
    bottom: 3px;
    right: 34px;
}
.card-info-pnrr b {
    font-weight: 900;
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

/* Navigazione Slider */
.progetti-nav {
 display: flex;
 align-items: center;
 gap: 1rem;
 margin-top: 1.5rem;
 color: var(--group-color);
}

.progetti-nav span {
 font-weight: var(--fw-medium);
 font-size: 0.9rem;
}

.slider-arrow {
    background: none;
    cursor: pointer;
    line-height: 0;
    border: none;
}

.slider-arrow svg {
    width: 15px;
}

.slider-arrow svg path {
    fill: var(--group-color);
    transition: fill .5s ease;
}
.slider-arrow:hover svg path {
    fill: color-mix(in srgb, var(--group-color, var(--color-primary)), black 20%);
}

.slider-arrow:disabled {
 opacity: 0.3;
 cursor: not-allowed;
}

.progetto-slider .splide__arrows {
 display: none;
}

/* Condizioni custom "La pietra, i cantieri" */
#massa-pietra .project-card {
    border: 1px solid #a0a0a0;
}
#massa-pietra h3 {
    display: none;
}
#massa-pietra .progetti-nav {
    color: var(--color-text);
}
#massa-pietra .slider-arrow svg path {
    fill: #a0a0a0;
}


/* =================================================== */
/* REGOLE RESPONSIVE PER LA NUOVA GRIGLIA */
/* =================================================== */

@media (max-width: 1500px) {
    .progetti-grid {
        /* 2 colonne su tablet */
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .progetti-grid {
        /* 1 colonna su mobile */
        grid-template-columns: 1fr;
        gap: 1.5rem; /* Mantiene un gap anche su mobile */
    }
}


/* =================================================== */
/* 16. MODALE PROGETTI */
/* =================================================== */
.modal-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100vh;
 height: 100dvh;
 background-color: rgba(0, 0, 0, 0.6);
 z-index: 1000;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: var(--padding-container);

 /* Nascosto di default */
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.is-visible {
 opacity: 1;
 visibility: visible;
}

.modal-backdrop {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 cursor: pointer;
}

.modal-content {
 position: relative;
 z-index: 1001;
 background-color: var(--color-white);
 border-radius: 8px;
 padding: 3rem;
 max-width: 700px;
 width: 100%;
 max-height: 90vh;
 max-height: 90dvh;
 overflow-y: auto;
 box-shadow: 0 10px 30px rgba(0,0,0,0.2);

 /* Animazione Entrata */
 transform: scale(0.9);
 transition: transform 0.3s ease;
}

.modal-overlay.is-visible .modal-content {
 transform: scale(1);
}

.modal-close {
 position: absolute;
 top: 1rem;
 right: 1rem;
 width: 32px;
 height: 32px;
 background: none;
 border: none;
 cursor: pointer;
 opacity: 0.5;
 transition: opacity 0.2s ease;
}
.modal-close:hover {
 opacity: 1;
}
.modal-close svg {
 width: 100%;
 height: 100%;
}

.modal-tag {
 display: inline-block;
 background-color: var(--color-border);
 color: var(--color-text);
 padding: 0.3rem 0.8rem;
 border-radius: 4px;
 font-size: 0.8rem;
 font-weight: var(--fw-bold);
 margin-bottom: 1.5rem;
 text-transform: uppercase;
}

.modal-body #modal-title {
 font-size: 2rem;
 font-weight: var(--fw-bold);
 color: var(--color-text);
 margin-bottom: 0.5rem;
 line-height: 1.2;
}

.modal-body #modal-location {
 display: block;
 font-size: 1rem;
 font-weight: var(--fw-medium);
 color: var(--color-text);
 opacity: 0.7;
 margin-bottom: 1.5rem;
}

.modal-body #modal-description {
 font-size: 1.1rem;
 line-height: 1.7;
 color: var(--color-text);
}

/* Scrollbar edit */
.modal-content {
  max-height: 80dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-body {
  flex-grow: 1; 
  
  overflow-y: auto;
}

.modal-body::-webkit-scrollbar {
  width: 12px;
}

.modal-body::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.modal-body::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: 10px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background-color: background-color: color-mix(in srgb, var(--color-border), black 10%);;
}

.modal-body {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) #f1f1f1;
}


@media screen and (max-width: 480px) {
    .modal-content {
        padding: 2rem;
    }
    .modal-close {
        width: 24px;
        height: 24px;
        top: .5rem;
        right: .5rem;
    }
    .modal-body #modal-title {
        font-size: 1.25rem;
    }
    .modal-body #modal-description {
        font-size: 1rem;
    }
}

/* =================================================== */
/* 17. SEZIONE COMPAGNI DI VIAGGIO */
/* =================================================== */
.compagni-section {
    position: relative;
    padding: 8rem 0;
    color: var(--color-white);
    background-image: url('../images/bg-compagni_di_viaggio.jpg');
    background-size: cover;
    background-position: center;
    z-index: 1; /* Per posizionare lo sfondo sotto l'overlay */
}

.compagni-grid {
    display: grid;
    /* Griglia 30/70 come richiesto */
    grid-template-columns: 3fr 7fr; 
    gap: var(--padding-container);
    align-items: flex-start;
}

/* Riusiamo lo stile .temi-title, ma assicuriamoci che il colore sia bianco */
.compagni-title .temi-title h2 {
    color: var(--color-white);
}

.compagni-content h3 {
    font-size: clamp(2rem, 4.5vw, 3.75rem);
    line-height: .8;
    font-weight: var(--fw-light);
    margin-bottom: 1rem;
    color: var(--color-white);
}

.compagni-content p {
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.9;
}

/* =================================================== */
/* 18. SEZIONE PRESS */
/* =================================================== */
.press-section {
    padding: 70px 0;
    background-color: var(--color-bg-light);
    overflow: hidden; /* Per contenere lo slider */
}

.press-grid {
    display: grid;
    /* Griglia 20/80 (1fr 4fr) */
    grid-template-columns: 1fr 4fr;
    gap: var(--padding-container);
    align-items: flex-start;
}

.press-sidebar {
    align-self: start;
    text-align: right;
}

.press-sidebar > p {
    text-wrap: balance;
}

/* Adattiamo lo stile .temi-title per il titolo più piccolo "Parlano di noi" */
.press-sidebar .temi-title h3 {
    font-size: var(--font-h2);
    font-weight: var(--fw-light);
    line-height: 1;
    color: var(--color-text);
    padding-right: 28px;
}

.press-sidebar .temi-title h3 strong {
    font-size: var(--font-h1);
    font-weight: var(--fw-black);
    display: block;
}

.press-sidebar p {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    line-height: 1.7;
}

/* Stili per la navigazione custom nella sidebar */
.press-nav.progetti-nav {
    color: var(--color-text);
    /* Rimuove il gap per allineare le frecce */
    gap: 0; 
    justify-content: space-between;
    max-width: 100px; /* Larghezza per le frecce */
    margin: 0 0 0 auto;
}

.press-nav .slider-arrow svg path {
    fill: var(--color-text);
    transition: fill 0.3s ease;
}

.press-nav .slider-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.press-nav .slider-arrow:hover {
    background-color: var(--color-text);
    border-color: var(--color-text);
}
.press-nav .slider-arrow:hover svg path {
    fill: var(--color-white);
}

/* Card Rassegna Stampa */
.press-card {
    display: block;
    text-decoration: none;
    border-radius: 8px;
    overflow: hidden; /* Per il radius sull'immagine */
    transition: box-shadow 0.3s ease;
}
.press-card:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.press-card-image {
    position: relative;
    overflow: hidden;
}

.press-card img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Riusiamo l'overlay e l'icona zoom della galleria */
.press-card .gallery-item-overlay {
    opacity: 0;
}
.press-card .gallery-item-zoom-icon {
    transform: scale(0.8);
    opacity: 0;
}
.press-card:hover .gallery-item-overlay {
    opacity: 1;
}
.press-card:hover .gallery-item-zoom-icon {
    transform: scale(1);
    opacity: 1;
}
.press-card:hover img {
    transform: scale(1.05);
}


.press-card-content {
    padding: 1rem;
}

.press-card h4 {
    font-weight: var(--fw-black);
    color: var(--color-text);
    font-size: 1.1em;
    line-height: 1;
}

.press-card span {
    font-size: 1em;
    opacity: 0.7;
    color: var(--color-text);
}

.press-slider-wrapper {
    overflow: hidden;
}

/* =================================================== */
/* 19. SEZIONE SOCIAL */
/* =================================================== */
.social-section {
    background-color: var(--color-bg-light);
    padding: 0;
    max-width: 1560px;
    margin: 0 auto;
}

.social-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-container);
    align-items: center;
}

.social-content {
    padding-bottom: 2rem;
}

.social-content h2 {
    font-size: var(--font-h2);
    font-weight: var(--fw-light);
    line-height: .9;
    color: var(--color-text);
}
.social-content h2 strong {
    display: inline-block;
    font-size: var(--font-h1);
    font-weight: var(--fw-black);
}

.social-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin: 1.5rem 0 2rem;
    max-width: 450px;
}

.social-links-large {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.social-links-large a {
    display: block;
    width: 60px; /* Dimensione icone grandi */
    height: 60px;
    transition: opacity 0.3s ease;
}
.social-links-large a:hover {
    opacity: 0.7;
}
.social-links-large a img {
    width: 100%;
    height: 100%;
}

.social-image {
    order: -1;
    position: relative;
    z-index: 10;
    bottom: -40px;
}

.social-image img {
    width: 100%;
    margin-left: auto;
}

/* =================================================== */
/* 20. FOOTER SITO */
/* =================================================== */
.site-footer {
    background-color: var(--color-text);
    color: #ffffff;
    padding: 6rem 0;
    font-size: 0.9rem;
    line-height: 1.6;
}

.footer-grid {
    display: grid;
    /* 4 colonne con proporzioni personalizzate */
    grid-template-columns: 2fr 3fr 2fr 2fr;
    gap: 2.5rem;
}

.footer-logos a {
    display: block;
    text-decoration: none;
}
.footer-logo-main img {
    max-width: 250px;
    margin-top: -20px;
}
.footer-logo-secondary img {
    max-width: 190px;
    margin-top: 1.5rem;
}

.footer-description p {
    margin-bottom: 1rem;
}
.footer-description p b {
    color: var(--color-white);
}

.footer-col h4 {
    font-weight: 400;
    color: var(--color-white);
    font-size: 1rem;
    margin-bottom: .75em;
    line-height: 1.2;
}

/* Stili per il menu nel footer */
.footer-menu .nav-menu {
    display: block; /* Sovrascrive il flex */
}
.footer-menu .nav-menu li {
    margin-bottom: 0.75rem;
}
.footer-menu .nav-menu li:after {
    display: none; /* Rimuove i separatori */
}
.footer-menu .nav-menu a {
    color: #fff;
    font-weight: var(--fw-regular);
    transition: color 0.3s ease;
}
.footer-menu .nav-menu a:hover {
    color: var(--color-white);
}

/* Stili per social e link legali */
.footer-links .social-links {
    margin-bottom: 1.5rem;
}
.footer-links .social-links a svg path,
.footer-links .social-links a svg circle {
    fill: var(--color-white); /* Sovrascrive il fill di default */
    transition: fill 0.3s ease;
}
.footer-links .social-links a:hover svg path,
.footer-links .social-links a:hover svg circle {
    fill: var(--color-primary); /* Colore hover */
}

.footer-links .social-links a:hover svg path.color-text,
.footer-links .social-links a svg path.color-text {
    fill: var(--color-text);
}

.footer-legal-links li {
    margin-bottom: 0.5rem;
}
.footer-legal-links a {
    color: #fff;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}
.footer-legal-links a:hover {
    color: var(--color-white);
}

.footer-menu ul li {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 12px;
    align-items: center;
}

.footer-menu ul li .line {
    width: 100%;
    height: 1px;
    background: #949494;
}


/* =================================================== */
/* TITLE SPACING */
/* =================================================== */
span.spacing {
    display: inline-block;
}
span.spacing.spacing-md {
    width: 3vw;
}
span.spacing.spacing-xl {
    width: 4vw;
}

#partner h3 {
    display: inline-block;
}

#press-title {
    line-height: .4;
    text-align: right;
    margin-right: -28px;
}

@media screen and (max-width: 768px) {
    span.spacing {
        display: none;
    }
    #press-title {
        line-height: 1;
        margin-right: 0;
        text-align: center;
    }
}


/* =================================================== */
/* RESPONSIVE PER LE NUOVE SEZIONI (Tablet/Mobile) */
/* =================================================== */

@media (max-width: 1024px) {
    /* Tablet: Manda a capo le griglie principali */
    .compagni-grid,
    .press-grid {
        grid-template-columns: 1fr;
    }

    .compagni-title .temi-title h2 {
        text-align: center;
        margin-bottom: 2rem;
    }

    .press-sidebar {
        position: static; /* Rimuovi sticky */
        text-align: center;
        margin-bottom: 2rem;
    }

    .press-sidebar .temi-title h3 {
        padding-right: 0;
    }

    .press-sidebar .progetti-nav {
        margin: 0 auto; /* Centra la navigazione */
    }

    /* Footer a 2 colonne */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
}

@media (max-width: 768px) {
    .overlay-nav .nav-menu a {
        font-size: clamp(1.15rem, 2vw, 2.2rem);
    }

    /* Mobile: stacka tutto */
    .text-columns {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .social-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 20px;
    }
    .social-content {
        order: 1; /* Testo prima */
        padding-bottom: 0;
    }
    .social-image {
        order: 2; /* Immagine dopo */
        margin-top: 0;
    }
    .social-content p {
        margin-left: auto;
        margin-right: auto;
    }
    .social-links-large {
        justify-content: center;
    }

    .social-image {
        order: 2;
    }

    .social-image img {
        margin-right: auto;
    }

    .press-sidebar {
        margin-bottom: 0;
    }
    .press-sidebar .progetti-nav {
        margin: 0 auto;
    }

    /* Footer a 1 colonna */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }
    .footer-logo-main img,
    .footer-logo-secondary img {
        margin-left: auto;
        margin-right: auto;
    }
    .footer-logo-main img {
        margin-top: 0;
    }
    .footer-links .social-links {
        justify-content: center;
    }
    .footer-menu ul li {
        display: block;
    }
    .footer-menu ul li .line {
        display: none;
    }
    .site-footer {
        padding: 4rem 0;
    }
}


/* =================================================== */
/* 13. RESPONSIVE (Mobile) */
/* =================================================== */

@media (max-width: 1024px) {
 /* Tablet */
 .intro-grid,
 .wave-grid {
  grid-template-columns: 1fr;
  gap: 2rem;
 }

 .intro-title h1,
 .wave-title h2 {
  text-align: center;
  margin-bottom: 2rem;
 }

.text-columns {
  grid-template-columns: 1fr;
  gap: 2rem;
 }

 .main-nav {
  display: none;
 }

 .site-header .header-container {
  height: auto;
  padding-top: var(--padding-container);
  padding-bottom: var(--padding-container);
 }

 .temi-grid {
  grid-template-columns: 1fr;
 }
 .temi-left-col {
  position: static;
  text-align: center;
  margin-bottom: 2rem;
 }
 .temi-title h2 strong {
  display: inline;
 }
 .temi-right-col .temi-intro {
  max-width: 100%;
  text-align: center;
 }

 /* RESPONSIVE PROGETTI */
 .splide__track {
  /* Su tablet mostra 1.5 card per far capire che è uno slider */
 }

 .wave-section {
    padding: 4rem 0 12rem;
 }
 .compagni-section {
    padding: 4rem 0;
 }

 .progetti-separator {
    margin-bottom: 2rem;
 }

 .progetti-wrapper {
    margin-top: 4rem;
 }
}

@media (max-width: 768px) {
 /* Mobile */
 :root {
  --padding-container: 20px;
 }

 .site-header {
  padding: 0;
 }

 .intro-section,
 .compagni-section {
  padding: 2rem 0;
 }
 .wave-section {
  padding: 2rem 0 8rem;
 }

 .progetti-wrapper {
    margin-top: 2rem;
 }

 .intro-title h1, .wave-title h2 {
  margin-bottom: 0;
 }

 .temi-section {
  padding: 3rem 0;
 }
 .temi-columns-grid {
  grid-template-columns: 1fr;
  gap: 2rem;
 }
 .temi-column {
  text-align: center;
 }
 .temi-left-col {
    margin-bottom: 0;
 }

 .progetti-separator {
    margin-bottom: 1rem;
 }

 /* RESPONSIVE PROGETTI (Mobile) */
 .progetti-group > h3 {
  font-size: 2rem;
 }
 .project-card {
  min-height: 250px;
 }
 .progetti-nav {
  justify-content: center;
 }
 .progetti-nav span {
  font-size: 0.8rem;
 }
 .slider-arrow {
  width: 35px;
  height: 35px;
 }
}