/* =============================================================================
   artwork-card.css — reusable artwork card component (mobile + desktop)
   Used on the Collection page to display one artwork per card.
   Duplicated once per artwork; each instance contains:
     1. Image placeholder (replaced with <img> when real artwork is available)
     2. Info block: title / status (private only) / inspiration (incl. year)
     3. CTA: "View artwork & story" — underlined text link, no icon

   Text block: title, status, inspiration (incl. year), and CTA are all left-
   aligned and share one left edge, on both mobile and desktop — this file
   has no desktop-only media query for that, it's the base behaviour.

   Whole-card click target: only .artwork-card__cta is a real <a> (the
   only one — screen readers announce one link per card, not several
   redundant ones to the same destination). Its ::after pseudo-element is
   stretched with position: absolute; inset: 0 to cover the entire
   .artwork-card (which is position: relative, the containing block for
   that stretch), so clicking anywhere on the image, title, or metadata
   still activates that one link. Keyboard/tab behavior is unchanged — the
   link's own visible text remains the tab stop, this only expands the
   mouse hit-area.

   .artwork-card__cta is a class shared with the artwork detail page's
   "View Scale Reference" link (see .artwork-info .artwork-card__cta in
   artwork-info.css). Typography, underline, and hover behavior are a
   single shared definition on the bare ".artwork-card__cta" class — both
   reuse contexts render identically. Only structural, context-specific
   concerns (the whole-card stretched ::after click target, and canceling
   the hover-dim so the whole-card hover doesn't fade the text) are scoped
   under ".artwork-card .artwork-card__cta"; the PDP context intentionally
   overrides margin-top only (see artwork-info.css) to fit its own spacing.
   ============================================================================= */


/* ── Card wrapper ────────────────────────────────────────────────────────────── */

.artwork-card {
  position: relative;                /* containing block for .artwork-card__cta::after's stretched hit-area */
  display: flex;
  flex-direction: column;
  align-items: flex-start;           /* left-align children narrower than the card (the CTA) — image/text are already full-width, so this doesn't move them */
  cursor: pointer;                   /* the whole card is one click target — see .artwork-card__cta::after below */
  width: 344px;
  max-width: 100%;                    /* safety on narrow viewports */
  margin-inline: auto;               /* center within .content-area */
  margin-bottom: var(--space-12);    /* 48px to the next card's image */
}

/*
 * .artwork-card:last-child intentionally keeps margin-bottom: var(--space-12) (48px).
 * This ensures 48px of breathing room below the CTA on every card, including the last.
 */


/* ── 1. Artwork image ────────────────────────────────────────────────────────── */
/*
 * Real <img> (TEMPORARY placeholder photo, assets/images/p.jpg — 500 × 659px,
 * reused for every artwork until real per-artwork photography is ready).
 *
 * The box's aspect-ratio is set to the actual photo's own ratio (500:659),
 * not an arbitrary placeholder ratio, so the image fills it exactly — no
 * fixed height, no background fill/letterboxing needed or present. Height is
 * fully derived from width via aspect-ratio; the desktop override in
 * collection-grid.css only changes width, height follows automatically.
 * object-fit: cover is a safety net only (crops by sub-pixel rounding at
 * most, since the ratio already matches) in case a future replacement photo
 * has a slightly different ratio — it will never visibly stretch/distort.
 */

/* Wrapper — exists solely to host the mobile entrance-reveal + scroll
   parallax animation (css/components/reveal.css, js/content-reveal.js),
   the exact same system already used for the Artwork Detail page's hero
   photo (see .artwork-zoom in artwork-zoom.css). Same two-element split
   as that page: this wrapper carries the reveal classes
   (.reveal-block / .reveal-block--image — fade + slide + blur, toggled
   by .is-revealed) plus the veil overlay (::after, defined in
   reveal.css); the <img> inside carries the independent scroll-parallax
   transform. Keeping the two on separate elements means the CSS-driven
   entrance transform and the JS-driven parallax transform never
   overwrite each other. Purely a hook — no sizing logic of its own lives
   here, so it never affects layout: the <img>'s own width/aspect-ratio
   below still fully determines the rendered size, and this wrapper's
   box just hugs it. Unstyled above 1024px (reveal.css is scoped to
   max-width: 1023px) and unstyled on any page that doesn't add the
   reveal-block classes in markup, so this class alone is inert. */
