/*
Theme Name: MattecFood
Author: Michele Furlanetto
Version: 1.0.0
Text Domain: tema-furla
*/
/* WordPress Core
-------------------------------------------------------------- */
.alignnone {
  margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
  display: block;
  margin: 5px auto 5px auto;
}

.alignright {
  float:right;
  margin: 5px 0 20px 20px;
}

.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}

a img.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}

a img.alignnone {
  margin: 5px 20px 20px 0;
}

a img.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}

a img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption {
  background: #fff;
  border: 1px solid #f0f0f0;
  max-width: 96%; /* Image does not overflow the content area */
  padding: 5px 3px 10px;
  text-align: center;
}

.wp-caption.alignnone {
  margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
  margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
  margin: 5px 0 20px 20px;
}

.wp-caption img {
  border: 0 none;
  height: auto;
  margin: 0;
  max-width: 98.5%;
  padding: 0;
  width: auto;
}

.wp-caption p.wp-caption-text {
  font-size: 11px;
  line-height: 17px;
  margin: 0;
  padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
  background-color: #eee;
  clip: auto !important;
  clip-path: none;
  color: #444;
  display: block;
  font-size: 1em;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}


@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('fonts/montserrat-v25-latin-regular.woff2') format('woff2'), 
       url('fonts/montserrat-v25-latin-regular.woff') format('woff'); 
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('fonts/montserrat-v25-latin-700.woff2') format('woff2'), 
       url('fonts/montserrat-v25-latin-700.woff') format('woff'); 
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.clearer {
  clear: both;
}

img {
  height: auto;
  max-width: 100%;
}

*:focus {
  outline: none;
}

html {
  overflow-x: hidden;
}

body {
  background-color: #fff;
  font-family: 'Montserrat', sans-serif;
  /* i blocchi .alignfull usano width:100vw per il pieno bleed, ma 100vw include
     la larghezza della scrollbar verticale: senza questo, su schermi con
     scrollbar visibile (tipico di Windows) compaiono alcuni pixel di scroll
     orizzontale indesiderato */
  overflow-x: hidden;
  position: relative;
}

.clearfix::before,
.clearfix::after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden;
}

.clearfix::after {
  clear: both;
}

.content {
  margin: 0 auto;
  width: 1160px;
}

.blog-intro {
  max-width: 760px;
  margin: 50px auto 0;
  padding: 0 24px;
  text-align: center;
}

.blog-intro p {
  margin-bottom: 0;
}

.col-1 {
  width: 8.33333%;
}

.col-2 {
  width: 16.66666%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.33333%;
}

.col-6 {
  width: 50%;
}

.col-8 {
  width: 66.66666%;
}

.col-10 {
  width: 83.33333%;
}

.divider {
  padding: 20px 0;
}

.spacer {
  padding: 70px 0;
}

.responsive {
  height: auto;
  width: 100%;
}

.center {
  text-align: center;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
  word-wrap: break-word;
}

:root {
  --primary: #2E4120;
  --secondary: #D46E17;
  --light: #ffffff;
  --dark: #000000;
  --grey: #fafafa;
  --primary-rgb: 46, 65, 32;
  --secondary-rgb: 212, 110, 23;
  --heading: #486732;
  --text: #333333;
}

.grey {
  background-color: var(--grey);
}

/* Global style */

/* Typography */
h1 {
  font-size: 60px;
  color: var(--light);
  padding: 10px;
  text-transform: uppercase;
}

h2 {
  font-size: 36px;
  color: var(--heading);
  text-transform: uppercase;
  margin-bottom: 20px;
}

h3 {
  font-size: 24px;
  color: var(--heading);
  text-transform: uppercase;
  margin-bottom: 20px;
}

h4 {
  font-size: 14px;
  color: var(--light);
}

p {
  color: var(--text);
  font-size: 15px;
  line-height: 28px;
  margin-bottom: 20px;
}

a {
  text-decoration: none;
  color: var(--primary);
  transition: .3s;
}

a:hover {
  color: var(--dark);
}

blockquote {
  padding-left: 15px;
  font-style: italic;
  font-size: 14px;
  color: var(--dark);
  margin-bottom: 20px;
  border-left: 3px solid var(--dark);
}

.wrapper ul {
  margin-left: 18px;
  color: var(--dark);
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 20px;
}

/* Button (stesso linguaggio grafico del bottone hero-cta-btn della homepage,
   riadattato per un semplice <a> di testo: WordPress genera il blocco Bottone/`.button`
   senza gli span interni che usa hero-cta-btn, quindi qui la freccia e il divisore
   sono ricreati con gli pseudo-elementi ::after) */
.button,
.wp-block-button__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--light);
  padding: 15px 54px 15px 26px;
  background-color: var(--heading);
  border: none;
  border-radius: 0 16px 0 0;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  overflow: hidden;
  isolation: isolate;
  transition: background-color .3s ease, color .3s ease;
}

/* Il cambio colore all'hover avviene direttamente su background-color/color
   (non con un ::before sovrapposto in opacita'): un layer assoluto con
   z-index sopra il testo semplice del bottone lo avrebbe coperto quando
   l'opacita' arriva a 1, come nella variante invertita della banda CTA */
.button:hover,
.wp-block-button__link:hover {
  color: var(--light);
  background-color: var(--dark);
}

.button::after,
.wp-block-button__link::after {
  content: '\f061';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  right: 24px;
  top: 50%;
  z-index: 2;
  padding-left: 18px;
  border-left: 1px solid rgba(255, 255, 255, .3);
  color: var(--secondary);
  font-size: 14px;
  transform: translateY(-50%);
  transition: transform .3s ease;
}

.button:hover::after,
.wp-block-button__link:hover::after {
  transform: translateY(-50%) translateX(4px);
}

#searchsubmit {
  text-decoration: none;
  color: var(--light);
  display: inline-block;
  padding: 18px 30px;
  border: 1px solid var(--primary);
  text-transform: uppercase;
  font-size: 14px;
  transition: .3s;
  background-color: var(--primary);
}

#searchsubmit:hover {
  background-color: var(--secondary);
  color: var(--light);
  border: 1px solid var(--light);
}

/* variante selezionabile dall'editor (classe CSS aggiuntiva "inverse" sul blocco Bottone) */
.inverse {
  background-color: var(--secondary);
}

.inverse::after {
  color: var(--heading);
}

/* breadcrumbs */
.breadcrumbs p {
  font-size: 12px;
  color: var(--secondary);
  letter-spacing: 3px;
  text-transform: uppercase;
}

.breadcrumbs a {
  color: var(--light);
}

.breadcrumbs a:hover {
  color: var(--secondary);
}

/* pagina di ricerca: hero grande invariato (nessuna barra compatta), ma le
   breadcrumbs sopra il titolo sono grandi come il paragrafo dell'hero (17px)
   invece del piccolo maiuscolo di default */
.search .hero.hero-page .breadcrumbs {
  margin-bottom: 15px;
}

.search .hero.hero-page .breadcrumbs p {
  font-size: 17px;
  letter-spacing: normal;
  text-transform: none;
}

/* Header e Nav */
header {
  background-color: var(--light);
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99998;
}

.logged-in header {
  top: 32px
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header img {
  display: block;
}

.logo-img {
  height: 95px;
  width: auto;
  margin-top: 15px;
  margin-bottom: 15px;
}

.menu {
  list-style-type: none;
}

.menu li {
  display: inline;
  font-size: 15px;
  text-transform: uppercase;
  margin-left: 30px;
}


.menu a {
  text-decoration: none;
  color: var(--dark);
  transition: .3s;
}

.menu a:hover,
.current-menu-item a {
  color: var(--secondary);
}

.navbar {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  cursor: pointer;
}

/* sfondo scuro dietro al pannello del menu mobile (.nav): senza, il
   contenuto della pagina restava visibile e confuso accanto al pannello.
   z-index appena sotto al pannello (99998), sopra a tutto il resto */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99997;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity .3s;
}

.nav-overlay.show {
  display: block;
  opacity: 1;
}

.icon-bar {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 1px;
  background-color: var(--dark);
  transition: .3s;
}

.navbar.active .icon-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navbar.active .icon-bar:nth-child(2) {
  opacity: 0;
}

