/* =============================================================================
   commission.css — "Turn your route into art" page content
   Used only on pages/commission.html.

   Component ownership:
     .commission__section  — wrapper for each content block
     .commission__heading  — section heading (Semibold 16px white)
     .commission__lead     — callout sentence (Semibold 16px white) — within body,
                             distinct from section headings semantically
     .commission__body     — body paragraph (Regular 14px gray-100)
     .commission__image    — full-width route photo (natural aspect ratio)

   Alignment: every section (heading, lead, body copy) stays left-aligned
   at every viewport width. On desktop (min-width: 1024px), every text
   block on the page is narrowed to a 560px column — matching the reading
   width established on Home/Process (see "Desktop text width" further
   down this file) — but flush against the column's own left edge, per
   explicit request that this page follow the same left-aligned layout
   used across Collection and The Artistic Process (an earlier pass
   center-aligned this same 560px column instead; reverted). The CTA at
   the bottom of the page ("Contact the artist") is not owned by this file
   either way — it reuses the Artwork Detail page's .artwork-cta component
   verbatim (artwork-cta.css / artwork-card.css), which centers the button
   and hint by design; this file overrides that to left-align both, scoped
   to this page only — see "Desktop: widen and left-align the 'Contact the
   artist' CTA" further down.

   Spacing:
     32px above each section  (margin-top on .commission__section)
     32px above the first section specifically — same value as every other
       section, kept as its own explicit :first-child rule (see below) so
       the title→first-heading gap is self-documenting and won't silently
       drift if the base inter-section value ever changes.
     32px below each heading  (margin-bottom on .commission__heading;
                               collapses with body margin-top to 32px)
     16px between body paragraphs (margin-top on .commission__body)
     32px below each section  (margin-bottom on .commission__section)
     Desktop only: the gap between Section 1's body text and the image
       that follows is widened by an additional 32px (64px total) — see
       "Desktop: extra spacing before the image" 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 — the same column width introduced on the Home page
   (css/pages/home.css) — per explicit request to bring this page's
   editorial rhythm (headings, paragraphs, images) in line with Home's.
   The column stays LEFT-aligned (align-self: flex-start, restated
   explicitly below — content-container.css's own default), per a later
   explicit request: an earlier pass had centered this narrower column
   (align-self: center) within .content-area's full width, which visibly
   shifted the whole block right of where every other page's content
   starts. Left-aligned instead, its left edge now lines up exactly with
   pages/collection.html's own content (breadcrumb, page title, and the
   first artwork card column) — collection.html never uses
   .content-container at all, so its breadcrumb/title/grid sit directly
   against .content-area's own left edge (padding-left: 0, layout.css);
   restoring flex-start here lands this page's own breadcrumb/title/body
   on that exact same edge, just narrower (700px vs. Collection's
   904px-wide two-column grid) rather than centered independently.
   Breadcrumb, title, and every section below all still share this one
   column, moving together as a single block. See the dedicated rule
   further down this file for the full mechanics. Mobile is completely
   unaffected — that rule only exists inside its own min-width: 1024px
   media query.

   Desktop text width (min-width: 1024px): every text block — heading,
   lead, body paragraph, FAQ intro — is additionally capped to 560px,
   flush against the 700px column's own left edge (not centered), reusing
   the exact same reading width as Home's .home-hero__text-group
   (css/pages/home.css) and Process's own .process__intro-heading/-body
   (css/components/process.css), per explicit request that this page's
   desktop layout match the left-aligned convention used across Collection
   and The Artistic Process. See "Desktop text width" further down this
   file.
   ============================================================================= */