.artwork-card__image-wrap {
  display: block;
  position: relative;                 /* containing block for the reveal veil's ::after, inset: 0 */
  width: 344px;
  max-width: 100%;
}

.artwork-card__image {
  width: 344px;
  max-width: 100%;
  aspect-ratio: 500 / 659;             /* matches the actual artwork photo — replaces old fixed height + gray placeholder */
  display: block;
  object-fit: cover;                   /* fills the box exactly; no cropping in practice since ratios match */
  object-position: center;
  transition: opacity 150ms ease;     /* subtle whole-card hover feedback — no color change */
}

/* ── Natural aspect-ratio modifier (opt-in, per artwork) ──────────────────────
 * .artwork-card__image--natural — added alongside .artwork-card__image on
 * artworks whose cover photo is landscape and must render uncropped at its
 * own native aspect ratio instead of the shared portrait 500:659 crop box
 * above. Currently used by Céüse's card only (pages/collection.html);
 * every other card keeps the unmodified base behavior. width stays
 * whatever the base rule/collection-grid.css desktop override already set
 * (344px mobile / 420px desktop) — only the forced portrait ratio and crop
 * are removed; height then follows the image's own proportions. Two
 * classes on the same element beat the single-class base rule regardless
 * of source order, so this is a safe opt-in. Same naming pattern as
 * .artwork-detail__image--natural (artwork-info.css) and
 * .artwork-story__image--natural (artwork-story.css).
 * ─────────────────────────────────────────────────────────────────────────── */

.artwork-card__image.artwork-card__image--natural {
  aspect-ratio: auto;
  object-fit: contain;
  height: auto;
  background-color: transparent;
}

/* Optional subtle hover feedback on the image only — no typography color
   changes anywhere (see .artwork-card__cta:hover override below). */
.artwork-card:hover .artwork-card__image {
  opacity: 0.92;
}


/* ── 2. Info block ───────────────────────────────────────────────────────────── */

.artwork-card__info {
  margin-top: var(--space-4);        /* 16px from image bottom to title — was 32px, tightened 16px for mobile density */
  width: 100%;
  text-align: left;
}

/* Title — Manrope Regular 18px / gray-50 (#D2D2D2). Weight unchanged — the
   title stays the primary visual anchor of the card, just with reduced
   visual hierarchy: font-size dropped 2px (20px → 18px), and height/
   line-height scaled down proportionally (same 1.6 ratio the original
   32px/20px pair carried) to keep this single-line row internally
   consistent — no extra blank space introduced above/below the text. */
