/* ==========================================================
   RENIX
   PAGINA: IMPIANTI ELETTRICI

   IMPORTANTE:
   questo file NON modifica header e footer.
   Header e footer rimangono quelli di style.css.
========================================================== */


/* ==========================================================
   VARIABILI PAGINA
========================================================== */

.electric-page {
  --electric-dark: #354344;
  --electric-medium: #596a6b;
  --electric-green: #90c5a2;
  --electric-light-green: #d0e5c8;
  --electric-text: #344243;
  --electric-white: #ffffff;

  --electric-container: 1280px;
  --electric-side-space: 60px;

  font-family: inherit;
  color: var(--electric-text);

  overflow: hidden;
}


/* ==========================================================
   CONTAINER
========================================================== */

.electric-container {
  width: min(
    calc(100% - (var(--electric-side-space) * 2)),
    var(--electric-container)
  );

  margin-inline: auto;
}


/* ==========================================================
   HERO
========================================================== */

.electric-hero {
  width: 100%;

  background:
    var(--electric-medium);

  color:
    var(--electric-white);

  padding:
    180px
    0
    92px;
}



/* GRID */

.electric-hero-grid {
  display: grid;

  grid-template-columns:
    0.9fr
    1.1fr;

  gap: 90px;

  align-items: center;
}


/* ==========================================================
   TESTO HERO
========================================================== */

.electric-hero-content {
  min-width: 0;
}


.electric-eyebrow {
  margin:
    0
    0
    62px;

  color:
    #d6edce;

  font-size:
    19px;

  font-weight:
    600;

  line-height:
    1.15;

  letter-spacing:
    -0.01em;
}


.electric-hero-main h1 {
  margin:
    0
    0
    22px;

  color:
    var(--electric-white);

  font-size:
    clamp(40px, 3.3vw, 49px);

  font-weight:
    600;

  line-height:
    0.98;

  letter-spacing:
    -0.025em;
}


.electric-hero-description {
  max-width:
    520px;

  margin:
    0;

  color:
    rgba(255, 255, 255, 0.97);

  font-size:
    22px;

  font-weight:
    400;

  line-height:
    1.25;

  letter-spacing:
    -0.01em;
}


/* ==========================================================
   FOTO HERO
========================================================== */

.electric-hero-image {
  width:
    100%;

  min-width:
    0;
}


.electric-hero-image img {
  display:
    block;

  width:
    100%;

  height:
    auto;

  aspect-ratio:
    1.53 / 1;

  object-fit:
    cover;

  border-radius:
    10px;
}


/* ==========================================================
   SEZIONE DETTAGLI
========================================================== */

.electric-details {
  width:
    100%;

  background:
    #ffffff;

  padding:
    46px
    0
    92px;
}


/* ==========================================================
   TITOLI SEZIONI
========================================================== */

.electric-section-heading {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;
}


.electric-section-heading h2 {
  position:
    relative;

  display:
    inline-block;

  margin:
    0;

  padding-bottom:
    8px;

  color:
    var(--electric-dark);

  font-size:
    32px;

  font-weight:
    600;

  line-height:
    1;

  letter-spacing:
    -0.02em;
}


.electric-section-heading h2::after {
  content:
    "";

  position:
    absolute;

  left:
    0;

  right:
    0;

  bottom:
    0;

  height:
    3px;

  background:
    currentColor;
}


/* ==========================================================
   GRID CARD
========================================================== */

.electric-details-grid {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  column-gap:
    38px;

  row-gap:
    52px;

  margin-top:
    55px;
}


/* ==========================================================
   CARD
========================================================== */

.electric-detail-card {
  min-width:
    0;

  min-height:
    220px;

  padding:
    22px
    31px
    26px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  background:
    var(--electric-light-green);

  border-radius:
    10px;

  box-shadow:
    0 3px 3px rgba(36, 50, 50, 0.18);
}


/* ==========================================================
   ICONE
========================================================== */

.electric-detail-icon {
  width:
    64px;

  height:
    50px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 50px;

  margin-bottom:
    6px;
}


