/* Easy Reader pledge / subscription pitch — TCK-11065.
 *
 * STYLING CONTRACT
 * This block must read as part of the paper, not as a widget bolted onto it.
 * Everything below consumes the site's OWN Tailwind v4 design tokens, read off
 * the live site on 2026-09-27, with hard-coded fallbacks only in case a token
 * is ever renamed:
 *
 *   --color-primary            #ff0004   masthead red, Subscribe button, kickers
 *   --color-accent             #e60004   darker red, hover
 *   --color-foreground         #0f1729   body ink
 *   --color-border             #e5e7eb   every hairline on the site
 *   --color-muted              #f3f4f6   subtle surface
 *   --color-muted-foreground   #6b7280   secondary text
 *   --font-serif               Frank Ruhl Libre  headlines
 *   --font-sans                Inter             everything else
 *
 * If the site is ever rebranded, this block follows automatically.
 *
 * LAYOUT
 * Matches the page's own section rhythm exactly: a full-bleed <section> with a
 * bottom hairline, wrapping a `container mx-auto px-4 lg:px-8 py-8 md:py-12`
 * inner at max-width 1536px. That is what every other homepage section does, so
 * the block lines up with the nav and the story grid instead of floating.
 *
 * Kevin's brief: "in prominent position. But it doesn't take over the page.
 * Don't want reader to have to click past it to reader stories." Inline only —
 * never fixed, never a modal, never an overlay.
 */

