/* =============================================================================
   artwork-story.css — reusable route/story section for artwork detail pages
   Sits below the .artwork-info block on every artwork detail page.

   Component ownership:
     .artwork-story             — section wrapper
     .artwork-story__image      — photo of the route/location (full-width)
     .artwork-story__credit     — "Photo © [Photographer Name]" caption,
                                   directly below .artwork-story__image —
                                   editable per artwork page
     .artwork-story__text       — text block container
     .artwork-story__inspired   — "Inspired by: ..." line wrapper (<p>) —
                                   holds the two spans below on one line,
                                   sharing a baseline
     .artwork-story__label      — "Inspired by:" (gray-100, Regular) — inline
                                   <span> inside .artwork-story__inspired
     .artwork-story__route      — "Artwork, Location" (white, Regular) —
                                   inline <span>, same line as the label
     .artwork-story__route-name — artwork name within route (Semibold)
     .artwork-story__divider    — decorative divider image (intrinsic
                                   size, centered) — assets/images/
                                   divider_white_s.png
     .artwork-story__lead       — main descriptive paragraph (white, Regular)
     .artwork-story__body       — body copy, single paragraph (gray-100, Regular)
     .artwork-story__gallery-image — optional extra photo(s) after the text
                                   block, own aspect ratio preserved (see
                                   pages/rocklands-boulder.html for usage)

   Spacing relies on .artwork-info { margin-bottom: var(--space-8) } for the
   32px gap above this section — no duplicate top margin here.

   Desktop layout: pages with no gallery images (bibliographie.html,
   capitan-black.html) use the two-column grid rules for .artwork-story in
   artwork-detail-layout.css. Pages with gallery images use the
   .artwork-story--linear modifier instead (same file), which renders this
   whole section as a single block-flow column, keeping visual order
   identical to DOM order at every viewport width.
   ============================================================================= */


/* ── Section wrapper ─────────────────────────────────────────────────────────── */

.artwork-story {
  margin-bottom: var(--space-8);       /* 32px after the final paragraph */
}


/* ── Story image ─────────────────────────────────────────────────────────────── */
/*
 * Full-width photo of the route/location.
 * Aspect ratio is a placeholder — update when the real photo is known.
 * object-fit: cover keeps the photo filling the box without distortion
 * regardless of its native dimensions; background-color remains as a
 * fallback fill while the image loads.
 * Always the first element in .artwork-story on every page — no margin-top
 * of its own; the 32px gap above the section comes from the sibling
 * .artwork-info { margin-bottom } (see file header).
 */

.artwork-story__image {
  width: 100%;
  aspect-ratio: 4 / 3;                /* landscape — adjust to match real photo */
  background-color: var(--color-gray-100);
  display: block;
  object-fit: cover;
  border-radius: 0;                   /* square corners, rolled out site-wide from the Sleeping Lion Test page — scoped to this class specifically (not the shared .img-rounded utility, which About's own closing image still uses at 4px) */
}


/* ── Natural aspect-ratio modifier (opt-in, per artwork) ──────────────────────
 * .artwork-story__image--natural — added alongside .artwork-story__image on
 * artworks whose reference photo must render uncropped, at its own native
 * aspect ratio, scaled proportionally to the full column width — instead of
 * being forced into the shared 4:3 (mobile) placeholder box above and its
 * 500×700 cropped counterpart on desktop (artwork-detail-layout.css).
 * Removes the fixed aspect-ratio and object-fit: cover that box relies on;
 * height: auto lets the image (and the section around it) size itself
 * entirely from the photo's own dimensions, so nothing is ever clipped and
 * the page simply grows to fit it. Two classes on the same element beats
 * the single-class base rule above regardless of source order, so this is
 * a safe opt-in — every other artwork page keeps the unmodified base
 * behavior untouched. Currently used by pages/capitan-black.html only.
 * Same naming pattern as .scale-sheet__image--natural (scale-sheet.css).
 * ─────────────────────────────────────────────────────────────────────────── */

