/* Emerald — composizione delle pagine del sito.
   Solo token di tokens/*.css e classi em- di components/components.css;
   qui stanno le disposizioni di pagina che il design system non copre. */

/* ---------- Superfici del browser ---------- */
html{scrollbar-color:var(--emerald-700) var(--ink);scroll-padding-top:calc(var(--header-h) + var(--space-6))}
html.is-menu-open{overflow:hidden}
a,button{-webkit-tap-highlight-color:transparent}

.s-skip{position:absolute;display:inline-flex;align-items:center;min-height:44px;left:var(--space-5);top:var(--space-5);z-index:calc(var(--z-menu) + 1);padding:var(--space-4) var(--space-5);background:var(--accent);color:var(--ink);font-family:var(--font-tech);font-size:var(--type-nav);font-weight:600;letter-spacing:var(--track-nav);text-transform:uppercase;transform:translateY(-200%)}
.s-skip:focus{transform:none;color:var(--ink)}

/* ---------- Apertura: immagine che si allarga allo scorrimento (stesso gesto del carosello in homepage) ---------- */
.s-visual{padding-bottom:var(--space-10)}
.s-visual .em-feat__media img{object-position:center 40%}

/* ---------- Sequenza dei servizi ---------- */
.s-svc{display:grid;grid-template-columns:86px minmax(0,1fr);padding:var(--space-10) 0 var(--space-11);border-top:1px solid var(--line)}
.s-svc:last-child{border-bottom:1px solid var(--line)}
.s-svc .em-service__index{padding-top:14px}
.s-svc__pair{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto 1fr;grid-template-areas:"lead aside" "body aside";gap:var(--space-6) var(--grid-gap-l);align-items:start}
.s-svc__pair--wide{grid-template-rows:auto auto auto;grid-template-areas:"lead ." "body ." "wide wide"}
.s-svc__wide{grid-area:wide;margin-top:var(--space-5)}
.s-svc__wide .s-plat__row{grid-template-columns:minmax(0,3fr) minmax(0,9fr)}
.s-svc__lead-box{grid-area:lead;display:flex;flex-direction:column;gap:var(--space-5);max-width:var(--measure-text)}
.s-svc__pair + .s-svc__pair{margin-top:var(--space-10);padding-top:var(--space-10);border-top:1px solid var(--line)}
.s-svc__text{grid-area:body;display:flex;flex-direction:column;gap:var(--space-6);max-width:var(--measure-text)}
.s-svc__lead{text-wrap:balance}
.s-svc__sub{font-family:var(--font-tech);font-size:var(--type-eyebrow);font-weight:600;letter-spacing:var(--track-eyebrow);text-transform:uppercase;line-height:1.3;color:var(--text-strong);margin:0}
.s-svc__aside{grid-area:aside;display:flex;flex-direction:column;gap:var(--space-9)}
.s-svc__label{font-family:var(--font-tech);font-size:var(--type-label);font-weight:600;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-subtle);margin:0 0 var(--space-5)}
.s-svc__aside .em-service__list{grid-template-columns:1fr}
.s-svc__aside .em-service__list li{padding:var(--space-5) 0 0}

/* Prova: il numero che la certifica, poi la frase della fonte */
.s-proof{margin:0;padding-top:var(--space-7);border-top:1px solid var(--line-accent)}
.s-proof__value{display:block;font-family:var(--font-tech);font-weight:600;font-size:var(--type-stat);line-height:1;font-variant-numeric:tabular-nums;color:var(--text-strong);margin:0}
.s-proof__label{display:block}
/* su mobile la regola .em-stat__label di components.css stringe l'etichetta a 12 caratteri e la allinea a destra */
.s-proof .em-stat__label{text-align:left;max-width:none;margin-top:12px}
.s-proof__text{font-size:var(--type-body-xs);line-height:var(--lh-body);color:var(--text-muted);margin:var(--space-6) 0 0;max-width:var(--measure-intro)}
.s-proof__client{font-weight:500}

/* La scheda raggiunta dal nome del cliente si accende per un attimo */
@keyframes sCardArrive{0%{outline-color:var(--accent)}100%{outline-color:transparent}}
.em-card:target .em-card__media{outline:1px solid transparent;outline-offset:6px;animation:sCardArrive 1.8s var(--ease-out-soft) .35s both}
@media (prefers-reduced-motion:reduce){.em-card:target .em-card__media{outline-color:var(--line-accent)}}

/* Piattaforme (Media Buying Online) */
.s-plat{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.s-plat__row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--space-6);padding:var(--space-6) 0;border-bottom:1px solid var(--line)}
.s-plat__name{align-self:start;padding-top:3px}
.s-plat__desc{font-size:var(--type-body-s);line-height:1.65;color:var(--text-muted);margin:0}
.s-plat__sub{list-style:none;margin:var(--space-4) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.s-plat__sub li{font-size:var(--type-body-xs);line-height:1.6;color:var(--text-muted)}
.s-plat__sub b{font-weight:500;color:var(--text-high)}

/* ---------- Indice dei servizi (stessa riga di voci dell'accordion in homepage) ---------- */
.s-toc{margin-top:var(--space-10)}
.s-toc__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line)}
.s-toc__link{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:var(--space-4) var(--space-5) 0 0;font-family:var(--font-tech);font-size:var(--type-tag);letter-spacing:var(--track-tag);text-transform:uppercase;line-height:1.3;color:var(--text-strong);transition:color var(--dur-fast) ease}
.s-toc__link:hover{color:var(--accent)}
.s-toc__index{font-family:var(--font-tech);font-size:var(--type-meta);font-weight:600;letter-spacing:var(--track-index);color:var(--accent);flex:none;transition:transform var(--dur-base) var(--ease-out-soft)}
.s-toc__link:hover .s-toc__index{transform:translateX(-2px)}