.navbar.active .icon-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Hero section */
.hero {
  width: 100%;
  height: 90vh;
  background:
    radial-gradient(ellipse 60% 55% at center, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .38) 60%, rgba(0, 0, 0, .1) 100%),
    linear-gradient(180deg, rgba(46, 65, 32, .35), rgba(0, 0, 0, .45)),
    url(img/hero.png) no-repeat center center;
  background-size: cover;
}


.main {
  width: 100%;
  height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.main h1 {
  max-width: 900px;
  margin-bottom: 15px;
}

.hero-divider {
  width: 70px;
  height: 3px;
  background-color: var(--secondary);
  margin: 0 auto 25px;
}

.main p {
  max-width: 620px;
  color: var(--light);
  font-size: 17px;
  line-height: 30px;
  opacity: .9;
  margin-bottom: 0;
}

/* Hero home page: pannello a sinistra (edge-to-edge, stesso linguaggio delle righe full-size), immagine a destra */
.hero-home {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  min-height: calc(100vh - 125px);
  margin-top: 125px;
}

.hero-home-text {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  align-items: center;
  background-color: var(--light);
  padding: 70px 80px;
}

.hero-home-text-inner {
  min-width: 0;
  width: 100%;
  max-width: 520px;
}

.hero-eyebrow {
  display: block;
  margin-bottom: 16px;
  color: var(--secondary);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
}

.hero-home-text h1 {
  max-width: none;
  text-align: left;
  font-size: 44px;
  color: var(--heading);
}

.hero-home-text .hero-divider {
  margin: 0 0 25px;
}

.hero-home-text p {
  max-width: none;
  text-align: left;
  font-size: 15px;
}

/* piccolo indicatore di scroll, discreto, fermo se prefers-reduced-motion */
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .5);
  color: var(--light);
  font-size: 13px;
  transform: translateX(-50%);
  animation: hero-scroll-cue-bounce 2.2s ease-in-out infinite;
}

@keyframes hero-scroll-cue-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue {
    animation: none;
  }
}

/* piccolo richiamo a scorrere, più discreto di quello in hero: solo un'icona che respira, nessun cerchio */
.mini-scroll-cue {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  color: var(--secondary);
  font-size: 15px;
  opacity: .55;
  animation: mini-scroll-cue-bounce 2.4s ease-in-out infinite;
}

@keyframes mini-scroll-cue-bounce {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50% { transform: translateY(6px); opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
  .mini-scroll-cue {
    animation: none;
  }
}

/* piccolo pallino che pulsa, un tocco di vita tra la fine delle righe prodotto e la trust strip */
.pulse-dot-cue {
  position: relative;
  width: 10px;
  height: 10px;
  margin: 34px auto;
  background-color: var(--secondary);
  border-radius: 50%;
}

.pulse-dot-cue::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1px solid var(--secondary);
  border-radius: 50%;
  opacity: .6;
  animation: pulse-dot-ping 2.6s ease-out infinite;
}

@keyframes pulse-dot-ping {
  0% { transform: scale(1); opacity: .6; }
  100% { transform: scale(2.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pulse-dot-cue::after {
    animation: none;
    opacity: 0;
  }
}

.hero-cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 320px;
  margin-top: 35px;
  padding: 15px 22px 15px 26px;
  background-color: var(--heading);
  border-radius: 0 16px 0 0;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
}

.hero-cta-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--dark);
  opacity: 0;
  transition: opacity .3s ease;
}

.hero-cta-btn:hover::before {
  opacity: .12;
}

.hero-cta-btn-label {
  position: relative;
  z-index: 2;
  color: var(--light);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  white-space: nowrap;
}

.hero-cta-btn-arrow {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary);
  font-size: 15px;
  border-left: 1px solid rgba(255, 255, 255, .3);
  padding-left: 18px;
  transition: transform .3s ease;
}

.hero-cta-btn:hover .hero-cta-btn-arrow {
  transform: translateX(4px);
}

.hero-home-image {
  flex: 1.6 1 480px;
  align-self: flex-start;
  height: calc(95vh - 125px);
  position: relative;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* Homepage */
.section {
  display: flex;
}

.item {
  padding: 30px;
}

/* Settori food */
.sectors-header {
  max-width: 640px;
  margin: 0 auto 50px;
  padding: 0 24px;
  text-align: center;
}

.sectors-header .hero-divider {
  margin: 20px auto 25px;
}

/* Righe alternate Prodotti / Applicazioni / Aziende Rappresentate */
.offer-rows {
  background-color: var(--grey);
  padding: 70px 0;
}

.offer-rows-grid {
  display: flex;
  flex-direction: column;
}

.offer-row {
  display: flex;
  min-height: 500px;
  flex-wrap: wrap;
}

.offer-row + .offer-row {
  border-top: 1px solid rgba(var(--primary-rgb), .12);
}

.offer-row.is-reverse {
  flex-direction: row-reverse;
}

.offer-row-media,
.offer-row-panel {
  flex: 0 0 50%;
  min-width: 0;
}

.offer-row-media {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
}

.offer-row-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 70px;
  background-color: var(--grey);
}

@media (min-width: 1200px) {
  /* riga non invertita: media a sinistra (edge-to-edge), pannello a destra -> il testo si allinea al margine destro della pagina */
  .offer-row:not(.is-reverse) .offer-row-panel {
    padding-right: calc((100vw - 1160px) / 2 + 70px);
  }

  /* riga invertita: pannello a sinistra -> il testo si allinea al margine sinistro della pagina */
  .offer-row.is-reverse .offer-row-panel {
    padding-left: calc((100vw - 1160px) / 2 + 70px);
  }
}

.offer-row-eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--secondary);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
}

.offer-row-panel h3 {
  margin-bottom: 16px;
  text-align: left;
}

.offer-row-panel p {
  max-width: 440px;
  margin-bottom: 26px;
}

.offer-row-panel .hero-cta-btn {
  margin-top: 0;
}

/* Trust strip */
.trust-strip {
  padding: 90px 0;
  background-color: var(--light);
}

.trust-strip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
}

.trust-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 22px;
  border-radius: 50%;
  background-color: var(--secondary);
  color: var(--light);
  font-size: 20px;
}

.trust-item h3 {
  margin-bottom: 10px;
  text-align: left;
  font-size: 20px;
}

.trust-item-title::after {
  content: '';
  display: block;
  width: 30px;
  height: 2px;
  margin-top: 10px;
  background: var(--secondary);
  transition: width .4s cubic-bezier(.16, 1, .3, 1);
}

.trust-item:hover .trust-item-title::after {
  width: 56px;
}

.trust-item p {
  margin-bottom: 0;
  text-align: left;
}

/* Banner CTA finale */
.home-cta-band {
  padding: 70px 0;
  background-color: var(--light);
}

.home-cta-band-row {
  display: flex;
  align-items: stretch;
  min-height: 500px;
}

.home-cta-band-panel,
.home-cta-band-media {
  flex: 0 0 50%;
  min-width: 0;
}

.home-cta-band-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 70px 80px;
  background-color: var(--heading);
}

@media (min-width: 1200px) {
  .home-cta-band-panel {
    padding-left: calc((100vw - 1160px) / 2 + 80px);
  }
}

.home-cta-band h2 {
  color: var(--light);
  margin-bottom: 18px;
  text-align: left;
}

.home-cta-band p {
  max-width: 420px;
  margin: 0 0 34px;
  color: rgba(255, 255, 255, .9);
}

.home-cta-band .hero-cta-btn {
  margin-top: 0;
}

/* su questo pannello il bottone standard (verde su verde) sparirebbe: stato normale scuro,
   si inverte al chiaro sull'hover */
.home-cta-band-panel .hero-cta-btn {
  background-color: var(--dark);
}

.home-cta-band-panel .hero-cta-btn::before {
  background-color: var(--light);
}

.home-cta-band-panel .hero-cta-btn:hover::before {
  opacity: 1;
}

.home-cta-band-panel .hero-cta-btn:hover .hero-cta-btn-label {
  color: var(--primary);
}

.home-cta-band-panel .hero-cta-btn:hover .hero-cta-btn-arrow {
  color: var(--primary);
  border-left-color: rgba(var(--primary-rgb), .3);
}

.home-cta-band-media {
  background-size: cover;
  background-position: center center;
}

