/* DOCTOR / BIOGRAPHY PAGE («Ιατρός», LIVE /βιογραφικο/). Loaded after tokens.css + site-chrome.css (locked global
   header/footer, untouched here). Design base: the owner-provided hero concept (portrait · breadcrumb · eyebrow · H1 ·
   credentials · intro · phone + office CTAs · 01/02/03 rail), in the approved charcoal/graphite + petrol + gold system.
   The portrait stands free on the rail line: no card, box, frame, shape or backdrop behind it.
   The biography text is the LIVE text; this file only lays it out. Real document flow, no negative margins/transforms. */
:root{--doc-gutter:clamp(20px,3.5vw,72px);--doc-max:1480px}
.doc__wrap,.page-doctor .phero .wrap{width:min(100% - 2 * var(--doc-gutter),var(--doc-max));margin-inline:auto}

/* ---------- hero: continues the header's page-facing graphite (#505050) → charcoal ---------- */
.phero--doctor.zone--navy{background:linear-gradient(180deg,var(--char-2) 0%,var(--char-1) 100%);padding-top:44px}
.phero--doctor .phero__grid{grid-template-columns:auto minmax(0,1fr);gap:clamp(40px,5vw,96px)}
/* portrait = the owner reference motif (Round 2.2 .pt--doctor geometry from style.css: petrol quadrant rounded top-right,
   thin offset outline, short gold ground line on the rail line), scaled to the photo's native 352px width (380→352,
   same proportions) so the approved sharper cutout is never upscaled */
