/* =============================================================================
   process.css — "The Artistic Process" page content
   Used only on pages/the-artistic-process.html.

   Final spec version — every spacing/typography value below comes directly
   from the approved spec (no values introduced outside it). The CTA at the
   end of the page is NOT owned by this file — it reuses .artwork-cta /
   .artwork-card__cta verbatim (artwork-cta.css / artwork-card.css), the
   same shared component used on every Artwork Detail page and on
   pages/commission.html, with its own already-established spacing.

   Component ownership:
     .process__intro-heading    — "Every artwork has its own rhythm" (h2)
     .process__intro-body       — intro paragraph
     .process__stage            — wrapper for one process stage (repeated 6x)
     .process__stage-image-wrap — positioning/spacing wrapper around each
                                   stage photo (see its own comment below
                                   for why it exists — mobile scroll-reveal
                                   + parallax, js/content-reveal.js)
     .process__stage-image      — stage photo, natural aspect ratio, no cropping
     .process__stage-content    — desktop-only wrapper around a stage's
                                   title/lead/body (see pages/the-artistic-
                                   process.html) so the three move as one
                                   grid item — see "Desktop: side-by-side
                                   stage layout" further down this file
     .process__stage-title      — stage title, e.g. "Reading the Wall" (h3)
     .process__stage-lead       — short poetic sentence
     .process__stage-body       — supporting paragraph

   Spacing chain, mobile (all margin-top, so every gap is owned by the
   element that follows — no margin-collapse guesswork between sibling
   rules):
     page-title → intro-heading:   32px (.process__intro-heading)
     intro-heading → intro-body:   16px (.process__intro-body)
     intro-body → first image:     24px mobile / 56px desktop
                                    (.process__stage-image-wrap)
     image → title:                32px mobile (.process__stage-title,
                                    zeroed on desktop — see below)
     title → poetic sentence:       4px (.process__stage-lead)
     poetic sentence → body copy:  16px (.process__stage-body)
     body copy → next image:       24px mobile / 56px desktop
                                    (.process__stage-image-wrap, same rule —
                                    applies uniformly to every stage image,
                                    first or not, since the gap before an
                                    image is always the same value per spec).

   Desktop (min-width: 1024px) replaces the mobile stacked rhythm above
   with a side-by-side grid — see "Desktop: side-by-side stage layout"
   further down this file for the full mechanics (image | 40px gap | text,
   vertically centered, left-aligned text — matching Home's own
   .home-hero__block grid exactly).

   Alignment: the page title (.page-title) is left-aligned on desktop, same
   as every other page (page-header.css's un-overridden default, matching
   Collection). Below the title, the intro heading and intro paragraph are
   ALSO left-aligned, sharing the same left edge as the title. Every
   stage's own title/lead/body stays center-aligned on mobile; on desktop
   it becomes left-aligned instead, inside its own grid column — see
   "Desktop: side-by-side stage layout" further down this file.

   Desktop column width (min-width: 1024px): .content-container
   (content-container.css, shared sitewide, wraps breadcrumb + page title +
   this page's .page-main) is narrowed from its sitewide 760px default to
   700px, LEFT-aligned (align-self: flex-start — content-container.css's
   own default, restated explicitly) so this page's left edge lines up
   with Collection's own breadcrumb/title/grid (Collection never uses
   .content-container, so its content sits directly against
   .content-area's own left edge). Breadcrumb, title, and intro all share
   this one 700px column; every stage below intentionally grows wider than
   it on desktop — see "Desktop: side-by-side stage layout". Mobile is
   completely unaffected.

   Desktop text width (min-width: 1024px): the intro heading/paragraph are
   additionally capped to 560px, reusing the exact same reading width as
   Home's .home-hero__text-group (css/pages/home.css) — see "Desktop text
   width — intro only" further down this file. Every stage's own title/
   lead/body is NOT capped this way; its width comes entirely from the
   grid's own 264px text column instead — see "Desktop: side-by-side stage
   layout".

   Image corners: every stage photo (.process__stage-image) has
   border-radius: 0 explicitly, overriding the sitewide .img-rounded
   utility class (globals.css, 4px radius) still present in the markup —
   perfectly square corners on this page only; img-rounded itself, and
   every other page that uses it, is untouched. See ".process__stage-image"
   further down this file.
   ============================================================================= */