.er-pledge {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  background: var(--color-background, #fff);
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  color: var(--color-foreground, #0f1729);
  font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, sans-serif);
}

.er-pledge *,
.er-pledge *::before,
.er-pledge *::after { box-sizing: inherit; }

.er-pledge[hidden] { display: none !important; }

/* Mirrors `container mx-auto px-4 lg:px-8 py-8 md:py-12`. */
.er-pledge__inner {
  max-width: 1536px;
  margin-inline: auto;
  padding: 2rem 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

@media (min-width: 768px) { .er-pledge__inner { padding-block: 3rem; } }
@media (min-width: 1024px) { .er-pledge__inner { padding-inline: 2rem; } }

/* The art column only exists once the artwork is actually present. */
.er-pledge--has-art .er-pledge__inner {
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  align-items: start;
  gap: 2rem;
}

.er-pledge__art { margin: 0; }

.er-pledge__art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* ---- copy --------------------------------------------------------------
 * The kicker copies the site's section kickers exactly: Inter 12px / 700 /
 * 1.2px tracking / uppercase / primary red.
 * ---------------------------------------------------------------------- */

.er-pledge__brand {
  margin: 0 0 .5rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-primary, #ff0004);
}

/* Headlines on this site are Frank Ruhl Libre 700, leading-tight. */
.er-pledge__head {
  margin: 0 0 .4rem;
  font-family: var(--font-serif, "Frank Ruhl Libre", Georgia, serif);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem);
  line-height: 1.15;
  color: var(--color-foreground, #0f1729);
}

/* Kevin, 2026-09-24: "add line below free press isn't free". */
.er-pledge__tagline {
  margin: 0 0 1.25rem;
  max-width: 60ch;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-muted-foreground, #6b7280);
}

.er-pledge__lede {
  margin: 0 0 .75rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-foreground, #0f1729);
}

/* ---- options ----------------------------------------------------------- */

.er-pledge__options {
  display: grid;
  /* Capped so the five options stay a tight row on a wide screen instead of
     stretching across 1536px with a gulf between each label and its amount. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  max-width: 1120px;
  gap: .75rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.er-pledge__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .875rem 1rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 6px;
  background: var(--color-background, #fff);
  cursor: pointer;
  transition: border-color .15s cubic-bezier(.4, 0, .2, 1),
              background-color .15s cubic-bezier(.4, 0, .2, 1);
}

.er-pledge__option:hover {
  border-color: var(--color-primary, #ff0004);
  background: var(--color-muted, #f3f4f6);
}

.er-pledge__option:focus-within {
  border-color: var(--color-primary, #ff0004);
  box-shadow: 0 0 0 3px rgba(255, 0, 4, .18);
}

.er-pledge__option:has(input:checked) {
  border-color: var(--color-primary, #ff0004);
  background: var(--color-muted, #f3f4f6);
}

/* Native control stays in the a11y tree and keeps keyboard behaviour; the
 * visible control is .er-pledge__box. */
.er-pledge__option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.er-pledge__box {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid var(--color-gray-400, #9ca3af);
  border-radius: 3px;
  background: var(--color-background, #fff);
  transition: border-color .15s, background-color .15s;
}

.er-pledge__option input:checked ~ .er-pledge__box {
  border-color: var(--color-primary, #ff0004);
  background: var(--color-primary, #ff0004);
  box-shadow: inset 0 0 0 2.5px var(--color-background, #fff);
}

.er-pledge__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .875rem;
  line-height: 1.35;
}

.er-pledge__amount {
  font-family: var(--font-serif, "Frank Ruhl Libre", Georgia, serif);
  font-weight: 700;
  font-size: 1.0625rem;
  white-space: nowrap;
}

/* ---- the free option's email step -------------------------------------- */

.er-pledge__free {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 1rem 0 0;
  padding: 1rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 6px;
  background: var(--color-muted, #f3f4f6);
}

.er-pledge__free[hidden] { display: none; }

.er-pledge__free label {
  flex: 1 1 100%;
  font-size: .8125rem;
  color: var(--color-muted-foreground, #6b7280);
}

.er-pledge__free input[type="email"] {
  flex: 1 1 260px;
  min-width: 0;
  padding: .5rem .75rem;
  border: 1px solid var(--color-input, #e5e7eb);
  border-radius: 6px;
  background: var(--color-background, #fff);
  font: inherit;
  font-size: .875rem;
  color: var(--color-foreground, #0f1729);
}

.er-pledge__free input[type="email"]:focus-visible {
  outline: none;
  border-color: var(--color-primary, #ff0004);
  box-shadow: 0 0 0 3px rgba(255, 0, 4, .18);
}

/* Matches the header Subscribe button: primary red, white, 6px, Inter 600. */
.er-pledge__btn {
  flex: 0 0 auto;
  padding: .5rem 1rem;
  border: 0;
  border-radius: 6px;
  background: var(--color-primary, #ff0004);
  color: var(--color-primary-foreground, #fff);
  font-family: inherit;
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
}

.er-pledge__btn:hover { background: var(--color-accent, #e60004); }
.er-pledge__btn:disabled { opacity: .5; cursor: default; }

/* ---- status / footer ---------------------------------------------------- */

.er-pledge__status {
  margin: .75rem 0 0;
  font-size: .8125rem;
  min-height: 1.2em;
  color: var(--color-muted-foreground, #6b7280);
}

.er-pledge__status[data-tone="error"] { color: var(--color-primary, #ff0004); }
.er-pledge__status[data-tone="ok"]    { color: #15803d; }

.er-pledge__foot {
  margin: 1rem 0 0;
  font-size: .8125rem;
  color: var(--color-muted-foreground, #6b7280);
}

.er-pledge__foot a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s;
}

.er-pledge__foot a:hover { color: var(--color-primary, #ff0004); }

/* ---- compact variant, for ad positions ---------------------------------
 * Kevin: "It can also be spread through the paper in ad positions, or as a
 * text". Drops the art and tagline and stacks the options so it fits a
 * 300x250 / 300x600 rail.
 * ---------------------------------------------------------------------- */

.er-pledge[data-variant="compact"] {
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 6px;
}
.er-pledge[data-variant="compact"] .er-pledge__inner {
  grid-template-columns: minmax(0, 1fr);
  padding: 1.25rem;
  gap: 0;
}
.er-pledge[data-variant="compact"] .er-pledge__art,
.er-pledge[data-variant="compact"] .er-pledge__tagline { display: none; }
.er-pledge[data-variant="compact"] .er-pledge__head { font-size: 1.25rem; }
.er-pledge[data-variant="compact"] .er-pledge__options { grid-template-columns: minmax(0, 1fr); }

/* ---- text variant, for in-copy placement -------------------------------- */

.er-pledge[data-variant="text"] {
  border-top: 1px solid var(--color-border, #e5e7eb);
}
.er-pledge[data-variant="text"] .er-pledge__inner { padding-block: 1.25rem; gap: 0; }
.er-pledge[data-variant="text"] .er-pledge__art,
.er-pledge[data-variant="text"] .er-pledge__brand { display: none; }
.er-pledge[data-variant="text"] .er-pledge__head { font-size: 1.25rem; }

/* ---- narrow screens ----------------------------------------------------- */

/* Phone. Kevin: "doesn't take over the page ... don't want reader to have to
 * click past it to reader stories." At full desktop density this block fills
 * the whole first screen on a phone, which is exactly the thing he does not
 * want, so everything tightens up and a headline stays close to the fold. */
@media (max-width: 767px) {
  .er-pledge--has-art .er-pledge__inner { grid-template-columns: minmax(0, 1fr); }
  .er-pledge__art { max-width: 160px; }
  .er-pledge__inner { padding-block: 1.25rem; gap: 1rem; }
  .er-pledge__brand { margin-bottom: .25rem; }
  .er-pledge__head { font-size: 1.375rem; margin-bottom: .25rem; }
  .er-pledge__tagline { font-size: .8125rem; line-height: 1.4; margin-bottom: .75rem; }
  .er-pledge__lede { font-size: .8125rem; margin-bottom: .5rem; }
  .er-pledge__options { grid-template-columns: minmax(0, 1fr); gap: .375rem; }
  .er-pledge__option { padding: .5rem .75rem; }
  .er-pledge__amount { font-size: .9375rem; }
  .er-pledge__foot { margin-top: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .er-pledge__option,
  .er-pledge__box,
  .er-pledge__btn,
  .er-pledge__foot a { transition: none; }
}