/* ==========================================================================
   By Jillian Rose — Newsletter Page
   Only loaded on the Newsletter page template (see functions.php), never
   site-wide. STRUCTURAL REVERT toward the "Newsletter Park" mockup
   reference — clean horizontal sections, wider content blocks, restrained
   backgrounds, minimal shadows/corner-radius, no floating cards. Reuses
   existing design-system tokens throughout; no new colors/fonts/spacing
   values introduced.
   ========================================================================== */

/* ---- Shared: heart divider, fine print, labeled placeholders ---- */
.newsletter-heart-divider { display: flex; margin: var(--space-2) 0; }
.newsletter-heart-divider-left { justify-content: flex-start; }
.newsletter-heart-divider-center { justify-content: center; }
.newsletter-heart-divider-img { width: 150px; height: auto; }

.newsletter-fineprint { font-size: 12.5px; color: var(--color-text-secondary); margin: var(--space-1) 0 0; }

/* Section headings (What You'll Receive / Kind Words) — centered,
   balanced wrapping so short 2-3 word headings never leave a single
   orphaned word on their own line. */
.newsletter-section-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(24px, 2.8vw, 30px);
  color: var(--color-text);
  margin: 0;
  text-wrap: balance;
}

/* Generic labeled image placeholder — dashed border + muted fill, same
   established sitewide "clearly not real yet" convention (see e.g.
   homepage.php's card-placeholder). Label text is deliberately visible
   in all cases: this page is draft-gated by its own post_status, so
   there is no scenario where this label is shown to a real public
   visitor while also being hidden from the editor reviewing it. */
.newsletter-image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 100%;
  background: var(--color-bg-secondary);
  border: 1px dashed var(--color-border-interactive);
  border-radius: var(--radius);
  text-align: center;
  padding: var(--space-2);
}
.newsletter-image-placeholder .icon { width: 32px; height: 32px; color: var(--color-text-secondary); }
.newsletter-image-placeholder-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  max-width: 22ch;
}

/* ---------------------------------------------------------------------
   1. Hero — clean two-column split, shared section background, no
   card/rotation/tucked-photo treatment. Wider, more balanced column
   ratio than the prior pass so the heading has real room and doesn't
   force awkward wraps. No eyebrow (removed from the markup — see
   newsletter.php); the eyebrow-scoped rule that used to live here is
   gone too, not left as dead CSS.

   Vertical rhythm: children of .newsletter-hero-text use the parent's
   flex `gap` (var(--space-2), 16px) as the baseline spacing. Two pairs
   deviate on purpose (per explicit request, Aug 2026): the heading->
   paragraph gap and the paragraph->form gap each need to read as
   clearly larger than the other sibling gaps (heart->heading, form->
   fineprint, which stay at the plain 16px gap). Rather than raising the
   shared gap (which would also blow out those other two pairs), each of
   the two target elements carries its own extra margin-top on top of
   the inherited gap: see .newsletter-hero-text p (heading->paragraph,
   totals ~32px) and .newsletter-hero-form (paragraph->form, totals
   ~40px). To keep the column's total height — and so the section's
   overall height, since the photo stretches to match via align-items:
   stretch — essentially unchanged despite that added space, the
   column's own top/bottom padding below was reduced from --space-6 to
   --space-5 (saves 32px, against 40px added), a deliberate redistribution
   rather than new growth.

   Section padding: moved OFF the outer section entirely and onto the
   copy column only (.newsletter-hero-text), so the photo can run edge-
   to-edge within the gray hero background on desktop. Copy-column
   padding target ~55-70px -> --space-5 (48px), trimmed slightly from an
   original 64px to offset the extra heading/paragraph/form spacing
   above. At the 900px breakpoint,
   where columns stack, padding moves back to the outer section
   (--space-5, 48px tablet target) and off the copy column, since a
   stacked layout no longer benefits from a full-height edge-to-edge
   image — see the responsive block below for both breakpoints.
   --------------------------------------------------------------------- */
.newsletter-hero { padding: 0; background: var(--color-bg-secondary); }
/* .wrap (base.css) applies padding-left/right: var(--space-3) to every
   section that uses it sitewide. Overridden to 0 on the right only,
   here, so the photo can sit flush against the gray section's right
   edge — left padding (the copy column's gutter) is untouched. */
