/* Explain: Styles for the project detail page's image composition system. */
/* =========================================================
   PROJECT DETAIL — EDITORIAL CASE-STUDY COMPOSITION SYSTEM
   Reusable art-directed gallery engine.
   Types: hero · asym · editorial · wide · triptych · closer
   ========================================================= */

.pg {
  display: block;
}

.pg-block {
  margin: 0;
}

/* ---------- vertical rhythm (deliberately non-uniform) ---------- */
.pg-gap-none   { margin-top: 0; }
.pg-gap-tight  { margin-top: 12px; }
.pg-gap-normal { margin-top: 24px; }
.pg-gap-major  { margin-top: 56px; }

@media (min-width: 801px) {
  .pg-gap-tight  { margin-top: 12px; }
  .pg-gap-normal { margin-top: 48px; }
  .pg-gap-major  { margin-top: 80px; }
}

/* ---------- frame + image primitives ---------- */
.pg-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #e5e5e5;
}

.pg-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pg-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9a9a9a;
}

/* ---------- TYPE 02 / 03 — asymmetric & large + detail pairs ---------- */
.pg-split {
  display: grid;
  gap: 12px;
  align-items: start;
}
.pg-split-65-35 { grid-template-columns: 65fr 35fr; }
.pg-split-60-40 { grid-template-columns: 60fr 40fr; }
.pg-split-70-30 { grid-template-columns: 70fr 30fr; }
.pg-split-75-25 { grid-template-columns: 75fr 25fr; }
.pg-split-40-60 { grid-template-columns: 40fr 60fr; }
.pg-split-50-50 { grid-template-columns: 50fr 50fr; }

/* ---------- TYPE 04 — editorial single (negative space) ---------- */
.pg-edit { display: flex; }
.pg-edit-left  { justify-content: flex-start; }
.pg-edit-right { justify-content: flex-end; }
.pg-edit > .pg-frame { width: 60%; }

/* ---------- TYPE 06 — irregular triptych ---------- */
.pg-trip {
  display: grid;
  gap: 10px;
  align-items: start;
}
.pg-trip-3-5-4 { grid-template-columns: 26fr 44fr 30fr; }
.pg-trip-4-3-5 { grid-template-columns: 33fr 25fr 42fr; }
.pg-trip-3-3-4 { grid-template-columns: 30fr 30fr 40fr; }
.pg-trip-4-4-4 { grid-template-columns: 1fr 1fr 1fr; }
.pg-trip-2-5-3 { grid-template-columns: 24fr 48fr 28fr; }
.pg-trip-30-45-25 { grid-template-columns: 29fr 45fr 26fr; }

/* optional vertical stagger — anchor the large middle crop, offset the outer details */
.pg-trip-stagger > *:nth-child(1) { margin-top: 4px; }
.pg-trip-stagger > *:nth-child(2) { margin-top: 0; }
.pg-trip-stagger > *:nth-child(3) { margin-top: 24px; }

/* stacked column cell — fills the row height so its bottom aligns with the
   dominant middle image; inner crops stretch equally to fill the column */
.pg-trip-cell-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: stretch;
  min-height: 0;
}
.pg-trip-cell-stack > .pg-frame {
  flex: 1 1 0;
  min-height: 0;
}

/* a single column that stretches to match the sibling row height
   (e.g. one large image centred between two stacked columns) */
.pg-trip > .pg-trip-stretch {
  align-self: stretch;
}

/* ---------- TYPE 05 — wide statement (subtle desktop bleed) ---------- */
@media (min-width: 801px) {
  .pg-bleed {
    width: 104%;
    margin-left: -2%;
  }
}

/* =========================================================
   MOBILE ADAPTATION — simplify, keep variation, no overflow
   ========================================================= */
@media (max-width: 800px) {
  .pg-gap-tight  { margin-top: 12px; }
  .pg-gap-normal { margin-top: 32px; }
  .pg-gap-major  { margin-top: 64px; }

  /* asymmetric pair → stacked with differing widths/alignment */
  .pg-split { grid-template-columns: 1fr; gap: 12px; }
  .pg-split .pg-cell-b { width: 78%; margin-left: auto; }

  /* editorial single → narrower, aligned */
  .pg-edit > .pg-frame { width: 88%; }

  /* triptych → 1 dominant + 2 secondary */
  .pg-trip { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pg-trip > *:nth-child(1) { grid-column: 1; grid-row: 2; margin-top: 0; }
  .pg-trip > *:nth-child(2) { grid-column: 1 / -1; grid-row: 1; margin-top: 0; }
  .pg-trip > *:nth-child(3) { grid-column: 2; grid-row: 2; margin-top: 0; }
  .pg-trip > .pg-trip-stretch { align-self: auto; aspect-ratio: 4/5; }

  /* no bleed on mobile */
  .pg-bleed { width: 100%; margin-left: 0; }
}

/* =========================================================
   FLEXIBLE EDITORIAL BLOCKS — variable width + alignment
   Variable-length gallery: single frames + multi-image rows.
   Backward-compatible: existing .pg-frame blocks are unaffected.
   ========================================================= */

.pg-flex {
  display: flex;
  width: 100%;
  justify-content: var(--wa, flex-start);
}

.pg-flexrow {
  display: flex;
  width: 100%;
  gap: var(--gap, 14px);
  align-items: flex-start;
}

.pg-piece {
  position: relative;
  width: var(--w, 100%);
  min-width: 0;
  overflow: hidden;
  background: #e5e5e5;
}

.pg-piece img {
  display: block;
  width: 100%;
  height: auto;
}

.pg-flexrow > .pg-piece { width: var(--w, 50%); }

@media (max-width: 800px) {
  .pg-flex { justify-content: var(--ma, flex-start); }
  .pg-flex > .pg-piece { width: var(--wm, 100%); }

  .pg-flexrow {
    flex-direction: column;
    gap: var(--mgap, 18px);
  }
  .pg-flexrow > .pg-piece {
    width: var(--wm, 100%);
    align-self: var(--ma, flex-start);
  }
}