/* ── Desktop column width ─────────────────────────────────────────────────
 * .content-container's own sitewide default (content-container.css):
 * max-width: 760px; align-self: flex-start (a flex item of .content-area,
 * flex-direction: column — see layout.css's "Alignment contract" note).
 * Narrowed here to 700px, scoped to this page only since commission.css
 * only ever loads on pages/commission.html — every other page reusing
 * .content-container (About, FAQs, Contact, and, via their own equivalent
 * override, The Artistic Process) keeps its own value.
 *
 * align-self: flex-start is restated here explicitly — even though it's
 * already content-container.css's own default and this rule would
 * inherit it either way — so the left-alignment decision doesn't depend
 * on a fallback being remembered correctly (same reasoning
 * content-container.css's own comment gives for stating it explicitly
 * there). An earlier pass set this to align-self: center instead, to
 * center the narrower 700px box within .content-area's full width; that
 * visibly shifted this page's content to the right of where every other
 * page starts (Collection's breadcrumb/title/grid, and every other
 * .content-container-using page's own breadcrumb/title), so it was
 * reverted back to flex-start per explicit request — width unchanged,
 * only the column's horizontal position moves back to match the rest of
 * the site.
 * ────────────────────────────────────────────────────────────────────── */

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


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

.commission__section {
  width: 100%;
  text-align: left;
  margin-top: var(--space-8);          /* 32px above each section */
  margin-bottom: var(--space-8);       /* 32px below each section */
}

/*
 * First section only: the page title ("Turn your route into art",
 * .page-title in page-header.css) sits directly above this. .page-header's
 * .page-header--content modifier sets margin-bottom: 0 for this page, so
 * this 32px margin-top is the entire, explicit gap — not a collapsed sum.
 * Kept as its own rule (even though it matches the base value above) so
 * this specific requirement — title → first heading = 32px — stays
 * self-documenting and independent of the general inter-section rhythm.
 */
.commission__section:first-child {
  margin-top: var(--space-8);          /* 32px — title → first body text
                                           (desktop — .page-title has no
                                           reserved zone below it, so this
                                           margin IS the full visible gap) */
}

/* Mobile only: below 1024px the title sits inside .section-title-bar's
   fixed 72px zone (unchanged — matches Collection, kept exactly as-is),
   which centers the title and leaves ~21.6px of empty space below the
   title's own text before the zone's box ends. That reserved space is
   invisible but still counts toward the rendered title→heading distance,
   so only THIS margin (the first section, not the general inter-section
   rhythm above) is reduced to keep the visible gap at or under 32px. */
@media (max-width: 1023px) {
  .commission__section:first-child {
    margin-top: var(--space-2);        /* 8px — visible gap lands at ~29.6px */
  }
}


/* ── Section heading ─────────────────────────────────────────────────────────── */
/*
 * 16px Semibold White.
 * margin-bottom: 32px; combined with body margin-top: 16px,
 * margin collapse produces a 32px gap below the heading.
 */

.commission__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-bottom: var(--space-8);       /* 32px below heading (collapses with body margin-top) */
  line-height: 1.5;
}


/* ── Lead sentence ───────────────────────────────────────────────────────────── */
/*
 * Callout-weight sentence within body content.
 * Same visual treatment as .commission__heading (16px Semibold White)
 * but semantically sits inside a section rather than introducing one.
 */

.commission__lead {
  font-family: var(--font-family-base);
  font-size: 1rem;                     /* 16px */
  font-weight: 600;                    /* Semibold */
  color: var(--color-white);
  text-align: left;
  margin: 0;
  line-height: 1.5;
}


/* ── Body paragraph ──────────────────────────────────────────────────────────── */
/*
 * 14px Regular Gray 100.
 * margin-top: 16px on every body paragraph.
 * When preceded by a heading (margin-bottom: 32px), margins collapse
 * and the gap is max(32px, 16px) = 32px.
 * Between body paragraphs the gap is 16px.
 */

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


/* ── CTA block ───────────────────────────────────────────────────────────────── */
/*
 * REMOVED — the "Contact the artist" CTA on this page now reuses the
 * Artwork Detail page's .artwork-cta component verbatim (see
 * css/components/artwork-cta.css and .artwork-card__cta in
 * artwork-card.css), instead of this page's own .btn-outline +
 * .commission__cta styling. This keeps a single shared CTA component
 * across both locations rather than two near-duplicate implementations.
 * See pages/commission.html for the current markup.
 */