/* Hero pagina Prodotti (e altre pagine interne che riusano questo pattern):
   stesso linguaggio "senza overlay" del banner CTA finale, foto pulita + pannello pieno */
.products-hero {
  margin-top: 125px;
}

.products-hero-row {
  display: flex;
  flex-wrap: wrap;
  min-height: 60vh;
}

.products-hero-row.is-reverse {
  flex-direction: row-reverse;
}

.products-hero-panel,
.products-hero-media {
  flex: 1 1 480px;
  min-width: 0;
}

.products-hero-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 90px 80px;
  background-color: var(--heading);
}

@media (min-width: 1200px) {
  .products-hero-row:not(.is-reverse) .products-hero-panel {
    padding-left: calc((100vw - 1160px) / 2 + 80px);
  }

  .products-hero-row.is-reverse .products-hero-panel {
    padding-right: calc((100vw - 1160px) / 2 + 80px);
  }
}

.products-hero-media {
  background-size: cover;
  background-position: center center;
}

.products-hero-panel .breadcrumbs {
  margin-bottom: 18px;
}

.products-hero-panel .breadcrumbs p {
  color: rgba(255, 255, 255, .7);
}

.products-hero-panel .hero-eyebrow {
  display: block;
  margin-bottom: 16px;
  color: var(--secondary);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
}

.products-hero-panel h1 {
  max-width: none;
  text-align: left;
  font-size: 42px;
  color: var(--light);
}

.products-hero-panel .hero-divider {
  margin: 0 0 25px;
}

.products-hero-panel p {
  max-width: none;
  text-align: left;
  font-size: 16px;
  color: rgba(255, 255, 255, .85);
}

/* reveal leggero e scaglionato all'ingresso, solo CSS (nessuna dipendenza da JS) */
.products-hero-panel .breadcrumbs,
.products-hero-panel .hero-eyebrow,
.products-hero-panel h1,
.products-hero-panel .hero-divider,
.products-hero-panel p {
  opacity: 0;
  animation: products-hero-fade-up .7s ease forwards;
}

.products-hero-panel .breadcrumbs { animation-delay: 0s; }
.products-hero-panel .hero-eyebrow { animation-delay: .1s; }
.products-hero-panel h1 { animation-delay: .2s; }
.products-hero-panel .hero-divider { animation-delay: .3s; }
.products-hero-panel p { animation-delay: .4s; }

@keyframes products-hero-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .products-hero-panel .breadcrumbs,
  .products-hero-panel .hero-eyebrow,
  .products-hero-panel h1,
  .products-hero-panel .hero-divider,
  .products-hero-panel p {
    animation: none;
    opacity: 1;
  }
}

/* piccoli tag informativi (formati, varianti) nelle righe prodotto */
.product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.product-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid rgba(var(--primary-rgb), .2);
  border-radius: 0 8px 0 0;
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* badge bianco per il logo dell'azienda rappresentata, dentro un pannello grigio */
.company-logo-badge {
  display: inline-flex;
  margin-bottom: 22px;
}

.company-logo-badge img {
  display: block;
  height: 84px;
  width: auto;
}

@media (max-width: 768px) {
  .products-hero-row {
    flex-direction: column;
    min-height: auto;
  }

  .products-hero-panel {
    padding: 50px 24px;
  }

  .products-hero-media {
    min-height: 260px;
  }

  .products-hero-panel h1 {
    font-size: 30px;
  }
}

/* Pagina Chi Siamo: sezione "storia" editoriale, con una citazione a fianco del testo narrativo */
.story-grid {
  display: grid;
  grid-template-columns: .9fr 1.3fr;
  gap: 60px;
  align-items: start;
}

.story-quote-mark {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 120px;
  line-height: 1;
  color: var(--secondary);
  opacity: .35;
}

.story-quote-text {
  margin-top: -30px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--heading);
}

.story-body h2,
.story-body p {
  text-align: left;
}

.story-body h2 {
  margin-bottom: 20px;
}

.values-section {
  background-color: var(--grey);
}

/* griglia valori a 4 colonne */
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 50px;
}

.value-card {
  padding: 34px 26px;
  background-color: var(--light);
  border-radius: 0 16px 0 0;
}

.value-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 20px;
  border-radius: 50%;
  background-color: var(--secondary);
  color: var(--light);
  font-size: 20px;
}

.value-card h3 {
  margin-bottom: 10px;
  text-align: left;
  font-size: 18px;
}

.value-card p {
  margin-bottom: 0;
  text-align: left;
  font-size: 14px;
}

@media (max-width: 1024px) {
  .story-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .story-quote-text {
    margin-top: 0;
  }

  .values-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .story-quote-mark {
    font-size: 90px;
  }

  .values-grid {
    grid-template-columns: 1fr;
  }

}

/* Page */
.hero-page {
  height: auto;
}

.hero-page .main {
  height: auto;
  padding: 150px 0 60px;
}

.wrapper {
  min-height: 900px;
}

/* Blog */
.article {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.card {
  display: flex;
  flex-direction: column;
  background-color: var(--light);
  border-radius: 0 16px 0 0;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .08);
  transition: transform .4s ease, box-shadow .4s ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 40px rgba(0, 0, 0, .18);
}

.card figure {
  height: 220px;
  overflow: hidden;
}

.card figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}

.card:hover figure img {
  transform: scale(1.06);
}

.inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 30px;
}

.card span,
.time {
  display: block;
  margin-bottom: 14px;
  color: var(--secondary);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.card span a,
.time a {
  color: inherit;
}

.card span a:hover,
.time a:hover {
  color: var(--dark);
}

.card i {
  margin-right: 5px;
}

.card h2,
.card h3 {
  margin-bottom: 12px;
  font-size: 18px;
  line-height: 1.35;
}

.card p {
  flex: 1;
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 24px;
}

.card .button {
  align-self: flex-start;
}

.pagination {
  padding: 70px 0 0;
  text-align: center;
}

.page-numbers {
  display: inline-block;
  padding: 10px 15px;
  border: 1px solid var(--primary);
  border-radius: 0 8px 0 0;
  text-decoration: none;
  color: var(--dark);
  font-size: 14px;
  text-transform: uppercase;
  transition: .3s;
}

a.page-numbers:hover {
  background: var(--primary);
  color: var(--light);
}

.current {
  background: var(--primary);
  color: var(--light);
}

.dots {
  border: none;
}

/* Single */
.single-wrap {
  display: flex;
}

.entry-taxonomy {
  margin-top: 60px;
  padding-top: 30px;
  border-top: 1px solid rgba(var(--primary-rgb), .12);
  font-size: 14px;
}

.entry-taxonomy-group {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.entry-taxonomy-group:last-child {
  margin-bottom: 0;
}

.entry-taxonomy a {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  margin: 0 8px 8px 0;
  border: 1px solid rgba(var(--primary-rgb), .2);
  border-radius: 0 8px 0 0;
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  text-decoration: none;
  transition: .3s;
}

.entry-taxonomy a:hover {
  background-color: var(--primary);
  color: var(--light);
}

.time .fa-user {
  margin-left: 30px;
}

/* riga meta sopra l'immagine in evidenza: badge categoria + data + autore */
.entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 25px;
}

.entry-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--secondary);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.entry-meta-item a {
  color: inherit;
}

.entry-meta-item a:hover {
  color: var(--dark);
}

.entry-meta-cat {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 0 8px 0 0;
  background-color: var(--primary);
  color: var(--light);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  transition: .3s;
}

.entry-meta-cat:hover {
  background-color: var(--dark);
  color: var(--light);
}

.entry-thumb {
  overflow: hidden;
  border-radius: 0 24px 0 0;
  box-shadow: 0 24px 40px rgba(0, 0, 0, .12);
  margin-bottom: 40px;
}

.entry-thumb img {
  display: block;
  width: 100%;
}

.entry-content {
  margin-bottom: 20px;
}

.entry-content > *:last-child {
  margin-bottom: 0;
}

aside {
  padding-left: 40px;
}

.widget {
  padding: 30px;
  background-color: var(--grey);
  border-radius: 0 16px 0 0;
  margin-bottom: 30px;
}

.widget h3 {
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 20px;
  font-size: 16px;
}

