/* ===========================
   Juliana — Images
   =========================== */

/*
 * G-IMG vertex: responsive img with srcset support, placeholder
 * (surface-2/3 + camera glyph at 40% opacity), and caption styles.
 * Zero layout shift: width/height always set; aspect-ratio enforced
 * on gallery tiles and hero.
 */

/* ===========================
   Main content styles
   =========================== */

.j-img {
  /* box model */
  width: 100%;
  height: auto;

  /* display */
  display: block;

  /* other */
  object-fit: cover;

}


/* ===========================
   Component-specific sections
   =========================== */

/*
 * Placeholder: shown until a real image is uploaded via the media library.
 * Surface-2 background + centred camera SVG at 40% opacity.
 */

.j-img-placeholder {
  /* color */
  background-color: var(--c-surface-2);

  /* box model */
  width: 100%;

  /* display */
  display: flex;

  /* flexbox */
  align-items: center;
  justify-content: center;

  /* other */
  overflow: hidden;

}

.j-img-placeholder img {
  /* other */
  opacity: 0.4;

  /* box model */
  width: 40px;
  height: 40px;

}

/* Alternate tile colour for visual rhythm */
.j-img-placeholder--alt {
  /* color */
  background-color: var(--c-surface-3);

}

.j-hero-img {
  /* box model */
  width: 100%;

  /* border */
  border-radius: var(--r-tile);

  /* positioning */
  position: relative;

  /* other */
  aspect-ratio: 16 / 9;
  overflow: hidden;

}

.j-hero-img .j-img,
.j-hero-img .j-img-placeholder {
  /* box model */
  width: 100%;
  height: 100%;

  /* positioning */
  position: absolute;
  inset: 0;

}

/*
 * 3:4 portrait tile — gallery feed, home Instagram grid.
 * Hard rule: stays 3:4 at ALL widths (doc 01 §5, §6).
 */
.j-tile-portrait {
  /* box model */
  width: 100%;

  /* border */
  border-radius: var(--r-tile);

  /* other */
  aspect-ratio: 3 / 4;
  overflow: hidden;

}

.j-tile-portrait .j-img,
.j-tile-portrait .j-img-placeholder {
  /* box model */
  width: 100%;
  height: 100%;

  /* other */
  object-fit: cover;

}

/* ===========================
   Caption styles
   =========================== */

figcaption,
.j-caption {
  /* text */
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  line-height: 1.5;

  /* color */
  color: var(--c-ink-muted);

  /* box model */
  margin-top: var(--sp-8);

}