/* ================================================================
   FOOTER — 3 bande: top (320px) + middle (150px) + bottom (64px)
================================================================ */
.footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---- Footer Top ---- */
.footer__top {
  background: var(--c-primary);
  width: 100%;
  overflow: hidden;
}

.footer__top-inner {
  max-width: var(--max);
  margin: 0 auto;
  height: 320px;
  display: flex;
  gap: 40px;
  align-items: flex-start;
  padding: 56px 80px;
  overflow: hidden;
}

/* Col: Brand */
.footer__col--brand {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  flex-shrink: 0;
  width: 320px;
}

.footer__brand-logo-area {
  display: flex;
  gap: 16px;
  height: 48px;
  align-items: center;
  overflow: hidden;
  flex-shrink: 0;
}

.footer__brand-logo {
  height: 40px;
  width: 120px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.footer__brand-logo-img {
  width: 120px;
  height: 40px;
  max-width: 100%;
  display: block;
}

.footer__brand-name {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  width: 190px;
  line-height: 20px;
}

/* Social in footer */
.footer__social {
  display: flex;
  gap: 10px;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__social-link {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  text-decoration: none;
}

.footer__social-link:hover {
  background: rgba(255,255,255,0.15);
}

.footer__social-link svg { display: block; }
.footer__social-img { display: block; width: 20px; height: 20px; }

/* Col: Segreteria */
.footer__col--segreteria {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  flex-shrink: 0;
  width: 260px;
  white-space: nowrap;
}

/* Col: Approfondimenti */
.footer__col--approfondimenti {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  flex-shrink: 0;
  width: 180px;
  white-space: nowrap;
}

/* Col: Newsletter */
.footer__col--newsletter {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  flex-shrink: 0;
  width: 400px;
}

/* Shared col heading */
.footer__col-heading {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  margin: 0;
}

/* Address */
.footer__address {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  font-style: normal;
  width: 260px;
}

.footer__address-line {
  font-size: 15px;
  font-weight: 400;
  color: rgba(255,255,255,0.8);
}

.footer__phone-link {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
}

.footer__email-link {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.95);
  text-decoration: underline;
}

/* Footer links list */
.footer__links {
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 180px;
}

.footer__links a {
  font-size: 15px;
  font-weight: 400;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
}

.footer__links a:hover { color: #fff; }

/* Newsletter form */
.footer__newsletter {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.footer__newsletter-cats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: none;
  padding: 0;
  width: 420px;
}

.footer__newsletter-cb {
  display: flex;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  font-family: var(--f);
  font-size: 15px;
  font-weight: 400;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
}

.footer__newsletter-cb input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}

.footer__newsletter-cb input[type="checkbox"]:checked {
  background: var(--c-secondary);
  border-color: var(--c-secondary);
}

.footer__newsletter-row {
  display: flex;
  height: 52px;
  align-items: center;
  overflow: hidden;
  flex-shrink: 0;
  width: 420px;
}

.footer__newsletter-input {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  height: 52px;
  padding: 0 16px;
  border-radius: 6px 0 0 6px;
  flex: 1;
  font-family: var(--f);
  font-size: 15px;
  color: #fff;
}

.footer__newsletter-input::placeholder {
  color: rgba(255,255,255,0.55);
}

.footer__newsletter-submit {
  background: var(--c-secondary);
  border: none;
  height: 52px;
  padding: 0 20px;
  border-radius: 0 6px 6px 0;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: 160px;
  font-family: var(--f);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}

.footer__newsletter-terms {
  display: flex;
  gap: 8px;
  align-items: center;
  cursor: pointer;
  font-family: var(--f);
  font-size: 14px;
  color: rgba(255,255,255,0.85);
}

.footer__newsletter-terms input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}

.footer__newsletter-terms input[type="checkbox"]:checked {
  background: var(--c-secondary);
  border-color: var(--c-secondary);
}

.footer__newsletter-terms a {
  color: rgba(255,255,255,0.95);
  text-decoration: underline;
}

.footer__newsletter-feedback {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  min-height: 20px;
}

/* ---- Footer Middle ---- */
.footer__middle {
  background: var(--c-footer-mid);
  width: 100%;
  overflow: hidden;
}

.footer__middle-inner {
  max-width: var(--max);
  margin: 0 auto;
  height: 150px;
  display: flex;
  gap: 40px;
  align-items: center;
  padding: 20px 80px;
  overflow: hidden;
}

.footer__certifications {
  display: flex;
  gap: 32px;
  height: 96px;
  align-items: center;
  overflow: hidden;
  flex-shrink: 0;
}

.footer__cert-logo {
  display: block;
  width: auto;
  flex-shrink: 0;
}
.footer__cert-logo--fism { height: 48px; }
.footer__cert-logo--cqy  { height: 72px; }
.footer__cert-logo--ciip { height: 45px; }

.footer__cert-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.5);
  line-height: 22px;
}

.footer__cert-text-line { display: block; }

/* ---- Footer Bottom ---- */
.footer__bottom {
  background: var(--c-footer-dark);
  width: 100%;
  overflow: hidden;
}

.footer__bottom-inner {
  max-width: var(--max);
  margin: 0 auto;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 80px;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
}

.footer__copyright { color: rgba(255,255,255,0.65); }

.footer__privacy-link {
  color: rgba(255,255,255,0.9);
  text-decoration: underline;
}

