/* =====================================================================
   PROJECTS CATEGORY PAGE  —  היהלום שברהיט
   Loads AFTER category.css (shares :root colours + header/footer styles).
   All content comes from data/projects.json — nothing dummy in the CSS.
   ===================================================================== */

/* ---------- HERO (short — top quarter of the screen) ---------- */
:root{ --pj-hero-h: clamp(150px, var(--hero-h, 24vh), 300px); }
.pj-hero{
  position:relative;width:100%;
  height:var(--pj-hero-h);
  overflow:hidden;border-radius:0 0 var(--radius,18px) var(--radius,18px);
  background:linear-gradient(115deg,#cdb99f 0%,#b99b7c 55%,#a2805f 100%);
}
.pj-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.pj-hero__img[hidden]{display:none}
.pj-hero__overlay{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg, rgba(20,12,4,.04) 0%, rgba(20,12,4,.24) 55%, rgba(20,12,4,.5) 100%);
}
@supports (background: color-mix(in srgb, red, blue)){
  .pj-hero__overlay{
    background:linear-gradient(90deg,
      color-mix(in srgb, var(--overlay-color,#170f06)  4%, transparent) 0%,
      color-mix(in srgb, var(--overlay-color,#170f06) 24%, transparent) 55%,
      color-mix(in srgb, var(--overlay-color,#170f06) 50%, transparent) 100%);
  }
}
.pj-hero__text{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;
  text-align:right;gap:clamp(4px,.8vw,10px);padding:0 clamp(20px,6vw,90px);color:#fbf3ea;
}
.pj-hero__title{
  margin:0;font-weight:700;letter-spacing:.01em;line-height:1.08;
  font-size:clamp(28px,4.4vw,58px);color:var(--hero-title-color,#fbf3ea);
  text-shadow:0 2px 22px rgba(20,12,4,.45);
}
.pj-hero__title:empty::after{ content:"העיצובים שלנו"; opacity:.95; }   /* structural fallback only */
.pj-hero__desc{
  margin:0;max-width:52ch;font-weight:300;line-height:1.5;
  font-size:clamp(14px,1.7vw,22px);color:var(--hero-desc-color,rgba(251,243,234,.94));
  text-shadow:0 2px 16px rgba(20,12,4,.45);
}
.pj-hero__desc[hidden]{display:none}
@media(max-width:600px){ :root{ --pj-hero-h: clamp(140px,20vh,200px); } }

/* ---------- PROJECTS GRID — deliberately reuses .cat-wrap / .prod-grid / .prod-card
   from category.css unchanged, so this page looks exactly like a category page.
   The client-name line on each card only: ---------- */
.prod-card__client{
  display:block;font-weight:500;margin-top:2px;
  font-size:clamp(10.5px,.85vw,13px);
  color:var(--card-desc-color,rgba(251,243,234,.82));
  text-shadow:0 2px 12px rgba(20,12,4,.5);
}

/* projects page hero: the title sits on the RIGHT (RTL start) */
.pj-hero__text{align-items:flex-start;text-align:right}