/* kom-gutenberg.css — ponte tra i blocchi core di Gutenberg e il design system KOM.
   I contenuti dei pattern usano blocchi nativi (heading, paragraph, columns, buttons,
   details, image, list) con le NOSTRE classi: la maggior parte degli stili arriva già
   da kom-ds.css via selettori di classe/discendenti. Qui sistemiamo solo ciò che i
   blocchi core introducono di proprio (bottoni, gap, figure, details marker). */

/* — niente striscia bianca tra la fascetta accent e gli hero scuri delle pagine.
   Il contenuto pagina parte attaccato all'header, senza margine bianco sopra. */
.wp-block-post-content,
.entry-content,
main.wp-block-group,
.wp-site-blocks > main { margin-top:0 !important; padding-top:0 !important; }
.wp-block-post-content > *:first-child,
.entry-content > *:first-child { margin-top:0 !important; }
/* l'eventuale blocco "stili" (wp:html iniziale) non deve occupare spazio */
.wp-block-post-content > style:first-child,
.entry-content > style:first-child { display:none; }
/* gli hero scuri si fondono col nero anche se sopra resta un filo di sfondo:
   il contenuto parte attaccato all'header, senza margine/striscia bianca sopra.
   Così il markup combacia con core → niente "contenuto non valido". */
.svc-hero.is-dark, .svc-hero.has-dark, .svc-hero.obj, .svc-hero.srv, .ai-hero, .ls-dark, .wd-hero, .geo-hero,
.sv-hero, .amh, .ag-hero, .iv-hero, .apx, .sec-form-hs, .mb-sec:first-child,
/* i "Panorama" video full-bleed: niente striscia bianca né sopra né sotto (la sezione dopo si attacca alla fascetta accent) */
.pan, .pan + * { margin-top:0 !important; }
.wp-block-post-content > section:first-child,
.entry-content > section:first-child,
.wp-block-post-content > .wp-block-group:first-child,
.entry-content > .wp-block-group:first-child,
/* il primo blocco visibile dopo lo <style> nascosto iniziale deve restare attaccato */
.wp-block-post-content > style:first-child + *,
.entry-content > style:first-child + * { margin-top:0 !important; }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; align-items: center; }
.wp-block-button { margin: 0; display: inline-block; }
.wp-block-button .wp-block-button__link { display: inline-block; width: auto; }
/* Reset del WRAPPER: le classi .btn/.btn-* (legacy, pensate per l'<a> nelle
   pagine statiche) NON devono stilare il div wrapper, altrimenti bordo+padding
   si raddoppiano col link interno. Lo stile vive solo su .wp-block-button__link. */
