/* =============================================================================
   KarmaLens Gallery — Cycle 60d "Reading Room" surface
   -----------------------------------------------------------------------------
   The gallery is the public SEO surface and the literary heart of KarmaLens.
   Each card is an anonymous reflection; the share-quote is the artifact.
   This stylesheet treats the surface like a magazine inset: generous negative
   space, a single voice per card, a typographic spine of color per theme.

   Tokens: all spatial / typographic / motion / elevation values come from
   web.css. The only locally-defined tokens are the ten --theme-* accents,
   which drive a thin color spine across the top of each card and the
   detail-page eyebrow chip. Dark-first; light overrides in the cascade.

   SAFETY: never style or expose `dilemma_text` (it is not rendered).
   ========================================================================== */

:root {
  /* Theme accents — anchored around --accent (cool periwinkle), with warm
     counterpoints for human-centered themes (relationships, family, loss) and
     gold/amber for material/honor themes (integrity, money, ambition). */
  --theme-career:        #8097ff;  /* periwinkle — alignment of --accent */
  --theme-relationships: #f0a5b8;  /* warm rose */
  --theme-family:        #f3b994;  /* terracotta peach */
  --theme-integrity:     #e0bd71;  /* gold — alignment of --gold */
  --theme-money:         #b9d39a;  /* sage */
  --theme-health:        #8edcc1;  /* mint sea */
  --theme-community:     #9ec3f0;  /* sky */
  --theme-creative:      #c8a3f0;  /* mauve */
  --theme-ambition:      #f0b870;  /* amber */
  --theme-loss:          #9aa9c8;  /* slate dusk */

  /* Glow variants used for hover treatments and the detail-page spine. */
  --theme-career-glow:        rgba(128, 151, 255, 0.32);
  --theme-relationships-glow: rgba(240, 165, 184, 0.32);
  --theme-family-glow:        rgba(243, 185, 148, 0.32);
  --theme-integrity-glow:     rgba(224, 189, 113, 0.32);
  --theme-money-glow:         rgba(185, 211, 154, 0.32);
  --theme-health-glow:        rgba(142, 220, 193, 0.32);
  --theme-community-glow:     rgba(158, 195, 240, 0.32);
  --theme-creative-glow:      rgba(200, 163, 240, 0.32);
  --theme-ambition-glow:      rgba(240, 184, 112, 0.32);
  --theme-loss-glow:          rgba(154, 169, 200, 0.32);
}

/* Light mode — slightly darker, more saturated accents for legibility on
   white surfaces. */
:root[data-theme="light"] {
  --theme-career:        #4d5bd7;
  --theme-relationships: #c25d77;
  --theme-family:        #c87a4b;
  --theme-integrity:     #a9822d;
  --theme-money:         #6f9a4b;
  --theme-health:        #2f9e84;
  --theme-community:     #4a78b8;
  --theme-creative:      #8b5fb8;
  --theme-ambition:      #c2872a;
  --theme-loss:          #5a6d8c;

  --theme-career-glow:        rgba(77, 91, 215, 0.22);
  --theme-relationships-glow: rgba(194, 93, 119, 0.22);
  --theme-family-glow:        rgba(200, 122, 75, 0.22);
  --theme-integrity-glow:     rgba(169, 130, 45, 0.22);
  --theme-money-glow:         rgba(111, 154, 75, 0.22);
  --theme-health-glow:        rgba(47, 158, 132, 0.22);
  --theme-community-glow:     rgba(74, 120, 184, 0.22);
  --theme-creative-glow:      rgba(139, 95, 184, 0.22);
  --theme-ambition-glow:      rgba(194, 135, 42, 0.22);
  --theme-loss-glow:          rgba(90, 109, 140, 0.22);
}

/* =============================================================================
   1. Hero — observational opener that sets the reading-room tone
   ========================================================================== */

.page-hero.narrow + .gallery-chips,
.gallery-grid-section {
  /* Make sure the chip row + grid breathe down from the hero. */
}

.page-hero.narrow.gallery-detail-hero {
  /* Cards on the detail page should feel like an essay's opening leaf.
     The narrow class already constrains width; we lengthen the vertical. */
  padding-top: var(--space-11);
  padding-bottom: var(--space-9);
}

/* =============================================================================
   2. Theme chip row — bespoke pills with snap-scroll on mobile
   ========================================================================== */

.gallery-chips {
  padding-top: var(--space-2);
  padding-bottom: var(--space-7);
}

.gallery-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.gallery-chip {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted-strong);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--transition-base),
    background var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.gallery-chip:hover {
  color: var(--strong);
  border-color: var(--accent);
  background: var(--surface-soft);
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}

.gallery-chip:focus-visible {
  outline: 3px solid var(--accent-ghost);
  outline-offset: 2px;
}

