/* =============================================================================
   content-container.css — shared readable-width wrapper for editorial pages
   (About, FAQs, Contact, Commission, and any future text/content page).

   NOT linked from collection.html or bibliographie.html — the Collection
   grid and Artwork Detail layouts intentionally stay at their existing,
   wider widths (see collection-grid.css / artwork-detail-layout.css).

   index.html (Home) is a partial exception: it still links and uses this
   file (breadcrumb/page title share its box, same as every other page),
   but overrides this class's own max-width/align-self on desktop —
   scoped entirely to css/pages/home.css, which only loads on index.html
   — to make room for a wider, centered 880px column on .page-main instead
   of this file's 760px, left-aligned default. See that file's own
   "Desktop editorial column" comment for the full rationale.

   No media query needed: max-width: 760px only ever constrains viewports
   wider than 760px. On mobile (393px reference) the content is already
   narrower than that cap, so this has zero visual effect there.

   Structure — wraps breadcrumb + page title + body content, so all three
   share the same 760px-capped, left-aligned box. .site-footer stays
   outside it (it's empty on every page today; not part of the requested
   "breadcrumb, page title, body copy, FAQs and forms" list):

     <div class="content-area">
       <div class="content-container">
         <nav class="breadcrumb">...</nav>
         <header class="page-header">...</header>
         <main class="page-main">...</main>
       </div>
       <footer class="site-footer">...</footer>
     </div>
   ============================================================================= */

.content-container {
  max-width: 760px;
  width: 100%;

  /*
   * .content-container is a flex item of .content-area (display: flex;
   * flex-direction: column — layout.css). Flex's default align-items:
   * stretch only stretches an item whose cross-size is auto; since width
   * is set explicitly here, stretch has no effect and the item already
   * lands at the start (left) of the cross axis — align-self: flex-start
   * is set explicitly anyway so the left alignment doesn't depend on that
   * fallback behavior being remembered correctly.
   */
  align-self: flex-start;
}


/* =============================================================================
   Shared editorial CTA width — desktop only
   Single source of truth for every boxed CTA on an editorial page (e.g.
   "Contact the artist" on Commission, "Send message" / "Chat on WhatsApp" /
   the phone button on Contact, and any future .btn-outline/.btn-action in
   this wrapper) — one rule, so they all share exactly the same max width.

   .btn-outline and .btn-action both default to width: 100% (button.css /
   contact.css) so they stretch edge-to-edge on mobile — that's unchanged.
   On desktop, inside an editorial page's .content-container, they're capped
   at 240px so a boxed CTA reads as an intentional button rather than a
   full-width bar. Scoped to ".content-container" so this can never reach
   .header-desktop__cta (already a fixed 96px, unaffected either way) or the
   artwork detail page's modal close button (.js-scale-close), which has no
   .content-container ancestor at all.

   Only max-width changes here — typography, height, and padding all stay
   whatever button.css/contact.css already define.

   Left at width: 100% here (not overridden) — max-width alone already caps
   the rendered size; aligning the now-narrower button within its existing
   wrapper (left vs. centered) is handled per page, next to that page's own
   text-align rules (see .commission__cta in commission.css and .page-main
   in contact.css).
   ============================================================================= */

@media (min-width: 1024px) {
  .content-container .btn-outline,
  .content-container .btn-action {
    max-width: 240px;
  }
}