.widget h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  background-color: var(--secondary);
}

.widget ul {
  list-style-type: none;
  margin-left: 0;
}

.widget li {
  margin-bottom: 0;
  border-bottom: 1px solid rgba(var(--primary-rgb), .12);
}

.widget li:last-child {
  border-bottom: none;
}

.widget li a {
  display: block;
  padding: 10px 0;
  transition: .3s;
}

.widget li a:hover {
  padding-left: 6px;
  color: var(--secondary);
}

.widget a {
  color: var(--dark);
}

.widget a:hover {
  color: var(--secondary);
}

.widget input[type=text],
.widget input[type=search] {
  width: 100%;
  margin-bottom: 0;
}

.searchform > div {
  display: flex;
  gap: 10px;
}

.searchform input[type=text] {
  flex: 1;
  min-width: 0;
}

.searchform input[type=submit] {
  flex-shrink: 0;
}

/* form di ricerca della sidebar: stesso bottone (.button) usato in tutto il
   resto del sito, angolo tagliato e freccia incluse, invece del vecchio
   input[type=submit] generico */
.widget .searchform {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.widget .searchform .search-field {
  width: 100%;
  margin-bottom: 0;
}

.widget .searchform .button {
  justify-content: center;
  width: 100%;
}

/* Form */


label {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 600;
}


input,
select,
textarea {
  font-family: 'Montserrat', sans-serif;
  padding: 10px;
  width: 50%;
  border: 1px solid black;
}

input[type=text],
input[type=search] {
  width: 50%;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #bbb;
  border: 1px solid black;
}

input[type=submit] {
  text-decoration: none;
  color: var(--light);
  display: inline-block;
  padding: 18px 30px;
  border: 1px solid var(--primary);
  text-transform: uppercase;
  font-size: 14px;
  transition: .3s;
  background-color: var(--primary);
}


input[type=submit]:hover {
  background-color: transparent;
  color: var(--dark);
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #bbb;
  font-family: 'Montserrat', sans-serif;
}

/* Footer */
footer {
  width: 100%;
  background-color: var(--light);
  border-top: 1px solid #e5e5e5;
}

footer h4 {
  color: var(--dark);
}

footer a {
  text-decoration: none;
  color: var(--dark);
  transition: .3s;
}

footer a:hover {
  color: var(--secondary);
}

.footer-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 50px;
  padding: 60px 0 40px;
  text-align: left;
}

.footer-col {
  flex: 1;
  min-width: 220px;
}

@media (min-width: 769px) and (max-width: 1366px) {
  /* con 4 colonne a min-width:220px lo spazio in tablet non basta (220*4 + i
     gap superano abbondantemente la larghezza disponibile): il flex-wrap
     generico le spezzava su righe imprevedibili, con un effetto "quasi mobile"
     ma senza il centraggio pensato apposta per il mobile qui sotto. Su tutta
     la fascia tablet forziamo invece una griglia pulita a 2 colonne per riga. */
  .footer-col {
    flex: 0 0 calc(50% - 25px);
    min-width: 0;
  }
}

.footer-logo {
  height: 60px;
  margin: 0 0 20px;
}