.gallery-chip.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
  box-shadow: var(--shadow-accent-soft);
}

.gallery-chip-count {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
  /* The leading-character marker (was `· N`) becomes a quiet superscript. */
  position: relative;
  top: -0.25em;
}

.gallery-chip.is-active .gallery-chip-count {
  color: var(--accent);
}

/* Mobile: horizontal scroll-snap row so users can swipe themes on phones. */
@media (max-width: 820px) {
  .gallery-chip-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-3);
    /* Horizontal swipe scroll contained within the gutter — no page overflow. */
    -webkit-overflow-scrolling: touch;
  }
  .gallery-chip-row::-webkit-scrollbar { display: none; }
  .gallery-chip-row { scrollbar-width: none; }
  .gallery-chip { scroll-snap-align: start; flex-shrink: 0; }
}

/* =============================================================================
   3. Card grid — 3-col desktop, 2-col tablet, 1-col phone
   ========================================================================== */

.gallery-grid-section {
  padding-top: var(--space-3);
  padding-bottom: var(--space-8);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--space-6);
}

@media (min-width: 1280px) {
  .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* =============================================================================
   4. Card — the literary unit. Top spine + quote-as-hero.
   ========================================================================== */

.gallery-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-xl);
  /* Focus ring lives on the link, not the article, so keyboard users get a
     full-card outline. */
  transition: transform var(--transition-base);
}

.gallery-card-link:focus-visible {
  outline: 3px solid var(--accent-ghost);
  outline-offset: 4px;
}

/* Override the base .note-card visual so the gallery card has its own
   composition. We keep the .note-card class on the article (templates carry
   it) so other utilities still apply, but visually we re-skin. */
.gallery-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* Pull padding back from .note-card defaults; spine sits inside. */
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-slow),
    border-color var(--transition-base);
}

/* Top color spine — the dyed edge of the hardcover. Default accent; theme
   override below. */
.gallery-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--accent);
  opacity: 0.85;
  transition: opacity var(--transition-base), height var(--transition-base);
}

.gallery-card-link:hover .gallery-card,
.gallery-card-link:focus-visible .gallery-card {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}

.gallery-card-link:hover .gallery-card::before {
  opacity: 1;
  height: 5px;
}

/* Theme-driven spine. The article carries data-theme="<slug>". */
.gallery-card[data-theme="career"]::before        { background: var(--theme-career); }
.gallery-card[data-theme="relationships"]::before { background: var(--theme-relationships); }
.gallery-card[data-theme="family"]::before        { background: var(--theme-family); }
.gallery-card[data-theme="integrity"]::before     { background: var(--theme-integrity); }
.gallery-card[data-theme="money"]::before         { background: var(--theme-money); }
.gallery-card[data-theme="health"]::before        { background: var(--theme-health); }
.gallery-card[data-theme="community"]::before     { background: var(--theme-community); }
.gallery-card[data-theme="creative"]::before      { background: var(--theme-creative); }
.gallery-card[data-theme="ambition"]::before      { background: var(--theme-ambition); }
.gallery-card[data-theme="loss"]::before          { background: var(--theme-loss); }

