/* =====================================================================
   REDESIGN — LANDING "Istituti Comprensivi" (page-id 17506)
   Linguaggio visivo "Bandi" applicato in modo SCOPED alla sola pagina.
   Tutto e' scopato a .elementor-page-17506 per non far leakare le classi
   generiche (.tm-image-box / .tm-icon-box / .tm-button) usate altrove.
   Palette: variabili --abx-* gia' definite in :root di redesign.css.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) CARD LAB — .tm-image-box.edumall-box (8 photo-tile: immagine +
   titolo overlay). Superficie a cornice Bandi: bordo + radius + ombra,
   hover con sollevamento + barra ambra in alto + zoom immagine.
   --------------------------------------------------------------------- */
.elementor-page-17506 .tm-image-box.edumall-box{
  position: relative;
  display: block;
  background: #fff;
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-card) !important;
  box-shadow: var(--abx-shadow);
  overflow: hidden;
  transition: transform var(--abx-ease), box-shadow var(--abx-ease), border-color var(--abx-ease);
}
/* barra ambra in alto (rivelata all'hover) */
.elementor-page-17506 .tm-image-box.edumall-box::before{
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 6;
  background: var(--abx-amber);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--abx-ease);
}
.elementor-page-17506 .tm-image-box.edumall-box:hover{
  transform: translateY(-6px);
  box-shadow: var(--abx-shadow-md);
  border-color: #CBD8E8;
}
.elementor-page-17506 .tm-image-box.edumall-box:hover::before{ transform: scaleX(1); }

/* immagine: ratio uniforme + cover + leggero zoom all'hover */
.elementor-page-17506 .tm-image-box.edumall-box .edumall-image.image{
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: block;
}
.elementor-page-17506 .tm-image-box.edumall-box .edumall-image.image img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .5s var(--abx-ease);
}
.elementor-page-17506 .tm-image-box.edumall-box:hover .edumall-image.image img{
  transform: scale(1.06);
}

/* la .box-caption e' vuota su tutte le 8 card -> niente banda bianca sotto
   la foto: il card e' la foto incorniciata con il titolo in overlay.
   Azzero anche il margin-bottom 29px che style-03.image-position-top mette
   sotto .image-wrap (era la banda bianca residua dentro la cornice). */
.elementor-page-17506 .tm-image-box.edumall-box .box-caption-wrap{
  display: none !important;
}
.elementor-page-17506 .tm-image-box.edumall-box .image-wrap{
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}

/* titolo overlay: leggibile su gradiente, coerente e su 2 righe max */
.elementor-page-17506 .tm-image-box.edumall-box .title{
  font-weight: 700 !important;
  line-height: 1.28 !important;
  letter-spacing: -.005em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------------------------------------------------------------------
   2) CARD FEATURE — .tm-icon-box.edumall-box (3 box "Innovazione /
   Espressione / Sostenibilita"). Da blocchi di testo nudi a card bianche
   Bandi: superficie + bordo + radius + ombra, hover lift + barra ambra,
   heading navy, descrizione muted.
   --------------------------------------------------------------------- */
.elementor-page-17506 .tm-icon-box.edumall-box{
  position: relative;
  display: block;
  background: #fff !important;
  border: 1px solid var(--abx-border) !important;
  border-radius: var(--abx-radius-card) !important;
  box-shadow: var(--abx-shadow);
  padding: 26px 28px 24px !important;
  max-width: none !important;
  overflow: hidden;
  transition: transform var(--abx-ease), box-shadow var(--abx-ease), border-color var(--abx-ease);
}
.elementor-page-17506 .tm-icon-box.edumall-box::before{
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 3;
  background: var(--abx-amber);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--abx-ease);
}
.elementor-page-17506 .elementor-widget-tm-icon-box:hover .tm-icon-box.edumall-box{
  transform: translateY(-6px);
  box-shadow: var(--abx-shadow-md);
  border-color: #CBD8E8;
}
.elementor-page-17506 .elementor-widget-tm-icon-box:hover .tm-icon-box.edumall-box::before{
  transform: scaleX(1);
}
/* heading navy sempre (anche in hover, niente virata su altra tinta) */
.elementor-page-17506 .tm-icon-box.edumall-box .heading,
.elementor-page-17506 .elementor-widget-tm-icon-box:hover .tm-icon-box .heading{
  color: var(--abx-navy) !important;
  font-weight: 700 !important;
}
.elementor-page-17506 .tm-icon-box.edumall-box .description{
  color: var(--abx-text) !important;
}
/* se presente, l'icona in chip morbido tinta brand (qui i box sono senza
   icona: la regola non produce riquadri vuoti perche' .icon e' vuota) */
.elementor-page-17506 .tm-icon-box.edumall-box .edumall-icon-view-inner{
  border-radius: 14px !important;
}
/* ridotto il margine tra le card (prima 46px) per un ritmo piu' compatto */
.elementor-page-17506 .elementor-element-c2004c1 > .elementor-widget-container,
.elementor-page-17506 .elementor-element-df5b955 > .elementor-widget-container{
  margin-bottom: 22px !important;
}

/* ---------------------------------------------------------------------
   3) BOTTONE — .tm-button.style-flat (7c339b0 "Esplora Didact Life")
   Lo sfondo del flat-button e' sugli pseudo: ::before = stato idle,
   ::after = riempimento hover. Idle blu brand (testo bianco) -> hover
   ambra (testo navy). Radius 12 arriva gia' dal global tm-button.
   --------------------------------------------------------------------- */