/* ── Commission FAQ intro paragraph ──────────────────────────────────────────── *
 * Introduces the Commission FAQ accordion (css/components/faq.css, reused
 * verbatim on this page — see pages/commission.html). Distinct from
 * .commission__body (14px) — this paragraph is explicitly 16px Regular,
 * using --color-gray-100, the lightest grey token used for general body
 * copy sitewide (--color-gray-50 is reserved for artwork titles only, per
 * tokens.css). Lives inside the page's existing .commission__section /
 * .content-container wrappers, so it automatically matches the page's
 * content width and left alignment — no width/max-width rule needed here.
 * margin-top matches .commission__body's own 16px gap below a heading, for
 * the same comfortable, consistent rhythm as the rest of the page; the
 * gap below (before the accordion) comes from the parent
 * .commission__section's own 32px margin-bottom.
 * ─────────────────────────────────────────────────────────────────────────── */

.commission__faq-intro {
  font-family: var(--font-family-base);
  font-size: 1rem;                     /* 16px */
  font-weight: 400;                    /* Regular */
  color: var(--color-gray-100);        /* #B8B8B8 — lightest readable body grey token */
  text-align: left;
  line-height: 1.5;
  margin: 0;
  margin-top: var(--space-4);          /* 16px below the heading above it, same as .commission__body */
}


/* ── Desktop text width — matches Process's own intro treatment ───────────
 * Per explicit request: this page's desktop content should follow the same
 * left-aligned layout used across Collection and The Artistic Process,
 * instead of the centered treatment this section used to apply. Every text
 * block (heading, lead, body paragraph, and the FAQ intro) keeps the same
 * narrower 560px reading width already established on Home/Process
 * (.home-hero__text-group, css/pages/home.css; .process__intro-heading/
 * -body, css/components/process.css) — but flush against the column's own
 * left edge (no margin-inline: auto), left-aligned, matching Process's own
 * "Desktop text width — intro only" treatment exactly rather than Home's
 * centered .home-hero__text-group. Desktop only (min-width: 1024px);
 * mobile keeps every element's own base text-align: left (set on each rule
 * above), completely untouched, since nothing below exists outside this
 * media query.
 *
 * This supersedes the earlier centered version of this same rule (560px
 * max-width, margin-inline: auto, text-align: center) — width is
 * unchanged, only the alignment reverts to left, per explicit request.
 *
 * Each element gets its own max-width rather than a single shared wrapper:
 * unlike Home's grouped title+body pairs (each inside its own
 * .home-hero__text-group div), .commission__heading, .commission__lead
 * and .commission__body are plain siblings directly inside
 * .commission__section, and .commission__faq-intro lives alone in its own
 * section — no existing wrapper groups them together. Capping each
 * element individually produces the identical visual result (every line
 * of text reads within the same 560px column) without introducing new
 * wrapper markup.
 * ─────────────────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  .commission__heading,
  .commission__lead,
  .commission__body,
  .commission__faq-intro {
    max-width: 560px;
    text-align: left;
  }
}


/* ── Image ────────────────────────────────────────────────────────────────────── */
/*
 * Full-width real photo. Sits as a standalone element between two
 * .commission__section divs. Its vertical spacing comes from the
 * surrounding section margins.
 *
 * No fixed aspect-ratio on the wrapper: the photo (700×700 natural size)
 * sets its own height via the `.commission__image img` rule below, so it
 * always renders complete and uncropped at its true proportions — width
 * stays bound to the container (100%, capped at 700px by the page's
 * .content-container override on desktop; full content-area width on
 * mobile — see pages/commission.html), height is calculated automatically.
 * background-color stays as a brief loading-state fill, matching the
 * pattern used elsewhere for images with no fixed box.
 */

.commission__image {
  width: 100%;
  background-color: var(--color-gray-100);
  display: block;
}

.commission__image img {
  display: block;
  width: 100%;
  height: auto;                       /* natural aspect ratio — no crop, no forced height */
}


