/*
 * Newsletter Section — imatge de fons + overlay translúcid + form pill.
 * Skin-aware via body.theme-*.
 */

.newsletter-section {
  background-color: #1a202c;
}

/* Alçada fixa per a no dependre de Tailwind arbitrary values (h-[400px]).
   Mobile: una mica més alt per donar espai al form + checkbox sense overflow. */
.ns-h-350 { height: 420px; }
.ns-h-400 { height: 460px; }
.ns-h-450 { height: 500px; }
.ns-h-500 { height: 540px; }
@media (min-width: 768px) {
  .ns-h-350 { height: 350px; }
  .ns-h-400 { height: 400px; }
  .ns-h-450 { height: 450px; }
  .ns-h-500 { height: 500px; }
}

.ns-bg {
  filter: brightness(0.85);
}

/* Overlay variants — translúcid blanc per a frosted-glass effect (mockup spec).
   Mantenir blur baix per a que la imatge segueixi sent reconocible. */
.ns-overlay-none .ns-overlay  { background: transparent; }
.ns-overlay-light .ns-overlay { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.ns-overlay-medium .ns-overlay { background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.ns-overlay-dark .ns-overlay  { background: rgba(0, 0, 0, 0.45); }

/* Títol — override el font-size global de h2 (que és clamp 2.25→50px = massa gros).
   Bake la mida amb !important per a que sigui el text-2xl md:text-3xl del mockup. */
.ns-title {
  font-size: 1.5rem !important; /* text-2xl mobile */
  color: rgb(var(--brand-primary, 6 115 153));
  line-height: 1.3;
  margin-bottom: 0;
  max-width: 32rem; /* ~max-w-md amb una mica més de marge per a evitar 5 línies */
}
@media (min-width: 768px) {
  .ns-title {
    font-size: 1.875rem !important; /* md:text-3xl */
  }
}

/*
 * Form input pill — el tema base té una regla input:not()...:not() amb
 * especificitat (0,3,1) que sobrescriu les classes simples. !important
 * obligatori per a aplicar el pill style propi del component (patró
 * documentat a CLAUDE.md per a components amb identitat).
 */
.ns-input {
  background-color: #fff !important;
  border-radius: 9999px !important;
  padding: 1rem 3.5rem 1rem 1.5rem !important; /* py-4 pl-6 pr-14 */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid rgb(var(--neutral-border, 224 228 234)) !important;
  color: rgb(var(--neutral-text-main, 24 24 33)) !important;
  font-size: 1rem !important;
  outline: none !important;
  height: auto !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.ns-input::placeholder {
  color: rgba(40, 40, 40, 0.5);
}
.ns-input:focus {
  border-color: rgb(var(--brand-accent, 128 186 39)) !important;
  box-shadow: 0 0 0 2px rgba(128, 186, 39, 0.3) !important;
}

/* Submit button: círculo olive, blanco, dins del pill (absolute positioning baked-in,
   no depèn de Tailwind right-2/top-2/bottom-2 que podrien estar purgades). */
.ns-form {
  position: relative;
}
.ns-submit {
  position: absolute !important;
  top: 0.5rem !important;
  right: 0.5rem !important;
  bottom: 0.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 2.5rem;
  background-color: rgb(var(--brand-accent, 128 186 39)) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 9999px !important;
  padding: 0 0.75rem !important;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.ns-submit:hover {
  background-color: rgb(var(--brand-primary, 6 115 153)) !important;
  transform: scale(1.05);
}
.ns-submit svg {
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}

/* Privacy row */
.ns-privacy {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(var(--neutral-text-main, 24 24 33));
}
.ns-checkbox {
  width: 1rem;
  height: 1rem;
  accent-color: rgb(var(--brand-accent, 128 186 39));
  cursor: pointer;
  flex-shrink: 0;
}
.ns-privacy-label {
  cursor: pointer;
}