/* =========================================================
   MACROTEC — adattamenti ai blocchi di WordPress
   style.css è copiato dal prototipo e resta com'è; qui ci sono
   solo le regole che servono perché gli stessi stili funzionino
   con i blocchi (gruppi, paragrafi, pulsanti, navigazione…).
   ========================================================= */

/* ---------- Struttura della pagina ---------- */
.wp-site-blocks > * { margin-block: 0; }
.wp-site-blocks { padding: 0; }
.mt-main { display: block; }
.section--prima, .section--testo, .section--solo { padding-top: calc(var(--header-h) + 64px); }
.section--solo { min-height: 70vh; }

/* testi che nel prototipo erano <span>/<div> e ora sono paragrafi */
.kicker { margin-top: 0; }
.page-hero .crumbs { margin: 0 0 12px; }
.page-hero .page-hero-sub { margin: 16px 0 0; font-size: 19px; font-weight: 300; max-width: 680px; }
.page-hero h1 strong { font-weight: 700; }
.news-card .date { margin: 0; }
.tile .arrow { margin: 12px 0 0; }
.cta-band .cta-label { color: #8fc1ee; margin-bottom: 14px; }
.chip-list { margin-bottom: 0; }
.ph-riga { margin: 18px 0; }
.center .ph-riga, .center.ph-riga { text-align: center; }
.intro-pagina { margin-bottom: 56px; }
.section--dark strong { color: #fff; }

/* titoli con parti in grassetto/colore (nel prototipo <b> ed <em>) */
.hero-content h1 strong { font-weight: 700; }
.hero-content h1 em { font-style: normal; color: #8fc1ee; }
.model-card h3 em { font-style: normal; font-weight: 300; }

/* ---------- Pulsanti (blocco «Pulsanti») ---------- */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }
.wp-block-buttons.is-content-justification-center { justify-content: center; }
.wp-block-button__link { display: inline-flex; align-items: center; gap: 10px; transition: background .2s, color .2s, border-color .2s; }
.wp-block-button.is-style-ghost .wp-block-button__link { background: transparent; color: var(--accent); }
.wp-block-button.is-style-ghost .wp-block-button__link:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.wp-block-button.is-style-light .wp-block-button__link { background: transparent; border-color: #fff; color: #fff; border-radius: 0; }
.wp-block-button.is-style-light .wp-block-button__link:hover { background: #fff; color: var(--ink); border-color: #fff; }
.section--dark .wp-block-button.is-style-ghost .wp-block-button__link { color: #fff; border-color: #fff; }
.section--dark .wp-block-button.is-style-ghost .wp-block-button__link:hover { background: #fff; color: var(--ink); }
.lead + .wp-block-buttons, .ph-riga + .wp-block-buttons { margin-top: 8px; }
.split .wp-block-buttons { margin-top: 26px; }
.news + .wp-block-buttons { margin-top: 36px; }

/* ---------- Schede e tessere: tutta la superficie è cliccabile ---------- */
.model-card { position: relative; }
.model-card h3 a { color: inherit; }
.model-card h3 a::after { content: ""; position: absolute; inset: 0; }
.model-card h3 a:hover { color: var(--accent); }
.tile h3 a { color: #fff; }
.tile h3 a::after { content: ""; position: absolute; inset: -2000px; }   /* la tessera ha overflow:hidden */
.tile h3, .tile p { color: #fff; }

/* ---------- Passi numerati (gruppi invece di <ol><li>) ---------- */
.steps > .step { counter-increment: step; position: relative; padding-top: 58px; }
.steps > .step::before {
  content: counter(step); position: absolute; top: 0; left: 0; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 700; font-size: 18px;
}
.section--dark .steps h3 { color: #fff; }
.section--dark .steps p { color: #b9c1c8; }

/* ---------- Tabella tecnica (blocco «Tabella» con classe spec) ---------- */
.wp-block-table.spec { margin: 28px 0 0; overflow-x: auto; }
.wp-block-table.spec table { width: 100%; border-collapse: collapse; font-size: 16px; }
.wp-block-table.spec th, .wp-block-table.spec td { border: 0; border-bottom: 1px solid var(--line); padding: 14px 16px; text-align: left; vertical-align: top; }
.wp-block-table.spec th { width: 36%; }

/* ---------- Riquadro partner ---------- */
.partner-badge .logo-ph { margin: 0; }
.partner-badge .partner-nome { margin: 0; }
.partner-badge .ph-riga { margin: 0; }

/* ---------- Tipologie (disegni in pianta) ---------- */
.type-card .ico-pianta svg { width: 100%; height: auto; max-height: 120px; color: var(--ink-soft); margin-bottom: 18px; }

/* ---------- Casi realizzati (segnaposto) ---------- */
.ph-grid .ph-box { margin: 0; }
.modulo-segnaposto { text-align: center; display: flex; flex-direction: column; justify-content: center; }
.modulo-segnaposto .h-label { margin-bottom: 8px; }
.modulo-segnaposto .lead { margin-bottom: 12px; }
.contact-info .ph-riga { margin-top: 0; }
.map-ph p { margin: 0; }

/* ---------- Testata ---------- */
.mt-testata { position: relative; z-index: 100; }
.site-header .nav { color: #fff; }
.site-header .wp-block-navigation { font-size: 17px; }
.site-header .wp-block-navigation__container { gap: 44px; }
.site-header .wp-block-navigation-item__content { color: inherit; padding: 0; }
.site-header .nav a, .site-header .logo { color: #fff; }
.site-header .nav a.active, .site-header .nav [aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.site-header .nav--right { gap: 44px; }
.site-header .logo { justify-content: center; }
.logo svg { display: block; }

/* testata bianca nelle pagine senza foto grande in cima (subito, prima del JavaScript) */
.testata-piena .site-header { background: #fff; box-shadow: 0 1px 0 var(--line); }
.testata-piena .site-header .nav, .testata-piena .site-header .nav a, .testata-piena .site-header .logo,
.site-header.is-solid .nav { color: var(--ink); }
.testata-piena .site-header .nav a:hover, .testata-piena .site-header .nav a.active,
.site-header.is-solid .nav a:hover, .site-header.is-solid .nav a.active { color: var(--accent); }
.testata-piena .site-header .burger span { background: var(--ink); }

/* barra di amministrazione (solo per chi è collegato) */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

/* menu a tutto schermo */
.menu-panel .menu-nav, .menu-panel .wp-block-navigation__container { display: grid; gap: 6px; text-align: center; justify-items: center; }
.menu-panel .wp-block-navigation-item__content { color: #fff; font-size: clamp(24px, 3vw, 34px); font-weight: 300; padding: 0; }
.menu-panel .wp-block-navigation-item__content:hover { color: #8fb8e0; }
.menu-panel .menu-sub a { color: #cfd6dc; }

/* ---------- Piè di pagina ---------- */
.site-footer p { margin: 0 0 14px; }
.site-footer .footer-links { margin: 0; }
.site-footer .footer-h-spazio { margin-top: 22px; }
.site-footer .legal p { margin: 0; }
.site-footer .legal-links a:first-child { margin-left: 0; }
.site-footer .ph-riga { margin: 0; }
/* recapiti nel testo (telefono, email): in riga, non come le colonne di link */
.site-footer .footer-col > p:not(.footer-links) a:not(.logo) { display: inline; margin: 0; }

/* ---------- Realizzazioni (blocchi Galleria) ---------- */
.galleria-titolo { margin: 64px 0 8px; }
.galleria-titolo:first-child { margin-top: 0; }
.galleria-sotto { color: var(--ink-soft); margin: 0 0 24px; }
.wp-block-gallery.galleria-realizzazioni { margin: 0 0 16px; }
.wp-block-gallery.galleria-realizzazioni .wp-block-image img { border-radius: var(--radius); }

/* ---------- Pagine di testo (privacy, cookie) ---------- */
.testo-lungo h2 { font-size: 22px; margin: 36px 0 12px; }
.testo-lungo p, .testo-lungo li { color: var(--ink-soft); }

/* ---------- Varianti di impaginazione usate nelle pagine ---------- */
.split--spazio { margin-top: 72px; }
.cta-band .cta-visual .split-media { width: 100%; }   /* banda con foto invece della porta */
.container--stretto { max-width: 900px; }
.lead--dopo { margin-top: 44px; }
.carosello-dopo { margin-top: 40px; }
.carosello-dopo p { max-width: 720px; margin: 0 auto 18px; color: var(--ink-soft); }

/* ---------- Assistenza: pulsanti per chiamare (grandi sul telefono) ---------- */
.assistenza-chiama { margin-top: 8px; }
.assistenza-chiama .wp-block-buttons { flex-direction: column; align-items: stretch; gap: 12px; }
.assistenza-chiama .wp-block-button__link { width: 100%; justify-content: center; text-align: center; box-sizing: border-box; }
.contact-info a[href^="tel:"] { white-space: nowrap; }
@media (max-width: 760px) {
  .assistenza-chiama .wp-block-button__link { padding: 18px 20px; font-size: 17px; }
  .intro-pagina .wp-block-button__link, .section .narrow .wp-block-button__link { white-space: normal; }
}

/* menu a tutto schermo: con molte voci su uno schermo basso deve poter scorrere */
.menu-panel { overflow-y: auto; justify-content: safe center; padding: 72px 16px 40px; }

/* testata: con tre voci per lato lo spazio fra le voci si stringe sugli schermi medi */
@media (max-width: 1280px) {
  .site-header .wp-block-navigation__container, .site-header .nav--right { gap: 28px; }
}
@media (min-width: 1021px) and (max-width: 1180px) {
  .site-header .wp-block-navigation, .site-header .nav a { font-size: 15px; }
  .site-header .logo svg { height: 32px; }
  .site-header .wp-block-navigation__container, .site-header .nav--right { gap: 22px; flex-wrap: nowrap; }
}

/* ---------- Schermi piccoli ---------- */
@media (max-width: 1020px) {
  .site-header .nav--right .wp-block-navigation { display: none; }
}
@media (max-width: 760px) {
  .tile p.arrow { display: inline-block; }
  .section--prima, .section--testo, .section--solo { padding-top: calc(var(--header-h) + 40px); }
}

/* Testata su tablet e telefono: il blocco Navigazione di WordPress impone display:flex e
   batteva la regola del prototipo → il pulsante menu finiva sotto il logo. */
@media (max-width: 1020px) {
  .site-header .bar > .nav:not(.nav--right) { display: none !important; }
  .site-header .nav--right > :not(.burger) { display: none !important; }
  .site-header .nav--right { display: flex !important; justify-content: flex-end; }
}

/* Tessere delle motorizzazioni CAME: foto orizzontali, il motore deve restare in vista */
.tiles--motori .tile { aspect-ratio: 16 / 11; }
.tiles--motori .tile-body { padding-top: 48px; }
.tiles--motori .tile-body h3 { font-size: clamp(17px, 1.5vw, 21px); }
@media (max-width: 700px) { .tiles--motori { grid-template-columns: 1fr; } }

/* Chi siamo: la storia in quattro blocchi */
.storia-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 48px; }
.storia-blocco h3 { margin: 0 0 10px; font-size: clamp(19px, 1.7vw, 23px); }
.storia-blocco p { margin: 0; line-height: 1.65; }
@media (max-width: 800px) { .storia-griglia { grid-template-columns: 1fr; } }

/* Logo CAME nel riquadro partner (uso autorizzato: installatori CAME) */
.partner-badge .partner-logo { flex: 0 0 150px; display: grid; place-items: center; padding: 6px 10px; }
.partner-badge .partner-logo img { width: 130px; height: auto; display: block; }
@media (max-width: 700px) { .partner-badge .partner-logo { flex-basis: auto; place-items: start; padding: 0 0 4px; } }

/* Contatti: mappa Google caricata solo su richiesta */
.mappa-sede { position: relative; aspect-ratio: 16/7; border-radius: var(--radius, 6px); overflow: hidden; margin-top: 32px;
  background: linear-gradient(135deg, #e9ecef 0%, #dde2e6 100%); }
.mappa-sede::before { content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(#cfd5da 1px, transparent 1px), linear-gradient(90deg, #cfd5da 1px, transparent 1px); background-size: 48px 48px; }
.mappa-copertina { position: relative; height: 100%; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 20px; text-align: center; }
.mappa-indirizzo { margin: 0; font-size: 17px; line-height: 1.5; color: var(--wp--preset--color--ink, #2b2f33); }
.mappa-nota { margin: 0; font-size: 13px; color: var(--wp--preset--color--ink-soft, #5d646b); max-width: 460px; }
.mappa-sede iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 700px) { .mappa-sede { aspect-ratio: 4/5; } }