/* =====================================================================
   services.css — Σελίδα «Υπηρεσίες» (tpl-services.php, κατηγορία 42)
   Φορτώνεται ΜΟΝΟ σε αυτή τη σελίδα (page.php -> $extraCss).
   Χρησιμοποιεί αποκλειστικά τα tokens του style.css (--teal, --ink,
   --line, --r-md, --ease κ.λπ.) ώστε να «κουμπώνει» με το υπόλοιπο site.
   Prefix: .sv-*   ·   Responsive breakpoint site: 991px
   ===================================================================== */

/* ---------- hero ---------- */
.sv-hero .lead{max-width:760px}

/* ---------- ενότητα ---------- */
.sv-section{padding:44px 0 110px}
.sv-intro{padding-bottom:0}

/* ---------- μπάρα: εναλλαγή προβολής (πλέγμα / λίστα) ---------- */
.sv-bar{display:flex;align-items:center;justify-content:flex-end;margin-bottom:26px}
.sv-view{display:flex;gap:6px;padding:4px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill)}
.sv-vb{
  display:grid;place-items:center;width:36px;height:36px;
  border:0;border-radius:50%;background:transparent;cursor:pointer;transition:background .3s
}
.sv-vb svg{width:18px;height:18px;fill:none;stroke:var(--ink-soft);stroke-width:1.8;stroke-linecap:round;transition:stroke .3s}
.sv-vb:hover svg{stroke:var(--teal-deep)}
.sv-vb.on{background:var(--ink)}
.sv-vb.on svg{stroke:#fff}

/* ---------- grid ---------- */
.sv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

/* ---------- κάρτα ---------- */
.sv-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s;
}
/* reveal on scroll — ενεργό ΜΟΝΟ όταν τρέξει το js (.sv-ready)· χωρίς js
   οι κάρτες είναι κανονικά ορατές */
.sv-ready .sv-card{opacity:0;transform:translateY(22px);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s,opacity .45s var(--ease)}
.sv-ready .sv-card.in{opacity:1;transform:none;transition-delay:var(--sv-d,0ms)}
.sv-card:hover,.sv-card:focus-visible{
  transform:translateY(-6px);box-shadow:var(--shadow-md);
  border-color:hsl(var(--sv-h,172) 60% 55% / .45);outline:0
}
.sv-card:focus-visible{box-shadow:0 0 0 3px hsl(var(--sv-h,172) 60% 45% / .35),var(--shadow-md)}

/* pointer glow (js: --mx/--my) */
.sv-glow{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  transition:opacity .4s var(--ease);
  background:radial-gradient(220px 220px at var(--mx,50%) var(--my,0%),hsl(var(--sv-h,172) 70% 55% / .13),transparent 70%);
}
.sv-card:hover .sv-glow{opacity:1}

/* media */
.sv-media{
  position:relative;aspect-ratio:16/10;overflow:hidden;
  background:
    radial-gradient(120% 120% at 78% 4%,hsl(var(--sv-h,172) 48% 27%),hsl(calc(var(--sv-h,172) + 22) 55% 13%));
}
.sv-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease);
}
.sv-card:hover .sv-media img{transform:scale(1.06)}
/* default εικαστικό: μεγάλο διακριτικό icon (μόνο όταν ΔΕΝ υπάρχει φωτο) */
.sv-art{position:absolute;right:-16px;bottom:-26px;width:190px;height:190px;opacity:.16}
.sv-art svg{width:100%;height:100%;fill:none;stroke:#fff;stroke-width:.9;stroke-linecap:round;stroke-linejoin:round}
.sv-media.has-img .sv-art{display:none}
/* διακριτικές γραμμές πλέγματος στο default εικαστικό */
.sv-media::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background:linear-gradient(hsl(0 0% 100% / .06) 1px,transparent 1px) 0 0/100% 34px;
}
.sv-media.has-img::after{
  background:linear-gradient(180deg,transparent 42%,rgba(10,26,25,.55));opacity:1
}
.sv-num{
  position:absolute;top:16px;right:18px;z-index:3;
  font-family:'TT Norms Pro',sans-serif;font-weight:700;font-size:13px;letter-spacing:.14em;
  color:rgba(255,255,255,.72)
}
.sv-ico{
  position:absolute;left:16px;bottom:16px;z-index:3;
  display:grid;place-items:center;width:48px;height:48px;border-radius:15px;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(6px);
  transition:transform .45s var(--ease),background .35s,border-color .35s
}
.sv-ico svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sv-card:hover .sv-ico{transform:translateY(-3px) scale(1.06);background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.5)}

/* body */
.sv-body{display:flex;flex-direction:column;flex:1;padding:24px 26px 26px;position:relative;z-index:3}
.sv-body h3{
  font-family:'TT Norms Pro',sans-serif;font-weight:700;font-size:21px;
  letter-spacing:-.015em;line-height:1.2;margin-bottom:10px;transition:color .3s
}
.sv-card:hover .sv-body h3{color:var(--teal-deep)}
.sv-body p{font-size:14.5px;line-height:1.6;color:var(--ink-soft);margin-bottom:20px}
.sv-more{
  margin-top:auto;display:inline-flex;align-items:center;gap:9px;
  font-family:'TT Norms Pro',sans-serif;font-weight:600;font-size:14.5px;color:var(--teal-deep)
}
.sv-more .arr{transition:transform .35s var(--ease)}
.sv-card:hover .sv-more .arr{transform:translateX(6px)}
/* γραμμή-accent που «τρέχει» στο hover */
.sv-card::after{
  content:"";position:absolute;left:0;bottom:0;z-index:4;height:3px;width:0;
  background:hsl(var(--sv-h,172) 62% 45%);transition:width .5s var(--ease)
}
.sv-card:hover::after{width:100%}

/* ---------- προβολή λίστας ---------- */
.sv-grid.is-list{grid-template-columns:1fr;gap:14px}
.sv-grid.is-list .sv-card{flex-direction:row;align-items:stretch}
.sv-grid.is-list .sv-media{flex:0 0 260px;aspect-ratio:auto}
.sv-grid.is-list .sv-art{width:150px;height:150px;bottom:-34px}
.sv-grid.is-list .sv-body{padding:26px 30px}
.sv-grid.is-list .sv-body p{max-width:70ch}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .sv-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:991px){
  .sv-section{padding:32px 0 80px}
  .sv-grid.is-list .sv-media{flex-basis:200px}
}
@media (max-width:700px){
  .sv-grid,.sv-grid.is-list{grid-template-columns:1fr;gap:16px}
  .sv-bar{display:none}                      /* σε κινητό μόνο η προβολή πλέγματος */
  .sv-grid.is-list .sv-card{flex-direction:column}
  .sv-grid.is-list .sv-media{flex:none;aspect-ratio:16/10}
  .sv-body{padding:22px 22px 24px}
}

/* ---------- λιγότερη κίνηση ---------- */
@media (prefers-reduced-motion:reduce){
  .sv-ready .sv-card{opacity:1;transform:none;transition:none}
  .sv-card:hover{transform:none}
  .sv-card:hover .sv-media img{transform:none}
  .sv-glow{display:none}
}