/*=================================================
  KR Info Solutions — projects.html stylesheet
  Rebuild of https://krinfosolutions.com/projects/

  Loaded AFTER css/style.css, which supplies the shared design
  tokens, reset, container, header, nav, footer and buttons.
  This file holds only what is specific to the projects page.
  Prefix: .prj-

  Values taken from the live page's three sources, not estimated:
    - Elementor page CSS ....... post-7357.css
    - Elementor gallery widget . widget-image-gallery.min.css
    - WordPress core gallery ... the [gallery] shortcode markup
  The live page is a single `image-gallery` widget under the hero:
  95 photographs, 4 columns, no captions, no per-item headings.

  Live markup that these rules reproduce:
    .elementor-image-gallery    -> .prj-gallery
    .gallery.gallery-columns-4  -> .prj-gallery-grid
    figure.gallery-item         -> .prj-item
    .gallery-icon               -> .prj-item-icon
=================================================*/

/* NOTE: as on every other inner page, the theme's empty
   `.breadcumb-wrapper` band above the hero is omitted per the client's
   standing decision (2026-07-27). The hero starts under the header. */

/* ---------- Page hero ----------
   Live container post-7357 .elementor-element-96ef059:
   min-height 400px / 300px @1024 / 280px @767, bg2.png bottom-center
   cover, #000 overlay at 0.5, heading Roboto 60px/600 white centred
   (40px @767). Identical treatment to .svc-hero / .oc-hero / .prod-hero. */
.prj-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 40px 0;
  background-image: url("../assets/images/bg2.png");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}
.prj-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--black-color);
  opacity: 0.5;
}
.prj-hero .container { position: relative; z-index: 2; }
.prj-hero-title {
  font-family: var(--body-font);
  font-size: 60px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--white-color);
  text-align: center;
  margin: 0 0 10px 0;
}
.prj-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
}
.prj-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--white-color);
}
.prj-breadcrumb a { color: var(--white-color); }
.prj-breadcrumb a:hover { color: var(--accent-orange); }
.prj-breadcrumb .sep {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--accent-orange);
}

/* ---------- Gallery section ----------
   Live spaces the gallery off the hero with `--margin-bottom: 7em` on the
   hero container (~112px) and leaves the gallery container itself unpadded.
   This build uses the inner-page rhythm instead — the same 80px applied to
   the product pages — so the run-in from the banner and the run-out to the
   footer match the rest of the site. */
.prj-sec { padding: calc(var(--inner-section-space) * 2) 0; }

/* WordPress prints the gallery inside an Elementor boxed container with no
   width override, so it takes the site default 1140px — i.e. the shared
   .container, which the markup uses directly. */
.prj-gallery { width: 100%; }

/* Live grid: `.gallery-columns-4` items are `display:inline-block;
   width:100%; max-width:25%; vertical-align:top`, with the page CSS adding
   `.gallery-item { padding: 0 10px 10px 0 }` against
   `.gallery { margin: 0 -10px -10px 0 }` — a 10px gutter.
   Reproduced with the same negative-margin technique so the outer edges
   stay flush with the container, exactly as live. */
.prj-gallery-grid {
  margin: 0 -10px -10px 0;
  font-size: 0; /* kills the whitespace gaps between inline-block items */
}
.prj-item {
  display: inline-block;
  width: 100%;
  max-width: 25%;
  margin: 0;
  padding: 0 10px 10px 0;
  text-align: center;
  vertical-align: top;
  font-size: 1rem; /* restore text sizing after the font-size:0 above */
}
.prj-item-icon { position: relative; }
.prj-item a {
  display: block;
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
}
/* Uniform grid: every tile is cropped to the same height regardless of the
   source photo's own portrait/landscape aspect ratio, so rows line up
   evenly instead of a ragged masonry look. Adjust --prj-tile-h to change
   the crop height (and its responsive values below). */
.prj-item-icon {
  --prj-tile-h: 280px;
  height: var(--prj-tile-h);
  overflow: hidden;
}
.prj-item a { height: 100%; }
.prj-item img {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Biased to the top (not center): many source photos have a small
     phone-camera watermark badge burned into the bottom-left corner.
     Anchoring the crop to the top means the fixed-height cover crop
     trims off the bottom of the photo first, hiding that badge instead
     of splitting the crop evenly top/bottom. */
  object-position: center top;
}

/* ---------- Lightbox ----------
   Live opens the Elementor lightbox as a slideshow across all 95 photos
   (`data-elementor-open-lightbox="yes"` plus a shared slideshow id). This
   build loads no Elementor JS, so the same behaviour is hand-written in
   js/main.js and styled here — dependency-free, per the JS convention in
   SITE-STRUCTURE.md. Hidden until main.js opens it. */
.prj-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.9);
}
.prj-lightbox.is-open { display: flex; }
.prj-lightbox-img {
  --prj-wm-crop: 8%; /* how much to trim off the BOTTOM only; tune to taste */
  max-width: 90vw;
  max-height: 85vh;
  width: auto;
  height: auto;
  display: block;
  border-radius: 4px;
  /* Many source photos have a small phone-camera watermark badge burned
     into the bottom-left corner of the image itself (not something we can
     fix in markup — see projects.css thumbnail comment above). clip-path
     trims that strip off the rendered image without touching layout size,
     so this works regardless of a given photo's own aspect ratio and
     needs no changes to js/main.js. */
  clip-path: inset(0 0 var(--prj-wm-crop) 0);
}
.prj-lightbox-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--white-color);
  transition: background-color 0.3s ease;
}
.prj-lightbox-btn:hover { background-color: var(--theme-color); }
.prj-lightbox-btn svg { width: 16px; height: 16px; }
.prj-lightbox-prev { left: 20px; }
.prj-lightbox-next { right: 20px; }
.prj-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--white-color);
  font-size: 22px;
  line-height: 1;
  transition: background-color 0.3s ease;
}
.prj-lightbox-close:hover { background-color: var(--theme-color); }
.prj-lightbox-count {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

/* ---------- Responsive ----------
   Column counts are the gallery widget's own breakpoints: 4 across at
   >=768, 2 across 480-767, 1 below 480. The hero steps at Elementor's
   1024 / 767. Tile height is scaled down at the same 2-column and
   1-column breakpoints so tiles don't feel oversized on narrow columns. */
@media (max-width: 1024px) {
  .prj-hero { min-height: 300px; }
}
@media (max-width: 767px) {
  .prj-hero { min-height: 280px; }
  .prj-hero-title { font-size: 40px; }
  .prj-item { max-width: 50%; }
  .prj-item-icon { --prj-tile-h: 240px; }
  .prj-lightbox-prev { left: 10px; }
  .prj-lightbox-next { right: 10px; }
}
@media (max-width: 479px) {
  .prj-item { max-width: 100%; }
  .prj-item-icon { --prj-tile-h: 320px; }
}