@import url("_form__.css");
@import url('https://fonts.googleapis.com/css2?family=Sunflower:wght@300;500;700&display=swap');
/* ============================================================
   CARRELLIFICIO LOMBARDO — style.css
   CSS custom (da affiancare a Bootstrap 5)
   Organizzato per sezione:
   0. Variabili e base
   1. Header / Navbar (.site-header)
   2. Bottoni CTA (.btn-cta-*)
   3. Hero (.hero-section)
   4. Prodotti (.products-section)
   5. Chi siamo (.about-section)
   6. CTA banner (.cta-banner)
   7. Perché sceglierci (.reasons-section)
   8. Settori (.sectors-section)
   9. Galleria (.gallery-section)
   10. Catalogo (.catalog-section)
   11. Contatti (.contact-section)
   12. Footer (.site-footer)
============================================================ */

/* ------------------------------------------------------------
   0. VARIABILI E BASE
------------------------------------------------------------ */
:root {
  --cl-menu: #175B8D;
  --cl-primary: #1F7EBA;        /* Blu primario */
  --cl-primary-light: #A3CAE5;        /* Blu chiaro */
  --cl-primary-dark: #16639a;   /* Blu hover */
  --cl-dark: #1A182F;           /* Heading scuro */
  --cl-navy: #141C2B;           /* Footer / bottoni scuri */
  --cl-body: #4A5568;           /* Testo corrente */
  --cl-navy2:#4C67A1;
  --cl-light: #EFF2F4;          /* Sfondo card */
  --cl-light-alt: #F7F9FA;      /* Sfondo sezioni chiare */
  --cl-white: #ffffff;
  --cl-radius: 1rem;            /* Raggio card */
  --cl-radius-pill: 50rem;      /* Bottoni pill */
  --gradiente-navy:linear-gradient(35deg, var(--cl-body), var(--cl-navy2),var(--cl-dark));
}
html,
body {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
body {
  font-family: "Sunflower", system-ui, -apple-system, sans-serif;
  color: var(--cl-body);
  background-color: var(--cl-white);
  font-weight: 300;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--cl-dark);
  font-weight: 800;
}

/* Eyebrow (sopratitolo) e titoli di sezione — usati in più sezioni */
.section-eyebrow {
  color: var(--cl-primary);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: .75rem;
}

.section-title {
  font-size: clamp(3rem, 4vw, 4.25rem);
  line-height: 1.05;
  font-weight: 800;
  margin-bottom: 1.5rem;
}

.section-eyebrow--light { color: var(--cl-white); opacity: .9; }
.section-title--light   { color: var(--cl-white); }
.section__text { font-size: 1.1rem; font-weight: 300;  }
/* ------------------------------------------------------------
   1. HEADER / NAVBAR
------------------------------------------------------------ */
.site-header {
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06);

}

.site-header .navbar {
  padding-top: .85rem;
  padding-bottom: .85rem;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
}
.site-logo-img { height: 40px; width: auto; }

.site-header .nav-link {
  color: var(--cl-menu);
  font-weight: 300;
  font-size: 1.05rem;
  padding-inline: 1rem;
  margin:0rem 0.5rem;
}

.site-header .nav-link:hover,
.site-header .nav-link.active {
  color: var(--cl-primary);
}

/* ------------------------------------------------------------
   2. BOTTONI CTA
------------------------------------------------------------ */
.btn-cta-dark,
.btn-cta-light,
.btn-cta-primary,
.btn-principale {
  border-radius: var(--cl-radius-pill);
  font-weight: 300;
  padding: .45rem 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* Scuro: navbar + form contatti */
.btn-cta-dark,.btn-principale {
  background:var(--gradiente-navy);
  color: var(--cl-white);
  transition: all .25s ease, transform .25s ease, color .25s ease;
}
.btn-cta-dark:hover,.btn-principale:hover { filter: brightness(1.12);
  transform: translateY(-2px); color: var(--cl-white); }

/* Chiaro: hero + catalogo */
.btn-cta-light {
  background-color: var(--cl-white);
  color: var(--cl-primary);
  box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .15);
}
.btn-cta-light:hover { background-color: var(--cl-light); color: var(--cl-primary-dark); }