/* ── Desktop column width ─────────────────────────────────────────────────
 * Same mechanism and rationale as pages/commission.html's own copy of this
 * rule (see that file's comment for the full explanation) — narrows
 * .content-container from its sitewide 760px default to 700px, scoped to
 * this page only since process.css only ever loads on
 * pages/the-artistic-process.html. align-self: flex-start is restated
 * explicitly (content-container.css's own default) — an earlier pass set
 * this to align-self: center instead, which shifted this page's content
 * right of Collection's own left edge; reverted per explicit request so
 * width stays 700px but the column's horizontal position now matches
 * Collection and every other page.
 * ────────────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  .content-container {
    max-width: 700px;
    align-self: flex-start;
  }
}


/* ── Intro heading ───────────────────────────────────────────────────────────── *
 * "Every artwork has its own rhythm" — h2, one level below the page's own
 * h1 (.page-title), keeping the heading hierarchy sequential.
 * margin-top: 32px below the page title — explicit, single value. Page-
 * header.css's .page-header--content sets margin-bottom: 0 on the title's
 * own wrapper for this page, so this 32px is the entire gap, not a
 * collapsed sum of two values.
 * Left-aligned — changed from centered per explicit request, now matches
 * .page-title above it and the rest of the site's left-starting content.
 * Every stage's own title/lead/body below stays centered, unchanged.
 * ─────────────────────────────────────────────────────────────────────────── */

.process__intro-heading {
  font-family: var(--font-family-base);
  font-size: 1rem;                     /* 16px */
  font-weight: 600;                    /* Semibold */
  color: var(--color-white);
  text-align: left;
  margin: 0;
  margin-top: var(--space-8);          /* 32px below the page title (desktop —
                                           .page-title has no reserved zone
                                           below it, so this margin IS the
                                           full visible gap) */
  line-height: 1.5;
}

/* Mobile only: below 1024px the title sits inside .section-title-bar's
   fixed 72px zone (unchanged — matches Collection, kept exactly as-is per
   the header→title requirement), which vertically centers the title and
   leaves ~21.6px of empty space below the title's own text before the
   zone's box even ends. That reserved space is invisible but still part
   of the rendered title→heading distance, so the margin here is reduced
   to keep the *visible* gap (title text → heading text) at or under 32px
   — nothing about the title or its zone is touched, only this margin. */
@media (max-width: 1023px) {
  .process__intro-heading {
    margin-top: var(--space-2);        /* 8px — visible gap lands at ~29.6px */
  }
}


/* ── Intro paragraph ─────────────────────────────────────────────────────────── *
 * Left-aligned, matching the page title and intro heading above it —
 * changed from centered per explicit request, sharing the same left edge
 * as .process__intro-heading.
 * Color: Grey 100 (--color-gray-100), matching the body-copy color used
 * throughout the rest of the page (.process__stage-body below) — the page
 * title and intro heading stay white; only this paragraph changes.
 * ─────────────────────────────────────────────────────────────────────────── */

.process__intro-body {
  font-family: var(--font-family-base);
  font-size: 0.875rem;                 /* 14px */
  font-weight: 400;                    /* Regular */
  color: var(--color-gray-100);        /* #B8B8B8 — "Grey 100" */
  text-align: left;
  margin: 0;
  margin-top: var(--space-4);          /* 16px below the intro heading */
  line-height: 1.5rem;                 /* 24px */
}


/* ── Stage wrapper ───────────────────────────────────────────────────────────── *
 * Purely structural — no spacing of its own. Every gap in this component
 * is owned by the element that needs it (see spacing chain above), so
 * stacking these wrappers back to back produces the correct rhythm with
 * no extra margin here.
 * ─────────────────────────────────────────────────────────────────────────── */

.process__stage {
  width: 100%;
}


/* ── Stage photo wrapper ──────────────────────────────────────────────────────── *
 * Added so the mobile scroll-reveal transition (reveal-block--image,
 * reveal.css) and the JS-driven scroll-parallax transform
 * (js/content-reveal.js) never fight over the same `transform` property on
 * the same element — same wrapper/child split used sitewide for this
 * reason (.artwork-zoom, .artwork-card__image-wrap). Owns the 24px
 * margin-top that used to live on .process__stage-image directly (moved
 * here now that the image sits one level deeper) and position: relative,
 * the positioning context .reveal-block--image::after's veil overlay
 * needs. Plain, otherwise unstyled block — sized to the image via normal
 * flow.
 * ─────────────────────────────────────────────────────────────────────────── */

