/* Gallery assets.
   1) Legacy .paras-gallery-grid — kept for [paras_media_grid] used elsewhere.
   2) pi-gallery — the redesigned Gallery page (paras_gallery_pro): editorial
      masonry + chip filters, HAO-inspired. */

/* ---- 1. legacy grid (unchanged) ---------------------------------------- */
.paras-gallery-grid{display:grid;gap:16px;margin:0;}
.paras-gallery-cols-4{grid-template-columns:repeat(4,1fr);}
.paras-gallery-cols-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:1024px){.paras-gallery-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:768px){.paras-gallery-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.paras-gallery-grid{grid-template-columns:1fr;}}
.paras-gallery-item{display:block;overflow:hidden;border-radius:4px;position:relative;background:#eee;}
.paras-gallery-item img{display:block;width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .4s ease;}
.paras-gallery-item:hover img{transform:scale(1.05);}
.paras-gallery-empty{padding:40px 0;text-align:center;color:#666;font-size:16px;}

/* =====================================================================
   2. Gallery page — editorial masonry + chip filters (paras_gallery_pro)
   ---------------------------------------------------------------------
   HAO-inspired: natural-aspect masonry (no forced square crops), tracked
   uppercase filter chips, slow-zoom hover with a category label rising
   over a soft ink veil, square drafting corners throughout.
   Palette: ink var(--pi-ink) · clay var(--pi-accent) · sepia var(--pi-sepia)
   ===================================================================== */

/* ---- filter chips — HAO archive-filter behaviour -----------------------
   Left-aligned track that STICKS just below the fixed header while the
   grid scrolls; on phones it becomes a horizontally swipeable strip
   (no wrapping) with an edge fade hinting at more chips. */
.pi-gchips{
  position:sticky;
  top:var(--pi-header-h, 90px);   /* flush under the main header — no gap */
  z-index:20;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-start;
  /* full-bleed bar: spans edge-to-edge like a secondary header; the chips
     themselves stay aligned with the 1170 content container */
  width:100vw;
  margin:0 calc(50% - 50vw) 34px;
  padding:12px max(16px, calc((100vw - 1170px) / 2));
  /* theme-aware translucent bar (was a hard near-white strip that fought the
     dark canvas). color-mix keeps it a warm, glassy band in BOTH modes. */
  background:var(--pi-bg);
  background:color-mix(in srgb, var(--pi-bg) 90%, transparent);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:0;
  border-bottom:1px solid var(--pi-line-faint);
  box-sizing:border-box;
}
/* !important guards: the theme's global .scheme_default button rule paints
   every <button> black — these chips must stay ghost pills. */
.pi-gchips .pi-gchip{
  appearance:none;
  background:transparent !important;
  border:1px solid color-mix(in srgb, var(--pi-text) 26%, transparent) !important;
  border-radius:999px !important;
  padding:10px 22px !important;
  font-family:'Poppins',sans-serif;
  font-size:11px !important;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--pi-text-soft) !important;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.pi-gchips .pi-gchip:hover{
  border-color:var(--pi-accent) !important;
  color:var(--pi-text) !important;
}
/* active: champagne fill + on-accent label — the site's primary token pair,
   so the highlight reads like the rest of the brand rather than a stray pill */
.pi-gchips .pi-gchip.is-active{
  background:var(--pi-accent-fill) !important;
  border-color:var(--pi-accent-fill) !important;
  color:var(--pi-on-accent) !important;
}
/* count badge — small, superscript-ish, dimmed (HAO "All 47") */
.pi-gchips .pi-gchip__n{
  margin-left:7px;
  font-size:9px;
  font-weight:600;
  letter-spacing:.06em;
  vertical-align:super;
  opacity:.55;
}
.pi-gchips .pi-gchip.is-active .pi-gchip__n{ opacity:.8; }

/* ---- row-major grid ------------------------------------------------------
   display:grid (not CSS columns): columns fill top-to-bottom which scrambles
   the category order on screen — a grid flows in rows, so scrolling walks the
   portfolio in order (home → office → commercial) and the scrollspy always
   matches what's visible. Uniform 4:3 tiles, cropped center. */
.pi-gallery{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  transition:opacity .22s ease;
}
.pi-gitem img{
  aspect-ratio:4/3;
  object-fit:cover;
  height:100%;
}
/* category divider — spans the full row, drafting-annotation style */
.pi-gdivider{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:16px;
  padding:26px 0 6px;
}
.pi-gdivider span{
  font-family:'Poppins',sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--pi-sepia);
  white-space:nowrap;
}
.pi-gdivider::after{
  content:"";
  flex:1;
  height:1px;
  background:rgba(122,92,66,.3);
}
.pi-gdivider.is-off{ display:none; }
.pi-gallery.is-swapping{ opacity:0; }
.pi-gitem{
  position:relative;
  display:block;
  break-inside:avoid;
  margin:0 0 14px;
  overflow:hidden;
  background:#eceae6;
}
.pi-gitem img{
  display:block;
  width:100%;
  height:auto;
  transform:scale(1.001);
  filter:var(--pi-photo-grade);   /* one grade so the gallery reads curated */
  transition:transform var(--pi-dur-zoom) var(--pi-ease-lux);
}
.pi-gitem:hover img{ transform:scale(1.04); filter:saturate(1) contrast(1.02); }
.pi-gitem__veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(30,40,37,0) 52%, rgba(30,40,37,.55));
  opacity:0;
  transition:opacity .45s ease;
  pointer-events:none;
}
.pi-gitem:hover .pi-gitem__veil{ opacity:1; }
.pi-gitem__meta{
  position:absolute;
  left:16px; bottom:14px;
  font-family:'Poppins',sans-serif;
  font-size:10px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#fff;
  padding-bottom:6px;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .45s ease .08s, transform .45s ease .08s;
  pointer-events:none;
}
.pi-gitem__meta::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:26px; height:1px;
  background:var(--pi-accent);
}
.pi-gitem:hover .pi-gitem__meta{ opacity:1; transform:none; }