.electric-detail-icon img {
  display:
    block;

  width:
    auto;

  height:
    auto;

  max-width:
    62px;

  max-height:
    48px;

  object-fit:
    contain;
}


/* ==========================================================
   TITOLI CARD
========================================================== */

.electric-detail-card h3 {
  min-height:
    52px;

  margin:
    0
    0
    8px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--electric-dark);

  text-align:
    center;

  font-size:
    25px;

  font-weight:
    500;

  line-height:
    1;

  letter-spacing:
    -0.02em;
}


/* ==========================================================
   TESTO CARD
========================================================== */

.electric-detail-card p {
  width:
    100%;

  margin:
    0;

  color:
    #425051;

  font-size:
    14px;

  font-weight:
    400;

  line-height:
    1.42;
}


/* ==========================================================
   LAVORI REALIZZATI
========================================================== */

.electric-projects {
  width:
    100%;

  background:
    var(--electric-medium);

  padding:
    58px
    0
    73px;
}


.electric-section-heading--light h2 {
  color:
    #ffffff;
}



/* ==========================================================
   GALLERIA ORIZZONTALE FULL WIDTH
========================================================== */

.electric-gallery {
  --gallery-start-offset: 120px;

  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 55px;

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;

  cursor: grab;
}

.electric-gallery::-webkit-scrollbar {
  display: none;
}

.electric-gallery.is-dragging {
  cursor: grabbing;
  user-select: none;
}


/* TRACK */

.electric-gallery-track {
  display: flex;
  align-items: stretch;

  width: max-content;

  gap: 42px;

  /*
    Spazio REALE prima della prima foto.
    Non usiamo più transform.
  */
  padding-left: var(--gallery-start-offset);
  padding-right: 120px;

  transform: none;
}


/* FOTO */

.electric-gallery-item {
  width: 34vw;
  min-width: 430px;

  flex: 0 0 34vw;

  margin: 0;
}

.electric-gallery-item img {
  display: block;

  width: 100%;
  height: 345px;

  object-fit: cover;

  border-radius: 10px;

  pointer-events: none;
  user-select: none;
}

/* ==========================================================
   FASCIA SCURA PRIMA DEL FOOTER
========================================================== */