.artwork-card__title {
  height: 28.8px;                    /* was 32px — scaled with line-height, same 1.6 ratio */
  line-height: 28.8px;               /* was 32px — proportional to the new 18px font-size */
  font-family: var(--font-family-base);
  font-size: 1.125rem;               /* 18px — was 1.25rem (20px), reduced 2px */
  font-weight: 400;                  /* Regular — overrides globals h2 weight — unchanged */
  color: var(--color-gray-50);       /* #D2D2D2 — was var(--color-gray-100)/(--color-white) */
  text-align: left;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Inspiration — Manrope Regular 14px / Gray 100 / left-aligned
   Now the single metadata line: "Inspired by [artwork], [location] · [year]"
   — the standalone year line was removed and folded into this line's text.
   Specificity (0,2,0): scoped to .artwork-card parent to beat any single-class conflict.

   Wraps naturally onto a second line instead of truncating — a longer
   "Inspired by [artwork], [location] · [year]" string (e.g. El Capitan's
   "Inspired by El Capitan, Yosemite National Park, California · 2024")
   must always be fully readable, never cut off with an ellipsis. The old
   single-line clamp (fixed height: 20px + overflow: hidden + white-space:
   nowrap + text-overflow: ellipsis) is removed; line-height: 20px is kept
   unchanged so a wrapped second line uses the exact same line spacing as
   the first, and height is now auto (was a fixed 20px, which could only
   ever fit one line) so the card simply grows to fit however many lines
   this text needs. Font size, weight, color, and margin-top spacing are
   all unchanged. Applies to every artwork card sitewide, not just this
   one instance. */
.artwork-card .artwork-card__inspiration {
  line-height: 20px;
  font-family: var(--font-family-base);
  font-size: 0.875rem;               /* 14px — supporting info, more subtle than the title */
  font-weight: 400;                  /* Regular */
  color: var(--color-gray-100);      /* #B8B8B8 — NOT white, NOT gradient */
  text-align: left;
  margin: 0;
  margin-top: var(--space-1);        /* 4px gap below title (or private-label, when shown) —
                                         was 12px (var(--space-3)), tightened 8px per the
                                         reduced-title-hierarchy spacing pass. */
  white-space: normal;               /* was nowrap — allow natural wrapping onto a second line */
}


/* ── 3. CTA ──────────────────────────────────────────────────────────────────── */
/*
 * Understated editorial text link — no icon. Single shared definition —
 * used verbatim as both "View artwork & story" (Collection card) and "View
 * Scale Reference" (artwork detail page, see .artwork-info .artwork-card__cta
 * in artwork-info.css). Every value below (font, weight, color, line-height,
 * underline, hover) is identical in both places by construction, since
 * neither context overrides typography — only margin-top (PDP spacing) and
 * the whole-card click target (Collection-only, further down this file)
 * differ.
 *
 * Height: 40px min click target (unchanged from the icon version — kept
 * for tap-target size even though there's no icon to vertically center
 * anymore). Manrope Semibold 14px / Grey 100 (#B8B8B8), underlined —
 * default color moved off pure white as part of the site-wide typography
 * color hierarchy pass. NOTE: the desktop hover rule further down this
 * file still sets color: var(--color-gray-100) on hover, which is now
 * identical to this default — hover no longer produces a visible color
 * shift on desktop. Left as-is since this pass only touches default
 * (non-hover) color, per spec.
 */

.artwork-card__cta {
  display: inline-flex;
  align-items: center;
  height: 40px;                      /* min click target — unchanged */
  margin-top: var(--space-4);        /* 16px below inspiration row — was 24px, tightened 8px for mobile density; PDP overrides to 16px too, see artwork-info.css */
  font-family: var(--font-family-base);
  font-size: 0.875rem;               /* 14px */
  font-weight: 600;                  /* Semibold */
  line-height: 1.2;
  color: var(--color-gray-100);      /* #B8B8B8 — was var(--color-white) */
  text-decoration: underline;        /* the visual affordance, replacing the removed arrow icon */
  text-underline-offset: 2px;
}

/*
 * No opacity shift on hover, in either context or breakpoint — globals.css
 * sets a site-wide `a:hover { opacity: 0.8 }`, which this cancels so the
 * only hover feedback this component ever shows is the desktop-only text
 * color shift defined below. Unscoped/unconditional on purpose: it must
 * hold true on mobile too, where hover has no effect.
 */
.artwork-card__cta:hover {
  opacity: 1;
}

/* ── Hover micro-interaction (desktop only) ────────────────────────────────
 * Gated to the same 1024px breakpoint used for desktop-only behavior
 * elsewhere in this codebase (page-header.css, section-title-bar.css).
 * Mobile/touch gets none of it — text stays exactly as rendered at rest.
 *
 * Text color only — color is set on .artwork-card__cta itself (the <a>),
 * so both the <span> and the underline (which follows the text color)
 * shift to --color-gray-100 together. The click target, focus ring, and
 * tab order are untouched — only `color` is ever set here.
 * ─────────────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  .artwork-card__cta {
    transition: color 200ms ease-out;
  }

  .artwork-card__cta:hover {
    color: var(--color-gray-100);           /* #B8B8B8 */
  }
}