.artwork-story__image.artwork-story__image--natural {
  aspect-ratio: unset;
  object-fit: unset;
  height: auto;
}


/* ── Photo credit caption ────────────────────────────────────────────────────── *
 * "Photo © [Photographer Name]", directly below the route photograph —
 * this is the second image on the page (the hero artwork photo above
 * .artwork-info is the first; the additional photo in .artwork-cta is
 * the third and has no credit of its own).
 *
 * font-family/color/line-height reuse the same small Grey 100 caption
 * pattern used elsewhere on this page (.artwork-story__label,
 * .artwork-story__body); font-size is 12px, one step smaller than that
 * 14px pattern, since this is a secondary photo-credit line, not body
 * copy. Centered — matches the photo above it and the rest of this
 * section's centered text, rather than sitting flush left.
 * margin-top: 8px is the only gap this element defines; the 32px gap
 * from here down to .artwork-story__text is unchanged — it's still that
 * block's own margin-top below, just now measured from this caption
 * instead of directly from the image.
 * ─────────────────────────────────────────────────────────────────────────── */

.artwork-story__credit {
  font-family: var(--font-family-base);
  font-size: 0.75rem;                  /* 12px */
  font-weight: 400;                    /* Regular */
  color: var(--color-gray-100);        /* #B8B8B8 */
  line-height: 1.5rem;                 /* 24px — same token as the rest of this component's small captions */
  text-align: center;
  margin: 0;
  margin-top: var(--space-2);          /* 8px below the image, per spec */
}


/* ── Additional gallery images (optional, per artwork) ───────────────────────── *
 * Extra photos beyond the single required .artwork-story__image + credit
 * above — e.g. Rocklands Boulder's daniel-ortiz-studio-rocklands-boulder-02.webp and
 * rocklands_boulder_3.webp, placed at the end of .artwork-story (after the
 * text block) on that page. Unlike .artwork-story__image, which is
 * deliberately cropped to a fixed box (4:3 on mobile, 500×700 on desktop —
 * see .artwork-story--linear in artwork-detail-layout.css), these render at
 * their own native aspect ratio: width is constrained to match the column,
 * height is always "auto", and no aspect-ratio/object-fit is imposed, so a
 * tall image stays tall and a wide image stays wide instead of being
 * cropped to fit a shared box.
 * margin-top: 48px — the gap from whatever precedes each one (the second
 * thread divider before the first gallery image, or the previous gallery
 * image before the next one). Applies unconditionally at every viewport
 * width, mobile and desktop alike — this component has no separate desktop
 * override for it.
 * No credit caption of their own is assumed — if a given photo needs one,
 * duplicate .artwork-story__credit's markup/pattern directly below it.
 * ─────────────────────────────────────────────────────────────────────────── */

.artwork-story__gallery-image {
  display: block;
  width: 100%;
  height: auto;                        /* preserves each photo's own aspect ratio */
  margin-top: var(--space-12);         /* 48px above every gallery photo, mobile and desktop alike */
  border-radius: 0;                    /* square corners, rolled out site-wide from the Sleeping Lion Test page — scoped to this class, not the shared .img-rounded utility */
}


/* ── Text block ──────────────────────────────────────────────────────────────── */
/*
 * Container sits 32px below the credit caption above (unchanged value —
 * previously measured directly from the image, before the caption
 * existed between them).
 * Centers all child text via inherited text-align.
 */

.artwork-story__text {
  margin-top: var(--space-8);          /* 32px below the credit caption */
  width: 100%;
  text-align: center;
}


/* ── "Inspired by:" line ─────────────────────────────────────────────────────── */
/*
 * Wraps the label + route spans below so they render on one line and share
 * a baseline — first child of .artwork-story__text, so no margin-top; no
 * margin-bottom either, since the divider right after it (below) supplies
 * that gap via its own margin-top.
 */