/* ── Scroll reveal — matches Home ────────────────────────────────────────────
 * Per explicit request, this image reuses Home/Collection's continuous
 * fade + light parallax (js/home-reveal.js toggles .is-visible on/off via
 * IntersectionObserver every time the image crosses the viewport edge, in
 * either direction) instead of this page's own text sections, which still
 * use the sitewide one-shot .reveal-block/.is-revealed system in
 * reveal.css + js/content-reveal.js — see that file's own comments.
 * Values copied as-is from css/pages/home.css's own ".home-hero__image-
 * wrap" rule: same 16px slide distance, same 1000ms duration/easing as
 * every other image reveal sitewide. No blur/veil here — those are
 * one-shot-only effects (reveal.css), deliberately not part of this
 * continuous system. Applies at every viewport width, not mobile-only.
 * ─────────────────────────────────────────────────────────────────────────── */

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

  .commission__image {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 1000ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 1000ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .commission__image.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

}

/* Reduced motion: still fades in/out (immediately, no slide, no parallax
   — see js/home-reveal.js), same treatment as every other continuous
   reveal target sitewide. */
@media (prefers-reduced-motion: reduce) {

  .commission__image {
    opacity: 0;
    transition: opacity 150ms ease;
  }

  .commission__image.is-visible {
    opacity: 1;
  }

}


/* ── Desktop: extra spacing before the image ───────────────────────────────
 * Per explicit request: 32px of ADDITIONAL space between the end of
 * Section 1's body text and this image, on top of the 32px already
 * provided by .commission__section's own margin-bottom above — 64px
 * total. Expressed as this element's own explicit margin-top rather than
 * relying on sibling margin-collapse to "add" the two 32px values
 * together (adjoining margins collapse to their larger value, not their
 * sum, so a bare var(--space-8) here would have had no visible effect at
 * all) — this single, explicit var(--space-16) on the one element that
 * needs the extra room becomes the entire visible gap, correctly
 * collapsing with (not stacking additionally on top of) the section's
 * own 32px margin-bottom. Desktop only — mobile keeps the original 32px,
 * unaffected, since nothing below exists outside this media query.
 * ─────────────────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  .commission__image {
    margin-top: var(--space-16);       /* 64px = the existing 32px + 32px more, per explicit request */
  }
}


/* ── Desktop: widen and left-align the "Contact the artist" CTA ────────────
 * .artwork-cta (artwork-cta.css) locks to a fixed width: 500px on desktop
 * by default, with no margin-inline: auto of its own — correct on the
 * Artwork Detail pages, where it's meant to sit flush with that page's
 * own left-aligned 500px photo/story column (see artwork-cta.css's own
 * "Desktop: constrain to the gallery's own column width" comment). This
 * page's .page-main sits in its own left-aligned 700px column instead
 * (see "Desktop column width" above), so a fixed 500px child would sit
 * narrower than every other block above it. Overridden back to width:
 * 100% of .page-main, scoped to `.page-main .artwork-cta` (0,2,0) so it
 * only ever applies inside this page's <main> — every Artwork Detail page
 * keeps its own 500px, left-aligned behavior untouched.
 *
 * The button and hint inside default to centered (.artwork-cta's own
 * text-align: center, the button's own margin-inline: auto, and the
 * hint's own text-align: center — all in artwork-cta.css), which no
 * longer matches this page's left-aligned layout (see "Desktop text
 * width" above) — per explicit request, overridden below to left-align
 * both, scoped the same way so no other page reusing .artwork-cta is
 * affected. Mobile is untouched — .artwork-cta is already width: 100%,
 * centered there by default (unchanged), since none of these overrides
 * exist outside this media query.
 * ─────────────────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {

  .page-main .artwork-cta {
    width: 100%;
    text-align: left;
  }

  .page-main .artwork-cta .artwork-card__cta {
    margin-left: 0;
    margin-right: 0;
  }

  .page-main .artwork-cta__hint {
    text-align: left;
  }

}


/* ── Smooth-scroll for incoming hash links ───────────────────────────────
 * The Home page's "Learn more" button (index.html) now links here as
 * pages/commission.html#main-content instead of scrolling within Home —
 * this mirrors home.css's own scoped `html { scroll-behavior: smooth }`
 * (added there for its own in-page anchor) so the landing jump on this
 * page is smooth too, wherever the browser supports animating an
 * initial/cross-page hash scroll (behavior varies — some browsers still
 * jump instantly on first paint regardless of this rule; there is no
 * further CSS-only fix for that browser-level limitation). Respects
 * prefers-reduced-motion, same as every other motion rule in this
 * codebase. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}