.footer-heading {
  font-size: 14px;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

.footer-menu-list {
  list-style-type: none;
}

.footer-menu-list li {
  margin-bottom: 12px;
}

.footer-menu-list a {
  font-size: 14px;
}

.footer-cta p {
  margin-bottom: 20px;
}

.footer-contact p {
  font-size: 14px;
  margin-bottom: 8px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 25px 0;
  border-top: 1px solid #e5e5e5;
}

.footer-copyright,
.footer-credits {
  font-size: 12px;
  color: #666;
  margin-bottom: 0;
}

@media only screen and (min-width: 1024px) and (max-width: 1200px) {
  .content {
    margin: 0 4%;
    width: 92%;
  }
}

@media only screen and (max-width: 1024px) {
  h1 {
    font-size: 46px;
  }

  h2 {
    font-size: 30px;
  }

  h3 {
    font-size: 22px;
  }

  .hero-home-text {
    padding: 40px;
  }

  .hero-home-text h1 {
    font-size: 34px;
  }

  .content {
    margin: 0 4%;
    width: 92%;
  }

  .nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99998;
    width: 70%;
    height: 100%;
    background-color: var(--light);
    box-shadow: 2px 0 10px rgba(0, 0, 0, .15);
    transform: translateX(-100%);
    transition: all .3s;
    padding: 60px 20px;
  }

  .menu li {
    display: block;
    margin-bottom: 50px;
  }

  .menu a {
    display: block;
    width: 100%;
  }

  .navbar {
    display: flex;
  }

  .show {
    transform: translateX(0);
  }

  .offer-row-panel {
    padding: 50px;
  }

  .trust-strip-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .article {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 768px) {
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-6,
  .col-8,
  .col-10 {
    width: 100%;
  }

  h1 {
    font-size: 32px;
  }

  h2 {
    font-size: 26px;
  }

  h3 {
    font-size: 20px;
  }

  .logo-img {
    height: 55px;
    margin-top: 12px;
    margin-bottom: 12px;
  }

  .section,
  .single-wrap {
    flex-direction: column;
  }

  .article {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  aside {
    padding-left: 0;
    padding-top: 60px;
  }

  .hero-home {
    flex-direction: column;
    min-height: auto;
    margin-top: 103px;
  }

  .hero-home-text {
    width: 100%;
    padding: 50px 20px;
  }

  .hero-home-text-inner {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    text-align: center;
  }

  .hero-home-text h1,
  .hero-home-text p {
    text-align: center;
  }

  .hero-home-text h1 {
    font-size: 28px;
  }

  .hero-home-text p {
    font-size: 14px;
  }

  .hero-home-text .hero-divider {
    margin: 0 auto 25px;
  }

  .hero-home-image {
    width: 100%;
    height: 300px;
  }

  /* su mobile il riquadro hero e' alto solo 300px: le foto desktop (1000-1100px
     di larghezza) sono molto piu' pesanti del necessario per quella resa. Le
     varianti "-mobile" sono lo stesso identico scatto, solo ridimensionato/
     ricompresso: nessun cambiamento visivo, solo peso ridotto sul 4G */
  .hero-slide-1 { background-image: url('img/mattecfood-web/hero-1-mobile.jpg') !important; }
  .hero-slide-2 { background-image: url('img/mattecfood-web/hero-2-mobile.jpg') !important; }
  .hero-slide-3 { background-image: url('img/mattecfood-web/hero-3-mobile.jpg') !important; }

  /* su mobile l'hero della home (custom, non wp:media-text) non ha lo spazio
     verso ".sectors-header" che le altre pagine hanno gia' tramite wp:spacer;
     questo spacer aggiuntivo e' inerte su desktop (0px) e attivo solo qui */
  .mobile-sectors-gap.wp-block-spacer {
    height: 50px !important;
  }

  .offer-row,
  .offer-row.is-reverse {
    flex-direction: column;
  }

  .offer-row-media,
  .offer-row-panel {
    flex: 1 1 auto;
  }

  .offer-row-media {
    min-height: 260px;
  }

  .home-cta-band-row {
    flex-direction: column;
  }

  .home-cta-band-panel,
  .home-cta-band-media {
    flex: 1 1 auto;
  }

  .home-cta-band-media {
    min-height: 220px;
  }

  .home-cta-band-panel {
    padding: 40px 24px;
  }

  .home-cta-band p {
    max-width: none;
  }

  .offer-row-panel {
    padding: 40px 24px;
  }

  .offer-row-panel p {
    max-width: none;
  }

  .trust-strip-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .trust-item h3,
  .trust-item p {
    text-align: center;
  }

  .trust-item-icon {
    margin-left: auto;
    margin-right: auto;
  }

  .trust-item-title::after {
    margin-left: auto;
    margin-right: auto;
  }

  .home-cta-band {
    padding: 70px 0;
  }

  .footer-top {
    flex-direction: column;
    gap: 40px;
    text-align: center;
    padding: 50px 0 30px;
  }

  .footer-logo {
    margin-left: auto;
    margin-right: auto;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* ============================================================
   Blocchi Gutenberg nativi (contenuto di Home, Prodotti,
   Applicazioni, Aziende Rappresentate, Chi Siamo)

   Ogni regola qui sotto e' agganciata a una "Classe CSS aggiuntiva"
   applicata dall'editor al singolo blocco che ne ha bisogno (mai al
   tipo di blocco in generale). I nomi delle classi ricalcano quelli
   del vecchio design bespoke apposta: dove coincidono con i selettori
   gia' usati da custom.js (.hero-home, .sector-tile, .offer-row,
   .trust-item, .story-quote, .story-body, .value-card, .sectors-header,
   .home-cta-band-row, .offer-row-media, .sector-tile-bg, .gb-cta-btn)
   gli effetti GSAP/ScrollTrigger esistenti si riattivano da soli.
   ============================================================ */

/* le pagine migrate a Gutenberg (159/161/163/165/167 e le traduzioni inglesi
   265-269) non hanno piu' nessuna barra generica sopra il loro hero: page.php
   non stampa piu' il banner con h1, il titolo vero e proprio e' l'H1 dentro
   l'hero Gutenberg stesso (.products-hero, vedi piu' sotto), promosso da H2
   a H1 nel contenuto di ciascuna pagina. Resta invece la barra grigia con
   titolo + breadcrumbs per la pagina Blog/News (9 e 270, page_for_posts:
   home.php non ha un hero Gutenberg personalizzato) e per il singolo
   articolo (.single, assegnata in automatico da WordPress a ogni post) */
.page-id-9 .hero.hero-page,
.page-id-270 .hero.hero-page,
.single .hero.hero-page {
  height: auto;
  margin-top: 125px;
  padding: 16px 0;
  background: var(--grey);
}

/* barra piu' alta sull'articolo: ora ospita due righe impilate (breadcrumbs + titolo) */
.single .hero.hero-page {
  padding: 20px 0;
}

/* la barra e' sparita dalle pagine migrate: l'hero Gutenberg deve tornare a
   "scendere" lui stesso sotto l'header fisso (la home usa front-page.php,
   non questo hero: non tocco .hero-home) */
.page-id-159 .products-hero,
.page-id-161 .products-hero,
.page-id-163 .products-hero,
.page-id-165 .products-hero,
.page-id-167 .products-hero,
.page-id-265 .products-hero,
.page-id-266 .products-hero,
.page-id-267 .products-hero,
.page-id-268 .products-hero,
.page-id-269 .products-hero {
  margin-top: 125px !important;
}

/* News (titolo + breadcrumbs affiancati): sempre su una riga */
.page-id-9 .hero.hero-page .main,
.page-id-270 .hero.hero-page .main {
  height: auto;
  padding: 0;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 12px;
  text-align: left;
}

/* articolo singolo: breadcrumbs impilate sopra il titolo, non affiancate */
.single .hero.hero-page .main {
  height: auto;
  padding: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  text-align: left;
}

.single .hero.hero-page h1,
.page-id-9 .hero.hero-page h1,
.page-id-270 .hero.hero-page h1 {
  font-size: 13px;
  padding: 0;
  margin: 0;
  color: var(--text);
  letter-spacing: 1px;
}

/* News: uniche pagine a mantenere le breadcrumbs nella barra, stile invariato */
.page-id-9 .hero.hero-page .breadcrumbs,
.page-id-270 .hero.hero-page .breadcrumbs {
  margin: 0;
}

.page-id-9 .hero.hero-page .breadcrumbs p,
.page-id-270 .hero.hero-page .breadcrumbs p {
  font-size: 12px;
  letter-spacing: .5px;
  color: var(--text);
}

.page-id-9 .hero.hero-page .breadcrumbs a,
.page-id-270 .hero.hero-page .breadcrumbs a {
  color: var(--heading);
}

/* articolo singolo: breadcrumbs sopra il titolo, piccole come un paragrafo (15px, no maiuscolo) */
.single .hero.hero-page .breadcrumbs {
  margin: 0;
}

.single .hero.hero-page .breadcrumbs p {
  font-size: 15px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
}

.single .hero.hero-page .breadcrumbs a {
  color: var(--heading);
}

.page-id-6 .spacer,
.page-id-159 .spacer,
.page-id-161 .spacer,
.page-id-163 .spacer,
.page-id-165 .spacer,
.page-id-167 .spacer,
.page-id-265 .spacer,
.page-id-266 .spacer,
.page-id-267 .spacer,
.page-id-268 .spacer,
.page-id-269 .spacer {
  padding-top: 0;
  padding-bottom: 0;
}

/* --- Privacy Policy (161/362 hanno il proprio hero Gutenberg, questa no: e' una
   semplice pagina di testo, senza hero-image, quindi ha bisogno di una larghezza
   leggibile e di un H1 col colore giusto per uno sfondo chiaro invece che scuro) --- */
.page-id-361 .spacer,
.page-id-362 .spacer {
  max-width: 820px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.page-id-361 h1.wp-block-heading,
.page-id-362 h1.wp-block-heading {
  color: var(--heading);
}

.page-id-6 .divider,
.page-id-159 .divider,
.page-id-161 .divider,
.page-id-163 .divider,
.page-id-165 .divider,
.page-id-167 .divider,
.page-id-265 .divider,
.page-id-266 .divider,
.page-id-267 .divider,
.page-id-268 .divider,
.page-id-269 .divider {
  display: none;
}

/* full-bleed: i blocchi allineati a larghezza intera escono dal
   contenitore .content largo 1160px, fino ai bordi del viewport */
.spacer .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* --- .hero-home: hero della sola homepage, pannello bianco + foto (wp:media-text) --- */
.hero-home {
  min-height: calc(100vh - 125px);
}

.hero-home.wp-block-media-text {
  display: grid;
  grid-template-columns: 43.7% 56.3%;
  align-items: stretch;
}

.hero-home .wp-block-media-text__content {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--light);
  padding: 70px 80px;
}

.hero-home .wp-block-media-text__content .wp-block-heading {
  max-width: none;
  text-align: left;
  font-size: 44px;
  color: var(--heading);
  margin: 0 0 25px;
}

.hero-home .wp-block-media-text__content p {
  max-width: 520px;
  text-align: left;
  margin: 0 0 20px;
}

.hero-home .wp-block-media-text__media {
  align-self: start;
  height: calc(95vh - 125px);
}

.hero-home .wp-block-media-text__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .hero-home {
    min-height: 0;
  }

  .hero-home.wp-block-media-text {
    grid-template-columns: 100%;
  }

  .hero-home .wp-block-media-text__media {
    height: auto;
  }

  .hero-home .wp-block-media-text__content {
    padding: 48px 7%;
  }

  .hero-home .wp-block-media-text__content .wp-block-heading {
    font-size: 32px;
  }
}

/* --- .hero-eyebrow: piccolo occhiello arancione sopra i titoli hero --- */
.hero-eyebrow {
  display: block;
  margin-bottom: 16px !important;
  color: var(--secondary);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
}

/* --- .hero-divider: usata sul blocco Separatore per la lineetta sotto i titoli hero --- */
hr.hero-divider {
  width: 70px;
  height: 3px;
  max-width: 70px;
  margin: 0 0 25px;
  border: none;
  background-color: var(--secondary);
  opacity: 1;
}

.sectors-header hr.hero-divider {
  margin: 20px auto 25px;
}

/* --- .gb-cta-btn sul wrapper del blocco Bottone: stesse dimensioni ed effetto magnetico dell'originale.
   Nome deliberatamente diverso da "hero-cta-btn": quella vecchia classe bespoke ha un
   ::before assoluto pensato per stare su un <a> diretto; riusata sul div wrapper del
   blocco Bottone, quel layer invisibile finiva sopra il link e bloccava tutti i click. --- */
.wp-block-button.gb-cta-btn {
  margin-top: 35px;
}

.wp-block-button.gb-cta-btn > .wp-block-button__link {
  width: 320px;
  max-width: 100%;
}

.offer-row .wp-block-button.gb-cta-btn,
.final-cta .wp-block-button.gb-cta-btn,
.products-hero .wp-block-button.gb-cta-btn {
  margin-top: 0;
}

/* --- .sectors-header: intestazione centrata riusata come intro su tutte le pagine --- */
.sectors-header {
  max-width: 640px;
  margin: 0 auto 50px;
  padding: 0 24px;
  text-align: center;
}

.sectors-header.wp-block-group {
  display: block;
}


/* --- .sectors-cards: griglia dei 3 settori + card CTA in home (wp:columns) ---
   .content (1160px, centrato) non esiste piu' come div separato in page.php:
   il vincolo di larghezza va ricreato qui sul blocco stesso */
.sectors-cards {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1160px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.sectors-cards .wp-block-column {
  flex: none;
  margin: 0;
}

/* --- .sector-tile: singola card foto (wp:cover) nella griglia settori --- */
.sector-tile.wp-block-cover {
  position: relative;
  height: 480px;
  border-radius: 0;
  border: 1px solid rgba(var(--primary-rgb), .12);
  overflow: hidden;
  justify-content: flex-start;
  align-items: flex-end;
  transition: transform .4s ease, box-shadow .4s ease;
}

.sector-tile.wp-block-cover:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 40px rgba(0, 0, 0, .18);
}

/* dimRatio e' 0 sul blocco (l'oscuramento lo fa questo gradiente, non il dim
   nativo di wp:cover): la regola nativa .has-background-dim-0{opacity:0} ha
   piu' classi sullo stesso elemento ed e' quindi piu' specifica, va forzata */
.sector-tile.wp-block-cover .wp-block-cover__background {
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0) 65%) !important;
  opacity: 1 !important;
}

