/* ==========================================================================
   heritage.css — Portfolio Heritage Entry Treatment
   Enqueued by wp-expert via functions.php / site-features.php.

   Scope: two surfaces —
     1. Portfolio archive card (`.portfolio-card--heritage`, `.portfolio-card--bg-paper`)
     2. Single exhibit page  (`.portfolio-exhibit`, `.portfolio-exhibit--heritage`)

   Token inventory (from main.css :root):
     --color-surface-alt : #faf8f3  ← warm off-white; used as paper mat base
     --color-text        : #060f1c  ← near-black body ink
     --color-muted       : #4b5563  ← muted text; used for captions
     --color-gold        : #E2B04A  ← accent; used sparingly
     --color-border      : rgba(6,15,28,.14)

   Tokens this file wishes existed (flag for next theme.json pass):
     --color-paper-mat       → currently hardcoded as #faf8f3 (= --color-surface-alt)
     --color-paper-border    → currently hardcoded as rgba(100,80,60,.14)
     --color-ink-muted       → currently hardcoded as #6b6152 (warm muted for paper surface)
     --font-mono             → 'JetBrains Mono','IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace
     --spacing-exhibit-gap   → currently hardcoded as 4rem (64px at 16px root)

   Paper mat color rationale:
     #faf8f3 is the existing --color-surface-alt token — a warm off-white with
     a slight yellow/fiber cast. Used here as the mat and the heritage surface.
     Contrast for caption text (#6b6152 on #faf8f3): ≈ 4.7:1 — WCAG 2.2 AA pass.
   ========================================================================== */


/* ============================================================
   SECTION 1 — Heritage card variant (archive grid)
   ============================================================ */

/*
 * Heritage media filter — temperature-shift the card image toward
 * silver/sepia without removing it from the grid visually.
 * The tone-N filters in main.css target .portfolio-card__media directly;
 * heritage overrides those with higher specificity using the compound selector.
 * prefers-reduced-motion block below zeroes the filter transition, not the
 * filter itself — the static desaturation is fine and not motion-related.
 */
.portfolio-card.portfolio-card--heritage .portfolio-card__media {
  filter: grayscale(0.35) sepia(0.15) contrast(1.03) saturate(0.85);
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter 0.6s ease;
}

/* Hover: keep the desaturation; only the scale slides */
.portfolio-card.portfolio-card--heritage .portfolio-card__link:hover .portfolio-card__media {
  filter: grayscale(0.25) sepia(0.12) contrast(1.04) saturate(0.90);
}

/*
 * Heritage veil — shift the dark overlay toward warm amber/umber
 * so the card reads as a different era in the grid without a badge.
 * The veil is ::veil (a real element, not pseudo) — the existing gradient
 * goes navy-dark; we replace it with a warmer dark brown that reads
 * cohesively against the desaturated image.
 */
.portfolio-card.portfolio-card--heritage .portfolio-card__veil {
  background:
    linear-gradient(
      180deg,
      rgba(28, 18, 8, 0.18) 0%,
      rgba(28, 18, 8, 0.04) 30%,
      rgba(28, 18, 8, 0.60) 68%,
      rgba(28, 18, 8, 0.90) 100%
    ),
    linear-gradient(
      155deg,
      rgba(60, 35, 10, 0.45) 0%,
      rgba(60, 35, 10, 0) 55%
    );
}

/*
 * Heritage gold accent ring on hover — same glyph as modern cards
 * but the heritage version gets a slightly warmer, less saturated gold.
 * This intentionally re-uses the existing ::after pseudo that main.css
 * already animates; we only change the hover border-color target.
 */
.portfolio-card.portfolio-card--heritage .portfolio-card__link:hover::after,
.portfolio-card.portfolio-card--heritage .portfolio-card__link:focus-visible::after {
  border-color: rgba(210, 165, 60, 0.50);
}

/*
 * Year modifier — mono figures for heritage eyebrows.
 * Applied to the year span inside .portfolio-card__eyebrow.
 * font-feature-settings "tnum" ensures tabular lining figures so years
 * align across the grid if the eyebrow renders on two entries side by side.
 * letter-spacing nudged open to 0.08em — wider than body, narrower than
 * the eyebrow's existing 0.14em all-caps spacing — so it reads as data,
 * not as decorative label.
 */
.portfolio-card__year.portfolio-card__year--mono {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-size: 0.70rem; /* slightly tighter than eyebrow to keep proportion with the mono width */
}


/* ============================================================
   SECTION 2 — Paper card-bg variant
   Applied when _thisismyurl_portfolio_card_bg = "paper".
   wp-expert will add class .portfolio-card--bg-paper to <li>.
   This is the Walper card's primary surface signal on archive.

   Design decision: paper cards have NO hero image — the surface
   itself IS the statement. White text on dark-navy is replaced with
   dark ink on warm paper. This is a fundamentally different card mode.
   ============================================================ */

