/* ============================================================
   CONTATTI.CSS - pagina /contatti/ + form quotazione.
   Dipende da tokens.css + main.css (.t-*, .rule-draw, .btn, .reveal).
   Autonomo: ridefinisce page-hero/page-lead (interne.css non caricato qui).
   ============================================================ */

/* --- HERO (2 col: titolo sx / intro dx, allineati in basso) --- */
.page-hero { padding-block: clamp(3rem, 6vw, 5.5rem) var(--section-y); }
.page-hero__title { margin-top: var(--space-md); max-width: 16ch; }
.page-lead { color: var(--text-2); line-height: var(--lh-prose); }
.ct-lead { max-width: 62ch; }
.ct-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: end;
}

/* --- GRID contatti + form --- */
.ct-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

/* --- Colonna dati di contatto --- */
.ct-info__title { color: var(--text-1); }
.ct-info .rule-draw { margin-top: var(--space-sm); }
.ct-block { margin-top: var(--space-lg); }
.ct-block__label {
    font-family: var(--font-display); font-size: .8rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em; color: var(--bronze);
    margin-bottom: var(--space-2xs);
}
.ct-block__value { color: var(--text-1); font-size: 1.05rem; line-height: var(--lh-body); font-style: normal; }
.ct-link {
    color: var(--text-1); text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: color var(--dur-fast) var(--ease-expo), border-color var(--dur-fast) var(--ease-expo);
}
.ct-link:hover { color: var(--bronze); border-bottom-color: var(--bronze); }
.ct-hours { color: var(--text-2); font-size: .98rem; max-width: 34ch; }

/* --- Colonna form --- */
.ct-form-wrap {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    box-shadow: var(--shadow-card, 0 1px 2px rgba(0,0,0,.04));
}
.ct-form-wrap .ct-input { background: var(--bg); border-color: oklch(65% 0.01 50); }
.ct-form__title { color: var(--text-1); }
.ct-form__hint { margin-top: var(--space-xs); color: var(--text-2); font-size: .95rem; }
.req { color: var(--bronze); }

.ct-form { margin-top: var(--space-lg); }
.ct-row {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}
.ct-row + .ct-row, .ct-form > .ct-field, .ct-row + .ct-field { margin-top: var(--space-md); }
.ct-field { display: flex; flex-direction: column; }

.ct-label {
    font-size: .9rem; font-weight: 600; color: var(--text-1);
    margin-bottom: var(--space-2xs);
}
.ct-input {
    font-family: inherit; font-size: 1rem; color: var(--text-1);
    background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: .7rem .85rem;
    transition: border-color var(--dur-fast) var(--ease-expo), box-shadow var(--dur-fast) var(--ease-expo), background var(--dur-fast) var(--ease-expo);
    width: 100%;
}
.ct-input::placeholder { color: var(--text-3, var(--text-2)); opacity: .7; }
.ct-input:hover { border-color: var(--text-2); }
.ct-input:focus {
    outline: none; border-color: var(--bronze); background: var(--bg);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--bronze) 18%, transparent);
}
.ct-textarea { resize: vertical; min-height: 6rem; line-height: var(--lh-body); }

/* Select con freccia custom */
.ct-select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none' stroke='%23985a19' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .85rem center;
    padding-right: 2.5rem;
}