.sector-tile.wp-block-cover .wp-block-cover__image-background {
  z-index: 0;
  transition: transform .6s ease;
}

.sector-tile.wp-block-cover:hover .wp-block-cover__image-background {
  transform: scale(1.08);
}

/* la vecchia regola bespoke .sector-tile::after (un secondo overlay a gradiente,
   ridondante con quello che gestiamo su .wp-block-cover__background) si applica
   anche qui perche' riusiamo lo stesso nome classe: la disattivo per evitare un
   doppio strato scuro sopra la foto */
.sector-tile.wp-block-cover::after {
  content: none;
}

.sector-tile .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  max-width: none;
  padding: 26px;
}

/* niente icone: il settore si riconosce da un piccolo trattino verticale
   arancio accanto al nome, come un'etichetta, invece di un simbolo */
.sector-tile .wp-block-cover__inner-container .wp-block-heading {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--light) !important;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  margin: 0;
}

.sector-tile .wp-block-cover__inner-container .wp-block-heading::before {
  content: '';
  flex-shrink: 0;
  width: 3px;
  height: 18px;
  background: var(--secondary);
  transition: height .35s cubic-bezier(.16, 1, .3, 1);
}

.sector-tile.wp-block-cover:hover .wp-block-heading::before {
  height: 28px;
}

/* --- .sector-tile-cta: quarta card, "scopri di piu'" (wp:group, sfondo verde pieno) --- */
.sector-tile-cta.wp-block-group {
  position: relative;
  height: 480px;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px;
  background-color: var(--heading);
  isolation: isolate;
}

.sector-tile-cta-eyebrow {
  display: block;
  margin-bottom: 8px !important;
  color: var(--secondary);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
}

.sector-tile-cta .wp-block-heading,
.sector-tile-cta .wp-block-heading a {
  position: relative;
  color: var(--light);
  font-size: 26px;
  text-transform: none;
  letter-spacing: -.3px;
  margin: 0;
}

.sector-tile-cta .wp-block-heading a:hover {
  color: var(--light);
}

.sector-tile-cta .wp-block-heading::after {
  content: '';
  display: block;
  width: 36px;
  height: 2px;
  margin-top: 12px;
  background: var(--secondary);
  transition: width .4s cubic-bezier(.16, 1, .3, 1);
}

.sector-tile-cta:hover .wp-block-heading::after {
  width: 64px;
}

.sector-tile-cta-arrow {
  position: absolute !important;
  right: 26px;
  bottom: 28px;
  z-index: 2;
  margin: 0 !important;
  color: var(--secondary);
  font-size: 20px;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}

.sector-tile-cta-arrow a,
.sector-tile-cta-arrow a:hover {
  color: var(--secondary);
}

.sector-tile-cta:hover .sector-tile-cta-arrow {
  transform: translate(6px, -6px);
}

@media (max-width: 1024px) {
  .sectors-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  /* altezza fissa pensata per 4 colonne: su tablet (2 colonne) va ridotta,
     altrimenti la card CTA "Scopri di piu'" (testo ancorato in basso) lascia
     un grande vuoto sopra al testo */
  .sector-tile.wp-block-cover,
  .sector-tile-cta.wp-block-group {
    height: 340px;
  }
}

/* ============================================================
   TABLET (769-1024px): trattamento dedicato per l'hero della home e le
   card settori, isolato da mobile (<=768, sopra) e desktop (>1024).
   Non modifica nessuna delle due media query esistenti. */
@media (min-width: 769px) and (max-width: 1024px) {
  /* l'hero della home (custom, non wp:media-text) va in wrap "per sbaglio"
     tra 769 e circa 900px: .hero-home-text (flex-basis 420px + padding
     70/80px) e .hero-home-image insieme non ci stanno piu' su una riga, ma
     restano gli stili desktop (nessuna centratura, nessun limite di altezza
     sulla foto). Qui si impila di proposito, con misure pensate per il
     tablet e non semplicemente copiate da mobile. */
  .hero-home {
    flex-direction: column;
    min-height: auto;
    margin-top: 103px;
  }

  .hero-home-text {
    width: 100%;
    padding: 60px 60px 50px;
  }

  .hero-home-text-inner {
    max-width: 600px;
  }

  .hero-home-text h1 {
    font-size: 36px;
  }

  .hero-home-image {
    width: 100%;
    height: 380px;
  }

  /* WordPress applica di default min-height:430px a ogni wp:cover (vedi
     wp-includes/blocks/cover/style.min.css, non e' nel nostro CSS): con la
     griglia a 2 colonne questo minimo vince sempre sull'altezza ridotta qui
     sopra, sballando l'allineamento con la quarta card "Approfondisci" (un
     wp:group, non soggetto a quel minimo). Va annullato esplicitamente. */
  .sector-tile.wp-block-cover {
    min-height: 340px;
  }
}

