/* Μελέτες περίπτωσης */
.cs-all-row{margin:22px 0 0;}

/* ---------- γραμμή στην κάρτα εφαρμογής ---------- */
.cs-proof{
  --on:color-mix(in srgb, var(--sc) 55%, #ffffff);
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;
  max-width:74ch; margin:20px 0 0; padding:10px 12px 10px 16px;
  border:1px solid color-mix(in srgb, var(--sc) 36%, transparent); border-radius:12px;
  background:radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--sc) 12%, transparent), transparent 60%), rgba(10,16,19,.45);
}
.cs-proof-count{
  display:flex; align-items:baseline; gap:8px; white-space:nowrap;
  font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.cs-proof-count b{font-size:28px; letter-spacing:-.02em; color:var(--on); font-variant-numeric:tabular-nums;}
.cs-proof-latest{
  flex:1 1 260px; display:flex; align-items:center; gap:12px; min-width:0;
  padding:6px 8px; border-radius:10px; transition:background .25s var(--ease);
}
.cs-proof-latest:hover{background:color-mix(in srgb, var(--sc) 12%, transparent);}
.cs-th, .cs-row-th{
  flex:none; display:grid; place-items:center; overflow:hidden; border-radius:7px;
  border:1px solid color-mix(in srgb, var(--sc) 30%, transparent); background:#0f252c;
}
.cs-th{width:56px; height:42px;}
.cs-th img, .cs-row-th img{width:100%; height:100%; object-fit:cover;}
.cs-th.is-glyph, .cs-row-th.is-glyph{background:radial-gradient(90% 90% at 30% 20%, color-mix(in srgb, var(--sc) 18%, transparent), transparent 70%), linear-gradient(160deg, #14252b, #0a1013);}
.cs-th svg{width:26px; height:26px; fill:none;}
.cs-row-th svg{width:46%; height:auto; fill:none;}
.cs-proof-tx{display:flex; flex-direction:column; gap:3px; min-width:0;}
.cs-proof-tx small{font-family:var(--font-display); font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#8fa5ab;}
.cs-proof-tt{overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#fff; font-size:14.5px; font-weight:600;}
.cs-proof-v{flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:2px; max-width:110px; margin-left:auto; text-align:right;}
.cs-proof-v b{font-family:var(--font-display); font-size:18px; font-weight:800; line-height:1.1; color:var(--on);}
.cs-proof-v small{display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:10.5px; line-height:1.25; color:#8fa5ab;}
.cs-proof-all{
  flex:none; display:inline-flex; align-items:center; gap:8px; padding:10px 16px;
  border:1px solid color-mix(in srgb, var(--sc) 55%, transparent); border-radius:999px;
  background:color-mix(in srgb, var(--sc) 10%, transparent); color:#fff;
  font-family:var(--font-display); font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.cs-proof-all:hover{background:color-mix(in srgb, var(--sc) 24%, transparent); border-color:var(--on);}
.cs-proof-all span{color:var(--on); transition:transform .3s var(--ease);}
.cs-proof-all:hover span{transform:translateX(3px);}

/* ---------- πάνελ από αριστερά, χωρίς σκίαση της σελίδας ---------- */
.cs-drawer[hidden]{display:none;}
.cs-drawer{
  --sc:var(--accent); --on:color-mix(in srgb, var(--sc) 55%, #ffffff);
  position:fixed; z-index:59; top:0; bottom:0; left:var(--rail-w);
  width:min(780px, calc(100vw - var(--rail-w))); display:flex; flex-direction:column;
  background:radial-gradient(120% 34% at 0% 0%, color-mix(in srgb, var(--sc) 14%, transparent), transparent 70%), var(--rail);
  border-right:1px solid color-mix(in srgb, var(--sc) 45%, var(--line));
  box-shadow:40px 0 90px rgba(0,0,0,.55);
  transform:translateX(-101%); visibility:hidden;
  transition:transform .5s var(--ease), visibility 0s linear .5s;
}
body.admin-bar .cs-drawer{top:32px;}
.cs-drawer.is-open{transform:none; visibility:visible; transition:transform .5s var(--ease), visibility 0s;}
.cs-d-top{position:relative; flex:none; padding:26px 26px 14px; border-bottom:1px solid rgba(95,208,198,.14);}
.cs-d-close{
  position:absolute; top:22px; right:22px; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:transparent; color:var(--muted); font-size:18px; cursor:pointer;
  transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.cs-d-close:hover{border-color:var(--on); color:var(--on); background:color-mix(in srgb, var(--sc) 10%, transparent);}
.cs-d-head{display:flex; align-items:center; gap:14px; padding-right:56px;}
.cs-d-glyph{flex:none; width:48px; height:48px; display:grid; place-items:center; border-radius:12px; background:linear-gradient(160deg, #14252b, #0a1013); border:1px solid color-mix(in srgb, var(--sc) 45%, transparent);}
.cs-d-glyph svg{width:30px; height:30px; fill:none;}
.cs-d-k{display:block; margin-bottom:4px; font-family:var(--font-display); font-size:10.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--on);}
.cs-d-head h2{margin:0; font-size:clamp(20px, 2.2vw, 26px); font-weight:800; line-height:1.2; color:#fff;}
.cs-d-head h2 small{display:block; margin-top:4px; font-family:var(--font-body); font-size:13.5px; font-weight:500; letter-spacing:0; color:var(--muted);}
.cs-d-tools{display:flex; flex-direction:column; gap:12px; margin-top:16px;}
.cs-d-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px;}
.cs-d-search{position:relative; flex:1 1 260px; max-width:440px;}
.cs-d-search svg{position:absolute; left:16px; top:50%; width:17px; height:17px; transform:translateY(-50%); fill:none; stroke:var(--accent); stroke-width:2.2; stroke-linecap:round; pointer-events:none;}
.cs-d-search input, .cs-drawer select{
  width:100%; padding:12px 16px 12px 44px; border:1px solid rgba(124,230,219,.3); border-radius:999px;
  background:rgba(10,16,19,.5); color:#fff; font-family:var(--font-body); font-size:14.5px; outline:none;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.cs-drawer select{
  width:auto; flex:0 1 auto; padding:12px 40px 12px 16px; cursor:pointer; -webkit-appearance:none; appearance:none;
  font-family:var(--font-display); font-weight:600;
  background:rgba(10,16,19,.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fd0c6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 14px;
}
.cs-drawer select option{background:#0b1114; color:#fff;}
.cs-d-search input:focus, .cs-drawer select:focus{border-color:var(--cyan); box-shadow:0 0 0 4px rgba(95,208,198,.14);}
.cs-d-chips{display:flex; flex-wrap:wrap; gap:8px;}
.cs-chip{
  display:inline-flex; align-items:center; gap:8px; padding:8px 13px;
  border:1px solid rgba(124,230,219,.22); border-radius:999px; background:rgba(150,235,226,.05);
  color:var(--muted); font-family:var(--font-display); font-size:13px; font-weight:600; white-space:nowrap; cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.cs-chip:hover{color:#fff; border-color:color-mix(in srgb, var(--sc, var(--accent)) 60%, transparent);}
.cs-chip i{flex:none; width:8px; height:8px; border-radius:50%; background:var(--sc);}
.cs-chip .n{opacity:.65; font-variant-numeric:tabular-nums;}
.cs-chip[aria-pressed="true"]{color:#fff; border-color:var(--sc, var(--accent)); background:color-mix(in srgb, var(--sc, var(--accent)) 22%, transparent);}
.cs-d-body{flex:1 1 auto; overflow-y:auto; padding:4px 26px 30px; scrollbar-width:thin; scrollbar-color:var(--line) transparent;}
.cs-d-status{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin:16px 0 10px; font-size:13px; color:#8fa5ab;}
.cs-d-status b{color:#fff; font-variant-numeric:tabular-nums;}
.cs-d-status button{background:none; border:0; padding:0; color:var(--accent); font-size:13px; font-weight:600; cursor:pointer;}
.cs-d-list, .cs-rows{display:flex; flex-direction:column; gap:8px; margin:0; padding:0; list-style:none;}
.cs-d-more{display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:20px;}
.cs-d-more small{font-size:12.5px; color:#8fa5ab;}
.cs-d-empty{padding:24px; border:1px dashed rgba(140,190,190,.35); border-radius:14px; color:var(--muted);}

/* ---------- γραμμή λίστας ---------- */
.cs-row{
  --on:color-mix(in srgb, var(--sc) 55%, #ffffff);
  position:relative; display:grid; grid-template-columns:92px minmax(0,1fr) auto; gap:14px; align-items:center;
  padding:10px 16px 10px 10px; border:1px solid rgba(95,208,198,.16); border-radius:14px;
  background:linear-gradient(180deg, rgba(24,66,82,.42), rgba(14,44,58,.42));
  transition:border-color .25s var(--ease), transform .3s var(--ease);
}
.cs-row::before{
  content:''; position:absolute; left:-1px; top:50%; width:2px; height:0; border-radius:0 2px 2px 0;
  background:var(--on); box-shadow:0 0 10px var(--sc); transform:translateY(-50%); transition:height .3s var(--ease);
}
.cs-row:hover, .cs-row:focus-visible{border-color:color-mix(in srgb, var(--sc) 60%, transparent); transform:translateX(3px);}
.cs-row:hover::before, .cs-row:focus-visible::before{height:56%;}
.cs-row-th{width:92px; aspect-ratio:4/3; border-radius:9px;}
.cs-row-main{display:flex; flex-direction:column; gap:3px; min-width:0;}
.cs-row-meta{display:flex; flex-wrap:wrap; gap:4px 10px; font-family:var(--font-display); font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--on);}
.cs-row-meta span + span{color:#8fa5ab;}
.cs-row-t{font-family:var(--font-display); font-size:16px; font-weight:700; line-height:1.3; color:#fff;}
.cs-row-c{font-size:13.5px; color:var(--muted);}
.cs-row-v{display:flex; flex-direction:column; gap:3px; max-width:170px; padding-left:16px; border-left:1px solid rgba(95,208,198,.14);}
.cs-row-v b{font-family:var(--font-display); font-size:22px; font-weight:800; line-height:1; color:var(--on);}
.cs-row-v small{font-size:12px; line-height:1.35; color:var(--muted);}

/* ---------- μέσα στο άρθρο ---------- */
.cs-article{--on:color-mix(in srgb, var(--sc) 55%, #ffffff); max-width:900px; margin:22px 0 28px; padding:0;}
.cs-pills{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px;}
.cs-pill{
  display:inline-flex; align-items:center; gap:8px; padding:5px 13px 5px 5px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--sc) 45%, transparent); background:color-mix(in srgb, var(--sc) 10%, transparent);
  color:#fff; font-family:var(--font-display); font-size:12.5px; font-weight:600;
  transition:border-color .25s var(--ease);
}
.cs-pill:hover{border-color:var(--on);}
.cs-pill-g{flex:none; width:24px; height:24px; display:grid; place-items:center; border-radius:7px; background:linear-gradient(160deg, #14252b, #0a1013); border:1px solid color-mix(in srgb, var(--sc) 45%, transparent);}
.cs-pill-g svg{width:16px; height:16px; fill:none;}
.cs-box{
  overflow:hidden; border:1px solid color-mix(in srgb, var(--sc) 38%, transparent); border-radius:16px;
  background:radial-gradient(120% 60% at 0% 0%, color-mix(in srgb, var(--sc) 12%, transparent), transparent 60%), rgba(10,16,19,.45);
}
.cs-sec{padding:20px 22px;}
.cs-sec + .cs-sec{border-top:1px solid color-mix(in srgb, var(--sc) 18%, transparent);}
.cs-h{margin:0 0 12px; font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--on);}
.cs-facts{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px 18px; margin:0;}
.cs-facts div{min-width:0;}
.cs-facts dt{margin:0 0 4px; font-family:var(--font-display); font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--on);}
.cs-facts dd{margin:0; color:#fff; font-weight:600; font-size:15px; overflow-wrap:anywhere;}

/* η διαδρομή: κάθε ενότητα κειμένου ένας σταθμός */
.cs-trace{margin:0; padding:0; list-style:none; display:flex; flex-direction:column;}
.cs-st{position:relative; padding:0 0 22px 30px;}
.cs-st:last-child{padding-bottom:0;}
.cs-st::before{content:''; position:absolute; left:0; top:4px; width:12px; height:12px; border-radius:50%; background:var(--on); box-shadow:0 0 12px var(--sc);}
.cs-st:not(:last-child)::after{content:''; position:absolute; left:5px; top:18px; bottom:2px; width:2px; background:var(--on); box-shadow:0 0 8px var(--sc); transform-origin:top; animation:csWire .9s var(--ease) both;}
@keyframes csWire{from{transform:scaleY(0);}}
.cs-st h3{margin:0 0 6px; font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent);}
.cs-st p{margin:0 0 8px; font-size:16px; line-height:1.7; color:var(--muted);}
.cs-pts{margin:8px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px;}
.cs-pts li{position:relative; padding-left:18px; color:#e9f4f5; font-size:15px; line-height:1.5;}
.cs-pts li::before{content:''; position:absolute; left:0; top:.6em; width:7px; height:7px; border-radius:50%; background:var(--on);}
.cs-metrics{display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px; margin:0; padding:0; list-style:none;}
.cs-metrics li{display:flex; flex-direction:column; gap:7px; padding:15px; border:1px solid color-mix(in srgb, var(--sc) 30%, transparent); border-radius:12px; background:rgba(10,16,19,.45);}
.cs-metrics b{font-family:var(--font-display); font-size:clamp(26px, 3vw, 34px); font-weight:800; line-height:1; color:var(--on);}
.cs-metrics span{font-size:13.5px; line-height:1.45; color:var(--muted);}
.cs-media{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin:0; padding:0; list-style:none;}
.cs-media li:first-child{grid-column:span 2; grid-row:span 2;}
.cs-media a{position:relative; display:block; height:100%; min-height:110px; overflow:hidden; border-radius:10px; border:1px solid color-mix(in srgb, var(--sc) 30%, transparent); background:#0f252c;}
.cs-media img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.cs-media a:hover img{transform:scale(1.04);}
.cs-yt-play{position:absolute; left:50%; top:50%; width:58px; height:40px; display:grid; place-items:center; transform:translate(-50%,-50%); border-radius:10px; background:#e00; transition:transform .3s var(--ease);}
.cs-yt-play svg{width:22px; height:22px; fill:#fff;}
.cs-yt:hover .cs-yt-play{transform:translate(-50%,-50%) scale(1.08);}
.cs-yt iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.cs-media li.is-playing{grid-column:1 / -1; aspect-ratio:16/9;}
.cs-quote{margin:0; padding:16px 20px; border-left:2px solid var(--on); border-radius:0 12px 12px 0; background:color-mix(in srgb, var(--sc) 8%, transparent);}
.cs-quote p{margin:0; font-family:var(--font-display); font-size:clamp(17px, 1.8vw, 20px); font-weight:600; line-height:1.45; color:#fff;}
.cs-quote cite{display:block; margin-top:8px; font-style:normal; font-size:13px; color:var(--muted);}
.cs-related{max-width:900px; margin:40px 0 0; padding:0;}
.cs-related h2{margin:0 0 14px; font-size:20px; font-weight:700; color:#fff;}
.cs-related-all{display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-family:var(--font-display); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent);}
.cs-related-all span{transition:transform .3s var(--ease);}
.cs-related-all:hover span{transform:translateX(4px);}
.cs-proof-latest:focus-visible, .cs-proof-all:focus-visible, .cs-chip:focus-visible, .cs-d-close:focus-visible,
.cs-row:focus-visible, .cs-pill:focus-visible, .cs-media a:focus-visible, .cs-related-all:focus-visible{outline:2px solid var(--cyan); outline-offset:2px;}

@media (max-width:880px), (max-height:520px){
  .cs-drawer{top:96px; left:0; width:100%; border-right:0;}
  body.admin-bar .cs-drawer{top:96px;}
  .cs-d-top{padding:18px 16px 12px;}
  .cs-d-close{top:14px; right:14px; width:40px; height:40px;}
  .cs-d-head{padding-right:48px;}
  .cs-d-glyph{width:40px; height:40px;}
  .cs-d-body{padding:4px 16px 24px;}
  .cs-d-search{flex-basis:100%; max-width:none;}
  .cs-drawer select{flex:1 1 40%;}
  .cs-d-chips{flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; scrollbar-width:none;}
  .cs-d-chips::-webkit-scrollbar{display:none;}
  .cs-row{grid-template-columns:76px minmax(0,1fr); gap:12px; padding:8px 10px 8px 8px;}
  .cs-row-th{width:76px;}
  .cs-row-v{grid-column:2; flex-direction:row; align-items:baseline; gap:8px; max-width:none; padding:0; border:0;}
  .cs-row-v b{font-size:18px;}
  .cs-row-t{font-size:15px;}
  .cs-proof{padding:10px 12px;}
  .cs-proof-latest{flex-basis:100%; padding:4px 0;}
  .cs-proof-all{width:100%; justify-content:center;}
  .cs-facts{grid-template-columns:repeat(2, minmax(0,1fr));}
  .cs-sec{padding:16px;}
  .cs-media{grid-template-columns:repeat(2, minmax(0,1fr));}
  .cs-media li:first-child{grid-row:auto;}
}
@media (max-height:520px){
  .cs-drawer{overflow-y:auto; overscroll-behavior:contain;}
  .cs-d-body{flex:none; overflow:visible;}
  .cs-d-top{padding-top:12px; padding-bottom:8px;}
  .cs-d-head h2 small{display:none;}
  .cs-d-glyph{width:36px; height:36px;}
  .cs-d-tools{margin-top:10px; gap:8px;}
  .cs-d-search{flex:2 1 220px;}
  .cs-drawer select{flex:1 1 130px;}
  .cs-d-search input, .cs-drawer select{padding-top:9px; padding-bottom:9px;}
}
@media (prefers-reduced-motion: reduce){
  .cs-drawer, .cs-drawer.is-open, .cs-row, .cs-row::before, .cs-proof-latest, .cs-proof-all, .cs-proof-all span,
  .cs-chip, .cs-media img, .cs-yt-play, .cs-related-all span, .cs-pill, .cs-d-close{transition:none;}
  .cs-st:not(:last-child)::after{animation:none;}
  .cs-row:hover, .cs-row:focus-visible{transform:none;}
  .cs-media a:hover img{transform:none;}
}