.artwork-story__inspired {
  margin: 0;
}

/* "Inspired by:" — inline <span>, muted label half of the merged line. */
.artwork-story__label {
  font-family: var(--font-family-base);
  font-size: 0.875rem;                 /* 14px */
  font-weight: 400;                    /* Regular */
  color: var(--color-gray-100);        /* #B8B8B8 */
  line-height: 1.5;
}


/* ── Route ────────────────────────────────────────────────────────────────────── */
/*
 * "Bibliographie, Céüse, France" — inline <span>, same line as the label
 * above (no margin — normal inline flow already puts it right after the
 * label's text, separated by the single space in the markup). Base weight
 * is Regular; only .artwork-story__route-name (artwork title) is Semibold,
 * set via child span.
 */

.artwork-story__route {
  font-family: var(--font-family-base);
  font-size: 0.875rem;                 /* 14px */
  font-weight: 400;                    /* Regular — location part */
  color: var(--color-white);
}

/* Artwork name within the route line — Semibold only */
.artwork-story__route-name {
  font-weight: 600;                    /* Semibold */
}


/* ── Divider ──────────────────────────────────────────────────────────────────
 * Decorative <img> (assets/images/divider_white_s.png), replacing the
 * earlier CSS border-line implementation (a plain <hr> reusing the
 * sitewide .faq__divider / .site-footer__divider pattern). Shown at its
 * intrinsic size — 65 × 8px, set via width/height attributes on the <img>
 * itself, not stretched to the column's full width.
 *
 * .artwork-story__text has text-align: center, but that only affects
 * inline content — it has no effect on a block-level <img>'s own
 * position, hence the explicit margin-inline: auto here to center it.
 *
 * margin-top/bottom: 16px each — unchanged from the old border-line
 * version, so the section's existing vertical rhythm (label→route was
 * 16px; lead and body both open with a 16px top margin) is unaffected by
 * the swap. reset.css's `img { max-width: 100% }` already keeps this
 * from ever exceeding its container on narrow viewports, so it can never
 * become full-width even on very small screens — no separate mobile
 * override needed.
 *
 * Only one resolution of this asset exists in the library (no @2x
 * variant) — displaying it at intrinsic size is the most faithful
 * option; if a higher-resolution source is added later, halve the
 * width/height here (and on the <img> attributes) to render it crisp on
 * retina displays.
 * ─────────────────────────────────────────────────────────────────────────── */

.artwork-story__divider {
  display: block;
  margin-top: var(--space-4);          /* 16px */
  margin-bottom: var(--space-4);       /* 16px */
  margin-inline: auto;                 /* centers the intrinsic-width image */
}


/* ── Main descriptive paragraph ──────────────────────────────────────────────── */
/*
 * Regular white — the "hero" copy block that describes the visual inspiration.
 * Was Semibold; weight reduced to de-emphasize it relative to the merged
 * "Inspired by" line above. Font size, line-height, color, and spacing are
 * all unchanged.
 * line-height: 1.5rem = 24px per spec.
 */

.artwork-story__lead {
  font-family: var(--font-family-base);
  font-size: 0.875rem;                 /* 14px */
  font-weight: 400;                    /* Regular — was 600 (Semibold) */
  color: var(--color-white);
  line-height: 1.5rem;                 /* 24px */
  text-align: center;
  margin: 0;
  margin-top: var(--space-4);          /* 16px below the divider above — unchanged */
}


/* ── Body copy ────────────────────────────────────────────────────────────────── */
/*
 * Regular gray-100 — supporting / contextual copy. Previously two separate
 * paragraphs (each carrying this same margin-top, creating equal 32px-
 * feeling gaps via collapsing); now merged into a single paragraph, so
 * this margin-top applies once, unchanged, as the gap below the divider
 * above it.
 * line-height: 1.5rem = 24px per spec.
 */

.artwork-story__body {
  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-4);          /* 16px below the divider above — unchanged */
}