/* Portfolio gallery — scoped to .mlg.
   Rendered by templates/page-portfolio.php from ACF fields.

   Design language taken from the site: Times New Roman headings at weight 400,
   Georgia body, #333 text, tan --color-6 as the only accent, cream --color-7
   for quiet ground. Corners stay square — this theme sets border-radius:0 on
   essentially everything, and the architectural look depends on it.

   Selectors are over-specific (.mlg a.mlg-tile, not .mlg-tile) so theme rules
   on .entry a cannot pull link colour or underlines back in, and so this file
   behaves the same wherever it lands in the cascade. */

.mlg {
  --mlg-ink: #333;
  --mlg-deep: #1a202c;      /* --color-4 */
  --mlg-slate: #4a5568;     /* --color-5 */
  --mlg-tan: #c8b99a;       /* --color-6 */
  --mlg-cream: #f2ede6;     /* --color-7 */
  --mlg-line: #e2ddd5;
  margin: 0;
}
.mlg *{ box-sizing: border-box; }

/* [hidden] is a UA rule and any author display beats it. Filtering and the
   lightbox both key off that attribute, so restate it once. */
.mlg [hidden] { display: none !important; }

/* ---- Project group ---- */
.mlg .mlg-project { margin: 0 0 4.5rem; }
.mlg .mlg-project:last-child { margin-bottom: 0; }

.mlg .mlg-project-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 1.5rem;
  padding: 0 0 .75rem;
  border-bottom: 1px solid var(--mlg-line);
}
.mlg .mlg-project-title {
  margin: 0;
  font-family: "Times New Roman", TimesNewRoman, Times, Baskerville, Georgia, serif;
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--mlg-ink);
}
.mlg .mlg-project-count {
  font-family: Montserrat, system-ui, sans-serif;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mlg-slate);
}
.mlg .mlg-project-note {
  max-width: 62ch;
  margin: 0 0 1.5rem;
  font-family: Georgia, Times, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--mlg-slate);
}

/* ---- Grid ----
   Masonry via multi-column, not CSS grid. The source photos are an even split
   of 4:3 landscape and 3:4 portrait, so any fixed tile ratio has to crop one
   orientation hard — a 4:3 tile takes 44% of the height off a portrait shot,
   and these are full-height cabinetry and stairwell photographs where that is
   the subject. Columns keep every image at its own ratio with no JS and no
   measuring, and `columns: <width>` reflows on its own without media queries.

   The trade-off is column-major order: the lightbox pages in DOM order, which
   here runs down a column before moving to the next. That matches how the eye
   reads a masonry layout, so it is the right order rather than a compromise. */
.mlg .mlg-grid {
  columns: 300px;
  column-gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mlg .mlg-grid li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 14px;
  padding: 0;
}

.mlg a.mlg-tile,
.mlg a.mlg-tile:visited {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--mlg-cream);
  border: 1px solid transparent;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
/* width/height attributes are emitted on every img, so the browser reserves
   the right space from the intrinsic ratio and nothing jumps as photos load. */
.mlg a.mlg-tile img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  transition: transform .5s cubic-bezier(.2, .6, .2, 1);
}
.mlg a.mlg-tile:hover img,
.mlg a.mlg-tile:focus-visible img { transform: scale(1.045); }

.mlg a.mlg-tile:hover,
.mlg a.mlg-tile:focus-visible {
  border-color: var(--mlg-tan);
  box-shadow: 0 8px 26px rgba(26, 32, 44, .16);
}

/* Caption plate, only when the image has one. */
.mlg .mlg-cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.25rem .9rem .7rem;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: .8rem;
  line-height: 1.35;
  color: #fff;
  background: linear-gradient(to top, rgba(26, 32, 44, .78), rgba(26, 32, 44, 0));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
}
.mlg a.mlg-tile:hover .mlg-cap,
.mlg a.mlg-tile:focus-visible .mlg-cap { opacity: 1; transform: none; }

/* ---- Lightbox ---- */
.mlg-dialog {
  width: min(1180px, 94vw);
  max-width: none;
  padding: 0;
  color: #fff;
  background: transparent;
  border: 0;
  overflow: visible;
}
.mlg-dialog::backdrop { background: rgba(26, 32, 44, .92); }

.mlg-dialog .mlg-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-height: 80vh;
  background: #000;
}
.mlg-dialog .mlg-stage img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 0;
}

.mlg-dialog .mlg-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem .2rem 0;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: .8rem;
  color: #fff;
}
.mlg-dialog .mlg-dialog-cap { margin: 0; opacity: .9; }
.mlg-dialog .mlg-counter { opacity: .65; white-space: nowrap; letter-spacing: .06em; }

.mlg-dialog button {
  font: inherit;
  color: var(--mlg-deep, #1a202c);
  background: #fff;
  border: 0;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.mlg-dialog button:hover { background: var(--mlg-tan, #c8b99a); }

.mlg-dialog .mlg-close {
  position: absolute;
  top: -18px;
  right: -18px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

/* Prev/next sit above the image; the stage is z-index 1 so they need lifting.
   Same trap as any overlay control over media — see the close button. */
.mlg-dialog .mlg-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 60px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
  transform: translateY(-50%);
  opacity: .92;
}
.mlg-dialog .mlg-prev { left: 0; }
.mlg-dialog .mlg-next { right: 0; }
.mlg-dialog .mlg-nav[hidden] { display: none !important; }

/* ---- Empty state (editor-facing) ---- */
.mlg .mlg-empty {
  margin: 0;
  padding: 2.5rem 1.5rem;
  text-align: center;
  font-family: Georgia, Times, "Times New Roman", serif;
  color: var(--mlg-slate);
  background: var(--mlg-cream);
}

.mlg-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---- Focus ---- */
.mlg a.mlg-tile:focus-visible,
.mlg-dialog button:focus-visible {
  outline: 3px solid var(--mlg-tan, #c8b99a);
  outline-offset: 3px;
}

@media (max-width: 700px) {
  .mlg .mlg-project { margin-bottom: 3rem; }
  .mlg .mlg-grid { columns: 160px; column-gap: 10px; }
  .mlg .mlg-grid li { margin-bottom: 10px; }
  /* Touch has no hover, so the caption would never appear. */
  .mlg .mlg-cap { opacity: 1; transform: none; }
  .mlg-dialog { width: 96vw; }
  .mlg-dialog .mlg-close { top: -14px; right: -6px; }
  .mlg-dialog .mlg-nav { width: 38px; height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .mlg a.mlg-tile,
  .mlg a.mlg-tile img,
  .mlg .mlg-cap,
  .mlg-dialog button { transition: none; }
  .mlg a.mlg-tile:hover img { transform: none; }
}