/* ================================================================
   MEMES — classic meme templates with real HTML text boxes
   ----------------------------------------------------------------
   Generated by scripts/blog/memes/render.mjs from ":::meme <id>"
   blocks in blog/posts/*.md. Text lives in the DOM (translatable,
   searchable, accessible), positioned absolutely over the template
   image using the % coordinates from scripts/blog/memes/templates.json.

   Font sizing scales with the figure's own width via a container
   query (not the viewport) so the same markup looks right whether
   the meme sits full-width in a post or shrunk in a preview.
   ================================================================ */

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/anton-latin-400-normal.woff2') format('woff2');
}

.meme {
  container-type: inline-size;
  container-name: meme;
  max-width: 680px;
  margin: 2rem auto;
}

.meme-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  line-height: 0; /* kill the inline-image gap under .meme-img */
}

.meme-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.meme figcaption {
  margin-top: 0.6rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-soft, #57606a);
  line-height: 1.4;
}

/* ----------------------------------------------------------------
   Text boxes — absolutely positioned in % of the frame (set inline
   by render.mjs from templates.json), sized in cqw so they scale
   with the figure's own width via the container query above.
   ---------------------------------------------------------------- */
.meme-box {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* visible, NOT hidden: render.mjs validates that every line fits
     its box with whole words (build fails otherwise), so nothing
     should overflow by design — and descenders/strokes that paint a
     couple px past the line box must not get cut. */
  overflow: visible;
  padding: 0.5cqw 1cqw;
  box-sizing: border-box;
  line-height: 1.18;
  /* NO overflow-wrap/word-break/hyphens: words never break mid-word;
     the size picker in render.mjs chooses a tier that fits whole
     words and throws a validation error when none does. */
  pointer-events: none;
  text-align: center;
}

.meme-box--left    { align-items: flex-start; text-align: left; }
.meme-box--center  { align-items: center; text-align: center; }

/* Impact style: uppercase, white fill, black stroke — the classic
   "meme font" look, readable over any busy photo/art background.
   -webkit-text-stroke is the crisp version; the layered text-shadow
   is the fallback for engines that ignore it (and adds a touch of
   extra contrast everywhere else). */
.meme-box--impact {
  font-family: 'Anton', Impact, 'Arial Narrow Bold', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #fff;
  /* 13px floor on every tier (same floor render.mjs simulates at the
     360px container): meme text stays readable on phones. */
  /* em, not cqw: the stroke/shadow must scale with THIS box's own
     font-size (which varies a lot per data-size tier), not with the
     figure's width — a fixed cqw stroke overwhelms small glyphs like
     "2" or "?" once the tier shrinks the font down. */
  -webkit-text-stroke: 0.045em #000;
  text-shadow:
    -0.055em -0.055em 0 #000, 0.055em -0.055em 0 #000,
    -0.055em  0.055em 0 #000, 0.055em  0.055em 0 #000,
    0 0.08em 0.15em rgba(0, 0, 0, 0.35);
  font-size: max(13px, 6.4cqw);
}
.meme-box--impact.meme-box--white { color: #fff; -webkit-text-stroke-color: #000; }
.meme-box--impact.meme-box--black { color: #111; -webkit-text-stroke-color: #fff; text-shadow:
    -0.055em -0.055em 0 #fff, 0.055em -0.055em 0 #fff,
    -0.055em  0.055em 0 #fff, 0.055em  0.055em 0 #fff; }

/* Label style: bold sans, solid color, no stroke — for text that
   sits on a template's own blank panel/sign/speech-bubble. */
.meme-box--label {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: max(13px, 4.2cqw);
}
.meme-box--label.meme-box--black { color: #111; }
.meme-box--label.meme-box--white { color: #fff; }

/* Per-box size hints — render.mjs picks the tier from the box's own
   geometry (width/height) and the line length, so a long line in a
   small box gets a small tier instead of overflowing. Two scales:
   impact (bigger — the stroke eats into the apparent size) and label
   (smaller, plain bold). Keep roughly in sync with the IMPACT_TIERS /
   LABEL_TIERS numbers in render.mjs. */
.meme-box--impact[data-size="xl"]   { font-size: max(13px, 9cqw); }
.meme-box--impact[data-size="lg"]   { font-size: max(13px, 7cqw); }
.meme-box--impact[data-size="md"]   { font-size: max(13px, 5.4cqw); }
.meme-box--impact[data-size="sm"]   { font-size: max(13px, 4.2cqw); }
.meme-box--impact[data-size="xs"]   { font-size: max(13px, 3.2cqw); }
.meme-box--impact[data-size="xxs"]  { font-size: max(13px, 2.4cqw); }
.meme-box--impact[data-size="xxxs"] { font-size: max(13px, 1.8cqw); }

.meme-box--label[data-size="xl"]   { font-size: max(13px, 6cqw); }
.meme-box--label[data-size="lg"]   { font-size: max(13px, 4.6cqw); }
.meme-box--label[data-size="md"]   { font-size: max(13px, 3.6cqw); }
.meme-box--label[data-size="sm"]   { font-size: max(13px, 2.8cqw); }
.meme-box--label[data-size="xs"]   { font-size: max(13px, 2.1cqw); }
.meme-box--label[data-size="xxs"]  { font-size: max(13px, 1.6cqw); }
.meme-box--label[data-size="xxxs"] { font-size: max(13px, 1.2cqw); }

/* A box can opt into a solid/translucent backing (set inline from an
   optional `bg` in templates.json) — only used where the template's
   own blank area already has printed text that needs covering
   (e.g. change-my-mind's sign) rather than a truly empty panel. */
.meme-box[style*="background"] {
  border-radius: 6px;
}