/* =============================================================================
   artwork-info.css — artwork detail page: full-width image + info block
   Used on every individual artwork detail page (e.g. bibliographie.html).

   Component ownership:
     .artwork-detail__intro   — page title block (artwork name only)
     .artwork-detail__title   — artwork name <h1> (Regular 20px, gray-50 #D2D2D2)
     .artwork-detail__image   — full-width image area; replaces fixed-width card image
     .artwork-info            — info block below the image (dimensions + materials + CTA)
     .artwork-info__dimensions
     .artwork-info__materials  (single paragraph; text wraps naturally)

   The CTA inside .artwork-info reuses .artwork-card__cta (no new component).
   Only margin-top is overridden here to enforce the 16px gap spec.

   Private Collection status: for years this site showed a text-only status
   line directly below the title (the old, now-removed .artwork-detail__status
   class) before it was fully replaced by the PrivateCollectionNotice banner
   component (css/components/private-collection-notice.css) shown inside the
   ArtworkCTA block instead — for a time, the banner was the ONLY place
   Private Collection status appeared on a detail page.

   That changed again per an explicit request to show status consistently
   in three places at once: the Collection card, near the title here on the
   detail page, and the ArtworkCTA banner. .artwork-detail__private-label
   (below) is that near-title badge — a new, distinctly-named class (not a
   revival of the old .artwork-detail__status), styled identically to
   .artwork-card__private-label (artwork-card.css: 14px Regular, rose-400)
   so the wording/styling matches the Collection card exactly. Omit the
   element entirely for artworks with no Private Collection status — never
   display:none. The ArtworkCTA banner is unchanged and still shown too;
   the two are not mutually exclusive the way the old status line and the
   banner used to be.
   ============================================================================= */


/* ── Artwork intro block ─────────────────────────────────────────────────────
 *
 * Sits at the top of .page-main, before the artwork image. Contains the
 * artwork <h1> title, plus — only for artworks marked Private Collection —
 * .artwork-detail__private-label directly below it (see the Private
 * Collection note above).
 * ─────────────────────────────────────────────────────────────────────────── */

.artwork-detail__intro {
  width: 100%;
  text-align: center;
  margin-bottom: var(--space-8);       /* 32px gap before the artwork image */
}

