/* Newsletter CTA widget.
 *
 * Full-bleed breakout for `.elementor-widget-helikon-books-newsletter-cta` is
 * defined in tokens.css so it applies globally regardless of widget context.
 * This file styles only the widget's internal layout + form pill.
 */

.hb-newsletter-cta {
  position: relative;
  background-color: var(--hb-blue-700);
  color: #fff;
  padding: 96px 0;
  overflow: hidden;
  width: 100%;
}
.hb-newsletter-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(ellipse at 90% 50%, rgba(245,130,32,.3), transparent 40%);
  pointer-events: none;
}

/* Inner container — boxed at 1280px (via .hb-container), grid 2-col */
.hb-newsletter-cta__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 64px;
  align-items: center;
}
.hb-newsletter-cta__copy { min-width: 0; }
.hb-newsletter-cta__title {
  font-family: var(--hb-font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 8px 0;
  color: #fff;
}
.hb-newsletter-cta__description {
  font-family: var(--hb-font-serif);
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255,255,255,.8);
  max-width: 44ch;
  margin: 0;
}

/* Form pill — input + button side-by-side. Status floats below absolutely
 * so it doesn't add height to the pill when empty. */
.hb-newsletter-cta__form {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 6px;
  width: 460px;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
}
.hb-newsletter-cta__form input[type="email"] {
  flex: 1 1 auto !important;
  min-width: 0;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  color: #fff !important;
  padding: 14px 20px !important;
  margin: 0 !important;
  font-family: var(--hb-font-body);
  font-size: 15px;
  line-height: 1.4;
  height: auto;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}
.hb-newsletter-cta__form input[type="email"]::placeholder {
  color: rgba(255,255,255,.5) !important;
  opacity: 1;
}
.hb-newsletter-cta__form button[type="submit"] {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--hb-orange-500) !important;
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 12px 24px !important;
  margin: 0 !important;
  font-family: var(--hb-font-body) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  cursor: pointer;
  white-space: nowrap;
  height: auto;
  min-height: 0;
  text-decoration: none !important;
  transition: background .15s;
  -webkit-appearance: none;
  appearance: none;
}
.hb-newsletter-cta__form button[type="submit"]:hover,
.hb-newsletter-cta__form button[type="submit"]:focus {
  background: var(--hb-orange-700) !important;
  color: #fff !important;
}
.hb-newsletter-cta__form button[type="submit"][disabled] {
  opacity: .6;
  cursor: progress;
}

/* Status message floats below the pill — does NOT add height to the pill */
.hb-newsletter-cta__status {
  position: absolute;
  top: calc(100% + 12px);
  left: 12px;
  right: 12px;
  font-size: 14px;
  color: rgba(255,255,255,.9);
  line-height: 1.4;
}
.hb-newsletter-cta__status:empty { display: none; }
.hb-newsletter-cta__status.is-error { color: var(--hb-orange-400); }
.hb-newsletter-cta__status.is-success { color: #d6f5e1; }

@media (max-width: 900px) {
  .hb-newsletter-cta { padding: 64px 0; }
  .hb-newsletter-cta__inner { grid-template-columns: 1fr; gap: 32px; }
  .hb-newsletter-cta__form { width: 100%; }
}