/* The theme label sits below the spine. Small caps, theme color. */
.gallery-card-theme {
  margin: 0;
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.gallery-card[data-theme="career"]        .gallery-card-theme { color: var(--theme-career); }
.gallery-card[data-theme="relationships"] .gallery-card-theme { color: var(--theme-relationships); }
.gallery-card[data-theme="family"]        .gallery-card-theme { color: var(--theme-family); }
.gallery-card[data-theme="integrity"]     .gallery-card-theme { color: var(--theme-integrity); }
.gallery-card[data-theme="money"]         .gallery-card-theme { color: var(--theme-money); }
.gallery-card[data-theme="health"]        .gallery-card-theme { color: var(--theme-health); }
.gallery-card[data-theme="community"]     .gallery-card-theme { color: var(--theme-community); }
.gallery-card[data-theme="creative"]      .gallery-card-theme { color: var(--theme-creative); }
.gallery-card[data-theme="ambition"]      .gallery-card-theme { color: var(--theme-ambition); }
.gallery-card[data-theme="loss"]          .gallery-card-theme { color: var(--theme-loss); }

/* Public dilemma — the crisp, anonymized question. Reads as the card's
   lead-in question above the verdict + quote. Never the raw dilemma_text. */
.gallery-card-dilemma {
  margin: 0 0 var(--space-2);
  color: var(--strong);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  font-weight: 600;
  letter-spacing: -0.008em;
  text-wrap: balance;
}

/* Verdict — quiet lead-in. Not the headline. */
.gallery-card-verdict {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  font-weight: 500;
}

/* Share quote — the artifact. The card's hero typography. */
.gallery-card-quote {
  margin: var(--space-1) 0 0;
  color: var(--strong);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  font-weight: 600;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* Reflective question — italic, with an accent em-dash lead. */
.gallery-card-question {
  position: relative;
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  color: var(--muted-strong);
  font-size: var(--text-sm);
  font-style: italic;
  line-height: var(--leading-normal);
}

.gallery-card-question::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-style: normal;
  font-weight: 700;
}

.gallery-card[data-theme="career"]        .gallery-card-question::before { color: var(--theme-career); }
.gallery-card[data-theme="relationships"] .gallery-card-question::before { color: var(--theme-relationships); }
.gallery-card[data-theme="family"]        .gallery-card-question::before { color: var(--theme-family); }
.gallery-card[data-theme="integrity"]     .gallery-card-question::before { color: var(--theme-integrity); }
.gallery-card[data-theme="money"]         .gallery-card-question::before { color: var(--theme-money); }
.gallery-card[data-theme="health"]        .gallery-card-question::before { color: var(--theme-health); }
.gallery-card[data-theme="community"]     .gallery-card-question::before { color: var(--theme-community); }
.gallery-card[data-theme="creative"]      .gallery-card-question::before { color: var(--theme-creative); }
.gallery-card[data-theme="ambition"]      .gallery-card-question::before { color: var(--theme-ambition); }
.gallery-card[data-theme="loss"]          .gallery-card-question::before { color: var(--theme-loss); }

/* Footer row: date sits low and quiet. Pushed to the bottom so cards have
   even visual weight regardless of quote length. */
.gallery-card-date {
  margin: auto 0 0;
  padding-top: var(--space-4);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  border-top: 1px solid var(--border-soft);
}

/* =============================================================================
   5. Empty state — contemplative, not sad
   ========================================================================== */

.gallery-grid-section .note-card.narrow {
  /* A single centered card in the empty state. Add an accent left-rule so
     it doesn't look like a generic info panel. */
  position: relative;
  padding: var(--space-7) var(--space-6);
  border-left: 3px solid var(--accent-soft);
  background: var(--surface);
  color: var(--muted-strong);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

/* =============================================================================
   6. Pagination — pill-style with quiet status text
   ========================================================================== */

.gallery-pagination {
  padding-top: var(--space-3);
  padding-bottom: var(--space-7);
}

.gallery-pagination-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.gallery-pagination-status {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.gallery-pagination .button.secondary.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* =============================================================================
   7. CTA — keep the existing faq-teaser shape, just spacing
   ========================================================================== */

.gallery-cta {
  padding-top: var(--space-3);
  padding-bottom: var(--space-9);
}

/* =============================================================================
   8. Detail page — magazine inset. The quote is the largest type on site.
   ========================================================================== */

.gallery-detail-hero {
  text-align: left;
  /* Loosen the narrow constraint slightly for the quote to breathe. */
}

.gallery-detail-hero .eyebrow {
  margin-bottom: var(--space-5);
}

/* Eyebrow link styled as a small chip-link back to the theme page. */
.gallery-detail-hero .eyebrow a {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--accent);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  transition:
    border-color var(--transition-base),
    background var(--transition-base),
    color var(--transition-base),
    transform var(--transition-base);
}

.gallery-detail-hero .eyebrow a:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
}

/* Public dilemma — the crisp anonymized question, shown prominently at the
   top of the detail hero so the card reads as a real question + verdict.
   Never the raw dilemma_text. */
.gallery-detail-dilemma {
  margin: 0 0 var(--space-4);
  color: var(--strong);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Verdict — quiet small-caps lead-in. */
.gallery-detail-verdict {
  margin: 0 0 var(--space-5);
  color: var(--muted-strong);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  line-height: var(--leading-snug);
}

/* The share quote — the largest typography on the entire site. A serif-ish
   register via italic + heavy weight + Inter's contextual alternates. */
.gallery-detail-quote {
  position: relative;
  margin: 0 0 var(--space-7);
  padding-left: var(--space-6);
  color: var(--strong);
  font-size: var(--text-display-lg);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 800;
  font-style: italic;
  font-feature-settings: "cv11", "ss01", "ss03";
  text-wrap: balance;
  /* Quote-as-pull-quote: hanging punctuation pulled into the indent. */
  hanging-punctuation: first;
}

/* Vertical accent rule to the LEFT of the quote — a thin reading-room rule
   like the gilt edge of a page. 60% of quote height. */
.gallery-detail-quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 2px;
  background: var(--accent);
  border-radius: var(--radius-xs);
  opacity: 0.5;
}

.gallery-detail-question {
  margin: 0 0 var(--space-6);
  padding-left: var(--space-6);
  color: var(--muted-strong);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: var(--leading-normal);
  font-weight: 400;
}

.gallery-detail-date {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* The detail page's "muted-lead" inside .gallery-detail-date overrides the
   global muted-lead size — we want this date to be small, not the lead.
   Selector specificity bumped to win. */
.page-hero .muted-lead.gallery-detail-date {
  font-size: var(--text-xs);
}

/* =============================================================================
   9. Share row — bespoke platform pills
   ========================================================================== */

.gallery-share {
  padding-top: var(--space-3);
  padding-bottom: var(--space-7);
}

.gallery-share .eyebrow {
  margin-bottom: var(--space-4);
}

.gallery-share-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Override the base button.secondary to give the share buttons a tighter,
   icon-ready pill. We don't bring in platform brand colors; instead each
   button gets a different accent edge weight so they feel like siblings. */
.gallery-share-row .button.secondary {
  position: relative;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
  transition:
    border-color var(--transition-base),
    color var(--transition-base),
    background var(--transition-base),
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.gallery-share-row .button.secondary::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: var(--space-2);
  border-radius: 50%;
  background: var(--accent);
  transition: transform var(--transition-base), background var(--transition-base);
}

.gallery-share-row .button.secondary:nth-child(2)::before { background: var(--gold); }
.gallery-share-row .button.secondary:nth-child(3)::before { background: var(--accent-dark); }

.gallery-share-row .button.secondary:hover {
  color: var(--strong);
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
  box-shadow: var(--shadow-accent-soft);
}

.gallery-share-row .button.secondary:hover::before {
  transform: scale(1.3);
}

/* =============================================================================
   10. Footnote — quiet accent-left block
   ========================================================================== */

.gallery-detail-footnote {
  position: relative;
  margin-top: var(--space-7);
  padding: var(--space-5) var(--space-6);
  border-left: 3px solid var(--accent-soft);
  background: var(--surface-soft);
  color: var(--muted-strong);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.gallery-detail-footnote p {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--muted-strong);
}

.gallery-detail-footnote p:last-child {
  margin-bottom: 0;
}

/* =============================================================================
   10b. Detail hero — theme-tinted spine + eyebrow when data-theme is set
   ========================================================================== */

.gallery-detail-hero[data-theme="career"]        .gallery-detail-quote::before { background: var(--theme-career); }
.gallery-detail-hero[data-theme="relationships"] .gallery-detail-quote::before { background: var(--theme-relationships); }
.gallery-detail-hero[data-theme="family"]        .gallery-detail-quote::before { background: var(--theme-family); }
.gallery-detail-hero[data-theme="integrity"]     .gallery-detail-quote::before { background: var(--theme-integrity); }
.gallery-detail-hero[data-theme="money"]         .gallery-detail-quote::before { background: var(--theme-money); }
.gallery-detail-hero[data-theme="health"]        .gallery-detail-quote::before { background: var(--theme-health); }
.gallery-detail-hero[data-theme="community"]     .gallery-detail-quote::before { background: var(--theme-community); }
.gallery-detail-hero[data-theme="creative"]      .gallery-detail-quote::before { background: var(--theme-creative); }
.gallery-detail-hero[data-theme="ambition"]      .gallery-detail-quote::before { background: var(--theme-ambition); }
.gallery-detail-hero[data-theme="loss"]          .gallery-detail-quote::before { background: var(--theme-loss); }

.gallery-detail-hero[data-theme="career"]        .eyebrow a { color: var(--theme-career); }
.gallery-detail-hero[data-theme="relationships"] .eyebrow a { color: var(--theme-relationships); }
.gallery-detail-hero[data-theme="family"]        .eyebrow a { color: var(--theme-family); }
.gallery-detail-hero[data-theme="integrity"]     .eyebrow a { color: var(--theme-integrity); }
.gallery-detail-hero[data-theme="money"]         .eyebrow a { color: var(--theme-money); }
.gallery-detail-hero[data-theme="health"]        .eyebrow a { color: var(--theme-health); }
.gallery-detail-hero[data-theme="community"]     .eyebrow a { color: var(--theme-community); }
.gallery-detail-hero[data-theme="creative"]      .eyebrow a { color: var(--theme-creative); }
.gallery-detail-hero[data-theme="ambition"]      .eyebrow a { color: var(--theme-ambition); }
.gallery-detail-hero[data-theme="loss"]          .eyebrow a { color: var(--theme-loss); }

/* =============================================================================
   11. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .gallery-card,
  .gallery-card-link,
  .gallery-card::before,
  .gallery-chip,
  .gallery-share-row .button.secondary,
  .gallery-share-row .button.secondary::before,
  .gallery-detail-hero .eyebrow a {
    transition: none;
  }
  .gallery-card-link:hover .gallery-card { transform: none; }
}