/* Prints in the light (addon/gallery/004) — sage_light_rest w1 (INV-05, D-031, D-032 ruling B).
   The couple's photos as card-bordered prints laid down on the table as the guest scrolls, under a still window-light
   leaf shadow. The prints stay real DOM images (ruling B); the shadow is a multiply layer at D-032's photo strength (.22),
   feathered at its edges so it melts into the paper. live.js draws the same shadow with the same numbers (black with
   alpha .22 x (1 - map) = CSS multiply at .22), so its first frame IS this one; then the leaves drift (mover 1).
   Press a print and it flattens onto the table: no tilt, a tighter shadow (both versions).
   Phone: one column, alternating 4% / 14% offsets. Tablet: two columns, the second 12% lower. Desktop: two columns up
   to 900px, three for 5-6 photos (the middle one lower). */
.ga004 {
  --ga004-m: 40px; --ga004-fx: 40px; --ga004-fy: 64px; --ga004-sx: 78%; --ga004-sy: 16%;
  position: relative; overflow: hidden; touch-action: pan-y;
  padding: var(--k-section-pad) var(--k-gutter); background: var(--k-light-ground); color: var(--k-ink); text-align: center;
}
.ga004__inner { max-width: 640px; margin: 0 auto; }
/* the lit area: the prints plus a margin the shadow feathers out in (wider than the phone screen: the section clips it) */
.ga004__light { position: relative; margin: calc(30px - var(--ga004-m)) calc(-1 * var(--ga004-m)) 0; padding: var(--ga004-m); }
.ga004__prints { position: relative; z-index: 1; display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.ga004-print { --ga004-r: -1.6deg; width: 82%; margin-left: 4%; }
.ga004-print:nth-child(even) { --ga004-r: 1.2deg; margin-left: 14%; }
.ga004-print__frame {
  margin: 0; padding: 10px; background: var(--k-card); box-shadow: var(--k-shadow-paper);
  transform: rotate(var(--ga004-r)); transition: transform .25s var(--k-ease), box-shadow .25s var(--k-ease);
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.ga004-print__frame img { display: block; width: 100%; height: auto; }
/* pressed flat onto the table (section.js adds .is-pressed; :active covers the page without scripts) */
.ga004-print.is-pressed .ga004-print__frame, .ga004-print__frame:active {
  transform: rotate(0deg); box-shadow: 0 1px 1px rgb(74 63 53 / .07), 3px 6px 8px rgb(74 63 53 / .12);
}
.ga004__shade {
  position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none;
  object-fit: cover; object-position: var(--ga004-sx) var(--ga004-sy); mix-blend-mode: multiply; opacity: .22;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 var(--ga004-fx), #000 calc(100% - var(--ga004-fx)), transparent 100%),
    linear-gradient(180deg, transparent 0, #000 var(--ga004-fy), #000 calc(100% - var(--ga004-fy)), transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0, #000 var(--ga004-fx), #000 calc(100% - var(--ga004-fx)), transparent 100%),
    linear-gradient(180deg, transparent 0, #000 var(--ga004-fy), #000 calc(100% - var(--ga004-fy)), transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.ga004__stage { position: absolute; z-index: 3; inset: 0; pointer-events: none; }

/* tablet: two columns, the second laid 12% lower (top: % of the print's own grid row) */
@media (min-width: 768px) {
  .ga004 { --ga004-m: 64px; --ga004-fx: 64px; --ga004-fy: 88px; }
  .ga004__light { margin-top: calc(40px - var(--ga004-m)); }
  .ga004__prints { grid-template-columns: 1fr 1fr; gap: 30px 34px; align-items: start; padding-bottom: 8%; }
  .ga004-print, .ga004-print:nth-child(even) { width: auto; margin-left: 0; }
  .ga004-print:nth-child(4n+1) { --ga004-r: -1.6deg; }
  .ga004-print:nth-child(4n+2) { --ga004-r: 1.2deg; }
  .ga004-print:nth-child(4n+3) { --ga004-r: 1deg; }
  .ga004-print:nth-child(4n+4) { --ga004-r: -1.1deg; }
  .ga004-print:nth-child(even) { position: relative; top: 12%; }
  .ga004-print:only-child { grid-column: 1 / -1; justify-self: center; width: min(100%, 420px); }
}
/* desktop: up to 900px; 5-6 photos take three columns, the middle one lower */
@media (min-width: 1024px) {
  .ga004 { --ga004-m: 110px; --ga004-fx: 110px; --ga004-fy: 96px; }
  .ga004__inner { max-width: 900px; }
  .ga004__prints:has(> :nth-child(5)) { grid-template-columns: repeat(3, 1fr); gap: 30px 30px; padding-bottom: 6%; }
  .ga004__prints:has(> :nth-child(5)) > .ga004-print:nth-child(even) { top: 0; }
  .ga004__prints:has(> :nth-child(5)) > .ga004-print:nth-child(3n+2) { position: relative; top: 12%; }
}

/* live (Tier 3): the canvas draws the same shadow from its first frame; the still copy steps aside in that frame */
.ga004.is-live .ga004__shade { opacity: 0; }