/* PRINTS - a restrained two-column editorial index, deliberately sitting
 * between the homepage (expressive, asymmetric masonry) and the Subject
 * Pages (quiet, single column). Exclusively for the PRINTS Page
 * (page-prints.php, enqueued only when is_page_template('page-prints.php')).
 * Shares nothing with gallery.css (homepage, locked) or subject-page.css/
 * project-page.css - its own dedicated .prints-page__* namespace, built
 * entirely from the site's existing design tokens.
 *
 * The two columns are independent vertical flows, not row-coupled to each
 * other - the right column's offset is one constant value, not computed
 * per item, which is what keeps this calmer/more predictable than the
 * homepage's organic per-pair masonry.
 *
 * Images use width:100%/height:auto only - never object-fit:cover, never
 * a fixed height. Both columns use the same width treatment regardless of
 * orientation ("consistent column widths"), unlike the homepage's
 * deliberately varied portrait/landscape sizing.
 */

.prints-page__header {
  padding-top: var(--space-64);
  padding-bottom: var(--space-96);
}

/* Restrained, explicit size - the browser default (~32px) read as a heavy
   "shop heading" once tested elsewhere on this site (see the Project page
   title fix). Same deliberate value used there, for a consistent scale
   across page types rather than a bespoke ecommerce heading. */
.prints-page__title {
  font-size: 24px;
  line-height: 1.2;
}

.prints-page__columns {
  display: grid;
  grid-template-columns: 1fr var(--space-128) 1fr;
  padding-bottom: var(--space-192);
}

.prints-page__column {
  display: flex;
  flex-direction: column;
  /* Generous separation between Print entries within a column. */
  gap: var(--space-192);
}

.prints-page__column--left {
  grid-column: 1;
}

.prints-page__column--right {
  grid-column: 3;
  /* A constant offset, not computed per item - deliberate and visible,
     but predictable rather than organic. */
  margin-top: var(--space-128);
}

.prints-page__item {
  display: block;
}

.prints-page__item-image {
  display: block;
  width: 100%;
  height: auto;
}

.prints-page__item-caption {
  display: block;
  margin-top: var(--space-16);
}

.prints-page__item-title {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--nav-font-size);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: uppercase;
  color: var(--color-text);
}

.prints-page__item-price {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--nav-font-size);
  letter-spacing: var(--nav-letter-spacing);
  color: var(--color-text-muted);
}

.prints-page__empty {
  padding-bottom: var(--space-192);
}

.prints-page__pagination ul {
  display: flex;
  gap: var(--space-24);
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-192);
  font-family: var(--font-sans);
  font-size: var(--nav-font-size);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: uppercase;
}

.prints-page__pagination a,
.prints-page__pagination span {
  display: inline-block;
}

.prints-page__pagination .current {
  color: var(--color-text);
}

.prints-page__pagination a {
  color: var(--color-text-muted);
}

/* Tablet and up: two columns. Below that, a single column - the same
   768px structural breakpoint already used sitewide (homepage, Subject
   Pages, Project pages) for collapsing a multi-column composition, not a
   new tier invented for this page. */
@media (max-width: 767px) {
  .prints-page__columns {
    display: block;
  }

  .prints-page__column {
    gap: var(--space-96);
  }

  /* On mobile the right column simply follows the left one in normal
     block flow - no separate offset rule needed, the columns aren't side
     by side any more. */
  .prints-page__column--right {
    margin-top: 0;
  }

  .prints-page__column + .prints-page__column {
    margin-top: var(--space-96);
  }
}