/* =============================================================================
   private-collection-notice.css — "Private Collection Notice" banner
   Shown on every Artwork Detail page for artworks marked Private
   Collection, in place of the old text-only status line
   (.artwork-detail__status, artwork-info.css — no longer used anywhere;
   this banner fully replaces it, never shown alongside it).

   Position: inside the ArtworkCTA block (artwork-cta.css), between
   .artwork-cta__image and the "Contact the artist" button. See
   pages/bibliographie.html for reference markup.

   Same at every breakpoint — no media query anywhere in this file, so it
   renders identically on mobile and desktop, unlike several other
   components on this page (reveal.css, artwork-zoom.css, image-viewer.css)
   that are deliberately mobile- or desktop-only.

   Component ownership:
     .private-collection-notice         — banner container (background,
                                           border-radius, padding)
     .private-collection-notice__header — flex row: title (left) + icon (right)
     .private-collection-notice__title  — "In a private collection"
                                           (14px Semibold, rose-400)
     .private-collection-notice__icon   — Icon Certified (assets/icons/
                                           icon certified.svg), inlined
                                           with fill overridden to
                                           gray-300 — see note below
     .private-collection-notice__body   — supporting paragraph (14px
                                           Regular, gray-50 — the
                                           near-white body-text token)

   Icon: assets/icons/icon certified.svg is inlined directly in the page
   markup (path data copied as-is) rather than referenced via <img> or
   CSS mask-image, with the source file's own hardcoded fill="white"
   replaced by fill="currentColor" so it can pick up this component's own
   gray-300 color instead — the same inline-SVG approach already
   established for the artwork-nav chevrons and the footer Instagram
   icon (see artwork-nav.css), for the same reason: this project has no
   dev server, pages load via file://, and an external mask/background
   image fetch is the least reliable option here.
   ============================================================================= */


/* ── Banner container ────────────────────────────────────────────────────── */
/*
 * width: 100% matches .artwork-cta__image directly above it (both are
 * 100% of the same .artwork-cta parent) — "full content width", per spec.
 * text-align: left overrides .artwork-cta's own text-align: center
 * (which exists to center the button below), so the title/body/icon row
 * read as a left-aligned card instead.
 */
.private-collection-notice {
  width: 100%;
  border-radius: 8px;
  background-color: rgba(133, 133, 133, 0.2); /* var(--color-gray-300) at 20% opacity — #858585, softened from an earlier 50% pass that read as too heavy/card-like. Raw rgba() rather than a color-mix() of the token, matching the same pattern already used for translucent backgrounds elsewhere (.modal-overlay, modal.css) */
  padding: var(--space-6) var(--space-4);     /* 24px top/bottom, 16px left/right, per spec */
  text-align: left;
}


/* ── Header row: title + icon ────────────────────────────────────────────── */
/*
 * Same flex pattern as .artwork-nav__name / .artwork-nav__icon
 * (artwork-nav.css): title grows to fill the row, icon stays fixed size
 * — title lands left, icon lands right, without relying on
 * justify-content (robust even if the title text ever gets longer).
 */
.private-collection-notice__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);                  /* 8px breathing room if the title ever wraps close to the icon */
}

.private-collection-notice__title {
  flex: 1 1 auto;
  font-family: var(--font-family-base);
  font-size: 0.875rem;                  /* 14px */
  font-weight: 600;                     /* Semibold */
  color: var(--color-rose-400);         /* Rose, per spec */
  line-height: 1.5;
  margin: 0;
}

.private-collection-notice__icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: var(--color-gray-300);          /* #858585, per spec */
}


/* ── Body copy ────────────────────────────────────────────────────────────── */

.private-collection-notice__body {
  font-family: var(--font-family-base);
  font-size: 0.875rem;                  /* 14px */
  font-weight: 400;                     /* Regular */
  color: var(--color-gray-50);          /* #D2D2D2 — near-white body-text token, per spec */
  line-height: 1.5rem;                  /* 24px — matches every other 14px body paragraph on this page (.artwork-story__body, .artwork-cta__hint) */
  margin: 0;
  margin-top: var(--space-2);           /* 8px below the header row */
}