/* Campo in errore (JS aggiunge .is-invalid) */
.ct-input.is-invalid { border-color: #b3261e; background: color-mix(in oklch, #b3261e 5%, var(--bg)); }
.ct-input.is-invalid:focus { box-shadow: 0 0 0 3px color-mix(in oklch, #b3261e 16%, transparent); }

/* Messaggio d'errore per campo (creato da contatti-form.js, collegato via aria-describedby) */
.ct-error {
    margin: .4rem 0 0; font-size: .875rem; line-height: 1.4;
    color: #8c1d18; font-weight: 500;
}
.ct-error[hidden] { display: none; }

/* Honeypot: fuori schermo */
.ct-hp { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* --- Submit + stati --- */
.ct-submit { margin-top: var(--space-lg); width: 100%; justify-content: center; }
.ct-submit__text, .ct-submit__loading { display: inline-flex; align-items: center; gap: .5rem; }
.ct-submit__loading { display: none; }
.ct-submit svg { width: 20px; height: 20px; transition: transform var(--dur-fast) var(--ease-expo); }
.ct-submit:hover svg { transform: translateX(4px); }
.ct-submit.is-loading .ct-submit__text { display: none; }
.ct-submit.is-loading .ct-submit__loading { display: inline-flex; }
.ct-submit.is-loading { cursor: progress; opacity: .85; }

.ct-spinner {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid color-mix(in oklch, currentColor 30%, transparent);
    border-top-color: currentColor;
    animation: ct-spin .6s linear infinite;
}
@keyframes ct-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ct-spinner { animation-duration: 1.4s; } }

.ct-privacy { margin-top: var(--space-md); font-size: var(--fs-small); color: var(--text-2); }
.ct-privacy a { color: var(--bronze); text-decoration: underline; border-bottom: 1px solid transparent; }
.ct-privacy a:hover { border-bottom-color: currentColor; }

/* --- Alert success / error --- */
.ct-alert { margin-top: var(--space-md); padding: .85rem 1rem; border-radius: var(--radius); font-size: .95rem; line-height: var(--lh-body); }
.ct-alert[hidden] { display: none; }
.ct-alert--success { background: color-mix(in oklch, var(--bronze) 10%, var(--bg)); border: 1px solid var(--bronze); color: var(--text-1); }
.ct-alert--error { background: color-mix(in oklch, #b3261e 8%, var(--bg)); border: 1px solid #b3261e; color: #7a1a15; }

/* --- Mobile --- */
@media (max-width: 860px) {
    .ct-grid { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 3rem); }
    .ct-hero__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
    .ct-hero__grid .page-lead { margin-top: 0; }
}
@media (max-width: 560px) {
    .ct-row { grid-template-columns: 1fr; gap: var(--space-md); }
    .ct-row + .ct-row, .ct-form > .ct-field, .ct-row + .ct-field { margin-top: var(--space-md); }
}


/* ============================================================
   CONTATTI v2 - implementazione FEDELE del design C di Samu (Claude Design,
   24/07). Delta: form in CARD bianca bordata, colonna dati con kicker bronzo
   + blocco prova ISO/3.1 in fondo (riempie il vuoto: T4), griglia 400/1fr,
   mobile col form PRIMA dei dati. Override in coda alle regole esistenti.
   ============================================================ */

.ct-grid { grid-template-columns: 400px minmax(0, 1fr); gap: clamp(2rem, 3.9vw, 3.5rem); align-items: start; }
.ct-info__title { font-size: clamp(1.5rem, 2.1vw, 1.875rem); }
.ct-block__label {
    color: var(--bronze); font-weight: 700; letter-spacing: 0.11em;
    text-transform: uppercase; font-size: var(--fs-small);
}
.ct-form-wrap {
    background: var(--bg); border: 1px solid var(--border);
    padding: clamp(1.25rem, 2.8vw, 2.25rem) clamp(1rem, 2.8vw, 2.5rem) clamp(1.25rem, 2.2vw, 2rem);
}
.ct-submit { width: 100%; justify-content: center; }

/* blocco prova: badge ISO piccoli + nota 3.1 (contenuto vero, non decorazione) */
.ct-proof {
    border-top: 1px solid var(--border);
    margin-top: clamp(1.25rem, 2.4vw, 1.625rem); padding-top: clamp(1.25rem, 2.4vw, 1.5rem);
    display: flex; flex-direction: column; gap: 1rem;
}
.ct-proof__row { display: flex; align-items: center; gap: 0.875rem; }
.ct-proof__row img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.ct-proof__row p { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--text-2); }
.ct-proof__row strong { color: var(--text-1); }
.ct-proof__note { margin: 0.25rem 0 0; font-size: var(--fs-small); line-height: 1.6; color: var(--text-2); text-wrap: pretty; }

@media (max-width: 860px) {
    /* design C mobile: il form viene PRIMA dei dati */
    .ct-info { order: 2; padding-inline: 0.5rem; }
    .ct-form-wrap { order: 1; }
    .ct-grid { display: flex; flex-direction: column; }
}

/* ============================================================
   WHISTLEBLOWING - condiviso con /segnalazione-whistleblowing/ (e traduzioni):
   la pagina usa $PAGE_CSS = 'contatti.css' per riusare .ct-form/.ct-field/
   .ct-input/.ct-select/.ct-error/.ct-alert/.ct-submit senza duplicarli.
   Qui solo ciò che manca: form a colonna singola centrato + checkbox (anonimo,
   consenso) che il form Contatti non usa.
   ============================================================ */

.wb-form-wrap { max-width: 40rem; margin-inline: auto; }

/* WHY specificità: .ct-row/.ct-field impostano display:grid/flex con la stessa
   specificità di [hidden] (0,0,1,0) → a parità vince sempre il foglio d'autore
   sullo UA stylesheet, quindi l'attributo hidden da solo non li nascondeva
   davvero (verificato: hidden=true ma i campi restavano visibili a schermo). */
#wbIdentity[hidden], #wbEmailField[hidden] { display: none; }

.ct-checkline {
    display: flex; align-items: flex-start; gap: .65rem;
    cursor: pointer;
}
.ct-checkline input[type="checkbox"] {
    accent-color: var(--bronze);
    width: 1.15rem; height: 1.15rem; flex-shrink: 0;
    margin-top: .2rem;
}
.ct-checkline span { font-size: .95rem; line-height: var(--lh-body); color: var(--text-2); }
.ct-checkline a { color: var(--bronze); text-decoration: underline; text-underline-offset: .2em; border-bottom: 1px solid transparent; }
.ct-checkline a:hover { border-bottom-color: currentColor; }