/* Mae Home · articoli e blog (modelli dinamici). Si carica dopo base.css.
   Il testo degli articoli resta quello di WordPress: qui si dà il ritmo al corpo (.prosa) senza toccare
   le infografiche, che hanno i loro stili in linea. Le regole del corpo valgono sui figli diretti. */

/* le infografiche degli articoli usano Poppins 700 e 800: si scaricano solo se servono */
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/poppins-700.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('../assets/fonts/poppins-800.woff2') format('woff2')}

/* ---------- Apertura dell'articolo ---------- */
.ap--art .ap__t{max-width:22em;font-size:clamp(32px,8vw,44px);line-height:1.06;letter-spacing:-.035em}
@media (min-width:1024px){.ap--art .ap__t{font-size:clamp(44px,3.9vw,64px)}}
.ap--art{padding-bottom:0}

/* ---------- Corpo: indice a sinistra, testo al centro ---------- */
.art__corpo{background:var(--carta);padding:clamp(48px,6vw,96px) 0 var(--sec)}
.art__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:start}
.toc{grid-column:1/span 3;grid-row:1/span 2;align-self:start;position:sticky;top:calc(var(--hdr) + 32px);max-width:280px}
.prosa{grid-column:4/span 7;grid-row:1;min-width:0;max-width:700px}
.art__fine{grid-column:4/span 7;grid-row:2;max-width:700px}
@media (max-width:1023px){
  .toc{grid-column:1/-1;grid-row:auto;position:static;max-width:none;margin-bottom:40px}
  .prosa,.art__fine{grid-column:1/-1;grid-row:auto}
}

/* indice «In questa pagina»: su computer sempre aperto, su telefono si apre al tocco */
.toc__d{border-top:1px solid var(--linea-forte)}
.toc__s{display:flex;align-items:baseline;gap:12px;min-height:56px;padding:16px 0 14px;list-style:none;cursor:pointer;font-size:16px;font-weight:600;line-height:1.35;color:var(--inchiostro)}
.toc__s::-webkit-details-marker{display:none}
.toc__ap{font-weight:500;color:var(--testo-2)}
.toc__chiudi,.toc__d[open] .toc__apri{display:none}
.toc__d[open] .toc__chiudi{display:inline}
.toc__pm{position:relative;width:20px;height:20px;margin-left:auto;align-self:center;flex:none}
.toc__pm::before,.toc__pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;transition:transform .5s var(--ease)}
.toc__pm::after{transform:rotate(90deg)}
.toc__d[open] .toc__pm::after{transform:rotate(0deg)}
.toc__box{position:relative;max-height:calc(100svh - var(--hdr) - 150px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--linea-forte) transparent}
.toc__l{list-style:none;margin:0;padding:2px 0 6px;border-left:1px solid var(--linea)}
.toc__l a{display:block;padding:7px 4px 7px 18px;font-size:16px;font-weight:500;line-height:1.4;color:var(--testo-2);text-decoration:none;transition:color .3s}
.toc__l a:hover,.toc__l a[aria-current]{color:var(--inchiostro)}
.toc__mark{position:absolute;left:0;top:0;width:2px;height:1px;background:var(--rovere);opacity:0;transform-origin:0 0;transition:transform .55s var(--ease),opacity .3s}
@media (min-width:1024px){
  .toc__s{cursor:default}
  .toc__pm,.toc__ap{display:none}
}
/* fra 1024 e 1279 px «Parla con Antonio» coprirebbe la fine delle righe: restano telefono e pulsante dell'header */
@media (min-width:1024px) and (max-width:1279px){body:has(.art__corpo) .ask{display:none}}
@media (max-width:1023px){
  .toc__d{border-bottom:1px solid var(--linea-forte)}
  .toc__box{max-height:none;overflow:visible}
  .toc__l{margin-bottom:14px}
}

/* invito sotto l'indice, solo su computer (su telefono c'è la barra in basso): quieto, non interrompe la lettura */
.toc__inv{display:none}
@media (min-width:1024px) and (min-height:760px){
  .toc__box{max-height:calc(100svh - var(--hdr) - 330px)}
  .toc__inv{display:block;margin-top:24px;padding:20px 20px 12px;background:var(--bianco);border:1px solid var(--linea)}
  .toc__inv-t{font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--inchiostro);text-wrap:balance}
  .toc__inv .more{margin-top:4px;gap:10px;line-height:1.3}
}

