/* ============================================================
   VTechnocrat — Projects module styles
   Listing page (.prj / .prjc) + Detail page (.prjd)
   Loaded only on project pages (see projects.php / project-detail.php)
   ============================================================ */

/* ==========================================
   Projects Listing (prj) — START
   ========================================== */

.prj{
  --prj-brand:      var(--brand, #87E64B);
  --prj-brand-2:    var(--brand-2, #87E64B);
  --prj-brand-deep: #2F7A19;
  --prj-ink:        var(--ink, #0B0D0C);
  --prj-muted:      var(--muted, #6B736E);
  --prj-line:       var(--line, #E6EAE7);
  --prj-surface:    var(--surface, #F7FAF5);
  --prj-r:          var(--r, 18px);
  --prj-pill:       var(--pill, 999px);
  --prj-transition: var(--transition, .3s cubic-bezier(.4, 0, .2, 1));
  --prj-lift:       6px;

  padding: 76px 0 96px;
  background: #fff;
}

/* ---- section head (eyebrow + heading + lede) ---- */
.prj__head{
  max-width: 720px;
  margin: 0 0 30px;
}
.prj__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border: 1px solid var(--prj-line);
  border-radius: var(--prj-pill);
  background: var(--prj-surface);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--prj-brand-deep);
  margin-bottom: 18px;
}
.prj__eyebrow i{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--prj-brand-2);
}
.prj__heading{
  margin: 0 0 14px;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.12;
  color: var(--prj-ink);
}
.prj__hl{ color: var(--prj-brand-deep); }
.prj__intro{
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--prj-muted);
  max-width: 58ch;
}

/* ---- category filter bar ---- */
.prj__filters{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 34px;
}
.prj__filter{
  padding: 9px 20px;
  border: 1px solid var(--prj-line);
  border-radius: var(--prj-pill);
  background: #fff;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--prj-muted);
  cursor: pointer;
  transition: color var(--prj-transition), background var(--prj-transition),
              border-color var(--prj-transition);
}
.prj__filter:hover{
  border-color: var(--prj-brand-2);
  color: var(--prj-brand-deep);
}
.prj__filter.is-active{
  background: var(--prj-ink);
  border-color: var(--prj-ink);
  color: #fff;
}

/* ---- grid ---- */
.prj__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

/* ---- card ---- */
.prjc{
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--prj-line);
  border-radius: var(--prj-r);
  overflow: hidden;
  transition: transform var(--prj-transition), border-color var(--prj-transition),
              box-shadow var(--prj-transition);
}
.prjc:hover,
.prjc:focus-within{
  transform: translateY(calc(var(--prj-lift) * -1));
  border-color: var(--prj-brand-2);
  box-shadow:
    0 0 0 1px var(--prj-brand-2),
    0 20px 44px rgba(95, 201, 58, .18);
}

.prjc__hit{
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

.prjc__media{
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--prj-surface);
}
.prjc__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.prjc:hover .prjc__media img{ transform: scale(1.06); }
.prjc__media img.is-placeholder{
  object-fit: contain;
  opacity: .6;
}

.prjc__cats{
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: calc(100% - 32px);
}
.prjc__cat{
  position: static;
  padding: 6px 14px;
  border-radius: var(--prj-pill);
  background: rgba(11, 13, 12, .78);
  backdrop-filter: blur(4px);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
}

.prjc__body{
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 24px;
}
.prjc__title{
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.3;
  color: var(--prj-ink);
  transition: color var(--prj-transition);
}
.prjc:hover .prjc__title{ color: var(--prj-brand-deep); }
.prjc__excerpt{
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--prj-muted);
}
.prjc__more{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--prj-brand-deep);
  transition: gap var(--prj-transition);
}
.prjc:hover .prjc__more{ gap: 12px; }

.prjc__go{
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--prj-ink);
  font-size: 15px;
  opacity: 0;
  transform: scale(.7);
  transition: opacity var(--prj-transition), transform var(--prj-transition),
              background var(--prj-transition);
}
.prjc:hover .prjc__go{
  opacity: 1;
  transform: scale(1) rotate(45deg);
  background: var(--prj-brand);
}

/* ---- hidden cards (load more / filter) ---- */
.prjc.is-hidden{ display: none; }

/* ---- scroll reveal ---- */
[data-prj-reveal]{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}
[data-prj-reveal].is-in{
  opacity: 1;
  transform: none;
}
.prjc.is-revealed{
  animation: prjPop .55s ease both;
}
@keyframes prjPop{
  from{ opacity: 0; transform: translateY(18px); }
  to{ opacity: 1; transform: none; }
}

/* ---- load more ---- */
.prj__more{
  margin-top: 44px;
  text-align: center;
}
.prj__more-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  border: 1px solid var(--prj-line);
  border-radius: var(--prj-pill);
  background: #fff;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--prj-ink);
  cursor: pointer;
  transition: border-color var(--prj-transition), box-shadow var(--prj-transition),
              transform var(--prj-transition);
}
.prj__more-btn:hover{
  border-color: var(--prj-brand-2);
  box-shadow: 0 10px 26px rgba(95, 201, 58, .18);
  transform: translateY(-2px);
}
.prj__count{
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--prj-muted);
}
.prj__count b{ color: var(--prj-ink); }

