/* page-newsletters.php — responsive + visual fixes (loaded only on this template, after responsive.css) */

/* ---------- gutters ----------
   below 1000px .rsw got the gutter twice (max-width minus --gut AND responsive.css padding) — 36px on phones,
   66px at 768. Keep the padding alone so content lines up with the header/footer: 16px phones, 28px tablet. */
@media (max-width:1000px){
  body.page-template-page-newsletters .rsw{max-width:none}
}

/* ---------- hero ---------- */
/* "Credence, in your / inbox." left one word on the last line on phones */
body.page-template-page-newsletters .rs-hero h1{text-wrap:balance}
body.page-template-page-newsletters .rs-hero p{text-wrap:pretty}
/* eyebrow pill: the trailing .14em letter-spacing sat inside the right padding and pushed the text left */
body.page-template-page-newsletters .vd-eyebrow{padding-left:15px;padding-right:calc(14px - .14em)}

/* subscribe form — status line (errors / success) */
body.page-template-page-newsletters .rs-hero .nl-msg{margin:12px auto 0;max-width:none;font-size:13.5px;line-height:1.5;font-weight:600;color:#fff;text-wrap:pretty}
body.page-template-page-newsletters .rs-hero .nl-msg[hidden]{display:none}
body.page-template-page-newsletters .rs-hero .nl-msg.is-error{color:#FFD9DF}
body.page-template-page-newsletters .nl-form.is-invalid .nl-field{border-color:#FFB3C0;background:rgba(255,255,255,.18)}
body.page-template-page-newsletters .nl-sub{justify-content:center}
body.page-template-page-newsletters .nl-sub:focus-visible,
body.page-template-page-newsletters .nl-cta:focus-visible{outline:2px solid currentColor;outline-offset:3px}
body.page-template-page-newsletters .nl-agree input{margin:0}
body.page-template-page-newsletters .nl-agree a{white-space:nowrap}

/* phones: icon + input share the first row, full-width button underneath
   (responsive.css put the input on its own 100% row, which stranded the icon alone above it) */
@media (max-width:560px){
  body.page-template-page-newsletters .nl-field{padding:6px;row-gap:6px;column-gap:10px;border-radius:28px}
  body.page-template-page-newsletters .nl-ic{margin-left:12px}
  body.page-template-page-newsletters .nl-field input{flex:1 1 0;width:auto;padding:13px 6px 13px 0}
  /* text ink sat 1px low in the full-width button (measured); nudge it up, same 45px height */
  body.page-template-page-newsletters .nl-sub{flex:1 1 100%;padding-top:12px;padding-bottom:14px}
  /* checkbox centred on the first line of the consent text (14px box, 12.6px × 1.5 line) */
  body.page-template-page-newsletters .nl-agree input{margin-top:calc((12.6px * 1.5 - 14px) / 2)}
}

/* ---------- editions grid ----------
   desktop/laptop: 3-up (responsive.css forced 2-up up to 1024px, leaving the third card alone on its row);
   tablet: 2-up; phones: 1-up. A card that would sit alone on the last row spans the row in a horizontal layout. */
body.page-template-page-newsletters .nl-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media (max-width:899px){
  body.page-template-page-newsletters .nl-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:640px){
  body.page-template-page-newsletters .nl-grid{grid-template-columns:minmax(0,1fr)!important}
}

/* the calendar colour was only defined for cards 1–3 — a 4th edition got a transparent month (white on white) */
body.page-template-page-newsletters .nl-grid .nl-card:nth-child(3n+1) .nl-cal{--cm:var(--wine-deep)}
body.page-template-page-newsletters .nl-grid .nl-card:nth-child(3n+2) .nl-cal{--cm:var(--wine)}
body.page-template-page-newsletters .nl-grid .nl-card:nth-child(3n) .nl-cal{--cm:#A6333E}
/* month text: compensate the trailing .02em letter-spacing so it sits centred */
body.page-template-page-newsletters .nl-cal-m{padding-left:.02em}

/* lone last card → full-width horizontal card (calendar left, copy + auto-width button right) */
@media (min-width:900px){
  body.page-template-page-newsletters .nl-card:nth-child(3n+1):last-child{grid-column:1/-1}
  body.page-template-page-newsletters .nl-card:nth-child(3n+1):last-child{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:clamp(24px,2.4vw,34px);align-items:start}
  body.page-template-page-newsletters .nl-card:nth-child(3n+1):last-child .nl-cal{grid-row:1/4}
  body.page-template-page-newsletters .nl-card:nth-child(3n+1):last-child > :not(.nl-cal){grid-column:2;max-width:68ch}
  body.page-template-page-newsletters .nl-card:nth-child(3n+1):last-child h3{margin-top:0}
  body.page-template-page-newsletters .nl-card:nth-child(3n+1):last-child .nl-cta{width:auto;justify-self:start;padding-inline:32px}
}
@media (min-width:641px) and (max-width:899px){
  body.page-template-page-newsletters .nl-card:nth-child(odd):last-child{grid-column:1/-1;display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:24px;align-items:start}
  body.page-template-page-newsletters .nl-card:nth-child(odd):last-child .nl-cal{grid-row:1/4}
  body.page-template-page-newsletters .nl-card:nth-child(odd):last-child > :not(.nl-cal){grid-column:2}
  body.page-template-page-newsletters .nl-card:nth-child(odd):last-child h3{margin-top:0}
  body.page-template-page-newsletters .nl-card:nth-child(odd):last-child .nl-cta{width:auto;justify-self:start;padding-inline:32px}
}