/* ==========================================================================
   PiHue — image figure + grid component
   Purpose: replace ad-hoc inline <img> placement across /craft/, /manufacturing/
   and /our-process/ with one predictable component.

   Design rule: source photographs have inconsistent aspect ratios
   (0.75 to 1.63 in the current set). Do NOT re-crop each source to match.
   Constrain presentation with aspect-ratio + object-fit so any future
   photograph drops in without layout regression.
   ========================================================================== */

:root {
  --fig-gap: 1.5rem;
  --fig-radius: 2px;
  --fig-caption-size: 0.8125rem;
  --fig-caption-color: #6b665f;
  --fig-rule: #e4e0d9;
}

/* --- single figure ------------------------------------------------------ */

.rug-figure {
  margin: 0 0 var(--fig-gap);
  display: flex;
  flex-direction: column;
}

.rug-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--fig-radius);
  background: #f2efea;          /* placeholder tone while decoding */
}

/* aspect ratio is set on a wrapper so the box reserves space before the
   image loads — this is what stops CLS, which no width/height pair on a
   cover-fitted image can do on its own */
.rug-figure__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--fig-radius);
}

.rug-figure--portrait .rug-figure__frame { aspect-ratio: 3 / 4; }
.rug-figure--square   .rug-figure__frame { aspect-ratio: 1 / 1; }
.rug-figure--wide     .rug-figure__frame { aspect-ratio: 16 / 9; }

.rug-figure figcaption {
  margin-top: 0.625rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--fig-rule);
  font-size: var(--fig-caption-size);
  line-height: 1.45;
  color: var(--fig-caption-color);
}

/* --- grid --------------------------------------------------------------- */

.rug-grid {
  display: grid;
  gap: var(--fig-gap);
  grid-template-columns: 1fr;
  margin: 2.5rem 0;
}

@media (min-width: 640px) {
  .rug-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .rug-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* every figure in a grid shares one ratio so rows align — this is the
   fix for the scattered look; mixed ratios inside a grid are what makes
   captions sit at different heights.

   Square, not 4:3. Six of the twelve current sources are 3:4 portrait;
   a 4:3 cell would centre-crop ~44% of their height. A square cell costs
   ~25% whichever way the source leans. If a specific image loses its
   subject to the crop, correct it with object-position on that figure
   rather than changing this ratio. */
.rug-grid .rug-figure__frame { aspect-ratio: 1 / 1; }

/* per-image crop nudges — add here as needed, e.g.
   .rug-figure[data-slug="weave-swatch-fan"] img { object-position: 50% 40%; } */

/* --- feature (full content width, one image) ---------------------------- */

.rug-feature {
  margin: 3rem 0;
}

.rug-feature .rug-figure__frame { aspect-ratio: 3 / 2; }

@media (max-width: 639px) {
  .rug-feature .rug-figure__frame { aspect-ratio: 4 / 3; }
}

/* --- reduced motion / print --------------------------------------------- */

@media print {
  .rug-figure__frame { aspect-ratio: auto; }
  .rug-figure img { object-fit: contain; }
}