.phero--doctor .pt{--pt-w:352px;--pt-shape-w:306px;--pt-shape-h:370px;--pt-r:185px;--pt-off:24px;--pt-gw:52px;margin:0}
.phero--doctor .phero__text{max-width:none;padding-bottom:48px}
.phero--doctor .crumbs ol{color:var(--on-navy-2)}
.phero--doctor .crumbs a{text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px}
.phero--doctor .crumbs a:hover{color:var(--gold)}
.phero--doctor .phero__h{font-size:clamp(38px,4vw,58px)}
.phero--doctor .phero__creds{font-size:17px;color:#fff;gap:8px;margin-bottom:22px}
.phero--doctor .phero__lead{font-size:19px;line-height:1.7;color:#E4E4E1;max-width:68ch}
.phero--doctor .phero__lead strong{color:#fff}
.phero--doctor .phero__lead a{color:#fff;text-decoration:underline;text-decoration-color:rgba(232,201,90,.6);text-underline-offset:3px}
.phero--doctor .phero__lead a:hover{color:var(--gold)}
.phero__cta{position:relative}
.phero--doctor .hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.phero--doctor .picker{left:0}
.phero--doctor .phero__rail{border-top-color:rgba(255,255,255,.2)}
.phero--doctor .phero__rail a{font-size:17px}

/* ---------- intro (the two LIVE paragraphs after the hero) ---------- */
.doc-intro{background:#fff;padding:72px 0 64px}
.doc-intro__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,72px)}
.doc-intro p{margin:0;font-size:19px;line-height:1.75;color:var(--char-0)}

/* ---------- the three biography parts (anchors of the hero rail) ---------- */
.doc-part{background:#fff;padding:72px 0;border-top:1px solid var(--line)}
.doc-part--off{background:var(--off);border-top-color:transparent}
.doc-part__grid{display:grid;grid-template-columns:minmax(260px,.36fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:start}
.doc-part__n{margin:0 0 10px;color:var(--gold-t);font-weight:var(--fw-m);font-size:15px;letter-spacing:.08em}
.doc-part__n::after{content:"";display:block;width:40px;height:2px;background:var(--gold);margin-top:12px}
.doc-part__h{margin:0;font-size:clamp(28px,2.6vw,38px);line-height:1.15;color:var(--char-0)}
.doc-part__ic{display:block;font-size:.8em;margin-bottom:10px;line-height:1}
.doc-part__body{font-size:19px;line-height:1.75;color:var(--char-0)}
.doc-part__body > :first-child{margin-top:0}
.doc-part__body > :last-child{margin-bottom:0}
.doc-part__body p{margin:0 0 18px}
.doc-part__body a{color:var(--petrol);text-underline-offset:3px;text-decoration-color:rgba(5,116,133,.4)}
.doc-part__body a:hover{color:var(--petrol-d);text-decoration-color:currentColor}
.doc-part__body strong{color:var(--char-0)}
.doc-part__body strong a{color:var(--petrol)}

/* 01 · three facts side by side, each with its LIVE bold label */
.doc-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3vw,48px)}
.doc-facts li{border-top:2px solid var(--char-0);padding-top:16px}
.doc-facts li strong{display:block;margin-bottom:6px;font-size:17px;letter-spacing:.01em}

/* 02 · the two hospitals, the kicker, the note and the three LIVE accordions */
.doc-hosp{list-style:none;margin:0 0 32px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px clamp(24px,3vw,48px)}
.doc-hosp li{border-left:3px solid var(--gold);padding:4px 0 4px 16px}
.doc-kicker{font-weight:var(--fw-h);font-size:21px;color:var(--char-0);margin:40px 0 4px!important}
.doc-note{color:var(--muted);font-size:16px}
.doc-part .acc-group{border-top:1px solid var(--line);margin-top:8px}
.doc-part .acc{border-bottom:1px solid var(--line)}
.doc-part .acc summary{font-size:19px;color:var(--char-0);padding:20px 4px}
.doc-part .acc summary:hover{color:var(--petrol)}
.doc-part .acc__body{padding:0 4px 22px}
.doc-part .acc__body ul{padding-left:1.2em;display:grid;gap:10px}
.doc-part .acc__body li::marker{color:var(--gold-t)}
.doc-part .acc__body em{color:var(--muted)}

/* 03 · closing signature (the LIVE lines after the separator) */
.doc-sign{margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
.doc-sign p{margin:0 0 4px}
.doc-sign p:nth-child(2){font-weight:var(--fw-h);color:var(--char-0);font-size:21px;margin-top:8px}
.doc-sign p:last-child{color:var(--gold-t);font-weight:var(--fw-m);font-size:15px;letter-spacing:.06em}

/* ---------- tablet ---------- */
@media (max-width:1180px){
  .phero--doctor .pt{--pt-w:300px;--pt-shape-w:262px;--pt-shape-h:318px;--pt-r:160px;--pt-off:20px;--pt-gw:44px}
  .phero--doctor .phero__rail ol{grid-template-columns:repeat(3,1fr)}
  .phero--doctor .phero__rail li+li a{padding-left:20px;border-left:1px solid rgba(255,255,255,.2);border-top:0}
  .doc-part__grid{grid-template-columns:1fr;gap:24px}
  .doc-part__ic{display:inline;margin:0 .2em 0 0}
}

/* ---------- mobile: design-base composition (portrait beside the eyebrow on one line), no frame ---------- */
@media (max-width:767px){
  .phero--doctor.zone--navy{padding-top:16px}
  .phero--doctor .pt{--pt-w:160px;--pt-shape-w:136px;--pt-shape-h:164px;--pt-r:82px;--pt-off:12px;--pt-gw:32px}
  .phero--doctor .phero__grid{grid-template-areas:"crumbs crumbs" "pt eyebrow" "h1 h1" "creds creds" "lead lead" "cta cta";gap:0 14px}
  .phero--doctor .phero__grid::before{background:rgba(255,255,255,.22)}
  .phero--doctor .phero__eyebrow{font-size:16px}
  .phero--doctor .phero__h{font-size:34px}
  .phero--doctor .phero__creds{font-size:15.5px}
  .phero--doctor .phero__lead{font-size:17px}
  .phero__cta{grid-area:cta;padding-bottom:28px}
  .phero--doctor .hero__acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0}
  .phero--doctor .hero__acts .pill{padding-inline:10px;font-size:15px}
  .phero--doctor .picker{position:static;width:auto;margin:12px 0 0;padding:14px 16px 10px;box-shadow:none;border-radius:var(--r)}
  .picker__list{grid-template-columns:1fr}
  .picker__item+.picker__item{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:12px}
  .phero--doctor .phero__rail ol{grid-template-columns:1fr}
  .phero--doctor .phero__rail li+li a{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.2)}
  .phero--doctor .phero__rail a{font-size:16px;padding:14px 0}
  .doc-intro{padding:40px 0 36px}
  .doc-intro__grid{grid-template-columns:1fr;gap:18px}
  .doc-intro p,.doc-intro p:first-child{font-size:17.5px;line-height:1.7}
  .doc-part{padding:44px 0}
  .doc-part__h{font-size:26px}
  .doc-part__body{font-size:17px;line-height:1.7}
  .doc-facts{grid-template-columns:1fr;gap:18px}
  .doc-hosp{grid-template-columns:1fr}
  .doc-kicker{font-size:19px;margin-top:28px!important}
  .doc-part .acc summary{font-size:17px;padding:16px 2px}
}

/* ---------- owner correction (2026-09-28): one broad, symmetrical downward curve closes the dark hero ----------
   Highest at both viewport edges, lowest through the centre; a single cubic curve in the hero's bottom colour,
   drawn in normal flow directly after the hero (no negative margins, nothing overlaps the rail above it). */
.doc-curve{background:#fff;line-height:0}
.doc-curve svg{display:block;width:100%;height:clamp(12px,2.15vw,44px)}
.doc-curve path{fill:var(--char-1)}
.phero--doctor .phero__rail{padding-bottom:20px}
/* the small Swedish flag next to its heading (drawn inline: Windows has no flag emoji glyphs) */
.doc-part__ic--flag svg{display:inline-block;width:1.2em;height:.75em;border-radius:2px;box-shadow:0 0 0 1px rgba(11,11,11,.12);vertical-align:baseline}