@media (max-width: 640px) {
  .sectors-cards {
    grid-template-columns: 1fr;
  }

  .sector-tile.wp-block-cover {
    height: 260px;
  }

  /* su mobile la quarta card "Scopri di piu'" non deve piu' avere l'aspetto
     di una card grande: diventa un bottone normale, identico agli altri
     bottoni del sito (stesso sfondo, padding, maiuscolo, freccia con
     divisore), invece di limitarsi a rimpicciolire la card */
  .sector-tile-cta.wp-block-group {
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 15px 54px 15px 26px;
    border-radius: 0 16px 0 0;
  }

  /* WordPress avvolge sempre il contenuto reale del blocco Gruppo (occhiello,
     titolo, freccia) in un .wp-block-group__inner-container "in flusso
     normale": il flex-row qui sopra e' sul gruppo esterno, ma con un solo
     figlio (l'inner-container) non impila titolo e freccia in riga come
     previsto. display:contents rimuove il wrapper dal rendering senza
     toccare il markup, cosi' i tre elementi diventano figli diretti del
     flex e si dispongono davvero in riga. */
  .sector-tile-cta.wp-block-group > .wp-block-group__inner-container {
    display: contents;
  }

  .sector-tile-cta-eyebrow {
    display: none;
  }

  .sector-tile-cta.wp-block-group {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  .sector-tile-cta .wp-block-heading,
  .sector-tile-cta .wp-block-heading a {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }

  .sector-tile-cta .wp-block-heading::after {
    content: none;
  }

  .sector-tile-cta-arrow {
    position: static !important;
    margin-left: 18px !important;
    padding-left: 18px;
    border-left: 1px solid rgba(255, 255, 255, .3);
    font-size: 14px;
  }
}

/* --- .organic-divider: onda tra le sezioni, immagine SVG statica di sfondo su wp:group ---
   l'immagine ha viewBox 1440x80 (rapporto 18:1): con un'altezza fissa, su schermi stretti
   il background-size:100% 100% la comprime in orizzontale e la linea diagonale dell'onda
   diventa molto piu' ripida, quasi storta. Con aspect-ratio l'altezza si adatta alla
   larghezza reale del blocco e la proporzione dell'onda resta sempre la stessa */
.organic-divider.wp-block-group {
  display: block;
  aspect-ratio: 18 / 1;
  height: auto;
  padding: 0;
  background-image: url('img/organic-divider.svg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.organic-divider--in {
  margin-bottom: -1px !important;
  margin-top: 0 !important;
}

.organic-divider--out {
  margin-top: -1px !important;
  transform: scaleY(-1);
}

/* --- .offer-row: singola riga alternata Prodotti/Applicazioni/Aziende (wp:media-text
   a piena larghezza; righe adiacenti si susseguono senza gap, il grigio di sfondo
   sta sul pannello testo di ciascuna riga, la foto riempie l'altra meta') --- */
.offer-row.wp-block-media-text {
  display: grid;
  height: 560px;
  align-items: stretch;
  background-color: transparent;
}

.spacer > .offer-row + .offer-row {
  border-top: 1px solid rgba(var(--primary-rgb), .12);
}

.offer-row .wp-block-media-text__media {
  align-self: stretch;
  overflow: hidden;
}

.offer-row .wp-block-media-text__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.offer-row .wp-block-media-text__content {
  overflow: hidden;
}

.offer-row .wp-block-media-text__content {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 70px;
  background-color: var(--grey);
}

.offer-row-eyebrow {
  display: block;
  margin-bottom: 14px !important;
  color: var(--secondary);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
}

.offer-row .wp-block-media-text__content .wp-block-heading {
  margin: 0 0 16px;
  text-align: left;
}

.offer-row .wp-block-media-text__content p {
  max-width: 440px;
  text-align: left;
  margin: 0 0 26px;
}

@media (min-width: 1200px) {
  .offer-row:not(.is-reverse) .wp-block-media-text__content {
    padding-right: calc((100vw - 1160px) / 2 + 70px);
  }

  .offer-row.is-reverse .wp-block-media-text__content {
    padding-left: calc((100vw - 1160px) / 2 + 70px);
  }
}

@media (max-width: 1366px) {
  .offer-row.wp-block-media-text {
    height: auto;
    min-height: 0;
  }

  /* la riga (grid) resta ad altezza "auto" qui sotto: si adatta al pannello
     testo, che spesso e' piu' alto della foto sui formati stretti (tablet/
     laptop piccoli). L'immagine va comunque tenuta a height:100% (non auto)
     per riempire quella riga stirata, altrimenti resta alla propria altezza
     naturale e lascia un vuoto sotto, piu' visibile quanto piu' testo c'e'
     nella riga (bug osservato su Prodotti e Applicazioni) */
  .offer-row .wp-block-media-text__media img {
    height: 100%;
    min-height: 320px;
  }

  .offer-row .wp-block-media-text__content {
    padding: 48px 7%;
  }
}

/* piccoli tag informativi (formati, varianti) nelle righe prodotto */
.product-tags.wp-block-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px !important;
}

.product-tag {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  padding: 6px 14px;
  border: 1px solid rgba(var(--primary-rgb), .2);
  border-radius: 0 8px 0 0;
  color: var(--primary) !important;
  font-size: 11px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0 !important;
}

/* --- .trust-strip: fascia con le 3 colonne di punti di forza (wp:columns) --- */
.trust-strip.wp-block-group {
  padding: 90px 0;
  background-color: var(--light);
}

.trust-strip > .wp-block-columns {
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
}

.trust-strip .wp-block-column {
  text-align: left;
}

/* icona circolare: piccolo blocco paragrafo che contiene solo l'icona FontAwesome */
.trust-item-icon,
.value-card-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 0 22px !important;
  border-radius: 50%;
  background-color: var(--secondary);
  color: var(--light) !important;
  font-size: 20px;
}

.value-card-icon {
  width: 54px;
  height: 54px;
}

.trust-item .wp-block-heading {
  margin: 0 0 10px;
  text-align: left;
  font-size: 20px;
  position: relative;
}

.trust-item .wp-block-heading::after {
  content: '';
  display: block;
  width: 30px;
  height: 2px;
  margin-top: 10px;
  background: var(--secondary);
  transition: width .4s cubic-bezier(.16, 1, .3, 1);
}

.trust-item:hover .wp-block-heading::after {
  width: 56px;
}

.trust-item p {
  margin: 0;
  text-align: left;
}

/* variante per una singola card trust-item isolata (es. pagina Applicazioni):
   centra icona e testo invece del layout a sinistra pensato per la griglia a 3 colonne.
   Va dopo le regole ".trust-item .wp-block-heading"/".trust-item p" qui sopra perche',
   a parita' di specificita' (due classi), vince l'ultima dichiarata nel foglio di stile. */
.trust-item-centered.wp-block-column {
  text-align: center;
}

.trust-item-centered .wp-block-heading,
.trust-item-centered p {
  text-align: center;
}

.trust-item-centered .trust-item-icon {
  margin-left: auto !important;
  margin-right: auto !important;
}