/* ── Collection-card-only CTA behavior ────────────────────────────────────
 * Structural only — no typography, icon-size, or hover overrides here.
 * Scoped to ".artwork-card .artwork-card__cta" so it only applies inside a
 * Collection card, never to the shared base class or the PDP reuse.
 *
 * The whole card is one click target: this pseudo-element stretches this
 * link's clickable hit-area to cover the entire .artwork-card (position:
 * relative, above), so the image, title, and metadata all become clickable
 * without adding extra <a> elements. The PDP's "View scale reference" link
 * has no .artwork-card ancestor, so it never gets stretched.
 * ─────────────────────────────────────────────────────────────────────── */

.artwork-card .artwork-card__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}


/* ── Variant: Private Collection ─────────────────────────────────────────────
 *
 * Usage: add class "artwork-card--private" to the <article> wrapper.
 *
 * DOM order inside .artwork-card__info for both default and private cards:
 *   1. .artwork-card__title       (always visible)
 *   2. .artwork-card__private-label  (hidden by default; revealed by modifier)
 *   3. .artwork-card__inspiration (always visible — single metadata line,
 *                                   "Inspired by [artwork], [location] · [year]")
 *
 * Spacing in the private variant:
 *   title bottom → label top       : 8px  (margin-top on label)
 *   label bottom → inspiration top : 12px (inspiration's margin-top: var(--space-3))
 *
 * ─────────────────────────────────────────────────────────────────────────── */

/* Hidden by default on all cards */
.artwork-card__private-label {
  display: none;
}

/* Revealed only on the private-collection variant */
.artwork-card--private .artwork-card__private-label {
  display: block;
  margin-top: var(--space-2);         /* 8px below title */
  height: 20px;
  line-height: 20px;
  font-family: var(--font-family-base);
  font-size: 0.875rem;                /* 14px — supporting info, more subtle than the title */
  font-weight: 400;                   /* Regular */
  color: var(--color-rose-400);       /* unchanged */
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ── Mobile-only: center text block ──────────────────────────────────────
 * Below the site's 1024px desktop breakpoint (same one used elsewhere,
 * e.g. .artwork-card__cta:hover above) only — desktop keeps the left-
 * aligned base rules above completely untouched.
 *
 * Centers the title, metadata line ("Inspired by…"), private-collection
 * label, and CTA. No spacing, sizing, or typography values change — only
 * horizontal alignment. The image is unaffected: it's already full-width
 * (matches the card's own width), so it sits identically under
 * align-items: flex-start or center.
 *
 * align-items: center on .artwork-card is what actually re-centers the
 * CTA — it's an inline-flex element sized to its own content (not
 * full-width), so text-align on its parent has no effect on its position;
 * only the flex container's cross-axis alignment does.
 * ─────────────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .artwork-card {
    align-items: center;
  }

  .artwork-card__info {
    text-align: center;
  }

  .artwork-card__title {
    text-align: center;
  }

  .artwork-card .artwork-card__inspiration {
    text-align: center;
  }

  .artwork-card--private .artwork-card__private-label {
    text-align: center;
  }
}


/* ── CTA label swap (Collection card only) ─────────────────────────────────
 * Two labels live in the DOM at all times: ".artwork-card__cta-label--full"
 * ("View artwork & story") and "...--short" ("View Artwork Story"). Only one
 * is ever visible per breakpoint. The <a>'s aria-label already carries the
 * full accessible name ("View Bibliographie — artwork and story"), so this
 * swap is purely visual — screen readers are unaffected either way.
 * Default (desktop, and fallback if this file loads without the media
 * query support): show the full label, hide the short one.
 * ─────────────────────────────────────────────────────────────────────── */