.artwork-detail__title {
  font-family: var(--font-family-base);
  font-size: 1.75rem;                  /* 28px — matches .page-title (page-header.css), Collection's own page heading. Was 1.25rem/20px; rolled out site-wide from the Sleeping Lion Test page's approved refinement, applied at every viewport (not desktop-only). */
  font-weight: 400;                    /* Regular */
  color: var(--color-gray-50);         /* #D2D2D2 — was var(--color-gray-100); includes the year when part of the same title text (e.g. "Bibliographie, 2024") */
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

/* ── Private Collection badge (near-title) ────────────────────────────────────
 * Only present for artworks marked Private Collection — omit the element
 * entirely otherwise (never display:none). Same text and typography as
 * .artwork-card__private-label (artwork-card.css: 14px Regular, rose-400)
 * so wording and styling are identical to the Collection card's own badge.
 * Centered, like every other element inside .artwork-detail__intro, rather
 * than left-aligned like the card version — this block is already centered
 * text-align:center by its parent.
 */
.artwork-detail__private-label {
  margin: 0;
  margin-top: var(--space-2);          /* 8px below the title — same gap .artwork-card__private-label uses below its own title */
  font-family: var(--font-family-base);
  font-size: 0.875rem;                 /* 14px — identical to .artwork-card__private-label */
  font-weight: 400;                    /* Regular */
  color: var(--color-rose-400);
  line-height: 1.5;
}

/*
 * NOTE: .artwork-detail__intro used to be hidden on desktop here, in favor
 * of the generic .page-header component (page-header.css) rendering the
 * title/status above the two-column layout. The desktop Artwork Detail
 * layout now places .artwork-detail__intro back inside the right-hand
 * content column, next to the artwork image (see
 * css/components/artwork-detail-layout.css) — so .page-header has been
 * removed from pages/bibliographie.html instead, and .artwork-detail__intro
 * is visible at every breakpoint again, exactly as it always was on mobile.
 */


/* ── Full-width detail image ─────────────────────────────────────────────────
 *
 * Takes the full available content width (content-area already handles
 * the 24px horizontal margins). Use aspect-ratio to maintain proportions
 * without hardcoding height.
 * Real <img> (TEMPORARY placeholder photo, assets/images/p.jpg — 500 × 659px,
 * reused on every artwork detail page 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
 * artwork-detail-layout.css only sets a fixed width (500px, which happens to
 * match the photo's own pixel width), so height there resolves to exactly
 * 659px — the image's real height — with no separate hardcoded value.
 * 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.
 * ─────────────────────────────────────────────────────────────────────────── */

.artwork-detail__image {
  width: 100%;
  aspect-ratio: unset;                 /* was 500 / 659 — no-crop guarantee, rolled out site-wide from the Sleeping Lion Test page: the photo always renders at its own natural ratio, never forced into a fixed crop box */
  height: auto;
  display: block;
  object-fit: unset;                   /* was cover */
  object-position: center;
}

/* ── Natural aspect-ratio modifier (opt-in, per artwork) ──────────────────────
 * .artwork-detail__image--natural — added alongside .artwork-detail__image
 * on artworks whose hero 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 only (pages/ceuse.html) — every other
 * artwork page keeps the unmodified base behavior. width: 100% is
 * inherited unchanged (mobile) / set to 500px by the desktop grid
 * (.artwork-section .artwork-detail__image, artwork-detail-layout.css,
 * which never sets its own height — see that rule's own comment — so
 * height here cascades and resolves purely from this image's own ratio at
 * every viewport width, exactly like .artwork-story__image--natural does
 * for supporting photos). Two classes on the same element beat the
 * single-class base rule regardless of source order, so this is a safe
 * opt-in.
 * ─────────────────────────────────────────────────────────────────────────── */

.artwork-detail__image.artwork-detail__image--natural {
  aspect-ratio: auto;
  object-fit: contain;
  height: auto;
}


/* ── Info block wrapper ──────────────────────────────────────────────────────
 *
 * Sits 32px below the detail image.
 * Width 100% inherits from content-area; text is centered throughout.
 * ─────────────────────────────────────────────────────────────────────────── */

.artwork-info {
  margin-top: var(--space-8);          /* 32px below image */
  width: 100%;
  text-align: center;
  margin-bottom: var(--space-8);       /* 32px below CTA to next section */
}


/* ── Dimensions line ─────────────────────────────────────────────────────────
 *
 * "76 × 56 cm" — white, Regular 16px.
 * Sits directly at the top of the info block (no top margin on first child).
 * ─────────────────────────────────────────────────────────────────────────── */

.artwork-info__dimensions {
  font-family: var(--font-family-base);
  font-size: 0.875rem;                 /* 14px */
  font-weight: 400;                    /* Regular */
  color: var(--color-gray-100);        /* #B8B8B8 — was var(--color-white) */
  text-align: center;
  margin: 0;
  line-height: 1.5;
}


/* ── Materials — continuous text block ───────────────────────────────────────
 *
 * Single paragraph; text wraps naturally at the available content width.
 * No flex, no artificial line breaks.
 * line-height: 1.5rem = 24px per spec.
 * ─────────────────────────────────────────────────────────────────────────── */

.artwork-info__materials {
  font-family: var(--font-family-base);
  font-size: 0.875rem;                 /* 14px */
  font-weight: 400;                    /* Regular */
  color: var(--color-gray-100);        /* #B8B8B8 */
  line-height: 1.5rem;                 /* 24px */
  text-align: center;
  margin: 0;
  margin-top: var(--space-2);          /* 8px below dimensions */
}


/* ── CTA — contextual override ───────────────────────────────────────────────
 *
 * Reuses .artwork-card__cta (no new component), but overridden here to read
 * as supporting information rather than a call to action — this is the only
 * context where that's true; the Collection card's reuse of the same base
 * class is untouched (still Semibold, still its own margin-top, and on
 * mobile still the outlined-button treatment scoped to
 * ".artwork-card .artwork-card__cta" in artwork-card.css — a different
 * selector than this one, so there's no overlap).
 *
 * - margin-top: matches the 8px gap already used between dimensions and
 *   materials above (var(--space-2)), so the link continues that same
 *   text-stack rhythm instead of sitting apart as its own 16px-separated
 *   action. Mobile tightens this to 0 in the media query below, exactly
 *   mirroring .artwork-info__materials' own mobile override.
 * - font-weight: 400 (Regular) — was 600 (Semibold) on the shared base;
 *   de-emphasized to match the plain-text weight of the materials line.
 * - height: 2.75rem (44px) — was the shared base's 40px. Still just a
 *   larger invisible flex box around the same single line of 14px text
 *   (no border/background exists to reveal it), so it reads as an
 *   ordinary text link while still meeting a 44px minimum touch target.
 * - text-align: center is restored on desktop specifically for this CTA
 *   in artwork-detail-layout.css, overriding that file's left-align-
 *   everything rule for the rest of the info block.
 * - Color (Grey 100) and font-size (14px) already match
 *   .artwork-info__materials exactly via the shared base rule — no change
 *   needed. Underline, no border/background/icon — also already true of
 *   the shared base rule.
 * ─────────────────────────────────────────────────────────────────────────── */

.artwork-info .artwork-card__cta {
  margin-top: var(--space-2);          /* 8px — was 16px (var(--space-4)) */
  height: 2.75rem;                     /* 44px — was 40px; invisible min touch target */
  font-weight: 400;                    /* Regular — was 600 (Semibold) */
}


/* ── Mobile-only: tighter vertical rhythm ────────────────────────────────
 * Below the site's 1024px desktop breakpoint only (same one used in
 * artwork-detail-layout.css) — desktop keeps the base values above
 * completely untouched. Only the three gaps below change; no typography,
 * alignment, or sizing values are touched anywhere in this block.
 * ─────────────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {

  /* 1. Status line → top of artwork image: 32px base, tightened 16px. */
  .artwork-detail__intro {
    margin-bottom: var(--space-4);     /* 16px, was 32px (var(--space-8)) */
  }

  /* 2. Bottom of artwork image → "76 × 56 cm": 32px base, tightened 16px. */
  .artwork-info {
    margin-top: var(--space-4);        /* 16px, was 32px (var(--space-8)) */
  }

  /* 3. "76 × 56 cm" → materials description: base gap is only 8px, so a
     further 16px reduction would overlap the text. Set to 0 instead —
     the two lines sit back-to-back with no negative margin. */
  .artwork-info__materials {
    margin-top: 0;                     /* 0px, was 8px (var(--space-2)) */
  }

  /* 4. Materials → scale-reference link: mirrors #3 above exactly, so the
     link keeps matching the text stack's own rhythm on mobile too. */
  .artwork-info .artwork-card__cta {
    margin-top: 0;                     /* 0px, was 8px (var(--space-2)) */
  }

}