/* ---------- Il testo dell'articolo ---------- */
.prosa{font-size:18px;line-height:1.75;color:var(--testo);overflow-wrap:break-word}
.prosa>*{margin-top:0;margin-bottom:0}
.prosa>*+*{margin-top:1.15em}
.prosa>h2{margin-top:2.3em;padding-top:28px;border-top:1px solid var(--linea-forte);font-weight:300;font-size:clamp(28px,2.6vw,40px);line-height:1.12;letter-spacing:-.03em;color:var(--inchiostro);text-wrap:balance;scroll-margin-top:calc(var(--hdr) + 16px)}
.prosa>h2:first-child{margin-top:0}
.prosa>h2+*{margin-top:.95em}
.prosa>h3{margin-top:1.9em;font-size:clamp(20px,1.6vw,23px);font-weight:600;letter-spacing:-.012em;line-height:1.3;color:var(--inchiostro);scroll-margin-top:calc(var(--hdr) + 16px)}
.prosa>h3+*{margin-top:.5em}
.prosa>h4{margin-top:1.6em;font-size:19px;font-weight:600;color:var(--inchiostro)}
.prosa strong,.prosa b{font-weight:600;color:var(--inchiostro)}
.prosa em,.prosa i{font-style:italic}
.prosa a{color:var(--inchiostro);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--linea-forte);transition:text-decoration-color .3s}
.prosa a:hover{text-decoration-color:currentColor}
.prosa>ul,.prosa>ol{list-style:none;padding:0}
.prosa>ul>li,.prosa>ol>li{position:relative;padding-left:32px}
.prosa>ul>li+li,.prosa>ol>li+li{margin-top:.55em}
.prosa>ul>li::before{content:"";position:absolute;left:4px;top:.86em;width:14px;height:1px;background:var(--rovere)}
.prosa>ol{counter-reset:prosa}
.prosa>ol>li{counter-increment:prosa}
.prosa>ol>li::before{content:counter(prosa);position:absolute;left:0;top:0;font-weight:600;color:var(--rovere-ink);font-variant-numeric:tabular-nums}
.prosa>blockquote{margin:1.6em 0;padding:2px 0 2px 24px;border-left:2px solid var(--rovere);font-weight:300;font-size:clamp(21px,1.8vw,26px);line-height:1.4;letter-spacing:-.015em;color:var(--inchiostro)}
.prosa>hr{height:1px;margin:2.4em 0;border:0;background:var(--linea-forte)}
.prosa img,.prosa video,.prosa iframe{max-width:100%}
.prosa img{height:auto}
.prosa figure{margin-left:0;margin-right:0}
.prosa figure img{display:block}
.prosa figcaption{margin-top:10px;font-size:16px;font-weight:500;line-height:1.5;color:var(--testo-2)}
.prosa table{max-width:100%;border-collapse:collapse}
.prosa>table{display:block;overflow-x:auto}
.prosa>div,.prosa>figure,.prosa>p{max-width:100%}
/* le infografiche hanno i loro margini in linea: non si toccano */

