/* Blue Star Pool and Spas Services · projects.css
   Page layer for /projects/ and /es/proyectos/. Prefix .pj-. Never redefines base.css.
   Motion rule: GSAP owns the transform of .pj-tile img, .pj-node, .pj-badge, .pj-step-line,
   .pj-tubline, .pj-fall-drop and .pj-lb-fig. No CSS transform or transition:transform on those. */

/* ---------- 1 · intro ---------- */
.pj-intro{padding-bottom:1.75rem}   /* room for the un-revealed rule (it sits 26px lower until it enters) */
.pj-intro-ghost{top:clamp(.6rem,2.4vw,2.2rem);right:max(var(--gut),calc(50% - var(--wrap)/2));font-size:clamp(9rem,20vw,19rem)}
.pj-intro-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(1.6rem,4.4vw,4.8rem);align-items:end}
.pj-intro-head .kicker{margin-bottom:1.15rem}
.pj-intro-copy{padding-bottom:.3rem}
.pj-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}
.pj-rule{display:flex;align-items:center;gap:1.1rem;margin-top:clamp(2.1rem,3.4vw,3rem)}
.pj-rule-wave{flex:none;width:44px;height:10px;fill:none;stroke:var(--cyan);stroke-width:2.4;stroke-linecap:round}
.pj-rule-line{flex:1;height:1.5px;border-radius:2px;background:linear-gradient(90deg,rgba(var(--navy-rgb),.22),rgba(var(--navy-rgb),.07))}
.pj-rule .strip{flex:none;rotate:-5deg}

/* ---------- shared tile (both galleries) ---------- */
.pj-cell{position:relative;min-width:0;aspect-ratio:1}
.pj-tile{position:relative;display:block;width:100%;height:100%;overflow:hidden;isolation:isolate;border-radius:var(--pj-r);background:var(--aqua);cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.pj-tile:focus-visible{border-radius:var(--pj-r)}
.pj-tile img{display:block;width:100%;height:100%;object-fit:cover}
.pj-tile::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;box-shadow:inset 0 0 0 3px var(--cyan);opacity:0;transition:opacity .25s;pointer-events:none}
.pj-tile:hover::after,.pj-tile:focus-visible::after{opacity:1}
.pj-zoom{position:absolute;right:.6rem;bottom:.6rem;z-index:1;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(var(--white-rgb),.94);color:var(--navy);opacity:0;transition:opacity .25s;pointer-events:none}
.pj-zoom svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pj-tile:hover .pj-zoom,.pj-tile:focus-visible .pj-zoom,.pj-feat .pj-zoom{opacity:1}
.pj-feat .pj-zoom{right:.9rem;bottom:.9rem;width:44px;height:44px}
.pj-tag{position:absolute;left:.65rem;top:.65rem;z-index:1;display:inline-flex;align-items:center;gap:.35rem;padding:.36rem .75rem .36rem .5rem;border-radius:999px;background:var(--cyan);color:var(--navy);font-family:var(--body);font-weight:700;font-size:.78rem;line-height:1.1;letter-spacing:.01em;pointer-events:none}
.pj-tag svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 2 · gallery 1 · dense wall (4 x 6 = 24 cells) ---------- */
.pj-wall-sec{padding-top:0;padding-bottom:clamp(4.4rem,6.8vw,6.4rem)}
.pj-wall{--pj-g:clamp(.45rem,.9vw,.8rem);--pj-r:12px;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--pj-g);background:var(--white)}
.pj-wall .pj-a{grid-column:1/span 2;grid-row:1/span 2}
.pj-wall .pj-n{display:grid;grid-column:2/span 2;grid-row:3;min-width:0}
.pj-wall .pj-b{grid-column:3/span 2;grid-row:4/span 2}
.pj-stat{position:relative;min-width:0;display:flex;align-items:center;gap:clamp(.7rem,2vw,1.9rem);padding:clamp(.7rem,2.2vw,2.1rem) clamp(.9rem,2.8vw,2.6rem);border-radius:var(--pj-r);background:var(--navy);color:var(--white);overflow:hidden}
.pj-stat::before{content:"";position:absolute;inset:0;background:url("/assets/img/scene/caustics.webp") center/cover;opacity:.55}
.pj-stat > *{position:relative}
.pj-stat-star{position:absolute;right:-4%;top:50%;width:clamp(120px,24vw,330px);height:auto;margin-top:calc(clamp(120px,24vw,330px)*-.47);fill:none;stroke:rgba(var(--cyan-rgb),.34);stroke-width:1.1;rotate:-8deg}
.pj-stat-n{flex:none;font-family:var(--display);font-weight:800;font-size:clamp(2.3rem,6.2vw,5.8rem);line-height:.9;letter-spacing:-.035em;color:var(--cyan)}
.pj-stat-t{max-width:13ch;font-family:var(--display);font-weight:600;font-size:clamp(.92rem,1.75vw,1.65rem);line-height:1.12;letter-spacing:-.01em;color:var(--white)}