.process__stage-image-wrap {
  display: block;
  margin-top: var(--space-6);          /* 24px above every stage image (mobile base) */
  position: relative;
}

/* ── Desktop: extra spacing before each image ──────────────────────────────
 * Per explicit request: 32px of ADDITIONAL space between the end of the
 * preceding text block (intro paragraph, or a stage's body copy) and the
 * image that follows, on top of the 24px mobile base above — 56px total.
 * Expressed as a single explicit value on this element (var(--space-14))
 * rather than the mobile 24px plus a separate +32px rule, since this
 * margin-top is the sole source of the gap either way (no sibling margin
 * to collapse with — see this class's own base-rule comment above).
 * Applies uniformly to every stage image via this same shared class,
 * first or not — consistent with the mobile spacing chain's own "applies
 * uniformly" rule (see this file's header comment). Desktop only; mobile
 * keeps the original 24px, unaffected, since nothing below exists outside
 * this media query.
 * ─────────────────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  .process__stage-image-wrap {
    margin-top: var(--space-14);       /* 56px = the existing 24px + 32px more, per explicit request */
  }
}


/* ── Stage photo ─────────────────────────────────────────────────────────────── *
 * Real photography. width: 100%, height: auto — renders at its own native
 * aspect ratio, never cropped, never forced into a fixed box. The markup
 * still carries the sitewide .img-rounded utility class (globals.css,
 * 4px radius) alongside this one — border-radius: 0 below overrides it
 * specifically on this page, per explicit request for perfectly square
 * corners on every image here. img-rounded itself, and every other page
 * that uses it, is untouched; this override never leaves process.css.
 * ─────────────────────────────────────────────────────────────────────────── */

.process__stage-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}


/* ── Stage title ──────────────────────────────────────────────────────────────── *
 * margin-top: 32px below the image — widened from an earlier 24px, reusing
 * the exact image→text gap already used on pages/rocklands-boulder.html
 * between .artwork-story__image and .artwork-story__text (artwork-story.css,
 * that page has no credit caption between them, so the visible gap there is
 * exactly this one value, unconditionally — applied here the same way, no
 * media query). On desktop this value is then zeroed for stages specifically
 * (see ".process__stage-content .process__stage-title" further down) since
 * the text block is positioned by align-items: center there instead of
 * being stacked below the image in normal flow — this 32px only governs
 * the mobile stacked layout in practice.
 * ─────────────────────────────────────────────────────────────────────────── */

.process__stage-title {
  font-family: var(--font-family-base);
  font-size: 0.875rem;                 /* 14px */
  font-weight: 600;                    /* Semibold — overrides globals.css h3 { font-weight: 700 } */
  color: var(--color-white);
  text-align: center;
  margin: 0;
  margin-top: var(--space-8);          /* 32px below the image (mobile) — was 24px, now matches Rocklands Boulder's image→text gap */
  line-height: 1.4;
}


/* ── Poetic sentence ──────────────────────────────────────────────────────────── */

.process__stage-lead {
  font-family: var(--font-family-base);
  font-size: 0.875rem;                 /* 14px */
  font-weight: 400;                    /* Regular */
  color: var(--color-white);
  text-align: center;
  margin: 0;
  margin-top: var(--space-1);          /* 4px below the title */
  line-height: 1.5rem;                 /* 24px */
}


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

.process__stage-body {
  font-family: var(--font-family-base);
  font-size: 0.875rem;                 /* 14px */
  font-weight: 400;                    /* Regular */
  color: var(--color-gray-100);        /* #B8B8B8 — "Grey 100" */
  text-align: center;
  margin: 0;
  margin-top: var(--space-4);          /* 16px below the poetic sentence */
  line-height: 1.5rem;                 /* 24px */
}


