/* ══════════════════════════════════════════════════════════
   CS-LAYOUT.CSS — Behance-style visual project showcase
   Drop this <link> into every CS page head, after global.css
   ══════════════════════════════════════════════════════════ */

/* ── READING RAIL ── */
.cs-content{
  max-width:900px;
  margin:0 auto;
  padding:72px 40px;
}

/* ── SECTION BLOCKS ── */
.section-block{ margin-bottom:88px; }

/* ── SECTION LABEL ── */
.section-num{
  font-size:10px;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--orange);
  margin-bottom:12px;display:flex;align-items:center;gap:12px;
}
.section-num::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(to right,rgba(255,117,31,0.25),transparent);
}

/* ── SECTION TITLES ── */
.section-title{
  font-family:var(--font-d);font-size:36px;font-weight:700;
  color:var(--dark);letter-spacing:-0.02em;margin-bottom:24px;line-height:1.15;
}
.section-title em{ color:var(--orange);font-style:italic; }

/* ── BODY TEXT ── */
.body-text{
  font-size:16px;color:var(--mid);line-height:1.9;
  margin-bottom:18px;max-width:680px;
}
.body-text strong{ color:var(--dark);font-weight:500; }

/* ── BULLET LIST ── */
.bullet-list{
  list-style:none;margin:16px 0 24px;
  display:flex;flex-direction:column;gap:10px;max-width:680px;
}
.bullet-list li{
  font-size:15px;color:var(--mid);line-height:1.7;
  padding-left:22px;position:relative;
}
.bullet-list li::before{
  content:'·';position:absolute;left:6px;
  color:var(--orange);font-weight:700;font-size:20px;line-height:1.2;
}

/* ── CALLOUT ── */
.callout{
  background:var(--orange-light);border-left:3px solid var(--orange);
  border-radius:0 12px 12px 0;padding:22px 28px;margin:28px 0;
  transition:transform 0.25s var(--ease-bounce);
}
.callout:hover{ transform:translateX(6px); }
.callout-label{
  font-size:10px;font-weight:700;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--orange);margin-bottom:8px;
}
.callout-text{
  font-size:14px;color:var(--orange-dark,#cc4a00);line-height:1.7;font-weight:500;
}

/* ── IMPACT STATS STRIP ── */
.impact-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  border-radius:16px;overflow:hidden;margin:32px 0;
  background:var(--dark);
}
.impact-stat{
  padding:36px 28px;border-right:1px solid rgba(255,255,255,0.07);
  text-align:center;position:relative;overflow:hidden;
}
.impact-stat:last-child{ border-right:none; }
.impact-stat::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(255,117,31,0.06) 1px,transparent 1px);
  background-size:18px 18px;
}
.stat-counter{
  font-family:var(--font-d);font-size:38px;font-weight:900;
  color:var(--orange);line-height:1;display:block;
  margin-bottom:8px;position:relative;z-index:1;
  letter-spacing:-0.02em;
}
.stat-label{
  font-size:11px;color:rgba(255,255,255,0.45);
  line-height:1.5;position:relative;z-index:1;
}

/* ── QUOTE ── */
.quote-block{
  position:relative;padding:36px 40px;margin:32px 0;
  background:var(--white);border-radius:16px;
  border:1px solid var(--border);
  transition:transform 0.25s var(--ease-bounce),box-shadow 0.25s;
}
.quote-block:hover{ transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,0.08); }
.quote-mark{
  font-family:var(--font-d);font-size:96px;color:var(--orange);opacity:0.1;
  position:absolute;top:-14px;left:28px;line-height:1;
}
.quote-text{
  font-size:18px;color:var(--dark);line-height:1.75;
  font-style:italic;position:relative;z-index:1;max-width:580px;
}
.quote-attr{
  font-size:12px;color:var(--light);margin-top:14px;
  font-weight:500;position:relative;z-index:1;
}

/* ═══════════════════════════════════════
   BEHANCE-STYLE IMAGE LAYOUTS
   ═══════════════════════════════════════ */

/* Full-bleed image — breaks out of rail */
.img-full{
  width:100vw;
  margin-left:calc(-1 * (100vw - 100%) / 2);
  margin-right:calc(-1 * (100vw - 100%) / 2);
  margin-top:40px;margin-bottom:40px;
  max-height:70vh;overflow:hidden;
  position:relative;
}
.img-full img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.img-full-caption{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(0,0,0,0.5));
  padding:28px 40px 20px;
  font-size:12px;color:rgba(255,255,255,0.7);
  letter-spacing:0.04em;
}