/* ---------- 3 · step by step · R1 route of circles ---------- */
.pj-route{padding-block:calc(var(--wave-h) + clamp(2.8rem,4.4vw,4.2rem)) calc(var(--wave-h) + clamp(3rem,4.6vw,4.4rem))}
.pj-tubline{position:absolute;z-index:0;top:-6.5rem;right:max(-5rem,calc(50% - var(--wrap)/2 - 11rem));width:clamp(320px,38vw,580px);height:auto;fill:none;stroke:rgba(var(--blue-rgb),.18);stroke-width:2;rotate:-12deg;pointer-events:none}
.pj-route-head{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:clamp(2.6rem,4vw,3.6rem)}
.pj-route-head .kicker{margin-bottom:1.1rem}
.pj-route-head h2{max-width:100%}
.pj-route-head .hl-in{margin-inline:auto}
.pj-route-head .lead{margin-top:1.15rem;max-width:44ch}
.pj-map{--d:clamp(140px,16vw,260px);position:relative}
.pj-path{position:absolute;z-index:0;max-width:none;overflow:visible;fill:none;pointer-events:none}
.pj-path--h{left:-25%;top:calc(var(--d)/2 - 68px);width:150%;height:160px}
.pj-path--v{display:none}
.pj-dots{stroke:rgba(var(--blue-rgb),.72);stroke-width:4.2;stroke-linecap:round;stroke-dasharray:.1 13;vector-effect:non-scaling-stroke}
.pj-draw{fill:none;stroke:#F9FEFE;stroke-width:26;stroke-linecap:butt;stroke-dasharray:1;stroke-dashoffset:0}
.pj-steps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.pj-step{display:flex;flex-direction:column;align-items:center;text-align:center;padding-inline:.5rem}
.pj-step:nth-child(2),.pj-step:nth-child(3){padding-top:24px}
.pj-node{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.35rem,.75vw,.7rem);width:var(--d);height:var(--d);border-radius:50%}
.pj-node::before{content:"";position:absolute;inset:clamp(7px,.75vw,11px);border-radius:50%;border:1.5px solid rgba(var(--white-rgb),.22);pointer-events:none}
.pj-step--navy .pj-node{background:var(--navy);color:var(--white);box-shadow:0 18px 38px rgba(var(--navy-rgb),.24)}
.pj-step--cyan .pj-node{background:var(--cyan);color:var(--navy);box-shadow:0 18px 38px rgba(var(--blue-rgb),.22)}
.pj-step--cyan .pj-node::before{border-color:rgba(var(--navy-rgb),.22)}
.pj-node-ico{width:clamp(28px,3.1vw,46px);height:clamp(28px,3.1vw,46px);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pj-step--navy .pj-node-ico{color:var(--cyan)}
.pj-route .pj-node-t{max-width:78%;font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,1.75vw,1.65rem);line-height:1.05;letter-spacing:-.015em;color:var(--navy)}
.pj-route .pj-step--navy .pj-node-t{color:var(--white)}
.pj-badge{--b:clamp(40px,3.5vw,54px);position:absolute;top:calc(14.6% - var(--b)/2);right:calc(14.6% - var(--b)/2);display:grid;place-items:center;width:var(--b);height:var(--b);border-radius:50%;border:4px solid var(--aqua);font-family:var(--display);font-weight:700;font-size:clamp(.86rem,1.1vw,1.06rem);line-height:1;letter-spacing:.01em}
.pj-step--navy .pj-badge{background:var(--cyan);color:var(--navy)}
.pj-step--cyan .pj-badge{background:var(--navy);color:var(--white)}
.pj-step-line{margin-top:clamp(1rem,1.6vw,1.45rem);max-width:22ch;font-weight:500;font-size:clamp(.98rem,1.15vw,1.1rem);line-height:1.4;text-wrap:balance;color:rgba(var(--navy-rgb),.88)}

/* ---------- 4 · gallery 2 · bento tray (3 x 6 = 18 cells) ---------- */
.pj-bento-sec{padding-top:clamp(4.4rem,6.8vw,6.4rem);padding-bottom:0}
.pj-bento-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,22rem);align-items:end;gap:clamp(1.4rem,4vw,4rem);margin-bottom:clamp(1.8rem,3vw,2.6rem)}
.pj-bento-head .kicker{margin-bottom:1.15rem}
.pj-bento-note{margin-bottom:.45rem;padding-left:1.1rem;border-left:2px solid var(--cyan);color:rgba(var(--navy-rgb),.84)}
.pj-bento{--pj-g:clamp(.55rem,1.25vw,1.1rem);--pj-r:clamp(14px,1.5vw,22px);position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--pj-g);padding:var(--pj-g);border-radius:calc(var(--pj-r) + var(--pj-g));background:var(--aqua)}
.pj-bento .pj-f1{grid-column:1/span 2;grid-row:1/span 2}
.pj-bento .pj-f2{grid-column:2/span 2;grid-row:5/span 2}

