/*!
 * Rapidreelz section engine — docs/ARCHITECTURE.md §11.6.
 *
 * The <section class="rr-section rr-section--{type} …"> wrapper every builder section renders in, and
 * every style option of §11.4 as a modifier: backgrounds (incl. image + darkening overlay), text tone,
 * spacing scale, content width, alignment, device visibility and the scroll reveal. Also the heading
 * block shared by all section types, the builder preview markers, and the two stand-alone pages of the
 * engine (newsletter unsubscribe, review invite) with the star rating input.
 *
 * Colours only ever come from the theme tokens (/theme.css) or --rr-bg (a validated #rrggbb a section sets
 * inline), so every section follows Settings > Design. Mobile-first; breakpoints 480/768/1024/1280.
 *
 * Contents
 *   1. Wrapper & spacing scale        5. Width, alignment, visibility, reveal
 *   2. Backgrounds                     6. Heading block & actions
 *   3. Background image & overlay      7. Builder preview
 *   4. Text tone on coloured sections  8. Stand-alone pages & star rating input
 */

/* =============================================================================================
   1. Wrapper & spacing scale (_pt / _pb: none | xs | sm | md | lg | xl)
   ============================================================================================= */
.rr-section {
  --rr-space-xs: clamp(0.75rem, 0.6rem + 0.6vw, 1.25rem);
  --rr-space-sm: clamp(1.25rem, 0.95rem + 1.2vw, 2.25rem);
  --rr-space-md: clamp(1.75rem, 1.2rem + 2.2vw, 3.5rem);
  --rr-space-lg: clamp(2.5rem, 1.7rem + 3.4vw, 5rem);
  --rr-space-xl: clamp(3.5rem, 2.3rem + 5vw, 7.5rem);
  --rr-pt: var(--rr-space-md);
  --rr-pb: var(--rr-space-md);
  --rr-align: start;
  position: relative;
  padding-top: var(--rr-pt);
  padding-bottom: var(--rr-pb);
  /* Anchor jumps (#features) land below the sticky header. */
  scroll-margin-top: calc(var(--header-h-compact) + 0.5rem);
}

.rr-section--pt-none { --rr-pt: 0px; }
.rr-section--pt-xs { --rr-pt: var(--rr-space-xs); }
.rr-section--pt-sm { --rr-pt: var(--rr-space-sm); }
.rr-section--pt-md { --rr-pt: var(--rr-space-md); }
.rr-section--pt-lg { --rr-pt: var(--rr-space-lg); }
.rr-section--pt-xl { --rr-pt: var(--rr-space-xl); }

.rr-section--pb-none { --rr-pb: 0px; }
.rr-section--pb-xs { --rr-pb: var(--rr-space-xs); }
.rr-section--pb-sm { --rr-pb: var(--rr-space-sm); }
.rr-section--pb-md { --rr-pb: var(--rr-space-md); }
.rr-section--pb-lg { --rr-pb: var(--rr-space-lg); }
.rr-section--pb-xl { --rr-pb: var(--rr-space-xl); }

/* Sections without style options (sticky bars, spacers) manage their own space. */
.rr-section--plain {
  --rr-pt: 0px;
  --rr-pb: 0px;
}

.rr-section__inner {
  position: relative;
  z-index: 1;
}

/* Full-bleed sections (heroes, full-width images) bring their own layout edge to edge. */
.rr-section--full-bleed {
  overflow-x: clip;
}

/* =============================================================================================
   2. Backgrounds (_bg: none | surface | muted | primary | secondary | accent | dark | custom | image)
   --rr-bg-solid is the flat colour behind the section (used for focus-ring gaps and inverted buttons).
   ============================================================================================= */
.rr-section--bg-none {
  background-color: transparent;
}

.rr-section--bg-surface {
  --rr-bg-solid: var(--color-surface);
  background-color: var(--color-surface);
}

.rr-section--bg-muted {
  --rr-bg-solid: var(--color-surface-2);
  background-color: var(--color-surface-2);
}

.rr-section--bg-primary {
  --rr-bg-solid: var(--color-primary);
  background-color: var(--color-primary);
}