/* ---------- Progetti correlati: titolo e azione, poi schede ---------- */
.s-related{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title all" "grid grid";align-items:end;gap:var(--space-10) var(--space-9)}
.s-related__title{grid-area:title}
.s-related__all{grid-area:all}
.s-related__grid{grid-area:grid}
.s-related__grid .em-card{scroll-margin-top:var(--space-10)}

/* ---------- Menu: la voce di primo livello della pagina corrente passa a Messapia ---------- */
.em-menu__link[data-current-parent] .em-menu__label{font-family:var(--font-outline);letter-spacing:0}
.em-menu__sublink[aria-current="page"]{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--accent);text-underline-offset:6px}

/* ---------- Blocco CTA di chiusura ---------- */
.s-cta-text{max-width:var(--measure-copy)}
.s-cta-side{display:flex;flex-direction:column;gap:var(--space-6);align-items:stretch}
.s-cta-side .em-cta__contacts{text-align:right}

/* ---------- Riga legale del footer ---------- */
.s-legal{display:flex;flex-direction:column;gap:var(--space-2)}

/* ---------- Segnaposto immagine ---------- */
.s-ph{display:flex;align-items:center;justify-content:center;padding:var(--space-6);background:var(--surface-media)}
.s-ph__label{position:relative;font-family:var(--font-text);font-size:var(--type-caption);line-height:1.5;color:var(--text-subtle);text-align:center;max-width:26ch}

/* ---------- Works: apertura (titolo su due righe) ---------- */
@media (min-width:1024px){.s-intro--wide .em-intro__grid{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}}
.s-intro-actions{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-8)}

/* ---------- Caveau: griglia che cambia senza salti ---------- */
.s-caveau-head{margin-bottom:var(--space-9)}
.em-card.is-leaving{opacity:0;filter:blur(var(--reveal-blur));transform:translateY(calc(var(--reveal-shift) * -0.5));transition-duration:var(--dur-fast);transition-delay:0s}
.em-card[hidden],.em-filters__options[hidden]{display:none}
.em-chip:focus-visible,.em-filters__axis:focus-visible{outline-offset:4px}

/* Su tablet (2 colonne) l'ultima scheda di un numero dispari non resta sola: occupa la riga, immagine a fianco */
@media (min-width:768px) and (max-width:1023px){
  .em-caveau__grid > .em-card.is-row-end,
  .s-related__grid > .em-card:first-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:var(--grid-gap);row-gap:var(--space-5);align-content:start}
  .em-caveau__grid > .em-card.is-row-end .em-card__media,
  .s-related__grid > .em-card:first-child .em-card__media{grid-row:1/-1}
}

/* ---------- Laboratorio (predisposto, nascosto finché non ha voci) ---------- */
.s-lab__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap)}
.em-lab__thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--surface-media);margin:-26px -26px 0}
.em-lab__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8}
.em-lab__abstract{font-size:var(--type-body-xs);line-height:var(--lh-body);color:var(--text-muted);margin:0}

/* ---------- Footer: contatti cliccabili ---------- */
.em-footer__addr a{color:inherit}
.em-footer__addr a:hover{color:var(--text-strong)}

/* ---------- Responsive ---------- */
@media (max-width:1023px){
  html{scroll-padding-top:calc(var(--header-h-mobile) + var(--space-6))}
  .s-svc{grid-template-columns:60px minmax(0,1fr)}
  .s-svc__pair{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"lead" "aside" "body";gap:var(--space-8)}
  .s-svc__aside{max-width:var(--measure-text);position:static}
  .s-toc__list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .s-svc__pair--wide{grid-template-rows:auto;grid-template-areas:"lead" "body" "wide"}
  /* Bersagli touch da 44px nel footer, anche su tablet */
  .em-footer__links{gap:var(--space-7)}
  .em-footer__links .em-link::before,.em-footer__legal .em-link::before{content:"";position:absolute;inset:-15px 0}
  .em-footer__addr{line-height:44px}
  .em-footer__addr a{display:inline-block}
  .s-lab__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s-cta-side .em-cta__contacts{text-align:left}
  .em-card__abstract{-webkit-line-clamp:3}
}
@media (max-width:767px){
  .s-svc{grid-template-columns:1fr;padding:var(--space-9) 0 var(--space-10)}
  .s-svc .em-service__index{padding:0 0 var(--space-4)}
  .s-svc__pair + .s-svc__pair{margin-top:var(--space-9);padding-top:var(--space-9)}
  .s-plat__row,.s-svc__wide .s-plat__row{grid-template-columns:1fr;gap:var(--space-3)}
  .s-toc{margin-top:var(--space-8)}
  .s-toc__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s-related{grid-template-columns:1fr;grid-template-areas:"title" "grid" "all";gap:var(--space-9)}
  .s-related__all{justify-content:space-between;min-height:44px}
  /* Bersagli touch da 44px senza cambiare l'aspetto */
  .em-header .em-logo{padding:8px 0;margin:-8px 0}
  .em-filters__axis{padding-top:14px}
  .em-chip{min-height:44px}
  .em-cta__actions .em-btn{min-height:48px}
  .s-lab__grid{grid-template-columns:1fr}
  .s-visual{padding-bottom:var(--space-9)}
  .s-intro-actions{gap:var(--space-7)}
  .s-intro-actions .em-btn{align-self:stretch;justify-content:space-between}
}

/* ---------- Faccetta d'apertura: colore dal token ---------- */
.em-intro__facet{color:var(--accent)}