/* Layout comune delle pagine interne (Task 4-7). Solo nero/bianco. Si carica DOPO doom.css.
   Classi:
   .page-top        barra nera in alto con il logo (<a class="page-logo" href="/">Scaringi Tech</a>)
   .page-title      blocco titolo: <header class="page-title"><h1>..</h1><p class="lead">..</p></header>
   .page-body       colonna centrata (max 900px, padding 0 20px) per il contenuto della pagina
   .page-row        riga di contenuto separata da linee nere sottili (border-top/bottom 1px, si sovrappongono)
   .page-row-in     contenitore interno centrato della riga (max 900px)
   .field           etichetta+controllo: <label class="field"><span>Testo</span><input|select|textarea></label>
                    (bordo nero 1px, angoli 0, sfondo bianco; .is-invalid = bordo 2px)
   .field-wide      campo che occupa 2 colonne nella .form-grid
   .form-grid       griglia 3 colonne (1 colonna sotto 900px)
   .form-actions    riga bottoni + nota; .form-note testo piccolo; .form-error messaggio errore inline
   .pill / .pill-btn  bottone a pillola (da doom.css); .pill-btn rende un <button> identico al link .pill
   .page-note       paragrafo piccolo grigio scuro */
.page-top { background: var(--nero); height: 78px; display: flex; align-items: center; padding: 0 4%; }
.page-logo { font: 400 26px/1 var(--titoli); color: var(--bianco); text-decoration: none; }
.page-logo:focus-visible { outline: 2px solid var(--bianco); outline-offset: 4px; }

