/* ============================================================================
   PayLess Publishing — page strip / sample-spread components
   ========================================================================= */

/* A row of page images showing illustration quality without becoming a
   6000px-tall gallery.

   This used to be a horizontally scrolling carousel (grid-auto-flow: column).
   Inside the narrow left column of a two-column section that only fits about
   three and a half items, so the last thumbnail was silently clipped mid-image
   with no scroll affordance — it read as a broken image, not a carousel.
   A wrapping grid always fits whatever room it is given. */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: var(--sp-3);
}
.strip-item {
  padding: 0; border: 2px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; background: var(--paper); cursor: zoom-in; line-height: 0;
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.strip-item:hover { transform: translateY(-3px); border-color: var(--coral); box-shadow: var(--shadow-md); }
.strip-item img { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; }

/* A single small illustrative figure used to break up text-only pages. */
.figure-inline {
  border-radius: var(--r-lg); overflow: hidden; background: var(--cream-2);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm); line-height: 0;
}
.figure-inline img { width: 100%; }
.figure-caption {
  font-size: var(--fs-xs); color: var(--text-mute);
  margin-top: var(--sp-3); line-height: 1.5;
}