.elementor-page-17506 .elementor-element-7c339b0 .tm-button.style-flat::before{
  background-color: var(--abx-primary) !important;
}
.elementor-page-17506 .elementor-element-7c339b0 .tm-button.style-flat::after{
  background-color: var(--abx-amber) !important;
}
.elementor-page-17506 .elementor-element-7c339b0 .tm-button .button-content-wrapper,
.elementor-page-17506 .elementor-element-7c339b0 .tm-button .button-content-wrapper .stop-a,
.elementor-page-17506 .elementor-element-7c339b0 .tm-button .button-content-wrapper .stop-b{
  color: #fff !important; stop-color: #fff !important;
}
.elementor-page-17506 .elementor-element-7c339b0 .tm-button:hover .button-content-wrapper,
.elementor-page-17506 .elementor-element-7c339b0 .tm-button:hover .button-content-wrapper .stop-a,
.elementor-page-17506 .elementor-element-7c339b0 .tm-button:hover .button-content-wrapper .stop-b{
  color: var(--abx-navy) !important; stop-color: var(--abx-navy) !important;
}
/* freccia: piccolo scorrimento all'hover (coerente con le CTA Bandi) */
.elementor-page-17506 .elementor-element-7c339b0 .tm-button .button-icon{
  transition: transform var(--abx-ease);
}
.elementor-page-17506 .elementor-element-7c339b0 .tm-button:hover .button-icon{
  transform: translateX(4px);
}

/* ---------------------------------------------------------------------
   4) FORM CF7 (dentro la card bianca dell'hero) — solo presentazione.
   Campi/logica invariati. Input piu' definiti su fondo bianco, focus
   ring blu (gia' globale), checkbox privacy on-brand.
   --------------------------------------------------------------------- */
.elementor-page-17506 .wpcf7 input:not([type="submit"]):not([type="checkbox"]),
.elementor-page-17506 .wpcf7 textarea{
  background-color: #fff !important;
  border: 1px solid var(--abx-border) !important;
  border-radius: var(--abx-radius) !important;
  color: var(--abx-heading) !important;
}
.elementor-page-17506 .wpcf7 input:not([type="submit"]):not([type="checkbox"]):focus,
.elementor-page-17506 .wpcf7 textarea:focus{
  border-color: var(--abx-primary) !important;
  box-shadow: 0 0 0 3px var(--abx-primary-tint) !important;
}
/* checkbox privacy: accento brand + link leggibile */
.elementor-page-17506 .wpcf7 .wpcf7-acceptance input[type="checkbox"]{
  accent-color: var(--abx-primary);
  width: 17px; height: 17px;
}
.elementor-page-17506 .wpcf7 .wpcf7-list-item-label{ color: var(--abx-text); }
.elementor-page-17506 .wpcf7 .wpcf7-list-item-label a{
  color: var(--abx-primary); font-weight: 600; text-decoration: underline;
}
/* submit "Invia": blu -> hover ambra arriva dal global; qui solo conferma
   della resa a piena larghezza dentro la card */
.elementor-page-17506 .wpcf7 .wpcf7-submit{
  width: 100%;
  box-shadow: 0 8px 20px rgba(0,113,220,.22) !important;
}

/* ---------------------------------------------------------------------
   5) HERO — overlay foto: dal grigio neutro (#252525) a tinta NAVY brand
   (coerente con gli hero Bandi/Chi-Siamo). La foto resta, solo la velatura
   diventa navy per un colpo d'occhio on-brand.
   --------------------------------------------------------------------- */
.elementor-page-17506 .elementor-element-f1858cb > .elementor-background-overlay{
  background-color: var(--abx-navy) !important;
  opacity: .62 !important;
}

/* ---------------------------------------------------------------------
   6) RESPONSIVE — piccoli aggiustamenti mobile
   --------------------------------------------------------------------- */
@media (max-width: 767px){
  .elementor-page-17506 .tm-icon-box.edumall-box{ padding: 22px 20px 20px !important; }
  .elementor-page-17506 .wpcf7 .wpcf7-submit{ width: 100% !important; }
}

/* =====================================================================
   LOOK "BANDI / SOLUZIONI" — canvas tinta fredda + header barra ambra
   Generico: sfondo pagina tinta; sezioni-contenuto trasparenti TRANNE
   l'hero (:first-child) e il footer (in .elementor-507). Barra ambra
   solo sugli header di sezione con occhiello (.heading-secondary-wrap).
   ===================================================================== */
body.elementor-page-17506{ background:#F4F7FB !important; }
.elementor-17506 > .elementor-section.elementor-top-section:not(:first-child){
  background-color:transparent !important;
}
.elementor-page-17506 .tm-modern-heading:has(.heading-secondary-wrap){
  position:relative; padding-left:22px;
}
.elementor-page-17506 .tm-modern-heading:has(.heading-secondary-wrap)::before{
  content:""; position:absolute; left:0; top:5px; bottom:5px;
  width:5px; border-radius:3px; background:var(--abx-amber);
}
.elementor-page-17506 .heading-secondary-wrap .heading-secondary{
  letter-spacing:.10em; margin-bottom:6px !important;
}