/* Expandable photo gallery — shared across deck and patio pages.
   Scoped under .mfd-pgal so the inherited Elementor/theme rules can't bleed in
   (CLAUDE.md §5). Built for MIXED ORIENTATIONS: most project photos are
   portrait, and cropping them to a uniform 4:3 tile — which .mfd-gal2-grid
   does — throws away the top and bottom of every one. A CSS column layout
   lets each photo keep its own aspect ratio with no JS measuring. */

.mfd-pgal{
  --pg-ink:#121212;--pg-gold:#bb9362;--pg-line:#e4ded4;--pg-muted:#5a5650;
  font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
.mfd-pgal *,.mfd-pgal *::before,.mfd-pgal *::after{box-sizing:border-box}

/* Masonry. Columns keep portraits tall and landscapes wide without cropping. */
.mfd-pgal-grid{columns:3;column-gap:16px;margin:0}
@media(max-width:900px){.mfd-pgal-grid{columns:2}}
@media(max-width:560px){.mfd-pgal-grid{columns:1}}

.mfd-pgal-grid figure{
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  margin:0 0 16px;
}

/* The tile is a real <button>: keyboard focusable and announced as a control,
   which a bare <img> with a click handler is not. */
.mfd-pgal-grid button.mfd-pgal-tile{
  display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  border-radius:8px;overflow:hidden;position:relative;line-height:0;
  box-shadow:0 18px 44px -18px rgba(0,0,0,.55);
}
/* Specificity has to clear `.mfdk img{height:auto}` (0,1,1) on the deck pages,
   so these are written as two classes plus the element. */
.mfd-pgal .mfd-pgal-tile img.mfd-pgal-img{
  width:100%;height:auto;display:block;border-radius:8px;
  transition:transform .3s ease,filter .3s ease;
}
.mfd-pgal-tile:hover img.mfd-pgal-img,
.mfd-pgal-tile:focus-visible img.mfd-pgal-img{transform:scale(1.035);filter:brightness(1.05)}
.mfd-pgal-tile:focus-visible{outline:3px solid var(--pg-gold);outline-offset:3px}

/* Caption colour has to survive two very different hosts: /gallery/ and the
   covered-patios page sit on a #121212 band, while the deck pages render
   inside .mfdk on white. Default to the light treatment for the dark bands,
   then flip it back inside .mfdk. Inheriting was not an option — the dark
   pages inherit rgb(51,51,51), which is itself invisible on #121212. */
.mfd-pgal-grid figcaption{
  font-size:.86rem;color:#a9a39a;line-height:1.45;
  padding:8px 2px 0;
}
.mfdk .mfd-pgal-grid figcaption{color:var(--pg-muted)}

/* Expand affordance — without it a tile reads as a plain photo. */
.mfd-pgal-tile::after{
  content:"";position:absolute;right:10px;bottom:10px;width:30px;height:30px;
  border-radius:6px;background:rgba(18,18,18,.62);opacity:0;transition:opacity .25s ease;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 4H4v5M15 4h5v5M9 20H4v-5M15 20h5v-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:17px;
}
.mfd-pgal-tile:hover::after,.mfd-pgal-tile:focus-visible::after{opacity:1}
@media(hover:none){.mfd-pgal-tile::after{opacity:.85}}

/* ---------- Lightbox ---------- */
.mfd-pgal-lb{
  position:fixed;inset:0;z-index:99999;display:none;
  background:rgba(10,10,10,.94);
  align-items:center;justify-content:center;padding:clamp(12px,3vw,40px);
}
.mfd-pgal-lb[open],.mfd-pgal-lb.is-open{display:flex}
.mfd-pgal-lb figure{margin:0;max-width:100%;max-height:100%;display:flex;
  flex-direction:column;align-items:center;gap:14px}
.mfd-pgal-lb img{
  max-width:100%;max-height:78vh;width:auto;height:auto;display:block;
  border-radius:6px;box-shadow:0 30px 80px -30px rgba(0,0,0,.9);
}
.mfd-pgal-lb figcaption{
  color:#efeae2;font-size:.95rem;line-height:1.5;text-align:center;
  max-width:62ch;margin:0 auto;
}
.mfd-pgal-lb .mfd-pgal-count{display:block;color:#9b948a;font-size:.8rem;margin-top:6px}

/* The inherited theme sets `button:focus, button:hover{background:#c36}` at
   specificity (0,1,1) — the same as a bare `.mfd-pgal-lb button`, so whichever
   stylesheet loads last wins and the close button turns pink the moment it
   takes focus. Every state below is written with the pseudo-class included,
   which lands at (0,2,1) and settles it without !important. */
.mfd-pgal-lb button,
.mfd-pgal-lb button:hover,
.mfd-pgal-lb button:focus,
.mfd-pgal-lb button:active{
  position:absolute;border:0;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.1);border-radius:50%;
  width:48px;height:48px;font-size:0;line-height:0;
  box-shadow:none;text-decoration:none;
  transition:background .2s ease;
}
.mfd-pgal-lb button:hover,
.mfd-pgal-lb button:focus-visible{background:rgba(187,147,98,.85)}
.mfd-pgal-lb button:focus-visible{outline:3px solid var(--pg-gold);outline-offset:2px}
.mfd-pgal-lb button::before{
  content:"";position:absolute;inset:0;background-repeat:no-repeat;
  background-position:center;background-size:22px;
}
.mfd-pgal-close{top:clamp(10px,2vw,22px);right:clamp(10px,2vw,22px)}
.mfd-pgal-close::before{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
.mfd-pgal-prev{left:clamp(6px,2vw,22px);top:50%;transform:translateY(-50%)}
.mfd-pgal-prev::before{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E")}
.mfd-pgal-next{right:clamp(6px,2vw,22px);top:50%;transform:translateY(-50%)}
.mfd-pgal-next::before{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E")}

/* ---------- Video ---------- */
.mfd-pvid{margin:0 0 28px}
.mfd-pvid video{
  width:100%;height:auto;display:block;border-radius:10px;background:#111;
  box-shadow:0 22px 56px -22px rgba(0,0,0,.6);
}
.mfd-pvid figcaption{font-size:.86rem;color:#a9a39a;padding:10px 2px 0;line-height:1.45}
.mfdk .mfd-pvid figcaption{color:var(--pg-muted)}

@media(prefers-reduced-motion:reduce){
  .mfd-pgal *,.mfd-pgal-lb *{transition:none!important}
  .mfd-pgal-tile:hover img.mfd-pgal-img{transform:none}
}