/* MATERNITY – HOSPITAL PAGE («Μαιευτήριο – Νοσοκομείο», LIVE /γυναικολόγος-δημητροκάλλης-χαλάνδρι/, page 3392). Loaded
   after tokens.css + site-chrome.css (locked global header/footer, untouched here). Owner rules (2026-09-28): content
   locked, presentation free, a real and compact hero, no extra UI, mobile contrast and separation.
   Personality: exact and trustworthy. Hero (owner decision) = an authentic photograph of the real MITERA maternity
   hospital on the right, melting into a deep petrol field that holds the title.
   Topics = an editorial «ledger»: numbered rows — title, image, «Περισσότερα» — on warm paper; tablet keeps the rows
   with the button under the title; mobile turns each row into a separated card. */
:root{--m-gutter:clamp(20px,4vw,72px);--m-max:1180px}
.page-maieftirio .callband{margin:0}

/* ---------- hero ---------- */
.mh{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  background:radial-gradient(ellipse 36% 80% at 36% 20%,rgba(232,201,90,.12) 0%,rgba(232,201,90,0) 70%),
             linear-gradient(100deg,#082C33 0%,#0C3239 45%,#16292C 100%)}
/* the photograph of the real hospital sits on the right and melts into the petrol field; the pale sky is toned down */
.mh__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,.7) 20%,#000 40%);mask:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.7) 20%,#000 40%)}
.mh__bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.mh__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,44,51,.5) 0%,rgba(8,44,51,0) 45%),
  linear-gradient(180deg,rgba(8,44,51,.45) 0%,rgba(8,44,51,0) 32%,rgba(8,44,51,0) 75%,rgba(8,44,51,.35) 100%)}
.mh__in{width:min(100% - 2 * var(--m-gutter),var(--m-max));margin-inline:auto;min-height:clamp(360px,30vw,460px);box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:center;padding:clamp(32px,3.4vw,52px) 0}
.mh .crumbs ol{color:#CFE0E2;margin-bottom:clamp(12px,1.4vw,18px)}
.mh .crumbs a{color:#fff;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:3px}
.mh .crumbs a:hover{color:var(--gold)}
.mh__h{margin:0;font-size:clamp(34px,4vw,60px);line-height:1.06;letter-spacing:-.025em;font-weight:var(--fw-h);color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.3)}
.mh__h::after{content:"";display:block;width:56px;height:3px;border-radius:3px;background:var(--gold);margin-top:clamp(14px,1.6vw,22px)}

/* ---------- ledger ---------- */
.ml{background:linear-gradient(180deg,#F7F2EC 0%,#FBF9F6 55%,#fff 100%);padding:clamp(44px,5vw,84px) 0 clamp(64px,7vw,112px)}
.ml__list{list-style:none;margin:0 auto;padding:0;width:min(100% - 2 * var(--m-gutter),var(--m-max));counter-reset:none}
.ml__it + .ml__it{border-top:1px solid rgba(26,31,36,.1)}
.ml__it:last-child{border-bottom:1px solid rgba(26,31,36,.1)}
.mlr{display:grid;grid-template-columns:72px minmax(0,1fr) 260px auto;grid-template-areas:"n t m more";align-items:center;column-gap:clamp(20px,3vw,44px);
  padding:clamp(20px,2vw,28px) clamp(12px,1.4vw,20px);border-radius:22px;transition:background .25s ease}
.mlr:hover{background:rgba(5,116,133,.05)}
.mlr__n{grid-area:n;margin:0;font-size:clamp(28px,2.6vw,40px);font-weight:var(--fw-h);letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.2px var(--gold-t);font-variant-numeric:tabular-nums;line-height:1}
.mlr__t{grid-area:t;margin:0;font-size:clamp(21px,2vw,30px);line-height:1.2;letter-spacing:-.015em;font-weight:var(--fw-h)}
.mlr__t a{color:var(--ink);text-decoration:none;transition:color .15s ease}
.mlr__t a:hover,.mlr:hover .mlr__t a{color:var(--petrol)}
.mlr__media{grid-area:m;display:block;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:#E9E1D6;box-shadow:0 20px 40px -30px rgba(40,24,12,.45)}
.mlr__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-std,ease)}
.mlr:hover .mlr__media img{transform:scale(1.05)}
.mlr__more{grid-area:more;margin:0}
.mlr__btn svg{transition:transform .15s ease}
.mlr__btn:hover svg{transform:translateX(3px)}

/* ---------- tablet: button under the title ---------- */
@media (max-width:1023px){
  .mlr{grid-template-columns:56px minmax(0,1fr) 200px;grid-template-areas:"n t m" "n more m";row-gap:14px}
  .mlr__n{align-self:start;padding-top:4px}
  .mlr__more{align-self:start}
}
/* ---------- mobile: separated cards; darker photo behind the title ---------- */
@media (max-width:767px){
  .mh__bg{width:100%;-webkit-mask:none;mask:none}
  .mh__bg img{object-position:62% 40%}
  .mh__bg::after{background:linear-gradient(180deg,rgba(8,40,46,.66) 0%,rgba(8,40,46,.45) 45%,rgba(8,40,46,.8) 100%)}
  .mh__in{min-height:270px;justify-content:flex-end;padding:22px 0 30px}
  .mh .crumbs{margin-bottom:auto}
  .mh__h{font-size:clamp(30px,8.6vw,38px)}
  .ml{padding:26px 0 56px}
  .ml__it + .ml__it{border-top:0;margin-top:18px}
  .ml__it:last-child{border-bottom:0}
  .mlr{grid-template-columns:auto 1fr;grid-template-areas:"m m" "n t" "more more";row-gap:14px;column-gap:14px;padding:0 0 20px;
    background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 24px 48px -34px rgba(40,24,12,.45),0 1px 3px rgba(40,24,12,.05)}
  .mlr:hover{background:#fff}
  .mlr__media{border-radius:0;aspect-ratio:16/9;box-shadow:none}
  .mlr__n{padding-left:20px;font-size:28px;align-self:center}
  .mlr__t{padding-right:20px;font-size:21px}
  .mlr__more{padding:0 20px}
}
@media (prefers-reduced-motion:reduce){
  .mlr,.mlr__media img,.mlr__btn svg{transition:none}
  .mlr:hover .mlr__media img{transform:none}
}