/* Newsletter — views/sections/newsletter.php, around the shared .newsletter-form (styled in app.css,
   including its dark variant under .section--dark). panel: a rounded dark, soft or accent panel with an
   optional image; centred: on the section background; split: text left, form right from 1024 px. */

.rr-newsletter {
  position: relative;
  display: grid;
  overflow: hidden;
  isolation: isolate;
}

.rr-newsletter__content {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  min-width: 0;
}

.rr-newsletter__header {
  margin-bottom: 0;
}

.rr-newsletter__form {
  width: 100%;
  max-width: 34rem;
}

.rr-newsletter__media {
  position: relative;
  min-height: 14rem;
}

.rr-newsletter__media :where(picture, img) {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.rr-newsletter__media img {
  object-fit: cover;
}

/* Panel */
.rr-newsletter--panel {
  border-radius: var(--radius-xl);
}

.rr-newsletter--panel .rr-newsletter__content {
  padding: clamp(1.75rem, 1.1rem + 3vw, 4rem);
}

.rr-newsletter--dark {
  --rr-bg-solid: var(--color-dark);
  background:
    radial-gradient(60% 120% at 0% 100%, color-mix(in srgb, var(--color-accent) 26%, transparent) 0%, transparent 60%),
    var(--color-dark);
}

.rr-newsletter--soft {
  background:
    radial-gradient(60% 120% at 100% 0%, var(--color-accent-soft) 0%, transparent 65%),
    var(--color-secondary);
  color: var(--color-secondary-contrast);
}

.rr-newsletter--accent {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

.rr-newsletter--accent > * {
  --color-accent-text: currentColor;
  --color-text-muted: color-mix(in srgb, var(--color-accent-contrast) 78%, transparent);
}

@media (min-width: 1024px) {
  .rr-newsletter--panel:not(.has-image) .rr-newsletter__content {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem 4rem;
  }

  .rr-newsletter--panel.has-image {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }

  .rr-newsletter__media {
    min-height: 0;
  }
}

/* Centred */
.rr-newsletter--centered .rr-newsletter__content {
  justify-items: center;
  text-align: center;
}

.rr-newsletter--centered .rr-newsletter__header {
  margin-inline: auto;
  justify-items: center;
  text-align: center;
}

.rr-newsletter--centered :is(.rr-section__heading, .rr-section__subheading) {
  margin-inline: auto;
}

/* Split */
@media (min-width: 1024px) {
  .rr-newsletter--split .rr-newsletter__content {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem 4rem;
  }

  .rr-newsletter--split.has-image {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
    gap: 3rem;
  }

  .rr-newsletter--split .rr-newsletter__media {
    overflow: hidden;
    border-radius: var(--radius-xl);
  }
}