/* Wide image — slightly wider than rail */
.img-wide{
  width:calc(100% + 80px);
  margin-left:-40px;margin-right:-40px;
  margin-top:32px;margin-bottom:32px;
  border-radius:12px;overflow:hidden;
  box-shadow:0 8px 40px rgba(0,0,0,0.1);
}
.img-wide img{ width:100%;display:block; }

/* Rail image — fits reading width */
.img-rail{
  width:100%;margin-top:28px;margin-bottom:28px;
  border-radius:12px;overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,0.07);
}
.img-rail img{ width:100%;display:block; }

/* Side-by-side pair */
.img-pair{
  display:grid;grid-template-columns:1fr 1fr;
  gap:16px;margin:32px 0;
}
.img-pair .img-rail{ margin:0; }

/* Three-up grid */
.img-trio{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  gap:12px;margin:32px 0;
}
.img-trio .img-rail{ margin:0; }

/* Featured + detail (1 big + 2 small) */
.img-feature{
  display:grid;
  grid-template-columns:2fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:12px;margin:32px 0;
  max-height:520px;
}
.img-feature .img-rail{ margin:0;height:100%; }
.img-feature .img-rail:first-child{ grid-row:1/3; }
.img-feature .img-rail img{ height:100%;object-fit:cover; }

/* Mosaic (Pinterest-style asymmetric) */
.img-mosaic{
  display:grid;
  grid-template-columns:3fr 2fr;
  grid-template-rows:auto auto;
  gap:12px;margin:32px 0;
}
.img-mosaic .img-rail{ margin:0; }
.img-mosaic .img-rail:first-child{ grid-row:span 2; }
.img-mosaic .img-rail img{ height:100%;object-fit:cover;min-height:180px; }

/* Annotation overlay — label on top of image */
.img-annotated{ position:relative;margin:32px 0; }
.img-annotated .img-rail{ margin:0; }
.annotation{
  position:absolute;
  background:rgba(255,117,31,0.92);color:#fff;
  font-size:11px;font-weight:600;letter-spacing:0.04em;
  padding:5px 12px;border-radius:100px;
  white-space:nowrap;pointer-events:none;
}
.annotation::before{
  content:'';position:absolute;
  width:2px;height:20px;background:rgba(255,117,31,0.7);
}

/* Scroll gallery — horizontal swipe */
.img-scroll-gallery{
  display:flex;gap:12px;
  overflow-x:auto;scrollbar-width:none;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  margin:32px -40px;
  padding:0 40px 16px;
}
.img-scroll-gallery::-webkit-scrollbar{ display:none; }
.img-scroll-gallery .img-rail{
  margin:0;flex:0 0 72%;scroll-snap-align:start;
}
.img-scroll-gallery .img-rail img{ height:360px;object-fit:cover; }

/* Before/After slider */
.img-before-after{
  position:relative;overflow:hidden;border-radius:12px;
  margin:32px 0;user-select:none;
  box-shadow:0 4px 20px rgba(0,0,0,0.1);
}
.ba-before,.ba-after{
  position:absolute;inset:0;
  overflow:hidden;
}
.ba-before img,.ba-after img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.ba-before{ width:50%; }
.ba-divider{
  position:absolute;top:0;bottom:0;
  left:50%;transform:translateX(-50%);
  width:3px;background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,0.15),0 0 8px rgba(0,0,0,0.2);
  cursor:ew-resize;z-index:10;
}
.ba-handle{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:36px;height:36px;border-radius:50%;
  background:#fff;box-shadow:0 2px 12px rgba(0,0,0,0.2);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--orange);font-weight:700;
  pointer-events:none;
}
.ba-label{
  position:absolute;bottom:12px;
  font-size:11px;font-weight:600;letter-spacing:0.06em;
  text-transform:uppercase;
  background:rgba(0,0,0,0.5);color:#fff;
  padding:4px 12px;border-radius:100px;backdrop-filter:blur(4px);
}
.ba-label.left{ left:16px; }
.ba-label.right{ right:16px; }

