/* =============================================================================
   artwork-detail-layout.css — desktop two-column layout for the Artwork
   Detail (PDP) page. Linked from every artwork detail page (pages/
   bibliographie.html, pages/capitan-black.html, pages/rocklands-boulder.html).

   Mobile is completely untouched: every rule here lives inside a single
   @media (min-width: 1024px) block, and .artwork-section (the only new
   element in the DOM) carries zero rules outside it — so on mobile it is a
   plain, unstyled <div> with no layout effect at all. No font-size, color,
   font-weight, or spacing VALUE is invented anywhere in this file; every
   rule is pure positioning (fixed width/height, grid columns), the explicit
   text-align: left overrides requested for the desktop layout, and the
   minimum margin resets needed to stop mobile "stacked" margins from
   double-counting once elements sit side-by-side instead of stacked (each
   is commented with exactly which margin it replaces and why).

   Structure — DOM order is unchanged from before this file existed:

     <div class="artwork-detail__intro">...</div>            full-width page header (existing, unmoved — a sibling BEFORE .artwork-section, not inside it)

     <div class="artwork-section">                            (only new element)
       <div class="artwork-zoom">                                left column wrapper (added for desktop hover-zoom, css/components/artwork-zoom.css — zero effect outside that file's own media query)
         <img class="artwork-detail__image">                       existing image, unmoved
         <div class="artwork-zoom__lens">                          high-res zoom layer, hidden until desktop hover
       </div>
       <div class="artwork-info">...</div>                     right column (existing, unmoved)
     </div>

     <section class="artwork-story">                          second row
       <img class="artwork-story__image">                        left column
       <p class="artwork-story__credit">                         left column, row 2
       <div class="artwork-story__text">...</div>                right column
     </section>

   Because .artwork-detail__intro now sits OUTSIDE .artwork-section (as a
   full-width block above it, per spec), .artwork-section only ever has to
   place two items — the image and .artwork-info — side by side in a single
   grid row. Nothing spans multiple rows, so this is a plain two-column grid
   with no positioning tricks needed.

   .artwork-story itself has TWO possible desktop layouts, chosen per page:
     - Two-column grid (above): bibliographie.html, capitan-black.html —
       no gallery images, image+credit beside the text block.
     - .artwork-story--linear (bottom of the media query below):
       rocklands-boulder.html — has extra gallery photos and a CTA button
       directly after, so it renders as a single block-flow column instead,
       keeping visual order identical to HTML source order throughout.
   ============================================================================= */

