/* ============================================================
   Home page — Product Showcase section (fragment/product-showcase.php)
   Heading + short description (centered, inside the normal
   container), then a masonry photo grid that runs the FULL width of
   the screen — the grid sits outside the container in the markup so
   it's naturally edge-to-edge, same approach as banner.php's
   full-bleed section.
   Built with a CSS multi-column layout (not a fixed grid), so each
   tile keeps its own natural width x height (square, tall or wide)
   and always auto-flows into the shortest column next — this is
   what guarantees no empty gaps even though tiles have different
   heights, unlike a rigid grid which can leave holes. 2 columns on
   mobile (2 images per horizontal line, smaller tiles), stepping up
   to more/larger columns as the viewport grows.
   Each item's image src is left blank in the PHP on purpose — paste
   real photo URLs in later. Until then, .ps-placeholder renders a
   labeled box sized to that item's aspect ratio so the layout still
   looks right.
   Relies on the shared theme variables (--bg, --ink, --pine, etc.)
   declared in index.php's own <style> block, with hardcoded
   fallbacks so this still renders correctly on its own.
   ============================================================ */

.ps-section { padding: 60px 0 24px; }

.ps-heading { text-align: center; max-width: 760px; margin: 0 auto 28px; }
.ps-heading h2 {
  font-weight: 800;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  color: var(--pine, #17402e);
  margin-bottom: 14px;
}
.ps-heading p {
  color: var(--muted, #8a8577);
  font-size: .95rem;
  line-height: 1.6;
  margin: 0;
}

/* Full-bleed masonry: 2 columns by default (mobile), more at wider
   breakpoints. CSS columns (not grid) auto-flow each item into
   whichever column is currently shortest, so there's never an empty
   cavity even with mixed tile heights. */
.ps-gallery {
  width: 100%;
  columns: 2;
  column-gap: 4px;
}
@media (min-width: 768px)  { .ps-gallery { columns: 4; } }
@media (min-width: 1200px) { .ps-gallery { columns: 6; } }

.ps-item {
  display: block;
  break-inside: avoid;
  margin-bottom: 4px;
  overflow: hidden;
}
.ps-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .3s ease;
}
.ps-item:hover img { transform: scale(1.07); }

.ps-placeholder {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  background: var(--pine-soft, #e8efe9);
  border: 1px dashed var(--line, #e7e1d4);
  color: var(--muted, #8a8577);
  font-size: .85rem;
  font-weight: 600;
}