/* Primario: banner CTA */
.btn-cta-primary {
  background-color: var(--cl-primary);
  color: var(--cl-white);
}
.btn-cta-primary:hover { background-color: var(--cl-primary-dark); color: var(--cl-white); }

/* ------------------------------------------------------------
   3. HERO
------------------------------------------------------------ */
.hero-section {
  /* Sostituire con la foto reale: url("../img/hero.jpg") */
  background:url("../images/sfondo.jpg");
  background-size: cover;
  background-position: center;
  color: var(--cl-white);
  padding: clamp(4rem, 9vw, 8rem) 0 clamp(8rem, 13vw, 11rem);
  position: relative;
}
.hero-section .container { position: relative; z-index: 2; }
.hero-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(35deg, #173987 0%, #8dafff00 33%,#7496e62a 66%,#173987 100%);  
  z-index: 1;
}


/*ANIM*/
/*
.hero-section::after {
    content: "";
    position: absolute;

    top: -25%;
    left: -25%;
    width: 150%;
    height: 150%;

    background: linear-gradient(
        35deg,
        #173987 0%,
        #8dafff00 33%,
        #7496e62a 66%,
        #173987 100%
    );

    z-index: 1;
    pointer-events: none;

    transform-origin: center center;
    animation: heroGradientRotate 30s linear infinite;
}

@keyframes heroGradientRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
*/

.hero-section__title {
  color: var(--cl-white);
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  font-weight: 800;
  line-height: 1.08;
  margin-bottom: 1.5rem;
}

.hero-section__subtitle {
  font-size: 1.25rem;
  font-weight: 400;
  margin-bottom: 1.75rem;
}

.hero-section__features {
  margin-bottom: 2rem;
  font-size: 1rem;
}

.hero-section__features li {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .4rem;
}

.hero-section__features .bi { color: var(--cl-primary); font-size: 1.1rem; }

.hero-section__stats { margin-bottom: 2.25rem; }

.hero-stat__number {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
}

.hero-stat__label { font-size: 1rem; margin-top: .25rem; }

/* ------------------------------------------------------------
   4. PRODOTTI
------------------------------------------------------------ */
.products-section {
  /* La griglia "sale" sopra il fondo dell'hero */
  margin-top: clamp(-9rem, -10vw, -6rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  position: relative;
  z-index: 2;
}

/* Card introduttiva bianca */
.product-intro-card {
  background-color: var(--cl-white);

  box-shadow: 0 1rem 2.5rem rgba(20, 28, 43, .10);
  padding: 2rem;
}

.product-intro-card__title {
  color: var(--cl-primary);
  font-size: 3rem;
  font-weight: 800;
  line-height: 3rem;
}
@media all and (max-width: 768px) {
.product-intro-card__title {font-size: 1.5rem;line-height: 1.5rem;}
.product-intro-card {padding:1rem}
}
.product-intro-card__text { margin-bottom: 0; font-weight: 300; }

/* Card prodotto */
.product-card {
  background-color: var(--cl-light);
  padding: 1.75rem 1.75rem 0;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}

.product-card:hover,
.product-card:focus-within {
  transform: translateY(-.5rem);
  box-shadow: 0 1.25rem 2.5rem rgba(20, 28, 43, .12);
}

.product-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
@media all and (max-width: 768px) {
margin-bottom: 0.5rem;
}
.product-card__media {
  flex: 1 1 auto;
  min-height: 220px;
  background-size: cover;
  background-position: center bottom;
  border-radius: .5rem .5rem 0 0;
}
@media all and (max-width: 768px) {
.product-card__media{min-height:auto;}
.product-card {padding: 1rem 1rem;}
}
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
}
@media all and (min-width: 768px) {
  .product-card__media img{max-height:370px;}
}
/* ------------------------------------------------------------
   5. CHI SIAMO
------------------------------------------------------------ */
.about-section {
  padding: clamp(1rem, 7vw, 6rem) 15px;
}