.artwork-card__cta-label--short {
  display: none;
}

@media (max-width: 1023px) {
  .artwork-card .artwork-card__cta-label--full {
    display: none;
  }

  .artwork-card .artwork-card__cta-label--short {
    display: inline;
  }
}


/* ── Mobile-only: outlined button (Collection card CTA) ─────────────────────
 * Replaces the "View artwork & story" text link with a full-width outlined
 * button, mobile only (max-width: 1023px). Desktop is completely untouched
 * — the base .artwork-card__cta rules above (inline-flex, 40px, underline,
 * Grey 100) still apply there exactly as before.
 *
 * Scoped to ".artwork-card .artwork-card__cta" — the same Collection-only
 * selector used for the whole-card click target above — so the PDP's "View
 * Scale Reference" reuse (.artwork-info .artwork-card__cta) is never
 * affected.
 *
 * Also matched by ".scale-sheet .btn-outline" — the "Close" button at the
 * bottom of the Scale Reference modal (scale-sheet.css). That button keeps
 * its .btn/.btn-outline classes (so the desktop dialog's own
 * ".scale-sheet .btn-outline { max-width: 240px }" override still applies
 * unchanged), but on mobile this rule's higher specificity (two classes vs.
 * .btn-outline's one) wins for every overlapping property, so it renders
 * pixel-identical to the Collection card's own button. This is the same
 * declaration block recognizing one more context — not a new modal-specific
 * button variant.
 *
 * Also matched by ".artwork-cta .artwork-card__cta" — the "Contact the
 * artist" CTA on the Artwork Detail page (artwork-cta.css), the same
 * component relabeled. Same reasoning as the modal Close button above:
 * one more selector recognizing the same declarations, not a new variant.
 *
 * Navigation/action is unchanged: still the same <a href>/<button>, still
 * the same ::after stretched hit-area covering the whole card where it
 * existed before (defined earlier in this file, unaffected by this purely
 * visual override — the modal's Close button never had that pseudo-element
 * to begin with, since it isn't inside .artwork-card). Only the visual
 * treatment changes.
 *
 * Gradient border: reuses the design system's one existing gradient token,
 * --gradient-accent (tokens.css) — no new gradient is introduced. A plain
 * `border-color` can't take a gradient, and `border-image` doesn't honor
 * border-radius, so this uses the standard two-layer background technique
 * instead: an opaque padding-box layer (var(--color-carbon), matching the
 * page background so the button reads as "transparent") plus the gradient
 * on the border-box layer beneath it, clipped to the row of pixels between
 * the two — which does follow the 4px corner radius correctly.
 * ─────────────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .artwork-card .artwork-card__cta,
  .scale-sheet .btn-outline,
  .artwork-cta .artwork-card__cta {
    display: flex;
    width: 100%;                       /* full content-area width — matches .artwork-card's own width/margins */
    height: var(--space-12);           /* 48px */
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    border: 1px solid transparent;
    background:
      linear-gradient(var(--color-carbon), var(--color-carbon)) padding-box,
      var(--gradient-accent) border-box;
    font-size: 0.875rem;               /* 14px — unchanged */
    font-weight: 600;                  /* Semibold — unchanged */
    color: var(--color-gray-50);       /* #D2D2D2 */
    text-decoration: none;             /* button, not an underlined text link */
  }

  /* Reuse the site's existing outline-button hover/focus behavior
     (.btn:hover / .btn-action:hover and .btn-action:focus-visible in
     button.css / contact.css) rather than inventing new interaction
     states. No :active override exists anywhere else in the codebase to
     reuse, so none is added here either. */
  .artwork-card .artwork-card__cta:hover,
  .scale-sheet .btn-outline:hover,
  .artwork-cta .artwork-card__cta:hover {
    opacity: 0.85;
  }

  .artwork-card .artwork-card__cta:focus-visible,
  .scale-sheet .btn-outline:focus-visible,
  .artwork-cta .artwork-card__cta:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 3px;
  }
}