/* =============================================================================
   collection.css — layout for pages/collection.html ONLY.

   One artwork per row, image + text side by side on desktop, stacked on
   mobile. This replaced the earlier 2-column card grid implementation of
   Collection (which used css/components/collection-grid.css — now removed,
   unused). No shared component file (artwork-card.css, reveal.css, etc.) is
   modified by this file — every rule below is scoped to classes that only
   exist on this one page, so it cannot affect any other page even if
   accidentally linked elsewhere.

   Structure per row (see collection.html):

     <article class="collection-row [collection-row--private]">
       <div class="collection-row__image-wrap">
         <img class="collection-row__image" ...>
       </div>
       <div class="artwork-card">                 ← reused text component, unmodified
         <div class="artwork-card__info">
           <h2 class="artwork-card__title">...</h2>
           <p class="artwork-card__private-label">...</p>   (only shown if artwork-card--private)
           <p class="artwork-card__inspiration">...</p>
         </div>
         <a class="artwork-card__cta">...</a>
       </div>
     </article>

   The title/status/inspiration/CTA block reuses the EXACT SAME classes
   (.artwork-card, .artwork-card__info, .artwork-card__title,
   .artwork-card__private-label, .artwork-card__inspiration,
   .artwork-card__cta and its two label spans) — same fonts, colors, sizes,
   hover states, and the mobile full-width button treatment, completely
   unedited (css/components/artwork-card.css is not touched). Only the
   IMAGE gets a brand-new class (.collection-row__image) instead of
   .artwork-card__image, because that shared class hard-codes
   width: 344px / aspect-ratio: 500/659 / object-fit: cover — exactly the
   crop-and-fix-size behavior this page explicitly must NOT have. The new
   image class only ever sets width/height: auto, so every photo keeps its
   own natural proportions at every viewport, per explicit request.

   .artwork-card is reused here purely as a text wrapper (its own image-wrap
   child is simply never present in this page's markup) — every one of its
   existing rules (mobile centering, mobile full-width CTA button, desktop
   left-alignment, hover states) fires exactly as it already does elsewhere
   on the site. The two small overrides below (killing its own
   margin-bottom/margin-inline/the info block's margin-top once it becomes a
   grid cell) exist only so THIS page's row-to-row spacing has a single,
   unambiguous owner (.collection-row itself) instead of double-counting
   .artwork-card's own pre-existing spacing — same "one gap, one owner"
   convention used throughout this codebase (see home.css, process.css).

   Mobile (below 1024px): .collection-row carries no rules outside the
   @media (min-width: 1024px) block below, so it is a plain, unstyled
   wrapper — image-wrap and .artwork-card simply stack in normal document
   flow, image on top at full available width, text block immediately below
   it, exactly matching the "single column, image full width, title/status/
   info/CTA below" behavior requested. .artwork-card's own existing mobile
   rules (344px, centered) are completely untouched.

   Desktop (1024px+): each .collection-row becomes a 2-column grid — image
   column capped at "min(600px, 58%)" (fluidly shrinks with the viewport
   instead of a fixed literal pixel width that could overflow a narrower
   desktop window, per explicit request never to introduce horizontal
   scroll) and a flexible 1fr text column, vertically centered against each
   other via align-items: center. 600px at this page's typical desktop
   content-area width (~1004–1014px at the 1440px reference used sitewide)
   lands very close to the requested "approximately 600px," while still
   scaling safely down at the 1024px breakpoint edge.
   ============================================================================= */


/* ── Row spacing (mobile-first — this value also applies on desktop unless
 *    overridden below) ────────────────────────────────────────────────────
 * .collection-row is the single owner of "gap to the next artwork." The
 * reused .artwork-card's own margin-bottom (48px, artwork-card.css) is
 * zeroed below so the two never stack into a doubled gap.
 * ─────────────────────────────────────────────────────────────────────── */

.collection-row {
  margin-bottom: var(--space-16);      /* 64px between rows — generous, deliberate breathing room for these larger single-column artworks (more than the standard 48px card-grid gap), per "deja suficiente espacio vertical entre una obra y la siguiente" */
}

.collection-row .artwork-card {
  margin-bottom: 0;                    /* .collection-row above now owns the inter-row gap */
}


/* ── Image (every viewport) ──────────────────────────────────────────────
 * No aspect-ratio, no object-fit, no fixed width baked in here — the box
 * this sits inside (full content width on mobile, the grid's image column
 * on desktop) is what actually controls the rendered size. This is the
 * only way to guarantee every photo's own natural proportions are kept
 * intact at every breakpoint, per explicit request.
 * ─────────────────────────────────────────────────────────────────────── */

.collection-row__image-wrap {
  display: block;
  position: relative;                  /* containing block, same pattern as .artwork-card__image-wrap elsewhere on the site */
}

.collection-row__image {
  display: block;
  width: 100%;
  height: auto;                        /* preserves the photo's own aspect ratio exactly — no cropping, no stretching */
  max-width: 100%;
}