.about-section .section__text  { font-size: 1.2rem; }
.about-section .section__text p{margin-bottom: 0.5rem;}
.about-section__media { }
.about-section__media img{max-width: 100%;  object-fit:cover ;}

/* ------------------------------------------------------------
   6. CTA BANNER
------------------------------------------------------------ */
.cta-banner {
  /* Sostituire con la foto reale: url("../img/officina.jpg") */
  background:
    linear-gradient(rgba(16, 24, 43, .72), rgba(16, 24, 43, .72)),
    radial-gradient(110% 130% at 50% 0%, #33415e 0%, #18223a 65%, #0e1526 100%);
  background-size: cover;
  background-position: center;
  color: var(--cl-white);
  padding: clamp(4.5rem, 9vw, 7.5rem) 0;
  height:80vh;
  overflow: hidden;
  position: relative;
}
.cta-banner .container{position:relative;z-index:1}
.cta-banner #video-container{position:absolute;opacity:0.6;width:100%;height:100%;}
.cta-banner__title {
  color: var(--cl-white);
  font-size: clamp(2.5rem, 3.8vw, 2.75rem);
  font-weight: 800;
  margin-bottom: 1rem;
}
.cta-banner #video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta-banner__subtitle {
  font-size: 1.2rem;
  margin-bottom: 1.75rem;
}
@media all and (max-width: 768px) {
.cta-banner {aspect-ratio: 1/1; height:auto;}
}
/* ------------------------------------------------------------
   7. PERCHÉ SCEGLIERCI
------------------------------------------------------------ */
.reasons-section {
  padding: clamp(1rem, 7vw, 6rem) 15px;
}

.reasons-section__text { font-size: 1rem;font-weight:300; }

.reasons-list__item {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.5rem 0;
}

.reasons-list__item + .reasons-list__item {
  border-top: 1px solid #e3e7ec;
}

.reasons-list__icon {
  flex: 0 0 auto;
  width: 4rem;
  height: 4rem;
  display: grid;
  place-items: center;
  color: var(--cl-primary);
  font-size: 2rem;

}
.reasons-list__icon img { width: 100%; height: 100%; object-fit: contain; }
.reasons-list__title { font-size: 1.9rem; font-weight: 600; margin-bottom: .35rem; }
.reasons-list__desc  { margin-bottom: 0; font-size:1.2rem;font-weight: 300;}

/* ------------------------------------------------------------
   8. SETTORI
------------------------------------------------------------ */
.sectors-section {
  background-color: var(--cl-light-alt);
  padding: clamp(1rem, 7vw, 6rem) 15px;
}

.sectors-section__text { font-size: 1rem; font-weight: 300; }

.sector-card {
  background-color: var(--cl-white);
  padding: 1.5rem;
  box-shadow: 0 .25rem 1rem rgba(20, 28, 43, .05);
  transition: transform .25s ease, box-shadow .25s ease;
}

.sector-card:hover,
.sector-card:focus-within {
  transform: translateY(-.5rem);
  box-shadow: 0 1.25rem 2.5rem rgba(20, 28, 43, .12);
}

.sector-card__title {
  color: var(--cl-primary);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: .5rem;
}

.sector-card__desc { margin-bottom: 0; font-size: 1.3rem;font-weight: 300; }

/* ------------------------------------------------------------
   9. GALLERIA REALIZZAZIONI
------------------------------------------------------------ */
/* =========================
   GRIGLIA MADRE
========================= */

.gallery-parent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
}

/* =========================
   GRIGLIA FIGLIA
========================= */

.gallery-child {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 180px;
    gap: 1px;
}

/* =========================
   TESSERE
========================= */

.gallery-child__item {
    overflow: hidden;
    background: var(--cl-light);
}

.gallery-child__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 1x1 */
.gallery-tile--small {
    grid-column: span 1;
    grid-row: span 1;
}

/* 2x2 */
.gallery-tile--large {
    grid-column: span 2;
    grid-row: span 2;
}
.gallery-tile--xlarge {
    grid-column: span 3;
    grid-row: span 2;
}
/* =========================
   TABLET
========================= */