.newsletter-hero-inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--space-5);
  align-items: stretch;
  padding-right: 0;
}
.newsletter-hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-5) 0; }
.newsletter-hero-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(30px, 3.8vw, var(--text-h1));
  line-height: 1.15;
  color: var(--color-text);
  margin: 0;
  text-wrap: balance;
}
/* Standalone heart accent (attachment #1638) — now the FIRST element in
   the copy column (moved above the heading), centered regardless of the
   column's own left alignment via align-self. Fixed ~36px width per
   explicit instruction (no longer a responsive clamp range). No margin-
   top: the column's own top padding already provides room above it as
   the first child, and adding one here would create empty space where
   none was requested. margin-bottom relies on the parent's existing
   flex gap (var(--space-2), 16px) rather than an extra explicit margin
   — close to the requested ~18px without compounding two spacing
   sources into one gap, same anti-compounding principle applied
   elsewhere in this file. height:auto preserves the real 2:3 aspect
   ratio — never stretched. No border/shadow: a bare decorative mark. */
.newsletter-hero-heart {
  align-self: center;
  display: block;
  width: 36px;
  height: auto;
  margin: 0;
}
.newsletter-hero-text p { margin: 0; max-width: 52ch; text-wrap: pretty; }
/* Adds to the parent's 16px flex gap so heading->paragraph totals ~32px
   (30-36px target) instead of the plain 16px shared by every other
   sibling gap in this column — see the "Vertical rhythm" comment above. */
.newsletter-hero-title + p { margin-top: var(--space-2); }
.newsletter-hero-form {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
  flex-wrap: wrap;
  width: 100%;
  /* Adds to the parent's 16px flex gap so paragraph->form totals ~40px
     (38-48px target) — the largest gap in the column, per explicit
     request; see the "Vertical rhythm" comment above. */
  margin-top: var(--space-3);
}
.newsletter-hero-form .field { flex: 1; min-width: 160px; margin-bottom: 0; }
.newsletter-hero-text > .newsletter-fineprint { margin-top: 0; }
.newsletter-hero-media { display: flex; align-self: stretch; }
/* Real photo: fills the column edge-to-edge on desktop (width/height
   100%, no aspect-ratio constraint — height comes from the grid row,
   which is itself sized by the copy column's own padded content, and
   .newsletter-hero-media's align-self:stretch above passes that full
   row height down to this img). object-position biased slightly below
   center keeps the envelope/blank note in frame under object-fit:cover
   cropping. No border, shadow, rotation, margin, or floating-card
   treatment — just the sitewide default img border-radius
   (var(--radius), from base.css) for a very subtle corner softening.
   Reverts to a fixed aspect-ratio + auto height at the 900px breakpoint
   once columns stack — see the responsive block below. */
.newsletter-hero-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}

/* Landing target for the final-invitation anchor button — see
   bjr_newsletter_final_cta() in newsletter.php. tabindex="-1" there
   makes this a real, standards-compliant focus target on activation (no
   JS needed); this section isn't itself an interactive control, so its
   own outline is suppressed — every real control inside it (form
   fields, button) keeps its own full :focus-visible styling from
   base.css/components.css, untouched. */
#newsletter-hero:focus { outline: none; }

/* ---------------------------------------------------------------------
   2. What You'll Receive — real 5-column icon row. Wide inner container
   (separate from the standard 1140px .wrap, same pattern already used
   for the Shop Hub's wide grids) so five columns have real breathing
   room. Subtle vertical dividers between columns on desktop; no cards,
   no shadows.
   --------------------------------------------------------------------- */
.newsletter-receive { padding: var(--space-5) 0; }
.newsletter-receive-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.newsletter-receive-grid {
  max-width: 1240px;
  margin: var(--space-4) auto 0;
  padding: 0 var(--space-3);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: start;
}
.newsletter-receive-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  border-right: 1px solid var(--color-border);
}
.newsletter-receive-tile:last-child { border-right: none; }
.newsletter-receive-tile .icon { width: 30px; height: 30px; color: var(--color-accent-dark); }
.newsletter-receive-label {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text);
  text-wrap: balance;
}
.newsletter-receive-desc {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------
   3. From My Inbox to Yours — split editorial section, restrained
   background, no card treatment. Real photo left (attachment #1639,
   native 3:2 — object-fit:cover fills the column with no border/shadow/
   dashed-placeholder styling of any kind, same bare-image treatment as
   the hero photo). Real script graphic (#1640) and the verified
   standalone heart (#1638) replace the former uppercase eyebrow text
   and the old wide flanking-lines heart divider respectively.
   --------------------------------------------------------------------- */
.newsletter-inbox { padding: var(--space-6) 0; }
.newsletter-inbox-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: stretch;
}
.newsletter-inbox-media { display: flex; }
.newsletter-inbox-photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}
.newsletter-inbox-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
/* white-space:nowrap keeps "I write the newsletter [heart]" on one
   desktop line — reset back to normal at the 900px breakpoint below,
   where the column narrows enough (single stacked column) that forcing
   one line would overflow instead of wrapping normally. */
.newsletter-inbox-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1.25;
  color: var(--color-text);
  margin: 0;
  white-space: nowrap;
}
/* Script graphic (#1640) — displayed ~50% larger (260px -> 390px),
   aspect ratio preserved via height:auto. max-width:100% is a
   safeguard so it can't overflow the column at narrow mobile widths
   once stacked (the column itself has no other width constraint on
   this image). */