/* hidden by the active filter */
.pi-gitem.is-off{ display:none; }

/* (Per-item entrance removed 2026-07-16: combined with the section reveal it
   double-hid the whole portfolio on load — read as a glitch. The grid now
   renders immediately; motion lives in the hover/filter interactions.) */

@media (prefers-reduced-motion: reduce){
  .pi-gitem img{ transition:none; }
  .pi-gitem:hover img{ transform:none; }
}

/* ---- responsive --------------------------------------------------------- */
@media (max-width:1023px){
  .pi-gallery{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:767px){
  .pi-gallery{ grid-template-columns:repeat(2, 1fr); gap:6px; }
  .pi-gitem{ margin-bottom:10px; }
  /* swipeable chip strip (HAO mobile behaviour) */
  .pi-gchips{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:8px;
    margin-bottom:24px;
    padding:10px 34px 10px 12px;
    scroll-snap-type:x proximity;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
            mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
  .pi-gchips::-webkit-scrollbar{ display:none; }
  /* the "there's more" chevron: sticky inside the scroller, pinned to the
     right edge; gallery.js hides it (.at-end) when fully scrolled */
  .pi-gchips .pi-gchips__hint{
    position:sticky;
    right:0;
    flex:0 0 26px;
    align-self:stretch;
    display:block;
    pointer-events:none;
  }
  .pi-gchips .pi-gchips__hint::after{
    content:"";
    position:absolute;
    right:2px; top:50%;
    width:8px; height:8px;
    border-right:2px solid var(--pi-accent);
    border-top:2px solid var(--pi-accent);
    transform:translateY(-50%) rotate(45deg);
    animation:pi-hint-nudge 1.6s ease-in-out infinite;
  }
  .pi-gchips.at-end .pi-gchips__hint{ display:none; }
  .pi-gchips .pi-gchip{
    flex:0 0 auto;
    scroll-snap-align:start;
    white-space:nowrap;
    padding:8px 16px !important;
    font-size:10px !important;
  }
}
/* small phones: single column, HAO-style large images */
@media (max-width:560px){
  .pi-gallery{ grid-template-columns:1fr; }
}

.pi-gchips .pi-gchips__hint{ display:none; }
@keyframes pi-hint-nudge{ 0%,100%{ transform:translateY(-50%) rotate(45deg) translateX(0); } 50%{ transform:translateY(-50%) rotate(45deg) translate(3px,-3px); } }

/* ---- gallery scroll progress + scrollspy ------------------------------- */
.pi-gchips{ overflow-y:visible; }
.pi-gprogress{
  position:absolute;
  left:0; bottom:0;
  height:2px;
  width:0;
  background:var(--pi-accent);
  transition:width .12s linear;
  pointer-events:none;
}
/* spy highlight (scroll-driven) — same look as the active filter chip */
.pi-gchips .pi-gchip.is-spy{
  background:var(--pi-accent) !important;
  border-color:var(--pi-accent) !important;
  color:#fff !important;
}


/* =====================================================================
   §MINI — the Gallery grid, in miniature (About page).
   ---------------------------------------------------------------------
   Same card as the full grid — identical hover veil, category label and
   lightbox — just a short, static 3-up strip with no chips, dividers,
   scrollspy or progress bar. Those belong to the full page; here the strip
   is a taste of the work with a link through to it.
   Rendered by paras_gallery_mini() in inc/gallery-grid.php.
   ===================================================================== */
.pi-gallery.pi-gallery--mini{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  /* The strip sits inside running copy on the service, fit-out, renovation and
     location pages. At margin:0 it butted against the paragraph above and the
     next <h2> with ~20px of air on a page whose section rhythm is --pi-sec-pad
     (76-132px), which read as cramped and made the images look pasted in.
     Roughly half the section rhythm separates it from the prose while keeping
     it visually part of the section it illustrates. */
  margin-block:clamp(30px, 3.4vw, 54px);
}
/* The heading that opens the NEXT section still needs its full rhythm, so the
   strip reads as the close of the section it illustrates rather than as a
   divider floating between two headings.
   `!important` is required, not lazy: palladio-child-custom.css sets
   `.post_content.entry-content h2{margin:20px 0 !important}` as a blanket, and
   no amount of specificity beats it. This is the narrow exception to that
   blanket, limited to a heading that directly follows a gallery strip. */
.post_content .pi-gallery.pi-gallery--mini + h2,
.entry-content .pi-gallery.pi-gallery--mini + h2{
  margin-top:clamp(46px, 5vw, 86px) !important;
}
/* the full grid gives items a natural aspect; the strip wants a tidy,
   uniform rhythm, so every card is the same 4:3 sheet */
.pi-gallery--mini .pi-gitem{
  margin:0;
  break-inside:auto;
}
.pi-gallery--mini .pi-gitem img{
  aspect-ratio:4/3;
  object-fit:cover;
  width:100%;
  height:auto;
  display:block;
}
.pi-gallery-mini__more{
  margin-top:28px;
  text-align:center;
}

@media (max-width:1023px){
  .pi-gallery.pi-gallery--mini{ grid-template-columns:repeat(3, 1fr); gap:8px; }
}
@media (max-width:767px){
  .pi-gallery.pi-gallery--mini{ grid-template-columns:repeat(2, 1fr); gap:6px; }
  /* A 3-up strip in a 2-column grid leaves one orphan on the last row, which
     reads as a broken/half-cut row. Let that odd last card run the full width
     instead, so the strip always ends on a complete line. Even counts (the
     6-up) are untouched, since their last child is never in an odd position. */
  .pi-gallery.pi-gallery--mini > .pi-gitem:last-child:nth-child(odd){
    grid-column:1 / -1;
  }
  .pi-gallery.pi-gallery--mini > .pi-gitem:last-child:nth-child(odd) img{
    aspect-ratio:16/9;
  }
}
@media (max-width:480px){
  .pi-gallery.pi-gallery--mini{ grid-template-columns:repeat(2, 1fr); }
}