/* ── Desktop text width — intro only ────────────────────────────────────────
 * Per explicit request: the intro heading and paragraph share the same
 * narrower reading column already established on the Home page
 * (.home-hero__text-group, css/pages/home.css) — 560px max-width, no
 * margin-inline: auto — so the box stays flush against the column's own
 * left edge, matching its left-aligned text (see .process__intro-heading/
 * -body above). Desktop only (min-width: 1024px); mobile keeps its own
 * full-width column, unaffected.
 *
 * Every stage's own title/lead/body is NOT capped here — its rendered
 * width is governed entirely by the 3-column grid below instead (its
 * text column is a fixed 264px grid track), so an additional max-width
 * on the elements themselves would be redundant.
 * ─────────────────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  .process__intro-heading,
  .process__intro-body {
    max-width: 560px;
  }
}


/* ── Desktop: side-by-side stage layout ─────────────────────────────────────
 * Each .process__stage becomes a 3-column grid — image | ~40px gap | text
 * — instead of a single stacked column, same visual system as the Artwork
 * Detail pages' own two-column grid (e.g. pages/sleeping-lion.html — see
 * .artwork-story, artwork-detail-layout.css).
 *
 * grid-template-columns: 700px 40px 264px — a real middle column (not
 * just column-gap), sized to exactly 40px; nothing is ever placed in it,
 * so it renders as a plain gap. The image column is fixed at 700px — the
 * same rendered scale as Home's own full-width images. The text column
 * is 264px. 700 + 40 + 264 = 1004px, wider than .page-main's own 700px
 * column, so .process__stage's own width is set to match (1004px),
 * overflowing .content-container's right edge while its left edge stays
 * exactly where it was (Collection's own left edge, unchanged — only the
 * right side extends further than the rest of the page). On narrower
 * desktop viewports this can extend past the visible content area and
 * cause horizontal scroll — a known, accepted trade-off of fixing the
 * image at 700px while keeping a visible side-by-side text column within
 * the same page width.
 *
 * Image width is still unchanged as a CSS rule (.process__stage-image
 * still has width: 100% — see that rule above); with its column fixed at
 * 700px, height: auto (same rule) scales the image up proportionally,
 * preserving its original aspect ratio exactly — no crop, no stretch.
 *
 * align-items: center — vertically centers both columns relative to the
 * taller one, so the text block sits centered against the image instead of
 * flush with its top or bottom edge. Per explicit request, matches the
 * Home page's own vertically-centered version of this same grid exactly
 * (.home-hero__block, css/pages/home.css) — this was previously
 * align-items: end (bottom-aligned, the opposite of the Artwork Detail
 * pages' own top-aligned version of this grid); changed so Process and
 * Home now behave identically here.
 *
 * .process__stage-content — wraps each stage's title/lead/body (see
 * pages/the-artistic-process.html) so the three of them move as ONE grid
 * item, centered together — without it, each would auto-place into its
 * own separate grid row (CSS Grid's default packing), landing three short
 * rows down the page instead of one text block beside the image. Placed
 * explicitly in column 3, row 1 (same row as the image) so it can never be
 * pushed elsewhere by auto-placement.
 *
 * .process__stage-title's own margin-top: 32px (its base rule above,
 * "gap below the image") is zeroed here — that value only makes sense
 * when the text is stacked below the image in normal flow; once the text
 * block is positioned by align-items: center instead, it no longer
 * applies. .process__stage-lead / .process__stage-body's own margin-top
 * (4px / 16px, the spacing BETWEEN title/lead/body) are untouched — those
 * relationships are inside the text block, not tied to the image.
 *
 * Mobile is entirely unaffected: .process__stage stays a plain block
 * (width: 100%, above) outside this media query, so .process__stage-
 * content is just an unstyled wrapping <div> there — title/lead/body flow
 * normally inside it exactly as if it didn't exist, image on top, text
 * stacked below, centered.
 * ────────────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {

  .process__stage {
    display: grid;
    grid-template-columns: 700px 40px 264px;
    align-items: center;               /* was align-items: end (bottom-aligned) — now vertically centered, matching Home's .home-hero__block exactly */
    width: 1004px;                     /* 700 + 40 + 264 — explicit, so the box model matches the grid's own total width rather than staying squeezed at the inherited width: 100% (700px) from the base rule above */
    max-width: none;                   /* overrides the base rule's implicit 700px cap (inherited via width: 100%) now that this is intentionally wider than .page-main */
  }

  .process__stage-image-wrap {
    grid-column: 1;
    grid-row: 1;
  }

  .process__stage-content {
    grid-column: 3;
    grid-row: 1;
  }

  .process__stage-content .process__stage-title,
  .process__stage-content .process__stage-lead,
  .process__stage-content .process__stage-body {
    text-align: left;
  }

  .process__stage-content .process__stage-title {
    margin-top: 0;                     /* was 32px "below the image" (mobile) — irrelevant now the text block is centered as a unit, not stacked below the image */
  }

}