.newsletter-inbox-script-img { width: 390px; max-width: 100%; height: auto; display: block; }
/* Standalone heart (#1638, same verified asset used in the hero) now
   sits inline immediately after the word "newsletter" instead of on
   its own row below the heading. .newsletter-inbox-title-accent wraps
   the word + heart as one atomic inline-flex unit so the pair can't
   split across a line break (the heart never becomes orphaned on its
   own line); inline-flex + align-items:center keeps it vertically
   aligned with the surrounding heading text. No border/shadow — same
   bare decorative treatment as everywhere else this asset is used. */
.newsletter-inbox-title-accent {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.newsletter-inbox-heart { display: inline-block; width: 30px; height: auto; margin: 0; }
.newsletter-inbox-text p { margin: 0; max-width: 50ch; text-wrap: pretty; }

/* ---------------------------------------------------------------------
   4. Kind Words — its own self-contained background box, ending right
   after the three testimonials. Deliberately does NOT extend into or
   share any markup/styling with the Final Invitation banner below it.

   Background: rgba(182,138,147,.08) — the same existing "pale blush"
   wash already used sitewide (Contact's main section, Shop's "A Little
   Something For You", and this page's own Final Invitation banner),
   reused verbatim rather than a new color. Slightly warmer than the
   neutral --color-bg-secondary gray this replaced.

   Tighter, denser rhythm than the prior pass: section padding halved
   (--space-5 -> --space-3), head-to-grid margin halved (--space-4 ->
   --space-2), and the quote's own extra margin-top removed so image/
   quote/name spacing now relies solely on .newsletter-testimonial-
   card's flex gap (--space-1) — consistent, un-compounded spacing
   throughout, not just a smaller number. Portraits enlarged 64px ->
   140px; text size and all three testimonials' wording untouched.

   Grid widened 900px -> 1140px (the sitewide .wrap container width)
   with tighter side padding (--space-3 -> --space-2), so the outer two
   columns sit closer to the section's edges. Still repeat(3, 1fr) with
   an unchanged column gap, so all three columns stay evenly sized and
   balanced — only the container grew, not the proportions.
   --------------------------------------------------------------------- */
.newsletter-testimonials { padding: var(--space-3) 0; background: rgba(182, 138, 147, .08); }
.newsletter-testimonials-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.newsletter-testimonials-grid {
  max-width: 1140px;
  margin: var(--space-2) auto 0;
  padding: 0 var(--space-2);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  text-align: center;
}
.newsletter-testimonial-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
/* Real approved photos (attachments #1642/1643/1644) — circular crop,
   no dashed border/icon/label; quote and name below stay placeholder-
   only until real testimonial copy is supplied (see the gating
   comment in newsletter.php). */
.newsletter-testimonial-portrait-img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
/* Real approved quotes (full sentences) — normal case/weight/spacing,
   unlike the short all-caps filler label this replaced. max-width keeps
   line length readable inside the 3-column grid. No margin-top: relies
   solely on the parent card's flex gap (--space-1), same anti-
   compounding principle used elsewhere on this page. */
.newsletter-testimonial-quote {
  display: block;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-text);
  max-width: 30ch;
  text-wrap: pretty;
}
.newsletter-testimonial-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-secondary);
}

/* ---------------------------------------------------------------------
   5. Final Invitation — a fully distinct section from Kind Words above
   it: its own background (the exact pale-pink already used on the Shop
   Hub's "A Little Something For You" section — rgba(182,138,147,.08),
   a low-opacity derivation of --color-accent, reused verbatim rather
   than a new pink; see .shop-freebies in shop.css) plus a real
   margin-top gap for a clear visual break.

   2-column layout: photo (~34%) | content. Photo runs edge-to-edge
   within the banner — full row height via align-items:stretch +
   height:100% (row height set by the content column's own vertical
   padding, same mechanism as the hero photo), flush to the inner
   container's own left edge with no padding around it.

   Copy and button are grouped together as one flex row
   (.newsletter-final-invite-content) in that right-hand content
   column, instead of living in two separate grid columns with a wide
   gap between them — the button sits var(--space-4) (32px) from the
   copy, well within the requested 32-48px range, rather than being
   pushed out to the banner's far right edge.
   --------------------------------------------------------------------- */
