/* StudioBarbatti: only the components that Progelec does not have. Everything else is shared. */

/* Home hero: "Il metodo" panel in place of the project slider (manual, tavola 26). */
.method-panel{align-self:end;padding:18px 20px 20px}
.method-panel .showcase-top{justify-content:flex-start}
.method-panel .label{color:#e5c56c}
.method-steps{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.method-steps li{display:grid;grid-template-columns:28px 1fr;align-items:baseline;color:#fff;font-size:17px;line-height:1.3;padding-bottom:12px;border-bottom:1px solid rgba(229,197,108,.22)}
.method-steps li:last-child{border-bottom:0;padding-bottom:0}
.method-steps small{color:#e5c56c;font-size:11px;letter-spacing:.06em}
.method-note{margin:16px 0 0;color:rgba(255,255,255,.72);font-size:12px}

/* Brand architecture cards on the Studio page. */
.studio-ambiti .role-comparison{margin-top:18px}
.role-comparison>a.role-link{display:block;color:inherit;text-decoration:none!important}
.role-comparison>a.role-link>article{height:100%}
.role-comparison .label{display:block;margin-bottom:6px}

/* Progelec signature in the footer, mirroring Progelec's "Una realtà StudioBarbatti". */
footer .progelec-link span{font-weight:300}
footer .progelec-link strong{font-weight:400}

/* Course modality boxes below the service list. */
#formazione .services+.role-comparison{margin-top:22px}

/* Logo: the symbol matches Progelec's exactly (35 px header, 28 px footer). The canvas reproduces
   Progelec's vertical layout (symbol 75/95 of the height, 4/95 from the top); widths are Progelec's
   140/128/110 px converted to this canvas ratio. */




/* Studio page: keep the page title (the bio rules hide it on Progelec's biography page). */
body.sb-studio main .page-heading{display:block!important}
body.sb-studio main .team-bio{padding-top:24px}
/* Brand cards: the Progelec card keeps the text colours of a normal box. */
.role-comparison>a.role-link h3{color:var(--ink,#302d27)}
.role-comparison>a.role-link p{color:var(--ink,#302d27)}
.role-comparison>a.role-link .label{color:#82621f}

/* Box mai troppo strette (StudioBarbatti · Progelec): 4 colonne solo con spazio sufficiente,
   poi 2, poi 1. Soglie misurate sulla resa reale (zoom 150%): ogni box resta ≥ ~250 px. */
@media (max-width: 1279px) {
  body main#main .ambiti-grid,
  body main#main .steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body main#main .network-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 1023px) {
  body main#main .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 850px) {
  body main#main .network-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
  body main#main .ambiti-grid,
  body main#main .steps,
  body main#main .network-grid,
  body main#main .project-grid,
  body main#main .home-entry,
  body main#main .role-comparison,
  body main#main .pv-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Light phrases inside headings (e.g. "Per l’ingegneria elettrica,"). */
body .sb-light{font-weight:300!important}

/* Formazione: MPO collaboration highlight, logo on a light tile inside the dark panel. */
.sb-highlight{margin-top:8px;margin-bottom:8px}
.sb-highlight .contact-grid{align-items:center}
.sb-highlight .sb-partner-logo{background:transparent;padding:8px;display:flex;align-items:center;justify-content:center;max-width:340px;justify-self:end;width:100%}
.sb-highlight .sb-partner-logo img{width:100%;height:auto;display:block}
.sb-highlight p{max-width:620px}
@media(max-width:850px){.sb-highlight .sb-partner-logo{justify-self:start;max-width:260px}}

/* MPO highlight: the same dark panel as the Contatti page (rules mirrored from #contatti). */
:is(#mpo,#polylog) .contact-network-card {position:relative;isolation:isolate;overflow:hidden;box-sizing:border-box;border-radius:18px;border:1px solid rgba(255,255,255,.22);padding:28px;gap:32px;align-items:start;background:radial-gradient(at 78% 28%,rgba(201,166,82,.22),transparent 42%),linear-gradient(125deg,#282722 0%,#34312b 48%,#1d2021 100%);color:#fff;grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
:is(#mpo,#polylog) .contact-network-card>canvas.gold-network {z-index:0 !important;}
:is(#mpo,#polylog) .contact-network-card>div,:is(#mpo,#polylog) .contact-network-card>address {z-index:1;position:relative;}
:is(#mpo,#polylog) .contact-network-card h2,:is(#mpo,#polylog) .contact-network-card p {color:#fff !important;}
:is(#mpo,#polylog) .contact-network-card .label,:is(#mpo,#polylog) .contact-network-card a {color:#edcf80 !important;}
:is(#mpo,#polylog) .contact-network-card a:hover,:is(#mpo,#polylog) .contact-network-card a:focus-visible {color:#fff !important;background:transparent !important;}
:is(#mpo,#polylog) .contact-network-card address {background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important;min-width:0;font-style:normal;display:grid;gap:12px;}
:is(#mpo,#polylog) .contact-network-card address a {font-size:clamp(18px,2vw,24px);overflow-wrap:anywhere;}
:is(#mpo,#polylog) .contact-network-card address p {margin-bottom:0;}
@media (max-width:600px){:is(#mpo,#polylog) .contact-network-card {grid-template-columns:1fr;padding:22px;gap:24px;}}
:is(#mpo,#polylog).contact-panel-section{padding-top:8px!important;padding-bottom:24px!important}:is(#mpo,#polylog) .contact-network-card{align-items:center}:is(#mpo,#polylog) .sb-partner-logo{position:relative;z-index:1}

/* News cards: images always shown whole (logos and photos are never cropped). */
.news-card .news-card-media img,.news-card .wp-block-post-featured-image img{object-fit:contain!important;background:transparent!important}

/* Boxes keep a margin from the footer (same 72 px as Progelec's Novità). */
body main#main > .wp-block-query:last-child{margin-bottom:72px}
/* News cards: text starts at the top of the box, never centred against the image. */
.news-card,.news-card.is-layout-flex,.news-card.is-layout-grid{align-items:flex-start!important}
.news-card .news-card-content{align-self:flex-start!important}

/* Article "StudioBarbatti e Progelec Sagl…": title mainly light; brand halves keep Light/Regular. */
body.postid-99 main .page-heading h1{font-weight:300!important}

/* Home hero: eProntec, the brand of the prontuari, large and centred above the "Il metodo" box. */
.sb-hero-side{justify-self:end;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;gap:28px;min-width:0}
.sb-hero-side .method-panel{align-self:stretch!important;justify-self:auto!important;margin:0!important;width:auto!important;max-width:none!important}
.sb-eprontec{align-self:center;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;text-decoration:none!important;color:#fff!important;padding-top:6px}
.sb-eprontec .label{color:#e5c56c!important}
.sb-eprontec .sb-eprontec-name{font-family:"Myriad Pro",Arial,sans-serif!important;font-weight:400!important;font-size:56px;line-height:1;letter-spacing:-.015em;color:#fff!important}
.sb-eprontec:hover .sb-eprontec-name,.sb-eprontec:focus-visible .sb-eprontec-name{color:#e5c56c!important}
@media(max-width:1050px){.sb-eprontec .sb-eprontec-name{font-size:46px}}
@media(max-width:600px){.sb-hero-side{justify-self:stretch;gap:20px}.sb-eprontec .sb-eprontec-name{font-size:40px}}

/* Article "StudioBarbatti e Progelec Sagl…": title mainly light; brand halves keep Light/Regular. */
body.postid-99 main .page-heading h1{font-weight:300!important}


/* Studio: interactive brand hierarchy (StudioBarbatti → Progelec | Polylog · eProntec · Formazione · Consulenza). */
.sb-tree{--gap:24px;--col:calc((100% - var(--gap)) / 4);margin:30px 0 8px}
.sb-tree-root{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.sb-tree-root img{width:320px;max-width:80%;height:auto;display:block}
.sb-tree-lines{position:relative;height:64px;margin-top:4px}
.sb-tree-lines .ln{position:absolute;background:#d8ccb3;transition:background-color .22s ease}
.sb-tree-lines .ln-stem{left:50%;top:0;width:1px;height:50%}
.sb-tree-lines .ln-bar-l{left:var(--col);right:50%;top:50%;height:1px}
.sb-tree-lines .ln-bar-r{left:50%;right:var(--col);top:50%;height:1px}
.sb-tree-lines .ln-l{left:var(--col);top:50%;width:1px;height:50%}
.sb-tree-lines .ln-r{right:var(--col);top:50%;width:1px;height:50%}
.sb-tree[data-active] .ln-stem{background:#d8ccb3}
.sb-tree[data-active="progelec"] :is(.ln-stem,.ln-bar-l,.ln-l),
.sb-tree[data-active="studiobarbatti"] :is(.ln-stem,.ln-bar-r,.ln-r){background:#82621f}
.sb-tree-level{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start}
.sb-tree-group{border:1px solid #d8ccb3;border-radius:22px;padding:16px;transition:border-color .22s ease}
.sb-tree[data-active="studiobarbatti"] .sb-tree-group{border-color:#82621f}
.sb-tree-group-label{display:block;text-align:center;margin:2px 0 12px}
.sb-tree-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sb-node{background:#fffdf7;border:1px solid #d8ccb3;border-radius:18px;transition:background-color .22s ease,border-color .22s ease,color .22s ease}
.sb-node-head{all:unset;box-sizing:border-box;display:block;width:100%;padding:22px 52px 20px 22px;position:relative;cursor:pointer}
.sb-node-sub .sb-node-head{padding:18px 46px 16px 18px}
.sb-node h3{margin:0 0 8px;color:#82621f;font-size:20px!important;font-weight:400!important}
.sb-node p{margin:0 0 12px;color:#302d27;font-size:16px!important;line-height:1.45!important}
.sb-node-sub p{font-size:15px!important}
.sb-node .label{color:#82621f}
.sb-node-toggle{position:absolute;top:18px;right:18px;width:26px;height:26px;border-radius:50%;border:1px solid #d8ccb3;display:grid;place-items:center;color:#82621f;font-size:16px;line-height:1;transition:transform .22s ease}
.sb-node-more{display:none;padding:0 22px 20px}
.sb-node-more p{color:#fff!important;font-size:15px!important}
.sb-node.is-open .sb-node-more{display:block}
.sb-node.is-open .sb-node-toggle{transform:rotate(45deg)}
.sb-node:is(:hover,:focus-within,.is-open){background:#39342a;border-color:#39342a}
.sb-node:is(:hover,:focus-within,.is-open) :is(h3,p){color:#fff!important}
.sb-node:is(:hover,:focus-within,.is-open) .label,.sb-node:is(:hover,:focus-within,.is-open) a{color:#e5c56c!important}
.sb-node:is(:hover,:focus-within,.is-open) .sb-node-toggle{border-color:rgba(229,197,108,.6);color:#e5c56c}
.sb-node-head:focus-visible{outline:3px solid #82621f;outline-offset:3px;border-radius:18px}
@media(max-width:850px){.sb-tree-grid{grid-template-columns:1fr}}
@media(max-width:700px){
  .sb-tree-lines{height:28px}.sb-tree-lines .ln:not(.ln-stem){display:none}.sb-tree-lines .ln-stem{height:100%}
  .sb-tree-level{grid-template-columns:1fr;gap:16px}
}
@media(prefers-reduced-motion:reduce){.sb-tree *{transition:none!important}}

/* Two branches of equal height. */
.sb-tree-level{align-items:stretch}.sb-tree-col{display:flex}.sb-tree-col>.sb-node{flex:1}
@media(max-width:700px){.sb-tree-col{display:block}}

/* Tree nodes as highlight boxes (same dark panel + gold mesh as MPO, Polylog and Novità). */
.sb-tree .sb-node{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(at 78% 28%,rgba(201,166,82,.22),transparent 42%),linear-gradient(125deg,#282722 0%,#34312b 48%,#1d2021 100%);border-color:rgba(255,255,255,.22);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.sb-tree .sb-node::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.22;background-image:radial-gradient(circle,rgba(230,201,119,.72) 1.2px,transparent 1.6px),linear-gradient(90deg,rgba(230,201,119,.12) 1px,transparent 1px),linear-gradient(rgba(230,201,119,.12) 1px,transparent 1px);background-size:34px 34px;transition:opacity .3s ease}
.sb-tree .sb-node :is(h3,p){color:#fff!important}
.sb-tree .sb-node .label,.sb-tree .sb-node a{color:#e5c56c!important}
.sb-tree .sb-node .sb-node-toggle{border-color:rgba(229,197,108,.6);color:#e5c56c}
.sb-tree .sb-node:is(:hover,:focus-within,.is-open){background:radial-gradient(at 78% 28%,rgba(201,166,82,.22),transparent 42%),linear-gradient(125deg,#282722 0%,#34312b 48%,#1d2021 100%);border-color:rgba(230,201,119,.72);box-shadow:0 18px 40px rgba(28,25,20,.18);transform:translateY(-2px)}
.sb-tree .sb-node:is(:hover,:focus-within,.is-open)::before{opacity:.6}
.sb-tree .sb-node-head:focus-visible{outline-color:#e5c56c}
@media(prefers-reduced-motion:reduce){.sb-tree .sb-node{transform:none!important}}

/* Tree nodes use the animated gold mesh (canvas from gold-network.js) instead of the static grid. */
.sb-tree .sb-node::before{display:none}
.sb-tree .sb-node>canvas.gold-network{position:absolute!important;inset:0;width:100%;height:100%;z-index:0!important;pointer-events:none;opacity:.56;transition:opacity .25s ease}
.sb-tree .sb-node:is(:hover,:focus-within,.is-open)>canvas.gold-network{opacity:1}

/* Both branches lit when both boxes are open. */
.sb-tree[data-active="both"] :is(.ln-stem,.ln-bar-l,.ln-l,.ln-bar-r,.ln-r){background:#82621f}

/* Foto affiancate al testo: sempre allineate all'inizio del testo (StudioBarbatti · Progelec). */
.team-bio-layout,.team-card,.home-entry .entry-studio{align-items:start!important}
.team-bio-layout>.team-bio-portrait,.team-card img,.home-entry .entry-studio>img{align-self:start!important}
/* Box scure: niente fondo dorato squadrato al passaggio del mouse, solo il reticolo dinamico. */
.news-card::before{display:none!important}

/* Tree boxes: the whole-box button never takes the generic gold button hover; only the mesh reacts. */
body .sb-tree .sb-node-head,body .sb-tree .sb-node-head:is(:hover,:focus,:active){background:transparent!important;background-color:transparent!important;background-image:none!important;box-shadow:none!important;border:0!important;color:inherit!important;transform:none!important}

/* Active branch: gold and thicker (2 px), smoothly. */
.sb-tree-lines .ln{transition:background-color .22s ease,transform .22s ease}
.sb-tree[data-active="progelec"] :is(.ln-stem,.ln-l),.sb-tree[data-active="studiobarbatti"] :is(.ln-stem,.ln-r),.sb-tree[data-active="both"] :is(.ln-stem,.ln-l,.ln-r){transform:scaleX(2.4)}
.sb-tree[data-active="progelec"] .ln-bar-l,.sb-tree[data-active="studiobarbatti"] .ln-bar-r,.sb-tree[data-active="both"] :is(.ln-bar-l,.ln-bar-r){transform:scaleY(2.4)}

/* No lift on hover: the mesh stays exactly under the pointer (open or closed). */
.sb-tree .sb-node:is(:hover,:focus-within,.is-open){transform:none!important}

/* Home hero between 601 and 1199 px: one column, so the title keeps 3 full-size lines;
   eProntec and "Il metodo" sit side by side below the text. */
@media(min-width:601px) and (max-width:1199px){
  .home .home-stage{grid-template-columns:1fr!important}
  .home .sb-hero-side{justify-self:stretch;flex-direction:row;align-items:center;justify-content:space-between;gap:32px}
  .home .sb-hero-side .method-panel{flex:1;max-width:520px!important}
}

/* Service with image (Supporto · Assistenza da remoto): text left, photo right; stacked on small screens. */
.sb-service-media{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:start}
.sb-service-figure{margin:0}
.sb-service-figure img{display:block;width:100%;height:auto;border-radius:16px}
@media(max-width:850px){.sb-service-media{grid-template-columns:1fr;gap:16px}}

/* Logos with Progelec's proportions (same symbol height, same lettering size, same baseline):
   the StudioBarbatti files reproduce the Progelec canvas, so the same heights give the same result. */
header .brand-image img{width:auto!important;height:44.333px!important;max-height:none!important;max-width:none!important}
@media(max-width:600px){header .brand-image img{height:40.531px!important}}
footer .footer-logo{width:auto!important;height:31.167px!important;max-height:none!important;max-width:none!important}