/* ── Whole-image click target ────────────────────────────────────────────
 * .collection-row__image-link wraps each row's <img> in a real <a>, so the
 * entire photo becomes clickable/keyboard-focusable and goes to the exact
 * same destination as that row's "View artwork & story" CTA (same href,
 * matching aria-label — see collection.html). display: block with no other
 * sizing rule makes this anchor a transparent, zero-footprint wrapper: it
 * takes on the image's own dimensions exactly (an <a> is inline by
 * default, which could otherwise introduce a stray inline-baseline gap
 * around a block-level image), so layout, size, spacing and responsive
 * behavior are all completely unaffected — this only adds a link, nothing
 * else changes. cursor: pointer is set explicitly (already the default for
 * an <a>, but declared here so the requirement is unambiguous). The CTA
 * link below each row's text is untouched — this is a second, independent
 * way to reach the same page, not a replacement.
 * ─────────────────────────────────────────────────────────────────────── */
.collection-row__image-link {
  display: block;
  cursor: pointer;
}

/* ── Native-resolution safeguard (opt-in, per image) ─────────────────────
 * One of this page's 16 source photos (Mind Control) is currently only
 * available at 500×659px — smaller than the ~600px desktop image column
 * this page targets. Without a cap, the base rule above (width: 100%)
 * would stretch it past its real pixel resolution at wide desktop
 * viewports, visibly softening/blurring it. This modifier caps just that
 * one <img> element at its own native width so it scales down freely on
 * narrow viewports but never scales up beyond it — per explicit request
 * never to enlarge a photo past its natural resolution. Every other row's
 * photo (700px-wide source or larger) never reaches this cap and is
 * unaffected. Remove this modifier from an image's markup once a
 * higher-resolution replacement is uploaded for it.
 * ─────────────────────────────────────────────────────────────────────── */
.collection-row__image--native-500 {
  max-width: 500px;
}


/* ── Desktop: side-by-side row ───────────────────────────────────────────
 * See file header for the full reasoning behind each override.
 * ─────────────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {

  .collection-row {
    display: grid;
    grid-template-columns: min(600px, 58%) 1fr;
    column-gap: var(--space-10);       /* 40px — same image/text gap rhythm already used on Home and Process */
    align-items: center;               /* vertically centers the text column against the image, per explicit request */
  }

  .collection-row__image-wrap {
    grid-column: 1;
    grid-row: 1;
  }

  .collection-row .artwork-card {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: 264px;                  /* matches Home's text column exactly — css/pages/home.css's .home-hero__block grid-template-columns: 700px 40px 264px; reused verbatim (Home has no separate width class/container, this literal value is its "text column width"), per explicit request for total consistency between the two pages */
    margin-inline: 0;                  /* .artwork-card's own base rule auto-centers a 344px box — not wanted once it's a left-aligned grid cell */
  }

  .collection-row .artwork-card__info {
    margin-top: 0;                     /* .artwork-card__info's own 16px margin-top (artwork-card.css) exists to clear an image stacked directly above it in the original card; not needed here since the grid's column-gap already separates image and text */
  }

}


/* =============================================================================
   Scroll reveal — matches Home exactly. Per explicit request, Collection
   reuses the identical continuous fade + slight vertical movement system
   already implemented for Home (css/pages/home.css's own "Scroll reveal"
   section + js/home-reveal.js), rather than a new or similar animation —
   same script, same trigger (js/home-reveal.js's IntersectionObserver,
   extended with this page's own selectors), same values copied verbatim
   below (translateY distance, duration, easing, threshold). This replaces
   the one-shot, mobile-only .reveal-block/.reveal-block--image system
   (reveal.css + js/content-reveal.js) this page used previously — that
   shared system is untouched and still serves every other page that links
   it (Artwork Detail pages, commission.html, contact.html, faqs.html).

   Unlike the old system, this one runs at every viewport (Home's own
   version isn't scoped to mobile either) and fades back OUT as each
   element scrolls back out of view, not just in once.

   Applies to every .collection-row__image-wrap (the row's photo) and,
   inside each row's .artwork-card, its .artwork-card__title (title),
   .artwork-card__private-label (status), .artwork-card__inspiration
   (description) and .artwork-card__cta (CTA) — image, title, status,
   description and CTA per spec. Selectors are scoped with the
   ".collection-row" ancestor so this section only ever matches rows on
   this page, never the same class names reused on Artwork Detail pages
   elsewhere on the site.
   ============================================================================= */

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

  .collection-row__image-wrap,
  .collection-row .artwork-card__title,
  .collection-row .artwork-card__private-label,
  .collection-row .artwork-card__inspiration,
  .collection-row .artwork-card__cta {
    opacity: 0;
    transform: translateY(16px);
  }

  .collection-row .artwork-card__title,
  .collection-row .artwork-card__private-label,
  .collection-row .artwork-card__inspiration,
  .collection-row .artwork-card__cta {
    transition: opacity 750ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
  }

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

  .collection-row__image-wrap.is-visible,
  .collection-row .artwork-card__title.is-visible,
  .collection-row .artwork-card__private-label.is-visible,
  .collection-row .artwork-card__inspiration.is-visible,
  .collection-row .artwork-card__cta.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 — identical to Home's own reduced-motion treatment. */
@media (prefers-reduced-motion: reduce) {

  .collection-row__image-wrap,
  .collection-row .artwork-card__title,
  .collection-row .artwork-card__private-label,
  .collection-row .artwork-card__inspiration,
  .collection-row .artwork-card__cta {
    opacity: 0;
    transition: opacity 150ms ease;
  }

  .collection-row__image-wrap.is-visible,
  .collection-row .artwork-card__title.is-visible,
  .collection-row .artwork-card__private-label.is-visible,
  .collection-row .artwork-card__inspiration.is-visible,
  .collection-row .artwork-card__cta.is-visible {
    opacity: 1;
  }

}