/* ── Desktop: widen the "Contact the artist" CTA ────────────────────────────
 * Same issue and fix as pages/commission.html's own identical rule (see
 * that file's fuller comment): .artwork-cta (artwork-cta.css) locks to a
 * fixed width: 500px on desktop by default, with no margin-inline: auto —
 * correct on the Artwork Detail pages, where it's meant to sit flush with
 * that page's own left-aligned 500px photo/story column, but this page's
 * .page-main sits in its own left-aligned 700px column instead (wider than
 * 500px), so that same fixed 500px CTA would sit narrower than every stage
 * above it. Overridden back to width: 100% of .page-main, scoped to
 * `.page-main .artwork-cta` so only this page's CTA is affected. Mobile is
 * untouched — .artwork-cta is already width: 100% there by default.
 * ─────────────────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  .page-main .artwork-cta {
    width: 100%;
  }
}


/* =============================================================================
   Scroll reveal — matches Home exactly, per explicit request ("reuse the
   existing Home implementation so both pages behave identically"). This
   REPLACES the sitewide one-shot .reveal-block/.is-revealed system
   (reveal.css + js/content-reveal.js) that used to run on this page —
   pages/the-artistic-process.html no longer links either of those files,
   and none of its markup carries "reveal-block"/"reveal-block--image" any
   more (see that page's own head/script tags and stage markup). In its
   place, this page now links js/home-reveal.js directly (broadened to
   also query the classes below, see that file's own header comment) —
   continuous fade + slight vertical movement, both as each block enters
   AND as it leaves the viewport (js/home-reveal.js toggles .is-visible on
   and off via IntersectionObserver), applied at every viewport width —
   unlike the old reveal.css system, this is NOT scoped to mobile only.

   Every value below — translateY(16px) starting offset, 750ms text /
   1000ms image duration, cubic-bezier(0.22, 1, 0.36, 1) easing, the
   reduced-motion fallback — is copied verbatim from css/pages/home.css's
   own "Scroll reveal" section; nothing here is a new value. Blur and the
   veil overlay reveal.css used to layer onto stage images are NOT
   reproduced here, for the same reason Home never had them: those are
   one-shot, "photo emerging once" effects that don't suit a continuous,
   replay-on-every-scroll-past behavior.

   Applies to every .process__stage-image-wrap, .process__intro-heading,
   .process__intro-body, .process__stage-title, .process__stage-lead and
   .process__stage-body — i.e. every stage image, intro heading/paragraph,
   and stage title/lead/body, matching Home's own "every image, intro
   sentence, section title and body paragraph" scope exactly. Each block
   is an independent reveal target, same as Home — .process__stage-content
   (the desktop grid-positioning wrapper around a stage's title/lead/body)
   is NOT itself a reveal target, so nesting it doesn't double-apply
   opacity/transform.

   Deliberately NOT applied to .artwork-cta (kept unchanged, per spec —
   same exclusion Home itself uses), the header, or navigation.
   ============================================================================= */

@media (prefers-reduced-motion: no-preference) {

  .process__stage-image-wrap,
  .process__intro-heading,
  .process__intro-body,
  .process__stage-title,
  .process__stage-lead,
  .process__stage-body {
    opacity: 0;
    transform: translateY(16px);
  }

  .process__intro-heading,
  .process__intro-body,
  .process__stage-title,
  .process__stage-lead,
  .process__stage-body {
    transition: opacity 750ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .process__stage-image-wrap {
    transition: opacity 1000ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 1000ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .process__stage-image-wrap.is-visible,
  .process__intro-heading.is-visible,
  .process__intro-body.is-visible,
  .process__stage-title.is-visible,
  .process__stage-lead.is-visible,
  .process__stage-body.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

}

/* Reduced motion: still fades in (once, immediately, no observer, no
   parallax — see js/home-reveal.js) so nothing is left permanently
   invisible, but drops the slide and slows to a minimal, non-distracting
   fade — same reduced-motion treatment Home itself uses. */
@media (prefers-reduced-motion: reduce) {

  .process__stage-image-wrap,
  .process__intro-heading,
  .process__intro-body,
  .process__stage-title,
  .process__stage-lead,
  .process__stage-body {
    opacity: 0;
    transition: opacity 150ms ease;
  }

  .process__stage-image-wrap.is-visible,
  .process__intro-heading.is-visible,
  .process__intro-body.is-visible,
  .process__stage-title.is-visible,
  .process__stage-lead.is-visible,
  .process__stage-body.is-visible {
    opacity: 1;
  }

}