.page-title { text-align: center; padding: 56px 20px 40px; }
.page-title h1 { margin: 0 auto; max-width: 1200px; font: 400 clamp(48px, 9vw, 120px)/1 var(--titoli); color: var(--nero); letter-spacing: .01em; overflow-wrap: break-word; }
.page-title .lead { margin: 24px auto 0; max-width: 620px; font: 400 18px/27px var(--corpo); color: #333; }

.page-body { max-width: 940px; margin: 0 auto; padding: 0 20px 120px; }
.page-row { border-top: 1px solid var(--nero); border-bottom: 1px solid var(--nero); padding: 0 10px; }
.page-row + .page-row { margin-top: -1px; }
.page-row-in { max-width: 900px; margin: 0 auto; padding: 32px 0; }
.page-note { font: 400 14px/21px var(--corpo); color: #333; }

/* Form */
.form-grid[hidden] { display: none; }
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 24px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field.field-wide { grid-column: span 2; }
.field > span { font: 400 14px/20px var(--corpo); color: var(--nero); }
.field > span i { font-style: normal; color: #555; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--nero); border-radius: 0; background: var(--bianco);
  color: #222; font: 400 15px/22px var(--corpo); appearance: none; -webkit-appearance: none;
}
.field select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='black' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: calc(100% - 14px) 50%;
}
.field input::placeholder, .field textarea::placeholder { color: #777; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--nero); outline-offset: 2px; }
.field .is-invalid, .field input.is-invalid, .field select.is-invalid { border-width: 2px; padding: 11px 13px; }
.field select.is-invalid { padding-right: 39px; }
.form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 20px 24px; align-items: center; margin-top: 8px; }
.form-note { margin: 0; max-width: 52ch; font: 400 13px/19px var(--corpo); color: #333; }
.form-error { grid-column: 1 / -1; margin: 0; padding: 10px 14px; border: 2px solid var(--nero); font: 500 14px/20px var(--corpo); color: var(--nero); }
.form-error[hidden] { display: none; }
button.pill { cursor: pointer; }
.pill-btn:disabled { opacity: .5; cursor: wait; }

@media (max-width: 900px) {
  .form-grid { grid-template-columns: 1fr; }
  .field.field-wide { grid-column: auto; }
}
@media (max-width: 767px) {
  .page-top { height: 64px; }
  .page-title { padding: 40px 15px 28px; }
  .page-title .lead { font-size: 16px; line-height: 24px; }
  .page-body { padding: 0 0 110px; }
  .page-row { padding: 0 15px; }
  .pill { white-space: normal; }
}

/* ---------- Gare d'appalto ---------- */
.gare-filters { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr; gap: 20px 24px; }
.gf-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gf-label { font: 400 14px/20px var(--corpo); color: var(--nero); }
.gf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gf-chip { padding: 10px 18px; border: 1px solid var(--nero); border-radius: 999px; background: var(--bianco); color: var(--nero); font: 400 14px/20px var(--corpo); cursor: pointer; transition: background .2s, color .2s; }
.gf-chip:hover, .gf-chip.active { background: var(--nero); color: var(--bianco); }
.gf-chip:focus-visible { outline: 2px solid var(--nero); outline-offset: 2px; }
.gare-row { display: grid; grid-template-columns: 3fr 2fr; gap: 20px 40px; padding: 32px 0; }
.gare-row h3 { margin: 0 0 8px; font: 400 clamp(26px, 3vw, 34px)/1.1 var(--titoli); color: var(--nero); }
.gare-ente { margin: 0 0 12px; font: 400 14px/20px var(--corpo); color: #555; }
.gare-desc { margin: 0; font: 400 16px/24px var(--corpo); color: #222; }
.gare-side { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.gare-soglia { margin: 0; font: 400 14px/20px var(--corpo); color: var(--nero); text-decoration: underline; text-underline-offset: 3px; }
.gare-strumenti { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gare-strumenti li { border: 1px solid var(--nero); border-radius: 999px; padding: 3px 12px; font: 400 13px/18px var(--corpo); }
.gare-error { margin: 0; padding: 10px 14px; border: 2px solid var(--nero); font: 500 14px/20px var(--corpo); color: var(--nero); }
.gare-row + .gare-row { border-top: 1px solid var(--nero); }
@media (max-width: 900px) {
  .gare-filters { grid-template-columns: 1fr; }
  .gare-row { grid-template-columns: 1fr; }
}

/* ---------- Notizie ---------- */
.news-row { border-top: 1px solid var(--nero); }
.news-row:last-child { border-bottom: 1px solid var(--nero); }
.news-link { display: grid; grid-template-columns: 260px 1fr; gap: 20px 32px; align-items: start; padding: 32px 10px; color: var(--nero); text-decoration: none; transition: background .2s, color .2s; }
.news-link:not(:has(.news-cover)) { grid-template-columns: 1fr; }
.news-link:hover, .news-link:focus-visible { background: var(--nero); color: var(--bianco); }
.news-link:focus-visible { outline: 2px solid var(--nero); outline-offset: 2px; }
.news-cover { display: block; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--nero); background: #eee; }
.news-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.news-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font: 400 13px/18px var(--corpo); }
.news-cat { border: 1px solid currentColor; border-radius: 999px; padding: 3px 12px; }
.news-title { margin: 0; font: 400 clamp(26px, 3vw, 34px)/1.1 var(--titoli); overflow-wrap: anywhere; }
.news-link:hover .news-title, .news-link:focus-visible .news-title { text-decoration: underline; text-underline-offset: 4px; }
.news-excerpt { font: 400 16px/24px var(--corpo); }
.news-empty, .news-error { margin: 0; text-align: center; padding: 32px 10px 48px; border-top: 1px solid var(--nero); border-bottom: 1px solid var(--nero); font: 400 clamp(28px, 4vw, 44px)/1.15 var(--titoli); color: var(--nero); }
.news-error { font: 500 15px/22px var(--corpo); border: 2px solid var(--nero); padding: 14px 16px; text-align: left; }
@media (max-width: 767px) {
  .news-link { grid-template-columns: 1fr; padding: 24px 0; }
}

/* ---------- Pagine servizio / contatti / legali (Task 7) ----------
   .svc-row   riga con rosone + testo (<div class="page-row"><div class="page-row-in svc-row"><div class="rosone">..</div><div>..</div></div></div>)
   .steps     lista numerata (<ol class="steps"><li><b>Titolo</b><span>testo</span></li>..)
   .legal     testo legale: h2 titoli sezione, p/ul corpo; .draft-note = avviso bozza; .contact-mail = indirizzo grande */
.svc-row { display: flex; align-items: center; gap: 40px; }
.svc-row .rosone { flex: none; }
.svc-row h2, .legal h2 { margin: 0 0 12px; font: 400 clamp(26px, 3vw, 34px)/1.1 var(--titoli); color: var(--nero); }
.svc-row p, .legal p, .legal li { margin: 0 0 12px; font: 400 16px/24px var(--corpo); color: #222; }
.svc-row .pill { margin-top: 8px; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: st; }
.steps li { counter-increment: st; display: grid; grid-template-columns: 64px 1fr; gap: 4px 16px; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--nero); }
.steps li:first-child { border-top: 0; }
.steps li::before { content: counter(st, decimal-leading-zero); grid-row: span 2; font: 400 34px/1 var(--titoli); }
.steps b { font: 400 22px/28px var(--titoli); }
.steps span { font: 400 16px/24px var(--corpo); color: #222; }
.legal { padding: 16px 0; }
.legal h2 { margin-top: 28px; }
.legal ul { padding-left: 20px; }
.draft-note { border: 2px solid var(--nero); padding: 14px 18px; font: 500 15px/22px var(--corpo); margin: 0 0 8px; }
.contact-mail { display: inline-block; font: 400 clamp(22px, 4vw, 40px)/1.2 var(--titoli); color: var(--nero); overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .svc-row { flex-direction: column; align-items: flex-start; gap: 24px; }
  .svc-row .rosone { width: 100%; height: auto; aspect-ratio: 1; }
  .steps li { grid-template-columns: 48px 1fr; }
}