/* ==========================================================================
   IdeeFuoriClasse — contatti.css
   Page-specific styles for /contatti/
   ========================================================================== */

/* ---------- Hero ---------- */
.page-hero { padding: 44px 0 30px; }
.page-hero h1 { margin-bottom: .4rem; }
.page-hero .subhead { font-size: 1.15rem; max-width: 58ch; }
.page-hero .hero-note { font-size: .97rem; color: var(--ink-soft); margin-bottom: 0; }

/* ---------- Department cards ---------- */
.dept-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.dept-card { background: var(--paper); padding: 22px 20px; }
.dept-card .icon-lg { color: var(--accent); }
.dept-card h3 { margin: .7rem 0 .25rem; font-size: 1.1rem; }
.dept-card .dept-role { font-size: .9rem; color: var(--ink-soft); margin-bottom: .7rem; }
.dept-card p { font-size: .95rem; }
.dept-card ul { list-style: none; padding: 0; margin: .8rem 0 0; }
.dept-card li { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; font-size: .95rem; }
.dept-card a { word-break: break-word; }

/* ---------- Two-column area ---------- */
.contact-layout { display: grid; gap: 30px; align-items: start; }
@media (min-width: 901px) {
  .contact-layout { grid-template-columns: 1.35fr 1fr; gap: 40px; }
  .contact-aside { position: sticky; top: calc(var(--header-h) + 20px); }
}

/* ---------- Form ---------- */
.contact-form { background: var(--paper); padding: 28px 24px 26px; }
.form-row { margin-bottom: 1.05rem; }
.form-grid-2 { display: grid; gap: 1.05rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .form-grid-2 { grid-template-columns: 1fr 1fr; } }
.contact-form label {
  display: block;
  font-weight: 700;
  font-size: .94rem;
  margin-bottom: .3rem;
}
.contact-form .hint { font-weight: 400; color: var(--ink-soft); font-size: .86rem; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="number"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: .65rem .8rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 14px 4px 12px 5px / 4px 11px 5px 14px;
}
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: 3px solid var(--gold);
  outline-offset: 1px;
}
.consent { display: flex; align-items: flex-start; gap: .6rem; font-size: .92rem; }
.consent input { margin-top: .28rem; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--accent); }
.consent label { font-weight: 400; margin: 0; }
.form-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.3rem; }
.form-footer .note { font-size: .9rem; color: var(--ink-soft); margin: 0; }

/* ---------- Aside info panel ---------- */
.info-panel { background: var(--sand); padding: 24px 22px; }
.info-panel h2 { font-size: 1.7rem; }
.info-block { display: flex; gap: .7rem; margin-bottom: 1.1rem; }
.info-block .icon-lg { color: var(--accent); margin-top: .1rem; }
.info-block p { margin: 0; font-size: .97rem; }
.info-panel table { margin: .4rem 0 1rem; background: var(--paper); border: 2px solid var(--ink); }
.info-panel th, .info-panel td { font-size: .93rem; padding: .5rem .7rem; }
.info-panel thead th { background: var(--ink); color: var(--paper); }
.info-panel .panel-note { font-size: .92rem; color: var(--ink-soft); margin-bottom: 0; }

/* ---------- Pre-contact accordion ---------- */
#prima-di-scriverci { margin-top: 8px; }