/* CONTACT PAGE («Επικοινωνία», LIVE /βιογραφικο/epikinonia/). Loaded after tokens.css + site-chrome.css (locked global
   header/footer, untouched here). All LIVE text of the page is kept verbatim, only re-laid out.
   OWNER-APPROVED VISUAL REFERENCE (2026-09-28) for the top of the page:
   1 hero    — contact photo (bg-contact-dice.jpg) in its own colours, centred H1 «Επικοινωνία & Προσωπική Φροντίδα»
               (the LIVE heading, shown once), and the Facebook + «Δείτε το βίντεο» controls in the reference's
               EXACT colours (owner rule: these two keep the reference colours, not the page palette).
   2 clinics — the two clinic cards (waiting-room photo, «+3 φωτογραφίες», LIVE address line, call, «Οδηγίες», map
               facade, «Σελίδα ιατρείου») overlapping the photo's lower edge.
   3 intro   — «Είμαστε δίπλα σας!», the two paragraphs, and the
               mobile/e-mail card. */
:root{--c-gutter:clamp(20px,3.5vw,72px);--c-max:1220px;--c-overlap:clamp(120px,10vw,150px)}
.cwrap{width:min(100% - 2 * var(--c-gutter),var(--c-max));margin-inline:auto}

/* ---------- 1 hero ---------- */
.chero{position:relative;isolation:isolate;overflow:hidden;color:#fff;text-align:center;background:var(--char-1)}
.chero__bg{position:absolute;inset:0;z-index:-2}
.chero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
/* owner (2026-09-28): the photo keeps its OWN colours (navy cubes, white symbols, natural hands) exactly as in the
   reference — no colour treatment; only a neutral black shade at the top and bottom edges (the reference look) and a
   light even veil so the white title reads; no petrol/graphite tint */
.chero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.18) 24%,rgba(0,0,0,.14) 55%,rgba(0,0,0,.5) 100%)}
.chero__in{position:relative;width:min(100% - 2 * var(--c-gutter),var(--c-max));margin-inline:auto;padding:clamp(40px,4vw,60px) 0 calc(var(--c-overlap) + clamp(56px,5vw,84px))}
.chero__crumbs{display:flex;justify-content:center}
.chero .crumbs ol{justify-content:center;color:#E4E4E1;text-shadow:0 1px 8px rgba(0,0,0,.5);margin:0 0 clamp(28px,3vw,44px)}
.chero .crumbs a{color:#fff;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px}
.chero .crumbs a:hover{color:var(--gold)}
.chero__h{margin:0;color:#fff;font-size:clamp(40px,4.6vw,66px);line-height:1.06;letter-spacing:-.015em;text-shadow:0 2px 24px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.45)}
.chero__social{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:clamp(26px,2.6vw,36px)}
/* the two controls — reference colours 1:1 (sampled: circle #057485 with white "f"; pill #131313, gold ring/border,
   gold play mark, white label) */
.chero__fb{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#057485;color:#FDFCF4;font-weight:800;font-size:20px;line-height:1;text-decoration:none;transition:background-color var(--m-fast)}
.chero__fb:hover{background:#075C69}
.chero__fb:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.vcta{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 20px 0 6px;border-radius:999px;cursor:pointer;background:#131313;border:1px solid rgba(232,201,90,.5);color:#fff;font:inherit;font-size:15px;font-weight:var(--fw-m);letter-spacing:.01em;transition:border-color var(--m-normal) var(--ease-std),background-color var(--m-normal) var(--ease-std)}
.vcta__icon{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--gold);color:var(--gold);transition:transform var(--m-normal) var(--ease-std),background-color var(--m-normal) var(--ease-std),color var(--m-normal)}
.vcta__icon svg{margin-left:2px}
.vcta__t{position:relative;padding:2px 0}
.vcta__t::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--m-normal) var(--ease-std)}
.vcta:hover,.vcta:focus-visible{border-color:var(--gold);background:#0B0B0B}
.vcta:hover .vcta__icon,.vcta:focus-visible .vcta__icon{transform:translateX(2px) scale(1.05);background:var(--gold);color:#131313}
.vcta:hover .vcta__t::after,.vcta:focus-visible .vcta__t::after{transform:scaleX(1)}
.vcta:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.vcta,.vcta__icon,.vcta__t::after{transition:none}}
.vdlg{width:min(960px,calc(100vw - 32px));max-width:none;padding:0;border:0;background:#000;border-radius:var(--r-lg);overflow:visible;box-shadow:0 24px 60px rgba(11,11,11,.5)}
.vdlg::backdrop{background:rgba(11,11,11,.82)}
.vdlg__frame{aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden}
.vdlg__frame iframe{display:block;width:100%;height:100%;border:0}
.vdlg__x{position:absolute;right:0;top:-52px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(11,11,11,.4);color:#fff;display:grid;place-items:center;cursor:pointer}
.vdlg__x:hover{background:rgba(255,255,255,.12)}
.vdlg__x:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ---------- 2 clinics (overlap the photo's lower edge, as in the reference) ---------- */
.clinics{position:relative;z-index:1;display:flow-root;background:#fff;padding:0 0 clamp(64px,6vw,96px)}
.clinics > .cwrap{margin-top:calc(-1 * var(--c-overlap))}
.clinics__h{margin:0 0 18px;text-align:center;color:var(--gold);font-size:13px;font-weight:var(--fw-m);letter-spacing:.14em;position:relative;top:calc(-1 * clamp(24px,2.4vw,32px));text-shadow:0 1px 3px rgba(0,0,0,.8),0 0 14px rgba(0,0,0,.65)}
.clinics__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.2vw,28px)}
.clinic{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 22px 48px rgba(11,11,11,.14)}
.clinic__photo{position:relative;overflow:hidden}
.clinic__photo img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform var(--m-image,.6s) var(--ease-out,ease-out)}
@media (hover:hover){.clinic__photo:hover img{transform:scale(1.03)}}
.clinic__more{position:absolute;right:12px;bottom:12px;display:inline-flex;gap:6px;align-items:center;min-height:44px;padding:8px 16px;border-radius:999px;background:rgba(19,19,19,.86);color:#fff;text-decoration:none;font-size:13px;font-weight:var(--fw-m)}
.clinic__more:hover{background:#0B0B0B}
.clinic__body{display:grid;gap:14px;padding:clamp(22px,2.2vw,30px)}
.clinic__h{margin:0;font-size:clamp(22px,1.8vw,26px);letter-spacing:.02em;color:var(--char-0)}
.clinic__addr{margin:0;font-size:17px;line-height:1.7;color:var(--muted)}
.clinic__tel{display:flex;width:max-content;align-items:center;gap:8px;margin:12px 0 0;padding:6px 16px 6px 12px;min-height:46px;border-radius:999px;background:var(--petrol);color:#fff!important;text-decoration:none}
.clinic__tel b{font-weight:800;font-size:17px}
.clinic__tel:hover{background:var(--petrol-d)}
.clinic__acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:0}
.clinic__dir,.clinic__acts .tlink{min-height:44px}
.cmap{position:relative;aspect-ratio:16/7;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#E9EEEF}
.cmap__art{position:absolute;inset:0;background:linear-gradient(90deg,transparent 48%,#fff 48% 52%,transparent 52%) 0 0/120px 120px,linear-gradient(0deg,transparent 46%,#fff 46% 54%,transparent 54%) 0 0/160px 80px,linear-gradient(32deg,transparent 49%,#D5DDE0 49% 51%,transparent 51%),#E9EEEF}
.cmap__pin{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--petrol);color:#fff;box-shadow:0 0 0 9px rgba(5,116,133,.16)}
.cmap__pin svg{width:22px;height:22px}
.cmap__btn{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);min-height:44px;padding:10px 20px;border-radius:999px;border:1px solid var(--petrol);background:#fff;color:var(--petrol);font:inherit;font-weight:var(--fw-m);font-size:15px;white-space:nowrap;cursor:pointer;transition:background-color var(--m-fast),color var(--m-fast)}
.cmap__btn:hover{background:var(--petrol);color:#fff}
.cmap__btn:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.cmap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cmap.is-live .cmap__art,.cmap.is-live .cmap__pin{display:none}

/* ---------- 3 intro + mobile/e-mail card ---------- */
.cintro{background:var(--off);padding:clamp(64px,6vw,88px) 0 clamp(72px,6.5vw,96px)}
.cintro__grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(340px,.7fr);gap:clamp(40px,5vw,88px);align-items:start}
.cintro__text p{margin:0 0 18px;font-size:18.5px;line-height:1.75;color:var(--char-0);max-width:66ch}
.cintro__text .cintro__lead{font-weight:var(--fw-h);font-size:clamp(30px,2.8vw,42px);line-height:1.12;letter-spacing:-.01em;margin-bottom:22px}
.cintro__text .cintro__lead::after{content:"";display:block;width:48px;height:3px;background:var(--gold);margin-top:18px}
.ccard{border-radius:20px;padding:clamp(28px,2.6vw,40px);color:#fff;background:linear-gradient(160deg,var(--char-2) 0%,var(--char-1) 55%,var(--char-0) 100%);box-shadow:0 24px 48px rgba(11,11,11,.18)}
.ccard p{margin:0}
.ccard__sup{color:var(--gold);font-size:13px;font-weight:var(--fw-m);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px!important}
.ccard__num a{display:inline-flex;align-items:center;gap:14px;color:#fff;text-decoration:none;font-weight:800;font-size:clamp(32px,2.9vw,44px);letter-spacing:-.01em;min-height:48px}
.ccard__num svg{width:30px;height:30px;color:var(--gold);flex:none}
.ccard__num a:hover{color:var(--gold)}
.ccard__txt{color:#E4E4E1;font-size:17px;margin-top:6px!important}
.ccard__sup--mail{margin-top:28px!important;padding-top:24px;border-top:1px solid rgba(255,255,255,.14)}
.ccard__mail a{display:inline-flex;align-items:center;gap:10px;color:#fff;font-size:19px;min-height:44px;text-underline-offset:4px;text-decoration-color:rgba(232,201,90,.6);overflow-wrap:anywhere}
.ccard__mail svg{color:var(--gold);flex:none}
.ccard__mail a:hover{color:var(--gold)}

/* ---------- tablet ---------- */
@media (max-width:1180px){
  .cintro__grid{grid-template-columns:1fr}
  .ccard{max-width:640px}
}
@media (max-width:900px){
  .clinics__grid{grid-template-columns:1fr;max-width:640px;margin-inline:auto}
}

/* ---------- mobile ---------- */
@media (max-width:767px){
  :root{--c-overlap:64px}
  .chero__in{padding:22px 0 calc(var(--c-overlap) + 44px)}
  .chero .crumbs ol{margin-bottom:22px}
  .chero__h{font-size:34px}
  .chero__social{gap:12px;margin-top:22px}
  .clinics__h{top:-22px;margin-bottom:10px}
  .clinics__grid{gap:18px}
  .clinic__body{padding:20px 18px 22px}
  .clinic__addr{font-size:16.5px}
  .clinic__tel{width:100%;justify-content:center;min-height:52px}
  .clinic__acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .clinic__dir,.clinic__acts .tlink{justify-content:center}
  .cmap{aspect-ratio:16/10}
  .cintro{padding:44px 0 52px}
  .cintro__text p{font-size:17px;line-height:1.7}
  .cintro__text .cintro__lead{font-size:28px}
  .ccard{border-radius:16px;padding:24px 20px}
  .ccard__num a{font-size:32px}
  .ccard__mail a{font-size:17px}
}