/* ── PLACEHOLDER (for images not yet added) ── */
.img-placeholder{
  width:100%;border-radius:12px;
  border:2px dashed var(--border);
  background:var(--white);
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:10px;color:var(--light);
  margin:28px 0;cursor:pointer;
  transition:border-color 0.2s,background 0.2s;
}
.img-placeholder:hover{ border-color:var(--orange);background:var(--orange-light); }
.img-placeholder .ph-icon{ font-size:28px;transition:transform 0.2s var(--ease-bounce); }
.img-placeholder:hover .ph-icon{ transform:scale(1.2) rotate(-5deg); }
.img-placeholder .ph-label{ font-size:12px;font-weight:500; }
.img-placeholder .ph-sub{ font-size:11px;opacity:0.6; }
.ph-tall{ height:400px; }
.ph-medium{ height:260px; }
.ph-short{ height:160px; }
.ph-grid{ display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:28px 0; }
.ph-grid .img-placeholder{ margin:0; }

/* ── PROCESS STEPS ── */
.process-steps{
  display:flex;flex-direction:column;gap:0;
  margin:28px 0;position:relative;max-width:680px;
}
.process-steps::before{
  content:'';position:absolute;left:20px;top:24px;bottom:24px;
  width:2px;background:linear-gradient(to bottom,var(--orange),var(--border));border-radius:2px;
}
.step{ display:flex;gap:24px;padding:20px 0; }
.step-num{
  width:40px;height:40px;border-radius:50%;
  background:var(--white);border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:var(--light);flex-shrink:0;
  transition:background 0.2s,border-color 0.2s,color 0.2s,transform 0.25s var(--ease-bounce);z-index:1;
}
.step:hover .step-num{
  background:var(--orange);border-color:var(--orange);color:#fff;transform:scale(1.15);
}
.step-title{ font-size:14px;font-weight:600;color:var(--dark);margin-bottom:5px; }
.step-desc{ font-size:13px;color:var(--mid);line-height:1.7; }

/* ── DECISION CARDS ── */
.decisions-grid{ display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:28px 0; }
.decision-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:12px;padding:22px;
  transition:transform 0.25s var(--ease-bounce),box-shadow 0.25s,border-color 0.25s;
}
.decision-card:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 36px rgba(0,0,0,0.08);
  border-color:var(--orange);
}
.dc-tag{
  display:inline-block;font-size:10px;font-weight:600;
  letter-spacing:0.06em;text-transform:uppercase;
  color:var(--orange);background:var(--orange-light);
  padding:2px 10px;border-radius:100px;margin-bottom:10px;
}
.dc-icon{ font-size:22px;margin-bottom:10px;display:block; }
.dc-title{ font-size:14px;font-weight:600;color:var(--dark);margin-bottom:6px; }
.dc-desc{ font-size:12.5px;color:var(--mid);line-height:1.65; }

/* ── STICKY PULL QUOTE ── */
.sticky-quote{
  float:right;width:280px;margin:8px 0 24px 32px;
  background:var(--orange);border-radius:12px;
  padding:24px 22px;position:relative;
}
.sticky-quote::before{
  content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:32px;height:10px;background:rgba(255,255,255,0.4);border-radius:2px;
}
.sticky-quote p{
  font-family:var(--font-d);font-size:16px;font-weight:700;
  color:#fff;line-height:1.45;
}

/* ── TAGS / PILLS ── */
.tag-row{ display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 24px; }
.pill{
  font-size:12px;font-weight:500;color:var(--dark);
  background:var(--bg);border:1px solid var(--border);
  padding:5px 14px;border-radius:100px;
  transition:border-color 0.2s,color 0.2s,background 0.2s;
}
.pill:hover{ border-color:var(--orange);color:var(--orange);background:var(--orange-light); }

/* ── RESPONSIVE ── */
@media(max-width:860px){
  .cs-content{ padding:48px 20px; }
  .img-wide{ width:calc(100% + 40px);margin-left:-20px;margin-right:-20px; }
  .img-full{ margin-left:-20px;margin-right:-20px; }
  .img-scroll-gallery{ margin:32px -20px;padding:0 20px 16px; }
  .img-pair,.img-feature,.img-mosaic,.decisions-grid{ grid-template-columns:1fr; }
  .img-feature .img-rail:first-child{ grid-row:auto; }
  .img-trio{ grid-template-columns:1fr 1fr; }
  .sticky-quote{ float:none;width:100%;margin:20px 0; }
  .section-title{ font-size:28px; }
  .ph-grid{ grid-template-columns:1fr; }
}
@media(max-width:540px){
  .img-trio{ grid-template-columns:1fr; }
  .section-title{ font-size:24px; }
  .quote-text{ font-size:16px; }
}

/* ── BEFORE/AFTER JS BEHAVIOUR (injected by utils) ── */