/* ---------- 5 · closing note ---------- */
.pj-close{padding-block:clamp(5.2rem,6.95vw,6.4rem) clamp(6.6rem,8vw,7.4rem);text-align:center}
.pj-close-in{display:flex;flex-direction:column;align-items:center}
.pj-close-in .kicker{margin-bottom:1rem}
.pj-close-in h2{max-width:100%}
.pj-close-in .hl-in{margin-inline:auto}
.pj-close-in .lead{margin-top:1.1rem}
.pj-ripples{position:absolute;z-index:0;left:50%;bottom:calc(var(--wave-h)*.5);width:min(620px,150vw);max-width:none;height:auto;aspect-ratio:1;translate:-50% 50%;fill:none;stroke:rgba(var(--blue-rgb),.13);stroke-width:1.4;pointer-events:none}
.pj-ripples circle{vector-effect:non-scaling-stroke}
.pj-ripples circle:nth-child(3){stroke-opacity:.75}
.pj-ripples circle:nth-child(4){stroke-opacity:.5}
.pj-fall{position:absolute;left:50%;bottom:calc(var(--wave-h)*.5 - 14px);width:16px;height:86px;margin-left:-8px;pointer-events:none}
.pj-fall-line{position:absolute;left:50%;top:0;width:4px;height:50px;margin-left:-2px;background:radial-gradient(circle,rgba(var(--blue-rgb),.6) 1.5px,transparent 1.7px) center top/4px 9px repeat-y}
.pj-fall-drop{position:absolute;left:50%;top:54px;width:12px;height:16px;margin-left:-6px}
.pj-fall-drop svg{width:12px;height:16px;fill:var(--cyan);stroke:var(--blue);stroke-width:.8}