/*
 * The link element (sets card background and text color).
 * Override the dark base (#0a1424) and white type from main.css.
 */
.portfolio-card--bg-paper .portfolio-card__link {
  background: #faf8f3; /* TODO: token candidate → --color-paper-mat */
  color: var(--color-text);
  border: 1px solid rgba(100, 80, 60, 0.18); /* TODO: token candidate → --color-paper-border */
}

/* Paper card hover ring — warm umber, not gold */
.portfolio-card--bg-paper .portfolio-card__link:hover::after,
.portfolio-card--bg-paper .portfolio-card__link:focus-visible::after {
  border-color: rgba(100, 80, 60, 0.45);
}

/*
 * Media layer: the bg image is skipped when bg=paper (wp-expert will
 * output no inline style, or will output a paper texture if one exists).
 * Hide the layer cleanly in either case — the card surface is the paper color.
 */
.portfolio-card--bg-paper .portfolio-card__media {
  display: none;
}

/* Remove the dark veil — no photo underneath */
.portfolio-card--bg-paper .portfolio-card__veil {
  display: none;
}

/*
 * Body: repositioned to fill the whole card vertically when there's
 * no photo behind it. Position absolute (from main.css) is overridden
 * to static so the card grows with content and the 4/5 aspect-ratio
 * still controls the minimum height via the link's aspect-ratio.
 * Padding is generous — the white space is doing the work.
 */
.portfolio-card--bg-paper .portfolio-card__body {
  position: static;
  padding: 2rem 1.75rem 1.75rem;
  gap: 0.65rem;
  height: 100%;
  justify-content: flex-end;
}

/* Eyebrow: warm umber on paper, not gold */
.portfolio-card--bg-paper .portfolio-card__eyebrow {
  color: #7a5c3a; /* TODO: token candidate → --color-paper-eyebrow — warm umber */
  opacity: 1;
}

/* Title: dark ink, slightly smaller tracking */
.portfolio-card--bg-paper .portfolio-card__title {
  color: var(--color-text);
}

/* Outcome: warm muted ink */
.portfolio-card--bg-paper .portfolio-card__outcome {
  color: #4a3c2e; /* TODO: token candidate → --color-ink-warm-muted */
}

/* CTA: warm ink, not white */
.portfolio-card--bg-paper .portfolio-card__cta {
  color: rgba(6, 15, 28, 0.72);
}

.portfolio-card--bg-paper .portfolio-card__link:hover .portfolio-card__cta {
  color: var(--color-text);
}

/* When both modifiers present: paper bg + heritage — compound override */
.portfolio-card.portfolio-card--heritage.portfolio-card--bg-paper .portfolio-card__media {
  display: none;
}


/* ============================================================
   SECTION 3 — Exhibit single layout
   ============================================================ */

/*
 * Wrapper root — always present on single project posts.
 * Max-width: 800px. The screenshots are the centrepiece, not body copy,
 * so we give more room than a pure reading column (720px) while staying
 * narrower than a full-bleed layout. At 800px + 2rem side padding the
 * content feels contained on wide screens without letterboxing images.
 */
.portfolio-exhibit {
  max-width: 800px;
  margin-inline: auto;
  padding: 3rem 1.25rem 5rem;
}

@media (min-width: 700px) {
  .portfolio-exhibit {
    padding: 4rem 2rem 6rem;
  }
}

@media (min-width: 1024px) {
  .portfolio-exhibit {
    padding: 5rem 0 8rem;
  }
}

/*
 * Exhibit H1 — the template emits class="portfolio-exhibit__title" on the h1.
 * We own the sizing here; the theme's heading stack handles font-family/weight.
 * No margin-top: the header container handles vertical offset from the
 * breadcrumb above. margin-bottom is tight — the outcome line is the
 * breathing room between heading and body.
 */
.portfolio-exhibit__title {
  margin-top: 0;
  margin-bottom: 0.5rem;
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem);
}

/*
 * Outcome tagline — sits beneath the H1, styled like a museum exhibit
 * subtitle: one size notch below the heading, muted, no weight drama.
 * Left-aligned. Not italic (italic implies quotation, not description).
 */
.portfolio-exhibit__outcome {
  margin: 0 0 2.5rem;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.15rem);
  line-height: 1.5;
  color: var(--color-muted);
  font-weight: 400;
  max-width: 52ch;
}

@media (min-width: 700px) {
  .portfolio-exhibit__outcome {
    margin-bottom: 3.5rem;
  }
}