.electric-prefooter {
  width: 100%;
  height: 288px;

  background:
    linear-gradient(
      to bottom,
      var(--electric-dark) 0,
      var(--electric-dark) calc(100% - 64px),
      var(--electric-medium) calc(100% - 64px),
      var(--electric-medium) 100%
    );
}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width: 1200px) {

  .electric-page {
    --electric-side-space:
      42px;
  }


  .electric-hero {
    padding:
      88px
      0
      92px;
  }


  .electric-hero-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(350px, 480px);

    gap:
      62px;
  }


  .electric-eyebrow {
    margin-bottom:
      52px;

    font-size:
      18px;
  }


  .electric-hero-main h1 {
    font-size:
      43px;
  }


  .electric-hero-description {
    font-size:
      20px;
  }


  .electric-details-grid {
    column-gap:
      30px;

    row-gap:
      44px;
  }


  .electric-detail-card {
    padding-left:
      25px;

    padding-right:
      25px;
  }


  .electric-gallery-item {
    width:
      405px;

    flex-basis:
      405px;
  }


  .electric-gallery-item img {
    height:
      250px;
  }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 900px) {

  .electric-page {
    --electric-side-space:
      28px;
  }


  /* HERO */

  .electric-hero {
    padding:
      64px
      0;
  }


  .electric-hero-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(300px, 390px);

    gap:
      40px;
  }


  .electric-eyebrow {
    margin-bottom:
      40px;

    font-size:
      15px;
  }


  .electric-hero-main h1 {
    margin-bottom:
      17px;

    font-size:
      35px;
  }


  .electric-hero-description {
    font-size:
      17px;
  }


  /* CARD */

  .electric-details-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .electric-detail-card {
    min-height:
      215px;
  }


  /* PRE FOOTER */

  .electric-prefooter {
    height:
      230px;
  }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 700px) {

  .electric-page {
    --electric-side-space:
      20px;
  }


  /* ======================================================
     HERO MOBILE
  ====================================================== */

  .electric-hero {
    padding:
      39px
      0
      48px;
  }


  .electric-hero-grid {
    grid-template-columns:
      1fr;

    gap:
      32px;
  }


  .electric-eyebrow {
    margin-bottom:
      35px;

    font-size:
      14px;
  }


  .electric-hero-main h1 {
    margin-bottom:
      16px;

    font-size:
      31px;

    line-height:
      1;
  }


  .electric-hero-description {
    max-width:
      470px;

    font-size:
      17px;

    line-height:
      1.28;
  }


  .electric-hero-image {
    width:
      100%;
  }


  .electric-hero-image img {
    aspect-ratio:
      1.55 / 1;

    border-radius:
      9px;
  }


  /* ======================================================
     DETTAGLI MOBILE
  ====================================================== */

  .electric-details {
    padding:
      38px
      0
      57px;
  }


  .electric-section-heading h2 {
    padding-bottom:
      7px;

    font-size:
      26px;
  }


  .electric-section-heading h2::after {
    height:
      2px;
  }


  .electric-details-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      17px;

    margin-top:
      38px;
  }


  .electric-detail-card {
    min-height:
      210px;

    padding:
      18px
      14px
      19px;

    border-radius:
      8px;
  }


  .electric-detail-icon {
    width:
      48px;

    height:
      40px;

    flex-basis:
      40px;
  }


  .electric-detail-icon img {
    max-width:
      46px;

    max-height:
      39px;
  }


  .electric-detail-card h3 {
    min-height:
      41px;

    margin-bottom:
      8px;

    font-size:
      18px;

    line-height:
      1.02;
  }


  .electric-detail-card p {
    font-size:
      11.5px;

    line-height:
      1.4;
  }


  /* ======================================================
     GALLERIA MOBILE
  ====================================================== */

  .electric-projects {
    padding:
      41px
      0
      48px;
  }


  .electric-gallery {
    margin-top:
      38px;
  }


  .electric-gallery-track {
    gap:
      15px;

    padding-left:
      20px;

    padding-right:
      20px;
  }


  .electric-gallery-item {
    width:
      74vw;

    flex-basis:
      74vw;
  }


  .electric-gallery-item img {
    height:
      auto;

    aspect-ratio:
      1.55 / 1;

    border-radius:
      8px;
  }


  /* ======================================================
     PRE FOOTER MOBILE
  ====================================================== */

  .electric-prefooter {
    height:
      188px;
  }

}


/* ==========================================================
   TELEFONI PICCOLI
========================================================== */

@media (max-width: 420px) {

  .electric-page {
    --electric-side-space:
      16px;
  }


  .electric-hero-main h1 {
    font-size:
      28px;
  }


  .electric-hero-description {
    font-size:
      16px;
  }


  .electric-details-grid {
    gap:
      12px;
  }


  .electric-detail-card {
    min-height:
      202px;

    padding:
      16px
      12px
      17px;
  }


  .electric-detail-card h3 {
    font-size:
      17px;
  }


  .electric-detail-card p {
    font-size:
      11px;
  }


  .electric-gallery-track {
    padding-left:
      16px;

    padding-right:
      16px;
  }

}

/* =========================================================
   PIÙ NEL DETTAGLIO — DESKTOP DEFINITIVO
   STESSA SCALA / SPAZIATURE DI POMPE DI CALORE
========================================================= */

