/* Contatti (server/views/contact.mjs, public/assets/js/contact.js): modulo, conferma nella pagina, contatti diretti, mini-mappa di Como.
   Campi a 16 px e bersagli ≥ 44 px (classi di site.css); nessun elemento fisso. */

.contact__grid { display: grid; gap: clamp(48px, 7vw, 120px); }
.contact__grid > * { min-width: 0; }
@media (min-width: 1000px) { .contact__grid { grid-template-columns: minmax(0, 1.5fr) minmax(300px, .9fr); align-items: start; } }
.contact__title { font-size: var(--fs-h2); margin-bottom: clamp(20px, 2.6vw, 32px); }

/* foto richiesta (?foto=…) */
.contact-photo { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; align-items: center; margin-bottom: clamp(24px, 3vw, 36px); padding: 10px; border: 1px solid rgba(212, 180, 131, .4); border-radius: var(--r-card); background: rgba(212, 180, 131, .05); }
.contact-photo__img { overflow: hidden; aspect-ratio: 1; border-radius: 10px; background: var(--c, var(--surface)); }
.contact-photo__img img { width: 100%; height: 100%; object-fit: cover; }
.contact-photo__body { display: grid; gap: 3px; min-width: 0; }
.contact-photo__kicker { font: 500 .6875rem/1.4 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.contact-photo__title { font: 450 1.4rem/1.15 var(--font-display); }
.contact-photo__place { font-size: var(--fs-xs); color: var(--muted); }
@media (hover: hover) { .contact-photo:hover .contact-photo__title { color: var(--accent-2); } }

/* modulo */
.contact-form { gap: 24px 20px; }
.contact-form__note { font-size: var(--fs-xs); color: var(--muted); }
.contact-form__note .req { color: var(--accent); }
.contact-form .field__error [data-error-text]:empty { display: none; }
.contact-form__privacy .check { font-size: var(--fs-small); }
.contact-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 4px; }
.contact-form__reply { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--muted); }
.contact-form__reply .i { width: 16px; height: 16px; color: var(--accent); }
.contact-form[aria-busy='true'] :is(.input, .select, .textarea, .check) { opacity: .7; }
.alert:focus { outline: none; }

/* conferma nella pagina */
.contact-done { display: grid; gap: 16px; justify-items: start; padding: clamp(28px, 4vw, 48px); border: 1px solid rgba(143, 191, 138, .45); border-radius: var(--r-block); background: rgba(143, 191, 138, .06); }
.contact-done__icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(143, 191, 138, .16); color: var(--ok); }
.contact-done__icon .i { width: 28px; height: 28px; }
.contact-done__title { font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.8rem); }
.contact-done__title:focus { outline: none; }
.contact-done__text { color: var(--muted); max-width: 58ch; }
.contact-done .actions { margin-top: 8px; }

/* contatti diretti */
.contact__aside { display: grid; gap: 22px; align-content: start; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--r-block); background: var(--bg-2); }
.contact__aside-title { font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); }
.contact__list { display: grid; gap: 4px; }
.contact__list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.contact__list li:last-child { border-bottom: 0; }
.contact__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--accent-2); }
.contact__icon .i { width: 19px; height: 19px; }
.contact__item { display: grid; gap: 2px; min-width: 0; }
.contact__label { font: 500 .6875rem/1.4 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.contact__item a, .contact__item > span:not(.contact__label) { overflow-wrap: anywhere; color: var(--text); }
.contact__item a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: underline; text-decoration-color: rgba(232, 207, 163, .4); text-underline-offset: .22em; transition: color .25s, text-decoration-color .25s; }
@media (hover: hover) { .contact__item a:hover { color: var(--accent-2); text-decoration-color: currentColor; } }
.contact__response { font-size: var(--fs-small); color: var(--muted); }
.contact__social { display: grid; gap: 10px; }
.contact__map { display: grid; gap: 10px; margin: 0; }
.contact__map .map--sm { height: clamp(220px, 34svh, 300px); min-height: 220px; }
.contact__map figcaption { font-size: var(--fs-xs); color: var(--muted); }

/* etichette brevi in maiuscoletto: niente sillabazione automatica (tedesco, russo, francese), come .kicker e .label di site.css */
:is(.contact__label, .contact-photo__kicker) { hyphens: manual; -webkit-hyphens: manual; }