/* ---------- lightbox (built by projects.js, appended to body) ---------- */
html.pj-lock{overflow:hidden}
.pj-lb{position:fixed;inset:0;z-index:350;display:grid;grid-template-columns:minmax(56px,1fr) auto minmax(56px,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"count . x" "prev fig next" "cap cap cap";align-items:center;column-gap:clamp(.8rem,2vw,1.8rem);row-gap:clamp(.7rem,1.8vh,1.2rem);padding:clamp(.9rem,2vh,1.5rem) clamp(1rem,2.6vw,2.2rem) clamp(1rem,2.4vh,1.7rem);background:rgba(var(--navy-rgb),.97);color:var(--white);-webkit-tap-highlight-color:transparent}
.pj-lb[hidden]{display:none}
.pj-lb::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(var(--cyan-rgb),.17) 1.6px,transparent 2.2px);background-size:34px 34px;-webkit-mask-image:linear-gradient(200deg,#000 0%,transparent 32%,transparent 72%,#000 100%);mask-image:linear-gradient(200deg,#000 0%,transparent 32%,transparent 72%,#000 100%)}
.pj-lb > *{position:relative}
.pj-lb-count{grid-area:count;justify-self:start;display:inline-flex;align-items:center;gap:.7rem;margin:0;font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:.03em;font-variant-numeric:tabular-nums;color:var(--white)}
.pj-lb-count::before{content:"";flex:none;width:10px;height:13px;background:var(--cyan);border-radius:50% 50% 50% 50%/62% 62% 38% 38%;rotate:180deg}
.pj-lb-btn{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;border:1.5px solid rgba(var(--white-rgb),.5);background:rgba(var(--white-rgb),.08);color:var(--white);transition:background-color .2s,border-color .2s,color .2s}
.pj-lb-btn:hover{background:var(--white);border-color:var(--white);color:var(--navy)}
.pj-lb-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pj-lb-btn:focus-visible{border-radius:50%}
.pj-lb-x{grid-area:x;justify-self:end;background:var(--cyan);border-color:var(--cyan);color:var(--navy)}
.pj-lb-x svg{width:26px;height:26px;rotate:45deg}
.pj-lb-prev{grid-area:prev;justify-self:end}
.pj-lb-prev svg{rotate:180deg}
.pj-lb-next{grid-area:next;justify-self:start}
.pj-lb-fig{grid-area:fig;justify-self:center;margin:0;width:max(150px,min(calc(100vw - 13rem),calc(100vh - 13.5rem),1000px));width:max(150px,min(calc(100vw - 13rem),calc(100svh - 13.5rem),1000px));aspect-ratio:1;border-radius:16px;overflow:hidden;background:rgba(var(--white-rgb),.06) center/cover no-repeat;box-shadow:0 0 0 1.5px rgba(var(--white-rgb),.18)}
.pj-lb-img{display:block;width:100%;height:100%;object-fit:contain}
.pj-lb-cap{grid-area:cap;justify-self:center;margin:0;max-width:62ch;min-height:2.9em;text-align:center;text-wrap:balance;font-size:.98rem;line-height:1.45;color:rgba(var(--white-rgb),.88)}

/* ---------- tablet and down ---------- */
@media (max-width:900px){
  .pj-intro-grid{grid-template-columns:minmax(0,1fr);gap:1.4rem}
  .pj-bento-head{grid-template-columns:minmax(0,1fr);gap:1.2rem}
  .pj-bento-note{max-width:34rem;margin-bottom:0}
}

/* ---------- mobile ---------- */
@media (max-width:760px){
  .pj-intro-ghost{font-size:8.5rem;right:-.4rem;top:.4rem}
  .pj-rule{margin-top:1.9rem}
  /* dense wall keeps its density: 3 x 8 = 24 cells */
  .pj-wall{--pj-g:6px;--pj-r:9px;grid-template-columns:repeat(3,minmax(0,1fr))}
  .pj-wall .pj-a{grid-column:1/span 2;grid-row:1/span 2}
  .pj-wall .pj-n{grid-column:1/span 2;grid-row:4}
  .pj-wall .pj-b{grid-column:2/span 2;grid-row:5/span 2}
  .pj-stat{gap:.6rem;padding:.6rem .8rem}
  .pj-stat-star{right:-12%}
  .pj-feat .pj-zoom{right:.55rem;bottom:.55rem;width:34px;height:34px}
  .pj-feat .pj-zoom svg{width:15px;height:15px}
  /* bento: 2 columns, featured full width at the start and at the end (2 + 5 + 2 rows) */
  .pj-bento{--pj-g:8px;--pj-r:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pj-bento .pj-f1,.pj-bento .pj-f2{grid-column:1/span 2;grid-row:auto}
  .pj-tag{left:.45rem;top:.45rem;padding:.3rem .6rem .3rem .42rem;font-size:.72rem}
  /* route turns vertical: circles weave 24 px left and right, the path runs behind them */
  .pj-tubline{top:-4rem;right:-7rem;width:300px}
  .pj-map{--d:132px;max-width:25rem;margin-inline:auto}
  .pj-path--h{display:none}
  .pj-path--v{display:block;left:0;top:-40px;width:160px;height:716px}
  .pj-steps{grid-template-columns:minmax(0,1fr);row-gap:36px}
  .pj-step{flex-direction:row;align-items:center;gap:1rem;height:var(--d);padding:0;text-align:left}
  .pj-step:nth-child(2),.pj-step:nth-child(3){padding-top:0}
  .pj-step:nth-child(odd) .pj-node{margin-right:24px}
  .pj-step:nth-child(even) .pj-node{margin-left:24px}
  .pj-node-ico{width:30px;height:30px}
  .pj-route .pj-node-t{font-size:1.06rem}
  .pj-badge{--b:38px;border-width:3px;font-size:.82rem}
  .pj-step-line{margin-top:0;max-width:none;font-size:1rem}
  .pj-route{padding-bottom:calc(var(--wave-h) + 3.6rem)}
  /* lightbox: photo first, arrows under the thumb */
  .pj-lb{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-areas:"count x" "fig fig" "cap cap" "prev next";column-gap:.9rem;padding:.8rem 1rem 1.1rem}
  .pj-lb-fig{width:max(150px,min(calc(100vw - 2rem),calc(100vh - 19rem),1000px));width:max(150px,min(calc(100vw - 2rem),calc(100svh - 19rem),1000px));border-radius:14px}
  .pj-lb-btn{width:52px;height:52px}
  .pj-lb-cap{font-size:.94rem;min-height:4.2em}
}

/* ---------- lightbox on short landscape screens (phone on its side): the photo takes the full height ---------- */
@media (max-height:520px) and (orientation:landscape){
  .pj-lb{grid-template-columns:minmax(56px,1fr) auto minmax(56px,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"count fig x" "prev fig next";row-gap:.4rem;padding:.6rem 1rem}
  .pj-lb-fig{width:max(150px,min(calc(100vw - 13rem),calc(100vh - 1.4rem),1000px));width:max(150px,min(calc(100vw - 13rem),calc(100svh - 1.4rem),1000px))}
  .pj-lb-count{align-self:start}
  .pj-lb-x{align-self:start}
  .pj-lb-prev,.pj-lb-next{align-self:center}
  .pj-lb-cap{display:none}
}