@media (min-width: 1024px) {

  /* ── Page header: artwork title + status ────────────────────────────────────
   * .artwork-detail__intro already spans the full content width (width: 100%,
   * artwork-info.css) — no positioning change needed here, only the
   * requested left-alignment (mobile keeps its own centered text-align).
   * margin-bottom: 32px (unchanged, artwork-info.css) is the gap to the
   * two-column row below.
   * ─────────────────────────────────────────────────────────────────────── */

  .artwork-detail__intro,
  .artwork-detail__intro * {
    text-align: left;
  }

  /* ── First content row: image + info ────────────────────────────────────── *
   * REVISED — rolled out site-wide from the Sleeping Lion Test page's
   * approved layout: reuses Collection's own desktop 2-column proportions
   * (css/pages/collection.css) instead of this component's previous fixed
   * 500px/336px columns. Image column is fluid (min(600px, 58%), never
   * causes horizontal scroll, unlike a hardcoded pixel width), gap and
   * vertical alignment copied verbatim from Collection.
   * ─────────────────────────────────────────────────────────────────────── */

  .artwork-section {
    display: grid;
    grid-template-columns: min(600px, 58%) 1fr;  /* was 500px 336px — matches css/pages/collection.css exactly */
    column-gap: var(--space-10);       /* 40px — was 48px; matches css/pages/collection.css */
    align-items: center;               /* was start (top-align); matches Collection's own vertical alignment */
  }

  /*
   * .artwork-zoom (added for the desktop hover-zoom interaction, see
   * css/components/artwork-zoom.css) is the direct grid child in place of
   * .artwork-detail__image — grid-column/width live here so it occupies
   * the full image column, whatever width the fluid min(600px, 58%) track
   * resolves to. The img itself keeps width: 100% too (next rule).
   */
  .artwork-section .artwork-zoom {
    grid-column: 1;
    width: 100%;                       /* was 500px */
  }

  .artwork-section .artwork-detail__image {
    width: 100%;                       /* was 500px */
    /* height intentionally NOT set here — see the no-crop guarantee on
       .artwork-detail__image in artwork-info.css (aspect-ratio: unset;
       object-fit: unset; height: auto;), rolled out site-wide alongside
       this layout so every artwork photo scales at its own natural ratio,
       never cropped, at exactly this column's fluid width. */
  }

  .artwork-section .artwork-info {
    grid-column: 2;
    width: 100%;
    max-width: 264px;                  /* was 336px — matches css/pages/collection.css's .collection-row .artwork-card text column ("mismo ancho relativo") */

    /*
     * margin-top: 32px (artwork-info.css) was sized for the gap *below the
     * image* on mobile. Side-by-side, that would push .artwork-info down
     * below the aligned baseline instead of starting level with the image.
     * Zeroed so this column doesn't add its own offset.
     */
    margin-top: 0;

    /*
     * margin-bottom: 32px was likewise sized for mobile stacking before
     * .artwork-story. The 80px gap between the two content rows is applied
     * as a single value on .artwork-story--linear's margin-top instead
     * (below), so this is zeroed to avoid adding an extra 32px on top of
     * that 80px.
     */
    margin-bottom: 0;
  }

  /* Left-align every text node in the right column — dimensions and
     materials (text-align only affects where an inline-flex box sits
     horizontally; it doesn't touch the icon/text spacing inside the CTA
     itself, which is unrelated flex alignment). */
  .artwork-section .artwork-info,
  .artwork-section .artwork-info * {
    text-align: left;
  }

  /*
   * Exception: the scale-reference link is explicitly kept centered (per
   * the "read as supporting info, not a CTA" pass — see
   * .artwork-info .artwork-card__cta in artwork-info.css), unlike its
   * left-aligned dimensions/materials siblings above. Three classes here
   * outweighs the two-class wildcard rule above regardless of source
   * order, so this wins without needing !important.
   */
  .artwork-section .artwork-info .artwork-card__cta {
    text-align: center;
  }

  /* ── Second content row: inspiration photo + story ──────────────────────── */
  /*
   * .artwork-story now contains .artwork-story__image, then
   * .artwork-story__credit, then .artwork-story__text (the credit caption
   * was added between the other two after this grid was written). Without
   * an explicit placement, that third item has no definite grid-column/
   * row of its own, so the browser's auto-placement algorithm slotted it
   * into column 2 (stealing the cell .artwork-story__text needed) instead
   * of sitting under the image where it visually belongs — explicit
   * placement below fixes that: .artwork-story__credit is pinned to
   * column 1 (the image's own column), row 2 (a new implicit row,
   * auto-sized to just its own single line of text, directly under the
   * image), which leaves .artwork-story__image at row 1/col 1 and
   * .artwork-story__text at row 1/col 2 exactly as before.
   * margin-top: 80px is the exact vertical distance to the row above.
   */

  .artwork-story {
    display: grid;
    grid-template-columns: 500px 336px;
    column-gap: 48px;
    align-items: start;              /* top-align — never vertically center */
    margin-top: 80px;                /* exact 80px gap between content rows */
  }

  .artwork-story__image {
    grid-column: 1;
    grid-row: 1;
    width: 500px;
    height: 700px;
    aspect-ratio: unset;
  }

  .artwork-story__credit {
    grid-column: 1;                  /* same column as the image, not the auto-placed default */
    grid-row: 2;                     /* new row directly below the image row — never shares row 1 with .artwork-story__text */
  }

  .artwork-story__text {
    grid-column: 2;
    grid-row: 1;                     /* explicit, so it can never be pushed down by the credit caption stealing row 1 */
    max-width: 336px;
    margin-top: 0;                   /* was 32px for the mobile "below image" gap — side-by-side now, so this would break top-alignment with the image */
  }

  /* Left-align every text node in the story column (label, route, lead,
     and body paragraphs all set their own explicit text-align: center on
     mobile — each needs the override, not just the .artwork-story__text
     container, since an element's own explicit value isn't overridden by
     a parent's). */
  .artwork-story__text,
  .artwork-story__text * {
    text-align: left;
  }

  /* ── Linear story layout — image column + text column ────────────────────
   * REVISED — rolled out site-wide from the Sleeping Lion Test page's
   * approved layout. .artwork-story--linear (used by every current artwork
   * detail page) now applies Collection's own 2-column grid instead of the
   * old fixed-width single block-flow column: every direct-child photo
   * (reference photo + any gallery photos, in DOM order) and the credit
   * caption stack in the LEFT column; the text block sits in the RIGHT
   * column, vertically centered against the FIRST photo specifically (not
   * the full stack) — per explicit follow-up request.
   *
   * This generalizes across every page regardless of how many gallery
   * photos it has or whether a credit caption is present, with no
   * per-page override needed:
   *   - Every direct-child <img> (reference photo + any gallery photos)
   *     gets grid-column: 1, row auto — the grid's own row-major
   *     auto-placement stacks them in DOM order, each new row sized to
   *     that photo's own height (never cropped/stretched).
   *   - .artwork-story__credit (when present) also gets grid-column: 1,
   *     row auto, so it slots into the stack at its own DOM position.
   *   - .artwork-story__text is explicitly pinned to grid-column: 2,
   *     grid-row: 1 — i.e. the SAME row as the first (reference) photo,
   *     whichever DOM position it occupies among the page's own content —
   *     and align-self: center vertically centers it against that first
   *     photo's own height specifically, matching Collection's own
   *     per-item vertical centering.
   *
   * Column width/gap (min(600px, 58%) / 40px) match Section 1's own grid
   * above and css/pages/collection.css exactly.
   */
  .artwork-story.artwork-story--linear {
    display: grid;
    grid-template-columns: min(600px, 58%) 1fr;  /* was a fixed 500px block-flow column */
    column-gap: var(--space-10);       /* 40px — same width/gap as Section 1's grid above */
    align-items: center;
    width: 100%;
    max-width: none;
    margin-top: 80px;                 /* unchanged — same 80px gap between content rows */
  }

  .artwork-story--linear > img {
    grid-column: 1;                   /* every direct-child photo (reference + gallery) stacks in column 1, in DOM order */
  }

  .artwork-story--linear .artwork-story__image {
    width: 100%;
    aspect-ratio: 5 / 7;               /* was a fixed 500×700 box — now fluid so the same crop shape scales with the responsive column width */
    object-fit: cover;                 /* inherited from the mobile base rule (artwork-story.css); restated since aspect-ratio is redeclared here */
  }

  /* .artwork-story__image--natural (artwork-story.css) — opt-in per-artwork
   * override, for artworks whose reference photo must render uncropped at
   * its own native ratio instead of the shared crop box above. Two class
   * segments here beat the one-segment rule directly above regardless of
   * source order. */
  .artwork-story--linear .artwork-story__image.artwork-story__image--natural {
    aspect-ratio: unset;
    object-fit: unset;
    height: auto;
  }

  .artwork-story--linear > .artwork-story__credit {
    grid-column: 1;                   /* slots into the column-1 stack at its own DOM position */
  }

  .artwork-story--linear > .artwork-story__text {
    grid-column: 2;
    grid-row: 1;                      /* pinned to the FIRST photo's row specifically, regardless of how many rows the column-1 stack ends up needing */
    align-self: center;               /* vertically centers against that first photo's own height — per explicit follow-up request (not the full stack) */
    max-width: 264px;                 /* was "none" — the grid column itself is 1fr (fluid), so without a cap this text block stretched across the full remaining width on wide viewports, producing excessively long lines. 264px matches the text-column width already established elsewhere in this same file (.artwork-section .artwork-info, above) and reused by pages/the-artistic-process.html's own image+text stage grid (.process__stage-content, process.css) — same reading-column width already used sitewide next to a left-hand image, applied here for consistency. Grid placement/column width, image, gap, and vertical centering are all unchanged; only the text's own rendered width is capped. */
    margin-top: 0;                    /* was 32px, sized for the mobile "below credit" gap — not needed side-by-side */
    text-align: left;
  }

  /* Left-align every text node in the story column, matching Section 1's
   * info column and Collection's own left-aligned card text — was
   * centered (mobile's own treatment, still used below 1024px). Three
   * selector segments here (.artwork-story--linear > .artwork-story__text
   * and its descendants) outweigh weaker rules regardless of source order. */
  .artwork-story--linear > .artwork-story__text,
  .artwork-story--linear > .artwork-story__text * {
    text-align: left;
  }

  /* The divider is a block-level <img> (.artwork-story__divider,
   * artwork-story.css) with its own margin-inline: auto, which centers it
   * horizontally regardless of text-align — that rule above only affects
   * inline content, not this element's own block-centering margins.
   * Overridden here, desktop only, so the divider sits flush against the
   * same left edge as the surrounding text instead of staying centered in
   * the narrowed 264px column above. Mobile keeps the original centered
   * treatment, unaffected — this lives inside the same 1024px+ media
   * query as the text-align override above. */
  .artwork-story--linear > .artwork-story__text .artwork-story__divider {
    margin-inline: 0;
  }

}