/* newsletter.css — modulo condiviso "Iscriviti alla newsletter".
   La fascia è uniforme ovunque venga inclusa nel sito:
   - sfondo verde acqua brand al 3%
   - strike (border-top/bottom) verde acqua pieno
   - eyebrow piccolo nero
   - titolo grande verde teal su 2 righe
   - input + bottone freccia in un container squadrato bordo verde */

.newsletter {
  background: rgba(0, 167, 157, 0.03);   /* verde acqua brand al 3% */
  color: var(--c-title);
  padding-block: 36px;
  border-top: 1px solid var(--c-green);
  border-bottom: 1px solid var(--c-green);
}

/* Layout 2 righe: eyebrow sopra solo a sx; titolo + form sulla stessa riga,
   con il form allineato al centro verticale del titolo. */
.newsletter__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 32px;
  row-gap: 6px;
  grid-template-areas:
    "eyebrow ."
    "title   form";
  align-items: center;
}
.newsletter__eyebrow {
  grid-area: eyebrow;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-title);
  margin: 0;
}
.newsletter__title {
  grid-area: title;
  font-size: clamp(22px, 1.7vw, 33px);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  color: var(--c-green);
  margin: 0;
}
.newsletter__form {
  grid-area: form;
  align-self: center;
  width: max(320px, 28vw);
}
/* La pillola bordata (1.147.0): era sul <form>, ma da quando il form contiene
   anche il consenso e il messaggio d'esito il bordo li avrebbe rinchiusi con
   l'input. Ora avvolge i soli campi. */
.newsletter__field {
  display: flex; align-items: center;
  background: var(--c-white);
  border: 1.5px solid var(--c-green);
  border-radius: 0;
  padding: 6px 6px 6px 20px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.newsletter__field:focus-within {
  border-color: var(--c-green-dark);
  box-shadow: 0 0 0 4px rgba(0, 167, 157, 0.15);
}
.newsletter__field input[type="email"] {
  flex: 1;
  font-family: inherit;
  font-size: var(--fs-body);
  padding: 10px 12px 10px 0;
  background: transparent;
  color: var(--c-title);
  border: 0;
  outline: none;
  min-width: 0;
}
.newsletter__field input[type="email"]::placeholder { color: var(--c-muted); }
.newsletter__field button {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: var(--c-green-dark);
  color: var(--c-white);
  border: 0;
  border-radius: 0;
  font-size: 20px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-fast), transform var(--t-fast);
}
.newsletter__field button:hover {
  background: var(--c-green);
  transform: translateX(2px);
}
.newsletter__field button:active { transform: translateX(0); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .newsletter__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "title"
      "form";
    gap: 24px;
  }
  .newsletter__form { width: 100%; max-width: 480px; }
}

/* Consenso marketing + esito (1.147.0). Il form era a riga singola (input +
   freccia): la checkbox e il messaggio vanno SOTTO, a piena larghezza, o il
   flex li schiaccia accanto al bottone. */
.newsletter__consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
}
.newsletter__consent input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--c-green, #00A79D);
  cursor: pointer;
}
.newsletter__consent a { text-decoration: underline; }
.newsletter__status {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  min-height: 1.2em;
}