@media (min-width: 981px) {

  /* SEZIONE */
  .electric-details {
    padding: 54px 0 92px !important;
    background: #ffffff !important;
  }

  .electric-details .electric-container {
    width: min(calc(100% - 100px), 1290px) !important;
    max-width: none !important;
    margin: 0 auto !important;
  }

  /* TITOLO SEZIONE */
  .electric-details .electric-section-heading {
    margin-bottom: 64px !important;
  }

  .electric-details .electric-section-heading h2 {
    margin: 0 !important;
    padding-bottom: 7px !important;
    font-size: 30px !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    color: #344041 !important;
  }

  .electric-details .electric-section-heading h2::after {
    left: 50% !important;
    right: auto !important;
    width: 220px !important;
    height: 2px !important;
    transform: translateX(-50%) !important;
    background: #344041 !important;
  }

  /* GRIGLIA */
  .electric-details-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 48px !important;
    row-gap: 88px !important;
    margin-top: 0 !important;
    align-items: stretch !important;
  }

  /* =====================================================
     STRUTTURA CARD ORIGINALE:
     .electric-detail-icon + h3 + p COME FIGLI DIRETTI
     ===================================================== */
  .electric-detail-card {
    width: 100% !important;
    height: 268px !important;
    min-height: 268px !important;
    padding: 38px 36px 32px !important;

    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr) !important;
    grid-template-rows: 58px auto !important;
    column-gap: 20px !important;
    row-gap: 27px !important;
    align-content: start !important;
    align-items: start !important;

    background: #cde4c5 !important;
    color: #344041 !important;
    border-radius: 10px !important;
    box-shadow: 0 5px 8px rgba(31, 46, 47, 0.14) !important;
  }

  /* ICONA — stessa posizione/ingombro di Pompe di calore */
  .electric-detail-card > .electric-detail-icon {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    flex: none !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;

    /* I PNG elettrici sono 3:2 con trasparenza: ritagliamo il canvas */
    overflow: hidden !important;
  }

  .electric-detail-card > .electric-detail-icon img {
    display: block !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    /* cover è intenzionale: elimina visivamente i margini trasparenti del PNG 3:2 */
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
  }

  /* TITOLO — affiancato all'icona */
  .electric-detail-card > h3 {
    grid-column: 2 !important;
    grid-row: 1 !important;

    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;

    display: block !important;
    align-self: start !important;

    text-align: left !important;
    color: #344041 !important;
    font-size: 24px !important;
    line-height: 1.08 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
  }

  /* TESTO — sotto icon + titolo, come Pompe di calore */
  .electric-detail-card > p {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    text-align: left !important;
    color: rgba(52, 64, 65, 0.92) !important;
    font-size: 15px !important;
    line-height: 1.48 !important;
    font-weight: 400 !important;
  }

  /* =====================================================
     COMPATIBILITÀ: se nell'HTML hai già aggiunto
     .electric-detail-card__head, funziona comunque.
     ===================================================== */
  .electric-detail-card:has(> .electric-detail-card__head) {
    display: block !important;
  }

  .electric-detail-card > .electric-detail-card__head {
    width: 100% !important;
    min-height: 58px !important;
    margin: 0 0 27px !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 20px !important;
  }

  .electric-detail-card__head .electric-detail-icon {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    flex: 0 0 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .electric-detail-card__head .electric-detail-icon img {
    display: block !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
  }

  .electric-detail-card__head h3 {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    display: block !important;
    text-align: left !important;
    color: #344041 !important;
    font-size: 24px !important;
    line-height: 1.08 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
  }

  .electric-detail-card:has(> .electric-detail-card__head) > p {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    color: rgba(52, 64, 65, 0.92) !important;
    font-size: 15px !important;
    line-height: 1.48 !important;
    font-weight: 400 !important;
  }
}


/* =========================================================
   FIX SOLO ICONE — IMPIANTI ELETTRICI
========================================================= */

.electric-detail-icon {
  width: 52px !important;
  height: 52px !important;

  min-width: 52px !important;
  min-height: 52px !important;

  flex: 0 0 52px !important;

  margin: 0 !important;
  padding: 0 !important;

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

  overflow: visible !important;
}

.electric-detail-icon img {
  display: block !important;

  width: 52px !important;
  height: 52px !important;

  max-width: 52px !important;
  max-height: 52px !important;

  object-fit: contain !important;
  object-position: center !important;

  transform: none !important;
}