/* SERVICES PAGE («Ιατρικές Υπηρεσίες», LIVE /υπηρεσίες-ιατρού/). Loaded after tokens.css + site-chrome.css (locked
   global header/footer, untouched here).
   Hero (owner-locked reference): the exam-room photo of the source (bg-services-exam.jpg,
   parallax kept) under a graphite overlay that keeps the photo visible, the large H1, and the site's large white wave
   asset (wave-right-03.png) as the photo's lower edge.
   Below: the five LIVE service links as one editorial grid of photo cards (the first one large), then the approved
   homepage call band. Content (titles, URLs, images, «Περισσότερα») is exactly the source's. */
:root{--svc-gutter:clamp(20px,3.5vw,72px);--svc-max:1760px}
.page-services .bbwrap,.svc__wrap{width:min(100% - 2 * var(--svc-gutter),var(--svc-max));margin-inline:auto}

/* ---------- hero ---------- */
.phero-cur--services.bbs--grad::before{background:
  linear-gradient(180deg,var(--char-2) 0%,rgba(80,80,80,.55) 8%,rgba(80,80,80,0) 26%),
  linear-gradient(90deg,rgba(16,16,16,.8) 0%,rgba(22,22,22,.62) 32%,rgba(28,28,28,.26) 60%,rgba(28,28,28,.1) 100%)}
@media (min-width:768px){
  .phero-cur--services{min-height:clamp(560px,48vw,760px)}
  .phero-cur--services .phero-cur__in{padding:clamp(150px,13vw,210px) 0 calc(var(--wave) + 80px)}
}
.phero-cur--services .crumbs ol{color:#E4E4E1;margin-bottom:22px;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.phero-cur--services .crumbs a{color:#fff;text-decoration-color:rgba(255,255,255,.5);text-underline-offset:3px}
.phero-cur--services .crumbs a:hover{color:var(--gold)}
.phero-cur--services .phero-cur__h{font-size:clamp(46px,5.4vw,84px);line-height:1.02;max-width:none;margin:0;letter-spacing:-.015em;text-shadow:0 2px 22px rgba(0,0,0,.42)}
.phero-cur--services .phero-cur__h::after{content:"";display:block;width:64px;height:3px;background:var(--gold);margin-top:26px}
/* the large white wave of the reference is the photo's real lower edge */
.bbs__wave--srv{z-index:3}

/* ---------- the five services: editorial photo grid ----------
   Desktop: 12 columns; 01 large (7 cols × 2 rows), 02 and 03 stacked beside it, 04 and 05 share the last row.
   Each card is the service photo with a graphite fade at the bottom carrying number, title and «Περισσότερα». */
.svc{background:#fff;padding:24px 0 96px}
.svc__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(260px,auto);gap:clamp(16px,1.6vw,24px)}
.svc__item--1{grid-column:1/8;grid-row:1/3}
.svc__item--2{grid-column:8/13;grid-row:1}
.svc__item--3{grid-column:8/13;grid-row:2}
.svc__item--4{grid-column:1/7;grid-row:3}
.svc__item--5{grid-column:7/13;grid-row:3}
.svc__item--4,.svc__item--5{min-height:clamp(300px,26vw,420px)}
.svc__card{position:relative;display:flex;align-items:flex-end;height:100%;min-height:inherit;border-radius:16px;overflow:hidden;isolation:isolate;text-decoration:none;color:#fff;background:var(--char-1)}
.svc__img{position:absolute;inset:0;z-index:-2}
.svc__img img{width:100%;height:100%;object-fit:cover;transition:transform var(--m-image,.6s) var(--ease-out,ease-out)}
.svc__card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,11,11,0) 38%,rgba(11,11,11,.5) 66%,rgba(11,11,11,.86) 100%);transition:opacity var(--m-normal,.3s)}
.svc__body{display:grid;gap:8px;padding:clamp(22px,2.4vw,38px);width:100%}
.svc__n{display:flex;align-items:center;gap:12px;color:var(--gold);font-weight:var(--fw-m);font-size:14px;letter-spacing:.1em}
.svc__n::after{content:"";width:32px;height:2px;background:var(--gold)}
.svc__t{margin:0;color:#fff;font-size:clamp(26px,2.3vw,36px);line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
.svc__item--1 .svc__t{font-size:clamp(34px,3.4vw,54px)}
.svc__more.tlink{color:#fff;margin-top:6px;font-size:16px;justify-self:start}
.svc__more svg{color:var(--gold)}
@media (hover:hover){
  .svc__card:hover .svc__img img{transform:scale(1.04)}
  .svc__card:hover .svc__more{background-size:calc(100% - 22px) 1px}
  .svc__card:hover .svc__more svg{transform:translateX(3px)}
}
.svc__card:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.svc__img img{transition:none}}

/* the call band sits directly on the footer's graphite: no gap between them */
.page-services .callband{margin:0}

/* ---------- tablet ---------- */
@media (max-width:1180px){
  .svc__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
  .svc__item--1{grid-column:1/-1;grid-row:auto;min-height:420px}
  .svc__item--2,.svc__item--3,.svc__item--4,.svc__item--5{grid-column:auto;grid-row:auto;min-height:320px}
}

/* ---------- mobile: photo hero kept (the source hid it), wave scaled; services as a stack of photo cards ---------- */
@media (max-width:767px){
  .phero-cur--services .bbs__bg,.phero-cur--services.bbs--grad::before{display:block}
  .phero-cur--services.bbs--grad::before{background:linear-gradient(180deg,var(--char-2) 0%,rgba(40,40,40,.68) 24%,rgba(28,28,28,.52) 62%,rgba(28,28,28,.3) 100%)}
  .phero-cur--services .phero-cur__in{padding:56px 0 calc(var(--wave) + 64px)}
  .phero-cur--services .phero-cur__h{font-size:42px}
  .phero-cur--services .phero-cur__h::after{width:48px;margin-top:18px}
  .svc{padding:12px 0 56px}
  .svc__grid{grid-template-columns:1fr;gap:14px}
  .svc__item--1,.svc__item--2,.svc__item--3,.svc__item--4,.svc__item--5{grid-column:1;min-height:0}
  .svc__card{aspect-ratio:4/3.3;border-radius:14px}
  .svc__item--1 .svc__card{aspect-ratio:4/4.2}
  .svc__body{padding:20px}
  .svc__t,.svc__item--1 .svc__t{font-size:26px}
  .svc__item--1 .svc__t{font-size:32px}
  .svc__more.tlink{min-height:44px;align-items:center;margin-top:0}
}