/* Pagine servizio: perizie-e-stime, ape, rilievi-topografici, ristrutturazioni
   Caricato con $page['css'] = 'svc-pagine'. Usa i token di style.css. */
@layer components {

  /* ---------- Split "Cosa facciamo" ---------- */
  .svc-split { align-items: start; }
  @media (min-width: 64em) {
    .svc-split { grid-template-columns: 1.2fr 1fr; }
    .svc-split__fig { position: sticky; inset-block-start: 6rem; }
  }
  .svc-split .section-head { margin-block-end: 1.5rem; }
  .svc-callout, .svc-split .todo--block { margin-block-start: 1.75rem; }
  .svc-split .todo--block .callout { margin: 0; }

  /* ---------- Card "quando serve" / strumenti ---------- */
  .svc-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); }
  .svc-card {
    position: relative; padding: 1.4rem 1.3rem 1.5rem; background: #fff;
    border: 1px solid var(--c-line); border-radius: var(--radius-lg);
    & p { margin-block-start: 0.5rem; color: var(--c-text); font-size: var(--step--1); line-height: 1.55; }
  }
  .svc-card::after { content: ""; position: absolute; inset-block-start: -1px; inset-inline-start: 1.3rem; inline-size: 2.5rem; block-size: 3px; background: var(--c-primary); border-radius: 0 0 2px 2px; }
  .svc-card__icon { display: inline-grid; place-items: center; inline-size: 3rem; block-size: 3rem; margin-block-end: 0.9rem; border-radius: 50%; background: var(--c-primary-50); color: var(--c-primary); }
  .svc-card__title { font-size: var(--step-1); line-height: 1.25; }
  .svc-card__kicker { display: block; margin-block-end: 0.35rem; font: 500 var(--step--2)/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); }

  /* ---------- Tempi e costi ---------- */
  .svc-costi { display: grid; gap: 1.5rem; }
  @media (min-width: 64em) { .svc-costi { grid-template-columns: 1.6fr 1fr; align-items: start; } }
  .svc-costi .table td:nth-child(n+3) { white-space: nowrap; }
  @media (max-width: 39.99em) { .svc-costi .table td:nth-child(n+3) { white-space: normal; } }

  /* ---------- Documenti ---------- */
  .svc-doc__title { font-size: var(--step-1); margin: 0; }
  .svc-doc__list { margin-block: 0.9rem; }

  /* ---------- Riferimenti + autore ---------- */
  .svc-rif { display: grid; gap: 1.5rem; align-items: center; }
  @media (min-width: 64em) { .svc-rif { grid-template-columns: 1.2fr 1fr; gap: 3rem; } }
  .svc-rif .author-box { margin: 0; background: #fff; }
  .svc-rif__title { font-size: var(--step-1); }
  .svc-rif__items { margin-block-start: 0.9rem; display: grid; gap: 0.6rem;
    & li { display: flex; flex-wrap: wrap; column-gap: 0.6rem; align-items: baseline; padding-block-end: 0.6rem; border-block-end: 1px dashed var(--c-line-strong); }
    & a { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 620; }
  }
  .svc-rif__desc { font-size: var(--step--1); color: var(--c-muted); }
  .svc-rif__note { margin-block-start: 0.9rem; font-size: var(--step--1); color: var(--c-muted); }

  /* ---------- APE: scala delle classi energetiche (HTML, niente immagine) ---------- */
  .ape-scale { display: grid; gap: 0.3rem; padding: 1.25rem; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); }
  .ape-scale__cap { font: 500 var(--step--2)/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); margin-block-end: 0.4rem; }
  .ape-scale ol { display: grid; gap: 0.3rem; }
  .ape-scale li {
    --w: 40%;
    display: flex; align-items: center; justify-content: space-between;
    inline-size: var(--w); min-inline-size: 4.5rem; padding: 0.3rem 0.8rem 0.3rem 0.7rem;
    font: 700 var(--step-0)/1.2 var(--font-sans); color: #1F2326; background: var(--bg);
    clip-path: polygon(0 0, calc(100% - 0.7rem) 0, 100% 50%, calc(100% - 0.7rem) 100%, 0 100%);
  }
  .ape-scale li small { font: 500 var(--step--2)/1 var(--font-mono); letter-spacing: 0.04em; }
  .ape-scale .c-a4 { --bg: #00843D; --w: 34%; color: #fff; }
  .ape-scale .c-a3 { --bg: #157A36; --w: 40%; color: #fff; }
  .ape-scale .c-a2 { --bg: #4BAE4F; --w: 46%; }
  .ape-scale .c-a1 { --bg: #8CC63F; --w: 52%; }
  .ape-scale .c-b  { --bg: #C9DB2B; --w: 58%; }
  .ape-scale .c-c  { --bg: #FFE500; --w: 64%; }
  .ape-scale .c-d  { --bg: #FDB913; --w: 70%; }
  .ape-scale .c-e  { --bg: #F58220; --w: 78%; }
  .ape-scale .c-f  { --bg: #E03A1E; --w: 86%; color: #fff; }
  .ape-scale .c-g  { --bg: #B01E23; --w: 94%; color: #fff; }
  .ape-scale__legend { display: flex; justify-content: space-between; margin-block-start: 0.5rem; font-size: var(--step--1); color: var(--c-muted); }

  /* ---------- Rilievi: strumenti ---------- */
  .svc-tools { display: grid; gap: 1rem; }
  @media (min-width: 64em) { .svc-tools { grid-template-columns: 1fr 1.3fr; align-items: stretch; gap: 2rem; } }
  .svc-tools .svc-cards { grid-template-columns: 1fr; }
  .svc-tools__fig { & picture, & img { block-size: 100%; } & img { object-fit: cover; } }
  .svc-card--tool { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: start;
    & .svc-card__icon { margin: 0; grid-row: span 3; } & p { grid-column: 2; } }

  /* ---------- Ristrutturazioni: prima e dopo ---------- */
  .ba-list { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
  .ba { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden; }
  .ba__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--c-line); }
  .ba__pair figure { position: relative; margin: 0; }
  .ba__pair img { inline-size: 100%; aspect-ratio: 1; object-fit: cover; }
  .ba__tag { position: absolute; inset-block-start: 0.5rem; inset-inline-start: 0.5rem; padding: 0.15rem 0.5rem; border-radius: 999px;
    font: 500 var(--step--2)/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; background: rgb(31 35 38 / 0.85); color: #fff; }
  .ba__tag--dopo { background: var(--c-primary); }
  .ba__cap { padding: 0.8rem 1rem 1rem; font-size: var(--step--1); color: var(--c-text); line-height: 1.5; }
  .ba__cap strong { color: var(--c-ink); }

  /* Giornale dei lavori: pagina di registro stilizzata */
  .journal { padding: 1.25rem 1.25rem 1.25rem 1.5rem; background:
      repeating-linear-gradient(180deg, transparent 0 calc(1.9rem - 1px), var(--c-line) calc(1.9rem - 1px) 1.9rem) content-box, #fff;
    background-origin: content-box; background-repeat: repeat-y; background-clip: padding-box;
    border: 1px solid var(--c-line); border-inline-start: 4px solid var(--c-primary); border-radius: var(--radius); }
  .journal__row { display: grid; grid-template-columns: 4.75rem 1fr; gap: 0.6rem; line-height: 1.9rem; font-size: var(--step--1); color: var(--c-text); }
  .journal__row span:first-child { font: 500 var(--step--2)/1.9rem var(--font-mono); color: var(--c-primary); letter-spacing: 0.04em; }
  .journal__cap { margin: 0; padding-inline-start: 5.35rem; font-size: var(--step--2); line-height: 1.9rem; color: var(--c-muted); font-style: italic; }
}