.rr-section--bg-secondary {
  --rr-bg-solid: var(--color-secondary);
  background-color: var(--color-secondary);
}

.rr-section--bg-accent {
  --rr-bg-solid: var(--color-accent);
  background-color: var(--color-accent);
}

.rr-section--bg-dark {
  --rr-bg-solid: var(--color-dark);
  background-color: var(--color-dark);
}

.rr-section--bg-custom {
  --rr-bg-solid: var(--rr-bg, var(--color-bg));
  background-color: var(--rr-bg, transparent);
}

.rr-section--bg-image {
  --rr-bg-solid: var(--color-dark);
  background-color: var(--color-dark);
  isolation: isolate;
  overflow: hidden;
}

/* On an accent background an accent button would vanish: it takes the primary colour instead. */
.rr-section--bg-accent .btn--accent {
  --btn-bg: var(--color-primary);
  --btn-fg: var(--color-primary-contrast);
  --btn-bg-hover: var(--color-primary-hover);
}

.rr-section--bg-accent > * {
  --color-accent-text: currentColor;
}

/* =============================================================================================
   3. Background image & overlay (_bg_image, _bg_overlay 0–90 % → --rr-overlay 0–0.9)
   A real <picture> layer (responsive, WebP, lazy below the fold) instead of a CSS background.
   ============================================================================================= */
.rr-section__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.rr-section__media picture,
.rr-section__media img {
  display: block;
  width: 100%;
  height: 100%;
}

.rr-section__media img {
  object-fit: cover;
  object-position: center;
}

.rr-section__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-dark);
  opacity: var(--rr-overlay, 0.4);
}

.rr-section--full-bleed > :not(.rr-section__media) {
  position: relative;
  z-index: 1;
}

/* =============================================================================================
   4. Text tone (_text: auto | dark | light). The renderer adds .rr-section--on-dark (+ the design
   system's .section--dark variants) for light text and .rr-section--on-light for dark text. Tokens are
   re-scoped on the children, so headings, muted text, borders, fields, cards and buttons all follow.
   ============================================================================================= */
.rr-section--on-dark {
  --rr-text: var(--color-dark-contrast);
  color: var(--rr-text);
}

.rr-section--on-dark > * {
  --color-text: var(--rr-text);
  --color-text-muted: rgba(255, 255, 255, 0.74);
  --color-border: rgba(255, 255, 255, 0.16);
  --color-border-strong: rgba(255, 255, 255, 0.42);
  --color-surface: rgba(255, 255, 255, 0.07);
  --color-surface-2: rgba(255, 255, 255, 0.11);
  --color-bg: var(--rr-bg-solid, var(--color-dark));
  --color-accent-text: var(--color-accent);
  --color-accent-soft: rgba(255, 255, 255, 0.12);
  /* Primary buttons and badges invert: light on the dark band. */
  --color-primary: var(--rr-text);
  --color-primary-contrast: var(--rr-bg-solid, var(--color-dark));
  --color-primary-hover: #FFFFFF;
}

.rr-section--on-dark :where(a:not(.btn)) {
  color: inherit;
}

.rr-section--on-dark .muted,
.rr-section--on-dark .lead,
.rr-section--on-dark .rr-section__subheading {
  color: var(--color-text-muted);
}

.rr-section--on-dark .eyebrow {
  color: var(--color-accent);
}

.rr-section--on-dark.rr-section--bg-accent .eyebrow,
.rr-section--on-dark.rr-section--bg-primary .eyebrow {
  color: inherit;
  opacity: 0.85;
}

.rr-section--bg-image.rr-section--on-dark :is(h1, h2, h3, .rr-section__heading, .lead) {
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.22);
}

.rr-section--on-light {
  --rr-text: var(--color-dark);
  color: var(--rr-text);
}

.rr-section--on-light > * {
  --color-text: var(--rr-text);
  --color-text-muted: rgba(20, 21, 26, 0.72);
  --color-border: rgba(20, 21, 26, 0.14);
  --color-border-strong: rgba(20, 21, 26, 0.45);
}

