/* File: public/css/components/social-card.css */

/*
 * Social-card visual surface (Phase 2 of social-cards-implementation-plan.md).
 *
 * The card is ALWAYS authored at 1080x1080 logical pixels — Instagram /
 * Facebook square spec. To fit the creator surface, the card is wrapped in
 * a 540x540 frame that visually scales it to 50%; the inner element keeps
 * its native size so Phase 3's PNG rasterizer can capture it pixel-perfect.
 *
 * Two variants share the same skeleton; only the surface + ink colours
 * invert. Both derive from the 4 brand cores in _variables.css; nothing
 * here is a hardcoded hex (architecture.md §22.1).
 *
 * Green is reserved for quiz correctness across the codebase. Cards must
 * NOT use the success palette.
 */

/* -----------------------------------------------------------------------
   Frame: clipping viewport. Size is parameterised via CSS custom props so
   the same renderer can produce different display sizes for different
   contexts (right-column standalone preview at 540px, left-column embed
   at ~300px). Defaults match the standalone social_card view page.
   ----------------------------------------------------------------------- */
.social-card-frame {
  width: var(--card-frame-px, 540px);
  height: var(--card-frame-px, 540px);
  overflow: hidden;
  margin: 0 auto;
  border: 1px solid var(--brand-ink);
  border-radius: 12px;
  background: var(--brand-bg);
}

/* -----------------------------------------------------------------------
   Card: native 1080x1080 — DO NOT change the size here. Phase 3 rasterizes
   the unscaled element; resizing breaks the capture geometry. The visual
   shrink happens via `transform: scale()`, parameterised so any context
   can pick its own scale (must equal `framePx / 1080`).
   ----------------------------------------------------------------------- */
.social-card {
  width: 1080px;
  height: 1080px;
  transform: scale(var(--card-frame-scale, 0.5));
  transform-origin: top left;

  display: grid;
  grid-template-rows: 1fr auto;
  align-items: stretch;

  padding: 80px;
  box-sizing: border-box;

  font-family: 'Naoko', sans-serif;
  font-weight: 700;
  text-align: center;

  /* Defaults match the 'pink' variant (the JSON default). The variant
     modifier classes below override; any future third variant just adds
     another modifier without touching the base. */
  background: var(--brand-bg);
  color: var(--brand-ink);
}

.social-card--pink {
  background: var(--brand-bg);
  color: var(--brand-ink);
}

.social-card--dark {
  background: var(--brand-ink);
  color: var(--brand-bg);
}

/* -----------------------------------------------------------------------
   Body: vertically + horizontally centered block stack
   ----------------------------------------------------------------------- */
.social-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  overflow: hidden;
  /* Inherit the variant's ink colour for all descendant text. */
  color: inherit;
}

/* Text blocks render through the standard TextMediaBlockRenderer markup
   (`.text-block > .content-normal-text`). We override the size + alignment
   inside the card scope only — the public content view is unaffected.

   Weight contrast: Naoko ships 200/300/400/500/700/800/900. The brand IG
   cards use Naoko Regular (400) for body text and Naoko Black (900) for
   `<strong>`, giving a 500-point spread that reads instantly. Earlier
   passes used 500/900 (400-point spread) and 700/800 (100-point) — both
   read too uniform compared to the brand templates. */
.social-card__body .text-block,
.social-card__body .content-normal-text {
  margin: 0;
  text-align: center;
  font-size: 64px;
  line-height: 1.18;
  font-weight: 400;
  color: inherit;
}

.social-card__body .text-block strong,
.social-card__body .content-normal-text strong {
  font-weight: 900;
  /* Slightly negative tracking on the bold weight visually thickens the
     glyphs (letters sit closer = more ink density per word) — pulls the
     contrast vs body text closer to the IG reference rendering. */
  letter-spacing: -0.01em;
}

/* The standard renderer wraps text blocks with `<br/>` between them; the
   gap on the body container handles spacing, so suppress the trailing
   line breaks. */
.social-card__body .text-block + br {
  display: none;
}

/* -----------------------------------------------------------------------
   Image blocks. The standard renderer emits `.media-row > .img-col > img`
   with explicit `width:%` on `.img-col`. We override sizing to fit inside
   the card without overrunning the body area.
   ----------------------------------------------------------------------- */
.social-card__body .media-row {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

.social-card__body .img-col {
  float: none !important;
  width: auto !important;
  max-width: 100%;
}

.social-card__body img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 520px;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
}

/* -----------------------------------------------------------------------
   Wordmark footer. Uses currentColor so it tracks the variant's ink.
   PHASE-2 NOTE: rendered as Naoko-bold text until the brand SVG asset
   lands (see SocialCardRenderer's TODO + plan doc Phase 2 step 5).
   ----------------------------------------------------------------------- */
.social-card__wordmark {
  text-align: center;
  margin-top: 24px;
  color: inherit;
}

.social-card__wordmark-text {
  font-family: 'Naoko', sans-serif;
  font-weight: 800;
  font-size: 56px;
  letter-spacing: 0.01em;
  color: inherit;
}

.social-card__wordmark-svg {
  display: inline-block;
  height: 64px;
  color: inherit; /* SVG must use `currentColor` for fills/strokes. */
}

.social-card__wordmark-svg svg {
  height: 100%;
  width: auto;
}

/* -----------------------------------------------------------------------
   Section wrapper: the title + frame combo emitted by the dispatcher.
   ----------------------------------------------------------------------- */
.social-card-section {
  margin: 1.5rem 0;
}

.social-card-section h3 {
  margin: 0 0 0.75rem;
  font-weight: 700;
}

/* -----------------------------------------------------------------------
   Inline associated-social-cards section (on source-content edit pages).
   ----------------------------------------------------------------------- */

/* Empty-state hint auto-toggle: shown by default, hidden as soon as any
   `.associated-card` exists inside the section. Uses :has() so add/delete
   updates the hint visibility without any JS bookkeeping. Supported in
   Chrome 105+, Safari 15.4+, Firefox 121+ — covers the project's target
   browsers. */
.associated-social-cards:has(.associated-card) .associated-social-cards__empty-hint {
  display: none;
}

.social-card-placeholder {
  width: 540px;
  height: 540px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  box-sizing: border-box;
  border: 1px dashed var(--brand-ink);
  border-radius: 12px;
  color: var(--text-muted);
  font-style: italic;
}