@media (max-width: 991.98px) {

    .gallery-parent {
        grid-template-columns: 1fr;
    }

    .gallery-child {
        grid-auto-rows: 140px;
    }

}
.gallery-child__item {
    position: relative;
    overflow: hidden;
    background: var(--cl-light);
}

.gallery-link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Gradiente sempre presente */
.gallery-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background: linear-gradient(
        135deg,
        #4c67a1e8 0%,
        #4c67a18c 20%,
        #4c67a100 35%,
        #4c67a100 100%
    );
}

/* Overlay hover con il + */
.gallery-link::after {
    content: "+";
    position: absolute;
    inset: 0;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 42px;
    font-weight: 300;

    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}

.gallery-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    transition:
        transform .45s ease,
        filter .45s ease;
}

.gallery-link:hover img {
    transform: scale(1.06);
    filter: brightness(.85);
}

.gallery-link:hover::after {
    opacity: 1;
}
/* =========================
   MOBILE
========================= */

@media (max-width: 575.98px) {

    .gallery-child {
        grid-auto-rows: 100px;
    }

}

/* ------------------------------------------------------------
   10. CATALOGO
------------------------------------------------------------ */
.catalog-section {
  background-color: var(--cl-primary);
  color: var(--cl-white);
  padding: clamp(3rem, 7vw, 6rem) 15px;
  overflow: hidden;
}

.catalog-section__text {
  font-size: 1rem;
  margin-bottom: 1.75rem;
  opacity: .95;
}

.catalog-section__btn { color: var(--cl-dark); }

.catalog-section__media { 
     width: 130%;
    position: relative;
    margin: -100px;
    max-width: none;
}
@media (max-width: 991.98px) {
  .catalog-section__media { 
    margin: 0px -80px;
    width: 130%;
    left:20px;
  }
}
/* ------------------------------------------------------------
   11. CONTATTI
------------------------------------------------------------ */
.contact-section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.contact-section__map { min-height: 420px; }

.contact-section__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(1);
}

.contact-section__form-wrap {
  padding: clamp(2.5rem, 5vw, 4.5rem);
}

.contact-form .form-control {
  border-radius: .5rem;
  border-color: #dfe3e8;
  padding: .8rem 1rem;
}

.contact-form .form-control:focus {
  border-color: var(--cl-primary);
  box-shadow: 0 0 0 .2rem rgba(31, 126, 186, .15);
}

.contact-form__privacy { font-size: .85rem; }
.contact-form__privacy a,
.contact-form__privacy a.popupprivacy { color: var(--cl-primary); text-decoration: none; }
.contact-form__privacy a:hover,
.contact-form__privacy a.popupprivacy:hover { color: var(--cl-primary); text-decoration: underline; }

@media (max-width: 991.98px) {
  .contact-section__inner { grid-template-columns: 1fr; }
  .contact-section__map { min-height: 300px; order: 2; }
}

/* ------------------------------------------------------------
   12. FOOTER
------------------------------------------------------------ */
.site-footer {
  background-color: var(--cl-navy);
  color: #aeb6c2;
  padding: 3rem 15px;
}

.site-logo--footer .site-logo__icon,
.site-logo--footer .site-logo__text { color: var(--cl-white); }

.site-logo--footer .site-logo__accent { color: var(--cl-primary); }

.site-footer__tagline { margin-top: 1rem; font-size: 1rem; }

.site-footer__heading {
  color: var(--cl-white);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.site-footer__contacts li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  margin-bottom: .75rem;
  font-size: 1rem;
}

.site-footer__contacts .ph { color: var(--cl-primary-light); font-size:1.5rem }

.site-footer__contacts a,
.site-footer__links a,
.site-footer__links a.popupprivacy {
  color: #aeb6c2;
  text-decoration: none;
}

.site-footer__contacts a:hover,
.site-footer__links a:hover,
.site-footer__links a.popupprivacy:hover { color: var(--cl-white); }

.site-footer__links li { margin-bottom: .5rem; font-size: 1rem; }

.site-footer__divider {
  border-color: rgba(255, 255, 255, .80);
  margin: 1.5rem 0 1.5rem;
}

.site-footer__legal { font-size: .85rem; color: #8b94a3; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}