/* IVF / IUI PAGE («Εξωσωματική Γονιμοποίηση / Σπερματέγχυση», LIVE /εξωσωματική-γονιμοποίηση-σπερματέγ/, page 4171).
   Loaded after tokens.css + site-chrome.css (locked global header/footer, untouched here). Owner rules (2026-09-28):
   content locked, presentation free, a real (compact) hero visual, no extra UI.
   Personality: tender and precise. Hero (owner correction 2026-09-28) = a natural photograph of a newborn's hand holding
   a parent's finger on the right, melting into warm paper on the left where the title sits, its «/» in gold. Below, the
   two methods as a diptych of two equal panels rising over the hero edge. Mobile: the panels stack. */
:root{--x-gutter:clamp(20px,4vw,72px);--x-max:1180px;--x-ov:clamp(40px,4.4vw,72px)}
.page-exosomatiki .callband{margin:0}

/* ---------- hero ---------- */
.xh{position:relative;isolation:isolate;overflow:hidden;
  background:radial-gradient(ellipse 40% 70% at 4% 110%,rgba(5,116,133,.14) 0%,rgba(5,116,133,0) 70%),
             radial-gradient(ellipse 30% 60% at 30% 0%,rgba(232,201,90,.16) 0%,rgba(232,201,90,0) 70%),
             linear-gradient(90deg,#F6F2EC 0%,#EFE8DE 100%)}
/* the photograph fills the right ~64% and melts into the warm paper on the left, where the title sits */
.xh__bg{position:absolute;top:0;bottom:0;right:0;width:64%;z-index:-1;
  -webkit-mask:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.65) 18%,#000 36%);mask:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.65) 18%,#000 36%)}
.xh__bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:40% 45%}
.xh__in{width:min(100% - 2 * var(--x-gutter),var(--x-max));margin-inline:auto;min-height:clamp(340px,28vw,440px);box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,3vw,48px) 0 calc(var(--x-ov) + clamp(40px,4vw,72px))}
.xh .crumbs ol{color:#5A5F60;margin-bottom:clamp(12px,1.4vw,18px)}
.xh .crumbs a{color:#05606E;text-decoration-color:rgba(5,96,110,.35);text-underline-offset:3px}
.xh .crumbs a:hover{color:var(--petrol-d)}
.xh__h{margin:0;max-width:17ch;font-size:clamp(32px,3.7vw,56px);line-height:1.08;letter-spacing:-.025em;font-weight:var(--fw-h);color:var(--ink)}
.xh__nb{white-space:nowrap}          /* «Γονιμοποίηση /» stays together: no line starts with the slash */
.xh__slash{color:var(--gold-t);font-weight:500}
.xh__h::after{content:"";display:block;width:56px;height:3px;border-radius:3px;background:var(--gold);margin-top:clamp(14px,1.6vw,22px)}

/* ---------- diptych ---------- */
.xd{position:relative;background:linear-gradient(180deg,#EEF4F4 0%,#fff 60%);padding-bottom:clamp(64px,7vw,112px)}
.xd__in{position:relative;width:min(100% - 2 * var(--x-gutter),var(--x-max));margin-inline:auto;top:calc(-1 * var(--x-ov));margin-bottom:calc(-1 * var(--x-ov))}
.xd__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px)}
.xdc{position:relative;height:100%;display:flex;flex-direction:column;background:#fff;border-radius:28px;overflow:hidden;
  box-shadow:0 34px 64px -40px rgba(9,40,46,.45),0 1px 3px rgba(9,40,46,.05);transition:transform .3s var(--ease-std,ease),box-shadow .3s var(--ease-std,ease)}
.xdc:hover{transform:translateY(-4px);box-shadow:0 40px 72px -38px rgba(9,40,46,.5),0 1px 3px rgba(9,40,46,.05)}
.xdc__media{display:block;aspect-ratio:4/3;overflow:hidden;background:#dfe7e8}
.xdc__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-std,ease)}
.xdc:hover .xdc__media img{transform:scale(1.04)}
.xdc__body{flex:1;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(24px,2.6vw,38px)}
.xdc__n{margin:0 0 10px;display:flex;align-items:center;gap:12px;font-size:14px;font-weight:var(--fw-h);letter-spacing:.12em;color:var(--gold-t);font-variant-numeric:tabular-nums}
.xdc__n::after{content:"";width:36px;height:2px;border-radius:2px;background:var(--gold)}
.xdc__t{margin:0 0 clamp(20px,2vw,28px);font-size:clamp(24px,2.2vw,34px);line-height:1.15;letter-spacing:-.02em;font-weight:var(--fw-h)}
.xdc__t a{color:var(--ink);text-decoration:none;transition:color .15s ease}
.xdc__t a:hover{color:var(--petrol)}
.xdc__more{margin:auto 0 0}
.xdc__btn svg{transition:transform .15s ease}
.xdc__btn:hover svg{transform:translateX(3px)}
/* ---------- mobile: stacked panels ---------- */
@media (max-width:767px){
  /* owner correction (2026-09-28): on mobile the photo is darkened (not washed out) with light text over it, and the
     first panel no longer overlaps the hero */
  :root{--x-ov:0px}
  .xh{background:#3A2C22}
  .xh__bg{width:100%;-webkit-mask:none;mask:none}
  .xh__bg img{object-position:40% 50%}
  .xh__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,20,14,.62) 0%,rgba(30,20,14,.42) 50%,rgba(30,20,14,.55) 100%)}
  .xh__in{min-height:280px;justify-content:center;padding:22px 0 30px}
  .xh .crumbs ol{color:#EADFD2}
  .xh .crumbs a{color:#fff;text-decoration-color:rgba(255,255,255,.45)}
  .xh__h{font-size:clamp(28px,8vw,36px);max-width:none;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.35)}
  .xh__slash{color:var(--gold)}
  .xd{padding-top:26px}
  .xd__list{grid-template-columns:1fr;gap:22px}
  .xdc{border-radius:22px}
  .xdc__body{padding:20px 20px 24px}
  .xdc__t{font-size:24px;margin-bottom:18px}
}
@media (prefers-reduced-motion:reduce){
  .xdc,.xdc__media img,.xdc__btn svg{transition:none}
  .xdc:hover,.xdc:hover .xdc__media img{transform:none}
}