/* foto dei cantieri (classi di maehome-prima-dopo): verticali strette, coppie, didascalie, reel */
.prosa>figure{margin-top:2em}
.prosa .mh-vert{width:-moz-fit-content;width:fit-content;max-width:100%}
.prosa .mh-vert img{width:auto;max-width:100%;max-height:620px}
.prosa .mh-vert-big img{max-height:760px}
.prosa>figure:not(.mh-vert) img{width:100%}
.prosa .mh-didascalia{display:flex;align-items:baseline;gap:12px;font-size:16px;font-weight:500;line-height:1.5;color:var(--testo-2)}
.prosa .mh-didascalia::before{content:"";flex:none;width:20px;height:1px;background:currentColor;opacity:.7;transform:translateY(-.32em)}
.prosa>figure+.mh-didascalia,.prosa>.mh-coppia+.mh-didascalia,.prosa>.mh-ba+.mh-didascalia{margin-top:14px}
.prosa>.mh-coppia{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:2em}
.mh-coppia figure{margin:0;min-width:0}
.prosa .mh-coppia .mh-vert{width:auto}
.prosa .mh-coppia img{width:100%;max-height:none;aspect-ratio:3/4;object-fit:cover;background:#DDE2E5}
.mh-coppia figcaption{margin-top:10px;font-size:16px;font-weight:600;color:var(--inchiostro)}
/* i reel di Instagram: due per riga su computer, uno su telefono (embed.js mette min-width:326px in linea: si toglie) */
.prosa>.mh-reel{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:1.6em}
.mh-reel>*{width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important}

/* prima/dopo trascinabile (stesso markup di prima, ridisegnato come quello della home) */
.prosa>.mh-ba{position:relative;max-width:560px;margin-top:2em;line-height:0;overflow:hidden;background:#D8DDE0;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.mh-ba>img{display:block;width:100%;height:auto}
.mh-ba .mh-ba-dopo{position:absolute;inset:0;clip-path:inset(0 50% 0 0)}
.mh-ba .mh-ba-dopo img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.mh-ba-linea{position:absolute;top:0;bottom:0;width:0;z-index:2;pointer-events:none}
.mh-ba-linea::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.12)}
.mh-ba-linea::after{content:"";position:absolute;top:50%;left:0;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5' fill='none' stroke='%233C5366' stroke-width='1.6'/%3E%3C/svg%3E") center/24px no-repeat;box-shadow:0 10px 30px -8px rgba(26,40,52,.45)}
.mh-ba.is-js .mh-ba-linea{left:0!important}
.mh-ba-tag{position:absolute;top:14px;bottom:auto;z-index:2;display:inline-block;padding:7px 12px 8px;font:600 16px/1 var(--f);letter-spacing:.01em;text-transform:lowercase;color:#fff;background:rgba(26,26,26,.66);pointer-events:none}
.mh-ba-tag::first-letter{text-transform:uppercase}
.mh-ba-tag.p{left:14px}.mh-ba-tag.d{right:14px}
.mh-ba input[type=range]{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent}
.mh-ba:has(input:focus-visible){outline:2px solid var(--petrolio);outline-offset:3px}

/* ---------- Fine articolo: aggiornamento e Antonio ---------- */
.art__fine{margin-top:clamp(56px,6vw,88px)}
.art__firma{margin:0 0 28px}
.invito--art{margin:0 0 clamp(48px,5vw,72px)}
.invito--art .invito__t{font-size:clamp(26px,2.4vw,36px)}
/* nella colonna del testo il riquadro sta su una colonna sola: testo, poi le tre strade una sotto l'altra */
.invito--art{grid-template-columns:minmax(0,1fr)}
.invito--art .invito__act{border-left:0;border-top:1px solid var(--linea-forte)}
.autore{display:grid;grid-template-columns:104px minmax(0,1fr);gap:20px 28px;align-items:start;padding-top:32px;border-top:1px solid var(--linea-forte)}
.autore__face{position:relative;width:104px;height:104px}
.autore__face img{position:absolute;left:8px;top:8px;width:88px;height:88px;border-radius:50%;object-fit:cover;background:#DDE2E5}
.autore__ring{position:absolute;inset:0;width:104px;height:104px;transform:rotate(-90deg);overflow:visible}
.autore__ring circle{fill:none;stroke:var(--rovere);stroke-width:1.5}
.autore__k{margin-bottom:8px;font-size:16px;font-weight:600;line-height:1.35;letter-spacing:.11em;text-transform:uppercase;color:var(--rovere-ink)}
.autore__t{font-size:22px;font-weight:600;letter-spacing:-.015em;line-height:1.3;color:var(--inchiostro)}
.autore__r{font-size:17px;font-weight:500;letter-spacing:0;color:var(--testo-2)}
.autore__d{margin-top:14px;font-size:18px;line-height:1.65;max-width:34em}
.autore__act{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:20px}
@media (max-width:599px){.autore{grid-template-columns:1fr}.autore__act .btn--line{width:100%}}

/* ---------- Schede degli articoli («Leggi anche» e blog) ---------- */
.rel__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px;margin-bottom:clamp(40px,4.4vw,64px)}
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(48px,4.4vw,64px) var(--col-gap)}
.card{position:relative;min-width:0}
.card__frame{margin-bottom:20px}
.card__k{margin-bottom:10px;font-size:16px;font-weight:500;line-height:1.4;color:var(--testo-2)}
.card__cat{font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--rovere-ink)}
.card__e{margin-top:10px;font-size:17px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card__go{margin-top:10px;min-height:32px}
.card:hover .card__go .ul{background-size:100% 1px,100% 1px;background-position:0 100%,0 100%}
.card:hover .card__go .i{transform:translateX(5px)}
.card__t{font-size:clamp(21px,1.6vw,24px);font-weight:500;line-height:1.3;letter-spacing:-.015em;color:var(--inchiostro);text-wrap:pretty}
.card__a{color:inherit;text-decoration:none}
.card__a::after{content:"";position:absolute;inset:0;z-index:1}
.card__a:focus-visible{outline:none}
.card__a:focus-visible::after{outline:2px solid var(--petrolio);outline-offset:6px}
/* le copertine di oggi hanno 2-3 righe nere in alto e in basso (nel file): un filo d'ingrandimento le tiene fuori dalla cornice */
.ap__frame .frame__in img,.card__frame .frame__in img,.feat__frame .frame__in img{transform:scale(1.02)}
.card:hover .frame__in img,.feat:hover .frame__in img{transform:scale(1.055)}
.card__d{margin-top:10px;font-size:16px;line-height:1.5;color:var(--testo-2)}
@media (max-width:1023px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.cards{grid-template-columns:minmax(0,1fr)}}

/* ---------- Blog: filtro per argomento (componente .riga in base.css), articolo in evidenza, griglia ---------- */
.ap--blog{padding-bottom:0}
.ap--blog .ap__lead{max-width:34em}

.blog{padding-top:clamp(56px,6vw,96px)}
.feat:last-child{margin-bottom:0}
.feat{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:28px;align-items:center;margin-bottom:clamp(72px,8vw,128px)}
.feat__frame{grid-column:1/span 7;aspect-ratio:3/2}
.feat__txt{grid-column:8/-1}
.feat__k{display:flex;align-items:center;gap:14px;margin-bottom:20px;font-size:16px;font-weight:600;line-height:1.35;letter-spacing:.11em;text-transform:uppercase;color:var(--rovere-ink)}
.feat__rule{width:40px;height:1px;flex:none;background:var(--rovere)}
.feat__t{font-weight:300;font-size:clamp(28px,2.7vw,42px);line-height:1.1;letter-spacing:-.032em;color:var(--inchiostro);text-wrap:balance}
.feat__d{margin-top:18px;font-size:18px;line-height:1.65}
.feat .card__d{margin-top:16px}
.feat__go{margin-top:18px}
.feat:hover .feat__go .ul{background-size:100% 1px,100% 1px;background-position:0 100%,0 100%}
.feat:hover .feat__go .i{transform:translateX(5px)}
@media (max-width:1023px){.feat__frame,.feat__txt{grid-column:1/-1}}
@media (max-width:599px){.feat__k{letter-spacing:.06em}}
.blog .sr{font-weight:400}

/* percorso dell'articolo: Home › Blog › Categoria › Titolo; su telefono solo «‹ Blog» */
.bc__qui span{display:block;max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:599px){
  .bc--art li{display:none}
  .bc--art li.bc__su{display:flex}
  .bc--art li.bc__su::before{content:"‹"}
}
.ap__cat{font-weight:600;color:var(--inchiostro)}
/* blog: la riga della categoria aperta, le pagine */
.blog__riga{margin-top:20px;max-width:40em;font-size:17px;line-height:1.55;color:var(--testo-2)}
.pag{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:clamp(56px,6vw,88px);padding-top:24px;border-top:1px solid var(--linea-forte)}
.pag__prec .i{transform:scaleX(-1)}
.pag__prec:hover .i{transform:scaleX(-1) translateX(5px)}
.pag__succ{margin-left:auto}