.newsletter-final-invite {
  margin-top: var(--space-6);
  padding: 0;
  background: rgba(182, 138, 147, .08);
}
.newsletter-final-invite-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 34% 1fr;
  align-items: stretch;
  gap: var(--space-4);
}
.newsletter-final-invite-media { display: flex; }
/* Real approved photo (attachment #1641). No border/padding — fills
   its column edge-to-edge; height:100% + the grid's align-items:stretch
   above make it fill the banner's full height, same pattern used for
   the hero photo. */
.newsletter-final-invite-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}
/* Copy + button grouped together, vertically centered in the row.
   Right padding (var(--space-3)) preserves the same outer edge inset
   the button used to carry on its own; left padding stays 0 since the
   grid's own gap already provides breathing room from the photo. */
.newsletter-final-invite-content {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-3) var(--space-5) 0;
}
/* max-width keeps the heading/copy near their previous ~44%-column
   reading width instead of stretching to fill the flex row, which
   would shove the button back out to the far right — the exact problem
   this restructure fixes. */
.newsletter-final-invite-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  max-width: 460px;
}
.newsletter-final-invite-heading {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.35;
  color: var(--color-text);
  margin: 0 0 4px;
  text-wrap: balance;
}
.newsletter-final-invite-text p { margin: 0; font-size: 14px; color: var(--color-text-secondary); text-wrap: pretty; }
.newsletter-final-invite-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Responsive — same breakpoints used sitewide (900 / 680 / 560px).
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  .newsletter-hero { padding: var(--space-5) 0; }
  /* Right padding restored once columns stack — the flush-right photo
     treatment above is desktop-only; a single stacked column needs
     normal, symmetrical wrap padding on both sides (the stacked copy
     text would otherwise also lose its right-side gutter). */
  .newsletter-hero-inner { grid-template-columns: 1fr; padding-right: var(--space-3); }
  .newsletter-hero-text { padding: 0; }
  .newsletter-hero-media { order: -1; align-self: auto; }
  .newsletter-hero-photo { height: auto; aspect-ratio: 4 / 3; }
  .newsletter-inbox-inner { grid-template-columns: 1fr; }
  .newsletter-inbox-photo { min-height: 240px; height: auto; aspect-ratio: 3 / 2; }
  .newsletter-inbox-title { white-space: normal; text-wrap: balance; }
  .newsletter-receive-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3) 0; }
  .newsletter-receive-tile { border-right: none; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
  .newsletter-receive-tile:nth-last-child(-n+2) { border-bottom: none; }
  .newsletter-testimonials-grid { grid-template-columns: 1fr; gap: var(--space-4); max-width: 340px; }
  /* Final Invitation stacks cleanly: image on top (fixed 3:2 crop,
     since height:100% has no row context once the grid drops to a
     single column), then copy, then the button — all centered
     (.newsletter-final-invite-content switches to a centered column,
     so DOM order alone gives image -> copy -> button). */
  .newsletter-final-invite { margin-top: var(--space-5); }
  /* .newsletter-final-invite-inner no longer uses the sitewide .wrap
     class (removed so the photo can sit truly flush left on desktop —
     see the section comment above), so its normal side gutter has to
     be restored explicitly here once the layout stacks. */
  .newsletter-final-invite-inner { grid-template-columns: 1fr; padding: 0 var(--space-3); text-align: center; justify-items: center; gap: var(--space-3); }
  .newsletter-final-invite-photo { height: auto; aspect-ratio: 3 / 2; }
  .newsletter-final-invite-content { flex-direction: column; align-items: center; gap: var(--space-2); padding: 0; }
  .newsletter-final-invite-text { max-width: 100%; align-items: center; }
  .newsletter-final-invite-btn { margin-top: var(--space-1); }
}
@media (max-width: 680px) {
  .newsletter-hero-form { flex-direction: column; align-items: stretch; }
  .newsletter-hero-form .field { width: 100%; }
}
@media (max-width: 560px) {
  .newsletter-hero { padding: var(--space-4) 0; }
  .newsletter-receive-grid { grid-template-columns: 1fr; }
  .newsletter-receive-tile { border-bottom: 1px solid var(--color-border); }
  .newsletter-receive-tile:last-child { border-bottom: none; }
  .newsletter-inbox-title-accent { gap: 10px; }
  .newsletter-inbox-heart { width: 24px; }
}