/* ================================================================
   RESPONSIVE — 2026-08-14
   ----------------------------------------------------------------
   Il footer era cablato a 1440px senza alcun @media: a 375px
   occupava 1380px e sfondava su tutte le pagine del sito.
   <=1279px : colonne che vanno a capo, padding ridotto.
   <=767px  : design mobile VERBATIM dal Figma "m-footer (dark)"
              360:127 (canvas "Piano Formativo" 353:2, frame 359:37).
   I token --c-footer-mid (#154763) e --c-footer-dark (#0f3a55)
   coincidono gia' con le bande del Figma mobile.
================================================================ */

@media (max-width:1279px){
  .footer__top-inner{height:auto;flex-wrap:wrap;gap:32px 40px;padding:48px 40px}
  .footer__col--newsletter{width:100%}
  .footer__newsletter-cats,
  .footer__newsletter-row{width:100%;max-width:420px}
  .footer__middle-inner{height:auto;flex-wrap:wrap;gap:24px;padding:20px 40px}
  .footer__cert-text{min-width:280px}
  .footer__bottom-inner{height:auto;min-height:64px;gap:16px;padding:16px 40px;white-space:normal}
}

@media (max-width:767px){

  /* ---- bande impilate; ordine Figma: brand, segreteria,
     newsletter, approfondimenti ---- */
  .footer__top-inner{flex-direction:column;height:auto;gap:0;padding:0}
  .footer__col{width:100%}

  /* m-brand — 360:128 */
  .footer__col--brand{width:100%;gap:20px;padding:36px 24px 28px;border-bottom:1px solid rgba(255,255,255,.1)}
  .footer__brand-logo-area{height:56px;gap:14px}
  .footer__brand-name{width:210px;font-size:13px;line-height:18px}
  .footer__social{gap:10px}
  .footer__social-link{width:40px;height:40px}

  /* m-contact — 360:146 */
  .footer__col--segreteria{width:100%;gap:12px;padding:28px 24px;white-space:normal;border-bottom:1px solid rgba(255,255,255,.1)}
  .footer__col-heading{font-size:18px}
  .footer__address{width:100%;gap:12px}
  .footer__address-line{font-size:14px;line-height:20px}
  .footer__phone-link{font-size:15px;font-weight:500;color:rgba(255,255,255,.95)}
  .footer__email-link{font-size:15px}

  /* m-newsletter — 360:152 */
  .footer__col--newsletter{order:3;width:100%;gap:16px;padding:28px 24px;border-bottom:1px solid rgba(255,255,255,.1)}
  .footer__newsletter{gap:16px}
  .footer__newsletter-cats{width:100%;gap:10px}
  .footer__newsletter-cb{gap:10px;font-size:14px}
  .footer__newsletter-row{flex-direction:column;height:auto;width:100%;gap:12px}
  .footer__newsletter-input{flex:0 0 auto;width:100%;height:48px;border-radius:6px;font-size:14px}
  .footer__newsletter-submit{width:100%;height:48px;border-radius:6px;font-size:14px}
  .footer__newsletter-terms{gap:10px;font-size:13px}

  /* m-links — 360:176: il titolo diventa un occhiello maiuscolo
     e i link vanno su due colonne */
  .footer__col--approfondimenti{order:4;width:100%;gap:14px;padding:24px;white-space:normal;border-bottom:0}
  .footer__col--approfondimenti .footer__col-heading{font-size:11px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;color:rgba(255,255,255,.6)}
  .footer__links{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
  .footer__links a{font-size:14px;color:rgba(255,255,255,.85)}

  /* m-certifications — 360:185 */
  .footer__middle-inner{flex-direction:column;height:auto;gap:16px;padding:24px}
  .footer__certifications{width:100%;height:56px;gap:20px;justify-content:center}
  .footer__cert-logo--fism{height:40px}
  .footer__cert-logo--cqy{height:52px}
  .footer__cert-logo--ciip{height:40px}
  /* DIVERGENZA: il Figma mobile condensa le 4 righe di certificazione
     in una sola frase. Qui restano 4 righe (il testo e' dato, non
     stile) con la tipografia del Figma. */
  .footer__cert-text{flex:0 0 auto;width:100%;gap:0;font-size:11px;line-height:16px;text-align:center;color:rgba(255,255,255,.7)}

  /* m-bottom — 360:259 */
  .footer__bottom-inner{flex-direction:column;height:auto;gap:8px;padding:20px 24px;text-align:center;white-space:normal}
  .footer__copyright{font-size:11px;color:rgba(255,255,255,.6)}
  .footer__privacy-link{font-size:12px}
}

/* ---- Fix da revisione indipendente 2026-08-14 (round 2) ----
   A 320px la banda brand del footer misurava 368px: non generava
   scroll solo perche' .footer ha overflow:hidden, ma logo e ragione
   sociale finivano fuori schermo. */
@media (max-width:767px){
  .footer__brand-logo-area{height:auto;flex-wrap:wrap;width:100%}
  .footer__brand-name{width:auto;flex:1 1 160px;min-width:0}
  .footer__certifications{flex-wrap:wrap;height:auto;row-gap:12px}
}

/* ---- Fix da revisione indipendente 2026-08-14 (round 4) ----
   Il min-width:280px del blocco tablet restava attivo anche a 320 e
   sbilanciava a sinistra loghi e testo delle certificazioni. */
@media (max-width:767px){
  .footer__cert-text{min-width:0;max-width:100%}
}