.wp-block-button.btn, .wp-block-button.btn-primary, .wp-block-button.btn-outline,
.wp-block-button.btn-yellow, .wp-block-button.btn-ghost {
  border: 0; padding: 0; background: transparent; border-radius: 0;
}
.wp-block-button.btn .wp-block-button__link {
  display: inline-block; text-decoration: none; white-space: nowrap;
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius, 2px);
  padding: 13px 22px;
  font-family: var(--mono); font-size:var(--fs-meta); font-weight:var(--fw-etichetta);
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.1;
  position: relative; overflow: hidden;
  transition: background .2s ease, color .2s ease, border-color .2s ease,
    transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease;
}
.wp-block-button.btn .wp-block-button__link::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform .6s cubic-bezier(.22,1,.36,1);
}
@media (hover:hover){
  .wp-block-button.btn .wp-block-button__link:hover {
    transform: translateY(-3px); box-shadow: 0 14px 26px -12px rgba(17,17,18,.45);
  }
  .wp-block-button.btn .wp-block-button__link:hover::before { transform: translateX(130%); }
  .wp-block-button.btn .wp-block-button__link:active {
    transform: translateY(-1px); box-shadow: 0 7px 14px -10px rgba(17,17,18,.45); transition-duration: .06s;
  }
}
@media (prefers-reduced-motion:reduce){
  .wp-block-button.btn .wp-block-button__link { transition: background .2s ease, color .2s ease, border-color .2s ease; }
  .wp-block-button.btn .wp-block-button__link:hover { transform: none; box-shadow: none; }
  .wp-block-button.btn .wp-block-button__link::before { display: none; }
}
.wp-block-button.btn .wp-block-button__link:hover { background: #000; }
.wp-block-button.btn-outline .wp-block-button__link { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.wp-block-button.btn-outline .wp-block-button__link:hover { background: var(--ink); color: var(--paper); }
.wp-block-button.btn-yellow .wp-block-button__link { background: var(--yellow); color: var(--ink); }
.wp-block-button.btn-yellow .wp-block-button__link:hover { background: #ffc738; }
.wp-block-button.btn-ghost .wp-block-button__link { background: transparent; color: var(--paper); border: 1px solid rgba(255,255,255,.4); }
.wp-block-button.btn-ghost .wp-block-button__link:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* — heading/paragraph dentro i nostri wrapper: niente margini residui core — */
.wp-block-heading { margin-top: 0; }
.svc-hero .wp-block-heading, .sec-title.wp-block-heading { margin: 0; }

/* — figure/immagini core dentro i blocchi media — */
.split-media .wp-block-image, .fullbleed .wp-block-image { margin: 0; height: 100%; }
.split-media .wp-block-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }
.fullbleed .wp-block-image img { width: 100%; height: 460px; object-fit: cover; border-radius: 8px; display: block; }
.split-media .wp-block-image.is-empty, .fullbleed .wp-block-image.is-empty { background: var(--soft); border: 1px dashed var(--rule); }

/* — Details (Fisarmonica/FAQ): togli il marker nativo, usa il nostro — */
.faq details, .split-body .acc details { }
.wp-block-details summary { list-style: none; cursor: pointer; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::marker { content: ""; }

/* — columns core dentro .leadcols/.cols ereditano il nostro gap — */
.leadcols .wp-block-columns { gap: 40px; margin: 0; }
.leadcols .wp-block-column { flex-basis: auto; }

/* — homepage portfolio: card image (core) riempie la thumb — */
.pf-card figure.thumb { margin: 0; height: 240px; border-bottom: 1px solid var(--rule); }
.pf-card figure.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* griglia dinamica (shortcode): l'immagine in evidenza riempie la thumb */
.pf-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-foot { margin-top: 40px; }

/* — group "wrap": il nostro contenitore, non il constrained core — */
.wp-block-group.wrap { max-width: 1400px; margin-inline: auto; }

/* — niente spaziatura blocco di troppo tra sezioni — */
/* Copre sia i gruppi core sia le <section> da wp:html (es. .effigie, .mv-sec,
   .mb-sec): altrimenti il block-gap del layout lascia una riga bianca tra due
   sezioni adiacenti (es. hero scuro → effigie scura). */
section.wp-block-group,
.wp-block-post-content > section,
.entry-content > section { margin-block: 0; }

/* — Effigie: neutralizza lo stile del core/quote, usa il nostro — */
.effigie .wp-block-quote { border: 0; padding: 0; margin: 0; }
.effigie .wp-block-quote p { margin: 0; }
.effigie .portrait { overflow: hidden; }
.effigie .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 28%; }

/* — Details nativi (Fisarmonica + FAQ): icona + rotazione senza span manuale — */
.faq .wp-block-details summary, .split-body .acc .wp-block-details summary { position: relative; padding-right: 40px; }
.faq .wp-block-details summary::after,
.split-body .acc .wp-block-details summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); color: var(--magenta); font-size: 22px; line-height: 1; transition: transform .2s ease;
}
.faq .wp-block-details[open] summary::after,
.split-body .acc .wp-block-details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq .wp-block-details, .split-body .acc .wp-block-details { border-bottom: 1px solid var(--rule); }
.faq .wp-block-details summary { padding-top: 24px; padding-bottom: 24px; font-family: var(--display); font-size:var(--fs-titolo-s); font-weight:var(--fw-titolo); }
.split-body .acc .wp-block-details summary { padding-top: 18px; padding-bottom: 18px; font-family: var(--display); font-size:var(--fs-titolo-s); font-weight:var(--fw-titolo); }

/* — Slider "Approfondisci con l'AI" (komlab/sec-ailink) reso con blocchi nativi —
   La pista e le card sono wp:group: qui si neutralizzano i margini di layout core
   e si ricorda l'aspetto delle card (heading/paragraph core al posto degli span). */
.fasi-track.wp-block-group { display: flex; }
.fasi-track > * { margin-block: 0; }                 /* via il margin del flow core, resta il gap CSS */
.fasi-card.wp-block-group > * { margin-block: 0; }   /* niente margini residui tra src/titolo/desc */
.fasi-card .fasi-card__t.wp-block-heading { margin: 0; }
.ai-slider .fasi-card .fasi-card__t.wp-block-heading { margin: 8px 0 0; }
.fasi-card .fasi-card__d { margin: 0; }
.fasi-card .fasi-card__go { margin-top: auto; }
.fasi-card .fasi-card__go a { color: inherit; text-decoration: none; }
.ai-slider .fasi-card .fasi-card__go a { color: #7fd0f5; }
.fasi-card { cursor: pointer; }                      /* tutta la card cliccabile (via JS) */

/* — Hero pagina IA: con "Riduci movimento" mostra la rete neurale STATICA
   (ai-hero.js disegna un solo fotogramma, niente animazione) invece di un vuoto
   nero. Vince sull'inline #ai-net{display:none} salvato nel contenuto della pagina. */
@media (prefers-reduced-motion: reduce) { #ai-net { display: block !important; } }

/* Ouverture «Marketing for the Brave» — in EDITOR non copre: diventa un blocco in
   colonna così video, titolone e occhiello del Panorama restano tutti editabili. */
.editor-styles-wrapper .pan .pan-brave{ position:relative; inset:auto; z-index:2; background:rgba(0,0,0,.78); }
.editor-styles-wrapper .pan.has-brave:not(.brave-off) .ov, .editor-styles-wrapper .pan .ov{ opacity:1; }