/*
 * css/share.css - the Share (the public neutral badge-card surface at root
 * "/" WITH "?d=" present, also served at "/r/"), ported pixel-faithfully
 * from docs/design/Share.dc.html: the centered two-column layout, the Badge
 * left, the "take your own Snapshot" controls right. Themed entirely through
 * frontend/css/tokens.css custom properties (never redeclared here).
 *
 * One deliberate deviation from the DC source: its CTA button uses
 * `color:var(--raised)` (a light-theme-only choice). This port uses
 * `var(--accent-ink)` instead, on the same --btn-grad background -- the
 * dark-mode-safe pairing css/result.css's own report-gate CTA already
 * established (light: dark graphite bg + white ink; dark: silver bg + dark
 * ink; see tokens.css's comment on --accent-ink), so the CTA text stays
 * legible in both themes rather than just the one the mockup shows.
 *
 * Every text-bearing rule below declares its own font-family: Playfair
 * Display (var(--brand-display)) for the headline, Inter (var(--brand-sans))
 * for everything else, per the task's Definition of Done.
 */

.share { font-family: var(--brand-sans); background: var(--glow); min-height: 60vh; display: flex; align-items: center; }

.share__wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: clamp(28px, 5vw, 64px) 24px; }

.share__grid {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(32px, 5vw, 64px);
}

/* ---- badge column ---- */
.share__badge-col { flex: 0 1 420px; min-width: 300px; max-width: 440px; display: flex; justify-content: center; }
.share__badge-wrap { display: flex; justify-content: center; width: 100%; }
.share__badge-mount { width: 100%; max-width: 440px; }

/* ---- controls column ---- */
.share__controls { flex: 1 1 320px; min-width: 280px; max-width: 420px; }

.share__eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px;
  font-family: var(--brand-sans); text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 0.72rem; font-weight: 700; color: var(--accent);
}
.share__eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }

.share__headline {
  font-family: var(--brand-display); font-weight: 600; font-size: clamp(2rem, 4.4vw, 2.9rem);
  line-height: 1.04; letter-spacing: -0.02em; margin: 0 0 14px; color: var(--ink);
}

.share__body { font-family: var(--brand-sans); font-size: 1.04rem; line-height: 1.55; color: var(--ink60); margin: 0 0 28px; max-width: 42ch; }

.share__cta {
  font-family: var(--brand-sans); display: inline-flex; align-items: center; gap: 11px;
  background: var(--btn-grad); color: var(--accent-ink); font-weight: 600; font-size: 1.02rem;
  padding: 15px 26px; border-radius: 13px; text-decoration: none; box-shadow: var(--shadow);
  transition: transform 0.18s ease, filter 0.18s ease;
}
.share__cta:hover { transform: translateY(-2px); filter: brightness(1.06); }
.share__cta:active { transform: translateY(1px); filter: brightness(0.96); }
.share__cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.share__cta-arrow { display: inline-block; }

.share__fine { margin: 14px 0 0; font-family: var(--brand-sans); font-size: 0.82rem; color: var(--ink40); }

.share__secondary-row { margin-top: 22px; }
.share__secondary {
  font-family: var(--brand-sans); font-size: 0.9rem; font-weight: 600; color: var(--ink60);
  text-decoration: none; border-bottom: 1.5px solid var(--line); padding-bottom: 2px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.share__secondary:hover { border-color: var(--accent); color: var(--ink); }
.share__secondary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 600px) {
  .share__wrap { padding: 20px 18px 40px; }
  .share__controls { text-align: center; }
  .share__body { margin-left: auto; margin-right: auto; }
  .share__eyebrow { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .share__cta { transition: none; }
}