/* ---- empty state ---- */
.prj__empty{
  text-align: center;
  padding: 70px 20px;
  border: 1px dashed var(--prj-line);
  border-radius: var(--prj-r);
  background: var(--prj-surface);
}
.prj__empty-icon{
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--prj-line);
  font-size: 26px;
  color: var(--prj-brand-deep);
  margin-bottom: 18px;
}
.prj__empty h2{
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 800;
  color: var(--prj-ink);
}
.prj__empty p{
  margin: 0 auto 22px;
  max-width: 44ch;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--prj-muted);
}
.prj__empty-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: var(--prj-pill);
  background: var(--prj-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: gap var(--prj-transition), background var(--prj-transition);
}
.prj__empty-btn:hover{
  gap: 12px;
  background: var(--prj-brand-deep);
}

/* ==========================================
   Projects Listing (prj) — END
   ========================================== */


/* ==========================================
   Project Detail (prjd) — START
   ========================================== */

.prjd{
  --prjd-brand:      var(--brand, #87E64B);
  --prjd-brand-2:    var(--brand-2, #87E64B);
  --prjd-brand-deep: #2F7A19;
  --prjd-ink:        var(--ink, #0B0D0C);
  --prjd-muted:      var(--muted, #6B736E);
  --prjd-line:       var(--line, #E6EAE7);
  --prjd-surface:    var(--surface, #F7FAF5);
  --prjd-r:          var(--r, 18px);
  --prjd-pill:       var(--pill, 999px);
  --prjd-transition: var(--transition, .3s cubic-bezier(.4, 0, .2, 1));

  padding: 70px 0 64px;
  background: #fff;
}
.prjd__inner{
  max-width: 1060px;
  margin: 0 auto;
}

/* ---- hero image ---- */
.prjd__hero{
  position: relative;
  border-radius: calc(var(--prjd-r) + 6px);
  overflow: hidden;
  background: #d8efb8;
  box-shadow:
    0 1px 2px rgba(27, 46, 31, .06),
    0 14px 36px rgba(27, 46, 31, .12),
    0 28px 56px rgba(27, 46, 31, .08);
}
.prjd__hero img{
  width: 100%;
  height: auto;
  max-height: min(58vh, 560px);
  object-fit: contain;
  object-position: center bottom;
  display: block;
}
.prjd__hero img.is-placeholder{
  object-fit: contain;
  opacity: .6;
}
.prjd__hero-cats{
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: calc(100% - 28px);
}
.prjd__hero-cat{
  display: inline-flex;
  align-items: center;
  position: static;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(11, 13, 12, .78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(11, 13, 12, .18);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.25;
  color: #fff;
  white-space: nowrap;
}

/* ---- meta bar (framework / domain / status) ---- */
.prjd__meta{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: -44px 26px 0;
  position: relative;
  z-index: 1;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid var(--prjd-line);
  border-radius: var(--prjd-r);
  box-shadow: 0 18px 44px rgba(11, 13, 12, .08);
}
.prjd__meta-item{
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.prjd__meta-icon{
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--brand-soft, #EDF9E3);
  border: 1px solid var(--brand-line, #D8F0C6);
  color: var(--prjd-brand-deep);
  font-size: 20px;
}
.prjd__meta-label{
  margin: 0 0 3px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--prjd-muted);
}
.prjd__meta-value{
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--prjd-ink);
}

/* ---- narrative sections ---- */
.prjd__sec{
  margin-top: 58px;
}
.prjd__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--prjd-line);
  border-radius: var(--prjd-pill);
  background: var(--prjd-surface);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--prjd-brand-deep);
  margin-bottom: 16px;
}
.prjd__eyebrow i{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--prjd-brand-2);
}
.prjd__sec h2{
  margin: 0 0 14px;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--prjd-ink);
}
.prjd__lede{
  margin: 0 0 16px;
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--prjd-ink);
}
.prjd__sec p{
  margin: 0 0 16px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--prjd-muted);
}
.prjd__sec p:last-child{ margin-bottom: 0; }

/* ---- split section (image + text) ---- */
.prjd__split{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px;
  align-items: start;
}
.prjd__split-media{
  position: sticky;
  top: 110px;
  border-radius: var(--prjd-r);
  overflow: hidden;
  background: var(--prjd-surface);
  border: 1px solid var(--prjd-line);
}
.prjd__split-media img{
  width: 100%;
  display: block;
}
.prjd__split-media img.is-placeholder{
  aspect-ratio: 4 / 3;
  object-fit: contain;
  opacity: .6;
}