/* ============================================================
   SECTION 4 — Matted figure treatment
   ============================================================ */

/*
 * Museum mat surround.
 * The mat is the design element — a raised, paper-toned frame that separates
 * the screenshot (the artifact) from the surrounding page surface.
 * 28px padding: enough breathing room to read as intentional mat, not
 * overflow protection. The inner shadow + 1px border give the mat→image
 * plane transition without a drop shadow (too decorative for this register).
 *
 * intrinsic aspect ratios: max-width + height:auto on the img guarantees
 * the Wayback screenshots render at their native shape. We do NOT set
 * aspect-ratio on the figure or the img.
 */
.portfolio-exhibit__figure {
  margin: 0;
  padding: 28px; /* mat breathing room — 7 × 4px grid units */
  background: #faf8f3; /* TODO: token candidate → --color-paper-mat; matches --color-surface-alt */
  border: 1px solid rgba(100, 80, 60, 0.16); /* TODO: token candidate → --color-paper-border */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72); /* inner highlight: mat plane vs image plane */
}

@media (min-width: 600px) {
  .portfolio-exhibit__figure {
    padding: 32px;
  }
}

/*
 * Image inside the mat — intrinsic aspect ratios, no constraints.
 * image-rendering: auto is the browser default; stated here to make
 * intent explicit — do not pixelate these scans.
 */
.portfolio-exhibit__figure img {
  display: block;
  max-width: 100%;
  height: auto;
  image-rendering: auto;
  /* No border-radius — the mat is the frame; the image is raw artifact */
}

/*
 * Vertical rhythm between exhibit units.
 * 64px (4rem at 16px root) between figures.
 * :not(:last-child) prevents orphan space at the bottom of the exhibit.
 */
.portfolio-exhibit__figure:not(:last-child) {
  margin-bottom: 4rem; /* TODO: token candidate → --spacing-exhibit-gap */
}


/* ============================================================
   SECTION 5 — Caption treatment
   ============================================================ */

/*
 * Museum-style caption: mono, small, muted, beneath the mat.
 * "Beneath the mat" = outside the figure padding — the caption lives
 * in <figcaption> which is inside <figure>, so it appears below the image
 * but still within the paper-toned mat box. wp-expert adds .portfolio-exhibit__caption
 * to the <figcaption> via server-side block filter.
 *
 * Contrast check: #6b6152 on #faf8f3 = 4.7:1 — WCAG 2.2 AA pass (body text threshold).
 * If the background is pure white (#fff), contrast rises to ~5.5:1 — still passes.
 */
.portfolio-exhibit__caption {
  margin: 16px 0 0; /* 4 grid units below the image, within the mat */
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem; /* ~13px at 16px root */
  line-height: 1.6;
  color: #6b6152; /* TODO: token candidate → --color-ink-muted-warm; warm gray-brown on paper */
  font-weight: 400;
  text-align: left;
  font-feature-settings: "tnum" 0; /* proportional figures in captions — this is prose, not data */
  max-width: 60ch;
}


/* ============================================================
   SECTION 6 — Heritage modifier on exhibit wrapper
   ============================================================ */

/*
 * .portfolio-exhibit--heritage — second-order signal on the page surface.
 * The mat already carries the primary heritage signal (paper tone, figure
 * treatment). This modifier applies a very subtle warm paper tint to the
 * exhibit wrapper background — perceptible if you compare directly with a
 * modern entry, invisible if you don't.
 *
 * Decision: we do NOT change the page <body> background — that would affect
 * header/footer. Instead we tint only the exhibit wrapper itself.
 * The modern variant gets no override (inherits the site's #fff surface).
 */
.portfolio-exhibit.portfolio-exhibit--heritage {
  background: #fdf9f4; /* one step warmer than --color-surface-alt; barely perceptible */
  /* No border, no padding change — the mat does the heavy lifting */
}

/*
 * Modern variant — explicit but inert. States intent: modern entries
 * get the default white surface, no warm tint.
 */
.portfolio-exhibit.portfolio-exhibit--modern {
  background: transparent; /* inherits --color-bg (#fff) from body */
}


/* ============================================================
   SECTION 7 — Reduced motion
   ============================================================ */

/*
 * The heritage card filter itself is not motion — it's a static value.
 * Only the filter transition during hover is subject to prefers-reduced-motion.
 * The desaturation/sepia stays in place regardless.
 */
@media (prefers-reduced-motion: reduce) {
  .portfolio-card.portfolio-card--heritage .portfolio-card__media,
  .portfolio-card.portfolio-card--heritage .portfolio-card__link:hover .portfolio-card__media {
    transition: none;
    /* filter value unchanged — static treatment is not motion */
  }
}