/* /color-analysts/ and /palette-cards/ - the two offer pages
   (SEO_THURSDAY_LOOP_SPEC.md section 5).

   Loaded on top of blog.css, which both pages inherit through blog/base.html.
   Only what these two layouts need is here: the region jump list, the analyst
   cards, the palette-card blocks and the embed snippet. Everything else on
   both pages is the blog's own type and chrome, on purpose - a page that
   looked like a different site would read as a different site.

   No color value is typed in either TEMPLATE (the spec bars it there, because
   the cards are images and neither page makes a color claim of its own). The
   greys and rules below are the site's own design tokens, resolved here, which
   is where every other stylesheet in this directory keeps them. */

.offer { max-width: var(--measure); padding-block: var(--sp-6) var(--sp-7); }
/* The directory only. Sixty cards in a 66ch column is two columns and a very
   long page; a wider container gives three and takes a third off the scroll.
   The prose inside it stays at reading measure, because a paragraph that runs
   the full width of a card grid is not readable. */
.offer--directory { max-width: 62rem; }
.offer--directory .post__body,
.offer--directory .post__cta { max-width: var(--measure-narrow); }
.offer__lede { font-size: var(--text-base); color: var(--color-muted); max-width: var(--measure-narrow); }

/* ---------- the region jump list ---------- */
/* Thirty headings on the directory. Without this a reader looking for their
   own state scrolls past every other one, which is the whole failure mode a
   by-state directory has. */
.offer__jump {
  list-style: none; margin: var(--sp-5) 0 var(--sp-7); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.offer__jump a {
  display: inline-block; padding: 0.35rem var(--sp-3);
  border: 1px solid var(--color-rule-soft); border-radius: var(--r-pill);
  background: var(--color-paper-2);
  font-family: var(--font-display); font-size: var(--text-xs);
  color: var(--color-ink); text-decoration: none;
  transition: border-color var(--dur-1) var(--ease-out);
}
.offer__jump a:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ---------- one region ---------- */
.offer__region { margin-top: var(--sp-7); scroll-margin-top: var(--sp-5); }
.offer__region h2 {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-md);
  margin: 0 0 var(--sp-4); padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--color-rule-soft);
}

.offer__cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.offer__card {
  padding: var(--sp-4) var(--sp-5);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule-soft);
  border-radius: var(--r-panel);
}
.offer__card h3 {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
  margin: 0 0 var(--sp-2); line-height: 1.35;
}
.offer__card h3 a { color: var(--color-ink); text-decoration: none; }
.offer__card h3 a:hover { color: var(--color-accent); text-decoration: underline; }
.offer__where {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display); font-size: var(--text-xs);
  letter-spacing: 0.04em; color: var(--color-neutral);
}
.offer__card p { margin: 0 0 var(--sp-3); font-size: var(--text-xs); line-height: 1.7; color: var(--color-muted); }
.offer__card p:last-child { margin-bottom: 0; }
.offer__site {
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.04em; color: var(--color-accent); text-decoration: none;
}
.offer__site:hover { text-decoration: underline; }

/* ---------- the twelve palette-card blocks ---------- */
.offer__season {
  margin-top: var(--sp-7); padding-top: var(--sp-6);
  border-top: 1px solid var(--color-rule-soft);
  scroll-margin-top: var(--sp-5);
}
.offer__season:first-of-type { border-top: 0; padding-top: 0; }
.offer__season h2 {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-md);
  margin: 0 0 var(--sp-4);
}
.offer__card-img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--color-rule-soft); border-radius: var(--r-tile);
  background: var(--color-paper-2);
}
.offer__downloads {
  list-style: none; margin: var(--sp-4) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
}
.offer__downloads a {
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.04em; color: var(--color-accent); text-decoration: none;
}
.offer__downloads a:hover { text-decoration: underline; }

/* The embed snippet. A plain <pre> a reader selects and copies: the CSP is
   script-src 'self' and neither page carries a script, so there is no copy
   button and there is not going to be one. It scrolls inside itself rather
   than widening the page on a phone. */
.offer__embed {
  margin: var(--sp-4) 0 0; padding: var(--sp-4);
  background: var(--color-paper-3);
  border: 1px solid var(--color-rule-soft); border-radius: var(--r-tile);
  font-size: 0.78rem; line-height: 1.7; color: var(--color-ink-2);
  /* WRAPS rather than scrolls sideways. The snippet is one long line with two
     absolute URLs in it, and a reader on a phone should be able to see the
     whole thing before copying it. pre-wrap wraps for display only, so a
     selection still copies the single line the browser needs. */
  white-space: pre-wrap; overflow-wrap: anywhere;
  -webkit-text-size-adjust: 100%;
}

@media (max-width: 30rem) {
  .offer__cards { grid-template-columns: 1fr; }
  .offer__embed { font-size: 0.72rem; }
}