/* ---- highlights checklist ---- */
.prjd__hl-box{
  margin: 26px 0;
  padding: 24px 26px;
  border: 1px solid var(--brand-line, #D8F0C6);
  border-radius: var(--prjd-r);
  background: var(--brand-soft, #EDF9E3);
}
.prjd__hl-box h3{
  margin: 0 0 16px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--prjd-ink);
}
.prjd__hl-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.prjd__hl-list li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--prjd-ink);
}
.prjd__hl-list li i{
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--prjd-brand-deep);
  font-size: 17px;
}

/* ---- CTA card ---- */
.prjd__cta{
  margin-top: 64px;
  padding: 46px 34px;
  border-radius: calc(var(--prjd-r) + 6px);
  background: var(--prjd-ink);
  text-align: center;
}
.prjd__cta h2{
  margin: 0 0 10px;
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
}
.prjd__cta p{
  margin: 0 auto 24px;
  max-width: 52ch;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .68);
}
.prjd__cta-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--prjd-pill);
  background: var(--prjd-brand);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--prjd-ink);
  text-decoration: none;
  transition: gap var(--prjd-transition), box-shadow var(--prjd-transition);
}
.prjd__cta-btn:hover{
  gap: 12px;
  box-shadow: 0 10px 26px rgba(135, 230, 75, .3);
}

/* ---- related projects ---- */
.prjd__rel{
  margin-top: 56px;
}
.prjd__rel-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.prjd__rel-head h2{
  margin: 0;
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--prjd-ink);
}
.prjd__rel-all{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--prjd-brand-deep);
  text-decoration: none;
  white-space: nowrap;
  transition: gap var(--prjd-transition);
}
.prjd__rel-all:hover{ gap: 12px; }
.prjd__rel-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.prjd__rel-grid .prjc{
  height: auto;
}
.prjd__rel-grid .prjc__body{
  flex: 0 0 auto;
  padding: 16px 18px 18px;
}
.prjd__rel-grid .prjc__more{
  margin-top: 6px;
}

/* ---- detail scroll reveal ---- */
[data-prjd-reveal]{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}
[data-prjd-reveal].is-in{
  opacity: 1;
  transform: none;
}

/* ==========================================
   Project Detail (prjd) — END
   ========================================== */


/* ==========================================
   Responsive — START
   ========================================== */

@media (max-width: 1280px){
  .prj__grid{ gap: 22px; }
  .prjd__rel-grid{ gap: 20px; }
}

@media (max-width: 991px){
  .prj{ padding: 58px 0 76px; }
  .prj__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .prjd{ padding: 54px 0 52px; }
  .prjd__meta{
    grid-template-columns: 1fr;
    gap: 16px;
    margin: -30px 16px 0;
    padding: 20px 22px;
  }
  .prjd__split{ grid-template-columns: 1fr; gap: 26px; }
  .prjd__split-media{ position: static; }
  .prjd__rel-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px){
  .prj__grid{ grid-template-columns: 1fr; }
  .prj__more-btn{ width: 100%; justify-content: center; padding: 13px 24px; }

  .prjd{ padding: 32px 0 28px; }
  .prjd__hero img{ max-height: 42vh; }
  .prjd__hero-cats{ top: 10px; left: 10px; gap: 5px; max-width: calc(100% - 20px); }
  .prjd__hero-cat{
    padding: 3px 9px;
    font-size: 9.5px;
    letter-spacing: .01em;
  }
  .prjd__meta{ margin: -20px 10px 0; }
  .prjd__sec{ margin-top: 36px; }
  .prjd__cta{ margin-top: 36px; padding: 28px 18px; }
  .prjd__rel{ margin-top: 28px; }
  .prjd__rel-head{ flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 14px; }
  .prjd__rel-grid{ grid-template-columns: 1fr; gap: 14px; }
  .prjd__rel-grid .prjc__media{ aspect-ratio: 16 / 9; }
  .prjd__rel-grid .prjc__body{ padding: 14px 16px 14px; }
  .prjd__rel-grid .prjc__title{ margin-bottom: 4px; font-size: 17px; }
  .prjd__rel-grid .prjc__go{ display: none; }
}

@media (max-width: 380px){
  .prj__filters{ gap: 8px; }
  .prj__filter{ padding: 8px 15px; font-size: 12.5px; }
  .prjc__body{ padding: 18px 18px 20px; }
  .prjd__meta-icon{ width: 42px; height: 42px; font-size: 18px; }
  .prjd__hl-box{ padding: 18px 18px; }
}

@media (prefers-reduced-motion: reduce){
  .prjc,
  .prjc__media img,
  .prj__more-btn,
  [data-prj-reveal],
  [data-prjd-reveal]{ transition: none; }
  .prjc:hover{ transform: none; }
  .prjc:hover .prjc__media img{ transform: none; }
  .prjc.is-revealed{ animation: none; }
  [data-prj-reveal],
  [data-prjd-reveal]{ opacity: 1; transform: none; }
}

/* ==========================================
   Responsive — END
   ========================================== */