/* =============================================================================================
   5. Width (_width), alignment (_align), visibility (_hide_on) and reveal (_animate)
   ============================================================================================= */
.rr-section__inner--full {
  max-width: none;
}

.rr-section--align-center {
  --rr-align: center;
}

.rr-section--align-right {
  --rr-align: end;
}

@media (max-width: 767.98px) {
  .rr-section--hide-mobile {
    display: none;
  }
}

@media (min-width: 768px) {
  .rr-section--hide-desktop {
    display: none;
  }
}

/* The fade itself is app.js's opt-in [data-reveal] (respects prefers-reduced-motion). */

/* =============================================================================================
   6. Heading block & actions — eyebrow / heading / subheading of every section type
   (SectionRenderer::heading(); sections that write their own .section__header align the same way).
   ============================================================================================= */
.rr-section__header {
  display: grid;
  gap: 0.75rem;
  max-width: 46rem;
  margin-bottom: clamp(1.75rem, 1.35rem + 1.6vw, 3rem);
  justify-items: start;
  text-align: left;
}

.rr-section__header:last-child {
  margin-bottom: 0;
}

.rr-section__eyebrow {
  margin: 0;
}

.rr-section__heading {
  margin: 0;
  max-width: 24ch;
}

.rr-section__heading--h2 {
  font-size: var(--step-4);
}

.rr-section__heading--h3 {
  font-size: var(--step-3);
}

.rr-section__heading--h1 {
  font-size: var(--step-5);
}

.rr-section__subheading {
  margin: 0;
  max-width: 60ch;
}

.rr-section__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: clamp(1.25rem, 1rem + 1vw, 2rem);
  justify-content: flex-start;
}

.rr-section--align-center :is(.rr-section__header, .section__header) {
  margin-inline: auto;
  justify-items: center;
  text-align: center;
}

.rr-section--align-center :is(.rr-section__heading, .rr-section__subheading) {
  margin-inline: auto;
}

.rr-section--align-center .rr-section__actions {
  justify-content: center;
}

.rr-section--align-right :is(.rr-section__header, .section__header) {
  margin-left: auto;
  justify-items: end;
  text-align: right;
}

.rr-section--align-right .rr-section__actions {
  justify-content: flex-end;
}

/* Phones: full-width, stacked buttons are easier to hit. */
@media (max-width: 479.98px) {
  .rr-section__actions > .btn:not(.btn--link) {
    flex: 1 1 100%;
  }
}

/* =============================================================================================
   7. Builder preview (ctx.preview): hover outline + label, selection, hidden/empty/error notices
   ============================================================================================= */
.rr-section--preview {
  cursor: pointer;
}

.rr-section--preview::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border: 2px dashed transparent;
  pointer-events: none;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}

.rr-section--preview::before {
  content: attr(data-section-label);
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 6;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-xs);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font: 650 0.75rem/1.2 var(--font-body);
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}

.rr-section--preview:hover::after,
.rr-section--preview:focus-within::after {
  border-color: var(--color-accent);
}

.rr-section--preview:hover::before,
.rr-section--preview.is-selected::before {
  opacity: 1;
  transform: none;
}

.rr-section--preview.is-selected::after {
  border-style: solid;
  border-color: var(--color-accent);
  background: rgba(255, 77, 46, 0.04);
}

/* Hidden on this device: still shown (faded) in the builder so it can be selected. */
@media (max-width: 767.98px) {
  .rr-section--preview.rr-section--hide-mobile {
    display: block;
    opacity: 0.45;
  }
}

@media (min-width: 768px) {
  .rr-section--preview.rr-section--hide-desktop {
    display: block;
    opacity: 0.45;
  }
}

.rr-section--notice {
  padding-block: var(--rr-space-sm);
}

.rr-section-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

.rr-section-notice .icon {
  margin-top: 0.1em;
}