.trust-item-centered .wp-block-heading::after {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  /* icona centrata nella larghezza del viewport (la colonna e' gia' a piena
     larghezza sotto i 768px) e testo centrato sotto, solo su mobile: su
     tablet/desktop la pagina Contatti resta come prima (icona+testo allineati
     a sinistra). Serve !important sul margine perche' la regola condivisa
     ".trust-item-icon, .value-card-icon" piu' sopra usa gia' !important. */
  .trust-item .wp-block-heading,
  .trust-item p {
    text-align: center;
  }

  .trust-item-icon {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* la barretta decorativa sotto il titolo e' un ::after "display:block" a
     larghezza fissa: text-align:center centra il testo ma non un box block,
     quindi restava incollata a sinistra. Va centrata a parte con i margini. */
  .trust-item .wp-block-heading::after {
    margin-left: auto;
    margin-right: auto;
  }
}

/* --- .contact-legal-info: ragione sociale/P.IVA/SDI sotto "I nostri recapiti" (pagina Contatti) --- */
.contact-legal-info {
  max-width: 640px;
  margin: -20px auto 40px;
  padding: 0 24px;
  text-align: center;
  font-size: 13px;
  color: #666;
}

/* --- .final-cta: sezione di chiusura di ogni pagina (wp:group a piena
   larghezza, niente foto). Tinta piena var(--primary), ma "staccata" dalla
   sezione sopra da un'onda organica (stesso linguaggio grafico dei divisori
   gia' usati altrove sul sito, solo ricolorata) invece di un bordo netto, e
   un badge circolare con icona sopra al titolo, che riprende il motivo
   "cerchio + accento" gia' usato per le icone (trust-strip, sector-tile-cta).
   Il contrasto resta garantito perche' non c'e' foto sotto al testo. */
.final-cta.wp-block-group {
  position: relative;
  padding: 104px 24px 84px;
  background-color: var(--primary);
  text-align: center;
}

.final-cta.wp-block-group::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* l'SVG ha viewBox 1440x80 (18:1), la stessa proporzione di .organic-divider:
     con un'altezza fissa (80px) l'onda si comprime in orizzontale sugli schermi
     stretti e la diagonale diventa molto piu' ripida. Con aspect-ratio l'altezza
     segue la larghezza reale del blocco e la pendenza resta sempre la stessa,
     piu' dolce su mobile. transform:translateY(-100%) sostituisce il vecchio
     "top:-79px" fisso: sposta l'elemento della propria altezza (auto), qualunque
     essa sia, cosi' resta sempre incollato al bordo superiore della sezione. */
  aspect-ratio: 18 / 1;
  height: auto;
  /* -100% netto lascia a volte una riga bianca di 1px tra l'onda e la sezione
     verde sottostante, per arrotondamenti dei pixel frazionari di aspect-ratio.
     +1px la fa sovrapporre leggermente: invisibile, perche' il fondo dell'onda
     (ultimo path, fill-opacity:1) e' lo stesso colore var(--primary) della
     sezione, non un bordo diverso */
  transform: translateY(calc(-100% + 1px));
  background-image: url('img/organic-divider-primary.svg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.final-cta .wp-block-heading {
  position: relative;
  color: var(--light);
  font-size: 34px;
  line-height: 1.25;
  margin: 0 0 18px;
}

.final-cta .wp-block-heading::before {
  content: "\f086";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background-color: var(--secondary);
  color: var(--light);
  font-size: 22px;
}

.final-cta p {
  max-width: 480px;
  margin: 0 auto 30px;
  color: rgba(255, 255, 255, .9);
  font-size: 16px;
  text-align: center;
}

.final-cta .wp-block-buttons {
  justify-content: center;
}

.final-cta .wp-block-button.gb-cta-btn {
  margin-top: 0;
}

.final-cta .wp-block-button__link {
  background-color: var(--secondary);
}

.final-cta .wp-block-button__link::after {
  color: var(--light);
  border-left-color: rgba(255, 255, 255, .4);
}

.final-cta .wp-block-button__link:hover {
  background-color: var(--dark);
}

@media (max-width: 768px) {
  .final-cta.wp-block-group {
    padding: 76px 20px 60px;
  }

  .final-cta .wp-block-heading {
    font-size: 27px;
  }

  .final-cta .wp-block-heading::before {
    width: 52px;
    height: 52px;
    font-size: 19px;
  }
}

/* --- .products-hero: hero delle pagine interne, pannello verde + foto (wp:media-text) --- */
.products-hero.wp-block-media-text {
  display: grid;
  min-height: 60vh;
  align-items: stretch;
  background-color: transparent;
}

.products-hero .wp-block-media-text__media {
  align-self: stretch;
}

.products-hero .wp-block-media-text__content {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: 90px 80px;
  background-color: var(--heading);
  justify-content: center;
}

.products-hero .wp-block-media-text__content .wp-block-heading {
  max-width: none;
  text-align: left;
  font-size: 42px;
  color: var(--light);
  margin: 0 0 25px;
  padding: 0;
}

.products-hero .wp-block-media-text__content p {
  max-width: none;
  text-align: left;
  font-size: 16px;
  color: rgba(255, 255, 255, .85);
  margin: 0 0 16px;
}

/* i link dentro il paragrafo del hero (es. pagina Contatti) ereditano di
   default var(--primary), verde scuro illeggibile sullo sfondo verde scuro
   del pannello: li si riporta al bianco del testo circostante, con una
   sottolineatura per restare comunque riconoscibili come link */
.products-hero .wp-block-media-text__content p a {
  color: rgba(255, 255, 255, .95);
  text-decoration: underline;
}

.products-hero .wp-block-media-text__content p a:hover {
  color: var(--light);
}

.products-hero .wp-block-media-text__media img {
  width: 100%;
  height: 100%;
  min-height: 400px;
  object-fit: cover;
}

/* breadcrumbs dentro l'hero Gutenberg vero e proprio, sopra l'occhiello e il
   titolo: pannello scuro (var(--heading)), quindi testo chiaro semi-trasparente,
   stessa dimensione del paragrafo qui accanto (16px) invece del piccolo
   maiuscolo usato nella barra sottile generica */
.products-hero .wp-block-media-text__content .hero-breadcrumbs {
  max-width: none;
  margin: 0 0 18px;
  font-size: 16px;
  color: rgba(255, 255, 255, .7);
}

.products-hero .wp-block-media-text__content .hero-breadcrumbs a {
  color: rgba(255, 255, 255, .9);
}

.products-hero .wp-block-media-text__content .hero-breadcrumbs a:hover {
  color: var(--light);
}

@media (min-width: 1200px) {
  .products-hero:not(.is-reverse) .wp-block-media-text__content {
    padding-left: calc((100vw - 1160px) / 2 + 80px);
  }

  .products-hero.is-reverse .wp-block-media-text__content {
    padding-right: calc((100vw - 1160px) / 2 + 80px);
  }
}

@media (max-width: 1366px) {
  /* sotto i 1366px (copre tutti i tablet, compreso iPad Pro 12.9" in
     orizzontale) il layout affiancato (immagine ~40% + testo) diventa troppo
     stretto: con align-items:stretch l'immagine viene forzata all'altezza del
     blocco di testo, tagliando (o "stirando" visivamente) foto panoramiche in
     un riquadro alto e stretto. Sotto questa soglia passiamo quindi allo stesso
     impilamento verticale gia' usato da WordPress sotto i 600px (is-stacked-on-mobile),
     cosi' l'immagine torna a piena larghezza con un'altezza proporzionata. */
  .products-hero.wp-block-media-text {
    min-height: 0;
    grid-template-columns: 100% !important;
  }

  .products-hero.wp-block-media-text > .wp-block-media-text__media {
    grid-column: 1;
    grid-row: 1;
  }

  .products-hero.wp-block-media-text > .wp-block-media-text__content {
    grid-column: 1;
    grid-row: 2;
    padding: 50px 7%;
  }

  .products-hero .wp-block-media-text__content .wp-block-heading {
    font-size: 30px;
  }

  .products-hero .wp-block-media-text__media img {
    width: 100%;
    height: auto;
    min-height: 260px;
    max-height: 360px;
  }
}

/* badge per il logo dell'azienda rappresentata dentro un pannello (wp:image) */
.company-logo-badge {
  display: inline-block !important;
  width: auto !important;
  margin-bottom: 22px !important;
}

.company-logo-badge img {
  display: block;
  height: 84px;
  width: auto;
}

/* --- .story-grid: sezione narrativa "storia" di Chi Siamo (wp:columns) --- */
.story-grid.wp-block-columns {
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
  gap: 60px;
  align-items: start;
}

.story-grid .story-quote {
  flex: 0 0 38%;
}

.story-grid .story-body {
  flex: 1;
}

.story-quote-mark {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 120px;
  line-height: 1;
  color: var(--secondary);
  opacity: .35;
  margin: 0 !important;
}

.story-quote-text {
  margin-top: -30px !important;
  font-size: 22px !important;
  font-weight: 700;
  line-height: 1.4 !important;
  color: var(--heading) !important;
  text-align: left !important;
}

.story-body .wp-block-heading,
.story-body p {
  text-align: left;
}

.story-body .wp-block-heading {
  margin-bottom: 20px;
}

@media (max-width: 1024px) {
  .story-grid.wp-block-columns {
    gap: 30px;
  }

  .story-quote-text {
    margin-top: 0 !important;
  }
}

@media (max-width: 768px) {
  .story-quote-mark {
    font-size: 90px;
  }
}

/* --- .values-section: fascia grigia con i 4 valori aziendali (wp:group + wp:columns) --- */
.values-section.wp-block-group {
  background-color: var(--grey);
  padding: 110px 0;
}

.values-grid.wp-block-columns {
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  gap: 24px;
}

.value-card {
  padding: 34px 26px;
  background-color: var(--light);
  border-radius: 0 16px 0 0;
}

.value-card .wp-block-heading {
  margin-bottom: 10px;
  text-align: left;
  font-size: 18px;
}

.value-card p {
  margin: 0;
  text-align: left;
  font-size: 14px;
}

@media (max-width: 768px) {
  /* icona centrata nella larghezza del viewport (la card e' gia' a piena
     larghezza sotto i 768px) e testo centrato sotto, come i trust-item */
  .value-card .wp-block-heading,
  .value-card p {
    text-align: center;
  }

  .value-card-icon {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (min-width: 782px) and (max-width: 1366px) {
  /* Gutenberg/WP core forza ".wp-block-columns{flex-wrap:nowrap!important}" da
     782px in su, senza limite superiore, pensato per un numero di colonne che
     sta comodo su una riga: con 4 value-card a meta' larghezza ciascuna, il
     nowrap le costringe tutte su un'unica riga (200% di larghezza richiesta),
     spingendo le ultime due fuori dallo schermo. Serve !important per vincere
     quello di WordPress e tornare a due card per riga su tutta la fascia
     tablet (782-1366px).
     Sotto i 782px NON si applica: li' WordPress stacka gia' le colonne al 100%
     per conto suo, ed e' il comportamento giusto per il mobile. */
  .values-grid.wp-block-columns {
    flex-wrap: wrap !important;
  }

  .values-grid.wp-block-columns .value-card {
    flex: 0 0 calc(50% - 12px) !important;
  }
}

/* --- ritmo verticale tra le sezioni: nessun margine/padding automatico qui.
   Lo spazio tra una sezione e l'altra viene inserito nel contenuto con un
   blocco Gutenberg "Spazio vuoto" (wp:spacer) dedicato, non con CSS. --- */