.rr-section--error .rr-section-notice {
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

/* =============================================================================================
   8. Stand-alone pages (views/newsletter, views/reviews) & the star rating input
   ============================================================================================= */
.rr-standalone {
  padding-block: clamp(2.5rem, 1.75rem + 4vw, 6rem);
}

.rr-standalone__card {
  display: grid;
  gap: 1.1rem;
  max-width: 36rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 1rem + 2.4vw, 2.75rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.rr-standalone__card--center {
  justify-items: center;
  text-align: center;
}

.rr-standalone__icon {
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background: var(--color-surface-2);
  color: var(--color-text);
}

.rr-standalone__icon .icon {
  width: 1.65rem;
  height: 1.65rem;
}

.rr-standalone__icon--success {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.rr-standalone__icon--warning {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.rr-standalone__title {
  font-size: var(--step-3);
  line-height: 1.12;
}

.rr-standalone__lead {
  color: var(--color-text-muted);
  font-size: var(--step-0);
  max-width: 46ch;
}

.rr-standalone__actions {
  display: grid;
  gap: 0.6rem;
  width: 100%;
  margin-top: 0.4rem;
}

.rr-standalone__note {
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

/* The product being reviewed */
.rr-review-product {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
}

.rr-review-product__media {
  flex: none;
  width: 4rem;
  aspect-ratio: var(--card-ratio);
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.rr-review-product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rr-review-product__name {
  font-weight: 650;
  line-height: 1.3;
}

.rr-review-product__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.3rem;
  color: var(--color-success);
  font-size: var(--step--1);
  font-weight: 600;
}

.rr-review-product__badge .icon {
  width: 1.05em;
  height: 1.05em;
}

.rr-review-form {
  display: grid;
  gap: 1.25rem;
}

.rr-review-form .field + .field {
  margin-top: 0;
}

.rr-review-form fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.rr-review-form legend {
  padding: 0;
}

/* Star rating: real radio buttons (keyboard: arrow keys), labels drawn as filled stars. DOM order 1 → 5;
   the stars up to the checked (or hovered) one fill. */
.rr-stars-input {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin-top: 0.15rem;
}

.rr-stars-input input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.rr-stars-input label {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-sm);
  color: var(--color-border-strong);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}

.rr-stars-input label::before {
  content: "";
  width: 2rem;
  height: 2rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4l2.95 5.98 6.6.96-4.78 4.65 1.13 6.57L12 17.47l-5.9 3.1 1.13-6.57-4.78-4.65 6.6-.96z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4l2.95 5.98 6.6.96-4.78 4.65 1.13 6.57L12 17.47l-5.9 3.1 1.13-6.57-4.78-4.65 6.6-.96z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Two rules on purpose: a browser without :has() drops only the second and still fills the chosen star. */
.rr-stars-input:not(:hover) input:checked + label {
  color: var(--color-star);
}

.rr-stars-input:not(:hover):has(input:checked) label {
  color: var(--color-star);
}

.rr-stars-input:not(:hover) input:checked + label ~ label {
  color: var(--color-border-strong);
}

@media (hover: hover) {
  .rr-stars-input:hover label {
    color: var(--color-star);
  }

  .rr-stars-input:hover label:hover ~ label {
    color: var(--color-border-strong);
  }

  .rr-stars-input label:hover {
    transform: scale(1.08);
  }
}

.rr-stars-input input:focus-visible + label {
  box-shadow: var(--ring);
}

.rr-stars-input__scale {
  display: flex;
  justify-content: space-between;
  max-width: 14.25rem;
  color: var(--color-text-muted);
  font-size: var(--step--2);
}

.rr-review-form .has-error .rr-stars-input label {
  color: var(--color-danger);
  opacity: 0.55;
}

.rr-file-input {
  padding: 0.6rem;
  font-size: var(--step--1);
  cursor: pointer;
}

.rr-file-input::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.5rem 0.95rem;
  border: 0;
  border-radius: var(--radius-btn);
  background: var(--color-surface-2);
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .rr-section--preview::before,
  .rr-section--preview::after,
  .rr-stars-input label {
    transition: none;
  }

  .rr-stars-input label:hover {
    transform: none;
  }
}

@media print {
  .rr-section {
    padding-block: 1rem;
    background: none !important;
    color: #000 !important;
  }

  .rr-section__media {
    display: none;
  }
}